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>

定义命令的列表或菜单

如何学习这些标签？

  1. 记住常用标签，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>
  2. 在上述的标签中，有些标签是成对出现的，比如：<head> </head>，这类标签称为 “闭合标签”。还有些标签只有一个，比如: <img />，这种引用内容的标签是 "自闭合标签”。不论哪种标签，都应该 “关闭标签”。所以在自引用标签名后加一个斜杠（尽管 HTML5 语法会忽视斜杠），这样阅读的时候也容易知道标签是关闭的。
  3. 标签属性
    属性为标签提供额外的信息，比如 <img> 标签有两个属性：src, alt
  4. 复合标签
    有些 HTML 内容是由多个标签组合而成，这些内容有：列表、表格、表单。
  5. 嵌套标签
    当一个标签嵌套在另一个标签中，我们就称为 “嵌套标签”。当然，上面说的复合标签也算是嵌套标签。嵌套标签需要注意的一点是：闭合标签与离它最近的那个标签必须要配对才行。比如：
<p>这行文字是加<b>粗</p>的</b>

</p> 闭合标签离它最近的标签是 <b>，这两个标签不是一对，所以上面这行代码的效果不是预期的。正确的写法是：

<p><b>这行文字是加粗的</b></p>
以上参考：
  1. https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list
  2. https://www.w3school.com.cn/tags/index.asp