W3C 标准之 HTML
W3C 简介
W3C 全称 World Wide Web Consortium 中文 万维网联盟，W3C 理事会，是万维网的主要国际标准组织。为半自治非政府组织。
1994 年李爵士离开 CERN 后创立，其目的是通过 W3C 制定标准来促进业界成员间的兼容性和协议。联盟试图让所有的供应商实施一套有联盟选择的核心原则和组件。
为解决不兼容问题，保障网上信息的顺利和完整流通，W3C 制定了一系列标准并督促网上应用开发者和内容提供者遵循这些标准。其中包括语音的规范，开发中使用的导则和解释引擎的行为等。常见的标准有：HTML，CSS，DOM，SVG，XML，XHTML 等
MDN 简介
MDN，MDN Web Docs 全称 Mozilla Developer Network，Mozilla Developer Center，是一个汇集众多 Mozilla 基金会成品和网上技术开发文档的免费网站。
2017 年 10 月 18 日，Mozilla 携手 Google，微软，三星，W3C 同时宣布将 MDN 作为 Web 文档中心，共同为开发者创建一个统一的，跨浏览器的权威参考文档。
HTML 元素们
根元素
html 表示 HTML 文档的根（顶级元素），也被称为根元素。所以其他元素必须是此元素的后呆。
文档元数据
元数据（Metadata）含有页面的相关信息，包括样式，脚本及数据，能帮助一些软件（如搜索引擎，浏览器等）更好地运用和渲染页面。对于样式和脚本的元数据，可以直接在网页定义，也可以链接到包含相关信息的外部文件。
| 元素 | 描述 |
|---|---|
| link | link 元素规定了外部资源与当前文档的关系。这个元素可用来为导航定义一个关系框架。这个元素最常于链接样式表 |
| meta | meta 元素表示那些不能由其他 HTML 元相关元素（base，link，script，style，title）表示的任何元数据信息 |
| style | style 元素包含文档的样式信息或者文档的部分内容。 |
| title | 定义文档的标题，显示在浏览器的标题栏或标签页上。它只可以包含文本，若是包含有标签，则包含的任何标签都不会被解释。 |
内容分区
内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉，页脚，导航和标题等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。
| 元素 | 描述 |
|---|---|
| address | 可以让作者为它最近的 article 或 body 祖先元素提供联系信息。在后一种情况下，它应用于整个文档。 |
| article | article 表示文档，页面，应用或网站中的独立结构，其意在成为可独立分配的或可服用的结构，如在发布中，它可能是论坛帖子，杂志或新闻文章，博客，用户提交的评论，交互式组件，或者其他独立的内容项目。 |
| aside | aside 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。他们通常包含在工具条，例如来自词汇表的定义。也可能有其他类型的信息，例如相关的广告，笔者的传记，web 应用程序，个人资料信息，或在博客上的参考链接。 |
| footer | 表示最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者，版权数据或者与文档相关的链接等信息。 |
| header | header 表示一组引导性的帮助，可能包含标题元素，也可以包含其他元素，像 logo，分节头部，搜索表单等。 |
| h1, h2, h3, h4, h5, h6 | h1 - h6, 一个标题元素能简要描述该节的主题。标题信息可以由用户代理可以使用，例如，自动构造某个文档中的内容表。 |
| hgroup | 代表一个段的标题。它规定了在文档轮廓里的单一标题是它所属的隐式或显式部分的标题。 |
| main | 呈现了文档 body 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题，应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的，不包含任何在一系列文档中重复的内容，比如侧边了，导航栏链接，版权信息，网站 logo，搜索框（除非搜索框作为文档的主要功能） |
| nav | 描绘一个含有多个超链接的区域，这个区域包含撞到其他页面或者页面内部其他部分的链接列表 |
| section | 文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题。一般通过是否包含一个标题（h1 - h6）作为子节点来辨别每个 section |
文本内容
使用 HTML 文本内容元素来组织在开标签 body 和闭合标签 /body 里的块或章节的内容。这些元素能标志内容的宗旨或结构，而这对于可访问和SEO都很重要。
| 元素 | 描述 |
|---|---|
| blockquote | HTML 中的元素（或者 HTML 块级引用元素），代表其中的文字是引用内容。通常在渲染是， 这部分的内容会有一定的缩进。若引用的文字来源于网络，则可以将原内容的出处 URL 地址设置到 cite 属性上，若要以文本的形式告知读者引文的出处时，可以直接用 cite 元素 |
| dd | 描述列表 dl 元素中一个术语的描述，必须出现在 dl 中的 dt 后 |
| div | 分区元素，是一个通用的流内容容器，它在语义上不代表任何类型的内容，它可以被用来对其他元素进行分组，一般用于样式和相关的需求或者对具有相同特性的一组元素进行分组（比如 lang），它应该在没有任何其他语义元素可用时才使用。 |
| dl | 描述列表元素，包含术语定义以及描述的列表。 |
| dt | 术语定义元素，通常在该元素后面回跟着 dd 元素，然而，多个连续出现的 dt 元素都将由出现在它们后面的第一个 dd 元素定义。 |
| figcaption | 是与其相关联的图片的说明/标题，用于描述其父节点 figure 元素里的其他数据。这意味着 figcaption 在 figure 块里是第一个或最后一个。同时 HTML figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。 |
| figure | 一段独立的内容。当它属于主体时，它的位置独立于主体。这个标签经常是主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。 |
| hr | 表示段落级元素之间的主题转换。 |
| li | 列表条目元素。它必须被包含在一个父元素里：ol,ul,menu。 |
| main | 呈现了文档或应用的主体部分。 |
| ol | 有序列表项 |
| p | 表示文本的一个段落 paragraph |
| pre | 预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符都会显示出来。（紧跟在 pre 开始标签后的换行符也会被省略） |
| ul | 无序列表 |
内联文本语义
使用 HTML 内联文本语义定义语句，结构，可以是一个词，一段，或任意风格的文字。
| 元素 | 描述 |
|---|---|
| a | 锚元素 |
| abbr | 代表缩写，并可选择提供一个完整的描述。 |
| b | 提供注意元素 Bring Attention To。用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。注意过去 b 被认为是粗体元素 Boldface。 |
| bdi | 双向隔离元素，会隔离可能以不通方向进行格式的外部文件。 可以通过 CSS 规则 unicode-bidi 控制。场景时啥，特意写成了一个元素❓ |
| bdo | 双向覆盖元素，用于覆盖当前文本的朝向，它使得字符按给定的方向排列。 |
| br | 生成一个换行符号。 |
| cite | 引用 citation 标签 表示一个作品的引用。它必须包含引用作品的符号简写格式的标题或者 URL，它可能是一个根据添加引用元数据的约定的简写形式。 |
| code | 等宽字体呈现一段计算机代码 |
| data | 将一个指定内容和机器可读性的翻译联系在一起。但如果内容是与 time 或者 date 相关的，一定要使用 time |
| dfn | 表示术语的一个定义 |
| em | 着重元素，标记出需要用户着重阅读的内容，em 元素是可以嵌套的，嵌套层次越深则其包含的内容被认定为越需要着重阅读。 |
| i | 表示因某些原因需要区分普通文本的一系列文本。例如技术术语，外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。 |
| kbd | 键盘输入元素，用于表示用户输入，它将产生一个行内元素，以浏览器的默认 monospace 字体显示。 |
| mark | 代表突出显示的文字，例如可以为了标记特定上下文中的文本而使用这个标签。举个例子，它可以用来显示搜索引擎搜索后关键词。 |
| q | HTML 引用标签 q 表示一个封闭的并且是短的行内引用的文本。这个标签是用来引用短的文本，所以不要引入换行符；对于长的文本的引用请使用 blockquote 替代。 |
| rb | |
| rp | rp 元素用于为那些不能使用 ruby 元素展示 ruby 注解的浏览器，提供随后的圆括号。 |
| rt | HTML Ruby 文本 元素包含字符的发音 |
| rtc | 包含文字的语义注解，它们在 rb 元素中展示。rb 元素可以拥有发音 rt 和语义 rtc 注解 |
| ruby | 被用来展示东亚文字注音或字符注释。 |
| s | 使用删除线来渲染文本。使用 s 元素来表示不再相关，或者不再准确的事情。但是当表示文档编辑时，不提倡使用 s；为此，提倡使用 del 和 ins 元素。 |
| samp | 用于标识计算机程序输出，通常使用浏览器缺省的 monotype 字体 |
| small | small 将使用文本的字体变小一号。（例如从大变成中等，从中等变成小，从小变成超小）。在 HTML5 中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版本和法律文本。 |
| span | 与 div 元素类似，只是 div 是一个块元素而 span 则是行内元素 |
| strong | 表示文本十分重要 |
| sub | 下标 |
| sup | 上标 |
| time | 用来表示 24 小时制时间或者公历日期，若表示日期则也可包含时间和时区。 |
| u | 使文本在其内容在基线下的一行呈现下划线。在 HTML5 中，此元素表示具有未标注的文本跨度，显示渲染，非文本注释，例如将文本标记为中文文本中的专有名称（一个正确的中文标记）或 将文本标记为拼写错误。 |
| var | 表示变量的名称，或者由用户提供的值。 |
| wbr | 一个文本中的位置，其中浏览器可以选择来换行，虽然它的换行规则可能不会在这里换行。 |
图片和多媒体
多媒体资源
| 元素 | 描述 |
|---|---|
| area | 图片上定义一个热点区域，可以关联一个超链接。area 元素仅在 map 元素内部使用 |
| audio | 表示音频内容。audio 可以包含多个音频资源，这些资源可以使用 src 属性或者 source 元素来进行描述；浏览器将会选择最合适的一个来使用。对于不支持 audio 元素的浏览器，audio 元素也可以作为浏览器不识别的内容加入到文档中。 |
| img | 图片标签 |
| map | 图片热点标签 |
| track | 被当作媒体元素 audio 和 video 的子元素来使用。它允许指定计时字幕（或者基于事件的数据），例如自动处理字幕。 |
| video | 表示视频内容。 |
内嵌内容
除了常规的多媒体内容， HTML 可以包括各种其他的内容，及时它并不容易交互。
| 元素 | 描述 |
|---|---|
| applet | 标志着包含了 Java 的 applet |
| embed | 将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供。 |
| iframe | 表示嵌套的浏览上下文，有效地将另一个 HTML 页面嵌入到当前页面中。在 HTML 4.01 中，文档可能包含头部和正文，或头部和框架集，但不能包含征文和框架集。但是 iframe 可以在正常的文档主体中使用。每个浏览上下文都有自己的会话历史记录和活动文当。包含嵌入内容的浏览上下文称为父浏览上下文。顶级浏览上下文（没有父级）通常是浏览器窗口。 |
| object | HTML 嵌入对象元素，表示引入一个外部资源，这个资源可能是一个图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源。 |
| param | 用于定义 object 参数 |
| picture | 是一个容器，用来为其内部特定的 img 元素提供多样的 source 元素。浏览器会根据当前页面（即图片所在的盒子的容器）的布局以及当前浏览的设备（比如普通的屏幕和高清屏幕）去从中选择最合适的资源。 |
| source | 给 picture，audio 或 video 指定多个媒体资源，以供不同浏览器使用。是一个空元素。 |
脚本
为了创建动态内容和 Web 应用程序，HTML 支持使用脚本语言，最突出的就是 JavaScript。某些元素支持词功能。
| 元素 | 描述 |
|---|---|
| canvas | 可被用来通过脚本绘制图形。比如，它可以被用来绘制图形，制作图片集合，甚至用来实现动画效果。你可以（也应该）在元素标签内写入可提供替代的代码内容，这些内容将会在旧的，不支持 canvas 元素的浏览器或是禁用了 JavaScript 的浏览器内渲染并展现。 |
| noscript | 如果页面上的脚步类型不受之处或者当前在浏览器中关闭了脚本，则在 HTML noscript 元素中定义的脚本未执行时的替代内容。 |
| script | 用于嵌入或引用可执行脚本。 |
编辑标识
这些元素能标示出某个文本被更改果的部分。
| 元素 | 描述 |
|---|---|
| del | 表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。ins 标签的作用恰恰相反：表示文档中添加的内容。 |
| ins | 定义已经被插入文档中的文本。 |
表格内容
| 元素 | 描述 |
|---|---|
| caption | 展示一个表格的标题，常常被用作 table 的第一个子元素出现，同时显示在表格内容的最前面。可以通过 CSS 的 caption-side 控制 caption 的位置显示。 |
| col | 定义表格中的列，并用于定义该列上所有单元格上的公共语义。通常定义在 colgroup 内。 |
| colgroup | 表格 col 组合 |
| table | 表格 |
| tbody | 表格主体 可以一个或多个 |
| td | table data |
| tfoot | 表格列脚 |
| th | 表头单元格，scope 和 headers 属性控制展示 |
| thead | 表格列头 |
| tr | table row |
表单
用来创建一个用户可以填写并提交到网站或应用程序的表单。
| 元素 | 描述 |
|---|---|
| button | 按钮，不写 type 值或者 type 值为 submit时，用户回车，触发表单的 onSubmit 事件 |
| datalist | 它的子元素 option 列表作为 list 值对应 datalist 的 id 值的其他表单元素 |
| fieldset | 角色就像 labels 一样，给表单的分块的元素 |
| form | 表示文档中的一个区域，这个区域包含有交互控制元件，用来向 web 服务器提交信息。 |
| input | 文本输入框 |
| label | 元素的描述 |
| legend | fieldset 的描述 |
| meter | 用来显示已知访问的标量值或者分数值 |
| optgroup | 给 select 下的 option 分组 |
| option | 用于定义在 select optgroup datalist 元素中包含的项。 |
| output | 表示计算或用户操作的结果 |
| progress | 用来显示一项任务的完成进度 |
| select | 下拉选择 |
| textarea | 多行文本输入框 |
交互元素
创建交互式用户界面对象的元素
| 元素 | 描述 |
|---|---|
| details | 创建一个可以切换显示的信息内容。关闭时只显示 summary 内的内容。 |
| dialog | 一个交互弹窗 |
| menu | 实验中 |
| menuitem | 同上 |
| summary | details 标签子元素 |
Web 组件
Web 组件式中近似 HTML 的技术，这使得它能够，从本质上说，创建和使用自定义元素，就好像它是普通的 HTML。此外，可以创建自定义版本的标准 HTML 元素。不属于 HTML 规范 而是 Web 组件集合标准，而且还没最后确定，随时有可能发生更改。
| 元素 | 描述 |
|---|---|
| slot | 是 web 组件的一个占位符，可以用来插入自定义的标记文本。可以创建不同的 DOM 树进行渲染。 |
| template | 是一种用于保存客户端内容的机制，该内容在页面加载时不被渲染，但可以在运行时使用 JavaScript 进行实例化。 |
什么是空标签
空标签是指一个不肯跟存在子节点的标签。HTML 里的空标签有：area，base，br，col，command，embed，hr，img，input，keygen，link，meta，param，source，track，wbr，colgroup
什么是可替代标签
可替代标签是指该标签的展现不是由 CSS 来控制的。这些元素是一类外观渲染独立于 CSS 的外部对象。可替代标签通常有固定的宽，固定的高，固定的宽高比。
可替代的标签有：audio 全屏时，canvas 嵌入内容时，object / embed，iframe，img，input[type=”image”]，video，applet 插件，通过 CSS 中的 content 属性插入的对象被称为 匿名可替代标签。