HTMLの基礎知識をまとめて共有する

HTMLの基本的な理解

1.はじめに

1.HTMLはハイパーテキストマークアップ言語であり、インタープリタ型言語である標準ユニバーサルマークアップ言語のアプリケーションです。

2. 「ハイパーテキスト」とは、ページに画像、リンク、さらには音楽やプログラムなどの非テキスト要素を含めることができることを意味します。

3. ハイパーテキストマークアップ言語の構造には、「ヘッド」部分（英語: Head）と「ボディ」部分（英語: Body）が含まれます。「ヘッド」部分は、Web ページに関する情報を提供します。 「body」部分は、Web ページに関する情報を提供します。Web ページの特定のコンテンツ。

2. 言語の特徴 (内容は - Baidu百科事典から抜粋)

1. シンプルさ: ハイパーテキストマークアップ言語のバージョンアップグレードはスーパーセット方式を採用しており、より柔軟で便利です。

2. スケーラビリティ: ハイパーテキスト マークアップ言語の幅広い応用により、拡張機能と追加された識別子の要件が生じており、システム拡張を確実にするためにサブクラス要素の方法が採用されています。

3. プラットフォームの独立性: パーソナル コンピューターが人気ですが、MAC などの他のマシンを使用する人も多く、これが幅広いプラットフォームで使用できることも人気の理由の 1 つです。ワールドワイドウェブ（WWW）。

4.汎用性: さらに、HTML はインターネットの普遍言語であり、シンプルで普遍的なオールインワン マークアップ言語です。これにより、Web ページ制作者はテキストと画像を組み合わせた複雑なページを作成でき、使用するコンピュータやブラウザの種類に関係なく、インターネット上の誰でもこれらのページを閲覧できるようになります。

3. 全体構造

HTML 標準ファイル構造には、基本的な全体構造、つまり、ハイパーテキスト マークアップ言語ファイルの開始タグと終了タグ、およびハイパーテキスト マークアップ言語のヘッダーとエンティティがあります。ページの全体的な構造を確認するために使用される 3 つの二重マーカーがあります。

1. ファイル全体のコード

ulesules lves 、ファイルがハイパーテキストマークアップ言語を使用して記述されていることを示します（完全このタグの中国語名)、 は開始部分と終了部分です。ハイパーテキスト マークアップ言語ファイルのタグ。

2. ヘッダーコンテンツ

; これらの 2 つのマーカーは、それぞれヘッダー情報の始まりと終わりを表します。ヘッダーに含まれるタグは、ページのタイトル、序文、説明などの内容であり、コンテンツそのものとしては表示されませんが、Web ページの表示効果に影響を与えます。ヘッダーで最もよく使用されるタグは、title タグと meta タグです。title タグは、Web ページのタイトルを定義するために使用されます。ブラウザのブックマークやコレクションリストとして利用できます。

HTML head要素:

HTMLのmetaタグ

 1 nbsp;html> 2  3      4         <title>HTML当中的meta标签</title> 5          6         <!--设置网页的编码--> 7         <meta> 8          9         <!--设置网页的关键字-->10         <meta>11         12         <!--设置网页的描述-->13         <meta>14         15         <!--设置网页的更新信息-->16         <meta>17         18         <!--设置网页刷新频率以及跳转地址-->19         <meta>20         21         <!--设置标题处的ico小图标-->22         <link>23         24         <!--引入一个外部的css层叠样式表-->25         <link>26     27     28     29 

HTMLのmetaタグ

headタグとStyleタグ内のScriptタグheadタグ内の

 1 nbsp;html> 2  3      4         <title>head标签中的Script标签和Style标签</title> 5         <meta> 6          7         <!--通常是写js用的标签--> 8         <script> 9             //在网页打开的同时弹出了一个对话框10             //alert(&#39;弹框内容&#39;);11         </script>12         13         <!--引入一个外部的js文件-->14         <script></script>15         16         <!--在当前页面来添加css样式-->17         <style>18             font{19                 color:red;20             }21         </style>22     23     24         25     26 

ScriptタグとStyleタグ

　　3.主体内容

　　　　；，网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。

　　　 HTML当中的文本标签

 1 nbsp;html> 2  3      4         <title>HTML当中的文本标签</title> 5         <meta> 6      7      8         <!--标题标签--> 9         <h1 id="让我们来看一下-u-字体-u-字体的大小变化">让我们来看一下，<u>字体</u>字体的大小变化</h1>10         <h2 id="让我们来看一下-字体的大小变化">让我们来看一下，字体的大小变化</h2>11         <h3 id="让我们来看一下-字体的大小变化">让我们来看一下，字体的大小变化</h3>12         <h4 id="让我们来看一下-字体的大小变化">让我们来看一下，字体的大小变化</h4>13         <h5 id="让我们来看一下-字体的大小变化">让我们来看一下，字体的大小变化</h5>14         <h6 id="让我们来看一下-字体的大小变化">让我们来看一下，字体的大小变化</h6>15         16         <!--水平线标签-->17         <hr>18         19         <!--b标签：普通的加粗标签-->20         <b>文字加粗</b><br>21         22         <!--strong标签：加粗强调的作用，SEO可以着重抓取到的内容-->23         <strong>文字加粗（强调）</strong><br>24         25         <!--斜体、强调标签-->26         <em>斜体（强调）</em><br>27         28         <!--普通的斜体标签-->29         <i>让你随时<u>脉动</u>回来！</i><br>30         31         <!--普通的斜体标签-->32         <cite>让你随时脉动回来！</cite><br>33         34         <!--下标标签-->35         H<sub>2</sub>0<br>36         37         <!--上标标签-->38         2<sup>2</sup>=439         40         <!--段落标签-->41         <p>p标签代表段落，一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p>42         43     44 

HTML当中的文本标签

 　　文本标签页面展示效果：

 

 1 nbsp;html> 2  3      4         <title>HTML当中的文本标签</title> 5         <meta> 6      7      8         <h1 id="HTML当中的文本标签">HTML当中的文本标签</h1> 9         10         <!--定义文档的输出方向-->11         <bdo>正大光明</bdo><br>12         <bdo>正大光明</bdo><br>13         14         <!--定义一个短的引用-->15         沙僧说：<q>师傅，大师兄和二师兄被妖怪抓走啦~~</q><br>16         17         <!--表示一个缩写的形式-->18         <abbr>US</abbr><br>19         20         <!--删除线标签-->21         测试删除线测试删除线测试删除线测试删除线测试删除线<del>苍老师？</del>，<del>被删除了哈哈</del><br>22         23         <!--定义一段被隐藏的文字,summary标签可以定义列表的标题-->24         <details>25             <summary>鬼吹灯系列丛书</summary>26             鬼吹灯之精绝古城<br>27             鬼吹灯之黄皮子坟<br>28             鬼吹灯之云南虫谷<br>29         </details>30         31         <!--对话标签-->32         <dialog>33             <dt>男：</dt>
<dd>我们分手吧~~</dd>34             <dt>女：</dt>
<dd>为什么？</dd>35             <dt>男：</dt>
<dd>我怀孕了~~</dd>36             <dt>女：</dt>
<dd>不，不可能，我不相信……</dd>37             <dt>男：</dt>
<dd>你看你，我们连最起码的信任都没有了，还谈什么？</dd>38             <dt>女：</dt>
<dd>…………</dd>39         </dialog>40     41 

HTML当中的文本标签

 

 　　HTML当中的列表标签

 1 nbsp;html> 2  3      4         <title>HTML当中的列表标签</title> 5         <meta> 6      7      8         <h1 id="HTML当中的列表标签">HTML当中的列表标签</h1> 9         <!--有序列表-->10         <ol>11             <li>有序列表1</li>12             <li>有序列表2</li>13             <li>有序列表3</li>14         </ol>15         16         <!--无序列表-->17         

18             
• 无序列表1
19             
• 无序列表2
20             
• 无序列表3
21         

22         23         24         

25         *26         * *27         * * *28         * * * *29         

30     31 

HTML当中的列表标签

　　页面显示效果：

　　在

标签中增加 type 属性，使其属性值为 A or a or 1 会显示不同的排序编码，可视情况而定

 

 　　HTML当中的超链接标签

　　：超链接标签
　　　　　　属性： 值：
　　　　　　href： 路径或外部网站
　　　　　　title： 鼠标移入链接时提示的内容
　　　　　　target： _self (默认，从当前标签页打开链接)
　　　　　　　　　　 _blank (在新标签页中打开链接)
　　　　　　　　　　 _parent (在父级框架中打开链接)
　　　　　　　　　　 _top (在顶级框架中打开链接)
　　　　　　　　　　 framename(在制定框架名的位置打开链接)

 1 nbsp;html> 2  3      4         <title>HTML当中的超链接标签 a</title> 5         <meta> 6      7      8         <!--相对路径链接到本地的文件--> 9         <a>链接本地HTML文件</a><br><br>10         11         <!--链接到了一个外部的网站-->12         <a>英雄联盟官网</a>13         14         <!--使用绝对路径链接到本地文件-->15         <a>5.html</a>16         17     18 

HTML当中的超链接标签

 

　　页面显示效果：

　　a标签的锚点功能

　　　　使 a 链接标签可跳转到页面指定元素的位置

 1 nbsp;html> 2  3      4         <title>a标签的锚点功能</title> 5         <meta> 6         <style> 7             /*找到4个div添加了一些属性*/ 8             div{ 9                 /*设置一下div的宽度*/10                 width:500px;11                 12                 /*设置一下div的高度*/13                 height:500px;14                 15                 /*设置一下div的边框：1像素宽，实线，红色*/16                 border:1px solid red;17             }18         </style>19     20     21         <h1 id="a标签的锚点功能">a标签的锚点功能</h1>22         <a>第一章：三打白骨将</a><br>23         <a>第二章：倒拔垂杨柳</a><br>24         <a>第三章：火烧赤壁</a><br>25         <a>第四章：刘姥姥进大观园</a><br>26         27         <!--第一章-->28         <h2>
<a></a>第一章：三打白骨将</h2>29         <div>30             <p>胡八一（靳东饰）上山下乡来到中蒙边境的岗岗营子，带上了家中仅存的一本书——《十六字阴阳风水秘术》①，闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏，遇上雪崩掉落一条巨大的地沟当中，胡八一利用自己懂得的墓葬秘术逃得不死。复员后，胡八一和好友王胖子（赵达饰）一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址，进入了地下“鬼洞”。洞中机关重重、陷阱不断，这神秘的鬼洞似乎在一位先知的掌控之中。31             </p>32         </div>33         34         <!--第二章-->35         <h2>
<a></a>第二章：倒拔垂杨柳</h2>36         <div>37             <p>胡八一（靳东饰）上山下乡来到中蒙边境的岗岗营子，带上了家中仅存的一本书——《十六字阴阳风水秘术》①，闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏，遇上雪崩掉落一条巨大的地沟当中，胡八一利用自己懂得的墓葬秘术逃得不死。复员后，胡八一和好友王胖子（赵达饰）一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址，进入了地下“鬼洞”。洞中机关重重、陷阱不断，这神秘的鬼洞似乎在一位先知的掌控之中。38             </p>39         </div>40         41         <!--第三章-->42         <h2>
<a></a>第三章：火烧赤壁</h2>43         <div>44             <p>胡八一（靳东饰）上山下乡来到中蒙边境的岗岗营子，带上了家中仅存的一本书——《十六字阴阳风水秘术》①，闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏，遇上雪崩掉落一条巨大的地沟当中，胡八一利用自己懂得的墓葬秘术逃得不死。复员后，胡八一和好友王胖子（赵达饰）一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址，进入了地下“鬼洞”。洞中机关重重、陷阱不断，这神秘的鬼洞似乎在一位先知的掌控之中。45             </p>46         </div>47         48         <!--第四章-->49         <h2>
<a></a>第四章：刘姥姥进大观园</h2>50         <div>51             <p>胡八一（靳东饰）上山下乡来到中蒙边境的岗岗营子，带上了家中仅存的一本书——《十六字阴阳风水秘术》①，闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏，遇上雪崩掉落一条巨大的地沟当中，胡八一利用自己懂得的墓葬秘术逃得不死。复员后，胡八一和好友王胖子（赵达饰）一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址，进入了地下“鬼洞”。洞中机关重重、陷阱不断，这神秘的鬼洞似乎在一位先知的掌控之中。52             </p>53         </div>54     55 

a标签的锚点功能

 

 

 　　

　　HTML当中的常见实体内容：

 

 

以上がHTMLの基礎知識をまとめて共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。