HTML 标签一缆
在前端三大基础中，HTML 是最容易的，只要记住标签的用法，基本上就算掌握了。另外，自现在起提到的前端三大基础，在没有指明特定版本的前提下，默认指：HTML5, CSS3 和 ECMAScript 6(JavaScript 是 ECMAScript 的一种实现）。
好的，第一个问题：HTML5 一共有多少个标准化标签？答案是：106 个（有些地方写是 116 个），标签数来自：MDN 文档 —— HTML5 标签列表。下文的标签和分类采用了 MDN 上的，但标签的定义参考了 W3School。
1. 根元素 （1 个）
| 标签名 |
描述 |
| <html> </html> |
代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。 |
2. 文档元数据 （6 个）
| 标签名 |
描述 |
| <head> </head> |
定义文档的头部，它是所有头部元素的容器 |
| <title> </title> |
定义文档的标题，将显示在浏览器的标题栏或标签页上 |
| <base /> |
定义页面上的所有链接规定默认地址或默认目标 |
| <link /> |
用于链接外部资源到该文档 |
| <meta /> |
定义有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词 |
| <style> </style> |
定义 HTML 文档定义样式信息 |
3. 脚本 （3 个）
| 标签名 |
描述 |
| <script> </script> |
定义一个内联脚本或链接到外部脚本 |
| <noscript> </noscript> |
定义在脚本未被执行时的替代内容（文本） |
| <template> </template> |
通过 JavaScript 在运行时实例化内容的容器 |
4. 章节（10 个）
| 标签名 |
描述 |
| <body> </body> |
代表 HTML 文档的内容。在文档中只能有一个 元素 |
| <section> </section> |
定义文档中的一个章节 |
| <nav> </nav> |
定义只包含导航链接的章节 |
| <article> </article> |
定义可以独立于内容其余部分的完整独立内容块 |
| <aside> </aside> |
定义和页面内容关联度较低的内容 |
| <h1> </h1> ~ <h6> </h6> |
标题元素实现了六层文档标题，<h1> 是最大的标题，<h6> 是最小的标题 |
| <header> </header> |
定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录 |
| <footer> </footer> |
定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址 |
| <address> </address> |
定义包含联系信息的一个章节 |
| <main> </main> |
定义文档中主要或重要的内容 |
5. 组织内容 （13 个）
| 标签名 |
描述 |
| <p> </p> |
定义一个段落 |
| <hr /> |
创建一条水平线 |
| <pre> </pre> |
定义预格式化的文本 |
| <blockquote> </blockquote> |
定义块引用 |
| <ol> </ol> |
定义一个有序列表 |
| <ul> </ul> |
定义一个无序列表 |
| <li> </li> |
定义列表中的一个列表项 |
| <dl> </dl> |
定义一个定义列表 |
| <dt> </dt> |
定义 "定义列表" 中的项目 |
| <dd> </dd> |
定义列表中定义条目的定义部分 |
| <figure> </figure> |
规定独立的流内容（图像、图表、照片、代码等等） |
| <figcaption> </figcaption> |
定义 figure 元素的标题（caption）。该标签被置于 "figure" 元素的第一个或最后一个子元素的位置 |
| <div> </div> |
定义文档中的分区或节（division/section） |
6. 文字形式 （28 个）
| 标签名 |
描述 |
| <a> </a> |
超链接，用于从一个页面链接到另一个页面 |
| <em> </em> |
定义强调的内容 |
| <strong> </strong> |
定义特别重要的文字 |
| <small> </small> |
定义注释性内容，如免责声明、版权声明等，对理解文档不重要 |
| <s> </s> |
对文字添加删除线 |
| <cite> </cite> |
所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题 |
| <q> </q> |
定义短的引用。本质上与 <blockquote> 是一样的。不同之处在于它们的显示和应用 |
| <dfn> </dfn> |
定义一个定义项目 |
| <abbr> </abbr> |
表示省略或缩写 |
| <time> </time> |
公历的时间（24 小时制）或日期 |
| <code> </code> |
定义计算机代码或其他机器可以阅读的文本内容 |
| <var> </var> |
定义变量。可以将此标签与 <pre> 及 <code> 标签配合使用 |
| <samp> </samp> |
定义样本文本 |
| <kbd> </kbd> |
定义键盘文本。它表示文本是从键盘上键入的 |
| <sub> </sub> |
定义下标 |
| <sup> </sup> |
定义上标 |
| <i> </i> |
斜体文本效果 |
| <b> </b> |
加粗文本效果 |
| <u> </u> |
为文本添加下划线 |
| <mark> </mark> |
文本高亮引用 |
| <ruby> </ruby> |
定义 ruby 注释（中文注音或字符） |
| <rt> </rt> |
表示 ruby, 定义字符（中文注音或字符）的解释或发音 |
| <rp> </rp> |
定义不支持 ruby 元素的浏览器所显示的内容 |
| <bdi> </bdi> |
设置一段文本，使其脱离其父元素的文本方向设置 |
| <bdo> </bdo> |
设置文本方向 ，默认从左到右 |
| <span> </span> |
组合行内元素，以便通过样式来格式化它们 |
| <br /> |
插入一个换行符 |
| <wbr> </wbr> |
建议换行 (Word Break Opportunity) ，当文本太长需要换行时将会在此处添加换行符 |
7. 编辑 （2 个）
| 标签名 |
描述 |
| <del> </del> |
定义已被删除的文本 |
| <ins> </ins> |
在已被删除文本部分中插入新的文本，与 <del> 标签一起使用 |
8. 嵌入内容 （14 个）
| 标签名 |
描述 |
| <img /> |
插入一张图片 |
| <iframe> </iframe> |
插入一个内联框架 |
| <embed /> |
嵌入一个外部资源，如应用程序或交互内容 |
| <object> </object> |
定义一个嵌入的对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash |
| <param /> |
为 object 标签提供参数 |
| <video> </video> |
插入一段视频及其视频文件和字幕，并提供了播放视频的用户界面 |
| <audio> </audio> |
插入一段音频 |
| <source /> |
如果一个视频或音频有多个媒体源，提供这些媒体源的资源位置 |
| <track /> |
为媒体提供文本音轨（字幕） |
| <canvas> </canvas> |
定义图形容器，必须使用脚本来绘制图形 |
| <map> </map> |
定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像 |
| <area /> |
定义图像映射中的区域，嵌套在 |
| <svg> </svg> |
插入一段 SVG 代码用来生成一个矢量图 |
| <math> </math> |
定义一个数学公式 |
9. 表格（10 个）
| 标签名 |
描述 |
| <table> </table> |
定义一个表格，表格的行列需要通过子标签来实现 |
| <caption> </caption> |
定义表格标题 |
| <colgroup> </colgroup> |
对表格中的列进行组合，以方便应用样式 |
| <col> </col> |
为表格中一个或多个列定义属性值 |
| <tbody> </tbody> |
定义表格主体（正文），应与 <thead>, <tfoot> 配合使用 |
| <thead> </thead> |
定义表格的表头，应与 <tbody>, <tfoot> 配合使用 |
| <tfoot> </tfoot> |
定义表格的页脚，应与 应与 <tbody>, <thead> 配合使用 |
| <tr> </tr> |
定义表格中的行 |
| <td> </td> |
定义表格中的单元格 |
| <th> </th> |
定义表格中的表头 |
10. 表单（15 个）
| 标签名 |
描述 |
| <form> </form> |
创建一个 HTML 表单 |
| <fieldset> </fieldset> |
将表单内的相关元素分组 |
| <legend> </legend> |
为 <fieldset> 标签定义标题 |
| <label> </label> |
为表单中的控件定义标记 |
| <input /> |
定义表单的 “输入” 类型控件，如：文本框，单选、复选框等 |
| <button> </button> |
定义一个按钮 |
| <select> </select> |
定义一个下列列表 |
| <datalist> </datalist> |
为其它控件定义选项列表 |
| <optgroup> </optgroup> |
定义选项分组 |
| <option> </option> |
为 <select> 或 <datalist> 标签定义选项 |
| <textarea> </textarea> |
定义多行文本框 |
| <output> </output> |
定义不同类型的输出 |
| <progress> </progress> |
定义任务的进度条 |
| <meter> </meter> |
定义已知范围或分数值内的标量测量 |
| <keygen /> |
定义表单的密钥对生成器字段 |
11. 交互元素（4 个）
| 标签名 |
描述 |
| <details> </details> |
用于描述文档或文档某个部分的细节 |
| <summary> </summary> |
定义 </details> 标签的标题或综述 |
| <menuitem> </menuitem> |
定义用户可以从弹出菜单调用的命令/菜单项目 |
| <menu> </menu> |
定义命令的列表或菜单 |
如何学习这些标签？
-
记住常用标签，HTML 共有 100 多个标签，常用的在 30 个左右（根据二八原则），所以重点放在这些常用标签上就行。常用标签有：
<head>, <meta>, <title>, <style>, <link>, <a>, <p>, <img>, <h1>~<h6>, <ol>,
<ul>, <li>, <div>, <section>, <nav>, <article>, <aside>, <header>, <footer>, <span>,
<table>,<th>, <tr>, <col>, <td>, <form>, <input>, <button>, <option>, <iframe>, <object>
-
在上述的标签中，有些标签是成对出现的，比如：<head> </head>，这类标签称为 “闭合标签”。还有些标签只有一个，比如: <img />，这种引用内容的标签是 "自闭合标签”。不论哪种标签，都应该 “关闭标签”。所以在自引用标签名后加一个斜杠（尽管 HTML5 语法会忽视斜杠），这样阅读的时候也容易知道标签是关闭的。
-
标签属性
属性为标签提供额外的信息，比如 <img> 标签有两个属性：src, alt
-
复合标签
有些 HTML 内容是由多个标签组合而成，这些内容有：列表、表格、表单。
-
嵌套标签
当一个标签嵌套在另一个标签中，我们就称为 “嵌套标签”。当然，上面说的复合标签也算是嵌套标签。嵌套标签需要注意的一点是：闭合标签与离它最近的那个标签必须要配对才行。比如：
<p>这行文字是加<b>粗</p>的</b>
</p> 闭合标签离它最近的标签是 <b>，这两个标签不是一对，所以上面这行代码的效果不是预期的。正确的写法是：
<p><b>这行文字是加粗的</b></p>
以上参考：
- https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list
- https://www.w3school.com.cn/tags/index.asp
