1. HTMLの概要

HTMLはHyper Text Markup Languageの略称で、実際にはWebページを書くために特別に使用されるプログラミング言語です。。ほとんどの Web ページの基礎は HTML ステートメントです。

1. HTMLドキュメント

の基本構造ブラウザの耐障害性が高いため、すべてのページには少なくともこれらの部分が含まれている必要があります。それらは含まれていませんが、完全に記述するのが最善です。

2. HTMLファイルの書き方

HTMLファイルはASCII形式のファイルです。 ASCII ファイルを編集できるエディターで編集できます (HTML ファイルに漢字が含まれている場合は、漢字をサポートするエディターで編集する必要があります)。

3. HTMLファイルのデバッグ

ブラウザで直接開いて実行結果を確認します

◇ ヘッダー部分は補助的なものです。または HTML ページの属性情報のヘルプ、その中のコンテンツが最初にロードされます。ボディ部分は、ページデータが実際に保存される場所です。

◇ ほとんどのタグには開始タグと終了タグがあります。一部のタグは、機能が 1 つしかない、または変更する内容がないため、タグ内で終了することがあります。

◇ タグによって変更されたコンテンツに対してより豊富な操作を実行したい場合は、タグ内の属性を使用します。属性値を変更することで、より多くの効果オプションが追加されます。

◇ 属性と属性値を接続するには、「=」を使用します。属性値には二重引用符を使用することも、単一引用符を使用することも、引用符を使用しないこともできます。または社内規定の作成基準。

5. HTML ファイル内のタグ

1) 形式: <タグ名属性名='属性値'または

<タグ名属性名='属性値' />

ラベルはコンテナに相当します。コンテナ内のデータを操作するとは、コンテナの属性値を継続的に変更することです。

2. リスト

リストとは、情報を整理して整理する方法です。コンテンツを 1 つずつ水平方向に直感的にわかりやすく表示します。また、一般に、リストはテーブルほど複雑ではありません。

1. 順序なしリスト

<span style="font-size:14px;"><ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul></span>

ログイン後にコピー

2. 順序付きリスト

<span style="font-size:14px;"><ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol></span>

ログイン後にコピー

< ;dl>でリストをカスタマイズします; タグが開始されます。各カスタムリスト項目は

で始まります。各カスタムリスト項目の定義は

で始まります。

rree
結果:

コーヒー

ブラックホットドリンク

ミルク
白い冷たい飲み物
4.属性を持つ複合リストタグ ul と ol
1)

このタグは属性を持つことができ、

x为circle：条目以符号“○”引导。

x为square：条目以符号“■”引导。

2）

与

此标记会自动给条目排序并加上序号，也可带有属性：

a、 < ol type=" x ">

x为A：以大写字母排序。如A，B，C，D等。

x为a：以小写字母排序。如a，b，c，d等。

x为I：以大写罗马数字排序。如I，II，III，IV等。

x为i：以小写罗马数字排序。如i，ii，iii，iv等。

x为1：以阿拉伯数字排序。如1，2，3，4等。

b、

n是一个数字，此标记符表示重新定义的起始号。

<span style="font-size:14px;"><html>
<body>

<h4>Disc 项目符号列表：</h4>
<ul type="disc">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Circle 项目符号列表：</h4>
<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Square 项目符号列表：</h4>
<ul type="square">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

</body>
</html>
</span>

ログイン後にコピー

结果：

三、表格

使用表格基本能实现对页面元素在浏览器中随心所欲的排版定位。表格通常用来显示大量的、分类化的信息，具有表示清晰、明了的特点，使用十分广泛。表

格一般由以下几部分组成：表格名称、表格栏及表中数据。

1、border属性

使用表格的这一属性可以给表格加上框线。如

2、cellspacing属性

这一属性可以用来设置有线表格的单元格线的宽度，用法为

3、cellpadding属性

这一属性可以用来设置单元格线与数据之间的距离，用法为

隔）

4、

这是一对用来指明表格标题的标记，常用格式如：

5、

这对标记用来指明表格栏目行中的一项。一行可以由多项组成，必须嵌套在

文字会突出显示

6、nowrap属性可用于

和
和
及	超过一行，浏览器默认会自动换行显示。使用该属性进行屏蔽。四、超文本链接 href中不仅仅只能用file和http协议，其它协议也可以的，如thunder,mailto 1、页面链接用HTML创建超文本链接需要使用标记符（结束标记符不能省略），它的最基本属性是href，用于指定超文本链接的目标。通过为href指定不同的值，可以创建出不同类型的超链接。在HTML文件中用链接指针指向一个目标。其基本格式为：标记超文本链接信息 2、本地链接超文本链接指向自己的计算机中的某一个文件，叫本地链接。在文件中需要创建一个标签(即做一个记号)，为页面中需要跳转到的位置命名。命名时应使用标记符的name属性。格式如下：此处创建了一个标签 3、电子邮件链接如果希望用户在网页上通过链接直接打开客户端的发送邮件的工具发送电子邮件，则可以在网页内包含发送电子邮件的功能。实现此功能所需的全部工作就是在链接标记中插入mailto值。如:管理员信箱 4、迅雷下载链接 a.avi 5、超链接字体的颜色 1）link属性：设置超链接文字的颜色，默认为蓝色，格式： 2）vlink属性：设置鼠标指向超链接文字时，该链接文字的颜色，默认为红色，使用格式为： 6、自定义超链接自定义超链接(取消默认点击效果，触发自定义事件) 给href的属性值赋：javascript:void(0)，以屏蔽默认点击效果 7、href默认的协议是file，因此如果写成href=""，则是打开当前html文件所在的文件夹 target="_blank"这个属性可以让超链接的目标在另一个窗口中显示出来五、图像图像地图：应用：当要在图像中选取某一部分作为连接的时候。如：中国地图每个省所对应的区域。map标签要和img标签联合使用 <img src="Sunset.jpg" alt="图片说明文字" usemap="#map" /> <map > <area shape="rect" coords="50,59,116,104" href="1.html" /> <area shape="circle" coords="118,203,40" href="2.html" /> </map> ログイン後にコピー点击图片Sunset.jpg上面以（50,59）为矩形左上点，宽116，高为104区域时，链接到1.html页面；同理点击上面以（118,203）为圆心，40为半径区域时，链接到 2.html。六、表单提交方式（get/post） 1、两种方式的区别 1) get提交将数据显示在地址栏，对于敏感信息不安全。post提交不显示在地址栏，对于敏感信息安全 2) 地址栏中存放的数据是有限，所以get方式对提交的数据体积有限制。而post可以提交大体积数据。 3) 对提交数据的封装方式不同。get将提交数据封装到了http消息头的第一行即请求行中。而post将提交的数据封装到请求体(请求数据)体中。 2、表单提交方式与乱码问题无论是get还是post方式，对于Tomcat服务器端，默认的解码方式是ISO8859-1，因此中文会出现乱码。解决：通过用ISO8859-1进行编码，再用相应的中文码表进行解码即可。如果是post提交，可以使用request.setCharacterEncoding(“GBK”);来解决乱码问题，该方法只对数据体有效即该方法只设置数据体的编码方式。因此，通常表单使用post提交，因为这样编码更方便。 3、客户端(浏览器)与服务端交互的三种方式： 1) 地址栏中输入url地址 ------ get方式 2) 超连接 ------ get方式 3) 表单 ------ get和post方式七、其他标签 1、 name 属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。 http-equiv 属性：模拟HTTP协议的响应消息头。 2、 rel 属性：描述目标文档与当前文档的关系。 type 属性：文档类型。 media：指定目标文档在哪种设备上起作用。 3、滚动条 direction 属性：left right down up behavior 属性：scroll（重复滚动） alternate（来回滚动） slide（不重复滚动） loop 属性：滚动的次数 -1表示一直滚动 scrolldelay属性：设置活动字幕滚动两次之间的延迟时间 4、 </span></p><p><span style="font-size:14px">可以将文本内容按在代码区的样子显示在页面上。<br/></span></p><p><span style="font-size:14px">注：pre标签对包含<a href="http://www.php.cn/code/427.html" target="_blank">html标签</a>的文字内容无法实现按排版格式显示</span></p><p><span style="font-size:14px">5、几个纯数据封装标签</span></p><p><span style="font-size:14px">p span p</span></p><p><span style="font-size:14px">6、标签分为两大类 <br/></span></p><p><span style="font-size:14px">1) 块级标签(元素)：标签结束后都有换行。font span img input select a</span></p><p><span style="font-size:14px">2) 行内标签(元素)：标签结束后没有换行。 p p dl ol ul table title<br/></span></p><p><span style="font-size:14px">7、lable标签</span></p><p><span style="font-size:14px">给元素定义快捷键 </span></p><p><span style="font-size:14px"></span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><label for="user" accesskey="u">用户名(u)</label> <input type="text" id="user" /> ログイン後にコピー点击用户名时，会自动跳到user的编辑框中【相关推荐】 1. 免费html在线视频教程 2. html开发手册 3. php.cn原创html5视频教程以上がマスターしておくべきHTMLの基本知識の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。関連ラベル： html，知识ソース：php.cn 前の記事：HTML 要素の構文と空要素を簡単に紹介します。次の記事：Webページ制作（html）の基礎知識（1）htmlの最初の理解と属性このウェブサイトの声明この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。著者別の最新記事 NameValuePair メソッドを使用してパラメーターを渡すサンプルチュートリアル 1970-01-01 08:00:00 dom4j を使用して XML ドキュメントを解析する例 1970-01-01 08:00:00 カタログサービス - Microsoft マイクロサービスアーキテクチャのサンプルコードの分析 1970-01-01 08:00:00 .net Elasticsearch の例の開始方法の詳細な説明 1970-01-01 08:00:00 Spring Boot に JSP サポートを追加する構成例の詳細な紹介 1970-01-01 08:00:00 JS は window.open で開かれたウィンドウが閉じているかどうかをどのように検出しますか? 1970-01-01 08:00:00 データベースに接続する sqlyog での文字化けの問題とその解決策を共有する 1970-01-01 08:00:00 Java での可変長パラメーターの使用例 1970-01-01 08:00:00 最新のAmap API WEB開発事例チュートリアル 1970-01-01 08:00:00 AJAX の長所と短所 1970-01-01 08:00:00 最新の問題 PHP メーラーが動作しない: エラーログがなく、メッセージは送信されたが受信されていないと表示されますウェブサーバーの php エラーログにエラーログが表示されません。いくつかの異なる SMTP サーバーを試しました (私が知っている他の電子メールプロバイダーも同様に機能します... から 2023-11-10 15:02:39 0 1 218 JavaScriptでCSS/HTMLの名前付きcolorのRGB値を取得する方法 [name-rgb] という名前の Javascript オブジェクトを作成しました。 Basic:namedColors={AliceBlue:[240,248,255],Ant... から 2023-11-06 09:05:50 0 2 210 ハウツー: TailwindCSS + Vue3 + Vite を使用してダークモードを切り替える私は Vite/Vue3 の初心者で、現在コミュニティの知識を総合する必要があるという問題に直面しています。 Vite/Vue3 アプリを作成し、TailwindCSS をインスト... から 2023-11-01 12:05:00 0 1 272 PHPでクロスデータベースクエリを構築するにはどうすればよいですか? 前回のエピソード (MySQL でクロスデータベースクエリを構築する方法) では、MySQL でクロスデータベースクエリを構築する方法を学びました。これはうまくいきましたが、主... から 2023-10-22 11:40:00 0 2 311 JavaScript または jQuery を使用して画像の自然な寸法を取得するにはどうすればよいですか? これまでのところ、私はこのコードを持っています: varimg=document.getElementById('draggable'); varwidth=img.clientW... から 2023-10-21 13:53:08 0 2 275 関連トピック詳細> html著作権記号 HTMLオンラインエディター HTMLウェブページ制作 HTMLスペース htmlとは何ですか HTMLのフォントサイズを設定する方法 htmlからテキストへ HTMLテキストボックスのコードの書き方人気のおすすめ URLってどういう意味ですか？ DOM とはどういう意味ですか? 画像サイズを変更する方法 HTMLでフォントを太字にする方法 HTML画像のサイズを設定する方法人気のチュートリアル詳細> 関連するチュートリアル人気のおすすめ最新のコース最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース) 1403056 PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ 4230849 JAVA 初心者向けビデオチュートリアル 2418247 Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル 498140 PHP ゼロベースの入門チュートリアル 833966 最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース) 1403056 回の学習 JAVA 初心者向けビデオチュートリアル 2418247 回の学習 Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル 498140 回の学習 Web フロントエンド開発の簡単な紹介 214170 回の学習 PSビデオチュートリアルをゼロからマスターする 858868 回の学習 [Web フロントエンド] Node.js クイックスタート 4671 回の学習海外のWeb開発フルスタックコースの完全なコレクション 3620 回の学習 Go言語実践GraphQL 3108 回の学習 550W ファンマスターが JavaScript をゼロから段階的に学習します 559 回の学習 Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる 16077 回の学習最新のダウンロード詳細> ウェブエフェクト公式サイトサイト素材フロントエンドテンプレート [フォームボタン] jQuery エンタープライズメッセージフォームの連絡先コード [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果 [メニューナビゲーション] HTML5 クールなパーティクルアニメーションナビゲーションメニューの特殊効果 [フォームボタン] jQuery ビジュアルフォームのドラッグアンドドロップ編集コード [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤーコード [html5特殊効果] 古典的な HTML5 プッシュボックスゲーム [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール [フォトアルバム効果] CSS3 個人アルバムカバーホバーズーム効果 [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート [フロントエンドテンプレート] オンライン電子書籍ストアモールのウェブサイトテンプレート [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG) [PNG素材] 4 つの赤い 2023 卒業バッジベクター素材 (AI+EPS+PNG) [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS） [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG） [PNG素材] 黒と白のスタイルの山アイコンベクター素材 (EPS+PNG) [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG） [バナー画像] フラットスタイルの植樹祭バナーベクター素材 (AI+EPS) [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG） [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート [フロントエンドテンプレート] オンライン電子書籍ストアモールのウェブサイトテンプレート [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート私たちについて免責事項 Sitemap PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！