HTML

现行标准 — 最后更新 2024年10月1日

完整目录

1 简介
1. 1.1 本规范的适用范围
2. 1.2 这是HTML5吗？
3. 1.3 背景
4. 1.4 读者
5. 1.5 范围
6. 1.6 历史
7. 1.7 设计说明
8. 1.8 HTML 与 XML 语法
9. 1.9 本规范的结构
  1. 1.9.1 如何阅读本规范
  2. 1.9.2 排版约定
10. 1.10 HTML简要介绍
11. 1.11 对作者的合规要求
12. 1.12 建议阅读
2 常见基础设施
1. 2.1 术语
2. 2.2 政策控制的功能
3. 2.3 通用微语法
4. 2.4 URLs
5. 2.5 获取资源
6. 2.6 常见 DOM 接口
7. 2.7 安全传递结构化数据
3 HTML文档的语义、结构和API
1. 3.1 文档
2. 3.2 元素
4 HTML 元素
1. 4.1 文档元素
  1. 4.1.1 html元素
2. 4.2 文档元数据
3. 4.3 区块
4. 4.4 内容分组
5. 4.5 文本级语义
6. 4.6 链接
7. 4.7 编辑
8. 4.8 嵌入内容
9. 4.9 表格数据
10. 4.10 表单
11. 4.11 交互式元素
12. 4.12 脚本
13. 4.13 自定义元素
14. 4.14 常见惯用法，无专用元素
15. 4.15 禁用元素
16. 4.16 使用选择器和 CSS 匹配 HTML 元素
5 微数据
1. 5.1 介绍
2. 5.2 编码微数据
3. 5.3 示例微数据词汇表
4. 5.4 将 HTML 转换为其他格式
  1. 5.4.1 JSON
6 用户交互
1. 6.1 hidden 属性
2. 6.2 页面可见性
  1. 6.2.1 VisibilityStateEntry 接口
3. 6.3 惰性子树
  1. 6.3.1 模态对话框和惰性子树
  2. 6.3.2 inert 属性
4. 6.4 跟踪用户激活
5. 6.5 元素的激活行为
  1. 6.5.1 ToggleEvent 接口
6. 6.6 焦点
7. 6.7 分配键盘快捷键
8. 6.8 编辑
9. 6.9 页面内查找
10. 6.10 关闭请求和关闭监视器
11. 6.11 拖放
12. 6.12 popover 属性
  1. 6.12.1 Popover 目标属性
  2. 6.12.2 Popover 轻量关闭
7 加载网页
1. 7.1 支持的概念
2. 7.2 与导航和会话历史相关的 APIs
3. 7.3 文档序列的基础设施
4. 7.4 导航和会话历史
5. 7.5 文档生命周期
6. 7.6 `X-Frame-Options` 头部
7. 7.7 `Refresh` 头部
8. 7.8 浏览器用户界面考虑
8 Web 应用程序 API
1. 8.1 脚本
2. 8.2 WindowOrWorkerGlobalScope 混入
3. 8.3 Base64 实用方法
4. 8.4 动态标记插入
5. 8.5 DOM 解析与序列化 API
6. 8.6 定时器
7. 8.7 微任务队列
8. 8.8 用户提示
  1. 8.8.1 简单对话框
  2. 8.8.2 打印
9. 8.9 系统状态和能力
  1. 8.9.1 Navigator 对象
10. 8.10 图片
11. 8.11 动画帧
9 通信
1. 9.1 MessageEvent 接口
2. 9.2 服务器发送事件
3. 9.3 跨文档消息传递
4. 9.4 通道消息传递
5. 9.5 广播到其他浏览上下文
10 Web workers
1. 10.1 介绍
2. 10.2 基础设施
3. 10.3 工作线程可用的 API
11 Worklets
1. 11.1 介绍
2. 11.2 示例
  1. 11.2.1 加载脚本
  2. 11.2.2 注册类并调用其方法
3. 11.3 基础设施
12 Web 存储
1. 12.1 简介
2. 12.2 API
3. 12.3 隐私
  1. 12.3.1 用户跟踪
  2. 12.3.2 数据的敏感性
4. 12.4 安全性
13 HTML 语法
1. 13.1 编写 HTML 文档
2. 13.2 解析 HTML 文档
3. 13.3 序列化HTML片段
4. 13.4 解析 HTML 片段
5. 13.5 命名字符引用
14 XML 语法
1. 14.1 使用 XML 语法编写文档
2. 14.2 解析 XML 文档
3. 14.3 序列化 XML 片段
4. 14.4 解析 XML 片段
15 渲染
1. 15.1 介绍
2. 15.2 CSS 用户代理样式表和呈现提示
3. 15.3 非替换元素
4. 15.4 替换元素
5. 15.5 小部件
6. 15.6 Frame 和 frameset
7. 15.7 交互媒体
8. 15.8 打印媒体
9. 15.9 无样式的 XML 文档
16 废弃的功能
1. 16.1 废弃但合规的功能
  1. 16.1.1 废弃但合规功能的警告
2. 16.2 不合规功能
3. 16.3 实现要求
17 IANA 考虑事项
1. 17.1 text/html
2. 17.2 multipart/x-mixed-replace
3. 17.3 application/xhtml+xml
4. 17.4 text/ping
5. 17.5 application/microdata+json
6. 17.6 text/event-stream
7. 17.7 web+ scheme 前缀
索引
1. 元素
2. 元素内容类别
3. 属性
4. 元素接口
5. 所有接口
6. 事件
7. HTTP 头部
8. MIME 类型
参考文献
致谢
知识产权

1 简介

1.1 本规范的适用范围

该规范定义了网页平台的大部分内容，详细程度很高。它在网页平台规范堆栈中的位置相对于其他规范可以总结如下：

1.2 这是 HTML5 吗？

本节为非规范性内容。

简而言之：是的。

更详细地说：“HTML5”这一术语广泛用作现代网页技术的流行词，其中许多（尽管并非全部）是由 WHATWG 开发的。本文档即为其中之一；其他文档可在 WHATWG 标准概览中找到。

1.3 背景

本节为非规范性内容。

HTML 是万维网的核心标记语言。最初，HTML 主要被设计为一种用于语义描述科学文档的语言。然而，它的总体设计使得它在随后的几年中被适应为描述其他多种文档类型甚至应用程序的语言。

1.4 读者

本节为非规范性内容。

本规范旨在为使用本规范中定义的特性的文档和脚本的作者、操作使用本规范中定义特性的页面的工具的实现者，以及希望确认文档或实现是否符合本规范要求的个人提供参考。

本文件可能不适合没有至少基础了解网络技术的读者，因为在某些地方，它牺牲了清晰性以追求精确性，牺牲了简洁性以求完整性。更易于接近的教程和创作指南可以为读者提供更温和的入门介绍。

特别是，对于本规范中一些更技术性的部分，了解 DOM 的基础知识是必要的。理解 Web IDL、HTTP、XML、Unicode、字符编码、JavaScript 和 CSS 在某些地方也会有所帮助，但不是必须的。

1.5 范围

本节为非规范性内容。

本规范的范围限于提供一个语义级别的标记语言和相关的语义级别脚本 API，用于创建从静态文档到动态应用的可访问网页。

本规范的范围不包括提供媒体特定的呈现定制机制（尽管规范末尾包括了默认的网页浏览器渲染规则，并且提供了若干与 CSS 相关的钩子机制）。

本规范的范围也不包括描述整个操作系统。特别是，硬件配置软件、图像处理工具以及用户预期在高端工作站上日常使用的应用程序均不在范围之内。就应用程序而言，本规范特别针对那些预期用户偶尔使用的应用程序，或定期但在不同地点使用的应用程序，并且对 CPU 的要求较低。这类应用程序的例子包括在线购物系统、搜索系统、游戏（尤其是多人在线游戏）、公共电话簿或地址簿、通信软件（电子邮件客户端、即时消息客户端、讨论软件）、文档编辑软件等。

1.6 历史

本节为非规范性内容。

在其最初的五年（1990-1995），HTML经历了若干次修订和扩展，最初由CERN主办，之后转到IETF。

随着W3C的成立，HTML的开发再次发生了变化。1995年第一次尝试扩展HTML的HTML 3.0未能成功，随后出现了更为务实的HTML 3.2，完成于1997年。同年晚些时候，HTML4紧随其后。

次年，W3C会员决定停止对HTML的演进，转而开始开发基于XML的等效语言，称为XHTML。这个工作从HTML4在XML中的重新表述，即XHTML 1.0开始，这没有增加新功能，只是新的序列化，并于2000年完成。在XHTML 1.0之后，W3C的重点转向使其他工作组更容易扩展XHTML，名为XHTML模块化。与此同时，W3C还致力于一种与早期HTML和XHTML语言不兼容的新语言，称为XHTML2。

在1998年停止HTML演进的同时，浏览器供应商开发的HTML API部分被指定并发布，称为DOM Level 1（1998年）和DOM Level 2 Core及DOM Level 2 HTML（从2000年开始，直至2003年）。这些努力逐渐减弱，2004年发布了一些DOM Level 3规范，但工作组在所有Level 3草案完成之前就关闭了。

2003年，XForms的发布引发了对HTML自身演进的重新关注，这种技术被定位为下一代网页表单。这种兴趣源于XML作为网页技术的部署被局限于完全新技术（如RSS和后来的Atom），而不是作为现有技术（如HTML）的替代品。

一个概念验证显示扩展HTML4表单以提供XForms 1.0引入的许多功能，而无需浏览器实现与现有HTML网页不兼容的渲染引擎，是这种重新关注的第一个结果。在这一早期阶段，尽管草案已经公开，并且正在从各方征求意见，规范仅由Opera Software拥有版权。

在2004年的W3C研讨会上，HTML演进应该重新开放的想法得到了测试，一些HTML5工作的基本原则（如下所述）以及早期草案提案（仅涉及表单相关功能）由Mozilla和Opera联合向W3C提出。该提案因与之前选择的网页演进方向相冲突而被拒绝；W3C工作人员和会员投票决定继续开发基于XML的替代品。

不久之后，Apple、Mozilla和Opera共同宣布他们打算在一个名为WHATWG的新平台下继续工作。创建了一个公开的邮件列表，草案转移到WHATWG网站。版权随后被修改为由三家供应商共同拥有，并允许重新使用规范。

WHATWG基于几个核心原则，特别是技术需要向后兼容，规范和实现需要匹配，即使这意味着更改规范而不是实现，并且规范需要详细到实现可以实现完全的互操作性，而不必相互逆向工程。

特别是，后一个要求需要HTML5规范的范围包括之前在三个独立文档中规定的内容：HTML4、XHTML1和DOM2 HTML。这也意味着包含比之前考虑的更多细节。

2006年，W3C表示有兴趣参与HTML5的开发，2007年成立了一个工作组，与WHATWG合作开发HTML5规范。Apple、Mozilla和Opera允许W3C在W3C版权下发布规范，同时在WHATWG网站上保留一个具有较少限制的版本。

随后，两个小组一起工作了几年。然而，2011年，两个小组得出结论，他们的目标不同：W3C希望发布“完成”的“HTML5”版本，而WHATWG希望继续在HTML的Living Standard上工作，持续维护规范，而不是将其冻结在存在已知问题的状态，并根据需要添加新功能以发展平台。

2019年，WHATWG和W3C 签署了协议，共同协作开发一个单一版本的HTML，即本文档。

1.7 设计说明

本节为非规范性内容。

必须承认，HTML的许多方面乍一看似乎是毫无意义和不一致的。

HTML及其支持的DOM API，以及许多支持技术，已经由一系列不同优先级的人们在数十年的时间里开发完成，在很多情况下，这些人彼此之间并不知道对方的存在。

因此，特性来源于多个来源，并且设计方式并不总是特别一致。此外，由于网页的独特特性，实施错误往往成为事实上的标准，甚至现在是法定标准，因为内容通常会在修复这些错误之前以依赖它们的方式被无意中编写。

尽管如此，仍然努力坚持某些设计目标。这些目标将在接下来的几个小节中进行描述。

1.7.1 脚本执行的可序列化

本节为非规范性内容。

为了避免将多线程的复杂性暴露给网页作者，HTML和DOM API的设计使得脚本无法检测到其他脚本的同时执行。即使在工作线程中，设计的意图也是使实现行为可以被认为是完全串行化所有脚本在所有全局上下文中的执行。

这一通用设计原则的例外是JavaScript SharedArrayBuffer 类。使用 SharedArrayBuffer 对象，实际上可以观察到其他代理中的脚本同时执行。此外，由于JavaScript内存模型，存在一些情况不仅不能通过序列化的脚本执行来表示，而且不能通过序列化的语句执行来表示这些脚本中的内容。

1.7.2 与其他规范的兼容性

本节为非规范性内容。

本规范与许多其他规范进行交互并依赖于它们。在某些情况下，不幸的是，冲突的需求导致本规范违反了这些其他规范的要求。每当发生这种情况时，违规行为都会被标注为“故意违反”，并说明违反的原因。

1.7.3 扩展性

本节为非规范性内容。

HTML 提供了多种扩展机制，可以安全地添加语义：

作者可以使用 class 属性来扩展元素，实际上创建自己的元素，同时使用最适用的现有“真实” HTML 元素，以便浏览器和其他不知晓扩展的工具仍能较好地支持它。这就是微格式使用的方法。
作者可以通过 data-*="" 属性包含供客户端脚本或服务器端站点脚本处理的数据。这些属性保证不会被浏览器触及，允许脚本在 HTML 元素上包含数据，然后脚本可以查找和处理这些数据。
作者可以使用 <meta name="" content=""> 机制包含页面范围的元数据。
作者可以使用 rel="" 机制通过注册预定义链接类型的扩展来注释链接的具体含义。这也被微格式使用。
作者可以使用 <script type=""> 机制和自定义类型嵌入原始数据，供内联或服务器端脚本进一步处理。
作者可以使用 JavaScript 原型机制扩展 API。这被脚本库广泛使用。
作者可以使用微数据功能（itemscope="" 和 itemprop="" 属性）嵌入嵌套的名称-值对数据，以便与其他应用程序和网站共享。
作者可以定义、共享和使用自定义元素来扩展 HTML 的词汇。有效自定义元素名称的要求确保了向前兼容性（因为未来不会在 HTML、SVG 或 MathML 中添加包含连字符的本地名称的元素）。

1.8 HTML 与 XML 语法

本节为非规范性内容。

本规范定义了一种用于描述文档和应用程序的抽象语言，以及一些用于与使用该语言的资源的内存表示进行交互的 API。

这种内存中的表示称为“DOM HTML”，简称“DOM”。

有多种具体语法可以用于传输使用该抽象语言的资源，其中两种在本规范中有定义。

第一种具体语法是 HTML 语法。这是建议大多数作者使用的格式。它与大多数传统网页浏览器兼容。如果文档以 text/html MIME 类型传输，那么它将被网页浏览器作为 HTML 文档处理。本规范定义了最新的 HTML 语法，简称“HTML”。

第二种具体语法是 XML。当文档以 XML MIME 类型（例如 application/xhtml+xml）传输时，它将被网页浏览器视为 XML 文档，由 XML 处理器进行解析。作者需要注意 XML 和 HTML 的处理方式不同；特别是，即使是小的语法错误也会导致标记为 XML 的文档无法完全呈现，而在 HTML 语法中这些错误会被忽略。

HTML 的 XML 语法以前被称为“XHTML”，但本规范不使用该术语（其中一个原因是，MathML 和 SVG 的 HTML 语法中没有使用该术语）。

DOM、HTML 语法和 XML 语法无法完全表示相同的内容。例如，HTML 语法无法表示命名空间，但 DOM 和 XML 语法支持。类似地，使用 noscript 特性的文档可以使用 HTML 语法表示，但无法使用 DOM 或 XML 语法表示。包含字符串 "-->" 的注释只能在 DOM 中表示，而不能在 HTML 和 XML 语法中表示。

1.9 本规范的结构

本节为非规范性内容。

本规范分为以下主要部分：

引言: 提供 HTML 标准的背景信息的非规范性材料。
通用基础设施: 规范的合规类、算法、定义及其余部分的共同基础。
HTML 文档的语义、结构和 API: 文档由元素构建。这些元素使用 DOM 形成树。本节定义了此 DOM 的特性，并介绍了所有元素的共同特性及定义元素所使用的概念。
HTML 的元素: 每个元素都有预定义的含义，本节对这些含义进行了说明。还提供了作者如何使用元素的规则，以及用户代理对每个元素的处理要求。这包括 HTML 的大型特性，如视频播放和字幕、表单控件和表单提交，以及一个称为 HTML 画布的 2D 图形 API。
微数据: 本规范引入了一种机制，用于向文档添加机器可读的注释，以便工具可以从文档中提取名称-值对树。本节描述了此机制以及一些用于将 HTML 文档转换为其他格式的算法。本节还定义了一些示例微数据词汇表，如联系信息、日历事件和许可作品。
用户交互: HTML 文档可以提供多种机制供用户与内容交互和修改，本节描述了这些机制，如焦点的工作原理和拖放。
加载网页: HTML 文档不是在真空中存在的——本节定义了影响处理多个页面的环境（如网页浏览器）的许多特性。
Web 应用程序 API: 本节介绍了 HTML 应用程序脚本的基本特性。
Web Workers: 本节定义了 JavaScript 背景线程的 API。
Worklets: 本节定义了需要与主 JavaScript 执行环境分开运行的 JavaScript API 的基础设施。
通信 API: 本节描述了使用 HTML 编写的应用程序可以用来与同一客户端上运行的不同域中的其他应用程序通信的一些机制。它还介绍了一种称为服务器发送事件（Server Sent Events）或 EventSource 的服务器推送事件流机制，以及一种名为 Web Sockets 的双向全双工套接字协议。
Web 存储: 本节定义了一种基于名称-值对的客户端存储机制。
HTML 语法
XML 语法: 所有这些特性如果不能以序列化形式表示并传送给其他人，将毫无意义，因此这些部分定义了 HTML 和 XML 的语法，以及如何使用这些语法解析内容的规则。
渲染: 本节定义了网页浏览器的默认渲染规则。

此外，还有一些附录，列出了过时的特性和 IANA 注意事项，以及几个索引。

1.9.1 如何阅读本规范

阅读本规范的方法与其他规范类似。首先，应该全面阅读多次。然后，至少要反向阅读一次。接着，可以通过从目录中随机挑选章节并跟踪所有交叉引用来进行阅读。

如下面的合规要求部分所述，本规范描述了多种合规类别的合规标准。特别是，有些合规要求适用于 生产者，例如作者及其创建的文档，还有些合规要求适用于 消费者，例如网页浏览器。它们可以通过要求的内容来区分：对生产者的要求说明了允许的内容，而对消费者的要求则说明了软件应该如何行动。

例如，“foo 属性的值必须是一个有效整数”是对生产者的要求，因为它规定了允许的值；相比之下，“foo 属性的值必须按照解析整数的规则进行解析”的要求是对消费者的要求，因为它描述了如何处理内容。

对生产者的要求对消费者没有任何影响。

继续上述示例，一个声明特定属性值受限于有效整数的要求明确地不意味着对消费者的要求。可能消费者实际上被要求将属性视为不透明字符串，完全不受值是否符合要求的影响。也可能（如上例所示），消费者被要求使用特定规则解析值，定义如何处理无效（在此情况下为非数字）值。

1.9.2 排版约定

这是一个定义、要求或解释。

这是一个备注。

这是一个示例。

这是一个未解决的问题。

这是一个警告。

[Exposed=Window]
interface Example {
// 这是一个IDL定义
};

variable = object.method([optionalArgument]): 这是一个描述接口使用的注释。

/* 这是一个CSS片段 */

术语的定义实例标记为这样。该术语的使用标记为这样或这样。

元素、属性或API的定义实例标记为 这样。对该元素、属性或API的引用标记为 这样。

其他代码片段标记为 这样。

变量标记为 这样。

在算法中，同步部分中的步骤标记为 ⌛。

在某些情况下，要求以带有条件和对应要求的列表形式给出。在这种情况下，适用于条件的要求始终是紧跟在条件后的第一组要求，即使对于这些要求有多个条件组。这样的情况呈现如下：

这是一个条件
这是另一个条件: 这是适用于上述条件的要求。
这是第三个条件: 这是适用于第三个条件的要求。

1.10 HTML简要介绍

本节非规范性。

一个基本的HTML文档如下所示：

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Sample page</title>
 </head>
 <body>
  <h1>Sample page</h1>
  <p>This is a <a href="demo.html">simple</a> sample.</p>
  <!-- this is a comment -->
 </body>
</html>

HTML文档由元素和文本构成的树状结构组成。每个元素在源代码中由一个开始标签（如“<body>”）和一个结束标签（如“</body>”）表示。（在某些情况下，某些开始标签和结束标签可以省略，由其他标签隐含。）

标签必须嵌套在一起，确保所有元素完全包含在彼此之内，不可重叠：

<p>This is <em>very <strong>wrong</em>!</strong></p>

<p>This <em>is <strong>correct</strong>.</em></p>

本规范定义了一组可以在HTML中使用的元素，以及有关元素嵌套方式的规则。

元素可以具有属性，这些属性控制元素的功能。在下面的示例中，有一个超链接，使用了a元素及其href属性：

<a href="demo.html">simple</a>

属性放在开始标签内，由一个名称和一个值组成，中间用"="字符分隔。如果属性值不包含ASCII 空白字符或任何" ' ` = < 或>，则属性值可以保持未加引号。否则，属性值必须使用单引号或双引号括起来。如果值为空字符串，则可以省略值和"="字符。

<!-- empty attributes -->
<input name=address disabled>
<input name=address disabled="">

<!-- attributes with a value -->
<input name=address maxlength=200>
<input name=address maxlength='200'>
<input name=address maxlength="200">

HTML 用户代理（例如，网页浏览器）会解析这些标记，将其转换为 DOM（文档对象模型）树。DOM 树是文档的内存中的表示。

DOM 树包含几种类型的节点，特别是一个DocumentType节点，Element节点，Text节点，Comment节点，以及在某些情况下的ProcessingInstruction节点。

本节顶部的标记片段将被转换为以下 DOM 树：

DOCTYPE: html
html lang="en"
- head
  - #text: ⏎␣␣
  - title
    - #text: Sample page
  - #text: ⏎␣
- #text: ⏎␣
- body
  - #text: ⏎␣␣
  - h1
    - #text: Sample page
  - #text: ⏎␣␣
  - p
    - #text: This is a
    - a href="demo.html"
      - #text: simple
    - #text: sample.
  - #text: ⏎␣␣
  - #comment: this is a comment
  - #text: ⏎␣⏎

这个树的文档元素是 html 元素，这是在 HTML 文档中始终出现在该位置的元素。它包含两个元素， head 和 body，以及它们之间的一个 文本 节点。

在 DOM 树中，文本 节点比最初预期的要多，因为源代码中包含了许多空格（在这里表示为“␣”）和换行符（“⏎”），这些最终都会成为 文本 节点。然而，由于历史原因，并非所有的空格和换行符在原始标记中都会出现在 DOM 中。特别是，head 起始标签之前的所有空白会被静默丢弃，而 body 结束标签之后的所有空白则会被放置在 body 元素的末尾。

head 元素包含一个 title 元素，它本身包含一个 文本 节点，文本内容为 "Sample page"。类似地，body 元素包含一个 h1 元素，一个 p 元素，以及一个注释。

这个 DOM 树可以通过页面中的脚本进行操作。脚本（通常是 JavaScript）是可以嵌入的程序，使用 script 元素或使用事件处理程序内容属性嵌入。例如，这里是一个表单和一个脚本，该脚本将表单的 output 元素的值设置为 "Hello World"：

<form name="main">
Result: <output name="result"></output>
<script>
document.forms.main.elements.result.value = 'Hello World';
</script>
</form>

DOM 树中的每个元素由一个对象表示，这些对象具有 API 以便进行操作。例如，链接（例如上面树中的 a 元素）可以通过几种方式更改其 "href" 属性：

var a = document.links[0]; // obtain the first link in the document
a.href = 'sample.html'; // change the destination URL of the link
a.protocol = 'https'; // change just the scheme part of the URL
a.setAttribute('href', 'https://example.com/'); // change the content attribute directly

由于 DOM 树是用于表示 HTML 文档的方式，尤其是在交互式实现（如网页浏览器）中处理和呈现文档时，本规范大多以 DOM 树的术语来描述，而不是上面描述的标记。

HTML 文档代表了一个与媒体无关的互动内容描述。HTML 文档可能会被渲染到屏幕上，或者通过语音合成器，或者在盲文显示器上。为了精确控制渲染方式，作者可以使用样式语言，如 CSS。

在以下示例中，页面使用 CSS 被设置为黄底蓝字。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample styled page</title>
<style>
body { background: navy; color: yellow; }
</style>
</head>
<body>
<h1>Sample styled page</h1>
<p>This page is just a demo.</p>
</body>
</html>

有关如何使用 HTML 的更多详细信息，建议作者查阅教程和指南。虽然本规范中包含的一些示例可能也会有所帮助，但新手作者需注意，本规范为了必要性，以一种可能难以理解的细节水平定义了语言。

1.10.1 使用 HTML 编写安全应用程序

本节为非规范性内容。

当 HTML 被用于创建交互式网站时，需要注意避免引入漏洞，通过这些漏洞攻击者可以破坏网站自身或用户的安全。

对这一问题的全面研究超出了本文档的范围，强烈建议作者更详细地研究这一问题。然而，本节尝试提供对 HTML 应用开发中一些常见陷阱的快速介绍。

网络的安全模型基于“来源”概念，相应地，许多对网络的潜在攻击涉及跨源操作。 [ORIGIN]

未验证用户输入

跨站脚本攻击（XSS）

SQL 注入

在接受不可信的输入时，例如用户生成的内容如文本评论、URL 参数中的值、来自第三方网站的消息等，必须在使用之前对数据进行验证，并在显示时正确转义。否则，恶意用户可能会执行各种攻击，从可能无害的提供虚假用户信息（如负年龄），到严重的情况，例如每当用户查看包含信息的页面时运行脚本，可能在过程中传播攻击，到灾难性的情况，例如删除服务器中的所有数据。

在编写验证用户输入的过滤器时，必须确保过滤器始终基于白名单，允许已知安全的构造，拒绝所有其他输入。基于黑名单的过滤器，仅拒绝已知的恶意输入而允许其他所有输入是不安全的，因为并不是所有的恶意内容都是已知的（例如，可能是未来发明的）。

例如，假设一个页面查看其 URL 的查询字符串来确定要显示的内容，然后网站将用户重定向到该页面以显示消息，如下所示：

<ul>
 <li><a href="message.cgi?say=Hello">Say Hello</a>
 <li><a href="message.cgi?say=Welcome">Say Welcome</a>
 <li><a href="message.cgi?say=Kittens">Say Kittens</a>
</ul>

如果消息只是显示给用户而没有转义，恶意攻击者可能会构造一个包含脚本元素的 URL：

https://example.com/message.cgi?say=%3Cscript%3Ealert%28%27Oh%20no%21%27%29%3C/script%3E

如果攻击者成功地说服受害用户访问此页面，攻击者选择的脚本将在页面上运行。这样的脚本可以执行任何数量的恶意操作，仅受网站提供的功能的限制：例如，如果网站是电子商务商店，这样的脚本可能导致用户在不知情的情况下进行任意多的购买。

这被称为跨站脚本攻击。

有许多构造可以用来尝试欺骗网站执行代码。以下是一些作者在编写白名单过滤器时被鼓励考虑的：

当允许像 img 这样的看似无害的元素时，必须对任何提供的属性进行白名单过滤。如果允许所有属性，那么攻击者可以例如使用 onload 属性来运行任意脚本。
当允许提供 URL（例如用于链接）时，还需要明确地对白名单中每个 URL 的方案，因为有许多方案可以被滥用。最显著的例子是 "javascript:"，但用户代理可以实现（并且确实在历史上实现过）其他方案。
允许插入 base 元素意味着页面中的任何带有相对链接的 script 元素都可能被劫持，同样地，任何表单提交都可能被重定向到一个恶意网站。

跨站请求伪造（CSRF）

如果网站允许用户进行具有用户特定副作用的表单提交，例如在论坛上以用户的名义发布消息、进行购买或申请护照，则必须验证请求是否确实由用户自愿发出，而不是由其他网站欺骗用户无意中发出请求。

这个问题存在是因为 HTML 表单可以提交到其他来源。

网站可以通过填充带有用户特定的隐藏令牌的表单，或通过检查 `Origin` 头来防止此类攻击。

点击劫持

提供用户执行他们可能不愿意执行的操作的接口的页面需要设计得足够谨慎，以避免用户被欺骗以激活该接口。

一种用户可能被欺骗的方法是，如果恶意网站将受害网站放在一个小的 iframe 中，然后通过让用户玩反应游戏来说服用户点击。例如，一旦用户开始玩游戏，恶意网站可以快速将 iframe 定位到鼠标指针下方，正当用户准备点击时，从而欺骗用户点击受害网站的界面。

为了避免这种情况，建议不期望在框架中使用的站点仅在检测到它们不在框架中时启用其接口（例如，通过将 window 对象与 top 属性的值进行比较）。

1.10.2 使用脚本 API 时需避免的常见陷阱

本节为非规范性内容。

HTML 中的脚本具有“执行完成”语义，这意味着浏览器通常会在执行其他操作之前运行脚本，例如触发更多事件或继续解析文档。

另一方面，HTML 文件的解析是增量进行的，这意味着解析器可以在任何点暂停以运行脚本。这通常是有益的，但这也意味着作者需要小心，以避免在事件可能已被触发后才挂钩事件处理程序。

有两种可靠的方法可以做到这一点：使用事件处理程序内容属性，或者在同一个脚本中创建元素并添加事件处理程序。后一种方法是安全的，因为如前所述，脚本会在进一步事件触发之前完成执行。

这种情况可能会在 img 元素和 load 事件中体现。该事件可能会在元素被解析后立即触发，特别是当图像已经被缓存时（这种情况很常见）。

在这里，作者在一个 img 元素上使用 onload 处理程序来捕捉 load 事件：

<img src="games.png" alt="Games" onload="gamesLogoHasLoaded(event)">

如果元素是由脚本添加的，只要在同一个脚本中添加事件处理程序，事件仍然不会丢失：

<script>
 var img = new Image();
 img.src = 'games.png';
 img.alt = 'Games';
 img.onload = gamesLogoHasLoaded;
 // img.addEventListener('load', gamesLogoHasLoaded, false); // would work also
</script>

然而，如果作者先创建了 img 元素，然后在一个单独的脚本中添加事件监听器，就有可能在事件触发之间丢失 load 事件：

<!-- Do not use this style, it has a race condition! -->
 <img id="games" src="games.png" alt="Games">
 <!-- the 'load' event might fire here while the parser is taking a
      break, in which case you will not see it! -->
 <script>
  var img = document.getElementById('games');
  img.onload = gamesLogoHasLoaded; // might never fire!
 </script>

1.10.3 如何捕捉编写 HTML 时的错误：验证器和合规检查器

本节为非规范性内容。

建议作者使用合规检查器（也称为 验证器）来捕捉常见错误。WHATWG 维护了一个此类工具的列表：https://whatwg.org/validator/

1.11 对作者的合规要求

本节为非规范性内容。

与之前版本的 HTML 规范不同，本规范详细定义了无效文档和有效文档的处理要求。

然而，即使无效内容的处理在大多数情况下是明确的，文档的合规要求仍然很重要：实际上，互操作性（即所有实现以可靠和相同或等效的方式处理特定内容）并不是文档合规要求的唯一目标。本节详细说明了仍然区分符合规范的文档和有错误的文档的一些常见原因。

1.11.1 表现性标记

本节为非规范性内容。

以前版本的 HTML 中大多数表现性特性现在已不再允许。表现性标记通常存在一些问题：

使用表现性元素会导致可访问性差

虽然可以以提供给辅助技术（AT）用户可接受体验的方式使用表现性标记（例如，使用 ARIA），但这样做比使用语义上合适的标记要困难得多。此外，即使使用这些技术，也无法帮助非 AT 用户，如文本模式浏览器用户，使页面变得可访问。

另一方面，使用与媒体无关的标记可以提供一种简单的方法，使文档能够以更适合更多用户（例如文本浏览器用户）的方式编写。

维护成本更高

维护风格无关的站点要容易得多。例如，更改整个站点中使用 <font color=""> 的颜色需要对整个站点进行更改，而对基于 CSS 的站点进行类似更改只需更改一个文件。

文档大小更大

表现性标记往往更加冗余，因此导致文档大小更大。

由于这些原因，表现性标记在这一版本的 HTML 中已被移除。这一变化并不令人惊讶；HTML4 很多年前已弃用了表现性标记，并提供了一种模式（HTML4 Transitional）来帮助作者摆脱表现性标记；随后，XHTML 1.1 进一步将这些特性完全废弃。

HTML 中唯一剩余的表现性标记特性是 style 属性和 style 元素。style 属性在生产环境中使用有些不被推荐，但在快速原型制作（其规则可以随后直接移入单独的样式表）和在特定情况下提供特殊样式时（在这种情况下使用单独的样式表可能不方便）是有用的。类似地，style 元素在聚合或页面特定样式中可能很有用，但一般来说，当样式适用于多个页面时，外部样式表可能更为方便。

还值得注意的是，一些以前被认为是表现性的元素在本规范中被重新定义为与媒体无关：b、i、hr、s、small 和 u。

1.11.2 语法错误

本节为非规范性内容。

HTML 的语法被约束以避免各种问题。

不直观的错误处理行为

某些无效的语法构造在解析时，会生成非常不直观的 DOM 树。

例如，以下标记片段会导致 DOM 中的 hr 元素成为相应 table 元素的前面的兄弟元素：

<table><hr>...

具有可选错误恢复的错误

为了使用户代理在受控环境中使用而无需实现更奇异和复杂的错误处理规则，允许用户代理在遇到解析错误时失败。

错误处理行为与流式用户代理不兼容

一些错误处理行为，例如上面提到的 <table><hr>... 示例，不兼容流式用户代理（即以单次传递处理 HTML 文件的用户代理，不存储状态）。为了避免与这些用户代理的互操作性问题，任何导致这种行为的语法都被视为无效。

可能导致 infoset 强制转换的错误

当基于 XML 的用户代理连接到 HTML 解析器时，可能会出现违反 XML 强制的某些不变性（例如，元素或属性名称从不包含多个冒号）的情况。这需要解析器将 HTML DOM 强制转换为与 XML 兼容的 infoset。大多数需要这种处理的语法构造被视为无效。（包含两个连续连字符或以连字符结尾的注释是 HTML 语法中允许的例外。）

导致性能显著下降的错误

某些语法构造可能导致性能显著下降。为了防止使用这些构造，通常会将其标记为不符合规范。

例如，以下标记导致性能下降，因为所有未闭合的 i 元素必须在每个段落中重建，从而导致每个段落中的元素逐渐增多：

<p><i>She dreamt.
<p><i>She dreamt that she ate breakfast.
<p><i>Then lunch.
<p><i>And finally dinner.

这个片段生成的 DOM 将是：

p
- i
  - #text: She dreamt.
p
- i
  - i
    - #text: She dreamt that she ate breakfast.
p
- i
  - i
    - i
      - #text: Then lunch.
p
- i
  - i
    - i
      - i
        
        #text: And finally dinner.

涉及脆弱语法构造的错误

有些语法构造由于历史原因，较为脆弱。为了减少用户偶然遇到此类问题的数量，这些构造被设为不符合规范。

例如，某些命名字符引用在属性中的解析即使在省略了结束分号的情况下也会发生。可以安全地包含一个紧跟着非命名字符引用字母的与号，但如果字母被更改为一个确实形成命名字符引用的字符串，它们将被解释为该字符。

在以下片段中，属性的值是 "?bill&ted"：

<a href="?bill&ted">Bill and Ted</a>

然而，在以下片段中，属性的值实际上是 "?art©"，而不是预期的 "?art&copy"，因为即使没有最终的分号，"&copy" 也会被处理为 "©"，从而被解释为 "©"：

<a href="?art&copy">Art and Copy</a>

为避免此问题，所有命名字符引用必须以分号结束，且未以分号结束的命名字符引用将被标记为错误。

因此，上述情况的正确表示方式如下：

<a href="?bill&ted">Bill and Ted</a> <!-- &ted is ok, since it's not a named character reference -->

<a href="?art&amp;copy">Art and Copy</a> <!-- the & has to be escaped, since &copy is a named character reference -->

涉及已知的旧版用户代理互操作性问题的错误

某些语法构造已知会在旧版用户代理中引发特别微妙或严重的问题，因此被标记为不符合规范，以帮助作者避免这些问题。

例如，这就是为什么 U+0060 GRAVE ACCENT 字符（`）不允许出现在未加引号的属性中。在某些旧版用户代理中，它有时被当作引号字符处理。

另一个例子是 DOCTYPE，它被要求触发无怪异模式，因为在怪异模式下旧版用户代理的行为通常大多未记录。

可能暴露作者于安全攻击的错误

某些限制纯粹是为了避免已知的安全问题。

例如，限制使用 UTF-7 的规定纯粹是为了避免作者受到利用 UTF-7 的已知跨站脚本攻击的威胁。 [UTF7]

作者意图不明确的情况

作者意图非常不明确的标记通常被标记为不符合规范。尽早纠正这些错误可以使后续维护更容易。

例如，以下内容作者是否意图将其作为 h1 标题还是 h2 标题尚不清楚：

<h1>Contact details</h2>

可能是打字错误的情况

当用户犯简单的打字错误时，如果能够及早捕捉到错误，这将有助于节省作者大量的调试时间。因此，本规范通常将使用与规范中定义的名称不匹配的元素名称、属性名称等视为错误。

例如，如果作者输入了 <capton> 而不是 <caption>，这将被标记为错误，作者可以立即纠正这个打字错误。

可能干扰未来新语法的错误

为了允许将来扩展语言语法，某些原本无害的特性被禁止。

例如，结束标签中的“属性”目前被忽略，但它们是无效的，以防将来对语言进行修改时，使用该语法特性而不与已经部署的（并且有效的！）内容冲突。

一些作者发现，总是引用所有属性并始终包括所有可选标签的做法是有帮助的，他们更倾向于从这种习惯中获得的一致性，而不是利用HTML语法的灵活性所带来的微小好处。为了帮助这些作者，符合性检查工具可以提供一种操作模式，其中强制执行这些约定。

1.11.3 内容模型和属性值的限制

本节是非规范性的。

除了语言的语法之外，本规范还对如何指定元素和属性进行限制。这些限制存在的原因类似：

涉及可疑语义的内容错误

为了避免误用具有明确意义的元素，定义了内容模型以限制元素在这种嵌套不太可能有价值的情况下的嵌套方式。

例如，本规范不允许将一个section 元素嵌套在一个kbd 元素内，因为作者不太可能表示整个部分应输入的意思。

涉及表达语义冲突的错误

同样，为了引起作者对元素使用错误的注意，明确的语义矛盾也被视为符合性错误。

例如，在下面的片段中，语义是不合理的：分隔符不能同时是单元格，单选按钮也不能是进度条。

<hr role="cell">

<input type=radio role=progressbar>

另一个例子是ul 元素的内容模型限制，该模型只允许li 元素作为子元素。列表按定义仅由零个或多个列表项组成，因此如果一个ul 元素包含除li 元素以外的内容，就不清楚其含义了。

可能导致混淆的默认样式错误

某些元素具有默认样式或行为，这使得某些组合可能会导致混淆。如果这些问题可以通过使用没有这些问题的等效替代方案来避免，则混淆的组合将不被允许。

例如，div 元素作为块盒显示，而span 元素作为行内盒显示。在一个块盒中放置一个行内盒是不必要的混淆；因为无论是仅嵌套div 元素，还是仅嵌套span 元素，或者在div 元素中嵌套span 元素，都可以达到相同的目的。因此，div 元素嵌套在span元素中是被禁止的。

另一个例子是交互内容不能嵌套。例如，button 元素不能包含textarea 元素。这是因为这种嵌套交互元素的默认行为对用户来说会非常混乱。相反，这些元素可以并排放置。

表明对规范误解的错误

有时，一些东西被禁止是因为允许它会导致作者的混淆。

例如，将disabled 属性设置为false是禁止的，因为尽管看起来是表示元素是启用的，但实际上表示元素是禁用的（对于实现来说，重要的是属性的存在，而不是其值）。

为简化语言而施加的限制错误

某些符合性错误简化了作者需要学习的语言。

例如，area 元素的shape 属性，尽管在实践中circ 和circle 值作为同义词接受，但禁止使用circ 值，以简化教程和其他学习工具。允许两者没有任何好处，但会在教授语言时引起额外的混淆。

涉及解析器特性的错误

某些元素以有些古怪的方式解析（通常是历史原因），其内容模型限制旨在避免作者暴露于这些问题。

例如，一个form 元素不允许在短语内容中，因为当作为HTML解析时，form 元素的开始标签将暗示一个 p 元素的结束标签。因此，以下标记会产生两个段落，而不是一个：

<p>Welcome. <form><label>Name:</label> <input></form>

它的解析方式与以下内容完全相同：

<p>Welcome. </p><form><label>Name:</label> <input></form>

导致脚本难以调试的错误

某些错误旨在帮助防止难以调试的脚本问题。

例如，这就是为什么具有相同值的两个id 属性是非规范的。重复的ID会导致选择错误的元素，有时会导致难以确定原因的灾难性效果。

浪费创作时间的错误

某些构造被禁止是因为它们在历史上已导致了大量的创作时间浪费，通过鼓励作者避免犯这些错误，可以在未来的工作中节省时间。

例如，一个script 元素的src 属性会导致元素的内容被忽略。然而，这并不明显，特别是当元素的内容看起来像可执行脚本时——这会导致作者花费大量时间尝试调试内联脚本，而没有意识到它没有执行。为了减少这个问题，本规范使在存在src 属性时，在script 元素中包含可执行脚本为非规范。这意味着验证其文档的作者不太可能在这种错误上浪费时间。

涉及在HTML和XML语法之间迁移的作者的错误

有些作者喜欢编写可以同时作为XML和HTML解释并具有类似结果的文件。尽管这种做法在一般情况下由于涉及的各种微妙复杂性（尤其是涉及脚本、样式或任何形式的自动化序列化）而不鼓励，但本规范有一些限制旨在至少在某种程度上缓解这些困难。这使得作者在HTML和XML语法之间迁移时可以更轻松地使用此过渡步骤。

例如，围绕lang 和xml:lang 属性的规则相对复杂，旨在保持两者同步。

另一个例子是HTML序列化中xmlns属性值的限制，旨在确保无论是作为HTML还是XML处理，符合规范的文档中的元素最终都会位于相同的命名空间中。

涉及为未来扩展保留的区域的错误

与旨在允许将来修订语言的新语法的语法限制一样，对元素的内容模型和属性值的某些限制旨在允许HTML词汇的未来扩展。

例如，限制以U+005F下划线字符（_）开头的target 属性的值仅限于特定的预定义值，以便将来可以引入新的预定义值，而不会与作者定义的值冲突。

涉及误用其他规范的错误

某些限制旨在支持其他规范的限制。

例如，要求使用媒体查询列表的属性仅使用有效的媒体查询列表，加强了遵循该规范的符合性规则的重要性。

1.12 建议阅读

本节是非规范性的。

以下文档可能对本规范的读者感兴趣。

万维网字符模型 1.0: 基础 [CHARMOD]: 本架构规范为规范的作者、软件开发人员和内容开发人员提供了一个共同的参考，用于在万维网上进行可互操作的文本处理，基于Unicode标准和ISO/IEC 10646共同定义的通用字符集。涉及的主题包括“字符”、“编码”和“字符串”的使用术语、参考处理模型、字符编码的选择和标识、字符转义和字符串索引。
Unicode 安全考虑 [UTR36]: 由于Unicode包含了大量字符并结合了世界上各种书写系统，不正确的使用可能会使程序或系统面临潜在的安全攻击。这在越来越多的产品国际化时尤为重要。本文件描述了程序员、系统分析员、标准开发人员和用户应考虑的一些安全问题，并提供了具体的建议以降低问题的风险。
网页内容无障碍指南 (WCAG) [WCAG]: 网页内容无障碍指南 (WCAG) 涵盖了一系列使网页内容更具可访问性的建议。遵循这些指南将使内容对更多有残疾的人更易访问，包括盲人和低视力者、聋人和听力损失者、学习障碍者、认知限制者、行动不便者、言语障碍者、光敏感者及其组合。遵循这些指南通常也会使您的网页内容对一般用户更易用。
创作工具无障碍指南 (ATAG) 2.0 [ATAG]: 本规范提供了设计更易于残障人士使用的网页内容创作工具的指南。符合这些指南的创作工具将通过为残障作者提供可访问的用户界面以及通过启用、支持和促进所有作者创作可访问的网页内容来促进无障碍。
用户代理无障碍指南 (UAAG) 2.0 [UAAG]: 本文件提供了设计用户代理的指南，以降低残障人士在网页无障碍方面的障碍。用户代理包括浏览器和其他类型的检索和呈现网页内容的软件。符合这些指南的用户代理将通过其自身的用户界面和其他内部功能（包括与其他技术（尤其是辅助技术）通信的能力）促进无障碍。此外，所有用户，不仅仅是残障用户，都会发现符合这些指南的用户代理更易用。

2 常见基础设施

本规范依赖于 Infra。[INFRA]

2.1 术语

本规范提到HTML和XML属性以及IDL属性时，通常在同一上下文中使用。当不清楚所指为何时，HTML和XML属性被称为内容属性，而IDL接口中定义的那些则被称为IDL属性。同样，"属性"一词既用于JavaScript对象属性，也用于CSS属性。当这些术语有歧义时，会分别限定为对象属性和CSS属性。

通常，当规范说明某个功能适用于HTML语法或XML语法时，它也包括另一种语法。当某个功能仅适用于两种语言中的一种时，会明确指出它不适用于另一种格式，例如“对于HTML，...（这不适用于XML）”。

本规范使用术语文档来指代任何使用HTML的情况，从短的静态文档到带有丰富多媒体的长篇文章或报告，以及完全成熟的交互式应用程序。该术语用于指代Document 对象及其后代DOM树，以及根据上下文使用HTML语法或XML语法的序列化字节流。

在DOM结构的上下文中，术语HTML文档和XML文档按照DOM中的定义使用，特指Document对象可能处于的两种不同模式。[DOM]（此类用法总是超链接到其定义。）

在字节流的上下文中，术语HTML文档指的是标记为text/html的资源，术语XML文档指的是标记为XML MIME类型的资源。

为了简化，术语如显示、呈现和可见有时可能用于指代文档呈现给用户的方式。这些术语并不意味着特指视觉媒介；它们必须被视为在其他媒介中具有等效的应用。

2.1.1 并行处理

按照定义并行执行步骤，意味着这些步骤在标准中的其他逻辑（例如，事件循环）同时运行。该标准未定义实现这一目标的精确机制，无论是时间共享协作多任务处理、纤程、线程、进程、使用不同的超线程、核心、CPU、机器等。相比之下，立即运行的操作必须中断当前正在运行的任务，自己运行，然后恢复之前正在运行的任务。

有关编写利用并行处理规范的指南，请参见其他规范中的事件循环处理。

为了避免不同并行算法在操作相同数据时产生竞争条件，可以使用并行队列。

并行队列表示必须按顺序运行的一系列算法步骤。

并行队列有一个算法队列（一个队列），最初为空。

要将步骤加入队列到并行队列，加入算法步骤到并行队列的算法队列。

要启动一个新的并行队列，请运行以下步骤：

令parallelQueue为一个新的并行队列。
并行运行以下步骤：
1. 当为真时：
  1. 令steps为从parallelQueue的算法队列出队的结果。
  2. 如果steps不为空，则运行steps。
  3. 断言：运行steps未抛出异常，因为并行运行的步骤不得抛出异常。
  实现不需要将此作为持续运行的循环来实现。标准中的算法应易于理解，不一定对电池寿命或性能有好处。
返回parallelQueue。

并行运行的步骤本身可以并行运行其他步骤。例如，在并行队列内并行运行一系列步骤可能是有用的。

设想一个标准定义的nameList（一个列表），以及一个方法将name添加到nameList，除非nameList已经包含name，在这种情况下，它将拒绝。

以下解决方案存在竞态条件：

让p成为在此对象的相关领域中创建的一个新承诺。
按以下步骤并行运行：
1. 如果nameList包含name，则在全局任务队列中基于此对象的相关全局对象拒绝p，并抛出 TypeError，并中止这些步骤。
2. 进行一些可能耗时的工作。
3. 将name追加到 nameList。
4. 在全局任务队列中，基于此对象的相关全局对象，以undefined解析p。
返回p。

以上两个调用可以同时运行，这意味着在步骤 2.1 中name不在nameList中，但在步骤 2.3 运行之前，它 可能被添加，这意味着name最终在nameList中出现了两次。

并行队列解决了这个问题。标准将让nameListQueue作为启动一个新并行队列的结果，然后：

让p成为在此对象的相关领域中创建的一个新承诺。
将以下步骤加入队列到nameListQueue：
1. 如果nameList包含name，则在全局任务队列中基于此对象的相关全局对象拒绝p，并抛出 TypeError，并中止这些步骤。
2. 进行一些可能耗时的工作。
3. 将name追加到 nameList。
4. 在全局任务队列中，基于此对象的相关全局对象，以undefined解析p。
返回p。

这些步骤现在会排队，竞态得以避免。

2.1.2 资源

本规范使用术语支持的来指用户代理是否具有能够解码外部资源语义的实现。当实现能够处理某种格式或类型的外部资源而不会忽略资源的关键方面时，该格式或类型被称为支持的。特定资源是否支持的可能取决于资源格式中使用的功能。

例如，如果可以解码并渲染PNG图像的像素数据，即使实现不知道图像还包含动画数据，该图像也被认为是支持的格式。

如果使用的压缩格式不支持，即使实现可以从文件的元数据中确定电影的尺寸，MPEG-4视频文件也不会被认为是支持的格式。

某些规范（特别是HTTP规范）所指的表示在本规范中被称为资源。[HTTP]

资源的关键子资源是指资源需要可用以便被正确处理的那些资源。哪些资源被认为是关键资源由定义资源格式的规范规定。

对于CSS样式表，我们在此暂时定义它们的关键子资源是通过@import规则导入的其他样式表，包括由其他导入的样式表间接导入的样式表。

此定义尚未完全互操作；此外，一些用户代理似乎将背景图像或网页字体等资源视为关键子资源。理想情况下，CSS工作组将定义这一点；请参见w3c/csswg-drafts issue #1088以跟踪此方面的进展。

2.1.3 XML兼容性

为了简化从HTML到XML的迁移，符合本规范的用户代理将在DOM和CSS的目的下，将HTML中的元素放置在http://www.w3.org/1999/xhtml命名空间中。术语"HTML元素"指的是该命名空间中的任何元素，即使是在XML文档中。

除非另有说明，本规范中定义或提到的所有元素都在HTML命名空间 ("http://www.w3.org/1999/xhtml")中，且本规范中定义或提到的所有属性都没有命名空间。

术语元素类型用于指具有给定本地名称和命名空间的元素集。例如，button元素是具有元素类型button的元素，这意味着它们具有本地名称"button"，并且（如上所述隐含）在HTML命名空间中。

如果属性名称与XML中定义的Name生产匹配，并且不包含U+003A冒号字符(:)，则称这些属性名称为XML兼容。[XML]

2.1.4 DOM树

当声明某个元素或属性被忽略，或被视为其他值，或处理为其他内容时，这仅指节点在DOM中处理的情况。在这种情况下，用户代理不得更改DOM。

只有当内容属性的新值与其先前的值不同，才说内容属性改变了值；将属性设置为它已经具有的值不会改变它。

当术语空用于属性值、文本节点或字符串时，表示文本的长度为零（即，不包含控制字符或U+0020空格）。

HTML 元素可以具有特定的 HTML 元素插入步骤、HTML 元素连接后步骤和 HTML 元素移除步骤，这些步骤都是根据元素的本地名称定义的。

HTML标准的插入步骤，给定insertedNode，定义如下：

如果insertedNode是一个元素，并且其命名空间是HTML 命名空间，并且本标准为insertedNode的本地名称定义了HTML 元素插入步骤，则运行相应的HTML 元素插入步骤，给定insertedNode。
如果insertedNode是表单关联元素或其祖先是表单关联元素，则：
1. 如果表单关联元素的解析器插入标志已设置，则返回。
2. 重置表单关联元素的表单所有者。
如果insertedNode是一个不在打开元素栈中的HTML解析器的Element，则处理内部资源链接，给定insertedNode的节点文档。

连接后的步骤对于 HTML 标准，给定 insertedNode，定义如下：

如果 insertedNode 是一个元素，并且其命名空间是 HTML 命名空间，且本标准为 insertedNode 的本地名称定义了HTML 元素连接后的步骤，则在给定 insertedNode 的情况下运行相应的 HTML 元素连接后的步骤。

HTML标准的移除步骤，给定removedNode和oldParent，定义如下：

令document为removedNode的节点文档。
如果document的聚焦区域是removedNode，则将document的聚焦区域设置为document的视口，并将document的相关全局对象的导航API的正在进行导航期间焦点更改设置为false。

这不执行失焦步骤，聚焦步骤或焦点更新步骤，因此不会触发失焦或更改事件。
如果removedNode是其命名空间为 HTML命名空间的元素，并且本标准为removedNode的本地名称定义了HTML元素移除步骤，则运行对应的HTML元素移除步骤，给定removedNode和oldParent。
如果removedNode是表单关联元素或其祖先是表单关联元素，则：
1. 如果表单关联元素有表单所有者，且表单关联元素和其表单所有者不再在同一个树中，则重置表单关联元素的表单所有者。
如果removedNode的弹出框属性不在无弹出框状态，则运行隐藏弹出框算法，给定removedNode、false、false和false。

当插入步骤以某个节点作为参数调用时，并且该节点现在在文档树中，则称该节点已插入文档。类似地，当移除步骤以某个节点作为参数调用时，并且该节点现在不再在文档树中，则称该节点已从文档中移除。

当插入步骤以某个节点作为参数调用时，并且该节点现在已连接，则该节点变为连接状态。类似地，当移除步骤以某个节点作为参数调用时，并且该节点现在不再已连接，则该节点变为断开状态。

当某个节点已连接且其包含阴影根的浏览上下文非空时，该节点是浏览上下文连接的。当插入步骤以某个节点作为参数调用时，并且该节点现在浏览上下文连接的，则该节点变为浏览上下文连接的。当移除步骤以某个节点作为参数调用时，并且该节点现在不再浏览上下文连接的，或当其包含阴影根的浏览上下文变为空时，该节点变为浏览上下文断开的。

2.1.5 脚本

构造 "一个 Foo 对象"，其中 Foo 实际上是一个接口，有时被用于代替更准确的 "实现接口 Foo 的对象"。

当IDL属性的值被检索（例如通过作者脚本）时，称该属性正在获取值，当为其赋予新值时，称其正在设置值。

如果某个DOM对象被称为实时的，则该对象上的属性和方法必须操作实际的底层数据，而不是数据的快照。

2.1.6 插件

术语插件是指由用户代理使用的一组实现定义的内容处理程序，这些处理程序可以参与用户代理对文档对象的渲染，但既不作为文档的子导航，也不会向文档的DOM引入任何节点对象。

通常，这些内容处理程序由第三方提供，但用户代理也可以将内置的内容处理程序指定为插件。

用户代理不得将类型text/plain和application/octet-stream视为已注册的插件。

插件的一个例子是当用户导航到PDF文件时，在导航器中实例化的PDF查看器。无论PDF查看器组件的实现方与用户代理的实现方是否相同，这都算作插件。然而，与用户代理分开的启动的PDF查看器应用程序（而不是使用相同的界面）不符合插件的定义。

本规范未定义与插件交互的机制，因为这被认为是用户代理和平台特定的。一些用户代理可能选择支持诸如Netscape插件API之类的插件机制；其他可能使用远程内容转换器或内置支持某些类型。事实上，本规范并不要求用户代理支持插件。[NPAPI]

浏览器在与外部内容（例如插件）交互时应格外小心。当第三方软件与用户代理本身具有相同的权限运行时，第三方软件中的漏洞变得与用户代理中的漏洞一样危险。

由于不同用户拥有不同的插件集提供了一个跟踪向量，增加了唯一识别用户的可能性，建议用户代理为每个用户支持完全相同的插件集。

2.1.7 字符编码

字符编码，或在不产生歧义的情况下仅称为编码，是一种在字节流和Unicode字符串之间转换的定义方式，如编码中定义的那样。一个编码具有一个编码名称和一个或多个编码标签，在编码标准中被称为编码的名称和标签。[ENCODING]

2.1.8 合规类

本规范描述了与实现者相关的用户代理和与作者及创作工具实现者相关的文档的合规标准。

合规文档是指符合所有文档合规标准的文档。为了便于阅读，这些合规要求中的一些被表述为对作者的合规要求；这些要求隐含为对文档的要求：根据定义，所有文档都假定由某个作者创建。（在某些情况下，作者本身可能是用户代理——此类用户代理需要遵守下面解释的额外规则。）

例如，如果某个要求规定“作者不得使用foobar元素”，则意味着文档中不允许包含名为foobar的元素。

文档合规要求与实现合规要求之间没有隐含关系。用户代理不得自由处理不合规的文档；无论输入文档是否合规，本规范描述的处理模型都适用于实现。

用户代理分为几类（重叠），具有不同的合规要求。

Web浏览器和其他交互式用户代理

支持XML语法的Web浏览器必须按本规范描述的方式处理XML文档中HTML命名空间中的元素和属性，以便用户可以与之交互，除非这些元素的语义已被其他规范覆盖。

一个合规的Web浏览器在XML文档中发现script元素时，会执行该元素中包含的脚本。然而，如果该元素在用XSLT表示的转换中被找到（假设用户代理也支持XSLT），则处理器会将script元素视为转换的一部分的透明元素。

支持HTML语法的Web浏览器必须按本规范描述的方式处理带有HTML MIME类型标签的文档，以便用户可以与之交互。

支持脚本的用户代理还必须是本规范中IDL片段的合规实现，如Web IDL中所述。[WEBIDL]

除非明确说明，覆盖HTML元素语义的规范不会覆盖表示这些元素的DOM对象的要求。例如，上述示例中的script元素仍将实现HTMLScriptElement接口。

非交互式呈现用户代理

纯粹为了呈现非交互式版本的HTML和XML文档的用户代理必须遵守与Web浏览器相同的合规标准，只是它们不需要遵守有关用户交互的要求。

非交互式呈现用户代理的典型例子是打印机（静态用户代理）和投影显示器（动态用户代理）。大多数静态非交互式呈现用户代理预计也会选择不支持脚本。

一个非交互但动态的呈现用户代理仍会执行脚本，允许表单动态提交等等。然而，由于用户无法与文档交互，“焦点”概念无关紧要，用户代理不需要支持任何与焦点相关的DOM API。

支持建议的默认渲染的视觉用户代理

用户代理，无论是交互式的还是非交互式的，都可以（可能作为用户选项）被指定为支持本规范定义的建议默认渲染。

这不是强制性的。特别是，即使实现了建议的默认渲染的用户代理，也鼓励提供设置，以覆盖此默认设置，从而改善用户体验，例如改变颜色对比度，使用不同的焦点样式，或以其他方式使体验对用户更具可访问性和可用性。

指定为支持建议默认渲染的用户代理在指定时，必须实现渲染部分定义的用户代理应当实现的规则。

无脚本支持的用户代理

不支持脚本的实现（或完全禁用其脚本功能的实现）不需要支持本规范中提到的事件和DOM接口。对于以事件模型或DOM为基础定义的规范部分，此类用户代理仍必须表现得好像支持事件和DOM一样。

脚本可以构成应用程序的一个组成部分。不支持脚本的Web浏览器或禁用脚本的Web浏览器可能无法完全传达作者的意图。

合规检查器

合规检查器必须验证文档是否符合本规范描述的适用合规标准。自动化合规检查器不需要检测需要解释作者意图的错误（例如，虽然如果blockquote元素的内容不是引用，文档就不合规，但没有人工判断输入的合规检查器不必检查blockquote元素是否只包含引用材料）。

合规检查器必须在没有浏览上下文的情况下（意味着不运行脚本，解析器的脚本标志被禁用）检查输入文档的合规性，还应检查在有浏览上下文并且脚本执行时输入文档的合规性，并且脚本在执行期间不会导致除瞬态状态外的非合规状态。（这是一个“应当”而不是“必须”要求，因为它已被证明是不可能的。[COMPUTABLE]）

术语“HTML验证器”可以用来指代符合本规范适用要求的合规检查器。

XML DTD无法表达本规范的所有合规要求。因此，验证XML处理器和DTD不能构成合规检查器。此外，由于本规范定义的两种创作格式都不是SGML的应用程序，因此验证SGML系统也不能构成合规检查器。

换句话说，有三种类型的合规标准：

可以在DTD中表达的标准。
不能用DTD表达，但仍然可以用机器检查的标准。
只能由人类检查的标准。

合规检查器必须检查前两类错误。简单的基于DTD的验证器只能检查第一类错误，因此根据本规范不构成合规检查器。

数据挖掘工具

为了渲染文档或检查其合规性之外的目的处理HTML和XML文档的应用程序和工具，应根据其处理的文档的语义行事。

生成文档大纲的工具，但每段都增加嵌套级别并且不增加标题嵌套级别的工具，将不符合规范。

创作工具和标记生成器

创作工具和标记生成器必须生成合规文档。适用于作者的合规标准在适当时也适用于创作工具。

创作工具不受严格使用元素只用于其指定目的的要求的限制，但仅限于创作工具尚无法确定作者意图的情况。然而，创作工具不得自动滥用元素或鼓励其用户这样做。

例如，使用address元素标记任意联系信息是不合规的；该元素只能用于标记其最近的article或body元素祖先的联系信息。然而，由于创作工具可能无法区分，创作工具对此要求免除。这并不意味着创作工具可以将address元素用于任何斜体文本块（例如）；这仅意味着创作工具不必验证用户在插入article元素的联系信息工具时，用户确实在插入联系信息而不是插入其他内容。

在合规检查方面，编辑器必须输出符合与合规检查器将验证的程度相同的文档。

当使用创作工具编辑不合规文档时，它可以在编辑过程中未编辑的文档部分保留合规错误（即编辑工具可以原样保存错误内容）。然而，如果错误被这样保留，创作工具不得声称输出是合规的。

创作工具预计分为两大类：基于结构或语义数据的工具和基于所见即所得的媒体特定编辑工具（WYSIWYG）。

前者是创作HTML工具的首选机制，因为源信息中的结构可以用于在HTML元素和属性的选择上做出明智的选择。

然而，所见即所得工具也是合法的。所见即所得工具应使用它们知道合适的元素，并且不应使用它们不知道合适的元素。这在某些极端情况下可能意味着将流元素的使用限制在少数几个元素，如div，b，i和span，并广泛使用style属性。

无论是所见即所得还是其他类型的创作工具，都应尽最大努力使用户能够创建结构良好、语义丰富、与媒体无关的内容。

为了与现有内容和先前规范兼容，本规范描述了两种创作格式：一种基于XML，另一种使用自定义格式，受到SGML的启发（称为HTML语法）。实现必须至少支持这两种格式中的一种，尽管鼓励支持两者。

一些合规要求表述为对元素、属性、方法或对象的要求。这些要求分为两类：描述内容模型限制的要求和描述实现行为的要求。前者是对文档和创作工具的要求。后者是对用户代理的要求。同样，一些合规要求表述为对作者的要求；这些要求应解释为对作者生成的文档的合规要求。（换句话说，本规范不区分对作者的合规标准和对文档的合规标准。）

2.1.9 依赖关系

本规范依赖于几个其他的基础规范。

基础结构（Infra）

以下术语在基础结构（Infra）中定义：[INFRA]

通用迭代术语while， continue，以及 break。
断言
实现定义
跟踪向量
代码点及其同义词字符
代理
标量值
元组
非字符
字符串，代码单元，代码单元前缀，代码单元小于，以...开始，以...结束，长度，以及代码点长度
字符串相等操作是和相同于
标量值字符串
转换
ASCII字符串
ASCII制表符或换行符
ASCII空白
控制字符
ASCII数字
大写ASCII十六进制数字
小写ASCII十六进制数字
ASCII十六进制数字
大写ASCII字母
小写ASCII字母
ASCII字母
字母数字ASCII字符
同构解码
同构编码
转换为ASCII小写
转换为ASCII大写
ASCII不区分大小写
剥离换行符
规范化换行符
剥离前导和尾随ASCII空白
剥离并折叠ASCII空白
按空格拆分字符串
按逗号拆分字符串
收集代码点序列及其相关位置变量
跳过ASCII空白
有序映射数据结构及其相关定义键，值，为空，条目，存在，获取条目值，设置条目值，移除条目，清除，获取键，获取值，按降序排序，大小，及迭代
列表数据结构及其相关定义追加，扩展，前置，替换，移除，为空，包含，大小，索引，是否为空，项，迭代，及克隆按升序排序按降序排序
堆栈数据结构及其相关定义压入及弹出
队列数据结构及其相关定义入队及出队
有序集合数据结构及其相关定义追加及并集
结构规格类型及其相关定义项
字节序列数据结构
宽容Base64编码及宽容Base64解码算法
排他范围
将JSON字符串解析为Infra值
HTML命名空间
MathML命名空间
SVG命名空间
XLink命名空间
XML命名空间
XMLNS命名空间

Unicode and Encoding

Unicode字符集用于表示文本数据，Encoding定义了与字符编码相关的要求。 [UNICODE]

本规范引入了基于这些规范中定义的术语，如前所述。

以下术语在Encoding中定义：[ENCODING]

获取编码
获取输出编码
通用解码算法，该算法接受字节流和编码并返回字符流
UTF-8解码算法，该算法接受字节流并返回字符流，另外还会去除一个前导UTF-8字节顺序标记（BOM）（如果有）
无BOM的UTF-8解码算法，该算法与UTF-8解码相同，但不会去除一个前导的UTF-8字节顺序标记（BOM）
编码算法，该算法接受字符流和编码并返回字节流
UTF-8编码算法，该算法接受字符流并返回字节流
BOM检测算法，该算法接受字节流并返回编码或null。

XML and related specifications

支持HTML的XML语法的实现必须支持某个版本的XML及其对应的命名空间规范，因为该语法使用带有命名空间的XML序列化。[XML] [XMLNS]

在不运行脚本、不评估CSS或XPath表达式，或不将结果DOM暴露给任意内容的情况下执行内容操作的数据挖掘工具和其他用户代理，可以通过仅断言其DOM节点类似物在某些命名空间中来“支持命名空间”，而无需实际暴露命名空间字符串。

在HTML语法中，命名空间前缀和命名空间声明与XML中的效果不同。例如，冒号在HTML元素名称中没有特殊含义。

在XML命名空间中名称为space的属性由可扩展标记语言 (XML)定义。[XML]

Name生成规则在XML中定义。[XML]

本规范还引用了与XML文档关联样式表中定义的<?xml-stylesheet?>处理指令。[XMLSSPI]

本规范还非规范性地提及了XSLTProcessor接口及其transformToFragment()和transformToDocument()方法。[XSLTP]

URLs

以下术语在URL中定义：[URL]

host
public suffix
domain
IP address
URL
Origin of URLs
Absolute URL
Relative URL
registrable domain
URL parser
basic URL parser and its url and state override arguments, as well as these parser states:
- scheme start state
- host state
- hostname state
- port state
- path start state
- query state
- fragment state
URL record, as well as its individual components:
- scheme
- username
- password
- host
- port
- path
- query
- fragment
- blob URL entry
valid URL string
cannot have a username/password/port concept
opaque path concept
URL serializer and its exclude fragment argument
URL path serializer
host parser
host serializer
Host equals
URL equals and its exclude fragments argument
serialize an integer
Default encode set
component percent-encode set
UTF-8 percent-encode
percent-decode
set the username
set the password
application/x-www-form-urlencoded format
application/x-www-form-urlencoded serializer
is special

本规范还引用了多个方案和协议：

媒体片段语法在媒体片段URI中定义。[MEDIAFRAG]

HTTP and related specifications

以下术语在HTTP规范中定义：[HTTP]

`Accept` 头部
`Accept-Language` 头部
`Cache-Control` 头部
`Content-Disposition` 头部
`Content-Language` 头部
`Content-Range` 头部
`Last-Modified` 头部
`Range` 头部
`Referer` 头部

以下术语在HTTP State Management Mechanism中定义：[COOKIES]

以下术语在Web Linking中定义：[WEBLINK]

`Link` 头部
Parsing a `Link` field value

以下术语在Structured Field Values for HTTP中定义：[STRUCTURED-FIELDS]

以下术语在MIME Sniffing中定义：[MIMESNIFF]

Fetch

以下术语在Fetch中定义：[FETCH]

ABNF
about:blank
HTTP(S) scheme
是本地的URL
本地方案
fetch方案
CORS协议
默认的`User-Agent`值
提取MIME类型
传统提取编码
fetch
fetch控制器
处理下一个手动重定向
ok状态
导航请求
网络错误
中止的网络错误
`Origin`头部
`Cross-Origin-Resource-Policy`头部
获取结构化字段值
头部列表
设置
获取、解码和拆分
中止
跨域资源策略检查
RequestCredentials枚举
RequestDestination枚举
fetch()方法
报告时间
为报告序列化响应URL
安全地提取主体
逐步读取主体
processResponseConsumeBody
processResponseEndOfBody
处理响应
使用并行队列
处理早期提示响应
连接池
获取连接
确定网络分区键
提取完整的时间信息
作为一个主体
响应主体信息
解析来源
响应及其相关：
- 类型
- URL
- URL列表
- 状态
- 头部列表
- 主体
- 主体信息
- 内部响应
- 位置URL
- 时间信息
- 服务worker时间信息
- 具有跨域重定向
- 允许的时间已过
- 提取内容范围值
请求及其相关：
- URL
- 方法
- 头部列表
- 主体
- 客户端
- URL列表
- 当前URL
- 保留客户端
- 替换客户端ID
- 发起者
- 目的地
- 潜在目的地
- 翻译潜在目的地
- 类似脚本目的地
- 优先级
- 来源
- 引用者
- 同步标志
- 模式
- 凭证模式
- 使用URL凭证标志
- 不安全请求标志
- 缓存模式
- 重定向计数
- 重定向模式
- 策略容器
- 引用者政策
- 加密nonce元数据
- 完整性元数据
- 解析器元数据
- 重新加载导航标志
- 历史导航标志
- 用户激活
- 渲染阻塞
- 发起者类型
- 添加范围头
fetch时间信息及其相关：
- 开始时间
- 结束时间

以下术语在Referrer Policy中定义：[REFERRERPOLICY]

引用者政策
`Referrer-Policy`HTTP头
从`Referrer-Policy`头解析引用者政策算法
`no-referrer`，`no-referrer-when-downgrade`，`origin-when-cross-origin`，`unsafe-url`引用者政策
默认引用者政策

以下术语在Mixed Content中定义：[MIX]

先验认证的URL

以下术语在Subresource Integrity中定义：[SRI]

Paint Timing

Paint Timing 中定义了以下术语：[PAINTTIMING]

标记绘制时间

Navigation Timing

Navigation Timing 中定义了以下术语：[NAVIGATIONTIMING]

创建导航计时条目
排队导航计时条目
NavigationTimingType 及其 "navigate", "reload", 和 "back_forward" 值。

Resource Timing

Resource Timing 中定义了以下术语： [RESOURCETIMING]

标记资源计时

Performance Timeline

Performance Timeline 中定义了以下术语： [PERFORMANCETIMELINE]

PerformanceEntry 及其 name, entryType, startTime, 和 duration 属性。
排队性能条目

Long Animation Frames

Long Animation Frames 中定义了以下术语： [LONGANIMATIONFRAMES]

Long Tasks

Long Tasks 中定义了以下术语： [LONGTASKS]

报告长任务

Web IDL

本规范中的 IDL 片段必须按照 Web IDL 的要求进行解释，以符合 IDL 片段的要求。 [WEBIDL]

以下术语在 Web IDL 中定义：

Web IDL 还定义了以下在本规范的 Web IDL 片段中使用的类型：

本规范中术语 throw 的使用定义见 Web IDL。DOMException 类型和以下异常名称由 Web IDL 定义，并由本规范使用：

当本规范要求用户代理创建一个表示特定时间（可能是特殊值 NaN）的 Date 对象时，该时间的毫秒部分（如果有）必须截断为整数，新创建的 Date 对象的时间值必须表示截断后的时间。

例如，给定 2000 年 1 月 1 日 01:00 UTC 后 23045 微秒的时间，即 2000-01-01T00:00:00.023045Z 的时间，则表示该时间的新创建的 Date 对象将表示与表示 2000-01-01T00:00:00.023Z 的对象相同的时间，提前 45 微秒。如果给定的时间是 NaN，则结果是表示时间值为 NaN 的 Date 对象（表示该对象不代表特定的时间点）。

JavaScript

本规范描述的某些语言部分仅支持 JavaScript 作为底层脚本语言。[JAVASCRIPT]

术语“JavaScript”用来指代 ECMA-262，而不是正式术语 ECMAScript，因为 JavaScript 这个术语更广为人知。

以下术语在 JavaScript 规范中定义，并在本规范中使用：

活动函数对象
代理和代理集群
自动分号插入
候选执行
当前领域
夹紧一个数学值
早期错误
前进进展
基本内部方法的不变量
JavaScript 执行上下文
JavaScript 执行上下文栈
领域
JobCallback 记录
NewTarget
正在运行的 JavaScript 执行上下文
周围代理
抽象闭包
不可变原型异类对象
知名符号，包括 %Symbol.hasInstance%，%Symbol.isConcatSpreadable%，%Symbol.toPrimitive%，和 %Symbol.toStringTag%
知名固有对象，包括 %Array.prototype%，%Error.prototype%，%EvalError.prototype%，%Function.prototype%，%JSON.parse%，%Object.prototype%，%Object.prototype.valueOf%，%RangeError.prototype%，%ReferenceError.prototype%，%SyntaxError.prototype%，%TypeError.prototype%，和 %URIError.prototype%
FunctionBody 生成
Module 生成
Pattern 生成
Script 生成
类型标记法
完成记录规范类型
列表和记录规范类型
属性描述符规范类型
脚本记录规范类型
循环模块记录规范类型
源文本模块记录规范类型及其 Evaluate，Link 和 LoadRequestedModules 方法
ArrayCreate 抽象操作
Call 抽象操作
ClearKeptObjects 抽象操作
CleanupFinalizationRegistry 抽象操作
Construct 抽象操作
CopyDataBlockBytes 抽象操作
CreateBuiltinFunction 抽象操作
CreateByteDataBlock 抽象操作
CreateDataProperty 抽象操作
DefinePropertyOrThrow 抽象操作
DetachArrayBuffer 抽象操作
EnumerableOwnProperties 抽象操作
FinishLoadingImportedModule 抽象操作
OrdinaryFunctionCreate 抽象操作
Get 抽象操作
GetActiveScriptOrModule 抽象操作
GetFunctionRealm 抽象操作
HasOwnProperty 抽象操作
HostCallJobCallback 抽象操作
HostEnqueueFinalizationRegistryCleanupJob 抽象操作
HostEnqueueGenericJob 抽象操作
HostEnqueuePromiseJob 抽象操作
HostEnqueueTimeoutJob 抽象操作
HostEnsureCanAddPrivateElement 抽象操作
HostLoadImportedModule 抽象操作
HostMakeJobCallback 抽象操作
HostPromiseRejectionTracker 抽象操作
InitializeHostDefinedRealm 抽象操作
IsAccessorDescriptor 抽象操作
IsCallable 抽象操作
IsConstructor 抽象操作
IsDataDescriptor 抽象操作
IsDetachedBuffer 抽象操作
IsSharedArrayBuffer 抽象操作
NewObjectEnvironment 抽象操作
NormalCompletion 抽象操作
OrdinaryGetPrototypeOf 抽象操作
OrdinarySetPrototypeOf 抽象操作
OrdinaryIsExtensible 抽象操作
OrdinaryPreventExtensions 抽象操作
OrdinaryGetOwnProperty 抽象操作
OrdinaryDefineOwnProperty 抽象操作
OrdinaryGet 抽象操作
OrdinarySet 抽象操作
OrdinaryDelete 抽象操作
OrdinaryOwnPropertyKeys 抽象操作
OrdinaryObjectCreate 抽象操作
ParseModule 抽象操作
ParseScript 抽象操作
NewPromiseReactionJob 抽象操作
NewPromiseResolveThenableJob 抽象操作
RegExpBuiltinExec 抽象操作
RegExpCreate 抽象操作
RunJobs 抽象操作
SameValue 抽象操作
ScriptEvaluation 抽象操作
SetImmutablePrototype 抽象操作
ToBoolean 抽象操作
ToString 抽象操作
ToUint32 抽象操作
TypedArrayCreate 抽象操作
IsLooselyEqual 抽象操作
IsStrictlyEqual 抽象操作
Atomics 对象
Atomics.waitAsync 对象
Date 类
FinalizationRegistry 类
RegExp 类
SharedArrayBuffer 类
SyntaxError 类
TypeError 类
RangeError 类
WeakRef 类
eval() 函数
WeakRef.prototype.deref() 函数
[[IsHTMLDDA]] 内部槽
import()
import.meta
HostGetImportMetaProperties 抽象操作
typeof 运算符
delete 运算符
TypedArray 构造函数表

支持 JavaScript 的用户代理还必须实现动态代码品牌检查提案。以下术语在那里定义，并在本规范中使用： [JSDYNAMICCODEBRANDCHECKS]

HostEnsureCanCompileStrings 抽象操作
HostGetCodeForEval 抽象操作

支持 JavaScript 的用户代理还必须实现 ECMAScript 国际化 API。[JSINTL]

支持 JavaScript 的用户代理还必须实现导入属性提案。以下术语在那里定义，并在本规范中使用： [JSIMPORTATTRIBUTES]

ModuleRequest 记录规范类型
HostGetSupportedImportAttributes 抽象操作

支持 JavaScript 的用户代理还必须实现 JSON 模块提案。以下术语在那里定义，并在本规范中使用： [JSJSONMODULES]

支持 JavaScript 的用户代理还必须实现可调整大小的 ArrayBuffer 和可增长的 SharedArrayBuffer 提案。以下术语在那里定义，并在本规范中使用： [JSRESIZABLEBUFFERS]

IsArrayBufferViewOutOfBounds 抽象操作

支持 JavaScript 的用户代理还必须实现 Temporal 提案。以下术语在那里定义，并在本规范中使用： [JSTEMPORAL]

HostSystemUTCEpochNanoseconds 抽象操作
nsMaxInstant 和 nsMinInstant 值

WebAssembly

以下术语在 WebAssembly JavaScript Interface 中定义：[WASMJS]

WebAssembly.Module

DOM

文档对象模型 (DOM) 是文档及其内容的表示——一种模型。DOM 不仅仅是一个 API；HTML 实现的符合性标准在本规范中以对 DOM 的操作来定义。[DOM]

实现必须支持 DOM 和在 UI Events 中定义的事件，因为本规范是根据 DOM 定义的，并且一些功能被定义为对 DOM 接口的扩展。[DOM] [UIEVENTS]

特别地，以下功能在 DOM 中定义：[DOM]

Attr 接口
CharacterData 接口
Comment 接口
DOMImplementation 接口
Document 接口及其 doctype 属性
DocumentOrShadowRoot 接口
DocumentFragment 接口
DocumentType 接口
ChildNode 接口
Element 接口
attachShadow() 方法。
元素的 shadow root
一个 shadow root 的 mode
一个 shadow root 的 declarative 成员
attach a shadow root 算法
retargeting algorithm
Node 接口
NodeList 接口
ProcessingInstruction 接口
ShadowRoot 接口
Text 接口
Range 接口
node document 概念
document type 概念
host 概念
shadow root 概念及其 delegates focus，available to element internals，clonable，以及 serializable。
shadow host 概念
HTMLCollection 接口，其 length 属性，以及其 item() 和 namedItem() 方法
术语 collection 和 represented by the collection
DOMTokenList 接口及其 value 属性和 supports 操作
createDocument() 方法
createHTMLDocument() 方法
createElement() 方法
createElementNS() 方法
getElementById() 方法
getElementsByClassName() 方法
append() 方法
appendChild() 方法
cloneNode() 方法
importNode() 方法
preventDefault() 方法
id 属性
setAttribute() 方法
textContent 属性
tree，shadow tree，和 node tree 概念
tree order 和 shadow-including tree order 概念
element 概念
child 概念
root 和 shadow-including root 概念
inclusive ancestor，descendant，shadow-including ancestor，shadow-including descendant，shadow-including inclusive descendant，和 shadow-including inclusive ancestor 概念
first child，next sibling，previous sibling，和 parent 概念
parent element 概念
document element 概念
in a document tree，in a document（遗留），和 connected 概念
slot 概念及其 name 和 assigned nodes
assigned slot 概念
slot assignment 概念
slottable 概念
assign slottables for a tree 算法
slotchange 事件
inclusive descendant 概念
find flattened slottables 算法
manual slot assignment 概念
assign a slot 算法
pre-insert， insert，append，replace，replace all，string replace all，remove，和 adopt 算法
descendant 概念
插入步骤,
后连接步骤, 移除步骤, 采用步骤，以及子节点变更步骤元素的钩子
change，append，remove，replace，get an attribute by namespace and local name，set value，和 remove an attribute by namespace and local name 属性的算法
attribute change steps 钩子
value 属性的概念
local name 属性的概念
attribute list 概念
data 一个 CharacterData 节点及其 replace data 算法
child text content 一个节点
descendant text content 一个节点
name，public ID，和 system ID 的 doctype
Event 接口
Event 和派生接口的构造行为
EventTarget 接口
activation behavior 钩子
legacy-pre-activation behavior 钩子
legacy-canceled-activation behavior 钩子
create an event 算法
fire an event 算法
canceled flag
dispatch flag
dispatch 算法
EventInit 字典类型
type 属性
事件的 target
currentTarget 属性
bubbles 属性
cancelable 属性
composed 属性
composed flag
isTrusted 属性
initEvent() 方法
add an event listener
addEventListener() 方法
remove an event listener 和 remove all event listeners 算法
EventListener 回调接口
事件的 type
一个 event listener 及其 type 和 callback
文档的 encoding（即 character encoding），mode，allow declarative shadow roots，和 content type 的 Document
XML documents 和 HTML documents 之间的区别
术语 quirks mode，limited-quirks mode，和 no-quirks mode
算法 clone 一个 Node 及其使用的 cloning steps 概念
术语 base URL change steps 和元素 affected by a base URL change 时发生的事情的定义
元素的 unique identifier (ID) 概念
元素的 classes 概念
术语 supported tokens
DOM range 概念及术语 start node，start，end，以及应用于范围的 boundary point
create an element 算法
element interface 概念
custom element state 的概念，以及 defined 和 custom 元素的概念
元素的 namespace，namespace prefix，local name，custom element definition，以及 is value
MutationObserver 接口及 mutation observers 的一般概念
AbortController 及其 signal
AbortSignal
aborted
signal abort
add
get an attribute by name 算法

以下功能在 UI Events 中定义：[UI EVENTS]

MouseEvent 接口
MouseEvent 接口的 relatedTarget 属性
MouseEventInit 字典类型
FocusEvent 接口
FocusEvent 接口的 relatedTarget 属性
UIEvent 接口
UIEvent 接口的 view 属性
auxclick 事件
beforeinput 事件
click 事件
contextmenu 事件
dblclick 事件
input 事件
mousedown 事件
mouseenter 事件
mouseleave 事件
mousemove 事件
mouseout 事件
mouseover 事件
mouseup 事件
wheel 事件
keydown 事件
keypress 事件
keyup 事件

以下功能在 Touch Events 中定义：[TOUCH]

Touch 接口
Touch point 概念
touchend 事件

以下功能在 Pointer Events 中定义：[POINTEREVENTS]

以下事件在 Clipboard API and events 中定义：[CLIPBOARD-APIS]

copy 事件
cut 事件
paste 事件

本规范有时使用术语 name 来指代事件的 type；例如，“一个名为 click 的事件”或“如果事件名称是 keypress”。术语“name”和“type”对于事件是同义的。

以下功能在 DOM Parsing and Serialization 中定义：[DOMPARSING]

XML serialization

以下功能在 Selection API 中定义：[SELECTION]

鼓励用户代理实现 execCommand 中描述的功能。[EXECCOMMAND]

以下功能在 Fullscreen API 中定义：[FULLSCREEN]

High Resolution Time 提供了以下功能：[HRT]

File API

本规范使用 File API 中定义的以下功能：[FILEAPI]

Blob 接口及其 type 属性
File 接口及其 name 和 lastModified 属性
FileList 接口
Blob 的快照状态概念
读取错误的概念
Blob URL 存储
blob URL 条目及其对象和环境

Indexed Database API

本规范使用 Indexed Database API 定义的清理 Indexed Database 事务。 [INDEXEDDB]

Media Source Extensions

以下术语在 Media Source Extensions 中定义： [MEDIASOURCE]

MediaSource 接口
从媒体元素分离

Media Capture and Streams

以下术语在 Media Capture and Streams 中定义： [MEDIASTREAM]

MediaStream 接口

Reporting

以下术语在 Reporting 中定义：[REPORTING]

XMLHttpRequest

以下功能和术语在 XMLHttpRequest 中定义： [XHR]

XMLHttpRequest 接口及其 responseXML 属性
ProgressEvent 接口及其 lengthComputable、loaded 和 total 属性
FormData 接口及其关联的条目列表

Battery Status

以下功能在 Battery Status API 中定义：[BATTERY]

getBattery() 方法

Media Queries

实现必须支持 Media Queries。其中定义了 <media-condition> 特性。[MQ]

CSS 模块

虽然本规范的实现不要求完全支持 CSS（尽管我们鼓励支持，尤其是对 web 浏览器而言），但有些特性是根据特定的 CSS 要求定义的。

当本规范要求按照特定的 CSS 语法解析某些内容时，必须遵循 CSS Syntax 中相关的算法，包括错误处理规则。[CSSSYNTAX]

例如，用户代理在意外发现样式表末尾时，需要关闭所有未闭合的结构。因此，当解析字符串 "rgb(0,0,0"（缺少闭合括号）作为颜色值时，根据此错误处理规则，闭合括号是隐含的，并且会得到一个值（颜色为 '黑色'）。然而，类似的结构 "rgb(0,0,"（既缺少括号又缺少 "蓝色" 值）不能被解析，因为闭合未闭合的结构不会得到一个有效的值。

以下术语和特性在 Cascading Style Sheets（CSS）中定义：[CSS]

基本版本的'display'属性在CSS中定义，并且该属性由其他CSS模块扩展。[CSS] [CSSRUBY] [CSSTABLE]

以下术语和功能在CSS Box Model中定义：[CSSBOX]

内容区域
内容框
边框盒
外边距盒
边框边缘
外边距边缘
'margin-top'、 'margin-bottom'、 'margin-left'和 'margin-right'属性
'padding-top'、 'padding-bottom'、 'padding-left'和 'padding-right'属性

以下功能在CSS逻辑属性中定义：[CSSLOGICAL]

'margin-block'、 'margin-block-start'、 'margin-block-end'、 'margin-inline'、 'margin-inline-start'和 'margin-inline-end' 属性
'padding-block'、 'padding-block-start'、 'padding-block-end'、 'padding-inline'、 'padding-inline-start'和 'padding-inline-end' 属性
'border-block-width'、 'border-block-start-width'、 'border-block-end-width'、 'border-inline-width'、 'border-inline-start-width'、 'border-inline-end-width'、 'border-block-style'、 'border-block-start-style'、 'border-block-end-style'、 'border-inline-style'、 'border-inline-start-style'、 'border-inline-end-style'、 'border-block-start-color'、 'border-block-end-color'、 'border-inline-start-color'、 'border-inline-end-color'、 'border-start-start-radius'、 'border-start-end-radius'、 'border-end-start-radius'和 'border-end-end-radius' 属性
'block-size'属性
'inline-size'属性
'inset-block-start'属性
'inset-block-end'属性

以下术语和功能在CSS颜色中定义：[CSSCOLOR]

以下术语在CSS Images中定义：[CSSIMAGES]

术语paint source在CSS Images Level 4中定义，用于定义某些HTML元素与CSS 'element()'函数的交互。[CSSIMAGES4]

以下功能在CSS Backgrounds and Borders中定义：[CSSBG]

'background-color'、 'background-image'、 'background-repeat'、 'background-attachment'、 'background-position'、 'background-clip'、 'background-origin'和 'background-size' 属性
'border-radius'、 'border-top-left-radius'、 'border-top-right-radius'、 'border-bottom-right-radius'和 'border-bottom-left-radius' 属性
'border-image-source'、 'border-image-slice'、 'border-image-width'、 'border-image-outset'和 'border-image-repeat' 属性

CSS Backgrounds and Borders还定义了以下边框属性：[CSSBG]

边框属性
	上	下	左	右
宽度	'border-top-width'	'border-bottom-width'	'border-left-width'	'border-right-width'
样式	'border-top-style'	'border-bottom-style'	'border-left-style'	'border-right-style'
颜色	'border-top-color'	'border-bottom-color'	'border-left-color'	'border-right-color'

以下功能在CSS Box Alignment中定义：[CSSALIGN]

以下术语和功能在CSS Display中定义：[CSSDISPLAY]

以下功能在CSS Flexible Box Layout中定义：[CSSFLEXBOX]

'flex-direction'属性
'flex-wrap'属性

以下术语和功能在CSS Fonts中定义：[CSSFONTS]

以下功能在CSS Grid Layout中定义：[CSSGRID]

以下术语在CSS Inline Layout中定义：[CSSINLINE]

以下术语和功能在CSS Box Sizing中定义：[CSSSIZING]

以下功能在CSS Lists and Counters中定义：[CSSLISTS]

以下功能在CSS Overflow中定义：[CSSOVERFLOW]

'overflow'属性及其'hidden'值
'text-overflow'属性
术语滚动容器

以下术语和功能在CSS Positioned Layout中定义：[CSSPOSITION]

以下功能在CSS Multi-column Layout中定义：[CSSMULTICOL]

'ruby-base'值的'display'属性在CSS Ruby Layout中定义。[CSSRUBY]

以下功能在CSS Table中定义：[CSSTABLE]

'border-spacing'属性
'border-collapse'属性
'table-cell'、 'table-row'、 'table-caption'和 'table'值的 'display'属性

以下功能在CSS Text中定义：[CSSTEXT]

以下功能在CSS Writing Modes中定义：[CSSWM]

'direction'属性
'unicode-bidi'属性
'writing-mode'属性
块流方向、块轴、内联轴、块尺寸、内联尺寸、块起点、块终点、内联起点、内联终点、行左和行右概念

以下功能在CSS Basic User Interface中定义：[CSSUI]

'outline'属性
'cursor'属性
'appearance'属性，及其<compat-auto>非终结值类型、其'textfield'值和'menulist-button'值。
'field-sizing'属性及其'content'值。
概念小部件
概念原生外观
概念原始外观
概念具有默认首选大小的元素
不可降级小部件和可降级小部件分类，以及相关的降级小部件状态。
'pointer-events'属性
'user-select'属性

更新动画并发送事件算法在Web Animations中定义。[WEBANIMATIONS]

支持脚本的实现必须支持CSS对象模型。以下功能和术语在CSSOM规范中定义：[CSSOM] [CSSOMVIEW]

Screen接口
LinkStyle接口
CSSStyleDeclaration接口
styleIDL属性
cssText的CSSStyleDeclaration属性
StyleSheet接口
CSSStyleSheet接口
创建CSS样式表
删除CSS样式表
关联的CSS样式表
创建构造的CSSStyleSheet
同步替换CSSStyleSheet的规则
禁用CSS样式表
CSS样式表及其属性：
- 类型
- 位置
- 父CSS样式表
- 所有者节点
- 所有者CSS规则
- 媒体
- 标题
- 备用标志
- 禁用标志
- CSS规则
- 源清洁标志
CSS样式表集
CSS样式表集名称
首选CSS样式表集名称
更改首选CSS样式表集名称
序列化CSS值
运行调整大小步骤
运行滚动步骤
评估媒体查询并报告更改
将目标滚动到视图中
滚动到文档的开头
resize事件
scroll事件
scrollend事件
设置浏览上下文功能

以下功能和术语在CSS Syntax中定义：[CSSSYNTAX]

以下术语在Selectors中定义：[SELECTORS]

以下功能在CSS Values and Units中定义：[CSSVALUES]

<length>
'em'单位
'ex'单位
'vw'单位
'in'单位
'px'单位
'pt'单位
'attr()'函数
数学函数

以下功能在CSS View Transitions中定义：[CSSVIEWTRANSITIONS]

术语style attribute在CSS Style Attributes中定义。[CSSATTR]

以下术语在CSS Cascading and Inheritance中定义：[CSSCASCADE]

CanvasRenderingContext2D对象对字体的使用依赖于CSSFonts和Font Loading规范中描述的功能，特别是FontFace对象和字体来源概念。[CSSFONTS] [CSSFONTLOAD]

以下接口和术语在Geometry Interfaces中定义：[GEOMETRY]

DOMMatrix接口及相关的m11元素、m12元素、m21元素、m22元素、m41元素和m42元素
DOMMatrix2DInit和DOMMatrixInit字典
从字典创建DOMMatrix和从2D字典创建DOMMatrix算法，用于DOMMatrix2DInit或DOMMatrixInit
DOMPointInit字典及相关的x和y成员
矩阵乘法

以下术语在CSS Scoping中定义：[CSSSCOPING]

平面树

以下术语和功能在CSS Color Adjustment中定义：[CSSCOLORADJUST]

以下术语在CSS Pseudo-Elements中定义：[CSSPSEUDO]

以下术语在CSS Containment中定义：[CSSCONTAIN]

交叉观察器 (Intersection Observer)

以下术语在Intersection Observer中定义：[INTERSECTIONOBSERVER]

Resize Observer

以下术语在Resize Observer中定义：[RESIZEOBSERVER]

WebGL

以下接口在WebGL规范中定义：[WEBGL]

WebGPU

以下接口在WebGPU中定义：[WEBGPU]

GPUCanvasContext接口

WebVTT

实现可能支持将WebVTT作为字幕、说明、元数据等的文本轨格式，用于媒体资源。[WEBVTT]

本规范中使用的以下术语在WebVTT中定义：

ARIA

role属性在Accessible Rich Internet Applications（ARIA）中定义，如下角色也是：[ARIA]

此外，以下aria-*内容属性在ARIA中定义：[ARIA]

最后，以下术语在ARIA中定义：[ARIA]

role
accessible name
ARIAMixin接口及其相关的ARIAMixin获取步骤和ARIAMixin设置步骤钩子

Content Security Policy

以下术语在Content Security Policy中定义：[CSP]

Service Workers

以下术语在Service Workers中定义：[SW]

Secure Contexts

以下算法在Secure Contexts中定义：[SECURE-CONTEXTS]

URL是否潜在可信？

Permissions Policy

以下术语在Permissions Policy中定义：[PERMISSIONSPOLICY]

Payment Request API

以下功能在Payment Request API中定义：[PAYMENTREQUEST]

PaymentRequest接口

MathML

虽然本规范不要求全面支持MathML（尽管至少鼓励网页浏览器支持），某些功能依赖于实现MathML的一小部分。[MATHML]

以下功能在Mathematical Markup Language（MathML）中定义：

SVG

虽然本规范不要求全面支持SVG（尽管至少鼓励网页浏览器支持），但某些功能依赖于实现SVG的部分内容。

实现SVG的用户代理必须实现SVG 2规范，而不是任何早期版本。

以下功能在SVG 2规范中定义：[SVG]

Filter Effects

以下功能在Filter Effects中定义：[FILTERS]

<filter-value-list>

Compositing

以下功能在Compositing and Blending中定义：[COMPOSITE]

Cooperative Scheduling of Background Tasks

以下功能在Cooperative Scheduling of Background Tasks中定义：[REQUESTIDLECALLBACK]

Screen Orientation

以下术语在Screen Orientation中定义：[SCREENORIENTATION]

屏幕方向更改步骤

Storage

以下术语在Storage中定义：[STORAGE]

Web App Manifest

以下功能在Web App Manifest中定义：[MANIFEST]

WebAssembly JavaScript 接口：ESM 集成

以下术语在WebAssembly JavaScript 接口：ESM 集成中定义：[WASMESM]

WebCodecs

以下功能在WebCodecs中定义：[WEBCODECS]

WebDriver

以下术语在WebDriver中定义：[WEBDRIVER]

WebDriver BiDi

以下术语在WebDriver BiDi中定义：[WEBDRIVERBIDI]

Web Cryptography API

以下术语在Web Cryptography API中定义： [WEBCRYPTO]

生成随机 UUID

WebSockets

以下术语在WebSockets中定义：[WEBSOCKETS]

WebTransport

以下术语在WebTransport中定义：[WEBTRANSPORT]

Web Authentication: An API for accessing Public Key Credentials

以下术语在Web Authentication: An API for accessing Public Key Credentials中定义：[WEBAUTHN]

公钥凭证

Credential Management

以下术语在Credential Management中定义：[CREDMAN]

Console

以下术语在Console中定义：[CONSOLE]

向控制台报告警告

Web Locks API

以下术语在Web Locks API中定义：[WEBLOCKS]

Trusted Types

本规范使用在Trusted Types中定义的以下功能： [TRUSTED-TYPES]

本规范并不要求支持任何特定的网络协议、样式表语言、脚本语言或超出上述列表中要求的任何 DOM 规范。然而，本规范描述的语言倾向于使用 CSS 作为样式语言，JavaScript 作为脚本语言，以及 HTTP 作为网络协议，并且多个功能假定这些语言和协议正在使用。

实现 HTTP 协议的用户代理必须同时实现HTTP State Management Mechanism（Cookies）。[HTTP] [COOKIES]

本规范可能在各自的章节中对字符编码、图像格式、音频格式和视频格式有某些额外要求。

2.1.10 扩展性

强烈不建议对本规范进行厂商特定的专有用户代理扩展。文档不得使用此类扩展，因为这样做会降低互操作性并分裂用户群体，导致只有特定用户代理的用户才能访问相关内容。

所有扩展必须定义为使用扩展既不矛盾也不导致规范中定义的功能不合格。

例如，尽管强烈不建议这样做，但实现可以向控件添加一个新的 IDL 属性 "typeTime"，该属性返回用户选择当前控件值所花费的时间。另一方面，定义一个出现在表单的 elements 数组中的新控件将违反上述要求，因为它将违反本规范中给出的 elements 的定义。

当需要对本规范进行中立扩展时，可以相应地更新本规范，或者可以编写一个扩展规范来覆盖本规范中的要求。当某人将本规范应用于其活动时，决定认可此类扩展规范的要求时，它将成为本规范符合性要求目的的适用规范。

有人可以编写一个规范，定义任何任意字节流都是合格的，然后声称他们的随机垃圾是合格的。然而，这并不意味着他们的随机垃圾实际上对所有人的目的都是合格的：如果其他人决定该规范不适用于他们的工作，那么他们可以很合法地说上述随机垃圾只是垃圾，根本不合格。就符合性而言，特定社区中的重要问题是该社区同意适用的是什么。

用户代理必须将不理解的元素和属性视为语义中性；将它们留在 DOM 中（对于 DOM 处理器），并根据 CSS 进行样式设置（对于 CSS 处理器），但不从中推断任何意义。

当某个功能的支持被禁用时（例如作为减轻安全问题的紧急措施，或为开发提供帮助，或出于性能原因），用户代理必须表现得好像他们完全不支持该功能，并且该功能未在本规范中提及。例如，如果通过 Web IDL 接口中的属性访问某个特定功能，该属性本身将从实现该接口的对象中省略——将属性留在对象上但使其返回 null 或抛出异常是不足够的。

2.1.11 与 XPath 和 XSLT 的交互

在根据本规范描述的方式解析或创建的 HTML 文档上操作的 XPath 1.0 实现（例如，作为 document.evaluate() API 的一部分）必须表现得好像已对 XPath 1.0 规范应用了以下编辑。

首先，删除以下段落：

节点测试中的 QName 使用表达式上下文中的命名空间声明扩展为扩展名称。这与在开始和结束标签中为元素类型名称进行扩展的方式相同，只是未使用 xmlns 声明的默认命名空间：如果 QName 没有前缀，则命名空间 URI 为 null（这与属性名称的扩展方式相同）。如果 QName 有一个前缀，但在表达式上下文中没有命名空间声明，则这是一个错误。

然后，将其替换为以下内容：

节点测试中的 QName 使用表达式上下文中的命名空间声明扩展为扩展名称。如果 QName 有前缀，则该前缀必须在表达式上下文中有命名空间声明，并且相应的命名空间 URI 是与该前缀关联的命名空间 URI。如果 QName 有一个前缀，但在表达式上下文中没有命名空间声明，则这是一个错误。

如果 QName 没有前缀并且轴的主要节点类型是元素，则使用默认元素命名空间。否则，如果 QName 没有前缀，则命名空间 URI 为 null。默认元素命名空间是 XPath 表达式上下文的成员。在通过 DOM3 XPath API 执行 XPath 表达式时，默认元素命名空间的值按以下方式确定：

如果上下文节点来自 HTML DOM，则默认元素命名空间为 "http://www.w3.org/1999/xhtml"。

否则，默认元素命名空间 URI 为 null。

这相当于将 XPath 2.0 的默认元素命名空间功能添加到 XPath 1.0 中，并将 HTML 命名空间用作 HTML 文档的默认元素命名空间。这样做的目的是希望实现能够与遗留 HTML 内容兼容，同时支持本规范引入的有关 HTML 元素使用的命名空间的更改，并希望使用 XPath 1.0 而不是 XPath 2.0。

此更改是 XPath 1.0 规范的故意违反，目的是希望实现能够与遗留内容兼容，同时支持本规范引入的有关 HTML 元素使用的命名空间的更改。[XPATH10]

当输出方法为 "html"（无论是显式还是通过 XSLT 1.0 中的默认规则）时，将输出到 DOM 的 XSLT 1.0 处理器受以下影响：

如果转换程序输出的元素没有命名空间，则处理器在构造相应的 DOM 元素节点之前，必须将该元素的命名空间更改为HTML 命名空间，将元素的本地名称转换为 ASCII 小写，并将元素上的任何非命名空间属性的名称转换为 ASCII 小写。

此要求是 XSLT 1.0 规范的故意违反，因为本规范更改了 HTML 的命名空间和大小写规则，否则这将与基于 DOM 的 XSLT 转换不兼容。（序列化输出的处理器不受影响。）[XSLT10]

本规范未明确说明 XSLT 处理如何与HTML 解析器基础结构交互（例如，XSLT 处理器是否表现为将任何元素放入打开元素堆栈）。然而，XSLT 处理器在成功完成时必须停止解析，并且在中止时必须首先将当前文档的准备状态更新为 "interactive"，然后更新为 "complete"。

本规范未规定 XSLT 如何与导航算法、如何适应事件循环以及如何处理错误页面（例如，是否用 XSLT 错误替换增量 XSLT 输出，或内联呈现等）。

在 script 元素部分中以及在 template 元素部分中，还对 XSLT 和 HTML 以及 XSLT、XPath 和 HTML 的交互进行了额外的非规范性注释。

2.2 策略控制的功能

Headers/Permissions-Policy/document-domain

仅在一个引擎中支持。

Firefox🔰 74+SafariNoChrome🔰 88+

Opera?Edge🔰 88+

Edge (旧版)?Internet ExplorerNo

Firefox Android?Safari iOS?Chrome AndroidNoWebView Android?Samsung Internet?Opera Android?

本文档定义了以下策略控制的功能：

Headers/Feature-Policy/autoplay

Firefox🔰 74+SafariNoChrome64+

Opera?Edge79+

Edge (旧版)?Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Headers/Permissions-Policy/autoplay

仅在一个引擎中支持。

Firefox🔰 74+SafariNoChrome88+

Opera?Edge88+

Edge (旧版)?Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

"autoplay"，其默认允许列表为 'self'。
"cross-origin-isolated"，其默认允许列表为 'self'。

2.3 通用微语法

HTML 中有很多地方接受特定的数据类型，例如日期或数字。本节描述了这些格式内容的符合性标准以及如何解析它们。

强烈建议实现者仔细检查可能考虑使用的任何第三方库，以实现以下描述的语法解析。例如，日期库可能会实现与本规范要求不同的错误处理行为，因为描述类似于本规范中使用的日期语法的规范中通常未定义错误处理行为，因此实现往往在如何处理错误方面存在很大差异。

2.3.1 通用解析器习惯用法

下面描述的一些微解析器遵循一种模式，即具有一个保存解析字符串的 input 变量，以及一个指向 input 中下一个要解析的字符的 position 变量。

2.3.2 布尔属性

有许多属性是布尔属性。元素上存在布尔属性表示真值，而不存在该属性表示假值。

如果该属性存在，其值必须是空字符串或与属性规范名称进行 ASCII 大小写不敏感匹配的值，且没有前导或尾随空格。

布尔属性上不允许使用值 "true" 和 "false"。要表示假值，必须完全省略该属性。

以下是一个已选中且禁用的复选框示例。checked 和 disabled 属性是布尔属性。

<label><input type=checkbox checked name=cheese disabled> Cheese</label>

这也可以等效地写成这样：

<label><input type=checkbox checked=checked name=cheese disabled=disabled> Cheese</label>

你也可以混合使用样式；以下内容仍然等效：

<label><input type='checkbox' checked name=cheese disabled=""> Cheese</label>

2.3.3 关键字和枚举属性

一些属性称为枚举属性，它们取一组有限的状态。此类属性的状态通过将属性值、每个属性规范中给出的关键字/状态映射集和属性规范中可能给出的两种特殊状态结合起来得出。这些特殊状态是无效值默认值和缺失值默认值。

多个关键字可以映射到同一状态。

空字符串可以是有效的关键字。注意，缺失值默认值仅在属性缺失时适用，而不是当它以空字符串值存在时。

要确定属性的状态，请使用以下步骤：

如果未指定该属性：
1. 如果属性定义了缺失值默认值状态，则返回该缺失值默认值状态。
2. 否则，不返回任何状态。
如果属性的值与为该属性定义的关键字之一进行ASCII大小写不敏感匹配，则返回该关键字表示的状态。
如果属性定义了无效值默认值状态，则返回该无效值默认值状态。
不返回任何状态。

出于编写符合性目的，如果指定了枚举属性，则属性的值必须与该属性的一个合规关键字进行ASCII大小写不敏感匹配，且没有前导或尾随空格。

出于反射目的，有任何关键字映射到的状态被称为具有规范关键字。其确定方式如下：

如果只有一个关键字映射到给定状态，则为该关键字。
如果只有一个合规关键字映射到给定状态，则为该合规关键字。
否则，该状态的规范关键字将在属性规范中明确给出。

2.3.4 数字

2.3.4.1 有符号整数

如果一个字符串由一个或多个ASCII数字组成，并且可以选择以U+002D连字符-字符（-）为前缀，则该字符串是有效整数。

没有U+002D连字符-前缀的有效整数表示由该数字字符串表示的十进制数。有U+002D连字符-前缀的有效整数表示由跟随U+002D连字符-的数字字符串表示的十进制数，从零减去。

解析整数的规则如下所示。当调用时，必须按给定顺序执行步骤，在返回值的第一个步骤中中止。该算法将返回一个整数或一个错误。

令input为正在解析的字符串。
令position为input中的指针，最初指向字符串的开头。
令sign的值为“positive”。
跳过ASCII空白字符在input中给定position。
如果position超过input的末尾，则返回错误。
如果position指示的字符（第一个字符）是U+002D连字符-字符（-）：
1. 令sign为“negative”。
2. 将position前进到下一个字符。
3. 如果position超过input的末尾，则返回错误。
否则，如果position指示的字符（第一个字符）是U+002B加号字符（+）：
1. 将position前进到下一个字符。（“+”被忽略，但它不符合规范。）
2. 如果position超过input的末尾，则返回错误。
如果position指示的字符不是ASCII数字，则返回错误。
收集一系列代码点，这些代码点是input中给定position的ASCII数字，并将结果序列解释为十进制整数。令value为该整数。
如果sign为“positive”，则返回value，否则返回从零减去value的结果。

2.3.4.2 非负整数

如果一个字符串由一个或多个ASCII数字组成，则该字符串是有效非负整数。

一个有效非负整数表示由该数字字符串表示的十进制数。

解析非负整数的规则如下所示。当调用时，必须按给定顺序执行步骤，在返回值的第一个步骤中中止。该算法将返回零、正整数或错误。

令input为正在解析的字符串。
令value为使用解析整数的规则解析input的结果。
如果value是一个错误，则返回错误。
如果value小于零，则返回错误。
返回value。

2.3.4.3 浮点数

如果一个字符串包含以下内容，则该字符串是有效浮点数：

可选的U+002D HYPHEN-MINUS字符（-）。
以下两项之一或两项，按给定顺序：
1. 一系列一个或多个ASCII数字。
2. 以下两项，按给定顺序：
  1. 一个单独的U+002E FULL STOP字符（.）。
  2. 一系列一个或多个ASCII数字。
可选的：
1. U+0065拉丁小写字母E字符（e）或U+0045拉丁大写字母E字符（E）。
2. 可选的U+002D HYPHEN-MINUS字符（-）或U+002B PLUS SIGN字符（+）。
3. 一系列一个或多个ASCII数字。

一个有效浮点数表示通过将有效数字乘以10的指数次方获得的数，其中有效数字是第一个数，解释为十进制（包括小数点和小数点后的数字，如果有的话，并解释为负数，如果整个字符串以U+002D HYPHEN-MINUS字符（-）开头并且该数字不为零），其中指数是E之后的数字，如果有的话（如果在E和数字之间有U+002D HYPHEN-MINUS字符（-）并且该数字不为零，则解释为负数，或者如果在E和数字之间有U+002B PLUS SIGN字符（+），则忽略该字符）。如果没有E，则指数视为零。

无穷大和非数字（NaN）值不是有效浮点数。

有效浮点数的概念通常仅用于限制作者允许的内容，而用户代理要求使用以下解析浮点数值的规则（例如，max属性的progress元素）。但是，在某些情况下，用户代理要求包括检查字符串是否为有效浮点数（例如，值清理算法的数字状态的input元素，或解析srcset属性的算法）。

作为浮点数的最佳表示是运行ToString(n)获得的字符串。抽象操作ToString不是唯一确定的。当存在多个可能的字符串可以从ToString获得特定值时，用户代理必须始终返回该值的相同字符串（尽管它可能与其他用户代理使用的值不同）。

解析浮点数值的规则如下所示。该算法必须在返回值的第一个步骤中中止。该算法将返回数字或错误。

令input为正在解析的字符串。
令position为指向input的指针，最初指向字符串的开头。
令value的值为1。
令divisor的值为1。
令exponent的值为1。
跳过ASCII空白，在input中给定position。
如果position超过input的末尾，则返回错误。
如果position指示的字符是U+002D HYPHEN-MINUS字符（-）：
1. 将value和divisor更改为-1。
2. 将position前移到下一个字符。
3. 如果position超过input的末尾，则返回错误。
否则，如果position指示的字符（第一个字符）是U+002B PLUS SIGN字符（+）：
1. 将position前移到下一个字符。（“+”被忽略，但不符合规范。）
2. 如果position超过input的末尾，则返回错误。
如果position指示的字符是U+002E FULL STOP（.），并且不是input中的最后一个字符，并且position指示的字符后的字符是ASCII数字，则将value设为零并跳转到标记为fraction的步骤。
如果position指示的字符不是ASCII数字，则返回错误。
收集一系列代码点，这些代码点是ASCII数字，从input中给定position，并将结果序列解释为十进制整数。将value乘以该整数。
如果position超过input的末尾，则跳转到标记为conversion的步骤。
Fraction：如果position指示的字符是U+002E FULL STOP（.），请运行这些子步骤：
1. 将position前移到下一个字符。
2. 如果position超过input的末尾，或者position指示的字符不是ASCII数字，U+0065拉丁小写字母E（e），或U+0045拉丁大写字母E（E），则跳转到标记为conversion的步骤。
3. 如果position指示的字符是U+0065拉丁小写字母E字符（e）或U+0045拉丁大写字母E字符（E），则跳过这些子步骤的其余部分。
4. Fraction loop：将divisor乘以10。
5. 将由position指示的字符的值解释为十进制数字（0..9）并除以divisor，然后加到value。
6. 将position前移到下一个字符。
7. 如果position超过input的末尾，则跳转到标记为conversion的步骤。
8. 如果position指示的字符是ASCII数字，则跳回这些子步骤中标记为fraction loop的步骤。
如果position指示的字符是U+0065（e）或U+0045（E），则：
1. 将position前移到下一个字符。
2. 如果position超过input的末尾，则跳转到标记为conversion的步骤。
3. 如果position指示的字符是U+002D HYPHEN-MINUS字符（-）：
  1. 将exponent更改为-1。
  2. 将position前移到下一个字符。
  3. 如果position超过input的末尾，则跳转到标记为conversion的步骤。
  否则，如果position指示的字符是U+002B PLUS SIGN字符（+）：
  1. 将position前移到下一个字符。
  2. 如果position超过input的末尾，则跳转到标记为conversion的步骤。
4. 如果position指示的字符不是ASCII数字，则跳转到标记为conversion的步骤。
5. 收集一系列代码点，这些代码点是ASCII数字，从input中给定position，并将结果序列解释为十进制整数。将exponent乘以该整数。
6. 将value乘以10的exponent次方。
Conversion：令S为一组有限的IEEE 754双精度浮点值，除了-0，但增加了两个特殊值：2¹⁰²⁴和-2¹⁰²⁴。
令rounded-value为S中最接近value的数，如果有两个同样接近的值，则选择有效数字为偶数的数。（这两个特殊值2¹⁰²⁴和-2¹⁰²⁴被视为具有偶数有效数字）。
如果rounded-value是2¹⁰²⁴或-2¹⁰²⁴，则返回错误。
返回rounded-value。

2.3.4.4 百分比和长度

解析尺寸值的规则如下所示。调用时，必须按给定顺序执行这些步骤，在返回值的第一个步骤中中止。该算法将返回大于或等于0.0的数字或失败；如果返回数字，则进一步分类为百分比或长度。

令input为正在解析的字符串。
令position为input的位置变量，最初指向input的开头。
跳过ASCII空白，在input中给定position。
如果position超过input的末尾或input中position处的代码点不是ASCII数字，则返回失败。
收集一系列代码点，这些代码点是ASCII数字，从input中给定position，并将结果序列解释为十进制整数。令value为该数字。
如果position超过input的末尾，则返回value作为长度。
如果input中position处的代码点是U+002E (.)，则：
1. 将position前移1。
2. 如果position超过input的末尾或input中position处的代码点不是ASCII数字，则返回带有value、input和position的当前尺寸值。
3. 令divisor的值为1。
4. 一直循环：
  1. 将divisor乘以10。
  2. 将input中position处的代码点的值，解释为十进制数字（0..9）并除以divisor，加到value。
  3. 将position前移1。
  4. 如果position超过input的末尾，则返回value作为长度。
  5. 如果input中position处的代码点不是ASCII数字，则中止。
返回带有value、input和position的当前尺寸值。

给定value、input和position，确定当前尺寸值如下：

如果position超过input的末尾，则返回value作为长度。
如果input中position处的代码点是U+0025 (%)，则返回value作为百分比。
返回value作为长度。

2.3.4.5 非零百分比和长度

解析非零尺寸值的规则如下所示。调用时，必须按给定顺序执行这些步骤，在返回值的第一个步骤中中止。该算法将返回大于0.0的数字或错误；如果返回数字，则进一步分类为百分比或长度。

令input为正在解析的字符串。
令value为使用解析尺寸值的规则解析input的结果。
如果value是错误，则返回错误。
如果value为零，则返回错误。
如果value是百分比，则返回value作为百分比。
返回value作为长度。

2.3.4.6 浮点数列表

一个有效的浮点数列表是由U+002C逗号字符分隔的多个有效的浮点数，不包含其他字符（例如没有ASCII空白字符）。此外，还可能对可以给出的浮点数的数量或允许的值范围有限制。

解析浮点数列表的规则如下：

令input为正在解析的字符串。
令position为input中的一个指针，初始指向字符串的开始。
令numbers为一个初始为空的浮点数列表。该列表将是此算法的结果。
收集一系列代码点，这些代码点是input中的ASCII空白字符、U+002C逗号或U+003B分号字符，位置由position指示。此操作会跳过任何前导分隔符。
当position未越过input的末尾时：
1. 收集一系列代码点，这些代码点不是ASCII空白字符、U+002C逗号、U+003B分号、ASCII数字、U+002E句号或U+002D连字符，位置由position指示。这会跳过前导的无效字符。
2. 收集一系列代码点，这些代码点不是ASCII空白字符、U+002C逗号或U+003B分号字符，位置由position指示，并将结果命名为unparsed number。
3. 使用解析浮点数值的规则解析unparsed number，得到number。
4. 如果number是错误，则将number设为零。
5. 将number附加到numbers中。
6. 收集一系列代码点，这些代码点是input中的ASCII空白字符、U+002C逗号或U+003B分号字符，位置由position指示。这会跳过分隔符。
返回numbers。

2.3.4.7 维度列表

解析维度列表的规则如下。这些规则返回零个或多个由一个数字和一个单位组成的对，其中单位可以是百分比、相对或绝对。

令raw input为正在解析的字符串。
如果raw input的最后一个字符是U+002C逗号字符(,)，则移除该字符。
按逗号分割字符串raw input。令raw tokens为结果的标记列表。
令result为一个空的数字/单位对列表。
对于raw tokens中的每个标记，运行以下子步骤：
1. 令input为该标记。
2. 令position为input中的一个指针，初始指向字符串的开始。
3. 令value为数字0。
4. 令unit为绝对。
5. 如果position已超出input的末尾，则将unit设为相对并跳至最后一个子步骤。
6. 如果position处的字符是ASCII数字，则收集一系列代码点，这些代码点是input中的ASCII数字，将结果解释为一个以十进制表示的整数，并将value增加该整数。
7. 如果position处的字符是U+002E（.），则：
  1. 收集一系列代码点，这些代码点由ASCII空白字符和ASCII数字组成，从input中给定position。令s为结果序列。
  2. 移除s中的所有ASCII空白。
  3. 如果s不是空字符串，则：
    1. 令length为s中的字符数（删除空格后）。
    2. 令fraction为将s解释为一个十进制整数，然后将该数除以10^length的结果。
    3. 将fraction加到value中。
8. 跳过ASCII空白字符，在input中的position。
9. 如果position处的字符是U+0025百分号字符(%)，则将unit设为百分比。
  
  否则，如果position处的字符是U+002A星号字符(*)，则将unit设为相对。
10. 将一个由value给定的数字和unit给定的单位组成的条目添加到result中。
返回列表result。

2.3.5 日期和时间

在以下算法中，年份year的月份month中的天数为：如果month是1、3、5、7、8、10或12，则为31；如果month是4、6、9或11，则为30；如果month是2且year是能被400整除的数，或year是能被4整除但不能被100整除的数，则为29；否则为28。这考虑到了格里高利历中的闰年。[GREGORIAN]

当在本节定义的日期和时间语法中使用ASCII数字时，它们表示十进制的数字。

虽然此处描述的格式旨在作为相应ISO8601格式的子集，但本规范对解析规则的定义比ISO8601更详细。因此，建议实现者在使用任何日期解析库来实现以下描述的解析规则之前仔细检查这些库；ISO8601库可能不会以完全相同的方式解析日期和时间。[ISO8601]

本规范所指的前置格里高利历指的是现代格里高利历，向前推算到1年。前置格里高利历中的日期，有时明确称为前置格里高利日期，即使用该历法描述的日期，即使该历法在当时（或地点）尚未使用。[GREGORIAN]

在本规范中使用格里高利历作为线格式是由于参与决策的人员的文化偏见而做出的任意选择。另请参阅讨论日期、时间和数字格式的部分（作者部分）、有关表单控件本地化的实现注释，以及time元素。

2.3.5.1 月份

月份由一个特定的前置格里高利日期组成，没有时区信息，并且日期信息仅限于年份和月份。[GREGORIAN]

如果字符串包含以下顺序的组件，则表示一个年份year和月份month的有效月份字符串：

四个或更多ASCII数字，表示year，其中year > 0
一个U+002D连字符(-)
两个ASCII数字，表示month，范围为1 ≤ month ≤ 12

解析月份字符串的规则如下。这将返回一个年份和月份，或不返回任何内容。如果在任何时候算法指示“失败”，则意味着算法在该点中止并返回无。

令input为要解析的字符串。
令position为指向input的指针，最初指向字符串的开始。
解析月份组件以获得year和month。如果返回为空，则失败。
如果position不在input的结尾之外，则失败。
返回year和month。

解析月份组件的规则如下，给定一个input字符串和一个position。这将返回一个年份和月份，或不返回任何内容。如果在任何时候算法指示“失败”，则意味着算法在该点中止并返回无。

收集一系列码点，这些码点是input中的ASCII数字，根据position。如果收集的序列长度不足四个字符，则失败。否则，将结果序列解释为十进制整数。将该数值作为year。
如果year不是大于零的数值，则失败。
如果position超出input的结尾或position处的字符不是U+002D连字符，则失败。否则，将position前移一个字符。
收集一系列码点，这些码点是input中的ASCII数字，根据position。如果收集的序列长度不正好是两个字符，则失败。否则，将结果序列解释为十进制整数。将该数值作为month。
如果month不是范围在1 ≤ month ≤ 12之间的数值，则失败。
返回year和month。

2.3.5.2 日期

日期由一个特定的前置格里高利日期组成，没有时区信息，由年、月和日组成。[GREGORIAN]

如果字符串包含以下顺序的组件，则表示一个年份year、月份month和日期day的有效日期字符串：

一个有效月份字符串，表示year和month
一个U+002D HYPHEN-MINUS字符(-)
两个ASCII数字，表示day，范围为1 ≤ day ≤ maxday，其中maxday是该年该月中的天数

解析日期字符串的规则如下。这将返回一个日期，或不返回任何内容。如果在任何时候算法指示“失败”，则意味着算法在该点中止并返回无。

令input为要解析的字符串。
令position为指向input的指针，最初指向字符串的开始。
解析日期组件以获得year、month和day。如果返回为空，则失败。
如果position不在input的结尾之外，则失败。
令date为具有year、month和day的日期。
返回date。

解析日期组件的规则如下，给定一个input字符串和一个position。这将返回一个年份、月份和日期，或不返回任何内容。如果在任何时候算法指示“失败”，则意味着算法在该点中止并返回无。

解析月份组件以获得year和month。如果返回为空，则失败。
令maxday为该年该月的天数。
如果position超出input的结尾或position处的字符不是U+002D HYPHEN-MINUS字符，则失败。否则，将position前移一个字符。
收集一系列码点，这些码点是input中的ASCII数字，根据position。如果收集的序列长度不正好是两个字符，则失败。否则，将结果序列解释为十进制整数。将该数值作为day。
如果day不是范围在1 ≤ day ≤ maxday之间的数值，则失败。
返回year、month和day。

2.3.5.3 无年份的日期

无年份的日期由一个公历月份和该月份中的一天组成，但没有关联的年份信息。[GREGORIAN]

如果字符串包含以下顺序的组件，则表示一个月份month和日期day的有效无年份日期字符串：

可选的两个U+002D HYPHEN-MINUS字符(-)
两个ASCII数字，表示月份month，范围为1 ≤ month ≤ 12
一个U+002D HYPHEN-MINUS字符(-)
两个ASCII数字，表示日期day，范围为1 ≤ day ≤ maxday，其中maxday是该月份的天数，以任意闰年（例如4或2000年）为准

换句话说，如果month是“02”，表示二月，那么日期可以是29日，就像该年份是闰年一样。

解析无年份日期字符串的规则如下。这将返回一个月份和日期，或不返回任何内容。如果在任何时候算法指示“失败”，则意味着算法在该点中止并返回无。

令input为要解析的字符串。
令position为指向input的指针，最初指向字符串的开始。
解析无年份日期组件以获得month和day。如果返回为空，则失败。
如果position不在input的结尾之外，则失败。
返回month和day。

解析无年份日期组件的规则如下，给定一个input字符串和一个position。这将返回一个月份和日期，或不返回任何内容。如果在任何时候算法指示“失败”，则意味着算法在该点中止并返回无。

收集一系列码点，这些码点是input中的U+002D HYPHEN-MINUS字符(-)，根据position。如果收集的序列长度不正好是零个或两个字符，则失败。
收集一系列码点，这些码点是input中的ASCII数字，根据position。如果收集的序列长度不正好是两个字符，则失败。否则，将结果序列解释为十进制整数。将该数值作为month。
如果month不是范围在1 ≤ month ≤ 12之间的数值，则失败。
令maxday为该月份的天数，以任意闰年（例如4或2000年）为准。
如果position超出input的结尾或position处的字符不是U+002D HYPHEN-MINUS字符，则失败。否则，将position前移一个字符。
收集一系列码点，这些码点是input中的ASCII数字，根据position。如果收集的序列长度不正好是两个字符，则失败。否则，将结果序列解释为十进制整数。将该数值作为day。
如果day不是范围在1 ≤ day ≤ maxday之间的数值，则失败。
返回month和day。

2.3.5.4 时间

时间由具体的时间组成，不包含时区信息，包括小时、分钟、秒和秒的小数部分。

如果字符串包含以下顺序的组件，则表示一个小时hour、分钟minute和秒second的有效时间字符串：

两个ASCII数字，表示hour，范围为0 ≤ hour ≤ 23
一个U+003A COLON字符(:)
两个ASCII数字，表示minute，范围为0 ≤ minute ≤ 59
如果second不为零，或可选地如果second为零：
1. 一个U+003A COLON字符(:)
2. 两个ASCII数字，表示second的整数部分，范围为0 ≤ s ≤ 59
3. 如果second不是整数，或可选地如果second是整数：
  1. 一个U+002E FULL STOP字符(.)
  2. 一、二或三ASCII数字，表示second的小数部分

秒second组件不能为60或61；无法表示闰秒。

解析时间字符串的规则如下。这将返回一个时间或不返回任何内容。如果在任何时候算法指示“失败”，则意味着算法在该点中止并返回无。

令input为要解析的字符串。
令position为指向input的指针，最初指向字符串的开始。
解析时间组件以获得hour、minute和second。如果返回为空，则失败。
如果position不在input的结尾之外，则失败。
令time为具有小时hour、分钟minute和秒second的时间。
返回time。

解析时间组件的规则如下，给定一个input字符串和一个position。这将返回一个小时、分钟和秒，或不返回任何内容。如果在任何时候算法指示“失败”，则意味着算法在该点中止并返回无。

收集一系列码点，这些码点是input中的ASCII数字，根据position。如果收集的序列长度不正好是两个字符，则失败。否则，将结果序列解释为十进制整数。将该数值作为hour。
如果hour不是范围在0 ≤ hour ≤ 23之间的数值，则失败。
如果position超出input的结尾或position处的字符不是U+003A COLON字符，则失败。否则，将position前移一个字符。
收集一系列码点，这些码点是input中的ASCII数字，根据position。如果收集的序列长度不正好是两个字符，则失败。否则，将结果序列解释为十进制整数。将该数值作为minute。
如果minute不是范围在0 ≤ minute ≤ 59之间的数值，则失败。
令second为0。
如果position不在input的结尾之外且position处的字符是U+003A COLON字符(:)，则：
1. 将position前移至input中的下一个字符。
2. 如果position超出input的结尾，或在input的最后一个字符，或如果position开始的两个字符都不是ASCII数字，则失败。
3. 收集一系列码点，这些码点是input中的ASCII数字或U+002E FULL STOP字符。根据position。如果收集的序列长度为三字符，或如果它长于三字符并且第三个字符不是U+002E FULL STOP字符，或如果它包含多个U+002E FULL STOP字符，则失败。否则，将结果序列解释为十进制数（可能包含小数部分）。将second设置为该数值。
4. 如果second不是范围在0 ≤ second < 60之间的数值，则失败。
返回hour、minute和second。

2.3.5.5 本地日期和时间

本地日期和时间由一个特定的前置格里高利日期（包括年份、月份和日期）和一个时间（包括小时、分钟、秒和秒的小数部分）组成，但不包含时区信息。[GREGORIAN]

如果字符串包含以下顺序的组件，则表示日期和时间的有效本地日期和时间字符串：

有效日期字符串，表示日期
一个U+0054拉丁大写字母T字符（T）或一个U+0020空格字符
有效时间字符串，表示时间

如果字符串包含以下顺序的组件，则表示日期和时间的有效规范化本地日期和时间字符串：

有效日期字符串，表示日期
一个U+0054拉丁大写字母T字符（T）
有效时间字符串，表示时间，以给定时间的最短可能字符串表示（例如，如果时间为整分钟，则省略秒组件）

解析本地日期和时间字符串的规则如下。这将返回一个日期和时间，或不返回任何内容。如果在任何时候算法指示“失败”，则意味着算法在该点中止并返回无。

令input为要解析的字符串。
令position为指向input的指针，最初指向字符串的开始。
解析日期组件以获得year、month和day。如果返回为空，则失败。
如果position超出input的结尾或position处的字符既不是U+0054拉丁大写字母T字符（T）也不是U+0020空格字符，则失败。否则，将position前移一个字符。
解析时间组件以获得hour、minute和second。如果返回为空，则失败。
如果position不在input的结尾之外，则失败。
令date为具有年份year、月份month和日期day的日期。
令time为具有小时hour、分钟minute和秒second的时间。
返回date和time。

2.3.5.6 时区

时区偏移由若干小时和分钟组成。

如果字符串符合以下任意一种情况，则表示一个有效的时区偏移字符串：

一个U+005A拉丁大写字母Z字符（Z），仅在时区为UTC时允许
或者，以下顺序的组件：
1. 一个U+002B加号字符（+）或者，如果时区偏移不为零，则一个U+002D连字符（-），表示时区偏移的符号
2. 两个ASCII数字，表示时区偏移的小时部分hour，范围为0≤hour≤23
3. （可选）一个U+003A冒号字符（:）
4. 两个ASCII数字，表示时区偏移的分钟部分minute，范围为0≤minute≤59

此格式允许时区偏移范围为-23:59到+23:59。目前，实际时区的偏移范围为-12:00到+14:00，且偏移的分钟部分通常为00、30或45。然而，由于时区是政治因素的产物，可能会发生变化。

有关使用时区偏移表示历史时间的详细信息，请参阅全局日期和时间部分中的使用说明和示例。

解析时区偏移字符串的规则如下。这将返回一个时区偏移，或者不返回任何内容。如果在任何时候算法指示“失败”，则意味着算法在该点中止并返回无。

令input为要解析的字符串。
令position为指向input的指针，最初指向字符串的开始。
解析时区偏移组件以获得timezone_hours和timezone_minutes。如果返回无，则失败。
如果position未超出input的结尾，则失败。
返回与UTC相差timezone_hours小时和timezone_minutes分钟的时区偏移。

解析时区偏移组件的规则如下，给定一个input字符串和一个position。这将返回时区小时和分钟，或者不返回任何内容。如果在任何时候算法指示“失败”，则意味着算法在该点中止并返回无。

如果position处的字符为U+005A拉丁大写字母Z字符（Z），则：
1. 令timezone_hours为0。
2. 令timezone_minutes为0。
3. 将position前移到input中的下一个字符。
否则，如果position处的字符是U+002B加号（+）或U+002D连字符（-），则：
1. 如果position处的字符是U+002B加号（+），则令sign为“positive”。否则，它是U+002D连字符（-）；令sign为“negative”。
2. 将position前移到input中的下一个字符。
3. 收集从position开始的input中ASCII数字序列。令s为收集的序列。
4. 如果s恰好为两个字符长，则：
  1. 将s解释为十进制整数。令该数为timezone_hours。
  2. 如果position超出input的结尾或position处的字符不是U+003A冒号字符，则失败。否则，将position前移一个字符。
  3. 收集从position开始的input中ASCII数字序列。如果收集的序列不恰好为两个字符长，则失败。否则，将结果序列解释为十进制整数。令该数为timezone_minutes。
  如果s恰好为四个字符长，则：
  1. 将s的前两个字符解释为十进制整数。令该数为timezone_hours。
  2. 将s的后两个字符解释为十进制整数。令该数为timezone_minutes。
  否则，失败。
5. 如果timezone_hours不在0≤timezone_hours≤23范围内，则失败。
6. 如果sign为“negative”，则将timezone_hours取反。
7. 如果timezone_minutes不在0≤timezone_minutes≤59范围内，则失败。
8. 如果sign为“negative”，则将timezone_minutes取反。
否则，失败。
返回timezone_hours和timezone_minutes。

2.3.5.7 全球日期和时间

全球日期和时间包括一个特定的前置格里高利日期，包括年份、月份和日期，以及时间，包括小时、分钟、秒和秒的小数部分，用时区偏移量表示，包括一个带符号的小时数和分钟数。 [GREGORIAN]

如果一个字符串包含以下顺序的组件，则表示一个日期、时间和时区偏移量，它是一个有效的全球日期和时间字符串：

一个表示日期的有效日期字符串
一个U+0054拉丁大写字母T字符(T)或一个U+0020空格字符
一个表示时间的有效时间字符串
一个表示时区偏移量的有效时区偏移字符串

在20世纪中期UTC形成之前的日期中的时间必须用UT1（在0°经度的当代地球太阳时间）表示和解释，而不是UTC（以SI秒计时的UT1的近似）。在时区形成之前的时间必须用显式时区的UT1时间表示和解释，这些时区近似于当代格林威治伦敦所在地时间和适当本地时间之间的差异。

以下是一些用有效全球日期和时间字符串书写的日期示例。

"0037-12-13 00:00Z": 尼禄（罗马皇帝）生日当天使用伦敦时间的午夜。关于这个日期实际上对应的时间见下文进一步讨论。
"1979-10-14T12:00:00.001-04:00": 1979年10月14日中午过一毫秒，位于美国东海岸使用夏令时的时区。
"8592-01-01T02:09+02:09": 8592年1月1日午夜UTC。该时间所关联的时区比UTC早两个小时九分钟，这目前不是一个真实的时区，但仍然是允许的。

这些日期有几个显著之处：

年份少于四位数的必须补零。日期"37-12-13"不是一个有效的日期。
如果"T"被替换为一个空格，它必须是一个单一的空格字符。字符串"2001-12-21 12:00Z"（组件之间有两个空格）不会被成功解析。
为了明确识别格里高利历引入之前的时间点（就UTC形成之前的时间点是否可以明确识别而言），必须首先将日期从当时使用的历法（例如，儒略历）转换为格里高利历。尼禄出生的日期是儒略历37年12月15日，即前置格里高利历37年12月13日。
时间和时区偏移量组件不是可选的。
本版本的HTML中无法表示一年之前的日期时间。
古代具体事件的时间最多是近似值，因为时间的协调和测量直到最近几十年才变得精确。
时区偏移量因夏令时而异。

解析全球日期和时间字符串的规则如下。这将返回UTC时间，以及用于回溯或显示目的的相关时区偏移信息，或什么也不返回。如果算法中任何一点指出它"失败"，这意味着它在该点中止并返回什么也没有。

让input成为被解析的字符串。
让position成为input中的一个指针，最初指向字符串的开始。
解析日期组件以获得year、month和day。如果没有返回值，则失败。
如果position超出input的末尾或position处的字符既不是U+0054拉丁大写字母T字符（T），也不是U+0020空格字符，则失败。否则，将position向前移动一个字符。
解析时间组件以获得hour、minute和second。如果没有返回值，则失败。
如果position超出input的末尾，则失败。
解析时区偏移组件以获得timezone_hours和timezone_minutes。如果没有返回值，则失败。
如果position不超出input的末尾，则失败。
让time成为year年、month月、day日、hour时、minute分、second秒的时间，减去timezone_hours小时和timezone_minutes分钟。这个时间点是UTC时区的时间点。
让timezone成为比UTC快timezone_hours小时和timezone_minutes分钟的时区偏移量。
返回time和timezone。

2.3.5.8 周

周由一个周年编号和一个周编号组成，表示一个从星期一开始的七天周期。在该日历系统中，每个周年有52或53个这样的七天周期，如下所定义。1969年12月29日（1969-12-29）格里高利日期的星期一被定义为1970年周年的第1周。连续的周按顺序编号。周年编号为1的前一周是前一个周年的最后一周，反之亦然。[GREGORIAN]

如果一个周年编号year对应于一个在前置格里高利日历中以星期四（1月1日）为第一天的年份，或一个在前置格里高利日历中以星期三（1月1日）为第一天且year是400的倍数或4的倍数但不是100的倍数的年份，则该周年编号year有53周。所有其他周年编号都有52周。

一个有53周的周年最后一天的周编号为53；一个有52周的周年最后一天的周编号为52。

一个特定日期的周年编号可能与包含该日期的年份在前置格里高利日历中的编号不同。周年y的第一周是包含格里高利年y的第一个星期四的那一周。

对于现代用途，这里定义的周等同于ISO 8601中定义的ISO周。[ISO8601]

如果一个字符串包含以下顺序的组件，则表示一个周年编号year和周week，它是一个有效的周字符串：

四个或更多的ASCII数字，表示year，其中year > 0
一个U+002D连字符（-）
一个U+0057拉丁大写字母W字符（W）
两个ASCII数字，表示周week，范围为1 ≤ week ≤ maxweek，其中maxweek是该周年的最后一天的周编号。

解析周字符串的规则如下。这将返回一个周年编号和周编号，或者返回空值。如果在任何时候算法指示"失败"，这意味着它在该点中止并返回空值。

令input为被解析的字符串。
令position为input中的指针，最初指向字符串的开头。
收集一系列代码点，这些代码点是ASCII数字，从position处的input中收集。如果收集到的序列不超过四个字符，则失败。否则，将结果序列解释为十进制整数。令该数为year。
如果year不是大于零的数字，则失败。
如果position超出input的末尾或position处的字符不是U+002D连字符，则失败。否则，将position向前移动一个字符。
如果position超出input的末尾或position处的字符不是U+0057拉丁大写字母W字符，则失败。否则，将position向前移动一个字符。
收集一系列代码点，这些代码点是ASCII数字，从position处的input中收集。如果收集到的序列不是恰好两个字符，则失败。否则，将结果序列解释为十进制整数。令该数为week。
令maxweek为年份year的最后一天的周编号。
如果week不是1 ≤ week ≤ maxweek范围内的数字，则失败。
如果position未超出input的末尾，则失败。
返回周年编号year和周编号week。

2.3.5.9 持续时间

持续时间由若干秒组成。

由于月份和秒不可比较（一个月不是一个精确的秒数，而是一个其精确长度取决于从何时开始测量的时间段），本规范中定义的持续时间不能包括月份（或等同于十二个月的年份）。只能描述特定秒数的持续时间。

如果字符串符合以下任一形式，则表示持续时间t，且该字符串为有效持续时间字符串：

一个U+0050拉丁大写字母P字符，后跟以下子组件之一或多个，按给定顺序，其中天数、小时、分钟和秒数对应于t中的相同秒数：
1. 一个或多个ASCII数字，后跟一个U+0044拉丁大写字母D字符，表示天数。
2. 一个U+0054拉丁大写字母T字符，后跟以下子组件之一或多个，按给定顺序：
  1. 一个或多个ASCII数字，后跟一个U+0048拉丁大写字母H字符，表示小时数。
  2. 一个或多个ASCII数字，后跟一个U+004D拉丁大写字母M字符，表示分钟数。
  3. 以下组件：
    1. 一个或多个ASCII数字，表示秒数。
    2. 可选地，一个U+002E全停止符（.），后跟一个、两个或三个ASCII数字，表示秒的小数部分。
    3. 一个U+0053拉丁大写字母S字符。
这与本规范中定义的其他一些日期和时间相关的微语法一样，基于ISO 8601定义的格式之一。[ISO8601]
一个或多个持续时间时间组件，每个组件具有不同的持续时间时间组件刻度，顺序不限；表示的秒数总和等于t中的秒数。

持续时间时间组件是一个字符串，由以下组件组成：
1. 零个或多个ASCII空白字符。
2. 一个或多个ASCII数字，表示若干时间单位，按指定的持续时间时间组件刻度（见下文）缩放，以表示若干秒。
3. 如果指定的持续时间时间组件刻度为1（即单位为秒），则可选地，一个U+002E全停止符（.），后跟一个、两个或三个ASCII数字，表示秒的小数部分。
4. 零个或多个ASCII空白字符。
5. 以下字符之一，表示时间单位的持续时间时间组件刻度：
  
  U+0057拉丁大写字母W字符
  
  U+0077拉丁小写字母w字符
  
  周。刻度为604800。
  
  U+0044拉丁大写字母D字符
  
  U+0064拉丁小写字母d字符
  
  天。刻度为86400。
  
  U+0048拉丁大写字母H字符
  
  U+0068拉丁小写字母h字符
  
  小时。刻度为3600。
  
  U+004D拉丁大写字母M字符
  
  U+006D拉丁小写字母m字符
  
  分钟。刻度为60。
  
  U+0053拉丁大写字母S字符
  
  U+0073拉丁小写字母s字符
  
  秒。刻度为1。
6. 零个或多个ASCII空白字符。
这不是基于ISO 8601中的任何格式。它旨在成为ISO 8601持续时间格式的更易于理解的替代方案。

解析持续时间字符串的规则如下。这将返回一个持续时间或返回空值。如果在任何时候算法指示"失败"，这意味着它在该点中止并返回空值。

令input为被解析的字符串。
令position为input中的指针，最初指向字符串的开头。
令months、seconds和component count均为零。
令M-disambiguator为minutes。

此标志的另一个值为months。它用于消除ISO8601持续时间中"M"单位的歧义，这些持续时间使用相同的单位表示月份和分钟。月份不允许，但解析为了未来的兼容性，并避免误解在其他上下文中有效的ISO8601持续时间。
跳过ASCII空白字符在input中给定position。
如果position超出input的末尾，则失败。
如果input中position指向的字符是U+0050拉丁大写字母P字符，则将position前进到下一个字符，将M-disambiguator设置为months，并跳过ASCII空白字符在input中给定position。
当条件为真时，执行以下操作：
1. 令units未定义。它将被赋值为以下值之一：years、months、weeks、days、hours、minutes和seconds。
2. 令next character未定义。它用于处理input中的字符。
3. 如果position超出input的末尾，则中断。
4. 如果input中position指向的字符是U+0054拉丁大写字母T字符，则将position前进到下一个字符，将M-disambiguator设置为minutes，跳过ASCII空白字符在input中给定position，并继续。
5. 将next character设置为input中position指向的字符。
6. 如果next character是U+002E全停止符（.），则令N等于零。（不要前进position。稍后会处理这一点。）
  
  否则，如果next character是ASCII数字，则收集一系列代码点，这些代码点是ASCII数字，从position处的input中收集，将结果序列解释为十进制整数，并将N设置为该数。
  
  否则，next character不是数字的一部分；失败。
7. 如果position超出input的末尾，则失败。
8. 将next character设置为input中position指向的字符，并将position前进到下一个字符。（如果next character之前是U+002E全停止符（.），这次仍将是该字符。）
9. 如果next character是U+002E（.），则：
  1. 收集一系列代码点，这些代码点是ASCII数字，从position处的input中收集。令s为结果序列。
  2. 如果s是空字符串，则失败。
  3. 令length为s中的字符数。
  4. 令fraction为将s解释为十进制整数，然后将该数除以10^length的结果。
  5. 将N增加fraction。
  6. 跳过ASCII空白字符在input中给定position。
  7. 如果position超出input的末尾，则失败。
  8. 将next character设置为input中position指向的字符，并将position前进到下一个字符。
  9. 如果next character既不是U+0053拉丁大写字母S字符，也不是U+0073拉丁小写字母s字符，则失败。
  10. 将units设置为seconds。
  否则：
  1. 如果next character是ASCII空白字符，则跳过ASCII空白字符在input中给定position，将next character设置为input中position指向的字符，并将position前进到下一个字符。
  2. 如果next character是U+0059拉丁大写字母Y字符或U+0079拉丁小写字母y字符，将units设置为years，并将M-disambiguator设置为months。
    
    如果next character是U+004D拉丁大写字母M字符或U+006D拉丁小写字母m字符，并且M-disambiguator是months，则将units设置为months。
    
    如果next character是U+0057拉丁大写字母W字符或U+0077拉丁小写字母w字符，将units设置为weeks，并将M-disambiguator设置为minutes。
    
    如果next character是U+0044拉丁大写字母D字符或U+0064拉丁小写字母d字符，将units设置为days，并将M-disambiguator设置为minutes。
    
    如果next character是U+0048拉丁大写字母H字符或U+0068拉丁小写字母h字符，将units设置为hours，并将M-disambiguator设置为minutes。
    
    如果next character是U+004D拉丁大写字母M字符或U+006D拉丁小写字母m字符，并且M-disambiguator是minutes，则将units设置为minutes。
    
    如果next character是U+0053拉丁大写字母S字符或U+0073拉丁小写字母s字符，将units设置为seconds，并将M-disambiguator设置为minutes。
    
    否则，如果next character不是上述任何一个字符，则失败。
10. 增加component count。
11. 令multiplier为1。
12. 如果units是years，则将multiplier乘以12，并将units设置为months。
13. 如果units是months，则将N和multiplier的乘积加到months中。
  
  否则：
  1. 如果units是weeks，则将multiplier乘以7，并将units设置为days。
  2. 如果units是days，则将multiplier乘以24，并将units设置为hours。
  3. 如果units是hours，则将multiplier乘以60，并将units设置为minutes。
  4. 如果units是minutes，则将multiplier乘以60，并将units设置为seconds。
  5. 最终，units现在是seconds。将N和multiplier的乘积加到seconds中。
14. 跳过ASCII空白字符在input中给定position。
如果component count为零，则失败。
如果months不为零，则失败。
返回由seconds秒组成的持续时间。

2.3.5.10 更模糊的时间点

如果字符串也是以下之一，则该字符串是一个有效的包含可选时间的日期字符串：

一个有效的日期字符串
一个有效的全球日期和时间字符串

解析日期或时间字符串的规则如下。该算法将返回一个日期、一个时间、一个全球日期和时间，或什么都不返回。如果在任何时候算法说它“失败”，这意味着它在该点中止并返回什么都没有。

令input为正在解析的字符串。
令position为input中的指针，最初指向字符串的开头。
将start position设置为与position相同的位置。
将date present和time present标志设置为true。
解析日期组件以获取year、month和day。如果解析失败，则将date present标志设置为false。
如果date present为true，并且position没有超出input的末尾，并且position处的字符是U+0054拉丁大写字母T字符（T）或U+0020空格字符，则将position前进到input中的下一个字符。

否则，如果date present为true，并且position超出input的末尾或position处的字符既不是U+0054拉丁大写字母T字符（T）也不是U+0020空格字符，则将time present设置为false。

否则，如果date present为false，将position设置回与start position相同的位置。
如果time present标志为true，则解析时间组件以获取hour、minute和second。如果解析失败，则失败。
如果date present和time present标志都为true，但position超出input的末尾，则失败。
如果date present和time present标志都为true，解析时区偏移组件以获取timezone_hours和timezone_minutes。如果解析失败，则失败。
如果position没有超出input的末尾，则失败。
如果date present标志为true且time present标志为false，则令date为具有year、month和day的日期，并返回date。

否则，如果time present标志为true且date present标志为false，则令time为具有hour、minute和second的时间，并返回time。

否则，令time为年year、月month、日day、小时hour、分钟minute、秒second的时间减去timezone_hours小时和timezone_minutes分钟，该时间点为UTC时区的时间点；令timezone为距离UTC的timezone_hours小时和timezone_minutes分钟；并返回time和timezone。

2.3.6 颜色

一个简单颜色由三个范围在0到255（含）之间的8位数字组成，分别代表颜色的红色、绿色和蓝色分量，在'srgb'颜色空间中。

如果字符串长度正好为七个字符，且第一个字符是U+0023号码符号字符（#），并且剩下的六个字符都是ASCII十六进制数字，那么该字符串是有效的简单颜色，其中前两个数字代表红色分量，中间两个数字代表绿色分量，最后两个数字代表蓝色分量，采用十六进制表示。

如果一个字符串是有效的简单颜色且不使用范围在U+0041拉丁大写字母A到U+0046拉丁大写字母F之间的任何字符，则该字符串是有效的小写简单颜色。

解析简单颜色值的规则如下。在调用时，必须按给定顺序执行这些步骤，在第一个返回值的步骤处中止。该算法将返回一个简单颜色或错误。

令input为正在解析的字符串。
如果input长度不是正好七个字符，则返回错误。
如果input的第一个字符不是U+0023号码符号字符（#），则返回错误。
如果input的最后六个字符不是全部为ASCII十六进制数字，则返回错误。
令result为一个简单颜色。
将第二个和第三个字符解释为十六进制数字，并将结果作为result的红色分量。
将第四个和第五个字符解释为十六进制数字，并将结果作为result的绿色分量。
将第六个和第七个字符解释为十六进制数字，并将结果作为result的蓝色分量。
返回result。

给定一个简单颜色，序列化简单颜色值的规则如下：

令result为一个由单个U+0023号码符号字符（#）组成的字符串。
将红色、绿色和蓝色分量依次转换为两位十六进制数字，使用ASCII小写十六进制数字，必要时进行零填充，并按红色、绿色、蓝色的顺序将这些数字附加到result。
返回result，它将是一个有效的小写简单颜色。

一些过时的遗留属性以更复杂的方式解析颜色，使用解析遗留颜色值的规则，如下算法所示。在调用时，必须按给定顺序执行这些步骤，在第一个返回值的步骤处中止。该算法将返回一个简单颜色或错误。

令input为正在解析的字符串。
如果input为空字符串，则返回错误。
去除input的前导和尾随ASCII空白字符。
如果input与字符串"transparent"进行ASCII大小写不敏感匹配，则返回错误。
如果input与其中一个命名颜色进行ASCII大小写不敏感匹配，则返回与该关键字对应的简单颜色。[CSSCOLOR]

CSS2系统颜色不被识别。
如果input的代码点长度为四，并且input的第一个字符是U+0023（#），并且input的最后三个字符都是ASCII十六进制数字，则：
1. 令result为一个简单颜色。
2. 将input的第二个字符解释为十六进制数字；令result的红色分量为结果数字乘以 17。
3. 将input的第三个字符解释为十六进制数字；令result的绿色分量为结果数字乘以17。
4. 将input的第四个字符解释为十六进制数字；令result的蓝色分量为结果数字乘以17。
5. 返回result。
将input中所有代码点大于U+FFFF的字符（即任何不在基本多语言平面中的字符）替换为两个字符的字符串"00"。
如果input的代码点长度大于128，则截断input，只保留前128个字符。
如果input的第一个字符是U+0023号码符号字符（#），则将其移除。
将input中任何不是ASCII十六进制数字的字符替换为U+0030数字零字符（0）。
当input的代码点长度为零或不是三的倍数时，将U+0030数字零字符（0）附加到input。
将input拆分为三个相等代码点长度的字符串，以获得三个组件。令length为所有这些组件的代码点长度（input的代码点长度的三分之一）。
如果length大于8，则删除每个组件中前length-8个字符，并将length设置为8。
当length大于两个并且每个组件的第一个字符是U+0030数字零字符（0）时，移除该字符并减少length。
如果length仍大于两个，则截断每个组件，只保留每个组件的前两个字符。
令result为一个简单颜色。
将第一个组件解释为十六进制数字；令result的红色分量为结果数字。
将第二个组件解释为十六进制数字；令result的绿色分量为结果数字。
将第三个组件解释为十六进制数字；令result的蓝色分量为结果数字。
返回result。

2D图形上下文有一个单独的颜色语法，也处理不透明度。

2.3.7 空格分隔的标记

一个空格分隔的标记集是一个包含零个或多个单词（称为标记）的字符串，这些单词由一个或多个 ASCII 空白字符分隔，其中单词由一个或多个字符组成，这些字符都不是 ASCII 空白字符。

一个包含空格分隔的标记集的字符串可以有前导或尾随的 ASCII 空白字符。

一个无序的唯一空格分隔标记集是一个空格分隔的标记集，其中的标记没有重复。

一个有序的唯一空格分隔标记集是一个空格分隔的标记集，其中的标记没有重复，但标记的顺序是有意义的。

空格分隔的标记集有时具有定义的允许值集合。当定义了允许值集合时，标记必须全部来自该允许值列表；其他值不符合规范。如果没有提供这样的允许值集合，则所有值都是符合规范的。

如何比较空格分隔的标记集中的标记（例如，区分大小写或不区分大小写）是按集合来定义的。

2.3.8 逗号分隔的标记

一个逗号分隔的标记集是一个包含零个或多个标记的字符串，每个标记之间用一个 U+002C 逗号字符（,）分隔，其中标记由零个或多个字符组成，既不以 ASCII 空白字符开头或结尾，也不包含任何 U+002C 逗号字符（,），并且可以选择性地被 ASCII 空白字符包围。

例如，字符串 " a ,b,,d d " 由四个标记组成："a"，"b"，空字符串和 "d d"。每个标记周围的前导和尾随空白字符不计入标记的一部分，并且空字符串可以是一个标记。

逗号分隔的标记集有时对有效标记的构成有进一步的限制。当定义了这些限制时，标记必须全部符合这些限制；其他值是不符合规范的。如果没有规定这样的限制，则所有值都是符合规范的。

2.3.9 引用

一个有效的哈希名称引用到一个类型为 type 的元素，是一个包含 U+0023 数字符号字符 (#) 后跟一个与同一个树中类型为 type 的元素的 name 属性值完全匹配的字符串。

给定上下文节点 scope，解析类型为 type 的元素的哈希名称引用的规则如下：

如果被解析的字符串不包含 U+0023 数字符号字符，或者如果字符串中的第一个这样的字符是字符串中的最后一个字符，则返回 null。
让 s 成为从被解析字符串中第一个 U+0023 数字符号字符之后的字符到字符串末尾的字符串。
返回 scope 的树中按树顺序排列的第一个类型为 type 且其 id 或 name 属性的值为 s 的元素，如果没有这样的元素，则返回 null。

尽管在解析时会考虑 id 属性，但它们不会用于确定一个值是否为 有效的 哈希名称引用。也就是说，基于 id 引用元素的哈希名称引用是一个一致性错误（除非该元素也有一个具有相同值的 name 属性）。

2.3.10 媒体查询

如果字符串符合 Media Queries 的 <media-query-list> 生成规则，则该字符串是一个有效的媒体查询列表。 [MQ]

如果字符串为空字符串、仅包含 ASCII 空白字符，或是一个根据 Media Queries 中定义的符合用户环境的媒体查询列表，则该字符串符合用户环境。[MQ]

2.3.11 唯一内部值

一个唯一内部值是一个可序列化、按值可比较且从不暴露给脚本的值。

要创建一个新的唯一内部值，返回一个从未被此算法返回过的唯一内部值。

2.4 URLs

2.4.1 术语

如果字符串是一个有效的 URL 字符串且不是空字符串，则该字符串是一个有效的非空 URL。

如果字符串在去除前导和尾随的 ASCII 空白字符后是一个有效的 URL 字符串，则该字符串是一个有效的可能被空格包围的 URL。

如果字符串在去除前导和尾随的 ASCII 空白字符后是一个有效的非空 URL，则该字符串是一个有效的非空 URL 可能被空格包围。

本规范将 URL about:legacy-compat 定义为一个保留的但不可解析的 about: URL，用于在需要与 XML 工具兼容时在 DOCTYPE 中使用的 HTML 文档。[ABOUT]

本规范将 URL about:html-kind 定义为一个保留的但不可解析的 about: URL，用作媒体轨道类型的标识符。[ABOUT]

本规范将 URL about:srcdoc 定义为一个保留的但不可解析的 about: URL，用作 URL 的 iframe srcdoc 文档。[ABOUT]

备用基础 URL 是 文档 对象 document 的 URL 记录，通过执行以下步骤获得：

如果 document 是一个 iframe srcdoc 文档，则：
1. 断言：document 的 about 基础 URL 非空。
2. 返回 document 的 about 基础 URL。
如果 document 的 URL 匹配 about:blank 并且 document 的 about 基础 URL 非空，则返回 document 的 about 基础 URL。
返回 document 的 URL。

文档基础 URL 是 文档 对象的 URL 记录，通过执行以下步骤获得：

如果 base 元素在 文档 中没有 href 属性，则返回 文档 的备用基础 URL。
否则，返回 base 元素中第一个具有 href 属性的 文档 的冻结基础 URL，按照树顺序。

URL 匹配 about:blank 如果其方案是 "about"，其路径包含单个字符串 "blank"，其用户名和密码是空字符串，且其主机为 null。

这样的 URL 的查询和片段可以是非空的。例如，通过解析 "about:blank?foo#bar" 创建的 URL 记录匹配 about:blank。

URL 匹配 about:srcdoc 如果其方案是 "about"，其路径包含单个字符串 "srcdoc"，其查询为 null，其用户名和密码是空字符串，且其主机为 null。

确保匹配 about:srcdoc 的原因是因为不可能创建一个 iframe srcdoc 文档其 URL 具有非空的查询，而与 文档 的 URL 匹配 about:blank 不同。换句话说，所有 URL 只有在其片段上有所不同，才会匹配 about:srcdoc。

2.4.2 解析 URL

解析 URL 是将一个字符串转换为其表示的 URL 记录的过程。虽然这个过程在 URL 中有定义，但 HTML 标准定义了几个封装器来抽象基础 URL 和编码。[URL]

大多数新的 API 应该使用解析 URL。较旧的 API 和 HTML 元素可能需要使用编码解析 URL。当需要自定义基础 URL 或不希望使用基础 URL 时，URL 解析器也可以直接使用。

要解析 URL，给定一个字符串 url，相对于 文档 对象或环境设置对象 environment，执行以下步骤。这些步骤返回失败或一个 URL。

让 baseURL 为 environment 的基础 URL，如果 environment 是一个 文档 对象；否则为 environment 的 API 基础 URL。
返回应用于 url 的 URL 解析器的结果，使用 baseURL。

要编码解析 URL，给定一个字符串 url，相对于一个 文档 对象或环境设置对象 environment，执行以下步骤。这些步骤返回失败或一个 URL。

让 encoding 为 UTF-8。
如果 environment 是一个 文档 对象，则将 encoding 设置为 environment 的字符编码。
否则，如果 environment 的相关全局对象是一个 Window 对象，将 encoding 设置为 environment 的相关全局对象的关联 Document 的字符编码。
让 baseURL 为 environment 的基础 URL，如果 environment 是一个 文档 对象；否则为 environment 的 API 基础 URL。
返回应用于 url 的 URL 解析器的结果，使用 baseURL 和 encoding。

要编码解析并序列化 URL，给定一个字符串 url，相对于一个 文档 对象或环境设置对象 environment，执行以下步骤。这些步骤返回失败或一个字符串。

让 url 为编码解析 URL 的结果，给定 url，相对于 environment。
如果 url 失败，则返回失败。
返回应用于 url 的 URL 序列化器的结果。

2.4.3 基础 URL 的动态更改

当文档的文档基础 URL 更改时，该文档中的所有元素都会受到基础 URL 更改的影响。

以下是基础 URL 更改步骤，当元素受到基础 URL 更改的影响（如 DOM 定义的）时执行：

如果元素创建了一个超链接

如果超链接标识的 URL 正显示给用户，或者任何从该 URL 派生的数据影响了显示，则 href 属性的值应该重新解析，相对于元素的节点文档，并且 UI 应适当更新。

例如，CSS :link/:visited 伪类可能已经受到影响。

如果超链接具有 ping 属性并且其 URL(s) 正显示给用户，则 ping 属性的标记应该重新解析，相对于元素的节点文档，并且 UI 应适当更新。

如果元素是一个 q、 blockquote、 ins，或 del 元素，且具有 cite 属性

如果 URL 标识的 cite 属性正在显示给用户，或者任何从该 URL 派生的数据影响了显示，则 cite 属性的值应该重新解析，相对于元素的节点文档，并且 UI 应适当更新。

否则

该元素不会直接受到影响。

例如，更改基础 URL 不会影响 img 元素显示的图像，尽管从脚本中对 src IDL 属性的后续访问将返回一个新的绝对 URL，可能不再对应于正在显示的图像。

2.5 获取资源

2.5.1 术语

一个响应如果其类型为 "basic"、"cors" 或 "default"，则称为 CORS-同源。 [FETCH]

一个响应如果其类型为 "opaque" 或 "opaqueredirect"，则称为 CORS-跨源。

一个响应的不安全响应是其内部响应，如果有的话，否则就是该响应本身。

要创建一个潜在的 CORS 请求，给定一个 url、 destination、corsAttributeState 和一个可选的 同源回退标志，执行以下步骤：

如果 corsAttributeState 为无 CORS，则让 mode 为 "no-cors"，否则为 "cors"。
如果 同源回退标志 被设置且 mode 为 "no-cors"，则将 mode 设置为 "same-origin"。
让 credentialsMode 为 "include"。
如果 corsAttributeState 为匿名，则将 credentialsMode 设置为 "same-origin"。
让 request 为一个新的请求，其 URL 为 url，目的地为 destination，模式为 mode，凭证模式为 credentialsMode，且使用 URL 凭证标志被设置。

2.5.2 确定资源类型

资源的内容类型元数据必须以与 MIME Sniffing 要求一致的方式获取和解释。 [MIMESNIFF]

资源的计算 MIME 类型必须以与 MIME Sniffing 要求一致的方式确定。[MIMESNIFF]

对于图像的嗅探规则、区分资源是文本还是二进制的规则和音频和视频的嗅探规则也在 MIME Sniffing 中定义。这些规则返回一个 MIME 类型作为结果。[MIMESNIFF]

务必严格遵守 MIME Sniffing 中的规则。当用户代理使用不同于服务器预期的内容类型检测启发式方法时，可能会发生安全问题。更多详细信息，请参见 MIME Sniffing。 [MIMESNIFF]

2.5.3 从 `meta` 元素中提取字符编码

给定一个字符串 s，从 meta 元素中提取字符编码的算法如下。它要么返回一个字符编码，要么返回无结果。

设 position 为指向 s 的指针，初始时指向字符串的开始。
循环: 找到 position 之后的 s 中前七个字符中与单词 "charset" 的 ASCII 不区分大小写匹配的第一个字符。如果没有找到这样的匹配，返回无结果。
跳过紧跟在单词 "charset" 之后的任何 ASCII 空白字符（可能没有）。
如果下一个字符不是 U+003D 等号 (=)，则将 position 移动到指向该下一个字符之前，并返回到标记为循环的步骤。
跳过紧跟在等号之后的任何 ASCII 空白字符（可能没有）。
处理下一个字符如下：

如果它是一个 U+0022 引号字符 (")，并且在 s 中存在一个后续的 U+0022 引号字符 (")

如果它是一个 U+0027 单引号字符 (')，并且在 s 中存在一个后续的 U+0027 单引号字符 (')

返回从该字符到下一个最早出现的相同字符的子字符串的编码获取结果。

如果它是一个未配对的 U+0022 引号字符 (")

如果它是一个未配对的 U+0027 单引号字符 (')

如果没有下一个字符

返回无结果。

否则

返回从该字符到第一个 ASCII 空白字符或 U+003B 分号字符 (;)，或 s 的结束（以最早到达者为准）的子字符串的编码获取结果。

该算法与 HTTP 规范中的那些算法不同（例如，HTTP 不允许使用单引号，并且要求支持一个不被该算法支持的反斜杠转义机制）。虽然该算法用于历史上与 HTTP 相关的上下文中，但实现所支持的语法已经有一段时间偏离。[HTTP]

2.5.4 CORS 设置属性

Attributes/crossorigin

在所有当前引擎中均受支持。

Firefox8+Safari6+Chrome13+

Opera?Edge79+

Edge (旧版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

CORS 设置属性是一个枚举属性，具有以下关键字和状态：

关键字	状态	简要描述
`anonymous`	匿名	对元素的请求将其模式设置为 "`cors`"，并将其凭证模式设置为 "`same-origin`"。
(空字符串)	匿名	对元素的请求将其模式设置为 "`cors`"，并将其凭证模式设置为 "`same-origin`"。
`use-credentials`	使用凭证	对元素的请求将其模式设置为 "`cors`"，并将其凭证模式设置为 "`include`"。

该属性的 缺失值默认值 是无 CORS 状态，其 无效值默认值 是匿名状态。为了反射的目的，规范关键字为匿名状态是 anonymous 关键字。

大多数受 CORS 设置属性管辖的请求将通过创建潜在 CORS 请求算法进行。

对于更现代的功能，其中请求的模式始终为 "cors"，某些 CORS 设置属性已被重新定义为具有略有不同的含义，其中它们仅影响请求的凭证模式。为了进行此转换，我们定义 CORS 设置属性凭证模式为通过切换属性状态来确定：

无 CORS
匿名: "same-origin"
使用凭证: "include"

2.5.5 引荐政策属性

引荐政策属性是一个枚举属性。每个引荐政策，包括空字符串，都是该属性的关键字，对应一个同名的状态。

该属性的 缺失值默认值 和 无效值默认值 都是空字符串状态。

这些状态对各种 fetch 请求的处理模型的影响在本规范中有更详细的定义，包括 Fetch 和 Referrer Policy。[FETCH] [REFERRERPOLICY]

几个信号可以影响用于给定 fetch 请求的处理模型；引荐政策属性只是其中之一。通常，这些信号的处理顺序为：

首先，存在一个 noreferrer 链接类型；
然后是引荐政策属性的值；
然后是任何带有 meta 元素，并且 name 属性设置为 referrer。
最后是 `Referrer-Policy` HTTP 头部。

2.5.6 Nonce 属性

Global_attributes/nonce

所有当前引擎都支持。

Firefox31+Safari是Chrome是

Opera?Edge是

Edge (旧版)?Internet Explorer否

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

nonce 内容属性表示一个加密 nonce（“仅使用一次的数字”），可以由内容安全策略用来决定是否允许给定的 fetch 请求继续进行。其值为文本。[CSP]

具有 nonce 内容属性的元素确保加密 nonce 只暴露给脚本（而非通过 CSS 属性选择器等侧信道）。它通过从内容属性中获取值，将其移动到一个名为 [[CryptographicNonce]] 的内部插槽中，通过 HTMLOrSVGElement 接口混合来暴露给脚本，并将内容属性设置为空字符串。除非另有说明，插槽的值为空字符串。

element.nonce: 返回 element 的加密 nonce 的值。如果没有使用 setter，这将是原始的 nonce 内容属性中的值。
element.nonce = value: 更新 element 的加密 nonce 值。

HTMLElement/nonce

Firefox75+Safari🔰 10+Chrome61+

Opera?Edge79+

Edge (旧版)?Internet Explorer否

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

nonce IDL 属性必须在获取时返回该元素的 [[CryptographicNonce]] 的值；在设置时，将该元素的 [[CryptographicNonce]] 设置为给定的值。

注意，nonce IDL 属性的 setter 不会更新对应的内容属性。这以及当一个元素变为浏览上下文连接时将 nonce 内容属性设置为空字符串，是为了防止通过容易读取内容属性的机制（如选择器）泄露 nonce 值。了解更多信息请参见问题 #2369，该行为在此处被引入。

以下属性更改步骤适用于 nonce 内容属性：

如果 element 不包含 HTMLOrSVGElement，则返回。
如果 localName 不是 nonce 或 namespace 不为 null，则返回。
如果 value 为 null，则将 element 的 [[CryptographicNonce]] 设置为空字符串。
否则，将 element 的 [[CryptographicNonce]] 设置为 value。

每当一个元素包含 HTMLOrSVGElement 变为浏览上下文连接时，用户代理必须对 element 执行以下步骤：

令 CSP list 为 element 的 shadow-including root 的策略容器的 CSP list。
如果 CSP list 包含一个头部传递的内容安全策略，并且 element 具有一个 nonce 内容属性 attr，其值不是空字符串，则：
1. 令 nonce 为 element 的 [[CryptographicNonce]]。
2. 设置属性值为 element 使用 "nonce" 和空字符串。
3. 将 element 的 [[CryptographicNonce]] 设置为 nonce。
如果 element 的 [[CryptographicNonce]] 没有恢复，那么在此时它将是空字符串。

对于包含 HTMLOrSVGElement 的元素，克隆步骤必须将副本上的 [[CryptographicNonce]] 插槽设置为元素被克隆时插槽的值。

2.5.7 延迟加载属性

延迟加载

所有当前引擎都支持。

Firefox75+Safari15.4+Chrome77+

Opera?Edge79+

Edge（旧版）?Internet Explorer不支持

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

一个延迟加载属性是一个枚举属性，具有以下关键字和状态：

关键字	状态	简要描述
`lazy`	延迟	用于在满足某些条件之前推迟获取资源。
`eager`	立即	用于立即获取资源；默认状态。

该属性指示用户代理立即获取资源，或根据属性的当前状态，在满足与元素相关的一些条件之后再获取资源。

该属性的 缺失值默认值 和 无效值默认值 都是立即状态。

对于给定的元素 element，将延迟加载元素步骤如下：

如果脚本功能被禁用，则返回 false。

这是一个反跟踪措施，因为如果用户代理在脚本功能被禁用时仍支持延迟加载，那么一个网站可以通过在页面的标记中战略性地放置图像，以便服务器可以跟踪请求的图像数量及其时间，从而在整个会话中跟踪用户的大致滚动位置。
如果 element 的延迟加载属性处于延迟状态，则返回 true。
返回 false。

每个 img 和 iframe 元素都有相关的延迟加载恢复步骤，最初为 null。

对于那些将延迟加载的 img 和 iframe 元素，这些步骤会在延迟加载交叉观察器的回调中运行，或当其延迟加载属性设置为立即状态时。这会导致元素继续加载。

每个 文档 都有一个延迟加载交叉观察器，最初设置为 null，但可以设置为一个 IntersectionObserver 实例。

要开始交叉观察一个延迟加载元素 element，执行以下步骤：

将 doc 设为 element 的节点文档。
如果 doc 的延迟加载交叉观察器为 null，将其设置为一个新的 IntersectionObserver 实例，初始化如下：

意图是使用 IntersectionObserver 构造函数的原始值。然而，我们被迫使用本规范中的 JavaScript 暴露构造函数，直到 Intersection Observer 为规范中的使用提供低级钩子。请参见跟踪此问题的 bug w3c/IntersectionObserver#464。[INTERSECTIONOBSERVER]
- callback 是这些步骤，参数为 entries 和 observer：
  1. 对于 entries 中的每个 entry 使用一种不会触发开发者可修改数组访问器或迭代钩子的方法进行迭代：
    1. 将 resumptionSteps 设为 null。
    2. 如果 entry.isIntersecting 为 true，则将 resumptionSteps 设为 entry.target 的延迟加载恢复步骤。
    3. 如果 resumptionSteps 为 null，则返回。
    4. 停止交叉观察延迟加载元素对于 entry.target。
    5. 将 entry.target 的延迟加载恢复步骤设为 null。
    6. 调用 resumptionSteps。
    意图是使用 isIntersecting 和 target 的原始值。请参见 w3c/IntersectionObserver#464。 [INTERSECTIONOBSERVER]
- options 是一个 IntersectionObserverInit 字典，具有以下字典成员：«[ "scrollMargin" → 延迟加载滚动边距 ]»
  
  这允许在图像尚未 — 但即将 — 与视口交叉时进行获取。
  
  延迟加载滚动边距建议意味着值的动态变化，但 IntersectionObserver API 不支持更改滚动边距。参见问题 w3c/IntersectionObserver#428。
调用 doc 的延迟加载交叉观察器的 observe 方法，以 element 作为参数。

意图是使用 observe 方法的原始值。参见 w3c/IntersectionObserver#464。 [INTERSECTIONOBSERVER]

要停止交叉观察延迟加载元素 element，执行以下步骤：

将 doc 设为 element 的节点文档。
断言：doc 的延迟加载交叉观察器不为 null。
调用 doc 的延迟加载交叉观察器的 unobserve 方法，以 element 作为参数。

意图是使用 unobserve 方法的原始值。参见 w3c/IntersectionObserver#464。 [INTERSECTIONOBSERVER]

延迟加载滚动边距是一个实现定义的值，但有以下建议供参考：

设置一个最小值，以便在正常使用模式下，大多数情况下，资源会在它们进入视口之前加载。
典型的滚动速度：对于具有较快典型滚动速度的设备，增加该值。
当前滚动速度或惯性：用户代理可以尝试预测滚动将在哪个位置停止，并相应调整该值。
网络质量：对于慢速或高延迟连接，增加该值。
用户偏好可能会影响该值。

为了保护隐私，延迟加载滚动边距不应泄露额外的信息。例如，当前设备的典型滚动速度可能不够精确，以免引入新的指纹识别向量。

2.5.8 阻塞属性

阻塞属性明确表示在获取外部资源时应阻止某些操作。这些操作可以被阻止的由可能的阻塞令牌表示，这些令牌以字符串形式列于下表：

可能的阻塞令牌	描述
"`render`"	该元素是可能阻塞渲染的。

将来可能会有更多的可能的阻塞令牌。

一个阻塞属性必须具有一个值，该值是一个唯一的以空格分隔的令牌无序集合，每个令牌都是可能的阻塞令牌。一个支持的令牌是可能的阻塞令牌。任何元素最多只能有一个阻塞属性。

阻塞令牌集是针对一个元素 el 的以下步骤的结果：

让 value 为 el 的阻塞属性的值，如果不存在这样的属性，则为空字符串。
将 value 转换为 ASCII 小写。
让 rawTokens 为按 ASCII 空白字符分割 value 的结果。
返回一个包含 rawTokens 中所有可能的阻塞令牌的集合。

一个元素如果其阻塞令牌集包含 "render"，或者如果它是隐式潜在渲染阻塞的，这将在各个元素中定义。默认情况下，元素不是隐式潜在渲染阻塞的。

2.5.9 获取优先级属性

获取优先级属性是一个枚举属性，具有以下关键字和状态：

关键字	状态	简要描述
`high`	high	表示相对于其他具有相同目的地的资源，这是一个高优先级的获取操作。
`low`	low	表示相对于其他具有相同目的地的资源，这是一个低优先级的获取操作。
`auto`	auto	表示自动确定相对于其他具有相同目的地的获取优先级。

该属性的 缺失值默认值 和 无效值默认值 都是 auto 状态。

2.6 常见 DOM 接口

2.6.1 在 IDL 属性中反射内容属性

反射的构建块如下：

反射目标是一个元素或 ElementInternals 对象。通常从上下文中可以清楚地确定，并且通常与反射 IDL 属性的接口相同。当反射目标是 ElementInternals 对象时，它总是与该接口相同。
反射 IDL 属性是一个属性接口成员。
反射内容属性名称是一个字符串。当反射目标是一个元素时，它表示一个内容属性的本地名称，其命名空间为 null。当反射目标是一个 ElementInternals 对象时，它表示反射目标的目标元素的内部内容属性映射的一个键。

反射 IDL 属性可以被定义为反射反射内容属性名称的反射目标。通常，这意味着 IDL 属性的 getter 返回内容属性的当前值，setter 则将内容属性的值更改为给定值。

如果反射目标是一个元素，则反射 IDL 属性还可以声明支持 ElementInternals。这意味着 ElementInternals 接口也有一个反射 IDL 属性，具有相同的标识符，并且该反射 IDL 属性反射相同的反射内容属性名称。

该 fooBar IDL 属性必须反射 foobar 内容属性，并且支持 ElementInternals。

反射目标具有以下关联算法：

获取元素: 不带参数；返回一个元素。
获取内容属性: 不带参数；返回 null 或一个字符串。
设置内容属性: 接受一个字符串 value；不返回任何值。
删除内容属性: 不带参数；不返回任何值。

对于一个反射目标，如果它是一个元素 element，这些算法定义如下：

获取元素

返回 element。

获取内容属性

令 attribute 为运行按命名空间和本地名称获取属性的结果，传入 null、反射内容属性名称和 element。
如果 attribute 为 null，则返回 null。
返回 attribute 的值。

设置内容属性使用字符串 value

设置属性值，传入 element、反射内容属性名称和 value。

删除内容属性

按命名空间和本地名称删除属性，传入 null、反射内容属性名称和 element。

对于一个反射目标，如果它是一个 ElementInternals 对象 elementInternals，这些算法定义如下：

获取元素

返回 elementInternals 的目标元素。

获取内容属性

如果 elementInternals 的目标元素的内部内容属性映射[反射内容属性名称] 不存在，则返回 null。
返回 elementInternals 的目标元素的内部内容属性映射[反射内容属性名称]。

设置内容属性使用字符串 value

设置 elementInternals 的目标元素的内部内容属性映射[反射内容属性名称] 为 value。

删除内容属性

移除 elementInternals 的目标元素的内部内容属性映射[反射内容属性名称]。

这会导致 ElementInternals 对象出现一些冗余的数据结构，因为其目标元素的内部内容属性映射不能直接操作，因此反射只发生在单向。这种方法尽管如此，仍被选择以减少定义在反射目标之间共享的 IDL 属性的错误，并从通用 API 语义中受益。

类型为 DOMString 或 DOMString? 的 IDL 属性如果反射枚举内容属性，则可以限制为仅已知值。根据下面的处理模型，这些将导致这些 IDL 属性的 getter 仅返回这些枚举属性的关键字，或者空字符串或 null。

如果一个反射的 IDL 属性的类型为 DOMString：

getter 的步骤是：
1. 让 element 成为运行 this 的获取元素的结果。
2. 让 contentAttributeValue 成为运行 this 的获取内容属性的结果。
3. 让 attributeDefinition 成为 element 的内容属性的属性定义，该属性的命名空间为 null，局部名称为反射内容属性名称。
4. 如果 attributeDefinition 表示它是一个枚举属性并且反射的 IDL 属性被定义为仅限于已知值：
  1. 如果 contentAttributeValue 不对应于 attributeDefinition 的任何状态（例如，它为 null 并且没有 缺失值默认值），或者如果它在 attributeDefinition 的状态中没有关联的关键字值，则返回空字符串。
  2. 返回 attributeDefinition 对应于 contentAttributeValue 的状态的规范关键字。
5. 如果 contentAttributeValue 为 null，则返回空字符串。
6. 返回 contentAttributeValue。
setter 的步骤是运行 this 的设置内容属性以给定的值。

如果一个反射的 IDL 属性的类型是 DOMString?：

getter 的步骤是：
1. 让 element 成为运行 this 的获取元素的结果。
2. 让 contentAttributeValue 成为运行 this 的获取内容属性的结果。
3. 让 attributeDefinition 成为 element 的内容属性的属性定义，该属性的命名空间为 null，局部名称为反射内容属性名称。
4. 断言: attributeDefinition 表示它是一个枚举属性。
5. 断言: 反射的 IDL 属性被限制为仅已知值。
6. 断言: contentAttributeValue 对应于 attributeDefinition 的一个状态。
7. 如果 contentAttributeValue 对应于 attributeDefinition 的一个状态，但没有关联的关键字值，则返回 null。
8. 返回 attributeDefinition 对应于 contentAttributeValue 的状态的规范关键字。
setter 的步骤是：
1. 如果给定的值为 null，则运行 this 的删除内容属性。
2. 否则，运行 this 的设置内容属性，使用给定的值。

如果一个反射的 IDL 属性的类型是 USVString：

getter 的步骤是：
1. 让 element 成为运行 this 的获取元素的结果。
2. 让 contentAttributeValue 成为运行 this 的获取内容属性的结果。
3. 让 attributeDefinition 成为 element 的内容属性的属性定义，该属性的命名空间为 null，局部名称为反射内容属性名称。
4. 如果 attributeDefinition 表示它包含一个 URL：
  1. 如果 contentAttributeValue 为 null，则返回空字符串。
  2. 让 urlString 成为对 contentAttributeValue 进行编码-解析和序列化 URL 的结果，基于 element 的节点文档。
  3. 如果 urlString 不是失败，则返回 urlString。
5. 返回 contentAttributeValue，转换为标量值字符串。
setter 的步骤是运行 this 的设置内容属性，使用给定的值。

如果一个反射的 IDL 属性的类型是 boolean：

getter 的步骤是：
1. 让 contentAttributeValue 成为运行 this 的获取内容属性的结果。
2. 如果 contentAttributeValue 为 null，则返回 false。
3. 返回 true。
setter 的步骤是：
1. 如果给定的值为 false，则运行 this 的删除内容属性。
2. 如果给定的值为 true，则运行 this 的设置内容属性，使用空字符串。

这对应于布尔内容属性的规则。

If a 反射的 IDL 属性的类型是 long，可选地限制为非负数并且可选地具有默认值 defaultValue：

getter 的步骤是：
1. 让 contentAttributeValue 成为运行 this 的获取内容属性的结果。
2. 如果 contentAttributeValue 不为 null：
  1. 让 parsedValue 成为整数解析 contentAttributeValue 的结果，如果反射的 IDL 属性不是限制为非负数；否则是非负整数解析 contentAttributeValue 的结果。
  2. 如果 parsedValue 不是错误且在 long 范围内，则返回 parsedValue。
3. 如果反射的 IDL 属性具有默认值，则返回 defaultValue。
4. 如果反射的 IDL 属性是限制为非负数，则返回 −1。
5. 返回 0。
setter 的步骤是：
1. 如果反射的 IDL 属性是限制为非负数且给定的值为负，则抛出一个 "IndexSizeError" DOMException。
2. 运行 this 的设置内容属性，将给定的值转换为表示该数字的最短可能字符串有效整数。

如果一个反射的 IDL 属性的类型是 unsigned long，可选地限制为仅正数、限制为仅正数（带回退），或夹紧到范围 [clampedMin，clampedMax]，并且可选地具有默认值 defaultValue：

getter 的步骤是：
1. 让 contentAttributeValue 成为运行 this 的获取内容属性的结果。
2. 让 minimum 为 0。
3. 如果反射的 IDL 属性是仅限正数或仅限正数（带回退），则将 minimum 设置为 1。
4. 如果反射的 IDL 属性是夹紧到范围，则将 minimum 设置为 clampedMin。
5. 让 maximum 为 2147483647，如果反射的 IDL 属性不是夹紧到范围；否则为 clampedMax。
6. 如果 contentAttributeValue 不为 null：
  1. 让 parsedValue 成为非负整数解析 contentAttributeValue 的结果。
  2. 如果 parsedValue 不是错误且在范围 minimum 到 maximum（包含）内，则返回 parsedValue。
  3. 如果 parsedValue 不是错误且反射的 IDL 属性是夹紧到范围：
    1. 如果 parsedValue 小于 minimum，则返回 minimum。
    2. 返回 maximum。
7. 如果反射的 IDL 属性具有默认值，则返回 defaultValue。
8. 返回 minimum。
setter 的步骤是：
1. 如果反射的 IDL 属性是仅限正数且给定值为 0，则抛出一个 "IndexSizeError" DOMException。
2. 让 minimum 为 0。
3. 如果反射的 IDL 属性是仅限正数或仅限正数（带回退），则将 minimum 设置为 1。
4. 让 newValue 为 minimum。
5. 如果反射的 IDL 属性具有默认值，则将 newValue 设置为 defaultValue。
6. 如果给定值在范围 minimum 到 2147483647（包含）内，则将 newValue 设置为该值。
7. 运行 this 的设置内容属性，用 newValue 转换为表示该数字的最短可能字符串作为有效非负整数。
夹紧到范围对 setter 步骤没有影响。

如果一个反射的 IDL 属性的类型是 double，可选地限制为仅正数，并且可选地具有默认值 defaultValue：

getter 的步骤是：
1. 让 contentAttributeValue 成为运行 this 的获取内容属性的结果。
2. 如果 contentAttributeValue 不为 null：
  1. 让 parsedValue 成为浮点数解析 contentAttributeValue 的结果。
  2. 如果 parsedValue 不是错误且大于 0，则返回 parsedValue。
  3. 如果 parsedValue 不是错误且反射的 IDL 属性不是仅限正数，则返回 parsedValue。
3. 如果反射的 IDL 属性具有默认值，则返回 defaultValue。
4. 返回 0。
setter 的步骤是：
1. 如果反射的 IDL 属性是仅限正数且给定值不大于 0，则返回。
2. 运行 this 的设置内容属性，用给定值，转换为最佳浮点数表示。

值 Infinity 和 Not-a-Number (NaN) 在设置时会抛出异常，如 Web IDL 中定义。[WEBIDL]

如果一个反射的 IDL 属性的类型是 DOMTokenList，那么它的 getter 步骤是返回一个 DOMTokenList 对象，其关联的元素是 this，关联属性的本地名称是反射的内容属性名称。规范作者不能使用支持 ElementInternals 来处理此类型的 IDL 属性。

如果一个反射的 IDL 属性的类型是 T?，其中 T 是 Element 或从 Element 继承的接口，则 attr 是反射的内容属性名称：

其反射目标有一个显式设置的 attr-element，这是一个对元素的弱引用或 null。初始值为 null。
其反射目标 reflectedTarget 有一个获取 attr-关联元素算法，执行以下步骤：
1. 让 element 成为运行 reflectedTarget 的获取元素的结果。
2. 让 contentAttributeValue 成为运行 reflectedTarget 的获取内容属性的结果。
3. 如果 reflectedTarget 的显式设置的 attr-element 不为 null：
  1. 如果reflectedTarget的显式设置的attr-元素是任何element的后代，并且在element的包括影子的祖先中的任何一个，则返回reflectedTarget的显式设置的attr-元素。
  2. 返回 null。
4. 否则，如果 contentAttributeValue 不为 null，则返回第一个符合以下标准的元素 candidate，按树序排序：
  - candidate 的根节点与 element 的根节点相同；
  - candidate 的 ID 是 contentAttributeValue；以及
  - candidate 实现 T。
  如果没有这样的元素，则返回 null。
5. 返回 null。
getter 的步骤是返回运行 this 的获取 attr-关联元素的结果。
setter 的步骤是：
1. 如果给定值为 null，则：
  1. 将 this 的显式设置的 attr-element 设置为 null。
  2. 运行 this 的删除内容属性。
  3. 返回。
2. 运行 this 的设置内容属性，值为空字符串。
3. 将 this 的显式设置的 attr-element 设置为对给定值的弱引用。
仅对于元素反射目标：以下属性更改步骤，给定 element、localName、oldValue、value 和 namespace，用于同步内容属性和 IDL 属性：
1. 如果 localName 不是 attr 或 namespace 不为 null，则返回。
2. 将 element 的显式设置的 attr-element 设置为 null。

反射的 IDL 属性这种类型的属性强烈建议其标识符以 "Element" 结尾，以保持一致性。

如果一个反射的 IDL 属性的类型是 FrozenArray<T>?，其中 T 是 Element 或一个继承自 Element 的接口，那么对于 attr 作为反射的内容属性名称：

其反射目标有一个显式设置的 attr-元素，它是对元素的弱引用的列表或 null。最初为 null。
其反射目标有一个缓存的 attr-关联元素，它是一个元素的列表。最初为 « »。
其反射目标有一个缓存的 attr-关联元素对象，它是一个 FrozenArray<T>?。最初为 null。
其反射目标 reflectedTarget 有一个获取 attr-关联元素算法，执行以下步骤：
1. 让 elements 成为一个空的列表。
2. 让 element 成为运行 reflectedTarget 的获取元素的结果。
3. 如果 reflectedTarget 的显式设置的 attr-元素不为 null：
  1. 对于 attrElement 在 reflectedTarget 的显式设置的 attr-元素中：
    1. 如果 attrElement 不是任何 element 的后代，则继续。
    2. 将 attrElement 添加到 elements。
4. 否则：
  1. 让 contentAttributeValue 成为运行 reflectedTarget 的获取内容属性的结果。
  2. 如果 contentAttributeValue 为 null，则返回 null。
  3. 让 tokens 为 contentAttributeValue，按 ASCII 空白拆分。
  4. 对于 id 的 tokens：
    1. 让 candidate 成为树顺序中第一个满足以下条件的元素：
      - candidate 的根与 element 的根相同；
      - candidate 的 ID 为 id；并且
      - candidate 实现 T。
      如果没有这样的元素，则继续。
    2. 将 candidate 添加到 elements。
5. 返回 elements。
getter 步骤是：
1. 让 elements 成为运行 this 的获取 attr-关联元素的结果。
2. 如果 elements 的内容等于 this 的缓存的 attr-关联元素的内容，则返回 this 的缓存的 attr-关联元素对象。
3. 让 elementsAsFrozenArray 为 elements，转换为 FrozenArray<T>?。
4. 将 this 的缓存的 attr-关联元素设置为 elements。
5. 将 this 的缓存的 attr-关联元素对象设置为 elementsAsFrozenArray。
6. 返回 elementsAsFrozenArray。
这个额外的缓存层是必要的，以保持不变量 element.reflectedElements === element.reflectedElements。
setter 步骤是：
1. 如果给定的值为 null：
  1. 将 this 的显式设置的 attr-元素设置为 null。
  2. 运行 this 的删除内容属性。
  3. 返回。
2. 运行 this 的设置内容属性，使用空字符串。
3. 让 elements 成为一个空的列表。
4. 对于给定值中的每个 element：
  1. 将对 element 的弱引用添加到 elements。
5. 将 this 的显式设置的 attr-元素设置为 elements。
仅对于元素反射目标：以下属性更改步骤，给定 element、localName、oldValue、value 和 namespace，用于在内容属性和 IDL 属性之间同步：
1. 如果 localName 不是 attr 或 namespace 不为 null，则返回。
2. 将 element 的显式设置的 attr-元素设置为 null。

反射的 IDL 属性强烈建议其标识符以 "Elements" 结尾，以保持一致性。

2.6.2 在规范中使用 reflect

反射主要是通过给开发者提供通过反射的 IDL 属性类型访问内容属性，以改善开发者的使用体验。网页平台的最终事实来源是内容属性本身。也就是说，规范作者不能使用反射的 IDL 属性的 getter 或 setter 步骤，而应使用内容属性的存在和值。（或其上的抽象，如枚举属性的状态。）

两个重要的例外是反射的 IDL 属性其类型是以下之一：

T?，其中 T 可以是 Element 或从 Element 继承的接口
FrozenArray<T>?，其中 T 可以是 Element 或从 Element 继承的接口

对于这些情况，规范作者必须使用反射目标的获取 attr-关联元素和获取 attr-关联元素的步骤。内容属性的存在和值不应使用，因为它们不能完全与反射的 IDL 属性同步。

反射目标的显式设置的 attr-元素、显式设置的 attr-元素、缓存的 attr-关联元素和缓存的 attr-关联元素对象应被视为内部实现细节，而不应基于它们进行构建。

2.6.3 集合

HTMLFormControlsCollection 和 HTMLOptionsCollection 接口是从 HTMLCollection 接口派生的集合。HTMLAllCollection 接口是一个集合，但不是这样派生的。

2.6.3.1 `HTMLAllCollection` 接口

HTMLAllCollection 接口用于遗留的 document.all 属性。它的操作类似于 HTMLCollection；主要区别在于它允许各种不同的（滥用）方法返回一些内容，并且它可以作为函数调用，而不是属性访问。

所有 HTMLAllCollection 对象都根植于 Document，并具有匹配所有元素的过滤器，因此由集合表示的元素 HTMLAllCollection 对象由根 Document 的所有后代元素组成。

实现 HTMLAllCollection 接口的对象是遗留平台对象，具有附加的 [[Call]] 内部方法，如下面部分所述。它们还具有 [[IsHTMLDDA]] 内部槽。

实现 HTMLAllCollection 接口的对象有几个不寻常的行为，因为它们具有 [[IsHTMLDDA]] 内部槽：

JavaScript 中的 ToBoolean 抽象操作在给定实现 HTMLAllCollection 接口的对象时返回 false。
当给定实现 HTMLAllCollection 接口的对象时，IsLooselyEqual 抽象操作与 undefined 和 null 值比较时返回 true。 (使用 IsStrictlyEqual 抽象操作的比较以及与字符串或对象等其他值的 IsLooselyEqual 比较不受影响。)
在 JavaScript 中对实现 HTMLAllCollection 接口的对象应用 typeof 运算符时，返回字符串 "undefined"。

这些特殊行为是为了兼容两类遗留内容：一类是使用 document.all 存在来检测遗留用户代理的内容，另一类仅支持这些遗留用户代理并在不测试其存在的情况下使用 document.all 对象的内容。[JAVASCRIPT]

[Exposed=Window,
 LegacyUnenumerableNamedProperties]
interface HTMLAllCollection {
  readonly attribute unsigned long length;
  getter Element (unsigned long index);
  getter (HTMLCollection or Element)? namedItem(DOMString name);
  (HTMLCollection or Element)? item(optional DOMString nameOrIndex);

  // Note: HTMLAllCollection objects have a custom [[Call]] internal method and an [[IsHTMLDDA]] internal slot.
};

对象的支持的属性索引定义与 HTMLCollection 对象相同。

支持的属性名称由所有元素的 id 属性的非空值组成，这些元素由集合表示，以及所有 “全部”命名元素的 name 属性的非空值，这些元素由集合表示，按树顺序，忽略后续的重复项，如果一个元素同时提供 id 和 name 且它们不同且都不是早期条目的重复项，则 id 在 name 之前。

length 的 getter 步骤是返回由集合表示的节点数。

索引属性 getter 必须返回通过给定传递的索引获取“全部”索引的元素的结果 this。

namedItem(name) 方法步骤是返回获取“全部”命名的元素的结果 this 给定 name。

item(nameOrIndex) 方法步骤是：

如果未提供 nameOrIndex，则返回 null。
返回获取“全部”索引或命名的元素的结果 this 给定 nameOrIndex。

以下元素是 “全部”命名元素：a，button，embed，form，frame，frameset，iframe，img，input，map，meta，object，select，以及textarea

从 HTMLAllCollection collection 中获取“全部”索引的元素给定索引 index，返回 collection 中的第 index 个元素，如果没有这样的 index 个元素，则返回 null。

从 HTMLAllCollection collection 中获取“全部”命名的元素给定名称 name，执行以下步骤：

如果 name 是空字符串，则返回 null。
让 subCollection 成为一个 HTMLCollection 对象，它以与 collection 相同的 Document 为根，其过滤器仅匹配以下任一元素：
- “全部”命名元素，其 name 属性等于 name，或者，
- 其 ID 等于 name 的元素。
如果 subCollection 中只有一个元素，则返回该元素。
否则，如果 subCollection 为空，则返回 null。
否则，返回 subCollection。

从 HTMLAllCollection collection 中获取“全部”索引或命名的元素给定 nameOrIndex：

如果 nameOrIndex，转换为 JavaScript 字符串值，是一个数组索引属性名称，则返回通过给定 nameOrIndex 表示的数字从 collection 获取“全部”索引的元素的结果。
返回通过给定 nameOrIndex 从 collection 获取“all”命名的元素的结果。

2.6.3.1.1 [[Call]] (`thisArgument`, `argumentsList`)

如果 argumentsList 的大小为零，或者 argumentsList[0] 是 undefined，则返回 null。
将 argumentsList[0] 转换为 DOMString 的结果赋值给 nameOrIndex。
将从此 HTMLAllCollection 中获取“全部”索引或命名的元素的结果赋值给 result，给定 nameOrIndex。
返回将 result 转换为 ECMAScript 值的结果。

忽略 thisArgument，因此诸如 Function.prototype.call.call(document.all, null, "x") 的代码仍将搜索元素。（document.all.call 不存在，因为 document.all 不继承自 Function.prototype。）

2.6.3.2 `HTMLFormControlsCollection` 接口

HTMLFormControlsCollection 接口用于集合中 form 元素中的列出元素。

HTMLFormControlsCollection

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet ExplorerNo

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

RadioNodeList

Support in all current engines.

Firefox33+Safari7+Chrome21+

Opera?Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

[Exposed=Window]
interface HTMLFormControlsCollection : HTMLCollection {
  // inherits length and item()
  getter (RadioNodeList or Element)? namedItem(DOMString name); // shadows inherited namedItem()
};

[Exposed=Window]
interface RadioNodeList : NodeList {
  attribute DOMString value;
};

collection.length

返回 collection 中的元素数量。

element = collection.item(index)

element = collection[index]

返回 collection 中索引为 index 的项。项按树顺序排序。

element = collection.namedItem(name) HTMLFormControlsCollection/namedItem Support in all current engines. Firefox33+Safari4+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet ExplorerNo Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

radioNodeList = collection.namedItem(name)

element = collection[name]

radioNodeList = collection[name]

从 collection 返回 ID 或 name 为 name 的项。

如果有多个匹配的项，则返回包含所有这些元素的 RadioNodeList 对象。

radioNodeList.value

返回 radioNodeList 所代表的第一个选中的单选按钮的值。

radioNodeList.value = value

选择第一个值为 value 的 radioNodeList 所代表的单选按钮。

The 支持的属性名称由所有非空值组成 id 和 name 属性的所有元素由集合表示，按树顺序，忽略后续的重复项，其中id 的元素优先于其name 如果它们同时贡献，它们彼此不同，并且都不是先前条目的重复项。

namedItem(name) 方法必须按照以下算法操作：

如果 name 为空字符串，则返回 null 并停止算法。
如果在调用方法时，集合中有且仅有一个节点具有 id 属性或 name 属性等于 name，则返回该节点并停止算法。
否则，如果集合中没有任何节点具有 id 属性或 name 属性等于 name，则返回 null 并停止算法。
否则，创建一个新的 RadioNodeList 对象，表示动态查看 HTMLFormControlsCollection 对象的视图，进一步过滤，使得 RadioNodeList 对象中的唯一节点是那些具有 id 属性或 name 属性等于 name 的节点。RadioNodeList 对象中的节点必须按树顺序排序。
返回该 RadioNodeList 对象。

RadioNodeList 接口的成员从 NodeList 接口继承，必须像在 NodeList 对象上一样表现。

RadioNodeList/value

Support in all current engines.

Firefox33+Safari7+Chrome21+

Opera?Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

value IDL 属性在 RadioNodeList 对象上，获取时必须返回通过运行以下步骤返回的值：

让 element 成为由 RadioNodeList 对象表示的第一个元素，在树顺序中是一个 input 元素，其 type 属性处于单选按钮状态并且其已选中状态为真。否则，让其为 null。
如果 element 为 null，则返回空字符串。
如果 element 是一个没有 value 属性的元素，则返回字符串 "on"。
否则，返回 element 的 value 属性的值。

在设置时，value IDL 属性必须运行以下步骤：

如果新值为字符串 "on"：让 element 成为由 RadioNodeList 对象表示的第一个元素，在树顺序中是一个 input 元素，其 type 属性处于单选按钮状态并且其 value 内容属性不存在，或存在且等于新值，如果有。如果不存在这样的元素，则让 element 为 null。
否则：让 element 成为由 RadioNodeList 对象表示的第一个元素，在树顺序中是一个 input 元素，其 type 属性处于单选按钮状态并且其 value 内容属性存在并等于新值，如果有。如果不存在这样的元素，则让 element 为 null。
如果 element 不为 null，则将其已选中状态设置为真。

2.6.3.3 `HTMLOptionsCollection` 接口

HTMLOptionsCollection

支持所有当前引擎。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer6+

Firefox Android?Safari iOS1+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

HTMLOptionsCollection 接口用于集合的 option 元素。它总是根植于一个 select 元素，并具有操作该元素后代的属性和方法。

[Exposed=Window]
interface HTMLOptionsCollection : HTMLCollection {
  // inherits item(), namedItem()
  [CEReactions] attribute unsigned long length; // shadows inherited length
  [CEReactions] setter undefined (unsigned long index, HTMLOptionElement? option);
  [CEReactions] undefined add((HTMLOptionElement or HTMLOptGroupElement) element, optional (HTMLElement or long)? before = null);
  [CEReactions] undefined remove(long index);
  attribute long selectedIndex;
};

collection.length

返回 collection 中的元素数量。

collection.length = value

当设置为小于现有长度的值时，截断 collection 对应容器中的 option 元素数量。

当设置为大于现有长度的值时，如果该值小于或等于100000，则向 collection 对应容器中添加新的空白 option 元素。

element = collection.item(index)

element = collection[index]

返回 collection 中索引为 index 的项。项目按树顺序排列。

collection[index] = element

当 index 大于 collection 中的项目数量时，在相应容器中添加新的空白 option 元素。

当设置为 null 时，从 collection 中移除索引为 index 的项。

当设置为 option 元素时，在 collection 中的索引为 index 的位置添加或替换该元素。

element = collection.namedItem(name)

element = collection[name]

返回 collection 中具有 ID 或 name 为 name 的项。

如果有多个匹配项，则返回第一个匹配项。

collection.add(element[, before])

在 before 指定的节点前插入 element。

before 参数可以是一个数字，在这种情况下，element 插入到该编号的项之前；也可以是 collection 中的一个元素，在这种情况下，element 插入到该元素之前。

如果 before 被省略、为空或为超出范围的数字，则 element 将添加到列表末尾。

如果 element 是要插入的元素的祖先，则抛出 "HierarchyRequestError" DOMException。

collection.remove(index)

从 collection 中移除索引为 index 的项。

collection.selectedIndex

返回第一个被选中项的索引（如果有），否则返回 -1。

collection.selectedIndex = index

将选项更改为 collection 中索引为 index 的 option 元素。

对象的支持的属性索引如 HTMLCollection 对象中定义。

length 的获取步骤是返回 collection 表示的节点数。

length 的设置步骤为：

令 current 为 collection 表示的节点数。
如果给定值大于 current，则：
1. 如果给定的值大于100,000，则返回。
2. 设 n 为 value − current。
3. 将 n 个没有属性和子节点的新 option 元素追加到 select 元素上，其中 this 是其根节点。
如果给定值小于 current，则：
1. 令 n 为 current - value。
2. 从其父节点中移除集合中的最后 n 个节点。

设置 length 永远不会移除或添加任何 optgroup 元素，也不会向现有的 optgroup 元素中添加新的子节点（尽管它可以从中移除子节点）。

当用户代理要设置新索引属性的值或设置现有索引属性的值时，必须运行以下算法：

如果 value 为 null，则调用 remove 方法，将 index 作为参数，并返回。
令 length 为 collection 表示的节点数。
令 n 为 index 减去 length。
如果 n 大于零，则附加一个由 n-1 个新的没有属性和子节点的 option 元素组成的 DocumentFragment 到 select 元素上。
如果 n 大于或等于零，则附加 value 到 select 元素。否则，替换集合中的第 index 个元素为 value。

add(element, before) 方法必须按以下算法操作：

如果 element 是 select 元素的祖先，则抛出 "HierarchyRequestError" DOMException。
如果 before 是一个元素，但该元素不是 select 元素的后代，则抛出 "NotFoundError" DOMException。
如果 element 和 before 是同一个元素，则返回。
如果 before 是一个节点，则令 reference 为该节点。否则，如果 before 是一个整数，并且集合中存在第 before 个节点，则令 reference 为该节点。否则，令 reference 为 null。
如果 reference 不为 null，则令 parent 为 reference 的父节点。否则，令 parent 为 select 元素。
预插入 element 到 parent 节点中，在 reference 之前。

remove(index) 方法必须按以下算法操作：

如果 collection 表示的节点数为零，则返回。
如果 index 不是大于等于 0 且小于 collection 表示的节点数的数字，则返回。
令 element 为集合中的第 index 个元素。
从其父节点中移除 element。

selectedIndex IDL 属性必须像 select 元素上的同名属性一样操作，该 HTMLOptionsCollection 根植于该元素上。

2.6.4 `DOMStringList` 接口

DOMStringList

所有当前引擎支持。

Firefox1+Safari5.1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+

DOMStringList 接口是一种不时髦的复古方式，用于表示字符串列表。

[Exposed=(Window,Worker)]
interface DOMStringList {
  readonly attribute unsigned long length;
  getter DOMString? item(unsigned long index);
  boolean contains(DOMString string);
};

新 API 必须使用 sequence<DOMString> 或等效的方式，而不是 DOMStringList。

strings.length: 返回 strings 中的字符串数量。
strings[index]
strings.item(index): 返回 strings 中索引为 index 的字符串。
strings.contains(string): 如果 strings 包含 string，则返回 true，否则返回 false。

每个 DOMStringList 对象都有一个关联的列表。

DOMStringList 接口支持索引属性。支持的属性索引是此的关联列表的索引。

DOMStringList/length

所有当前引擎支持。

Firefox1+Safari5.1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+

length 获取器步骤是返回此关联列表的大小。

DOMStringList/item

所有当前引擎支持。

Firefox1+Safari5.1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+

item(index) 方法步骤是返回此关联列表中的第 index 项，或者如果 index 加一大于此关联列表的大小，则返回 null。

DOMStringList/contains

所有当前引擎支持。

Firefox1.5+Safari5.1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+

contains(string) 方法步骤是如果此关联列表包含 string，则返回 true，否则返回 false。

2.7 安全传递结构化数据

为了支持在不同realm边界之间传递JavaScript对象，包括平台对象，本规范定义了以下用于序列化和反序列化对象的基础设施，包括在某些情况下传输底层数据而不是复制数据。总体而言，这种序列化/反序列化过程被称为“结构化克隆”，尽管大多数API执行的是单独的序列化和反序列化步骤。（显著的例外是structuredClone()方法。）

本节使用了JavaScript规范中的术语和排版约定。[JAVASCRIPT]

2.7.1 可序列化对象

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+SafariNoChrome77+

Opera?Edge79+

Edge (旧版)?Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

可序列化对象支持以独立于任何特定realm的方式进行序列化和稍后反序列化。这使得它们可以存储在磁盘上并稍后恢复，或跨代理甚至代理集群边界进行克隆。

并非所有对象都是可序列化对象，而且并非所有可序列化对象的所有方面在序列化时都会被保留。

平台对象可以是可序列化对象，如果它们的主要接口带有[Serializable]IDL扩展属性。这些接口还必须定义以下算法：

序列化步骤，接受一个平台对象value，一个记录serialized，以及一个布尔值forStorage

一组步骤，将value中的数据序列化为serialized的字段。序列化到serialized中的结果数据必须独立于任何realm。

如果序列化不可能，这些步骤可能会抛出异常。

这些步骤可能执行子序列化以序列化嵌套的数据结构。它们不应直接调用StructuredSerialize，因为这样做会遗漏重要的memory参数。

如果forStorage参数与算法无关，应在引入这些步骤时省略提及。

反序列化步骤，接受一个记录serialized，一个平台对象value，以及一个realmtargetRealm

一组步骤，将serialized中的数据反序列化，适当设置value。value将是所涉及的平台对象类型的新创建实例，其内部数据未设置；设置这些数据是这些步骤的任务。

如果反序列化不可能，这些步骤可能会抛出异常。

这些步骤可能执行子反序列化以反序列化嵌套的数据结构。它们不应直接调用StructuredDeserialize，因为这样做会遗漏重要的targetRealm和memory参数。

定义单个平台对象的数据在这些步骤中如何被序列化和反序列化是个体平台对象定义的责任。通常这些步骤是非常对称的。

[Serializable]扩展属性不得带有任何参数，并且只能出现在接口上。在一个接口上不得出现超过一次。

对于给定的平台对象，只有对象的主要接口在（反）序列化过程中被考虑。因此，如果在定义接口时涉及继承，每个继承链中的[Serializable]注释接口需要定义独立的序列化步骤和反序列化步骤，包括考虑任何可能来自继承接口的重要数据。

假设我们定义了一个平台对象Person，它关联了两部分数据：

一个名称值，它是一个字符串；和
一个最好朋友值，它可以是另一个Person实例或null。

然后我们可以通过将Person接口注释为[Serializable]扩展属性，并定义以下配套算法，使Person实例成为可序列化对象：

序列化步骤

设置serialized.[[Name]]为value的关联名称值。
让serializedBestFriend成为value的关联最好朋友值的子序列化。
设置serialized.[[BestFriend]]为serializedBestFriend。

反序列化步骤

设置value的关联名称值为serialized.[[Name]]。
让deserializedBestFriend成为serialized.[[BestFriend]]的子反序列化。
设置value的关联最好朋友值为deserializedBestFriend。

JavaScript规范中定义的对象由StructuredSerialize抽象操作直接处理。

最初，本规范定义了“可克隆对象”的概念，可以从一个realm克隆到另一个realm。然而，为了更好地指定某些更复杂情况的行为，模型被更新为使序列化和反序列化显式化。

2.7.2 可转移对象

可转移对象支持在代理之间转移。转移实际上是重新创建对象，同时共享对底层数据的引用，然后分离被转移的对象。这对于转移昂贵资源的所有权非常有用。并非所有对象都是可转移对象，而且并非所有可转移对象的所有方面在转移时都会被保留。

转移是不可逆且非幂等的操作。一旦对象被转移，它不能再被转移，甚至不能再被使用。

平台对象可以是可转移对象，如果它们的主要接口带有[Transferable]IDL扩展属性。这些接口还必须定义以下算法：

转移步骤，接受一个平台对象value，以及一个记录dataHolder

一组步骤，将value中的数据转移到dataHolder的字段中。保存在dataHolder中的结果数据必须独立于任何realm。

如果转移不可能，这些步骤可能会抛出异常。

接收转移步骤，接受一个记录dataHolder，以及一个平台对象value

一组步骤，接收dataHolder中的数据，适当设置value。value将是所涉及的平台对象类型的新创建实例，其内部数据未设置；设置这些数据是这些步骤的任务。

如果无法接收转移，这些步骤可能会抛出异常。

定义单个平台对象的数据在这些步骤中如何被转移是个体平台对象定义的责任。通常这些步骤是非常对称的。

[Transferable]扩展属性不得带有任何参数，并且只能出现在接口上。在一个接口上不得出现超过一次。

对于给定的平台对象，只有对象的主要接口在转移过程中被考虑。因此，如果在定义接口时涉及继承，每个继承链中的[Transferable]注释接口需要定义独立的转移步骤和接收转移步骤，包括考虑任何可能来自继承接口的重要数据。

作为可转移对象的平台对象具有一个[[Detached]]内部槽。这用于确保一旦平台对象被转移，它不能再次被转移。

JavaScript规范中定义的对象由StructuredSerializeWithTransfer抽象操作直接处理。

2.7.3 StructuredSerializeInternal (`value`, `forStorage` [ , `memory` ] )

StructuredSerializeInternal 抽象操作以一个 JavaScript 值 value 为输入，将其序列化为一个独立于 realm 的形式，这里表示为一个记录。这种序列化形式包含所有必要的信息，以便以后在不同的 realm 中反序列化为一个新的 JavaScript 值。

此过程可能会抛出异常，例如尝试序列化不可序列化的对象时。

如果未提供 memory，则让 memory 成为空的 map。

memory map 的目的是避免对象被序列化两次。这最终保留了图中的循环和重复对象的身份。
如果 memory[value] 存在，则返回 memory[value]。
让 deep 为 false。
如果 Type(value) 是 Undefined、Null、Boolean、Number、BigInt 或 String，则返回 { [[Type]]: "primitive", [[Value]]: value }。
如果 Type(value) 是 Symbol，则抛出 "DataCloneError" DOMException。
让 serialized 成为一个未初始化的值。
如果 value 有 [[BooleanData]] 内部槽，则将 serialized 设置为 { [[Type]]: "Boolean", [[BooleanData]]: value.[[BooleanData]] }。
否则，如果 value 有 [[NumberData]] 内部槽，则将 serialized 设置为 { [[Type]]: "Number", [[NumberData]]: value.[[NumberData]] }。
否则，如果 value 有 [[BigIntData]] 内部槽，则将 serialized 设置为 { [[Type]]: "BigInt", [[BigIntData]]: value.[[BigIntData]] }。
否则，如果 value 有 [[StringData]] 内部槽，则将 serialized 设置为 { [[Type]]: "String", [[StringData]]: value.[[StringData]] }。
否则，如果 value 有 [[DateValue]] 内部槽，则将 serialized 设置为 { [[Type]]: "Date", [[DateValue]]: value.[[DateValue]] }。
否则，如果 value 有 [[RegExpMatcher]] 内部槽，则将 serialized 设置为 { [[Type]]: "RegExp", [[RegExpMatcher]]: value.[[RegExpMatcher]], [[OriginalSource]]: value.[[OriginalSource]], [[OriginalFlags]]: value.[[OriginalFlags]] }。
否则，如果 value 有 [[ArrayBufferData]] 内部槽，则：
1. 如果 IsSharedArrayBuffer(value) 是 true，则：
  1. 如果当前设置对象的跨域隔离能力为 false，则抛出 "DataCloneError" DOMException。
    
    此检查仅在序列化时需要（反序列化时不需要），因为跨域隔离能力不能随时间改变，且 SharedArrayBuffer 不能离开一个 agent 集群。
  2. 如果 forStorage 为 true，则抛出 "DataCloneError" DOMException。
  3. 如果 value 有 [[ArrayBufferMaxByteLength]] 内部槽，则将 serialized 设置为 { [[Type]]: "GrowableSharedArrayBuffer", [[ArrayBufferData]]: value.[[ArrayBufferData]], [[ArrayBufferByteLengthData]]: value.[[ArrayBufferByteLengthData]], [[ArrayBufferMaxByteLength]]: value.[[ArrayBufferMaxByteLength]], [[AgentCluster]]: 周围 agent 的 agent 集群 }。
  4. 否则，将 serialized 设置为 { [[Type]]: "SharedArrayBuffer", [[ArrayBufferData]]: value.[[ArrayBufferData]], [[ArrayBufferByteLength]]: value.[[ArrayBufferByteLength]], [[AgentCluster]]: 周围 agent 的 agent 集群 }。
2. 否则：
  1. 如果 IsDetachedBuffer(value) 是 true，则抛出 "DataCloneError" DOMException。
  2. 让 size 为 value.[[ArrayBufferByteLength]]。
  3. 让 dataCopy 成为 ? CreateByteDataBlock(size)。
    
    在分配失败时，这可能会抛出 RangeError 异常。
  4. 执行 CopyDataBlockBytes(dataCopy, 0, value.[[ArrayBufferData]], 0, size)。
  5. 如果 value 有 [[ArrayBufferMaxByteLength]] 内部槽，则将 serialized 设置为 { [[Type]]: "ResizableArrayBuffer", [[ArrayBufferData]]: dataCopy, [[ArrayBufferByteLength]]: size, [[ArrayBufferMaxByteLength]]: value.[[ArrayBufferMaxByteLength]] }。
  6. 否则，将 serialized 设置为 { [[Type]]: "ArrayBuffer", [[ArrayBufferData]]: dataCopy, [[ArrayBufferByteLength]]: size }。
否则，如果 value 有 [[ViewedArrayBuffer]] 内部槽，则：
1. 如果 IsArrayBufferViewOutOfBounds(value) 是 true，则抛出 "DataCloneError" DOMException。
2. 让 buffer 成为 value 的 [[ViewedArrayBuffer]] 内部槽的值。
3. 让 bufferSerialized 成为 ? StructuredSerializeInternal(buffer, forStorage, memory)。
4. 断言：bufferSerialized.[[Type]] 是 "ArrayBuffer"、"ResizableArrayBuffer"、"SharedArrayBuffer" 或 "GrowableSharedArrayBuffer"。
5. 如果 value 有 [[DataView]] 内部槽，则将 serialized 设置为 { [[Type]]: "ArrayBufferView", [[Constructor]]: "DataView", [[ArrayBufferSerialized]]: bufferSerialized, [[ByteLength]]: value.[[ByteLength]], [[ByteOffset]]: value.[[ByteOffset]] }。
6. 否则：
  1. 断言：value 有 [[TypedArrayName]] 内部槽。
  2. 将 serialized 设置为 { [[Type]]: "ArrayBufferView", [[Constructor]]: value.[[TypedArrayName]], [[ArrayBufferSerialized]]: bufferSerialized, [[ByteLength]]: value.[[ByteLength]], [[ByteOffset]]: value.[[ByteOffset]], [[ArrayLength]]: value.[[ArrayLength]] }。
否则，如果 value 有 [[MapData]] 内部槽，则：
1. 将 serialized 设置为 { [[Type]]: "Map", [[MapData]]: 一个新的空列表 }。
2. 将 deep 设置为 true。
否则，如果 value 有 [[SetData]] 内部槽，则：
1. 将 serialized 设置为 { [[Type]]: "Set", [[SetData]]: 一个新的空列表 }。
2. 将 deep 设置为 true。
否则，如果 value 有 [[ErrorData]] 内部槽且 value 不是平台对象，则：
1. 让 name 成为 ? 获取(value, "name")。
2. 如果 name 不是 "Error"、"EvalError"、"RangeError"、"ReferenceError"、"SyntaxError"、"TypeError" 或 "URIError" 之一，则将 name 设置为 "Error"。
3. 让 valueMessageDesc 成为 ? value.[[GetOwnProperty]]("message")。
4. 如果 IsDataDescriptor(valueMessageDesc) 为 false，则将 message 设置为 undefined；否则，将 message 设置为 ? ToString(valueMessageDesc.[[Value]])。
5. 将 serialized 设置为 { [[Type]]: "Error", [[Name]]: name, [[Message]]: message }。
6. 用户代理应将尚未指定的任何有趣的附带数据的序列化表示附加到 serialized，特别是 stack 属性。
  
  请参见 Error Stacks 提案，了解关于指定此数据的进行中的工作。[JSERRORSTACKS]
否则，如果 value 是一个数组异类对象，则：
1. 让 valueLenDescriptor 成为 ? OrdinaryGetOwnProperty(value, "length")。
2. 让 valueLen 成为 valueLenDescriptor.[[Value]]。
3. 将 serialized 设置为 { [[Type]]: "Array", [[Length]]: valueLen, [[Properties]]: 一个新的空列表 }。
4. 将 deep 设置为 true。
否则，如果 value 是一个平台对象，且是一个可序列化对象：
1. 如果 value 有一个值为 true 的 [[Detached]] 内部槽，则抛出 "DataCloneError" DOMException。
2. 让 typeString 成为主接口的标识符。
3. 将 serialized 设置为 { [[Type]]: typeString }。
4. 将 deep 设置为 true。
否则，如果 value 是一个平台对象，则抛出 "DataCloneError" DOMException。
否则，如果 IsCallable(value) 为 true，则抛出 "DataCloneError" DOMException。
否则，如果 value 有任何内部槽，除 [[Prototype]]、[[Extensible]] 或 [[PrivateElements]] 外，则抛出 "DataCloneError" DOMException。

例如，一个 [[PromiseState]] 或 [[WeakMapData]] 内部槽。
否则，如果 value 是一个异类对象，且 value 不是与任何 realm 关联的 %Object.prototype% 内在对象，则抛出 "DataCloneError" DOMException。

例如，一个代理对象。
否则：
1. 将 serialized 设置为 { [[Type]]: "Object", [[Properties]]: 一个新的空列表 }。
2. 将 deep 设置为 true。
%Object.prototype% 将通过此步骤和后续步骤进行处理。最终结果是忽略其异类性，并且在反序列化后结果将是一个空对象（不是一个不可变原型异类对象）。
设置 memory[value] 为 serialized。
如果 deep 为 true，则：
1. 如果 value 有 [[MapData]] 内部槽，则：
  1. 让 copiedList 成为一个新的空列表。
  2. 对于每个记录 { [[Key]], [[Value]] } entry 在 value.[[MapData]] 中：
    1. 让 copiedEntry 成为一个新的记录 { [[Key]]: entry.[[Key]], [[Value]]: entry.[[Value]] }。
    2. 如果 copiedEntry.[[Key]] 不是特殊值空，则将 copiedEntry 附加到 copiedList。
  3. 对于每个记录 { [[Key]], [[Value]] } entry 在 copiedList 中：
    1. 让 serializedKey 成为 ? StructuredSerializeInternal(entry.[[Key]], forStorage, memory)。
    2. 让 serializedValue 成为 ? StructuredSerializeInternal(entry.[[Value]], forStorage, memory)。
    3. 将 { [[Key]]: serializedKey, [[Value]]: serializedValue } 附加到 serialized.[[MapData]]。
2. 否则，如果 value 有 [[SetData]] 内部槽，则：
  1. 让 copiedList 成为一个新的空列表。
  2. 对于每个 entry 在 value.[[SetData]] 中：
    1. 如果 entry 不是特殊值空，则将 entry 附加到 copiedList。
  3. 对于每个 entry 在 copiedList 中：
    1. 让 serializedEntry 成为 ? StructuredSerializeInternal(entry, forStorage, memory)。
    2. 将 serializedEntry 附加到 serialized.[[SetData]]。
3. 否则，如果 value 是一个平台对象，且是一个可序列化对象，则为 value 的主接口执行序列化步骤，给定 value、serialized 和 forStorage。
  
  序列化步骤可能需要执行子序列化。这是一个以值 subValue 为输入的操作，并返回 StructuredSerializeInternal(subValue, forStorage, memory)。（换句话说，一个子序列化是 StructuredSerializeInternal 在此次调用中的特化。）
4. 否则，对于 ! EnumerableOwnProperties(value, key) 中的每个 key：
  1. 如果 ! HasOwnProperty(value, key) 为 true，则：
    1. 让 inputValue 成为 ? value.[[Get]](key, value)。
    2. 让 outputValue 成为 ? StructuredSerializeInternal(inputValue, forStorage, memory)。
    3. 将 { [[Key]]: key, [[Value]]: outputValue } 附加到 serialized.[[Properties]]。
返回 serialized。

需要注意的是，记录由StructuredSerializeInternal生成的可能包含指向其他记录的“指针”，这些指针会创建循环引用。例如，当我们将以下 JavaScript 对象传递给StructuredSerializeInternal时：

const o = {};
o.myself = o;

它会生成以下结果：

{
  [[Type]]: "Object",
  [[Properties]]: «
    {
      [[Key]]: "myself",
      [[Value]]: <a pointer to this whole structure>
    }
  »
}

2.7.4 StructuredSerialize ( `value` )

返回 ? StructuredSerializeInternal(value, false)。

2.7.5 StructuredSerializeForStorage ( `value` )

返回 ? StructuredSerializeInternal(value, true)。

2.7.6 结构化反序列化 (`serialized`, `targetRealm` [, `memory`])

结构化反序列化抽象操作接受一个记录serialized作为输入，该记录之前由结构化序列化或存储用结构化序列化生成，并将其反序列化为在targetRealm中创建的新JavaScript值。

此过程可能会抛出异常，例如在尝试为新对象（尤其是ArrayBuffer对象）分配内存时。

如果未提供memory，则将memory设为空的映射。

memory映射的目的是避免对象的两次反序列化。这最终保留了图中循环和重复对象的身份。
如果memory[serialized] 存在，则返回memory[serialized]。
将deep设为false。
将value设为未初始化的值。
如果serialized.[[Type]]是"primitive"，则将value设为serialized.[[Value]]。
否则，如果serialized.[[Type]]是"Boolean"，则将value设为在targetRealm中新的Boolean对象，其[[BooleanData]]内部槽值为serialized.[[BooleanData]]。
否则，如果serialized.[[Type]]是"Number"，则将value设为在targetRealm中新的Number对象，其[[NumberData]]内部槽值为serialized.[[NumberData]]。
否则，如果serialized.[[Type]]是"BigInt"，则将value设为在targetRealm中新的BigInt对象，其[[BigIntData]]内部槽值为serialized.[[BigIntData]]。
否则，如果serialized.[[Type]]是"String"，则将value设为在targetRealm中新的String对象，其[[StringData]]内部槽值为serialized.[[StringData]]。
否则，如果serialized.[[Type]]是"Date"，则将value设为在targetRealm中新的Date对象，其[[DateValue]]内部槽值为serialized.[[DateValue]]。
否则，如果serialized.[[Type]]是"RegExp"，则将value设为在targetRealm中新的RegExp对象，其[[RegExpMatcher]]内部槽值为serialized.[[RegExpMatcher]]，其[[OriginalSource]]内部槽值为serialized.[[OriginalSource]]，其[[OriginalFlags]]内部槽值为serialized.[[OriginalFlags]]。
否则，如果serialized.[[Type]]是"SharedArrayBuffer"，则：
1. 如果targetRealm对应的代理集群不是serialized.[[AgentCluster]]，则抛出"DataCloneError" DOMException。
2. 否则，将value设为在targetRealm中新的SharedArrayBuffer对象，其[[ArrayBufferData]]内部槽值为serialized.[[ArrayBufferData]]，其[[ArrayBufferByteLength]]内部槽值为serialized.[[ArrayBufferByteLength]]。
否则，如果serialized.[[Type]]是"GrowableSharedArrayBuffer"，则：
1. 如果targetRealm对应的代理集群不是serialized.[[AgentCluster]]，则抛出"DataCloneError" DOMException。
2. 否则，将value设为在targetRealm中新的SharedArrayBuffer对象，其[[ArrayBufferData]]内部槽值为serialized.[[ArrayBufferData]]，其[[ArrayBufferByteLengthData]]内部槽值为serialized.[[ArrayBufferByteLengthData]]，其[[ArrayBufferMaxByteLength]]内部槽值为serialized.[[ArrayBufferMaxByteLength]]。
否则，如果serialized.[[Type]]是"ArrayBuffer"，则将value设为在targetRealm中新的ArrayBuffer对象，其[[ArrayBufferData]]内部槽值为serialized.[[ArrayBufferData]]，其[[ArrayBufferByteLength]]内部槽值为serialized.[[ArrayBufferByteLength]]。

如果这抛出了异常，捕获它，然后抛出"DataCloneError" DOMException。

如果没有足够的内存可用来创建这样的ArrayBuffer对象，此步骤可能会抛出异常。
否则，如果serialized.[[Type]]是"ResizableArrayBuffer"，则将value设为在targetRealm中新的ArrayBuffer对象，其[[ArrayBufferData]]内部槽值为serialized.[[ArrayBufferData]]，其[[ArrayBufferByteLength]]内部槽值为serialized.[[ArrayBufferByteLength]]，其[[ArrayBufferMaxByteLength]]内部槽值为serialized.[[ArrayBufferMaxByteLength]]。

如果这抛出了异常，捕获它，然后抛出"DataCloneError" DOMException。

如果没有足够的内存可用来创建这样的ArrayBuffer对象，此步骤可能会抛出异常。
否则，如果serialized.[[Type]]是"ArrayBufferView"，则：
1. 让deserializedArrayBuffer为? 结构化反序列化(serialized.[[ArrayBufferSerialized]], targetRealm, memory)。
2. 如果serialized.[[Constructor]]是"DataView"，则将value设为在targetRealm中新的DataView对象，其[[ViewedArrayBuffer]]内部槽值为deserializedArrayBuffer，其[[ByteLength]]内部槽值为serialized.[[ByteLength]]，其[[ByteOffset]]内部槽值为serialized.[[ByteOffset]]。
3. 否则，将value设为在targetRealm中新的类型数组对象，使用serialized.[[Constructor]]给定的构造函数，其[[ViewedArrayBuffer]]内部槽值为deserializedArrayBuffer，其[[TypedArrayName]]内部槽值为serialized.[[Constructor]]，其[[ByteLength]]内部槽值为serialized.[[ByteLength]]，其[[ByteOffset]]内部槽值为serialized.[[ByteOffset]]，其[[ArrayLength]]内部槽值为serialized.[[ArrayLength]]。
否则，如果serialized.[[Type]]是"Map"，则：
1. 将value设为在targetRealm中新的Map对象，其[[MapData]]内部槽值为新的空列表。
2. 将deep设为true。
否则，如果serialized.[[Type]]是"Set"，则：
1. 将value设为在targetRealm中新的Set对象，其[[SetData]]内部槽值为新的空列表。
2. 将deep设为true。
否则，如果serialized.[[Type]]是"Array"，则：
1. 让outputProto为targetRealm.[[Intrinsics]].[[%Array.prototype%]]。
2. 将value设为! 数组创建(serialized.[[Length]], outputProto)。
3. 将deep设为true。
否则，如果serialized.[[Type]]是"Object"，则：
1. 将value设为在targetRealm中的新对象。
2. 将deep设为true。
否则，如果serialized.[[Type]]是"Error"，则：
1. 让prototype为%Error.prototype%。
2. 如果serialized.[[Name]]是"EvalError"，则将prototype设为%EvalError.prototype%。
3. 如果serialized.[[Name]]是"RangeError"，则将prototype设为%RangeError.prototype%。
4. 如果serialized.[[Name]]是"ReferenceError"，则将prototype设为%ReferenceError.prototype%。
5. 如果serialized.[[Name]]是"SyntaxError"，则将prototype设为%SyntaxError.prototype%。
6. 如果serialized.[[Name]]是"TypeError"，则将prototype设为%TypeError.prototype%。
7. 如果serialized.[[Name]]是"URIError"，则将prototype设为%URIError.prototype%。
8. 让 message为serialized.[[Message]]。
9. 将value设为普通对象创建(prototype，«[[ErrorData]]»)。
10. 让messageDesc为属性描述符{[[Value]]: message, [[Writable]]: true, [[Enumerable]]: false, [[Configurable]]: true}。
11. 如果message不为undefined，则执行! 普通定义自有属性(value, "message", messageDesc)。
12. 任何附加到serialized上的有趣的附加数据都应该被反序列化并附加到value上。
否则：
1. 让interfaceName为serialized.[[Type]]。
2. 如果interfaceName标识的接口在targetRealm中不是暴露的，则抛出"DataCloneError" DOMException。
3. 将value设为在targetRealm中创建的由interfaceName标识的接口的新实例。
4. 将deep设为true。
设置 memory[serialized]为value。
如果deep为true，则：
1. 如果serialized.[[Type]]是"Map"，则：
  1. 对每个记录 {[[Key]], [[Value]]}entry的serialized.[[MapData]]进行：
    1. 让deserializedKey为? 结构化反序列化(entry.[[Key]], targetRealm, memory)。
    2. 让deserializedValue为? 结构化反序列化(entry.[[Value]], targetRealm, memory)。
    3. 附加 {[[Key]]: deserializedKey, [[Value]]: deserializedValue}到value.[[MapData]]。
2. 否则，如果serialized.[[Type]]是"Set"，则：
  1. 对每个 entry的serialized.[[SetData]]进行：
    1. 让deserializedEntry为? 结构化反序列化(entry, targetRealm, memory)。
    2. 附加 deserializedEntry到value.[[SetData]]。
3. 否则，如果serialized.[[Type]]是"Array"或"Object"，则：
  1. 对每个记录 {[[Key]], [[Value]]}entry的serialized.[[Properties]]进行：
    1. 让deserializedValue为? 结构化反序列化(entry.[[Value]], targetRealm, memory)。
    2. 让result为! 创建数据属性(value, entry.[[Key]], deserializedValue)。
    3. 断言：result为true。
4. 否则：
  1. 执行由serialized.[[Type]]标识的接口的适当反序列化步骤，给定serialized、value和targetRealm。
    
    反序列化步骤可能需要执行子反序列化。这是一个操作，接受先前序列化的记录subSerialized作为输入，并返回结构化反序列化(subSerialized，targetRealm，memory)。(换句话说，子反序列化是结构化反序列化的特化，以在此调用中保持一致。)
返回value。

2.7.7 StructuredSerializeWithTransfer ( `value`, `transferList` )

让 memory 为一个空的map。

除了 StructuredSerializeInternal 正常使用外，在这个算法中 memory 还用于确保 StructuredSerializeInternal 忽略 transferList 中的项目，并让我们自己处理。
对于每个 transferable 的 transferList：
1. 如果 transferable 既没有 [[ArrayBufferData]] 内部槽也没有[[Detached]] 内部槽，则抛出 "DataCloneError" DOMException。
2. 如果 transferable 具有 [[ArrayBufferData]] 内部槽且 IsSharedArrayBuffer(transferable) 为真，则抛出 "DataCloneError" DOMException。
3. 如果 memory[transferable] 存在，则抛出 "DataCloneError" DOMException。
4. 设置 memory[transferable] 为 {[[Type]]: 未初始化的值}。
  
  transferable 尚未传输，因为传输有副作用，并且 StructuredSerializeInternal 需要先能够抛出。
让 serialized 为 ? StructuredSerializeInternal(value, false, memory)。
让 transferDataHolders 为一个新的空的 List。
对于每个 transferable 的 transferList：
1. 如果 transferable 具有 [[ArrayBufferData]] 内部槽且 IsDetachedBuffer(transferable) 为真，则抛出 "DataCloneError" DOMException。
2. 如果 transferable 具有 [[Detached]] 内部槽且 transferable.[[Detached]] 为真，则抛出 "DataCloneError" DOMException。
3. 让 dataHolder 为 memory[transferable]。
4. 如果 transferable 具有 [[ArrayBufferData]] 内部槽，则：
  1. 如果 transferable 具有 [[ArrayBufferMaxByteLength]] 内部槽，则：
    1. 将 dataHolder.[[Type]] 设为 "ResizableArrayBuffer"。
    2. 将 dataHolder.[[ArrayBufferData]] 设为 transferable.[[ArrayBufferData]]。
    3. 将 dataHolder.[[ArrayBufferByteLength]] 设为 transferable.[[ArrayBufferByteLength]]。
    4. 将 dataHolder.[[ArrayBufferMaxByteLength]] 设为 transferable.[[ArrayBufferMaxByteLength]]。
  2. 否则：
    1. 将 dataHolder.[[Type]] 设为 "ArrayBuffer"。
    2. 将 data Holder.[[ArrayBufferData]] 设为 transferable.[[ArrayBufferData]]。
    3. 将 dataHolder.[[ArrayBufferByteLength]] 设为 transferable.[[ArrayBufferByteLength]]。
  3. 执行 ? DetachArrayBuffer(transferable)。
    
    规范可以使用 [[ArrayBufferDetachKey]] 内部槽来防止 ArrayBuffer 被分离。例如，这在 WebAssembly JavaScript Interface 中使用。[WASMJS]
5. 否则：
  1. 断言：transferable 是一个平台对象，并且是一个可转移对象。
  2. 让 interfaceName 为主接口的标识符。transferable 的
  3. 将 dataHolder.[[Type]] 设为 interfaceName。
  4. 执行适当的传输步骤，给定 transferable 和 dataHolder，由 interfaceName 标识的接口。
  5. 将 transferable.[[Detached]] 设为真。
6. 追加 dataHolder 到 transferDataHolders。
返回 { [[Serialized]]: serialized, [[TransferDataHolders]]: transferDataHolders }。

2.7.8 StructuredDeserializeWithTransfer ( `serializeWithTransferResult`, `targetRealm` )

让 memory 为一个空的map。

类似于 StructuredSerializeWithTransfer，除了正常被 StructuredDeserialize 使用外，在这个算法中 memory 还用于确保 StructuredDeserialize 忽略 serializeWithTransferResult.[[TransferDataHolders]] 中的项目，让我们自己进行处理。
让 transferredValues 为一个新的空的List。
对于每个 transferDataHolder 的 serializeWithTransferResult.[[TransferDataHolders]]：
1. 让 value 为一个未初始化的值。
2. 如果 transferDataHolder.[[Type]] 是 "ArrayBuffer"，则将 value 设为在 targetRealm 中创建的新 ArrayBuffer 对象，其 [[ArrayBufferData]] 内部槽值为 transferDataHolder.[[ArrayBufferData]]，且 [[ArrayBufferByteLength]] 内部槽值为 transferDataHolder.[[ArrayBufferByteLength]]。
  
  在原始内存仍可访问的情况下，这一步骤不太可能抛出异常，因为不需要分配新的内存：[[ArrayBufferData]] 占用的内存只是被转移到新的 ArrayBuffer 中。这可能在源和目标领域在同一进程中时为真。
3. 否则，如果 transferDataHolder.[[Type]] 是 "ResizableArrayBuffer"，则将 value 设为在 targetRealm 中创建的新 ArrayBuffer 对象，其 [[ArrayBufferData]] 内部槽值为 transferDataHolder.[[ArrayBufferData]]，[[ArrayBufferByteLength]] 内部槽值为 transferDataHolder.[[ArrayBufferByteLength]]，以及 [[ArrayBufferMaxByteLength]] 内部槽值为 transferDataHolder.[[ArrayBufferMaxByteLength]]。
  
  与前一步相同，这一步骤也不太可能抛出异常。
4. 否则：
  1. 让 interfaceName 为 transferDataHolder.[[Type]]。
  2. 如果由 interfaceName 标识的接口在 targetRealm 中不可用，则抛出 "DataCloneError" DOMException。
  3. 将 value 设为在 targetRealm 中创建的由 interfaceName 标识的接口的新实例。
  4. 执行适当的接收转移步骤，针对由 interfaceName 标识的接口，给定 transferDataHolder 和 value。
5. 设置 memory[transferDataHolder] 为 value。
6. 追加 value 到 transferredValues。
让 deserialized 为 ? StructuredDeserialize(serializeWithTransferResult.[[Serialized]], targetRealm, memory)。
返回 { [[Deserialized]]: deserialized, [[TransferredValues]]: transferredValues }。

2.7.9 从其他规范执行序列化和传输

其他规范可以使用此处定义的抽象操作。以下提供了一些关于每个抽象操作通常何时有用的指导，并附有示例。

StructuredSerializeWithTransfer

StructuredDeserializeWithTransfer

将一个值克隆到另一个realm，使用一个传输列表，但目标realm事先未知。在这种情况下，可以立即执行序列化步骤，而反序列化步骤则延迟到目标realm变得已知时再进行。

messagePort.postMessage() 使用这对抽象操作，因为直到MessagePort 已被发送后，目标realm才会变得已知。

StructuredSerialize

StructuredSerializeForStorage

StructuredDeserialize

创建一个给定值的realm独立快照，可以保存无限期的时间，然后在以后重新成为JavaScript值，可能多次。

StructuredSerializeForStorage 可用于预期要以持久方式存储序列化结果，而不是在realm之间传递。它在尝试序列化SharedArrayBuffer对象时会抛出异常，因为存储共享内存没有意义。同样，当给定一个具有自定义序列化步骤的平台对象时，forStorage参数为true时，它可能抛出异常或具有不同的行为。

history.pushState() 和 history.replaceState() 使用StructuredSerializeForStorage 作用于作者提供的状态对象，将它们作为序列化状态存储在相应的会话历史条目中。然后，StructuredDeserialize 被用来让history.state 属性返回原始状态对象的克隆。

broadcastChannel.postMessage() 在其输入上使用StructuredSerialize，然后对结果多次使用StructuredDeserialize，以便为每个广播目的地产生一个新的克隆。请注意，在多目的地情况下，传输是不合适的。

任何用于将JavaScript值持久化到文件系统的API也会在其输入上使用StructuredSerializeForStorage，并在其输出上使用StructuredDeserialize。

一般来说，调用点可能会传递Web IDL值而不是JavaScript值；这应该理解为在调用这些算法之前执行隐式转换为JavaScript值。

那些不是因为作者代码同步调用用户代理方法而调用的调用点，必须在调用StructuredSerialize、StructuredSerializeForStorage 或 StructuredSerializeWithTransfer抽象操作之前，做好适当的准备运行脚本和准备运行回调。这是必要的，因为序列化过程可以在其最终深度序列化步骤中调用作者定义的访问器，而这些访问器可能会调用依赖于正确设置entry和incumbent概念的操作。

window.postMessage() 在其参数上执行StructuredSerializeWithTransfer，但要小心立即在其算法的同步部分内执行。因此，它可以使用这些算法，而不需要准备运行脚本和准备运行回调。

相比之下，一个假设的API，使用StructuredSerialize来定期序列化一些作者提供的对象，直接从任务在事件循环上进行，将需要确保它事先执行适当的准备。截至目前，我们知道平台上没有这样的API；通常，提前进行序列化作为作者代码的同步结果会更简单。

2.7.10 结构化克隆 API

result = self.structuredClone(value[, { transfer }])

获取输入值并通过执行结构化克隆算法返回一个深拷贝。可转移对象列在transfer数组中，这些对象被转移而不仅仅是克隆，这意味着它们在输入值中不再可用。

如果输入值的任何部分不是可序列化对象，则抛出一个"DataCloneError" DOMException。

structuredClone

所有当前引擎都支持。

Firefox94+ Safari15.4+ Chrome98+

Opera? Edge98+

Edge (旧版)? Internet ExplorerNo

Firefox Android? Safari iOS? Chrome Android? WebView Android? Samsung Internet? Opera Android?

structuredClone(value, options) 方法步骤如下：

让serialized为 ? StructuredSerializeWithTransfer(value, options["transfer"])。
让deserializeRecord为 ? StructuredDeserializeWithTransfer(serialized, this的相关realm)。
返回deserializeRecord.[[Deserialized]]。

3 HTML文档的语义、结构和API

3.1 文档

HTML UA中的每个XML和HTML文档都由一个Document对象表示。[DOM]

Document对象的URL在DOM中定义。它在Document对象创建时设置，但在Document对象的生命周期内可以更改；例如，当用户导航到页面上的片段时以及当调用pushState()方法时URL会更改。[DOM]

交互式用户代理通常在其用户界面中显示Document对象的URL。这是用户判断网站是否试图冒充其他网站的主要机制。

Document对象的origin在DOM中定义。它在Document对象创建时设置，并且只有在设置document.domain时才能在Document的生命周期内更改。Document的origin可以与其URL的origin不同；例如，当创建一个子导航时，它的活动文档的origin继承自其父文档的活动文档的origin，即使其活动文档的URL是about:blank。[DOM]

当一个Document由脚本使用createDocument()或createHTMLDocument()方法创建时，Document会立即准备好进行加载后任务。

文档的引用者是一个字符串（表示URL），可以在Document创建时设置。如果未显式设置，则其值为空字符串。

3.1.1 `Document` 对象

Document

所有当前引擎支持。

Firefox1+Safari1+Chrome1+

Opera3+Edge79+

Edge (旧版)12+Internet Explorer4+

Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+

DOM 定义了一个 Document 接口，本规范对其进行了显著扩展。

enum DocumentReadyState { "loading", "interactive", "complete" };
enum DocumentVisibilityState { "visible", "hidden" };
typedef (HTMLScriptElement or SVGScriptElement) HTMLOrSVGScriptElement;

[LegacyOverrideBuiltIns]
partial interface Document {
  static Document parseHTMLUnsafe((TrustedHTML or DOMString) html);

  // resource metadata management
  [PutForwards=href, LegacyUnforgeable] readonly attribute Location? location;
  attribute USVString domain;
  readonly attribute USVString referrer;
  attribute USVString cookie;
  readonly attribute DOMString lastModified;
  readonly attribute DocumentReadyState readyState;

  // DOM tree accessors
  getter object (DOMString name);
  [CEReactions] attribute DOMString title;
  [CEReactions] attribute DOMString dir;
  [CEReactions] attribute HTMLElement? body;
  readonly attribute HTMLHeadElement? head;
  [SameObject] readonly attribute HTMLCollection images;
  [SameObject] readonly attribute HTMLCollection embeds;
  [SameObject] readonly attribute HTMLCollection plugins;
  [SameObject] readonly attribute HTMLCollection links;
  [SameObject] readonly attribute HTMLCollection forms;
  [SameObject] readonly attribute HTMLCollection scripts;
  NodeList getElementsByName(DOMString elementName);
  readonly attribute HTMLOrSVGScriptElement? currentScript; // classic scripts in a document tree only

  // dynamic markup insertion
  [CEReactions] Document open(optional DOMString unused1, optional DOMString unused2); // both arguments are ignored
  WindowProxy? open(USVString url, DOMString name, DOMString features);
  [CEReactions] undefined close();
  [CEReactions] undefined write((TrustedHTML or DOMString)... text);
  [CEReactions] undefined writeln((TrustedHTML or DOMString)... text);

  // user interaction
  readonly attribute WindowProxy? defaultView;
  boolean hasFocus();
  [CEReactions] attribute DOMString designMode;
  [CEReactions] boolean execCommand(DOMString commandId, optional boolean showUI = false, optional DOMString value = "");
  boolean queryCommandEnabled(DOMString commandId);
  boolean queryCommandIndeterm(DOMString commandId);
  boolean queryCommandState(DOMString commandId);
  boolean queryCommandSupported(DOMString commandId);
  DOMString queryCommandValue(DOMString commandId);
  readonly attribute boolean hidden;
  readonly attribute DocumentVisibilityState visibilityState;

  // special event handler IDL attributes that only apply to Document objects
  [LegacyLenientThis] attribute EventHandler onreadystatechange;
  attribute EventHandler onvisibilitychange;

  // also has obsolete members
};
Document includes GlobalEventHandlers;

每个Document都有一个policy container（policy container），最初是一个新的policy container，其中包含适用于Document的策略。

每个Document都有一个权限策略，这是一个权限策略，最初为空。

每个Document都有一个模块映射，这是一个模块映射，最初为空。

每个Document都有一个打开策略，这是一个跨域打开策略，最初是一个新的跨域打开策略。

每个Document都有一个是否初始about:blank，这是一个布尔值，最初为false。

每个Document都有一个用于WebDriver BiDi的加载中导航ID，这是一个导航ID或null，最初为null。

正如其名称所示，这用于与WebDriver BiDi规范进行接口，该规范需要在Document生命周期的早期部分通知某些事件发生的方式，将它们与创建此Document的导航ID联系起来。当导航被视为正在进行的导航时，最终会将其设置回null，在WebDriver BiDi认为加载过程已完成后。[BIDI]

每个Document都有一个about base URL，这是一个URL或null，最初为null。

这仅适用于“about:”协议的Document。

每个Document都有一个bfcache阻止详情，这是一个集合，包含未恢复原因详情，最初为空。

3.1.2 `DocumentOrShadowRoot` 接口

DOM 定义了 DocumentOrShadowRoot mixin，本规范对此进行了扩展。

partial interface mixin DocumentOrShadowRoot {
  readonly attribute Element? activeElement;
};

3.1.3 资源元数据管理

document.referrer Document/referrer 所有当前引擎支持。 Firefox1+Safari1+Chrome1+ Opera3+Edge79+ Edge (旧版)12+Internet Explorer4+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

返回用户从中导航到此页面的Document的URL，如果被阻止或没有这样的文档，则返回空字符串。

noreferrer链接类型可用于阻止referrer。

referrer属性必须返回文档的引用者。

document.cookie [ = value ]

返回适用于Document的HTTP cookies。如果没有cookies或cookies不能应用于此资源，则返回空字符串。

可以设置，以将新cookie添加到元素的HTTP cookies集中。

如果内容被沙盒化为不透明来源（例如，在具有iframe的sandbox属性的iframe中），则在获取和设置时会抛出DOMException类型的"SecurityError"。

Document/cookie

所有当前引擎支持。

Firefox1+Safari1+Chrome1+

Opera3+Edge79+

Edge (旧版)12+Internet Explorer4+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

cookie属性表示由文档的URL标识的资源的cookies。

满足以下条件之一的Document对象是cookie-averse Document对象：

其浏览上下文为null的Document对象。
其URL的scheme不是HTTP(S) scheme的Document对象。

在获取时，如果文档是cookie-averse Document对象，则用户代理必须返回空字符串。否则，如果Document的来源是不透明来源，用户代理必须抛出DOMException类型的"SecurityError"。否则，用户代理必须返回文档的cookie-string，对于“非HTTP”API，使用UTF-8解码（无BOM）进行解码。[COOKIES]

在设置时，如果文档是cookie-averse Document对象，则用户代理必须什么也不做。否则，如果Document的来源是不透明来源，用户代理必须抛出DOMException类型的"SecurityError"。否则，用户代理必须按照接收文档的URL的set-cookie-string处理新值，使用UTF-8编码。[COOKIES] [ENCODING]

由于cookie属性可跨帧访问，因此cookies的路径限制只是帮助管理cookies发送到站点不同部分的工具，而不是安全功能。

cookie属性的getter和setter同步访问共享状态。由于没有锁机制，多个进程用户代理中的其他浏览上下文可以在脚本运行时修改cookies。例如，一个站点可以尝试读取cookie，增加其值，然后写回新值，使用cookie的新值作为会话的唯一标识符；如果该站点在两个不同的浏览器窗口中同时进行两次此操作，可能会使用相同的“唯一”标识符来表示两个会话，可能会产生灾难性后果。

document.lastModified Document/lastModified 所有当前引擎支持。 Firefox1+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer4+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回服务器报告的文档的最后修改日期，格式为“MM/DD/YYYY hh:mm:ss”，以用户的本地时区表示。

如果不知道最后的修改日期，则返回当前时间。

lastModified属性在获取时必须返回文档源文件最后修改的日期和时间，以用户的本地时区，格式如下：

日期的月份部分。
U+002F SOLIDUS字符（/）。
日期的天部分。
U+002F SOLIDUS字符（/）。
日期的年份部分。
U+0020 SPACE字符。
时间的小时部分。
U+003A COLON字符（:）。
时间的分钟部分。
U+003A COLON字符（:）。
时间的秒部分。

上述所有的数字部分，除年份外，必须表示为基数十的两个ASCII数字，必要时填充零。年份必须表示为最短可能的字符串，至少四个ASCII数字，必要时填充零。

Document的源文件最后修改日期和时间必须从使用的网络协议的相关特性中获取，例如从文档的HTTP Last-Modified标头的值或本地文件的文件系统元数据中获取。如果最后修改日期和时间未知，属性必须返回上述格式的当前日期和时间。

3.1.4 报告文档加载状态

document.readyState

在Document加载时返回“loading”，解析完成但仍在加载子资源时返回“interactive”，加载完成后返回“complete”。

当此值发生变化时，readystatechange事件会在Document对象上触发。

在从“interactive”过渡到“complete”之前，当除asyncscript元素外的所有子资源加载完成时，会触发DOMContentLoaded事件。

Document/readyState

所有当前引擎支持。

Firefox3.6+Safari1+Chrome1+

Opera11+Edge79+

Edge (旧版)12+Internet Explorer11

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11+

每个Document都有一个当前文档准备状态，一个字符串，最初为“complete”。

对于通过创建和初始化Document对象算法创建的Document对象，这将在任何脚本观察到document.readyState值之前立即重置为“loading”。此默认值适用于其他情况，例如初始about:blank Document或没有浏览上下文的Document。

readyStategetter步骤是返回this的当前文档准备状态。

要为Document document更新当前文档准备状态为readinessValue：

如果document的当前文档准备状态等于readinessValue，则返回。
将document的当前文档准备状态设置为readinessValue。
如果document与HTML解析器相关联，则：
1. 让now成为给定document的相关全局对象的当前高分辨率时间。
2. 如果readinessValue是“complete”，并且document的加载时间信息的DOM完成时间为0，则将document的加载时间信息的DOM完成时间设置为now。
3. 否则，如果readinessValue是“interactive”，并且document的加载时间信息的DOM交互时间为0，则将document的加载时间信息的DOM交互时间设置为now。
触发一个事件，名为readystatechange在document。

如果一个Document与尚未停止或中止的HTML解析器或XML解析器相关联，则称其具有活动解析器。

Document有一个文档加载时间信息加载时间信息。

Document有一个文档卸载时间信息以前的文档卸载时间。

Document有一个布尔值通过跨域重定向创建，最初为false。

文档加载时间信息结构体具有以下项：

导航开始时间（默认0）: 一个数字
DOM交互时间（默认0）
DOM内容加载事件开始时间（默认0）
DOM内容加载事件结束时间（默认0）
DOM完成时间（默认0）
加载事件开始时间（默认0）
加载事件结束时间（默认0）: DOMHighResTimeStamp值

文档卸载时间信息结构体具有以下项：

卸载事件开始时间（默认0）
卸载事件结束时间（默认0）: DOMHighResTimeStamp值

3.1.5 渲染阻塞机制

每个Document都有一个渲染阻塞元素集合，这是一个集合，初始为空集合。

如果Document document的内容类型是“text/html”并且document的body元素为null，则document允许添加渲染阻塞元素。

如果以下两个条件都为真，则Document document被认为是渲染阻塞：

document的渲染阻塞元素集合非空，或者document允许添加渲染阻塞元素。
给定document的当前高分辨率时间尚未超过一个实现定义的超时值。

如果元素el的节点文档 document被渲染阻塞并且el在document的渲染阻塞元素集合中，则el是渲染阻塞的。

要阻止渲染元素el：

令document为el的节点文档。
如果document允许添加渲染阻塞元素，则将el附加到document的渲染阻塞元素集合中。

要解除渲染阻塞元素el：

令document为el的节点文档。
从document的渲染阻塞元素集合中移除el。

每当渲染阻塞元素el变为浏览上下文断开，或者el的阻塞属性的值发生变化，使el不再潜在地渲染阻塞时，则解除渲染阻塞el。

3.1.6 DOM 树访问器

文档的html元素是它的文档元素，如果它是一个html元素，否则为 null。

document.head Document/head Support in all current engines. Firefox4+Safari5+Chrome4+ Opera11+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+: 返回head 元素。

文档的head元素是第一个作为head元素的子元素，如果存在，否则为 null。

在获取时，head属性必须返回文档的head 元素（一个head元素或 null）。

document.title [ = value ]

返回文档的标题，如由 HTML 中的title 元素和 SVG 中的SVG title 元素所给定的。

可以设置，以更新文档的标题。如果没有合适的元素可以更新，新值将被忽略。

文档的title元素是文档中的第一个title元素（按树顺序），如果存在，否则为 null。

Document/title

Support in all current engines.

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer4+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

在获取时，title属性必须运行以下算法：

如果文档元素是SVG svg元素，则让value为第一个作为文档元素的子元素的SVG title元素的子文本内容。
否则，让value为title 元素的子文本内容，如果title 元素为 null，则为空字符串。
去除并折叠 ASCII 空白在value中。
返回value。

在设置时，必须运行以下列表中第一个匹配条件的步骤：

如果文档元素是SVG svg元素

如果有一个作为文档元素子元素的SVG title元素，则让element为第一个这样的元素。
否则：
1. 让element为给定文档元素的节点文档，title和SVG 命名空间的创建元素的结果。
2. 将element插入作为文档元素的第一个子节点。
在element中使用给定值字符串替换所有。

如果文档元素在HTML 命名空间

如果title 元素为 null 并且head 元素为 null，则返回。
如果title 元素非 null，则让element为title 元素。
否则：
1. 让element为给定文档元素的节点文档，title和HTML 命名空间的创建元素的结果。
2. 将element附加到head 元素。
在element中使用给定值字符串替换所有。

否则

什么也不做。

document.body [ = value ] Document/body Support in all current engines. Firefox60+Safari1+Chrome1+ Opera9.6+Edge79+ Edge (旧版)12+Internet Explorer4+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

返回body 元素。

可以设置，以替换body 元素。

如果新值不是body或frameset元素，这将抛出一个"HierarchyRequestError" DOMException。

文档的 body 元素是第一个作为html 元素的子元素的body 元素或frameset 元素，如果存在，否则为 null。

在获取时，body属性必须返回文档的body 元素（一个body元素，一个frameset元素，或 null）。在设置时，必须运行以下算法：

如果新值不是body或frameset元素，则抛出一个"HierarchyRequestError" DOMException。
否则，如果新值与body 元素相同，则返回。
否则，如果body 元素不是 null，则在替换 body 元素与新值的父节点内的body 元素并返回。
否则，如果没有文档元素，则抛出一个"HierarchyRequestError" DOMException。
否则，body 元素为 null，但有一个文档元素。将新值附加到文档元素。

由body获取器返回的值不总是传递给设置器的值。

在这个例子中，setter 成功地插入了一个 body 元素（虽然这不符合规范，因为 SVG 不允许 body 作为 SVG svg 的子元素）。然而，getter 将返回 null，因为文档元素不是 html。

<svg xmlns="http://www.w3.org/2000/svg">
 <script>
  document.body = document.createElementNS("http://www.w3.org/1999/xhtml", "body");
  console.assert(document.body === null);
 </script>
</svg>

document.images Document/images 所有当前引擎都支持。 Firefox1+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer4+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+: 返回一个HTMLCollection，其中包含img元素在Document中。
document.embeds Document/embeds 所有当前引擎都支持。 Firefox1+Safari10.1+Chrome64+ Opera51+Edge79+ Edge (旧版)12+Internet Explorer4+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+
document.plugins Document/plugins 所有当前引擎都支持。 Firefox1+Safari10.1+Chrome64+ Opera51+Edge79+ Edge (旧版)12+Internet Explorer4+ Firefox Android?Safari iOS10.3+Chrome Android?WebView Android?Samsung Internet?Opera Android47+: 返回一个HTMLCollection，其中包含embed元素在Document中。
document.links Document/links 所有当前引擎都支持。 Firefox1+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer4+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+: 返回一个HTMLCollection，其中包含a和area元素在Document中具有href属性。
document.forms Document/forms 所有当前引擎都支持。 Firefox1+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer4+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+: 返回一个 HTMLCollection，包含在 form 元素的 Document 中。
document.scripts Document/scripts 所有当前引擎都支持。 Firefox1+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer4+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+: 返回一个HTMLCollection，包含script元素在Document中。

images属性必须返回一个根植于HTMLCollection在Document节点，过滤器仅匹配img元素。

embeds属性必须返回一个根植于HTMLCollection在Document节点，过滤器仅匹配embed元素。

plugins属性必须返回与embeds属性返回的对象相同的对象。

links属性必须返回一个根植于HTMLCollection在Document节点，过滤器仅匹配带有a元素的href属性和带有area元素的href属性。

forms属性必须返回一个HTMLCollection的根节点在文档节点，过滤器仅匹配form元素。

scripts属性必须返回一个HTMLCollection的根节点在文档节点，过滤器仅匹配script元素。

collection = document.getElementsByName(name) Document/getElementsByName Support in all current engines. Firefox1+Safari1+Chrome1+ Opera5+Edge79+ Edge (旧版)12+Internet Explorer5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+: 返回一个NodeList的元素在文档中有name属性值为name。

getElementsByName(elementName)方法步骤是返回一个实时 NodeList包含文档中所有有name属性值为elementName的HTML 元素，按树顺序。当该方法再次在文档对象上使用相同的参数调用时，用户代理可以返回与之前调用返回的对象相同的对象。在其他情况下，必须返回一个新的NodeList对象。

document.currentScript Document/currentScript Support in all current engines. Firefox4+Safari8+Chrome29+ Opera?Edge79+ Edge (旧版)12+Internet ExplorerNo Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回script元素，或者SVG script元素，当前正在执行的脚本，只要该元素代表一个经典脚本。在递归脚本执行的情况下，返回最早开始执行但尚未完成执行的脚本。

如果文档当前没有执行script或SVG script元素（例如，因为正在运行的脚本是事件处理程序或超时），或者当前正在执行的script或SVG script元素代表一个模块脚本，则返回 null。

currentScript属性，在获取时，必须返回最近设置的值。当文档创建时，currentScript必须初始化为 null。

此 API 在实现者和标准社区中已经失宠，因为它全局暴露script或SVG script元素。因此，它在较新的上下文中不可用，例如运行模块脚本或在影子树中运行脚本时。我们正在研究在这种上下文中识别运行脚本的新解决方案，这不会使其全局可用：请参见问题#1013。

接口Document支持命名属性。支持的属性名称在文档对象document的任何时刻包括以下内容，按贡献它们的元素的树顺序，忽略后面的重复项，值来自id属性在来自name属性的值之前贡献相同时：

所有暴露的embed，form，iframe，img和暴露的object元素，其name内容属性的值不为空且在文档树中的document作为其根根；
所有暴露的object元素，其id内容属性的值不为空且在文档树中的document作为其根根；
所有img元素，其id内容属性的值不为空且其name内容属性也不为空，并且在文档树中的document作为其根根。

为了确定命名属性name的值对于文档，用户代理必须返回使用以下步骤获得的值：

让elements成为带有name的命名元素的列表，这些元素在文档树中的文档作为其根根。

会有至少一个这样的元素，因为该算法否则不会被由 Web IDL 调用。
如果elements只有一个元素，并且该元素是iframe元素，并且该iframe元素的内容可导航不为 null，则返回该元素的活动WindowProxy。
否则，如果elements只有一个元素，则返回该元素。
否则，返回一个HTMLCollection的根节点在文档节点，过滤器仅匹配具有名称name的命名元素。

命名元素带有名称name，对于上述算法而言，是那些要么是：

暴露的embed，form，iframe，img或暴露的object元素，其name内容属性的值为name，或者
暴露的object元素，其id内容属性的值为name，或者
img元素，其id内容属性的值为name，并且该元素也具有非空的name内容属性。

embed或object元素被称为暴露的如果它没有暴露的object祖先，并且对于object元素，此外，还没有显示其回退内容或没有object或embed后代。

dir属性在文档接口中与dir内容属性一起定义。

3.2 元素

3.2.1 语义

HTML中的元素、属性和属性值被定义为具有某些意义（语义）。例如，ol元素表示一个有序列表，lang属性表示内容的语言。

这些定义使HTML处理器（如网络浏览器或搜索引擎）能够在作者可能没有考虑到的各种环境中展示和使用文档和应用程序。

作为一个简单的例子，考虑一个仅考虑桌面计算机网络浏览器的作者编写的网页：

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>My Page</title>
 </head>
 <body>
  <h1>Welcome to my page</h1>
  <p>I like cars and lorries and have a big Jeep!</p>
  <h2>Where I live</h2>
  <p>I live in a small hut on a mountain!</p>
 </body>
</html>

因为HTML传达的是意义，而不是展示，同样的页面也可以被移动电话上的小型浏览器使用，而无需对页面进行任何更改。例如，移动电话上的浏览器可能会使用整个页面相同大小的文本，而不是像在桌面上一样的大字体，但标题部分会使用加粗。

这不仅仅是屏幕尺寸的差异：同样的页面也可以被盲人使用，他们使用基于语音合成的浏览器，这种浏览器不是在屏幕上显示页面，而是通过耳机等方式将页面读给用户听。例如，语音浏览器可能会使用不同的音量或较慢的语速来代替大字体来处理标题。

不仅如此。因为浏览器知道页面的哪些部分是标题，它们可以创建一个文档大纲，用户可以使用“跳到下一个标题”或“跳到上一个标题”的键快速导航文档。这种功能在语音浏览器中特别常见，否则用户会发现快速导航页面相当困难。

甚至超越浏览器，软件也可以利用这些信息。搜索引擎可以使用标题更有效地索引页面，或在其结果中提供到页面各部分的快速链接。工具可以使用标题创建目录（实际上，这正是本规范的目录生成方式）。

这个例子主要关注标题，但相同的原理适用于HTML中的所有语义。

作者不得将元素、属性或属性值用于其预期语义目的以外的用途，因为这样会导致软件无法正确处理页面。

例如，以下代码片段，旨在表示企业网站的标题，是不符合规范的，因为第二行不是子部分的标题，而仅仅是副标题（同一部分的从属标题）。

<body>
<h1>ACME Corporation</h1>
<h2>The leaders in arbitrary fast delivery since 1920</h2>
...

hgroup元素可以用于这种情况：

<body>
 <hgroup>
  <h1>ACME Corporation</h1>
  <p>The leaders in arbitrary fast delivery since 1920</p>
 </hgroup>
 ...

下一个示例中的文档尽管在语法上是正确的，但在语义上是不符合规范的，因为单元格中的数据显然不是表格数据，并且错误使用了cite元素：

<!DOCTYPE HTML>
<html lang="en-GB">
 <head> <title> Demonstration </title> </head>
 <body>
  <table>
   <tr> <td> My favourite animal is the cat. </td> </tr>
   <tr>
    <td>
     —<a href="https://example.org/~ernest/"><cite>Ernest</cite></a>,
     in an essay from 1992
    </td>
   </tr>
  </table>
 </body>
</html>

这会导致依赖这些语义的软件出现故障：例如，允许盲人用户导航文档中的表格的语音浏览器会将上述引用报告为表格，从而使用户感到困惑；同样，提取页面标题的工具会将“Ernest”提取为作品的标题，尽管它实际上是一个人的名字，而不是标题。

该文档的更正版本可能如下：

<!DOCTYPE HTML>
<html lang="en-GB">
 <head> <title> Demonstration </title> </head>
 <body>
  <blockquote>
   <p> My favourite animal is the cat. </p>
  </blockquote>
  <p>
   —<a href="https://example.org/~ernest/">Ernest</a>,
   in an essay from 1992
  </p>
 </body>
</html>

作者不得使用本规范或其他适用规范不允许的元素、属性或属性值，因为这样会使将来扩展语言变得非常困难。

在下一个例子中，有一个不符合规范的属性值（“carpet”）和一个不符合规范的属性（“texture”），它们不被本规范允许：

<label>Carpet: <input type="carpet" name="c" texture="deep pile"></label>

这是标记这种内容的另一种正确方式：

<label>Carpet: <input type="text" class="carpet" name="c" data-texture="deep pile"></label>

其节点文档的浏览上下文为null的DOM节点不受所有文档一致性要求的约束，除了HTML语法要求和XML语法要求。

特别是，template元素的模板内容的节点文档的浏览上下文为null。例如，内容模型要求和属性值微语法要求不适用于template元素的模板内容。在这个示例中，一个img元素具有在template元素之外无效的占位符属性值。

<template>
 <article>
  <img src="{{src}}" alt="{{alt}}">
  <h1></h1>
 </article>
</template>

然而，如果上面的标记省略了</h1>结束标签，那将违反HTML语法，并因此被一致性检查器标记为错误。

通过脚本和其他机制，属性值、文本，甚至整个文档的结构可以在用户代理处理时动态变化。某一时刻文档的语义是由该时刻文档的状态表示的，因此文档的语义可能随时间变化。用户代理必须在这种变化发生时更新其对文档的展示。

HTML有一个progress元素描述进度条。如果其“value”属性由脚本动态更新，UA将更新渲染以显示进度的变化。

3.2.2 DOM中的元素

DOM中表示HTML元素的节点必须实现并向脚本公开本规范相关部分列出的接口。这包括在HTML元素在XML文档中，即使这些文档在另一个上下文中（例如在XSLT转换内）。

DOM中的元素代表事物；也就是说，它们具有内在的意义，也称为语义。

例如，一个ol元素代表一个有序列表。

元素可以通过某种方式显式或隐式地被引用。DOM中的元素可以通过给元素一个id属性，然后创建一个超链接，使用该id属性的值作为片段标识符，来显式引用该元素。然而，引用并不需要超链接；任何引用该元素的方法都可以。

考虑以下被赋予id属性的figure元素：

<figure id="module-script-graph">
  <img src="module-script-graph.svg"
       alt="Module A depends on module B, which depends
            on modules C and D.">
  <figcaption>Figure 27: a simple module graph</figcaption>
</figure>

可以使用超链接元素a创建一个基于超链接的引用，如下所示：

As we can see in <a href="#module-script-graph">figure 27</a>, ...

然而，还有许多其他方法可以引用该figure元素，例如：

“如模块A、B、C和D的图中所示...”
“在图27中...”（没有超链接）
“从‘简单模块图’图的内容中...”
“在下面的图中...”（但不推荐这样做）

所有HTML元素接口继承的基本接口，并且必须由没有其他要求的元素使用的是HTMLElement接口。

HTMLElement

所有当前引擎支持。

Firefox1+Safari1+Chrome1+

Opera8+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android1+Samsung Internet?Opera Android10.1+

HTMLUnknownElement

所有当前引擎支持。

Firefox1+Safari6+Chrome15+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

[Exposed=Window]
interface HTMLElement : Element {
  [HTMLConstructor] constructor();

  // metadata attributes
  [CEReactions] attribute DOMString title;
  [CEReactions] attribute DOMString lang;
  [CEReactions] attribute boolean translate;
  [CEReactions] attribute DOMString dir;

  // user interaction
  [CEReactions] attribute (boolean or unrestricted double or DOMString)? hidden;
  [CEReactions] attribute boolean inert;
  undefined click();
  [CEReactions] attribute DOMString accessKey;
  readonly attribute DOMString accessKeyLabel;
  [CEReactions] attribute boolean draggable;
  [CEReactions] attribute boolean spellcheck;
  [CEReactions] attribute DOMString writingSuggestions;
  [CEReactions] attribute DOMString autocapitalize;
  [CEReactions] attribute boolean autocorrect;

  [CEReactions] attribute [LegacyNullToEmptyString] DOMString innerText;
  [CEReactions] attribute [LegacyNullToEmptyString] DOMString outerText;

  ElementInternals attachInternals();

  // The popover API
  undefined showPopover();
  undefined hidePopover();
  boolean togglePopover(optional boolean force);
  [CEReactions] attribute DOMString? popover;
};

HTMLElement includes GlobalEventHandlers;
HTMLElement includes ElementContentEditable;
HTMLElement includes HTMLOrSVGElement;

[Exposed=Window]
interface HTMLUnknownElement : HTMLElement {
  // Note: intentionally no [HTMLConstructor]
};

HTMLElement接口包含与许多不同特性相关的方法和属性，因此该接口的成员在本规范的各个不同部分中进行了描述。

HTML命名空间中名称为name的元素的元素接口确定如下：

如果name是applet、bgsound、blink、isindex、keygen、multicol、nextid或spacer，则返回HTMLUnknownElement。
如果name是acronym、basefont、big、center、nobr、noembed、noframes、plaintext、rb、rtc、strike或tt，则返回HTMLElement。
如果name是listing或xmp，则返回HTMLPreElement。
否则，如果本规范定义了与局部名称name对应的元素类型的适当接口，则返回该接口。
如果其他适用规范定义了name的适当接口，则返回它们定义的接口。
如果name是有效的自定义元素名称，则返回HTMLElement。
返回HTMLUnknownElement。

在有效的自定义元素名称的情况下，使用HTMLElement而不是HTMLUnknownElement是为了确保任何潜在的未来升级只会导致元素原型链的线性过渡，从HTMLElement到子类，而不是从HTMLUnknownElement到不相关的子类的横向过渡。

HTML和SVG元素之间共享的特性使用HTMLOrSVGElement接口混入：[SVG]

interface mixin HTMLOrSVGElement {
  [SameObject] readonly attribute DOMStringMap dataset;
  attribute DOMString nonce; // intentionally no [CEReactions]

  [CEReactions] attribute boolean autofocus;
  [CEReactions] attribute long tabIndex;
  undefined focus(optional FocusOptions options = {});
  undefined blur();
};

以下示例展示了一个既不是HTML元素也不是SVG元素的元素创建方式：

const el = document.createElementNS("some namespace", "example");
console.assert(el.constructor === Element);

3.2.3 HTML元素构造函数

为了支持自定义元素功能，所有HTML元素都有特殊的构造函数行为。这是通过[HTMLConstructor] IDL扩展属性来表示的。它表明给定接口的接口对象在调用时将具有特定行为，详见以下定义。

[HTMLConstructor]扩展属性不得带有参数，并且只能出现在构造函数操作上。它必须仅在构造函数操作上出现一次，并且接口必须仅包含单个带注释的构造函数操作，而没有其他的。带注释的构造函数操作必须声明为不带参数。

带有[HTMLConstructor]扩展属性的构造函数操作的接口具有以下覆盖的构造函数步骤：

令registry为当前全局对象的CustomElementRegistry对象。
如果NewTarget等于活动函数对象，则抛出TypeError。
这种情况可能发生在使用元素接口作为其构造函数定义自定义元素时：
```
customElements.define("bad-1", HTMLButtonElement);
new HTMLButtonElement();          // (1)
document.createElement("bad-1");  // (2)
```
在这种情况下，在执行HTMLButtonElement（显式调用如（1），或隐式调用如（2））时，活动函数对象和NewTarget都是HTMLButtonElement。如果没有此检查，就可能创建本地名称为bad-1的HTMLButtonElement实例。
令definition为registry中构造函数等于NewTarget的条目。如果没有这样的定义，则抛出TypeError。

由于registry中不能有构造函数为undefined的条目，因此此步骤还防止HTML元素构造函数作为函数被调用（因为在这种情况下NewTarget将为undefined）。
令is value为null。
如果definition的本地名称等于definition的名称（即definition是独立自定义元素），则：
1. 如果活动函数对象不是HTMLElement，则抛出TypeError。
  这种情况可能发生在定义不扩展任何本地名称但继承自非HTMLElement类的自定义元素时：
```
customElements.define("bad-2", class Bad2 extends HTMLParagraphElement {});
```
  在这种情况下，在构造Bad2实例时发生的（隐式）super()调用期间，活动函数对象是HTMLParagraphElement，而不是HTMLElement。
否则（即definition是定制内建元素），则：
1. 令valid local names为在本规范或其他适用规范中定义的使用活动函数对象作为其元素接口的元素的本地名称列表。
2. 如果valid local names不包含definition的本地名称，则抛出TypeError。
  这种情况可能发生在定义扩展给定本地名称但继承自错误类的自定义元素时：
```
customElements.define("bad-3", class Bad3 extends HTMLQuoteElement {}, { extends: "p" });
```
  在这种情况下，在构造Bad3实例时发生的（隐式）super()调用期间，valid local names是包含q和blockquote的列表，但definition的本地名称是p，它不在该列表中。
3. 将is value设置为definition的名称。
如果definition的构造栈为空，则：
1. 令element为内部创建一个实现接口的新对象的结果，该接口与活动函数对象对应，给定当前领域和NewTarget。
2. 将element的节点文档设置为当前全局对象的关联的Document。
3. 将element的命名空间设置为HTML命名空间。
4. 将element的命名空间前缀设置为null。
5. 将element的本地名称设置为definition的本地名称。
6. 将element的自定义元素状态设置为“custom”。
7. 将element的自定义元素定义设置为definition。
8. 将element的is值设置为is value。
9. 返回element。
当作者脚本直接构造新的自定义元素时，例如通过new MyCustomElement()，会发生这种情况。
令prototype为？获取(NewTarget，“prototype”）。
如果类型(prototype)不是对象，则：
1. 令realm为？获取函数领域(NewTarget)。
2. 将prototype设置为realm的接口原型对象，其接口与活动函数对象相同。
活动函数对象的领域可能不是realm，因此我们使用跨领域的“相同接口”的更一般概念；我们不是在寻找接口对象的等同性。这种后备行为，包括使用NewTarget的领域并在那里查找适当的原型，旨在匹配JavaScript内置和Web IDL的内部创建实现接口的新对象算法的类似行为。
令element为definition的构造栈中的最后一个条目。

如果 element 是一个 已构造 标记，则抛出一个 TypeError。

这种情况可能发生在自定义元素构造函数中的作者代码不合规地在调用super()之前构造另一个正在构造的类的实例时：

let doSillyThing = true;

class DontDoThis extends HTMLElement {
  constructor() {
    if (doSillyThing) {
      doSillyThing = false;
      new DontDoThis();
      // Now the construction stack will contain an already constructed marker.
    }

    // This will then fail with a TypeError:
    super();
  }
}

这种情况也可能发生在自定义元素构造函数中的作者代码不合规地调用了两次super()时，因为根据JavaScript规范，这实际上会调用超类构造函数（即本算法）两次，然后抛出错误：

class DontDoThisEither extends HTMLElement {
  constructor() {
    super();

    // This will throw, but not until it has already called into the HTMLElement constructor
    super();
  }
}

执行？element.[[SetPrototypeOf]](prototype）。
将definition的构造栈中的最后一个条目替换为已经构造的标记。
返回element。

此步骤通常在升级自定义元素时到达；现有元素被返回，以便在自定义元素构造函数内的super()调用将该现有元素分配给this。

除了[HTMLConstructor]隐含的构造函数行为外，一些元素还具有命名构造函数（实际上是具有修改过的prototype属性的工厂函数）。

HTML元素的命名构造函数也可以在定义自定义元素构造函数时用在extends子句中：

class AutoEmbiggenedImage extends Image {
  constructor(width, height) {
    super(width * 10, height * 10);
  }
}

customElements.define("auto-embiggened", AutoEmbiggenedImage, { extends: "img" });

const image = new AutoEmbiggenedImage(15, 20);
console.assert(image.width === 150);
console.assert(image.height === 200);

3.2.4 元素定义

本规范中的每个元素都有一个定义，包含以下信息：

类别

元素所属类别的列表。这些类别用于定义每个元素的内容模型。

元素可以使用的上下文

元素可以使用的上下文的非规范性描述。这些信息与允许此元素作为子元素的元素的内容模型是冗余的，仅为方便提供。

为简洁起见，仅列出了最具体的期望。

例如，所有短语内容都是流内容。因此，属于短语内容的元素将仅列为“在期望短语内容的地方”，因为这是更具体的期望。任何期望流内容的地方也期望短语内容，因此也符合此期望。

内容模型

规范性描述了必须作为子元素和后代元素包含的内容。

在 text/html 中省略标签

在 text/html 语法中，是否可以省略开始和结束标签的非规范性描述。这些信息与规范要求是冗余的，仅为方便提供。

内容属性

规范性列出了可以在元素上指定的属性（除非另有禁止），以及这些属性的非规范性描述。（破折号左边的内容是规范性的，右边的内容则不是。）

无障碍考虑

对于作者：ARIA 角色和 aria-* 属性的符合性要求定义在 ARIA in HTML 中。[ARIA] [ARIAHTML]

对于实现者：用户代理实现无障碍 API 语义的要求定义在 HTML Accessibility API Mappings 中。[HTMLAAM]

DOM 接口

元素必须实现的 DOM 接口的规范性定义。

随后是元素代表什么的描述，以及可能适用于作者和实现的任何其他规范性符合标准。有时还包括示例。

3.2.4.1 属性

属性值是一个字符串。除非另有规定，HTML 元素上的属性值可以是任何字符串值，包括空字符串，对于这些属性值中可以指定的文本没有限制。

3.2.5 内容模型

本规范中定义的每个元素都有一个内容模型：该元素预期内容的描述。HTML元素必须包含符合其内容模型中描述的要求的内容。元素的内容是其在DOM中的子节点。

ASCII空白字符始终允许出现在元素之间。用户代理会在源标记中的这些字符之间表示为DOM中的文本节点。仅包含这些字符序列的空文本节点被视为元素间空白。

元素间空白、注释节点和处理指令节点在确定元素的内容是否符合其内容模型时，必须忽略这些节点，在遵循定义文档和元素语义的算法时，也必须忽略这些节点。

因此，如果元素A和第二个元素B具有相同的父节点，并且它们之间没有其他元素节点或文本节点（除了元素间空白），则可以说元素A是B的前驱或后继。同样，如果一个元素仅包含元素间空白、注释节点和处理指令节点，则该节点是该元素的唯一子节点。

作者不得在未明确允许的地方使用HTML元素，除非其他规范明确要求。对于XML复合文档，如果这些上下文是在其他命名空间中的元素内定义的，那么这些上下文可以在这些元素内。

Atom订阅格式定义了一个content元素。当其type属性的值为xhtml时，Atom订阅格式要求它包含一个HTML div元素。因此，div元素在该上下文中是允许的，尽管这并未明确地由本规范规范化地陈述。[ATOM]

此外，HTML元素可以是孤立的节点（即没有父节点）。

例如，在脚本中创建一个td元素并将其存储在全局变量中是符合规范的，尽管td元素通常只应该在tr元素中使用。

var data = {
  name: "Banana",
  cell: document.createElement('td'),
};

3.2.5.1 “nothing”内容模型

当一个元素的内容模型为nothing时，该元素不得包含任何文本节点（除了元素间空白）和任何元素节点。

大多数内容模型为“nothing”的HTML元素，为了方便起见，也是空元素（在HTML语法中没有结束标签的元素）。然而，这些概念是完全独立的。

3.2.5.2 内容种类

HTML中的每个元素属于一个或多个类别，这些类别将具有相似特征的元素分组在一起。本规范中使用了以下广泛类别：

元数据内容
流内容
分区内容
标题内容
短语内容
嵌入内容
交互内容

一些元素也属于其他类别，这些类别在本规范的其他部分定义。

这些类别的关系如下：

分区内容、标题内容、短语内容、嵌入内容和交互内容都是流内容的一种。元数据有时是流内容。元数据和交互内容有时是短语内容。嵌入内容也是一种短语内容，有时是交互内容。

其他类别也用于特定目的，例如，表单控件使用多个类别来定义通用要求。一些元素具有独特的要求，不属于任何特定类别。

3.2.5.2.1 元数据内容

元数据内容是设置其余内容的呈现或行为，或者设置文档与其他文档之间的关系，或者传递其他“带外”信息的内容。

来自其他命名空间的元素，其语义主要与元数据相关（例如RDF），也属于元数据内容。

因此，在XML序列化中，可以这样使用RDF：

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:r="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xml:lang="en">
 <head>
  <title>Hedral's Home Page</title>
  <r:RDF>
   <Person xmlns="http://www.w3.org/2000/10/swap/pim/contact#"
           r:about="https://hedral.example.com/#">
    <fullName>Cat Hedral</fullName>
    <mailbox r:resource="mailto:hedral@damowmow.com"/>
    <personalTitle>Sir</personalTitle>
   </Person>
  </r:RDF>
 </head>
 <body>
  <h1>My home page</h1>
  <p>I like playing with string, I guess. Sister says squirrels are fun
  too so sometimes I follow her to play with them.</p>
 </body>
</html>

然而，在HTML序列化中，这是不可能的。

3.2.5.2.2 流内容

大多数在文档和应用程序主体中使用的元素被归类为流内容。

3.2.5.2.3 分节内容

分节内容是定义header和footer元素作用范围的内容。

3.2.5.2.4 标题内容

标题内容定义了一个部分的标题（无论是显式标记为分节内容元素，还是由标题内容本身隐含）。

3.2.5.2.5 内联内容

内联内容是文档的文本，以及在段内级别标记这些文本的元素。内联内容的连续部分形成段落。

大多数被归类为短语内容的元素只能包含本身也是短语内容的元素，而不能包含任何流内容。

文本在内容模型的上下文中，意味着要么没有内容，要么包含文本节点。文本有时被单独用作内容模型，但也属于短语内容，并且可以是元素间空白（如果文本节点是空的或仅包含ASCII空白）。

文本节点和属性值必须由标量值组成，不包括非字符和控制字符，除ASCII空白外。

本规范根据具体上下文对文本节点和属性值的确切值提出了额外的约束。

3.2.5.2.6 嵌入内容

嵌入内容是将其他资源导入文档，或将来自其他词汇的内容插入文档的内容。

来自HTML命名空间以外的命名空间且传递内容但不传递元数据的元素，在本规范定义的内容模型中被视为嵌入内容。（例如，MathML或SVG。）

一些嵌入内容元素可以有后备内容：当外部资源无法使用时（例如，由于格式不支持），使用的内容。元素定义会说明后备内容的情况（如果有的话）。

3.2.5.2.7 交互内容

交互内容是专为用户交互设计的内容。

3.2.5.2.8 可感知内容

作为一般规则，允许任何流内容或短语内容的元素，其内容模型中应至少有一个节点是可感知内容，并且未指定hidden属性。

可感知内容通过提供一些后代非空的文本，使元素非空，或者提供用户可以听到的内容（如音频元素），或用户可以看到的内容（如视频、图片或画布元素），或与之交互的内容（例如，交互式表单控件）。

这一要求并不是硬性规定，因为在许多情况下，元素可以合法地为空，例如用作占位符，稍后会由脚本填充，或当元素是模板的一部分时，在某些页面上通常会填充，但在其他页面上可能不相关。

鼓励符合性检查器为作者提供一种机制，帮助他们查找未满足此要求的元素，作为一种创作辅助工具。

以下元素是可感知内容：

3.2.5.2.9 脚本支持元素

脚本支持元素是那些本身不表示任何内容的元素（即它们不被渲染），而是用于支持脚本，例如为用户提供功能。

以下元素是脚本支持元素：

3.2.5.3 透明内容模型

有些元素被描述为透明；它们的内容模型描述中包含“透明”一词。一个透明元素的内容模型源自其父元素的内容模型：在透明部分所需的元素与透明元素所在的父元素内容模型中所需的元素相同。

例如，一个ins 元素在ruby 元素内不能包含rt 元素，因为ruby 元素的内容模型允许ins 元素的部分是允许短语内容的部分，而rt 元素不是短语内容。

在某些情况下，透明元素嵌套在彼此之中，需要迭代地应用此过程。

考虑以下标记片段：

<p><object><param><ins><map><a href="/">Apples</a></map></ins></object></p>

要检查"Apples"是否允许在a 元素内，需要检查内容模型。a 元素的内容模型是透明的，map 元素的内容模型也是透明的，ins 元素的内容模型也是透明的，以及object 元素中包含ins 元素的部分也是透明的。object 元素包含在p 元素中，p元素的内容模型是短语内容。因此， "Apples"是允许的，因为文本是短语内容。

当一个透明元素没有父元素时，其内容模型中“透明”的部分必须改为接受任何流内容。

3.2.5.4 段落

本节定义的段落术语不仅仅用于p元素的定义。这里定义的段落概念用于描述如何解释文档。p元素只是标记段落的几种方式之一。

段落通常是一段形成文本块的短语内容，包含一个或多个讨论特定主题的句子，就像在排版中一样，但也可以用于更一般的主题分组。例如，一个地址也是一个段落，一个表单的一部分，一个署名，或诗的一节。

在以下示例中，有两段在一个部分中。还有一个标题，其中包含不是段落的短语内容。注意评论和元素间空白不构成段落。

<section>
  <h2>Example of paragraphs</h2>
  This is the <em>first</em> paragraph in this example.
  <p>This is the second.</p>
  <!-- This is not a paragraph. -->
</section>

在流内容中的段落相对于没有a、 ins、del和map元素的文档外观来定义，因为这些元素及其混合内容模型可以跨越段落边界，如下面的前两个示例所示。

通常，最好避免元素跨越段落边界。维护这样的标记可能很困难。

以下示例采用早期示例中的标记，并在一些标记周围放置ins和 del 元素，显示文本已更改（尽管在这种情况下，这些更改确实没有多大意义）。请注意，本示例与前一个示例具有完全相同的段落，尽管存在ins和 del 元素——ins元素跨越标题和第一个段落，del元素跨越两个段落之间的边界。

<section>
  <ins><h2>Example of paragraphs</h2>
  This is the <em>first</em> paragraph in</ins> this example<del>.
  <p>This is the second.</p></del>
  <!-- This is not a paragraph. -->
</section>

让view成为DOM的视图，用文档中的内容替换所有a、 ins、 del和 map 元素。然后，在view中，对于每个由其他类型内容不间断的兄弟短语内容节点组成的运行，在一个接受内容类型不仅限于短语内容以及短语内容的元素中，令first为运行的第一个节点，令last为运行的最后一个节点。对于每个由至少一个既不是嵌入内容也不是元素间空白的节点组成的运行，原始DOM中的一个段落存在于first之前到last之后。(因此段落可以跨越a、 ins、 del和 map 元素。)

符合性检查器可能会警告作者他们有段落相互重叠的情况（这种情况可能发生在object、 video、 audio 和 canvas 元素中，及通过允许HTML进一步嵌入其中的其他命名空间中的元素间接发生，如SVG svg或 MathML math）。

一个段落也可以通过p元素显式形成。

p元素可以用来包装单个段落，当除了短语内容外没有其他内容将段落彼此分开时。

在以下示例中，链接跨越了第一个段落的一半、分隔两个段落的标题和第二个段落的一半。它跨越了段落和标题。

<header>
 Welcome!
 <a href="about.html">
  This is home of...
  <h1>The Falcons!</h1>
  The Lockheed Martin multirole jet fighter aircraft!
 </a>
 This page discusses the F-16 Fighting Falcon's innermost secrets.
</header>

这是另一种标记方法，这次显示段落，并将一个链接元素拆分为三个：

<header>
 <p>Welcome! <a href="about.html">This is home of...</a></p>
 <h1><a href="about.html">The Falcons!</a></h1>
 <p><a href="about.html">The Lockheed Martin multirole jet
 fighter aircraft!</a> This page discusses the F-16 Fighting
 Falcon's innermost secrets.</p>
</header>

在使用某些定义回退内容的元素时，段落可能会重叠。例如，在以下部分中：

<section>
 <h2>My Cats</h2>
 You can play with my cat simulator.
 <object data="cats.sim">
  To see the cat simulator, use one of the following links:
  <ul>
   <li><a href="cats.sim">Download simulator file</a>
   <li><a href="https://sims.example.com/watch?v=LYds5xY4INU">Use online simulator</a>
  </ul>
  Alternatively, upgrade to the Mellblom Browser.
 </object>
 I'm quite proud of it.
</section>

共有五个段落：

段落说“你可以玩我的猫模拟器。object我对此非常自豪。”，其中object是object元素。
段落说“要查看猫模拟器，请使用以下链接之一：”。
段落说“下载模拟器文件”。
段落说“使用在线模拟器”。
段落说“或者，升级到Mellblom浏览器。”。

第一个段落被其他四个段落重叠。支持“cats.sim”资源的用户代理只会显示第一个段落，但显示回退内容的用户代理将混淆地显示第一个段落的第一句话，好像它在第二段落中一样，并将显示最后一个段落，好像它在第一段落的第二句的开头一样。

为了避免这种混淆，可以使用显式的p元素。例如：

<section>
 <h2>My Cats</h2>
 <p>You can play with my cat simulator.</p>
 <object data="cats.sim">
  <p>To see the cat simulator, use one of the following links:</p>
  <ul>
   <li><a href="cats.sim">Download simulator file</a>
   <li><a href="https://sims.example.com/watch?v=LYds5xY4INU">Use online simulator</a>
  </ul>
  <p>Alternatively, upgrade to the Mellblom Browser.</p>
 </object>
 <p>I'm quite proud of it.</p>
</section>

3.2.6 全局属性

Global_attributes

以下属性是所有HTML元素（即使那些未在本规范中定义的元素）共有的，并且可以在所有HTML元素上指定：

accesskey
autocapitalize
autocorrect
autofocus
contenteditable
dir
draggable
enterkeyhint
hidden
inert
inputmode
is
itemid
itemprop
itemref
itemscope
itemtype
lang
nonce
popover
spellcheck
style
tabindex
title
translate
writingsuggestions

这些属性仅在本规范中定义为HTML元素的属性。当本规范提到元素具有这些属性时，不应将未定义为具有这些属性的命名空间中的元素视为具有这些属性的元素。

例如，在以下XML片段中，"bogus"元素没有一个dir属性，尽管它具有一个字面名称为"dir"的属性。因此，内层span元素的方向性是'rtl'，间接从div元素继承，通过"bogus"元素。

<div xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
 <bogus xmlns="https://example.net/ns" dir="ltr">
  <span xmlns="http://www.w3.org/1999/xhtml">
  </span>
 </bogus>
</div>

Global_attributes/slot

Support in all current engines.

Firefox63+Safari10+Chrome53+

Opera?Edge79+

Edge (旧版)NoInternet Explorer?

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

DOM定义了用户代理对任何命名空间中的任何元素的class、id和slot属性的要求。 [DOM]

class、id 和slot属性可以在所有HTML元素上指定。

在HTML元素上指定时，class属性必须具有一个值，该值是由空格分隔的标记集，表示元素所属的各种类。

为元素分配类会影响CSS选择器中的类匹配、DOM中的getElementsByClassName()方法等功能。

作者可以在class属性中使用的标记没有其他限制，但鼓励作者使用描述内容性质的值，而不是描述内容所需呈现的值。

在HTML元素上指定时，id属性值在元素的树中的所有ID中必须是唯一的，并且必须包含至少一个字符。该值不得包含任何ASCII空白字符。

id属性指定了其元素的唯一标识符（ID）。

ID可以采取任何形式；特别是，ID可以仅由数字组成，以数字开头，以下划线开头，仅由标点符号组成等。

元素的唯一标识符可以用于多种目的，最著名的是作为使用片段链接到文档特定部分的方式，作为脚本定位元素的方式，以及从CSS样式化特定元素的方式。

标识符是不可解释的字符串。不应从id属性的值中推导出特定含义。

对于HTML元素，slot属性没有特定的符合性要求。

这个slot属性用于分配插槽给一个元素：具有slot属性的元素被分配给由slot元素创建的插槽，其name属性的值与该slot属性的值匹配——但前提是该slot元素在其影子树中的根的宿主具有相应的slot属性值。

为了使辅助技术产品能够提供比HTML元素和属性更细粒度的接口，可以指定一组辅助技术产品的注释（ARIA role和aria-*属性）。 [ARIA]

以下事件处理程序内容属性可以在任何HTML元素上指定：

onauxclick
onbeforeinput
onbeforematch
onbeforetoggle
onblur*
oncancel
oncanplay
oncanplaythrough
onchange
onclick
onclose
oncontextlost
oncontextmenu
oncontextrestored
oncopy
oncuechange
oncut
ondblclick
ondrag
ondragend
ondragenter
ondragleave
ondragover
ondragstart
ondrop
ondurationchange
onemptied
onended
onerror*
onfocus*
onformdata
oninput
oninvalid
onkeydown
onkeypress
onkeyup
onload*
onloadeddata
onloadedmetadata
onloadstart
onmousedown
onmouseenter
onmouseleave
onmousemove
onmouseout
onmouseover
onmouseup
onpaste
onpause
onplay
onplaying
onprogress
onratechange
onreset
onresize*
onscroll*
onscrollend*
onsecuritypolicyviolation
onseeked
onseeking
onselect
onslotchange
onstalled
onsubmit
onsuspend
ontimeupdate
ontoggle
onvolumechange
onwaiting
onwheel

带星号的属性在body元素上指定时有不同的含义，因为这些元素公开具有相同名称的事件处理程序的Window对象。

虽然这些属性适用于所有元素，但并不是在所有元素上都有用。例如，只有媒体元素才会接收到由用户代理触发的volumechange事件。

自定义数据属性（例如data-foldername或data-msgid）可以在任何HTML元素上指定，用于存储自定义数据、状态、注释等与页面相关的内容。

在HTML文档中，HTML命名空间中的元素可以指定xmlns属性，但仅当且仅当其值为http://www.w3.org/1999/xhtml时才可以。这不适用于XML文档。

在HTML中，xmlns属性绝对没有效果。它基本上是一个护身符。允许它仅仅是为了使迁移到XML和从XML迁移变得稍微容易一些。当由HTML解析器解析时，该属性最终不在任何命名空间中，而不像XML中的命名空间声明属性那样位于http://www.w3.org/2000/xmlns/命名空间中。

在XML中，xmlns属性是命名空间声明机制的一部分，而一个元素实际上不能有一个未指定命名空间的xmlns属性。

XML还允许在XML命名空间中的任何元素上使用xml:space属性，该属性适用于XML文档。该属性对HTML元素没有影响，因为HTML中的默认行为是保留空白。[XML]

在text/html语法中，没有办法序列化HTML元素上的xml:space属性。

3.2.6.1 `title` 属性

Global_attributes/title

在所有当前引擎中支持。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

title 属性表示元素的建议信息，例如适合作为工具提示的信息。在链接上，这可以是目标资源的标题或描述；在图像上，它可以是图像来源或描述；在段落上，它可以是文本的脚注或评论；在引文上，它可以是关于来源的进一步信息；在交互内容上，它可以是该元素的标签或使用说明；等等。值为文本。

目前不建议依赖title属性，因为许多用户代理不按照本规范要求以可访问的方式展示该属性（例如，需要使用指针设备如鼠标才能使工具提示出现，这排除了仅使用键盘的用户和仅使用触摸的用户，如任何使用现代手机或平板电脑的人）。

如果一个元素没有这个属性，那么它意味着最近的祖先HTML 元素的title属性也适用于该元素。设置这个属性会覆盖这种继承，明确声明任何祖先的建议信息对这个元素不适用。将该属性设置为空字符串表示该元素没有建议信息。

如果title属性的值包含U+000A换行符（LF）字符，内容会被分成多行。每个U+000A换行符（LF）字符代表一个换行。

在title属性中使用换行符时需要小心。

例如，以下代码段实际上定义了带有换行符的缩写解释：

<p>My logs show that there was some interest in <abbr title="Hypertext
Transport Protocol">HTTP</abbr> today.</p>

一些元素，如link，abbr，和input，对title属性定义了额外的语义。

元素的建议信息是以下算法返回的值，一旦返回值，算法将终止。当算法返回空字符串时，则表示没有建议信息。

如果元素有title属性，则返回对其值运行规范化换行符的结果。
如果元素有父元素，则返回父元素的建议信息。
返回空字符串。

用户代理应在元素有建议信息时通知用户，否则这些信息将不可发现。

HTMLElement/title

在所有当前引擎中支持。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

title IDL 属性必须反映title内容属性。

3.2.6.2 `lang` 和 `xml:lang` 属性

Global_attributes/lang

在所有当前引擎中支持。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

lang 属性（不在任何命名空间中）指定元素内容的主要语言以及任何包含文本的元素属性。其值必须是有效的 BCP 47 语言标签，或为空字符串。将该属性设置为空字符串表示主要语言未知。[BCP47]

lang 属性在XML 命名空间中定义于 XML 中。[XML]

如果这些属性在元素中省略，那么该元素的语言与其父元素的语言相同（如果有父元素）（slot 元素在shadow tree 中除外）。

没有命名空间的 lang 属性可以用于任何HTML 元素。

lang 属性在 XML 命名空间中可以用于HTML 元素在XML 文档中，以及其他命名空间中的元素，如果相关规范允许的话（特别是 MathML 和 SVG 允许在其元素上指定 lang 属性在 XML 命名空间）。如果在同一元素上同时指定了没有命名空间的 lang 属性和 lang 属性在 XML 命名空间，则它们在 ASCII 大小写不敏感的情况下必须具有完全相同的值。

作者不得在HTML 元素在HTML 文档中使用lang 属性在 XML 命名空间。为了便于向 XML 的迁移，作者可以在HTML 元素在HTML 文档中指定一个没有命名空间、没有前缀且具有字面局部名“xml:lang”的属性，但只有在同时指定了没有命名空间的 lang 属性时，才能指定这种属性，并且在 ASCII 大小写不敏感的情况下，两个属性的值必须相同。

没有命名空间、没有前缀且具有字面局部名“xml:lang”的属性对语言处理没有影响。

为了确定节点的语言，用户代理必须使用以下列表中的第一个适用步骤：

如果节点是一个具有lang 属性在 XML 命名空间的元素: 使用该属性的值。
如果节点是一个HTML 元素或SVG 命名空间中的元素，并且它具有没有命名空间的 lang 属性: 使用该属性的值。
如果节点的父节点是shadow root: 使用该语言的 shadow root的主机。
如果节点的父元素不为空: 使用该语言的父元素。
否则: 如果设置了默认语言，则该节点的语言为该语言。如果没有设置默认语言，则必须使用来自更高层协议（如 HTTP）的语言信息（如果有）作为最终的回退语言。如果没有任何这种语言信息，并且在更高层协议中报告了多种语言，则该节点的语言未知，相应的语言标签为空字符串。

如果结果值不是识别的语言标签，则必须将其视为具有给定语言标签的未知语言，与所有其他语言不同。为了进行回绕或与期望语言标签的其他服务进行通信，用户代理应该将未知的语言标签不作修改地传递，并标记为 BCP 47 语言标签，以便后续服务不会将数据解释为另一种类型的语言描述。[BCP47]

因此，例如，带有lang="xyzzy"的元素将被选择器:lang(xyzzy)（例如在 CSS 中）匹配，但不会被:lang(abcde)匹配，即使两者同样无效。同样，如果网络浏览器和屏幕阅读器共同工作，浏览器会告知屏幕阅读器该元素的语言是“xyzzy”，即使它知道这是无效的，只是以防屏幕阅读器实际上支持该标签的语言。即使屏幕阅读器同时支持 BCP 47 和另一种语法来编码语言名称，并且在另一种语法中字符串“xyzzy”是一种表示白俄罗斯语的方式，屏幕阅读器将文本视为白俄罗斯语是错误的，因为“xyzzy”不是 BCP 47 编码中描述白俄罗斯语的方式（BCP 47 使用代码“be”表示白俄罗斯语）。

如果结果值为空字符串，则必须将其解释为该节点的语言明确未知。

用户代理可以使用元素的语言来确定适当的处理或渲染（例如在选择适当的字体或发音，字典选择，或表单控件如日期选择器的用户界面）。

HTMLElement/lang

在所有当前引擎中支持。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

lang IDL 属性必须反映没有命名空间的lang内容属性。

3.2.6.3 `translate` 属性

Global_attributes/translate

在所有当前引擎中支持。

Firefox111+Safari6+Chrome19+

Opera?Edge79+

Edge (旧版)?Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

translate 属性用于指定在页面本地化时，是否翻译元素的属性值及其文本节点子元素的值，还是保持它们不变。该属性是一个枚举属性，具有以下关键字和状态：

关键字	状态	简短描述
`yes`	yes	将翻译模式设置为翻译启用。
(空字符串)	yes	将翻译模式设置为翻译启用。
`no`	no	将翻译模式设置为不翻译。

属性的缺省值和无效值缺省都是继承状态。

每个元素（即使是非 HTML 元素）都有一个翻译模式，可以是翻译启用状态，也可以是不翻译状态。如果HTML 元素的translate属性处于yes状态，则该元素的翻译模式处于翻译启用状态；否则，如果该元素的translate属性处于no状态，则该元素的翻译模式处于不翻译状态。否则，元素的translate属性处于继承状态，或者该元素不是HTML 元素，因此没有translate属性；无论哪种情况，元素的翻译模式与其父元素的状态相同，如果有的话，或者如果元素的父元素为空，则处于翻译启用状态。

当元素处于翻译启用状态时，元素的可翻译属性及其文本节点子元素的值在页面本地化时应被翻译。

当元素处于不翻译状态时，元素的属性值及其文本节点子元素的值在页面本地化时应保持不变，例如因为该元素包含个人姓名或计算机程序的名称。

以下属性是可翻译属性：

abbr在th元素上
alt在area、img和input元素上
content在meta元素上，如果name属性指定了已知可翻译的元数据名称
download在a和area元素上
label在optgroup、option和track元素上
lang在HTML 元素上；必须“翻译”以匹配翻译中使用的语言
placeholder在input和textarea元素上
srcdoc在iframe元素上；必须解析并递归处理
style在HTML 元素上；必须解析并递归处理（例如，对于'content'属性的值）
title在所有HTML 元素上
value在具有input元素中的type属性处于按钮状态或重置按钮状态时。

其他规范可以定义其他也是可翻译属性的属性。例如，ARIA将定义aria-label属性为可翻译属性。

translate IDL 属性在获取时，如果元素的翻译模式是翻译启用，则返回 true，否则返回 false。设置时，如果新值为 true，则必须将内容属性的值设置为“yes”，否则将内容属性的值设置为“no”。

在此示例中，文档中的所有内容在页面本地化时应被翻译，除了示例键盘输入和示例程序输出：

<!DOCTYPE HTML>
<html lang=en> <!-- default on the document element is translate=yes -->
 <head>
  <title>The Bee Game</title> <!-- implied translate=yes inherited from ancestors -->
 </head>
 <body>
  <p>The Bee Game is a text adventure game in English.</p>
  <p>When the game launches, the first thing you should do is type
  <kbd translate=no>eat honey</kbd>. The game will respond with:</p>
  <pre><samp translate=no>Yum yum! That was some good honey!</samp></pre>
 </body>
</html>

3.2.6.4 `dir` 属性

Global_attributes/dir

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)?Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The dir attribute 是一个枚举属性，具有以下关键字和状态：

关键字	状态	简要描述
`ltr`	ltr	元素内容是明确方向隔离的从左到右文本。
`rtl`	rtl	元素内容是明确方向隔离的从右到左文本。
`auto`	auto	元素内容是明确方向隔离的文本，但方向应通过程序根据元素内容确定（如下所述）。

auto状态使用的启发式方法非常粗略（它只看具有强方向性的第一个字符，类似于双向算法中的段落级确定）。建议作者仅在文本方向确实未知且无法应用更好的服务器端启发式方法时才使用此值。[BIDI]

对于textarea和pre元素，启发式方法是逐段应用的。

该属性的缺省值和无效值缺省都是未定义状态。

元素（任何元素，不仅是HTML元素）的方向性要么是'ltr'，要么是'rtl'。给定元素element的方向性的计算方法如下：

ltr

返回'ltr'。

rtl

返回'rtl'。

auto

让result成为element的自动方向性。
如果result为null，则返回'ltr'。
返回result。

undefined

如果element是bdi元素

让result成为element的自动方向性。
如果result为null，则返回'ltr'。
返回result。

如果element是input元素且其type属性处于电话状态

返回'ltr'。

否则

返回element的父方向性。

由于dir属性仅对HTML元素定义，它不能出现在其他命名空间的元素上。因此，其他命名空间的元素总是使用父方向性。

自动方向性表单关联元素包括：

input元素，其type属性处于隐藏、文本、搜索、电话、URL、电子邮件、密码、提交按钮、重置按钮或按钮状态。
textarea元素。

给定元素element的自动方向性的计算方法如下：

如果 element 是一个自动方向性关联表单元素:
1. 如果 element 的值包含一个双向字符类型为 AL 或 R 的字符，并且在元素的值中该字符之前没有任何双向字符类型为 L 的字符，则返回 'rtl'。 [BIDI]
2. 如果 element 的值不是空字符串，则返回 'ltr'。
3. 返回 null。
如果 element 是一个 slot 元素，且其根是一个 shadow root 并且 element 的已分配节点不为空：
1. 对于每个 element 的已分配节点的节点 child：
  1. 设 childDirection 为 null。
  2. 如果 child 是一个 Text 节点，则将 childDirection 设置为 child 的文本节点方向性。
  3. 否则：
    1. 断言：child 是一个 Element 节点。
    2. 将 childDirection 设置为 child 的包含文本自动方向性，其中canExcludeRoot 设置为 true。
  4. 如果 childDirection 不是 null，则返回 childDirection。
2. 返回 null。
返回 element 的包含文本自动方向性，其中canExcludeRoot 设置为 false。

要计算元素 element 的包含文本自动方向性，且带有布尔值 canExcludeRoot：

对于每个 element 的后代节点，按树顺序：
1. 如果以下任意条件成立
  - descendant
  - 作为 element 后代的任何祖先元素
  - 如果 canExcludeRoot 为 true，element
  属于以下类型之一
  - 一个 bdi 元素
  - 一个 script 元素
  - 一个 style 元素
  - 一个 textarea 元素
  - 一个其 dir 属性不处于未定义状态的元素
  则继续。
2. 如果 descendant 是一个 slot 元素，并且其根是一个shadow root，则返回该方向性。
3. 如果 descendant 不是一个 Text 节点，则继续。
4. 设 result 为 descendant 的文本节点方向性。
5. 如果 result 不是 null，则返回 result。
返回 null。

要计算给定 Text 节点 text 的文本节点方向性：

如果 text 的数据不包含双向字符类型为 L、AL 或 R 的代码点，则返回 null。 [BIDI]
设 codePoint 为 text 的数据中第一个双向字符类型为 L、AL 或 R 的代码点。
如果 codePoint 的双向字符类型为 AL 或 R，则返回 'rtl'。
如果 codePoint 的双向字符类型为 L，则返回 'ltr'。

要计算给定元素 element 的父级方向性：

设 parentNode 为 element 的父节点。
如果 parentNode 是一个 shadow root，则返回 parentNode 的方向性，即 parentNode 的宿主的方向性。
如果 parentNode 是一个元素，则返回 parentNode 的方向性。
返回 'ltr'。

此属性涉及使用双向算法进行渲染。

HTML元素的一个属性的方向性，在该属性的文本要以某种方式包含在渲染中时，其确定方法如下：

如果该属性是支持方向性的属性，并且该元素的dir属性处于auto状态

查找属性值的第一个双向字符类型为L、AL或R的字符（按逻辑顺序）。[BIDI]

如果找到了这样的字符，并且它的双向字符类型为AL或R，则该属性的方向性为'rtl'。

否则，该属性的方向性为'ltr'。

否则

该属性的方向性与元素的方向性相同。

以下属性是支持方向性的属性：

abbr在th元素上
alt在area、img和input元素上
content在meta元素上，如果name属性指定的元数据名称主要是面向人类可读而不是机器可读
label在optgroup、option和track元素上
placeholder在input和textarea元素上
title在所有HTML元素上

document.dir [ = value ]

返回html元素的dir属性的值（如果有）。

可以设置为"ltr"、"rtl"或"auto"，以替换html元素的dir属性的值。

如果没有html元素，则返回空字符串并忽略新值。

HTMLElement/dir

Support in all current engines.

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

dir IDL属性在元素上必须反映该元素的dir内容属性，仅限于已知值。

Document/dir

Support in all current engines.

Firefox1+Safari10.1+Chrome64+

Opera51+Edge79+

Edge (旧版)12+Internet Explorer5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+

dir IDL属性在Document对象上必须反映 html元素的dir内容属性（如果有），仅限于已知值。如果没有这样的元素，则该属性必须返回空字符串并在设置时不执行任何操作。

作者强烈建议使用dir属性来指示文本方向，而不是使用CSS，因为这样即使在没有CSS的情况下（例如由搜索引擎解释），文档也会继续正确呈现。

此标记片段是即时消息对话的一部分。

<p dir=auto class="u1"><b><bdi>Student</bdi>:</b> How do you write "What's your name?" in Arabic?</p>
<p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> ما اسمك؟</p>
<p dir=auto class="u1"><b><bdi>Student</bdi>:</b> Thanks.</p>
<p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> That's written "شكرًا".</p>
<p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> Do you know how to write "Please"?</p>
<p dir=auto class="u1"><b><bdi>Student</bdi>:</b> "من فضلك", right?</p>

给定一个合适的样式表和p元素的默认对齐样式，即将文本对齐到段落的起始边缘，则生成的渲染结果可能如下所示：

每个段落呈现为一个独立的块，段落左对齐，除了第二段和最后一段，它们会右对齐，用户名（此示例中的“学生”和“老师”）靠右，左边有一个冒号，文本首先在左边。

如前所述，auto值不是灵丹妙药。此示例中的最后一个段落由于以阿拉伯字符开头而被误解为从右到左的文本，这导致“right?”出现在阿拉伯文本的左侧。

3.2.6.5 `style` 属性

Global_attributes/style

支持所有当前引擎。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

所有HTML元素都可以设置style 内容属性。这是一个样式属性，定义在 CSS Style Attributes中。[CSSATTR]

在支持CSS的用户代理中，当添加或更改属性值时，必须按照样式属性的规则解析该属性的值。 [CSSATTR]

但是，如果在执行应该通过内容安全政策阻止元素的内联行为吗？算法时返回“Blocked”，并在属性的元素、“style attribute”和属性的值上执行，那么属性值中定义的样式规则不得应用于元素。 [CSP]

使用任何元素的style 属性的文档，即使这些属性被删除，也必须能够理解和使用。

特别是，使用style 属性来隐藏和显示内容，或传达文档中未包含的意义，是不符合规范的。（要隐藏和显示内容，请使用hidden 属性。）

element.style: 返回元素CSSStyleDeclaration 对象的style 属性。

style IDL属性定义在 CSS Object Model中。[CSSOM]

在以下示例中，表示颜色的单词使用 span 元素和style 属性标记，以使这些单词在视觉媒体中显示为相关颜色。

<p>My sweat suit is <span style="color: green; background:
transparent">green</span> and my eyes are <span style="color: blue;
background: transparent">blue</span>.</p>

3.2.6.6 嵌入自定义不可见数据使用 `data-*` 属性

Global_attributes/data-*

在所有当前引擎中支持。

Firefox6+Safari5.1+Chrome7+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

自定义数据属性是一种没有命名空间的属性，其名称以字符串 "data-" 开头，在连字符之后至少有一个字符，并且 XML 兼容，且不包含 ASCII 大写字母。

在 HTML 元素的 HTML 文档中，所有属性名称都会自动转换为小写 ASCII 字母，因此对 ASCII 大写字母的限制不会影响这些文档。

自定义数据属性旨在存储页面或应用程序专有的自定义数据、状态、注释等，而没有更合适的属性或元素。

这些属性不应由使用这些属性的网站管理员未知的软件使用。对于要由多个独立工具使用的通用扩展，应通过扩展此规范来明确提供该功能，或者应使用诸如 microdata 之类的技术（使用标准化的词汇表）。

例如，一个关于音乐的网站可以使用自定义数据属性来注释代表专辑中曲目的列表项，包含每首曲目的长度。然后，该信息可以由网站本身使用，以允许用户按曲目长度对列表进行排序，或根据特定长度过滤列表。

<ol>
 <li data-length="2m11s">Beyond The Sea</li>
 ...
</ol>

然而，用户不应使用与该音乐网站无关的通用软件通过查看这些数据来搜索特定长度的曲目。

这是因为这些属性旨在由网站自己的脚本使用，而不是一个公共可用的元数据的通用扩展机制。

同样，页面作者可以编写标记来为他们打算使用的翻译工具提供信息：

<p>The third <span data-mytrans-de="Anspruch">claim</span> covers the case of <span
translate="no">HTML</span> markup.</p>

在此示例中，"data-mytrans-de" 属性为 MyTrans 产品在将短语 "claim" 翻译为德语时提供特定文本。然而，标准的 translate 属性用于告诉它在所有语言中 "HTML" 应保持不变。当有标准属性可用时，就不需要使用自定义数据属性。

在此示例中，自定义数据属性用于存储 PaymentRequest 功能检测的结果，可以在 CSS 中用于不同地设置结账页面的样式。

<script>
 if ('PaymentRequest' in window) {
   document.documentElement.dataset.hasPaymentRequest = '';
 }
</script>

在这里，data-has-payment-request 属性实际上被用作布尔属性；检查属性的存在就足够了。然而，如果作者愿意，它以后可以被填充一些值，可能是为了指示该功能的有限功能。

每个 HTML 元素可以指定任意数量的自定义数据属性，并且可以是任何值。

作者应仔细设计此类扩展，以便在忽略这些属性并丢弃任何相关的 CSS 时，页面仍然可用。

用户代理不得从这些属性或值中派生任何实现行为。针对用户代理的规范不得定义这些属性具有任何有意义的值。

JavaScript 库可以使用自定义数据属性，因为它们被视为使用它们的页面的一部分。鼓励被许多作者重复使用的库的作者在属性名称中包含他们的名字，以减少冲突的风险。如果合理的话，也鼓励库的作者使属性名称中的确切名称可定制，这样即使那些库的作者不知情地选择了相同的名称，也可以在同一页面上使用这些库，并且即使这些版本不相互兼容，也可以在同一页面上使用特定库的多个版本。

例如，一个名为 "DoQuery" 的库可以使用像 data-doquery-range 这样的属性名称，而一个名为 "jJo" 的库可以使用像 data-jjo-range 这样的属性名称。jJo 库还可以提供一个 API 来设置要使用的前缀（例如 J.setDataPrefix('j2')，使属性名称变为 data-j2-range）。

element.dataset HTMLElement/dataset 在所有当前引擎中支持。 Firefox6+Safari5.1+Chrome7+ Opera11+Edge79+ Edge (旧版)12+Internet Explorer11 Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android11+ SVGElement/dataset 在所有当前引擎中支持。 Firefox51+Safari5.1+Chrome55+ Opera41+Edge79+ Edge (旧版)17+Internet ExplorerNo Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android41+

返回一个 DOMStringMap 对象，用于元素的 data-* 属性。

连字符名称将变为驼峰形式。例如，data-foo-bar="" 变为 element.dataset.fooBar。

dataset IDL 属性为元素上的所有 data-* 属性提供了方便的访问器。在获取时，dataset IDL 属性必须返回一个 DOMStringMap，其关联的元素是此元素。

DOMStringMap 接口用于 dataset 属性。每个 DOMStringMap 都有一个关联元素。

[Exposed=Window,
 LegacyOverrideBuiltIns]
interface DOMStringMap {
  getter DOMString (DOMString name);
  [CEReactions] setter undefined (DOMString name, DOMString value);
  [CEReactions] deleter undefined (DOMString name);
};

要获取 DOMStringMap 的名称-值对，请运行以下算法：

让 list 成为空的名称-值对列表。
对于 DOMStringMap 的关联元素上的每个内容属性，其前五个字符是字符串 "data-"，其余字符（如果有）不包含任何 ASCII 大写字母，按这些属性在元素的属性列表中列出的顺序，为 list 添加一个名称-值对，其名称为去掉前五个字符后的属性名称，其值为属性的值。
对于 list 中的每个名称，对于名称中每个后面跟有一个 ASCII 小写字母的 U+002D 连字符，将 U+002D 连字符删除，并用相同字符转换为 ASCII 大写字母替换其后的字符。
返回 list。

在任何时刻，支持的属性名称在DOMStringMap对象上，是从获取DOMStringMap的名称-值对时返回的每对名称，在返回的顺序中。

要确定命名属性的值 name，对于 DOMStringMap，返回名称-值对列表中名称为 name 的值部分。

要设置新命名属性的值或设置现有命名属性的值对于 DOMStringMap，给定属性名称 name 和新值 value，运行以下步骤：

如果 name 包含一个后跟 ASCII 小写字母的 U+002D 连字符，则抛出一个 "SyntaxError" DOMException。
对于 name 中的每个 ASCII 大写字母，在该字符前插入一个 U+002D 连字符，并将该字符替换为相同字符转换为 ASCII 小写字母。
在 name 的前面插入字符串 data-。
如果 name 不匹配 XML 名称 生成规则，则抛出一个 "InvalidCharacterError" DOMException。
使用 name 和 value 为 DOMStringMap 的关联元素设置一个属性值。

要删除现有命名属性 name 对于 DOMStringMap，运行以下步骤：

对于 name 中的每个 ASCII 大写字母，在该字符前插入一个 U+002D 连字符，并将该字符替换为相同字符转换为 ASCII 小写字母。
在 name 的前面插入字符串 data-。
通过名称删除属性给定 name 和 DOMStringMap 的关联元素。

此算法只会由 Web IDL 为获取 DOMStringMap 的名称-值对的早期算法给定的名称调用。[WEBIDL]

如果一个网页希望一个元素代表一个飞船，例如作为游戏的一部分，它必须使用 class 属性以及 data-* 属性：

<div class="spaceship" data-ship-id="92432"
     data-weapons="laser 2" data-shields="50%"
     data-x="30" data-y="10" data-z="90">
 <button class="fire"
         onclick="spaceships[this.parentNode.dataset.shipId].fire()">
  Fire
 </button>
</div>

请注意，连字符的属性名称在 API 中变为驼峰形式。

给定以下片段和具有类似结构的元素：

<img class="tower" id="tower5" data-x="12" data-y="5"
     data-ai="robotarget" data-hp="46" data-ability="flames"
     src="towers/rocket.png" alt="Rocket Tower">

...可以想象一个函数 splashDamage() 需要一些参数，第一个是要处理的元素：

function splashDamage(node, x, y, damage) {
  if (node.classList.contains('tower') && // checking the 'class' attribute
      node.dataset.x == x && // reading the 'data-x' attribute
      node.dataset.y == y) { // reading the 'data-y' attribute
    var hp = parseInt(node.dataset.hp); // reading the 'data-hp' attribute
    hp = hp - damage;
    if (hp < 0) {
      hp = 0;
      node.dataset.ai = 'dead'; // setting the 'data-ai' attribute
      delete node.dataset.ability; // removing the 'data-ability' attribute
    }
    node.dataset.hp = hp; // setting the 'data-hp' attribute
  }
}

3.2.7 `innerText` 和 `outerText` 属性

HTMLElement/innerText

在所有当前引擎中支持。

Firefox45+Safari1+Chrome1+

Opera9.6+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android1+Samsung Internet?Opera Android10.1+

element.innerText [ = value ]

返回元素的“渲染后”文本内容。

可以设置，替换元素的子节点为给定值，但换行符会转换为 br 元素。

element.outerText [ = value ]

返回元素的“渲染后”文本内容。

可以设置，替换元素为给定值，但换行符会转换为 br 元素。

获取文本步骤，给定 HTMLElement element，如下：

如果 element 未被渲染或用户代理是非 CSS 用户代理，则返回 element 的后代文本内容。

这一步可能产生令人惊讶的结果，因为当对未被渲染的元素调用 innerText getter 时，它的文本内容会被返回，但当对被渲染的元素访问时，其所有未被渲染的子元素的文本内容将被忽略。
设 results 为一个新的空的列表。
对于 element 的每个子节点 node：
1. 设 current 为对 node 运行渲染文本收集步骤所得到的列表。results 中的每一项将是一个字符串或一个正整数（一个需要的换行符计数）。
  
  直观上，一个 需要的换行符计数 项表示在该点有一定数量的换行符，但它们可以与相邻的 需要的换行符计数 项的换行符合并，类似于 CSS 的边距折叠。
2. 将 current 中的每一项附加到 results。
移除 results 中所有空字符串项。
移除 results 开头或结尾的任何连续的 需要的换行符计数 项。
替换每个剩余的连续的 需要的换行符计数 项，以包含与该 需要的换行符计数 项中的最大值相同数量的 U+000A LF 码点的字符串。
返回 results 中字符串项的连接结果。

HTMLElement/outerText

在所有当前引擎中支持。

Firefox98+Safari1.3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android1+Samsung Internet?Opera Android12.1+

innerText 和 outerText getter 步骤是运行获取文本步骤，以 this 为参数。

渲染文本收集步骤，给定节点 node，如下：

对 node 的每个子节点按树顺序运行渲染文本收集步骤所得到的结果连接为一个列表。
如果 node 的计算值的 'visibility' 不是 'visible'，则返回 items。
如果 node 未被渲染，则返回 items。对于此步骤，如果计算值的 'display' 属性不是 'none'，则以下元素必须按如下描述行为：
- select 元素有一个关联的非替换内联 CSS 盒，其子盒仅包括 optgroup 和 option 元素子节点；
- optgroup 元素有一个关联的非替换块级 CSS 盒，其子盒仅包括 option 元素子节点；
- option 元素有一个关联的非替换块级 CSS 盒，其子盒与非替换块级 CSS 盒的正常行为相同。
items 可能由于 'display:contents' 而非空。
如果 node 是 Text 节点，则对于由 node 生成的每个 CSS 文本框，按内容顺序，计算应用 CSS 'white-space' 处理规则和 'text-transform' 规则后的文本，将 items 设置为结果字符串的列表，并返回 items。CSS 'white-space' 处理规则稍有修改：行尾的可折叠空格总是会被折叠，但只有当行是块的最后一行，或以 br 元素结尾时，才会被移除。软连字符应保留。[CSSTEXT]
如果 node 是 br 元素，则向 items 添加包含单个 U+000A LF 码点的字符串。
如果 node 的计算值的 'display' 是 'table-cell'，且 node 的 CSS 盒不是其包围的 'table-row' 盒的最后一个 'table-cell' 盒，则向 items 添加包含单个 U+0009 TAB 码点的字符串。
如果 node 的计算值的 'display' 是 'table-row'，且 node 的 CSS 盒不是最近的祖先 'table' 盒的最后一个 'table-row' 盒，则向 items 添加包含单个 U+000A LF 码点的字符串。
如果 node 是 p 元素，则在 items 的开头和结尾添加 2（一个需要的换行符计数）。
如果 node 的使用值的 'display' 是块级或 'table-caption'，则在 items 的开头和结尾添加 1（一个需要的换行符计数）。[CSSDISPLAY]

浮动和绝对定位的元素属于此类别。
返回 items。

请注意，大多数替换元素（例如 textarea、input 和 video —— 但不包括 button）的后代节点严格来说不会被 CSS 渲染，因此在此算法中没有 CSS 盒。

此算法可以概括为适用于范围。然后我们可以将其用作 Selection 的字符串化的基础，甚至可以直接在范围上公开它。请参阅 Bugzilla bug 10583。

设置内部文本步骤，给定 HTMLElement element 和字符串 value，如下：

设 fragment 为给定 element 的渲染文本片段。
替换所有 element 内的 fragment。

innerText setter 步骤是运行设置内部文本步骤。

outerText setter 步骤如下：

如果 this 的父节点为 null，则抛出 "NoModificationAllowedError" DOMException。
设 next 为 this 的下一个兄弟节点。
设 previous 为 this 的上一个兄弟节点。
设 fragment 为给定 value 的渲染文本片段，给定 this 的节点文档。
如果 fragment 没有子节点，则追加一个新的 Text 节点，其数据为空字符串，其节点文档是 this 的节点文档到 fragment。
用 this 在 this 的父节点内替换 fragment。
如果 next 非空且 next 的上一个兄弟节点是 Text 节点，则合并到下一个文本节点，给定 next 的上一个兄弟节点。
如果 previous 是 Text 节点，则合并到下一个文本节点，给定 previous。

渲染文本片段，给定字符串 input 和 Document document，运行以下步骤：

设 fragment 为一个新的 DocumentFragment，其节点文档为 document。
设 position 为位置变量，最初指向 input 的开头。
设 text 为空字符串。
当 position 未越过 input 的末尾时：
1. 收集从 input 给定 position 开始的非 U+000A LF 或 U+000D CR 的一系列码点，并将 text 设置为结果。
2. 如果 text 不是空字符串，则追加一个新的 Text 节点，其数据为 text，其节点文档为 document 到 fragment。
3. 当 position 未越过 input 的末尾，且 position 处的码点为 U+000A LF 或 U+000D CR 时：
  1. 如果 position 处的码点为 U+000D CR 且下一个码点为 U+000A LF，则将 position 前移到 input 的下一个码点。
  2. 将 position 前移到 input 的下一个码点。
  3. 追加由 document、br 和 HTML 命名空间创建的元素的结果到 fragment。
返回 fragment。

与下一个文本节点合并，给定 Text 节点 node：

设 next 为 node 的下一个兄弟节点。
如果 next 不是一个 Text 节点，则返回。
用 node、node 的数据的长度、0 和 next 的数据替换数据。
移除 next。

3.2.8 与双向算法相关的要求

3.2.8.1 双向算法格式化字符的编写一致性标准

HTML元素中的文本内容，以及其内容中的文本节点，以及HTML元素中允许自由格式文本的属性中的文本，可以包含范围为 U+202A 至 U+202E 和 U+2066 至 U+2069 的字符（双向算法格式化字符）。[BIDI]

作者被鼓励使用 dir 属性、bdo 元素和 bdi 元素，而不是手动维护双向算法格式化字符。双向算法格式化字符与 CSS 交互不佳。

3.2.8.2 用户代理一致性标准

用户代理必须实现 Unicode 双向算法，以确定在渲染文档和文档部分时字符的正确排序。[BIDI]

HTML 到 Unicode 双向算法的映射必须通过以下三种方式之一进行。用户代理必须实现 CSS，特别是 CSS 的 'unicode-bidi'、'direction' 和 'content' 属性，并且在其用户代理样式表中，必须包含在本规范的渲染部分中给出的使用这些属性的规则；或者，用户代理必须表现得像实现了上述属性，并且有一个包含所有上述规则的用户代理样式表，但不允许文档中指定的样式表覆盖它们；或者，用户代理必须实现另一种具有等效语义的样式语言。[CSSGC]

以下元素和属性的要求由渲染部分定义，由于本节中的要求，这些要求对所有用户代理（不仅仅是那些支持建议的默认渲染的用户代理）都是强制性的：

dir 属性
bdi 元素
bdo 元素
br 元素
pre 元素
textarea 元素
wbr 元素

3.2.9 与 ARIA 及平台无障碍 API 相关的要求

在HTML 元素上实现无障碍 API 语义的用户代理要求在HTML Accessibility API Mappings中定义。除了那里规定的规则外，对于一个自定义元素 element，默认的 ARIA 角色语义按如下方式确定：[HTMLAAM]

设 map 为 element 的内部内容属性映射。
如果 map["role"] 存在，则返回它。
返回无角色。

类似地，对于一个自定义元素 element，默认的 ARIA 状态和属性语义，对于名为 stateOrProperty 的状态或属性，按如下方式确定：

如果 element 的附加内部不为空：
1. 如果 element 的附加内部的获取 stateOrProperty 关联元素存在，则返回运行结果。
2. 如果 element 的附加内部的获取 stateOrProperty 关联元素存在，则返回运行结果。
如果 element 的内部内容属性映射[stateOrProperty] 存在，则返回它。
返回 stateOrProperty 的默认值。

此处提到的“默认语义”有时在ARIA中也称为“本机”、“隐式”或“主机语言”语义。[ARIA]

这些定义的一个含义是默认语义可以随时间变化。这允许自定义元素具有与内置元素相同的表达能力；例如，比较 a 元素的默认 ARIA 角色语义在 href 属性添加或移除时如何变化。

有关实际应用的示例，请参见自定义元素部分。

在HTML 元素上检查使用 ARIA role 和 aria-* 属性的一致性检查器要求在ARIA in HTML中定义。[ARIAHTML]

4 HTML元素

4.1 文档元素

4.1.1 `html` 元素

元素/html

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLHtmlElement

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

类别:

无。

可以使用此元素的上下文:

作为文档的文档元素。

在复合文档中，只要允许子文档片段的地方。

内容模型:

一个 head 元素，后面跟着一个 body 元素。

在 text/html 中的标签省略:

如果 html 元素的开始标签可以省略，如果 html 元素内的第一个内容不是注释。

如果 html 元素的结束标签可以省略，前提是 html 元素后面没有紧接着一个注释。

[Exposed=Window]
interface HTMLHtmlElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

html 元素表示 HTML 文档的根。

建议作者在根 lang 元素上指定语言属性，以提供文档的语言。这有助于语音合成工具确定使用的发音、翻译工具确定使用的规则等。

下面示例中的 html 元素声明了文档的语言是英语。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Swapping Songs</title>
</head>
<body>
<h1>Swapping Songs</h1>
<p>Tonight I swapped some of the songs I wrote with some friends, who
gave me some of the songs they wrote. I love sharing my music.</p>
</body>
</html>

4.2 文档元数据

4.2.1 `head` 元素

Element/head

支持所有当前的引擎。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge（遗留版）12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLHeadElement

支持所有当前的引擎。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge（遗留版）12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

类别：

无。

可以使用该元素的上下文：

作为 html 元素中的第一个元素。

内容模型：

如果文档是一个 iframe srcdoc 文档或如果从更高层协议中可以获得标题信息：零个或多个元数据内容元素，其中最多一个是 title 元素，最多一个是 base 元素。

否则：一个或多个元数据内容元素，其中恰好一个是 title 元素，最多一个是 base 元素。

在 text/html 中的标签省略：

head 元素的开始标签可以省略，如果该元素为空，或者如果 head 元素中的第一个元素是一个元素。

head 元素的结束标签可以省略，如果 head 元素后面没有紧接着 ASCII 空白字符或注释。

DOM 接口：

[Exposed=Window]
interface HTMLHeadElement : HTMLElement {
  [HTMLConstructor] constructor();
};

head 元素表示一个文档的元数据集合。

head 元素中的元数据集合可以很小也可以很大。以下是一个非常短的示例：

<!doctype html>
<html lang=en>
 <head>
  <title>A document with a short head</title>
 </head>
 <body>
 ...

这是一个较长的示例：

<!DOCTYPE HTML>
<HTML LANG="EN">
 <HEAD>
  <META CHARSET="UTF-8">
  <BASE HREF="https://www.example.com/">
  <TITLE>An application with a long head</TITLE>
  <LINK REL="STYLESHEET" HREF="default.css">
  <LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text">
  <SCRIPT SRC="support.js"></SCRIPT>
  <META NAME="APPLICATION-NAME" CONTENT="Long headed application">
 </HEAD>
 <BODY>
 ...

title 元素在大多数情况下是必需的子元素，但当更高层协议提供标题信息时，例如在用作电子邮件编写格式的 HTML 的主题行中，可以省略 title 元素。

4.2.2 `title` 元素

Element/title

在所有当前引擎中均受支持。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet Explorer1+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLTitleElement

在所有当前引擎中均受支持。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

类别：

元数据内容。

此元素可使用的上下文：

在不包含其他 head 元素中包含的 title 元素。

文本，不是元素间的空白。

两个标签都不能省略。

DOM 接口：

[Exposed=Window]
interface HTMLTitleElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString text;
};

title 元素表示文档的标题或名称。作者应该使用能够在脱离上下文时（例如在用户的历史记录或书签中，或在搜索结果中）识别他们的文档的标题。文档的标题通常与其第一个标题不同，因为第一个标题不必在脱离上下文时独立存在。

每个文档中只能有一个 title 元素。

如果文档没有标题是合理的，那么 Document 元素可能不是必需的。有关何时需要该元素，请参阅 head 元素的内容模型。

title.text [ = value ]

返回元素的子文本内容。

可以设置，以用给定值替换元素的子节点。

text 属性的 getter 必须返回此 title 元素的子文本内容。

text 属性的 setter 必须在此 title 元素中使用给定值进行字符串替换。

以下是一些适当的标题示例，与可能在同一页面上使用的顶级标题进行对比。

  <title>Introduction to The Mating Rituals of Bees</title>
    ...
  <h1>Introduction</h1>
  <p>This companion guide to the highly successful
  <cite>Introduction to Medieval Bee-Keeping</cite> book is...

下一页可能是同一站点的一部分。请注意，标题如何清晰地描述主题，而第一个标题假设读者知道上下文，因此不会怀疑舞蹈是 Salsa 还是 Waltz：

  <title>Dances used during bee mating rituals</title>
    ...
  <h1>The Dances</h1>

用作文档标题的字符串由 document.title IDL 属性给出。

用户代理在用户界面中引用文档时，应使用文档的标题。当 title 元素的内容以这种方式使用时，方向性应用于设置用户界面中文档标题的方向性。

4.2.3 `base` 元素

Element/base

支持所有当前引擎。

Firefox1+Safari3+Chrome1+

Opera?Edge79+

Edge（遗留版）12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLBaseElement

支持所有当前引擎。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（遗留版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

类别：

元数据内容。

可以使用该元素的上下文：

在不包含其他 head 元素的 base 元素中。

内容模型：

无。

在 text/html 中的标签省略：

没有结束标签。

内容属性：

全局属性

href — 文档基本 URL

target — 默认可导航用于超链接导航和表单提交

可访问性考虑：

对于作者。

对于实施者。

DOM 接口：

[Exposed=Window]
interface HTMLBaseElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute USVString href;
  [CEReactions] attribute DOMString target;
};

base 元素允许作者为解析文档基本 URL 的目的指定基本 URL，并为跟随超链接的目的指定默认可导航的名称。该元素不表示除这些信息之外的任何内容。

每个文档中只能有一个 base 元素。

一个 base 元素必须有一个 href 属性，一个 target 属性，或者两者都有。

href 内容属性，如果指定，则必须包含一个可能被空格包围的有效 URL。

一个 base 元素，如果有一个 href 属性，必须出现在树中任何具有 URL 属性定义的其他元素之前，除了 html 元素（其 manifest 属性不受 base 元素影响）。

如果有多个 base 元素具有 href 属性，则除第一个之外的所有元素都将被忽略。

target 属性，如果指定，则必须包含一个有效的可导航目标名称或关键字，该名称或关键字指定哪个可导航用作默认值，当超链接和表单在 文档 导致导航。

一个 base 元素，如果有一个 target 属性，必须出现在树中代表超链接的任何元素之前。

如果有多个 base 元素具有 target 属性，则除第一个之外的所有元素都将被忽略。

要获取元素的目标，给定一个 a，area，或 form 元素 element，以及一个可选的字符串或空值 target （默认为 null），请执行以下步骤：

如果 target 为 null，则：
1. 如果 element 有一个 target 属性，则将 target 设置为该属性的值。
2. 否则，如果 element 的节点文档包含一个 base 元素具有一个 target 属性，则将 target 设置为第一个此类 base 元素的 target 属性的值。
如果 target 不为 null，并且包含一个 ASCII 制表符或换行符和一个 U+003C (<)，则将 target 设置为 "_blank"。
返回 target。

在文档树中第一个具有 base 元素的 base 元素具有 href 内容属性的冻结基本 URL。冻结基本 URL 必须在任何以下情况发生时立即为一个元素设置：

当 base 元素成为树顺序中第一个具有 href 内容属性的 文档 中的 base 元素时。
当 base 元素是树顺序中第一个具有 href 内容属性的 文档 中的 base 元素时，并且其 href 内容属性被更改。

要设置冻结基本 URL 为元素 element：

让 document 成为 element 的节点文档。
让 urlRecord 成为解析 element 的 href 内容属性的结果，使用 document 的后备基本 URL，和 document 的字符编码。（因此，base 元素不会受到自身的影响。）
如果以下任何情况为真：
- urlRecord 失败；
- urlRecord 的方案是 "data" 或 "javascript"；或者
- 运行文档允许的基本内容吗？在 urlRecord 和 document 上返回 "Blocked"，
然后将 element 的冻结基本 URL 设置为 document 的后备基本 URL 并返回。
将 element 的冻结基本 URL 设置为 urlRecord。

href IDL 属性，在获取时，必须返回运行以下算法的结果：

让 document 成为 element 的节点文档。
让 url 成为该元素的 href 属性的值（如果有），否则为空字符串。
让 urlRecord 成为解析 url 的结果，使用 document 的后备基本 URL 和 document 的字符编码。（因此，base 元素不会受到其他 base 元素或自身的影响。）
如果 urlRecord 失败，则返回 url。
返回序列化的 urlRecord。

href IDL 属性，在设置时，必须将 href 内容属性设置为给定的新值。

target IDL 属性必须反映同名的内容属性。

在这个例子中，一个 base 元素用于设置文档基本 URL：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is an example for the &lt;base&gt; element</title>
        <base href="https://www.example.com/news/index.html">
    </head>
    <body>
        <p>Visit the <a href="archives.html">archives</a>.</p>
    </body>
</html>

上述示例中的链接将是一个指向 "https://www.example.com/news/archives.html" 的链接。

4.2.4 `link` 元素

Element/link

支持所有当前引擎。

Firefox1+Safari4+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLLinkElement

支持所有当前引擎。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

类别:

元数据内容。

如果元素是允许出现在正文中的: 流内容。

如果元素是允许出现在正文中的: 短语内容。

此元素可使用的上下文:

在需要元数据内容的地方。

在一个 noscript 元素中，该元素是 head 元素的子元素。

如果元素是允许出现在正文中的: 在需要短语内容的地方。

内容模型:

无内容。

在text/html中的标签省略:

没有结束标签。

内容属性:

全局属性

href — 超链接的地址

crossorigin — 元素如何处理跨域请求

rel — 包含超链接的文档与目标资源之间的关系

media — 适用的媒体

integrity — 在子资源完整性检查中使用的完整性元数据[SRI]

hreflang — 链接资源的语言

type — 引用资源的类型提示

referrerpolicy — 为元素发起的fetch操作设置的引用者策略

sizes — 图标的尺寸 (对于rel="icon")

imagesrcset — 在不同情况下使用的图像，例如高分辨率显示器，小型监视器等(对于rel="preload")

imagesizes — 针对不同页面布局的图像尺寸 (对于rel="preload")

as — 预加载请求的潜在目标 (对于rel="preload" 和 rel="modulepreload")

blocking — 元素是否为潜在渲染阻塞元素

color — 在自定义站点图标时使用的颜色 (对于rel="mask-icon")

disabled — 链接是否被禁用

fetchpriority — 为元素发起的fetch操作设置优先级

另外，title 属性在此元素上具有特殊语义: 链接的标题; CSS样式表集名称

[Exposed=Window]
interface HTMLLinkElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute USVString href;
  [CEReactions] attribute DOMString? crossOrigin;
  [CEReactions] attribute DOMString rel;
  [CEReactions] attribute DOMString as;
  [SameObject, PutForwards=value] readonly attribute DOMTokenList relList;
  [CEReactions] attribute DOMString media;
  [CEReactions] attribute DOMString integrity;
  [CEReactions] attribute DOMString hreflang;
  [CEReactions] attribute DOMString type;
  [SameObject, PutForwards=value] readonly attribute DOMTokenList sizes;
  [CEReactions] attribute USVString imageSrcset;
  [CEReactions] attribute DOMString imageSizes;
  [CEReactions] attribute DOMString referrerPolicy;
  [SameObject, PutForwards=value] readonly attribute DOMTokenList blocking;
  [CEReactions] attribute boolean disabled;
  [CEReactions] attribute DOMString fetchPriority;

  // also has obsolete members
};
HTMLLinkElement includes LinkStyle;

link 元素允许作者将文档链接到其他资源。

链接地址由 href 属性提供。如果 href 属性存在，则其值必须是有效的非空 URL，可能被空格包围。必须存在 href 或 imagesrcset 属性中的一个或两个。

如果 href 和 imagesrcset 属性都不存在，则该元素不定义链接。

链接的类型（关系）由 rel 属性的值给出，该属性（如果存在）必须具有一个唯一的用空格分隔的标记的无序集合。允许的关键字及其含义在后面的部分定义。如果 rel 属性缺失、没有关键字，或使用的关键字都不符合本规范中的定义，则该元素不会创建任何链接。

rel 的支持的标记是在 HTML 链接类型中定义的关键字，这些关键字在 link 元素上是被允许的，会影响处理模型，并且由用户代理支持。可能的支持的标记包括 alternate、dns-prefetch、expect、icon、manifest、modulepreload、next、pingback、preconnect、prefetch、preload、search 和 stylesheet。rel 的支持的标记必须仅包括用户代理实现处理模型的标记。

理论上，用户代理可以支持 canonical 关键字的处理模型——如果它是执行 JavaScript 的搜索引擎。但实际上这非常不可能。因此，在大多数情况下，canonical 不应包含在 rel 的支持的标记中。

link 元素必须具有 rel 属性或 itemprop 属性，但不能同时具有这两个属性。

如果 link 元素具有 itemprop 属性，或者具有仅包含 body-ok 关键字的 rel 属性，则该元素被认为是允许在主体中使用。这意味着该元素可以在预期短语内容的位置使用。

如果使用了 rel 属性，则该元素仅在页面的 body 中有时可以使用。当与 itemprop 属性一起使用时，该元素可以在 head 元素和 body 中使用，前提是遵守微数据模型的约束。

使用 link 元素可以创建两类链接：外部资源链接和超链接。链接类型部分定义了特定链接类型是外部资源还是超链接。一个 link 元素可以创建多个链接（其中一些可能是外部资源链接，一些可能是超链接）；具体创建哪些链接以及创建多少链接取决于 rel 属性中给出的关键字。用户代理必须逐个链接地处理这些链接，而不是逐个元素地处理。

每个为 link 元素创建的链接都是单独处理的。例如，如果有两个 link 元素，其 rel="stylesheet"，它们每个都计为一个单独的外部资源，并且每个都受其自身属性的独立影响。同样，如果一个 link 元素的 rel 属性的值为 next stylesheet，它将同时创建一个超链接（对应 next 关键字）和一个外部资源链接（对应 stylesheet 关键字），并且它们会受到其他属性（如 media 或 title）的不同影响。

例如，下面的 link 元素创建了两个超链接（指向相同的页面）：

<link rel="author license" href="/about">

这个元素创建的两个链接分别具有以下语义：一个是目标页面有关于当前页面作者的信息，另一个是目标页面有关于当前页面提供的许可证的信息。

使用 link 元素及其 rel 属性创建的超链接适用于整个文档。这与 rel 属性在 a 和 area 元素中的作用不同，后者指示了链接的类型，其上下文由链接在文档中的位置决定。

与 a 和 area 元素创建的链接不同，超链接由 link 元素创建时，默认情况下不会在文档中显示（在支持建议默认渲染的用户代理中）。即使通过 CSS 强制显示，它们也没有激活行为。它们主要提供语义信息，可能被页面或其他使用页面内容的软件利用。此外，用户代理可以提供自己的用户界面以跟随这些超链接。

外部资源链接的确切行为取决于具体的关系，按相关链接类型定义。

crossorigin 属性是一个 CORS 设置属性。它旨在用于外部资源链接。

media 属性指定资源适用于哪些媒体。其值必须是一个有效的媒体查询列表。

子资源完整性

支持所有当前的浏览器。

Firefox43+Safari11.1+Chrome45+

Opera?Edge79+

Edge（经典版）17+Internet Explorer不支持

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

integrity 属性表示此元素负责的请求的完整性元数据。该值为文本。该属性只能在具有 rel 属性且包含 stylesheet、preload 或 modulepreload 关键字的 link 元素上指定。 [SRI]

hreflang 属性在 link 元素上具有与 hreflang 属性在 a 元素上相同的语义。

type 属性提供了链接资源的 MIME 类型。它纯属建议。该值必须是有效的 MIME 类型字符串。

对于外部资源链接，type 属性作为提示提供给用户代理，以便它们可以避免获取不支持的资源。

referrerpolicy 属性是一个引荐策略属性。它用于外部资源链接，帮助设置引荐策略，该策略在获取和处理链接资源时使用。[REFERRERPOLICY]

title 属性提供了链接的标题。除一个例外外，它纯属建议。该值为文本。唯一的例外是样式表链接，这些链接位于文档树中，对于这些链接，title 属性定义了 CSS 样式表集合。

title 属性在 link 元素上的行为与大多数其他元素的全局 title 属性不同：没有标题的链接不会继承父元素的标题；它只是没有标题。

imagesrcset 属性可以存在，并且是一个 srcset 属性。

imagesrcset 和 href 属性（如果没有使用宽度描述符）共同构成图像源的源集合。

如果 imagesrcset 属性存在且具有任何使用宽度描述符的图像候选字符串，则 imagesizes 属性也必须存在，并且是一个 sizes 属性。imagesizes 属性贡献了源大小到源集合。

imagesrcset 和 imagesizes 属性只能在 link 元素上指定，这些元素具有 rel 属性，该属性指定 preload 关键字，以及一个处于 "image" 状态的 as 属性。

这些属性允许预加载适当的资源，稍后由具有相应值的 img 元素使用，其 srcset 和 sizes 属性如下：

<link rel="preload" as="image"
      imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
      imagesizes="50vw">

<!-- ... later, or perhaps inserted dynamically ... -->
<img src="wolf.jpg" alt="A rad wolf"
     srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
     sizes="50vw">

注意我们省略了 href 属性，因为它仅在不支持 imagesrcset 的浏览器中才相关，在那些情况下，它可能会导致错误的图像被预加载。

imagesrcset 属性可以与 media 属性组合使用，以预加载从 picture 元素的源中选择的适当资源，用于艺术方向：

<link rel="preload" as="image"
      imagesrcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
      media="(max-width: 800px)">
<link rel="preload" as="image"
      imagesrcset="dog-wide-1x.jpg, dog-wide-2x.jpg 2x"
      media="(min-width: 801px)">

<!-- ... later, or perhaps inserted dynamically ... -->
<picture>
  <source srcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
          media="(max-width: 800px)">
  <img src="dog-wide-1x.jpg" srcset="dog-wide-2x.jpg 2x"
       alt="An awesome dog">
</picture>

sizes 属性提供视觉媒体图标的大小。如果存在，其值仅为建议性。用户代理可以使用该值来决定在多个图标可用时使用哪个图标。如果指定，则属性值必须是一个唯一的、以空格分隔的令牌的无序集合，并且是 ASCII 不区分大小写。每个值必须是 "any" 字符串的 ASCII 不区分大小写匹配，或者由两个有效的非负整数组成，这些整数没有前导的 U+0030 DIGIT ZERO (0) 字符，并且用一个 U+0078 LATIN SMALL LETTER X 或 U+0058 LATIN CAPITAL LETTER X 字符分隔。该属性仅在具有 rel 属性，并且该属性指定了 icon 关键字或 apple-touch-icon 关键字的 link 元素上指定。

`apple-touch-icon` 关键字是一个注册的预定义链接类型集合的扩展，但用户代理并不要求以任何方式支持它。

as 属性指定了一个潜在的目标，用于预加载通过 href 属性指定的资源。它是一个枚举属性。每个潜在目标是该属性的一个关键字，映射到一个同名的状态。该属性必须在 link 元素上指定，这些元素具有一个 rel 属性，该属性包含 preload 关键字。它可以在 link 元素上指定，这些元素具有一个 rel 属性，该属性包含 modulepreload 关键字；在这种情况下，它必须具有一个类似脚本的目标值。对于其他 link 元素，不能指定此属性。

关于 as 属性如何使用的处理模型在每个链接类型的获取和处理链接资源算法中给出。

该属性没有 缺失值默认值 或 无效值默认值，这意味着无效或缺失的属性值不会映射到任何状态。这在处理模型中已被考虑。对于 preload 链接，两种情况都是错误的；对于 modulepreload 链接，缺失值将被视为 "script"。

blocking 属性是一个阻塞属性。它用于链接类型 stylesheet 和 expect，并且只能在具有包含这些关键字的 rel 属性的链接元素上指定。

color 属性用于 mask-icon 链接类型。该属性只能在具有包含 mask-icon 关键字的 rel 属性的 link 元素上指定。其值必须是一个符合 CSS <color> 生成规则的字符串，定义一个建议的颜色，用户代理可以使用它来定制用户在固定网站时看到的图标的显示。

本规范对 color 属性没有任何用户代理要求。

mask-icon 关键字是对预定义链接类型集的一个注册扩展，但用户代理并不要求以任何方式支持它。

link 元素具有一个关联的显式启用布尔值。初始值为 false。

disabled 属性是一个布尔属性，用于 stylesheet 链接类型。该属性只能在具有 rel 属性包含 stylesheet 关键字的 link 元素上指定。

每当 disabled 属性被移除时，应将 link 元素的显式启用属性设置为 true。

例如，通过动态移除 disabled 属性，例如使用 document.querySelector("link").removeAttribute("disabled")，将会获取并应用样式表：

<link disabled rel="alternate stylesheet" href="css/pooh">

HTMLLinkElement/fetchPriority

Firefox不支持Safari🔰 预览+Chrome102+

Opera?Edge102+

Edge (旧版)?Internet Explorer不支持

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

fetchpriority 属性是一个获取优先级属性，旨在与外部资源链接一起使用，用于设置请求优先级，该优先级在获取和处理链接资源时使用。

HTMLLinkElement/rel

在所有当前引擎中支持。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

IDL 属性 href、 hreflang、 integrity、 media、 rel、 sizes、 type、 blocking 和 disabled 必须反映同名的内容属性。

对于 color 属性，没有反映的 IDL 属性，但这可能会在以后添加。

HTMLLinkElement/as

在所有当前引擎中支持。

Firefox56+Safari10+Chrome50+

Opera?Edge79+

Edge (旧版)17+Internet Explorer不支持

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

as IDL 属性必须反映 as 内容属性，仅限于已知值。

crossOrigin IDL 属性必须反映 crossorigin 内容属性，仅限于已知值。

HTMLLinkElement/referrerPolicy

所有当前引擎都支持。

Firefox50+Safari14.1+Chrome58+

Opera?Edge79+

Edge (旧版)?Internet Explorer不支持

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

referrerPolicy IDL 属性必须反映 referrerpolicy 内容属性，仅限于已知值。

fetchPriority IDL 属性必须反映 fetchpriority 内容属性，仅限于已知值。

imageSrcset IDL 属性必须反映 imagesrcset 内容属性。

imageSizes IDL 属性必须反映 imagesizes 内容属性。

HTMLLinkElement/relList

所有当前引擎都支持。

Firefox30+Safari9+Chrome50+

Opera?Edge79+

Edge (旧版)17+Internet Explorer不支持

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

relList IDL 属性必须反映 rel 内容属性。

relList 属性可以用于功能检测，通过调用其 supports() 方法检查支持的链接类型。

4.2.4.1 处理 `media` 属性

如果链接是超链接，那么 media 属性仅为建议性质，描述了文档设计的媒体类型。

然而，如果链接是外部资源链接，那么 media 属性是规定性的。当 media 属性的值匹配环境且其他相关条件适用时，用户代理必须应用外部资源，否则不得应用。

如果省略了 media 属性，则默认值为 "all"，意味着默认情况下链接适用于所有媒体。

外部资源可能在该限制内定义了进一步的适用性限制。例如，CSS 样式表可能有一些 @media 块。本规范不会覆盖这些进一步的限制或要求。

4.2.4.2 处理 `type` 属性

如果 type 属性存在，则用户代理必须假设资源是给定类型的（即使那不是一个有效的 MIME 类型字符串，例如空字符串）。如果属性被省略，但外部资源链接类型有一个默认类型定义，则用户代理必须假设资源是该类型。如果用户代理不支持给定的 MIME 类型对于给定的链接关系，则用户代理应该获取和处理链接资源；如果用户代理支持给定的 MIME 类型对于给定的链接关系，则用户代理应该获取和处理链接资源，按照为外部资源链接特定类型指定的适当时间进行。如果属性被省略，而外部资源链接类型没有默认类型定义，但用户代理会获取和处理链接资源如果类型已知且被支持，则用户代理应该获取和处理链接资源，假设它将被支持。

用户代理不得将 type 属性视为权威 — 在获取资源时，用户代理不得使用 type 属性来确定其实际类型。只有实际类型（如下一段定义）用于确定是否应用资源，而不是上述假设的类型。

如果外部资源链接类型定义了处理资源的 Content-Type 元数据的规则，则适用这些规则。否则，如果资源预期是图像，用户代理可以应用图像嗅探规则，官方类型为从资源的 Content-Type 元数据确定的类型，并使用结果的计算出的资源类型，就像它是实际类型一样。否则，如果这些条件都不适用或用户代理选择不应用图像嗅探规则，则用户代理必须使用资源的 Content-Type 元数据来确定资源的类型。如果没有类型元数据，但外部资源链接类型有默认类型定义，则用户代理必须假设资源是该类型。

stylesheet 链接类型定义了处理资源的 Content-Type 元数据的规则。

一旦用户代理确定了资源的类型，如果资源是受支持的类型且满足其他相关条件，则用户代理必须应用该资源，否则必须忽略该资源。

如果文档包含如下标签的样式表链接：

<link rel="stylesheet" href="A" type="text/plain">
<link rel="stylesheet" href="B" type="text/css">
<link rel="stylesheet" href="C">

...那么一个仅支持 CSS 样式表的符合规范的用户代理将获取 B 和 C 文件，并跳过 A 文件（因为 text/plain 不是 CSS 样式表的 MIME 类型）。

对于文件 B 和 C，用户代理会检查服务器返回的实际类型。对于那些以 text/css 发送的文件，用户代理会应用样式，但对于那些标记为 text/plain 或其他类型的文件，则不会应用。

如果其中一个文件没有 Content-Type 元数据，或具有像 Content-Type: "null" 这样的语法不正确的类型，那么 stylesheet 链接的默认类型将会生效。由于默认类型是 text/css ，样式表 仍然会 被应用。

4.2.4.3 从 `link` 元素获取和处理资源

所有的外部资源链接都有一个获取和处理链接资源算法，它接收一个 link 元素 el。它们还具有链接资源获取设置步骤，它们接收一个 link 元素 el 和请求 request。各个链接类型可能提供自己的获取和处理链接资源算法，但除非明确说明，否则它们使用默认的获取和处理链接资源算法。同样，各个链接类型可能提供自己的链接资源获取设置步骤，但除非明确说明，否则这些步骤仅返回 true。

给定一个 link 元素 el，默认的获取和处理链接资源如下：

让 options 成为从 el 创建链接选项的结果。
让 request 成为给定 options 的创建链接请求的结果。
如果 request 为 null，则返回。
设置 request 的同步标志。
运行链接资源获取设置步骤，给定 el 和 request。如果结果为 false，则返回。
如果 el 的 rel 属性包含关键字 stylesheet，则将 request 的发起者类型设置为 "css"；否则设置为 "link"。
获取 request，将 processResponseConsumeBody 设置为以下步骤，给定响应 response 和 null、失败，或字节序列 bodyBytes：
1. 让 success 为 true。
2. 如果以下任何一个为真：
  - bodyBytes 为 null 或失败；或者
  - response 的状态不是一个 ok 状态，
  则将 success 设置为 false。
  
  注意，特定内容的错误，例如 CSS 解析错误或 PNG 解码错误，不会影响 success。
3. 否则，等待链接资源的关键子资源加载完成。
  
  定义链接类型的关键子资源（例如 CSS）的规范，预计会描述如何获取和处理这些子资源。然而，由于目前这尚不明确，本规范描述了等待链接资源的关键子资源被获取和处理，期望这样能正确完成。
4. 给定 el、success、response 和 bodyBytes，处理链接资源。

给定一个链接处理选项 options 来创建链接请求：

断言: options 的 href 不是空字符串。
如果 options 的 destination 为 null，则返回 null。
让 url 成为给定 options 的编码解析 URL 的结果，相对于 options 的基本 URL。

传递基本 URL 而不是文档或环境的问题由 issue #9715 跟踪。
如果 url 失败，则返回 null。
让 request 成为给定 url、options 的创建潜在 CORS 请求的结果，以及 options 的 destination 和 crossorigin。
将 request 的策略容器设置为 options 的策略容器。
将 request 的完整性元数据设置为 options 的完整性。
将 request 的加密随机数元数据设置为 options 的加密随机数元数据。
将 request 的引用政策设置为 options 的引用政策。
将 request 的客户端设置为 options 的环境。
将 request 的优先级设置为 options 的获取优先级。
返回 request。

用户代理可以选择仅在需要时尝试获取和处理这些资源，而不是主动获取所有未应用的外部资源。

类似于获取和处理链接资源算法，所有外部资源链接都有一个处理链接资源算法，该算法接受一个 link 元素 el，一个布尔值 success，一个响应 response，以及一个字节序列 bodyBytes。各个链接类型可以提供自己的处理链接资源算法，但除非明确声明，否则该算法不执行任何操作。

除非对给定的 rel 关键字另有说明，否则元素必须延迟元素的加载事件，直到所有尝试获取和处理链接资源及其关键子资源完成。（用户代理尚未尝试获取和处理的资源，例如因为等待资源被需要，这些资源不会延迟加载事件。）

4.2.4.4 处理 ``Link`` 头部

所有可以作为外部资源链接的链接类型都定义了一个处理链接头部算法，该算法接收链接处理选项。这个算法定义了这些链接在 HTTP `Link` 响应头部中出现时的反应方式。

对于大多数链接类型，这个算法不会执行任何操作。总结表是快速了解某个链接类型是否定义了处理链接头部步骤的良好参考。

链接处理选项是一个结构。它具有以下项：

href（默认值为空字符串）
destination（默认值为空字符串）
initiator（默认值为 "link"）
integrity（默认值为空字符串）
type（默认值为空字符串）
加密随机数元数据（默认值为空字符串）: 一个字符串
crossorigin（默认值无 CORS）: 一个 CORS 设置属性状态
referrer policy（默认值为空字符串）: 一个 referrer policy
source set（默认值为 null）: Null 或一个 source set
基本 URL: 一个 URL
origin: 一个 origin
environment: 一个 environment
policy container: 一个 policy container
document（默认值为 null）: Null 或一个 Document
on document ready（默认值为 null）: Null 或一个算法，接受一个 Document
fetch priority（默认值 auto）: 一个 fetch priority attribute 状态

一个链接处理选项具有一个基本 URL 和一个 href，而不是解析后的 URL，因为 URL 可能是选项的 source set 的结果。

要从一个 link 元素 el 创建链接选项：

令 document 为 el 的节点文档。
令 options 为一个新的链接处理选项，其值为：

destination

翻译 el 的 as 属性的状态。

crossorigin

el 的 crossorigin 内容属性的状态

referrer policy

el 的 referrerpolicy 内容属性的状态

source set

el 的 source set

基本 URL

document 的文档基本 URL

origin

document 的 origin

environment

document 的相关设置对象

policy container

document 的 policy container

document

document

加密随机数元数据

当前值为 el 的 [[CryptographicNonce]] 内部槽

fetch priority

el 的 fetchpriority 内容属性的状态
如果 el 有一个 href 属性，则将 options 的 href 设置为 el 的 href 属性的值。
如果 el 有一个 integrity 属性，则将 options 的 integrity 设置为 el 的 integrity 内容属性的值。
如果 el 有一个 type 属性，则将 options 的 type 设置为 el 的 type 属性的值。
断言：options 的 href 不能为空字符串，或者 options 的 source set 不能为 null。

一个既没有 href 属性，也没有 imagesrcset 属性的 link 元素不代表一个链接。
返回 options。

要从头部中提取链接，给定一个头部列表 headers：

令 links 为一个新的列表。
令 rawLinkHeaders 为从 response 的头部列表中获取、解码和拆分 `Link` 的结果。
对于每个 linkHeader 的 rawLinkHeaders：
1. 令 linkObject 为解析 linkHeader 的结果。 [WEBLINK]
2. 如果 linkObject["target_uri"] 不存在，则继续。
3. 将 linkObject 添加到 links 中。
返回 links。

要处理链接头部，给定一个 文档 doc，一个响应 response，以及一个 "pre-media" 或 "media" phase：

令 links 为从 response 的头部列表中提取链接的结果。
对于每个 linkObject 在 links 中：
1. 令 rel 为 linkObject["relation_type"]。
2. 令 attribs 为 linkObject["target_attributes"]。
3. 令 expectedPhase 为 "media" 如果 "srcset", "imagesrcset", 或 "media" 存在于 attribs 中；否则为 "pre-media"。
4. 如果 expectedPhase 不是 phase，则继续。
5. 如果 attribs["media"] 存在且 attribs["media"] 不匹配环境，则继续。
6. 令 options 为一个新的链接处理选项，其具有：
  
  href
  
  linkObject["target_uri"]
  
  基本 URL
  
  doc 的文档基本 URL
  
  来源
  
  doc 的来源
  
  环境
  
  doc 的相关设置对象
  
  策略容器
  
  doc 的策略容器
  
  文档
  
  doc
7. 将解析头部属性的链接选项应用于 options 给定 attribs。
8. 如果 attribs["imagesrcset"] 存在且 attribs["imagesizes"] 存在，则将 options 的源集设置为结果创建源集的结果，给定 linkObject["target_uri"]、attribs["imagesrcset"]、 attribs["imagesizes"]，和 null。
9. 运行处理链接头部步骤，以 rel 和 options 进行。

将从解析的头部属性中获取的链接选项应用于链接处理选项 options 给定 attribs：

如果 attribs["as"] 存在，则将 options 的目标设置为翻译 attribs["as"] 的结果。
如果 attribs["crossorigin"] 存在并且是某个 ASCII 不区分大小写匹配的 CORS 设置属性关键词，则将 options 的 crossorigin 设置为与该关键词对应的 CORS 设置属性状态。
如果 attribs["integrity"] 存在，则将 options 的完整性设置为 attribs["integrity"]。
如果 attribs["referrerpolicy"] 存在并且是某个 ASCII 不区分大小写匹配的引荐政策，则将 options 的引荐政策设置为该引荐政策。
如果 attribs["nonce"] 存在，则将 options 的 nonce 设置为 attribs["nonce"]。
如果 attribs["type"] 存在，则将 options 的 type 设置为 attribs["type"]。
如果 attribs["fetchpriority"] 存在并且是某个 ASCII 不区分大小写匹配的获取优先级属性关键词，则将 options 的获取优先级设置为该获取优先级属性关键词。

4.2.4.5 早期提示

状态/103

Firefoxpreview+Safari无Chrome103+

Opera无Edge103+

Edge (旧版)?Internet Explorer无

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

早期提示允许用户代理执行一些操作，例如在导航请求被服务器完全处理和响应码返回之前，推测性地加载文档可能会使用的资源。服务器可以通过在发送最终的响应之前，先发送一个状态码为103的响应来指示早期提示。[RFC8297]

出于兼容性原因，早期提示通常通过 HTTP/2 或更高版本传输，但为了可读性，下面使用 HTTP/1.1 风格的表示法。

例如，给定以下响应序列：

103 Early Hint
Link: </image.png>; rel=preload; as=image

200 OK
Content-Type: text/html

<!DOCTYPE html>
...
<img src="/image.png">

图片将在 HTML 内容到达之前开始加载。

在导航期间仅处理第一个早期提示响应，如果它被跨源重定向所取代，则会被丢弃。

除了 `Link` 头部之外，103 响应可能包含一个内容安全策略头部，在处理早期提示时会强制执行。

例如，给定以下响应序列：

103 Early Hint
Content-Security-Policy: style-src: self;
Link: </style.css>; rel=preload; as=style

103 Early Hint
Link: </image.png>; rel=preload; as=image

302 Redirect
Location: /alternate.html

200 OK
Content-Security-Policy: style-src: none;
Link: </font.ttf>; rel=preload; as=font

字体和样式会被加载，而图片会被丢弃，因为在最终重定向链中只有第一个早期提示响应被尊重。晚到的内容安全策略头部在请求样式的操作已经完成之后才到达，但样式将无法在文档中访问。

要处理给定响应 response 和一个环境 reservedEnvironment的早期提示头部：

早期提示的 `Link` 头部总是在最终响应的 `Link` 头部之前处理，然后是 `link` 元素。这相当于将早期和最终 `Link` 头部的内容添加到文档的 `Document` 的 `head` 元素中，按相应顺序。

让 earlyPolicyContainer 成为创建策略容器从 fetch 响应的结果，给定 response 和 reservedEnvironment。

这允许早期提示响应包含一个内容安全策略，在获取早期提示请求时会被强制执行。
让 links 成为从 response 的头部列表中提取链接的结果。
让 earlyHints 成为空的列表。
对于每个 linkObject 在 links 中：

一旦我们收到早期提示链接头部，我们就开始获取 earlyRequest。如果在 Document 创建之前返回，我们将 earlyResponse 设置为该响应的结果，并且一旦 Document 被创建，我们就提交它（通过将其在预加载资源映射中可用，仿佛它是一个 link 元素）。如果 Document 首先被创建，一旦响应可用时立即提交。
1. 让 rel 为 linkObject["relation_type"]。
2. 让 options 成为一个新的链接处理选项，包括
  
  href
  
  linkObject["target_uri"]
  
  initiator
  
  "early-hint"
  
  base URL
  
  response 的 URL
  
  origin
  
  response 的 URL 的源
  
  环境
  
  reservedEnvironment
  
  策略容器
  
  earlyPolicyContainer
3. 让 attribs 为 linkObject["target_attributes"]。
  
  只有 as，crossorigin，integrity，和 type 属性作为早期提示处理的一部分。其他属性，特别是 blocking，imagesrcset，imagesizes 和 media 只有在 Document 被创建后才适用。
4. 从解析的头部属性中应用链接选项到 options 给定 attribs。
5. 运行处理链接头部步骤给 rel 给定 options。
6. 附加 options 到 earlyHints。
根据 Document 返回以下子步骤 doc：对于每个 options 在 earlyHints 中：
1. 如果 options 的 on document ready 为 null，则将 options 的 document 设置为 doc。
2. 否则，使用 doc 调用 options 的 on document ready。

4.2.4.6 提供用户通过`link`元素创建的超链接进行访问的方式

交互式用户代理可以在其用户界面的某处为用户提供通过link元素创建的超链接访问的方式。此类超链接访问算法的调用必须将userInvolvement参数设置为"browser UI"。该规范未定义具体界面，但它可以包括以下信息（从元素的属性中获取，如下所述），以某种形式或另一种形式（可能简化），用于文档中每个使用link元素创建的超链接：

此文档与资源之间的关系（由rel属性给出）
资源的标题（由title属性给出）。
资源的地址（由href属性给出）。
资源的语言（由hreflang属性给出）。
资源的最佳媒体（由media属性给出）。

用户代理还可以包括其他信息，例如资源的类型（由type属性给出）。

4.2.5 `meta` 元素

Element/meta

支持所有当前引擎。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLMetaElement

支持所有当前引擎。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

分类:

元数据内容。

如果存在itemprop属性: 流内容。

如果存在itemprop属性: 短语内容。

此元素可使用的上下文:

如果存在charset属性，或元素的http-equiv属性处于编码声明状态：在head元素中。

如果存在http-equiv属性但不在编码声明状态中：在head元素中。

如果存在http-equiv属性但不在编码声明状态中：在作为head元素子元素的noscript元素中。

如果存在name属性: 在期望元数据内容的地方。

如果存在itemprop属性: 在期望元数据内容的地方。

如果存在itemprop属性: 在期望短语内容的地方。

内容模型:

无内容。

在 text/html 中省略标签:

无结束标签。

内容属性:

全局属性

name — 元数据名称

http-equiv — 指令

content — 元素的值

charset — 字符编码声明

media — 适用的媒体

[Exposed=Window]
interface HTMLMetaElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString name;
  [CEReactions] attribute DOMString httpEquiv;
  [CEReactions] attribute DOMString content;
  [CEReactions] attribute DOMString media;

  // also has obsolete members
};

The meta 元素表示各种无法通过 title，base，link，style和script元素表示的元数据。

The meta 元素可以通过 name 属性表示文档级元数据，通过 http-equiv 属性表示指令，通过字符编码声明表示 HTML 文档在序列化为字符串形式（例如用于网络传输或磁盘存储）时的文件编码，并使用 charset 属性表示。

必须指定 name，http-equiv，charset 和 itemprop 属性中的一个。

如果指定了 name，http-equiv，或 itemprop，则必须指定 content 属性。否则，必须省略它。

The charset 属性指定文档使用的字符编码。这是一个字符编码声明。如果存在此属性，其值必须与字符串"utf-8"进行ASCII 不区分大小写匹配。

charset 属性在meta 元素在 XML 文档中没有作用，但允许在 XML 文档中使用，以便于向 XML 迁移和从 XML 迁移。

每个文档中不应有多个带有 charset 属性的 meta 元素。

The content 属性在元素用于文档元数据或指令时提供其值。允许的值取决于具体的上下文，如本规范后续部分所述。

如果 meta 元素具有 name 属性，则它设置文档元数据。文档元数据以名称-值对的形式表示，name 属性在 meta 元素上给出名称，content 属性在同一元素上给出值。名称指定设置元数据的哪个方面；有效名称及其值的含义在后续部分中描述。如果 meta 元素没有 content 属性，则元数据名称-值对的值部分为空字符串。

The media 属性说明元数据适用的媒体。其值必须是有效的媒体查询列表。除非 name 是 theme-color，media 属性对处理模型没有影响，作者不得使用。

The name，content，和 media IDL 属性必须反映同名的相应内容属性。IDL 属性 httpEquiv 必须反映内容属性 http-equiv 。

4.2.5.1 标准元数据名称

Element/meta/name

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer6+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

本规范定义了一些用于 name 属性的 meta 元素名称。

名称不区分大小写，并且必须以 ASCII 不区分大小写的方式进行比较。

application-name

值必须是一个简短的自由格式字符串，表示页面所代表的 Web 应用程序的名称。如果页面不是 Web 应用程序，则 application-name 元数据名称不得使用。可以使用 lang 属性指定每个名称的语言，提供 Web 应用程序名称的翻译。

每个文档中，不应有多个带有给定语言并且 name 属性值与 application-name ASCII 不区分大小写匹配的 meta 元素。

用户代理可能会在 UI 中优先使用应用程序名称，而不是页面的 title，因为标题可能包含与页面特定时间点相关的状态消息等信息，而不仅仅是应用程序的名称。

为了在给定语言列表（例如英国英语、美式英语和英语）中找到要使用的应用程序名称，用户代理必须执行以下步骤：

设 languages 为语言列表。
设 default language 为 Document 的文档元素的语言，如果有，并且该语言不是未知的。
如果有 default language，并且该语言与 languages 中的任何语言不同，则将其追加到 languages。
设 winning language 为 languages 中第一个有 meta 元素的语言，其中 name 属性值与 application-name ASCII 不区分大小写匹配，并且其语言是相关语言。

如果没有语言具有这样的 meta 元素，则返回；没有给定的应用程序名称。
返回 content 属性的值，该值是 Document 中第一个 meta 元素的值，该元素的 name 属性值与 application-name ASCII 不区分大小写匹配，并且其语言是 winning language。

此算法将在浏览器需要页面名称时使用，例如用于标记书签。浏览器会将用户的首选语言提供给算法。

author

值必须是一个自由格式字符串，表示页面的某个作者的名字。

description

值必须是一个自由格式字符串，描述页面的内容。该值必须适合用于页面目录中，例如在搜索引擎中。每个文档中，不应有多个 meta 元素，其 name 属性值与 description ASCII 不区分大小写匹配。

generator

值必须是一个自由格式字符串，标识生成文档所使用的某个软件包。如果页面的标记不是由软件生成的，例如由用户在文本编辑器中编写的页面，则不应使用此值。

这是一个名为“Frontweaver”的工具在页面的 head 元素中包含的内容，以识别自己为生成页面的工具：

<meta name=generator content="Frontweaver 8.2">

keywords

值必须是一个逗号分隔的令牌集，其中每个令牌都是与页面相关的关键字。

这个关于英国高速公路字体的页面使用一个 meta 元素来指定一些用户可能用来查找页面的关键字：

<!DOCTYPE HTML>
<html lang="en-GB">
 <head>
  <title>Typefaces on UK motorways</title>
  <meta name="keywords" content="british,type face,font,fonts,highway,highways">
 </head>
 <body>
  ...

许多搜索引擎不考虑此类关键字，因为这种功能历史上被不可靠甚至误导性地用于通过使用不适合用户的关键字来垃圾搜索引擎结果。

为了获取作者指定为页面适用的关键字列表，用户代理必须运行以下步骤：

设 keywords 为一个空列表。
对于每个具有 name 属性和 content 属性的 meta 元素，并且其 name 属性值与 keywords ASCII 不区分大小写匹配：
1. 将元素的 content 属性的值按逗号分割。
2. 将生成的令牌（如果有）添加到 keywords。
从 keywords 中删除任何重复项。
返回 keywords。这是作者指定为页面适用的关键字列表。

当信息的可靠性不足时，用户代理不应使用此信息。

例如，内容管理系统在系统内页面中使用关键字信息来填充站点搜索引擎的索引是合理的，但大型内容聚合器使用此信息可能会发现某些用户会尝试通过使用不合适的关键字来操纵其排名机制。

referrer

值必须是一个 referrer policy，它定义了 Document 的默认 referrer policy。[REFERRERPOLICY]

如果任何 meta 元素 element 被插入到文档中，或其 name 或 content 属性发生变化，用户代理必须运行以下算法：

如果 element 未在文档树中，则返回。
如果 element 没有 name 属性，其值与 "referrer" ASCII 不区分大小写匹配，则返回。
如果 element 没有 content 属性，或者该属性的值为空字符串，则返回。
设 value 为 element 的 content 属性的值，转换为 ASCII 小写。

如果 value 是以下表格第一列中的值之一，则将 value 设置为第二列中的值：

旧值	引用政策
`never`	`no-referrer`
`default`	默认引用政策
`always`	`unsafe-url`
`origin-when-crossorigin`	`origin-when-cross-origin`

如果 value 是引用政策，则将 element 的节点文档的政策容器的引用政策设置为 policy。

由于历史原因，与其他标准元数据名称不同，referrer 的处理模型对元素移除不敏感，并且不使用树顺序。只有最新插入或最近修改的 meta 元素在此状态下有效。

theme-color Element/meta/name/theme-color FirefoxNoSafari15+🔰 73+ OperaNo🔰 79+ Edge (旧版)?Internet ExplorerNo Firefox Android?Safari iOS?Chrome Android80+WebView AndroidNoSamsung Internet6.2+Opera AndroidNo

值必须是与 CSS <color> 生产规则匹配的字符串，定义一个建议的颜色，用户代理应使用该颜色来自定义页面或周围用户界面的显示。例如，浏览器可能会使用指定的值来为页面的标题栏着色，或者在标签栏或任务切换器中使用它作为颜色高亮。

在 HTML 文档中，media 属性值必须在所有 meta 元素中唯一，这些元素的 name 属性值与 theme-color ASCII 不区分大小写匹配。

本标准本身使用“WHATWG 绿色”作为其主题颜色：

<!DOCTYPE HTML>
<title>HTML Standard</title>
<meta name="theme-color" content="#3c790a">
...

media 属性可用于描述应使用提供颜色的上下文。

如果我们只想在黑暗模式下使用“WHATWG 绿色”作为本标准的主题颜色，可以使用 prefers-color-scheme 媒体功能：

<!DOCTYPE HTML>
<title>HTML Standard</title>
<meta name="theme-color" content="#3c790a" media="(prefers-color-scheme: dark)">
...

为了获取页面的主题颜色，用户代理必须运行以下步骤：

设 candidate elements 为满足以下条件的所有 meta 元素列表，按树顺序排列：
- 该元素在文档树中；
- 该元素具有一个 name 属性，其值与 theme-color ASCII 不区分大小写匹配；
- 该元素具有 content 属性。
对于 candidate elements 中的每个 element：
1. 如果 element 具有 media 属性，并且 element 的 media 属性的值不与环境匹配，则继续。
2. 设 value 为去除前导和尾随 ASCII 空格后的 element 的 content 属性的值。
3. 设 color 为解析 value 的结果。
4. 如果 color 不是失败，则返回 color。
返回无（页面没有主题颜色）。

如果任何 meta 元素被插入到文档中或从文档中移除，或现有的 meta 元素的 name、content 或 media 属性发生变化，或者环境变化导致任何 meta 元素的 media 属性的值现在可能与环境匹配或不匹配，用户代理必须重新运行上述算法并将结果应用于任何受影响的 UI。

在 UI 中使用主题颜色时，用户代理可能会以实现特定的方式调整它，使其更适合相应的 UI。例如，如果用户代理打算使用主题颜色作为背景并在其上显示白色文本，则可能会在 UI 的该部分中使用较深的主题颜色变体，以确保足够的对比度。

color-scheme

为了帮助用户代理立即以所需的配色方案渲染页面背景（而不是等待页面中的所有CSS加载完成），可以在‘color-scheme’值中提供在meta元素中。

该值必须是符合CSS‘color-scheme’属性值语法的字符串。它决定了页面支持的配色方案。

每个文档中不得有多个meta元素，其name属性值设置为color-scheme的ASCII不区分大小写匹配。

以下声明指示页面可以处理具有深色背景和浅色前景颜色的颜色方案：

<meta name="color-scheme" content="dark">

为了获取页面支持的颜色方案，用户代理必须运行以下步骤：

设 candidate elements 为满足以下条件的所有 meta 元素列表，按树顺序排列：
- 该元素在文档树中；
- 该元素具有一个 name 属性，其值与 color-scheme ASCII 不区分大小写匹配；
- 该元素具有 content 属性。
对于 candidate elements 中的每个 element：
1. 设 parsed 为解析组件值列表的结果，给定 element 的 content 属性的值。
2. 如果 parsed 是有效的 CSS 'color-scheme' 属性值，则返回 parsed。
返回 null。

如果任何 meta 元素被插入到文档中或从文档中移除，或者现有的 meta 元素的 name 或 content 属性发生变化，用户代理必须重新运行上述算法。

由于这些规则会检查连续的元素直到找到匹配项，因此作者可以提供多个这样的值以处理旧版用户代理的回退。与 CSS 属性的回退方式相反，多个 meta 元素需要按旧版值在新值之后的顺序排列。

4.2.5.2 其他元数据名称

任何人都可以创建并使用他们自己的扩展预定义的元数据名称集合。没有要求必须注册这些扩展。

但是，在以下任何情况下都不应创建新的元数据名称：

如果名称是URL，或者其附带的 content 属性的值是 URL；在这些情况下，建议将其注册为扩展预定义的链接类型集合（而不是创建新的元数据名称）。
如果该名称用于期望在用户代理中具有处理要求的内容；在这种情况下，它应该被标准化。

此外，在创建和使用新的元数据名称之前，建议咨询 WHATWG Wiki MetaExtensions 页面 — 以避免选择已经在使用的元数据名称，避免重复已经在使用的元数据名称的目的，并避免新标准化名称与您选择的名称冲突。[WHATWGWIKI]

任何人都可以随时编辑 WHATWG Wiki MetaExtensions 页面以添加元数据名称。新的元数据名称可以用以下信息来指定：

关键词

实际定义的名称。名称不应与任何其他定义的名称相似（例如，仅在大小写上不同）。

简短描述

元数据名称含义的简短非规范性描述，包括值所需的格式。

规范

链接到更详细描述元数据名称的语义和要求的链接。它可以是 wiki 上的另一页，或者是指向外部页面的链接。

同义词

具有完全相同处理要求的其他名称列表。作者不应使用定义为同义词的名称（它们仅用于允许用户代理支持旧内容）。任何人都可以删除实际上未使用的同义词；仅需要为了与旧内容兼容而处理为同义词的名称应以这种方式注册。

状态

以下之一：

已提议: 该名称尚未经过广泛的同行审查和批准。有人提出了它并且正在或即将使用它。
已批准: 该名称已通过广泛的同行审查和批准。它有一个规范，明确定义了如何处理使用该名称的页面，包括在错误使用该名称时的处理方式。
已停用: 该元数据名称已通过广泛的同行审查，但被发现存在问题。现有页面使用此元数据名称，但新页面应避免使用。“简短描述”和“规范”条目将提供详细信息，说明作者应使用的替代项（如果有）。

如果发现元数据名称与现有值重复，则应将其删除并列为现有值的同义词。

如果元数据名称在“已提议”状态下添加一个月或更长时间而未使用或未规范，则可以将其从 WHATWG Wiki MetaExtensions 页面中删除。

如果元数据名称在“已提议”状态下添加，并被发现与现有值重复，则应将其删除并列为现有值的同义词。如果元数据名称在“已提议”状态下添加并被发现有害，则应将其更改为“已停用”状态。

任何人都可以随时更改状态，但应仅按照上述定义进行更改。

4.2.5.3 Pragma指令

当http-equiv属性在 meta 元素上指定时，该元素即为一个pragma指令。

http-equiv 属性是一个枚举属性，具有以下关键字和状态：

关键字	符合	状态	简要描述
`content-language`	否	内容语言	设置pragma-set默认语言。
`content-type`		编码声明	设置`charset`的另一种形式。
`default-style`		默认样式	设置默认CSS样式表集的名称。
`refresh`		刷新	充当定时重定向。
`set-cookie`	否	设置Cookie	无效。
`x-ua-compatible`		X-UA-Compatible	实际上，鼓励Internet Explorer更严格地遵循规范。
`content-security-policy`		内容安全策略	强制实施内容安全策略于 `文档`。

当一个 meta 元素被插入到文档中时，如果其http-equiv 属性存在并且表示上述某个状态，则用户代理必须运行与该状态相对应的算法，如下列表所述：

内容语言状态 (http-equiv="content-language")

此功能不符合规范。建议作者使用 lang 属性代替。

此pragma设置pragma-set默认语言。在此类pragma成功处理之前，没有pragma-set默认语言。

如果 meta 元素没有 content 属性，则返回。
如果元素的 content 属性包含U+002C逗号字符（,），则返回。
令input为元素的 content 属性的值。
令position指向 input 的第一个字符。
跳过ASCII空白字符在input中给定position。
收集一系列码点，这些码点不是ASCII 空白字符，从input给定的position。
令candidate为前一步骤结果的字符串。
如果candidate为空字符串，则返回。
将pragma-set默认语言设置为candidate。

如果该值包含多个以空格分隔的标记，则忽略第一个之后的标记。

此pragma与同名的HTTP Content-Language 标头几乎完全不同。[HTTP]

编码声明状态 (http-equiv="content-type")

编码声明状态只是设置 charset 属性的另一种形式：它是一个字符编码声明。此状态的用户代理要求全部由规范的解析部分处理。

对于 meta 元素，其 http-equiv 属性处于编码声明状态，其 content 属性的值必须是与以下字符串ASCII不区分大小写匹配的字符串：“text/html;”，后面可以跟任意数量的ASCII空白，然后是“charset=utf-8”。

一个文档不得同时包含meta 元素，其http-equiv 属性处于编码声明状态和一个具有charset 属性的meta元素。

编码声明状态可以在HTML文档中使用，但在http-equiv 属性处于该状态的元素不得在XML文档中使用。

默认样式状态 (http-equiv="default-style") 替代样式表 仅在一个引擎中支持。 Firefox3+Safari?Chrome1–48 OperaYesEdgeNo Edge (旧版)?Internet Explorer8+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

此pragma设置默认CSS样式表集的名称。

如果meta 元素没有content 属性，或该属性的值为空字符串，则返回。
更改首选CSS样式表集名称，名称为元素的content 属性的值。 [CSSOM]

刷新状态 (http-equiv="refresh")

此pragma充当定时重定向。

一个文档 对象具有一个关联的将声明性刷新（一个布尔值）。最初为false。

如果meta 元素没有content 属性，或该属性的值为空字符串，则返回。
令input为元素的content 属性的值。
使用meta 元素的节点文档、input和meta元素运行共享声明性刷新步骤。

给定一个文档对象document、字符串input和可选的meta元素meta，共享声明性刷新步骤如下：

如果document的将声明性刷新为true，则返回。
令position指向input的第一个码点。
跳过ASCII空白在input中给定position。
令time为0。
收集一系列码点，这些码点是ASCII数字从input中给定position，并令结果为timeString。
如果timeString为空字符串，则：
1. 如果input中position指向的码点不是U+002E (.)，则返回。
否则，将time设置为使用解析非负整数的规则解析timeString的结果。
收集一系列码点，这些码点是ASCII数字和U+002E全停止字符（.）从input中给定position。忽略任何收集到的字符。
令urlRecord为document的URL。
如果position不在input的末尾，则：
1. 如果input中position指向的码点不是U+003B（;），U+002C（,），或ASCII空白，则返回。
2. 跳过ASCII空白在input中给定position。
3. 如果input中position指向的码点是U+003B（;）或U+002C（,），则将position前进到下一个码点。
4. 跳过ASCII空白在input中给定position。
如果position不在input的末尾，则：
1. 令urlString为input的子字符串，从position的码点到字符串的末尾。
2. 如果input中position指向的码点是U+0055 (U)或U+0075 (u)，则将position前进到下一个码点。否则，跳到标签为skip quotes的步骤。
3. 如果input中position指向的码点是U+0052 (R)或U+0072 (r)，则将position前进到下一个码点。否则，跳到标签为parse的步骤。
4. 如果input中position指向的码点是U+004C (L)或U+006C (l)，则将position前进到下一个码点。否则，跳到标签为parse的步骤。
5. 跳过ASCII空白在input中给定position。
6. 如果input中position指向的码点是U+003D（=），则将position前进到下一个码点。否则，跳到标签为parse的步骤。
7. 跳过ASCII空白在input中给定position。
8. 跳过引号：如果input中position指向的码点是U+0027（'）或U+0022（"），则令quote为该码点，并将position前进到下一个码点。否则，令quote为空字符串。
9. 将urlString设置为input的子字符串，从position的码点到字符串的末尾。
10. 如果quote不是空字符串，并且urlString中有一个码点等于quote，则在该码点处截断urlString，以便将其及所有后续码点移除。
11. 解析：将urlRecord设置为编码解析URL的结果给定urlString，相对于document。
12. 如果urlRecord失败，则返回。
将document的将声明性刷新设置为true。
执行以下一个或多个步骤：
- 在刷新到期后（定义如下），如果用户未取消重定向，并且如果给定meta，document的活动沙箱标志集没有沙箱自动功能浏览上下文标志设置，则导航至document的节点可导航至urlRecord使用document，历史处理设置为"替换"。
  
  为了上段的目的，刷新被认为是到期的，只要以下两个条件中的较晚一个发生：
  - 至少time秒已经过去了自document的完全加载时间，调整以考虑用户或用户代理偏好。
  - 如果给定meta，至少time秒已经过去了自meta插入到文档中document，调整以考虑用户或用户代理偏好。
  此处使用document非常重要，而不是meta的节点文档，因为在初始步骤和刷新到期之间可能已更改，并且meta并不总是给定（在HTTPRefresh标头的情况下）。
- 向用户提供一个界面，当选择时，导航至document的节点可导航至urlRecord使用document。
- 什么都不做。
此外，用户代理可以像任何操作一样，通知用户其操作的任何和所有方面，包括定时器的状态、任何定时重定向的目的地等。

对于meta 元素，其http-equiv 属性处于刷新状态，其content 属性的值必须是以下之一：

仅为一个有效的非负整数，或
一个有效的非负整数，后跟一个U+003B分号字符（;），后跟一个或多个ASCII空白，后跟一个子字符串，与字符串"URL"不区分大小写的匹配，后跟一个U+003D等号字符（=），后跟一个有效的URL字符串，该字符串不以文字U+0027撇号（'）或U+0022引号（"）字符开头。

在前一种情况下，整数表示页面重新加载之前的秒数；在后一种情况下，整数表示页面替换为给定URL页面之前的秒数。

新闻组织的首页可能会在页面的head 元素中包含以下标记，以确保页面每五分钟自动从服务器重新加载一次：

<meta http-equiv="Refresh" content="300">

一系列页面可以用作自动幻灯片放映，每个页面使用类似以下的标记刷新到序列中的下一个页面：

<meta http-equiv="Refresh" content="20; URL=page4.html">

Set-Cookie 状态 (http-equiv="set-cookie")

此pragma不符合规范且无效。

用户代理必须忽略此pragma。

X-UA-Compatible 状态 (http-equiv="x-ua-compatible")

实际上，此pragma鼓励Internet Explorer更紧密地遵循规范。

对于meta 元素，其http-equiv 属性处于X-UA-Compatible 状态，其content 属性的值必须与字符串"IE=edge" ASCII不区分大小写的匹配。

用户代理必须忽略此pragma。

内容安全策略状态 (http-equiv="content-security-policy")

此pragma 强制执行内容安全策略在一个文档上。[CSP]

如果meta 元素不是head 元素的子元素，则返回。
如果meta 元素没有content 属性，或该属性的值为空字符串，则返回。
令policy为执行内容安全策略的解析序列化内容安全策略算法的结果，针对meta元素的content属性的值，来源为"meta"，并且处置为"enforce"。
从policy中移除所有report-uri、 frame-ancestors和 sandbox的指令。
强制执行策略policy。

对于具有meta元素中的http-equiv属性的元素在内容安全策略状态中，content属性必须具有由有效内容安全策略组成的值，但不得包含任何report-uri、frame-ancestors或sandbox 指令。在content属性中给出的内容安全策略将被强制执行于当前文档。[CSP]

在将meta元素插入到文档中时，一些资源可能已经被获取。例如，在动态插入具有http-equiv属性的meta元素之前，图像可能已存储在可用图像列表中。已经获取的资源不保证被内容安全策略阻止，这些策略被强制执行得较晚。

一个页面可能选择通过阻止内联JavaScript的执行以及阻止所有插件内容来降低跨站点脚本攻击的风险，使用如下策略：

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'">

文档中同一时间不应有多个meta 元素处于任何特定状态。

4.2.5.4 指定文档的字符编码

字符编码声明是一种用于指定存储或传输文档时所使用的字符编码的机制。

编码标准要求使用UTF-8 字符编码，并要求使用“utf-8”编码标签来标识它。这些要求使得文档的字符编码声明，如果存在的话，必须使用一个与“utf-8”进行ASCII大小写不敏感匹配的编码标签来指定。无论是否存在字符编码声明，用于编码文档的实际字符编码必须是UTF-8。[ENCODING]

为了执行上述规则，创作工具必须默认使用UTF-8 来创建新文档。

以下限制也适用：

字符编码声明必须在不使用字符引用或任何形式的字符转义的情况下进行序列化。
包含字符编码声明的元素必须在文档的前1024字节内完全序列化。

此外，由于meta元素上的一些限制，每个文档只能有一个基于meta的字符编码声明。

如果一个HTML文档没有以BOM开始，且其编码没有被内容类型元数据显式给出，且该文档不是iframe的srcdoc文档，那么必须使用带有charset属性的meta元素或带有http-equiv属性的meta元素来指定编码状态。

字符编码声明是必需的（无论是在内容类型元数据中还是在文件中显式声明），即使所有字符都在ASCII范围内，因为处理用户在表单中输入的非ASCII字符、脚本生成的URL等时需要字符编码。

使用非UTF-8编码在表单提交和URL编码上可能会产生意外结果，这些默认使用文档的字符编码。

如果文档是iframe的srcdoc文档，则文档不得有字符编码声明。（在这种情况下，源代码已经解码，因为它是包含iframe的文档的一部分。）

在XML中，如果需要内联字符编码信息，应使用XML声明。

在HTML中，要声明字符编码为UTF-8，作者可以在文档顶部附近（在head元素中）包含以下标记：

<meta charset="utf-8">

在XML中，应该使用XML声明，位于标记的最顶部：

<?xml version="1.0" encoding="utf-8"?>

4.2.6 `style` 元素

Element/style

支持所有当前引擎。

Firefox1+Safari1+Chrome1+

Opera3.5+Edge79+

Edge (旧版)12+Internet Explorer3+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

HTMLStyleElement

支持所有当前引擎。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

类别：

元数据内容。

此元素可用于的上下文：

在期望元数据内容的地方。

在noscript元素中，该元素是head元素的子元素。

内容模型：

文本，提供符合标准的样式表。

在text/html中的标签省略：

两个标签都不能省略。

内容属性：

全局属性

media — 适用的媒体

blocking — 元素是否可能阻碍渲染

此外，title属性在该元素上具有特殊语义：CSS样式表集名称

无障碍考虑：

给作者。

给实现者。

DOM接口：

[Exposed=Window]
interface HTMLStyleElement : HTMLElement {
  [HTMLConstructor] constructor();

  attribute boolean disabled;
  [CEReactions] attribute DOMString media;
  [SameObject, PutForwards=value] readonly attribute DOMTokenList blocking;

  // also has obsolete members
};
HTMLStyleElement includes LinkStyle;

style元素允许作者在文档中嵌入CSS样式表。style元素是样式处理模型的多个输入之一。该元素不表示用户内容。

HTMLStyleElement/disabled

支持所有当前引擎。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)13+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

disabled获取器步骤如下：

如果this没有关联的CSS样式表，则返回false。
如果this的关联的CSS样式表的禁用标志已设置，则返回true。
返回false。

disabled设置器步骤如下：

如果this没有关联的CSS样式表，则返回。
如果给定的值为true，则设置this的关联的CSS样式表的禁用标志。否则，取消设置this的关联的CSS样式表的禁用标志。

重要的是，只有当style元素具有关联的CSS样式表时，disabled属性分配才会生效：

const style = document.createElement('style');
style.disabled = true;
style.textContent = 'body { background-color: red; }';
document.body.append(style);
console.log(style

.disabled); // false

media属性指示样式适用于哪些媒体。值必须是有效的媒体查询列表。用户代理必须在media属性的值与环境匹配且其他相关条件适用时应用样式，否则不得应用。

样式可能在范围内进一步受限，例如在CSS中使用@media块。本规范不覆盖此类进一步的限制或要求。

默认情况下，如果省略media属性，则为"all"，即默认样式适用于所有媒体。

blocking属性是一个阻碍属性。

Alternative_style_sheets

仅在一个引擎中支持。

Firefox3+Safari?Chrome1–48

OperaYesEdgeNo

Edge (旧版)?Internet Explorer8+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

title属性在style元素上定义了CSS样式表集。如果style元素没有title属性，则它没有标题；祖先的title属性不适用于style元素。如果style元素不在文档树中，则忽略title属性。[CSSOM]

title属性在style元素上，与title属性在link元素上不同，全局title属性不适用于没有标题的style块：它只是没有标题。

style元素的子文本内容必须是符合标准的样式表。

style元素如果是由其节点文档的解析器创建的，则隐含地可能阻碍渲染。

用户代理必须在发生以下任何情况时运行更新style块算法：

元素从开放元素栈中弹出，或HTML解析器或XML解析器中弹出。
元素不在开放元素栈中，并且变为连接状态或变为断开状态。
元素的子元素更改步骤运行。

更新style块算法如下：

让element成为style元素。
如果element有关联的CSS样式表，则移除CSS样式表。
如果element不是连接状态，则返回。
如果element的type属性存在且其值既不是空字符串也不是text/css的ASCII大小写不敏感匹配，则返回。

特别是，具有参数的type值，如"text/css; charset=utf-8"，将导致此算法提前返回。
如果内容安全策略应阻止元素的内联行为吗？算法在style元素、"style"和style元素的子文本内容上执行时返回"Blocked"，则返回。[CSP]
创建一个CSS样式表，具有以下属性：

类型

text/css

所有者节点

element

媒体

element的media属性。

这是对（可能在此时不存在的）属性的引用，而不是属性当前值的副本。CSSOM定义了当属性被动态设置、更改或删除时会发生什么。

标题

如果element在文档树中，则为element的title属性，否则为空字符串。

同样，这只是对属性的引用。

替代标志

未设置。

源干净标志

已设置。

位置

父CSS样式表

所有者CSS规则

null

禁用标志

保持默认值。

CSS规则

保持未初始化状态。

这似乎不正确。大概我们应该使用元素的子文本内容？作为问题#2997进行跟踪。
如果element贡献了阻止脚本的样式表，则将element追加到其节点文档的阻止脚本样式表集中。
如果element的media属性的值与环境匹配，且element可能阻碍渲染，则阻碍渲染。

一旦尝试获取样式表的关键子资源（如果有）完成，或者，如果样式表没有关键子资源，则一旦样式表已解析和处理，用户代理必须运行这些步骤：

获取关键子资源未明确定义；可能问题#968是对此的最佳解决方案。同时，任何关键子资源请求应根据当前style元素是否阻碍渲染来设置其阻碍渲染标志。

让element成为style元素，与样式表关联。
让success为true。
如果获取样式表的任何关键子资源的尝试因任何原因（例如，DNS错误、HTTP 404响应、连接过早关闭、不支持的Content-Type）失败，则将success设置为false。

请注意，内容特定的错误，例如CSS解析错误或PNG解码错误，不会影响success。
将一个元素任务排队，在网络任务源上，给定element和以下步骤：
1. 如果success为true，则触发名为load的事件，目标是element。
2. 否则，触发名为error的事件，目标是element。
3. 如果element贡献了阻止脚本的样式表：
  1. 断言：element的节点文档的阻止脚本样式表集包含element。
  2. 从列表中移除element，从其节点文档的阻止脚本样式表集。
4. 解除渲染阻塞。

该元素必须延迟加载事件，直到所有尝试获取样式表的关键子资源（如果有）完成。

本规范未指定样式系统，但大多数网页浏览器预计会支持CSS。[CSS]

HTMLStyleElement/media

支持所有当前引擎。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

media和blockingIDL属性必须分别反映同名的内容属性。

LinkStyle接口也由该元素实现。[CSSOM]

以下文档将强调部分样式为亮红色文本，而非斜体文本，同时保持作品标题和拉丁文的默认斜体。它展示了如何使用适当的元素来简化文档的重新样式化。

<!DOCTYPE html>
<html lang="en-US">
 <head>
  <title>My favorite book</title>
  <style>
   body { color: black; background: white; }
   em { font-style: normal; color: red; }
  </style>
 </head>
 <body>
  <p>My <em>favorite</em> book of all time has <em>got</em> to be
  <cite>A Cat's Life</cite>. It is a book by P. Rahmel that talks
  about the <i lang="la">Felis catus</i> in modern human society.</p>
 </body>
</html>

4.2.7 样式和脚本的交互

如果样式表未引用其他资源（例如，它是由没有@import规则的style元素给出的内部样式表），则样式规则必须立即提供给脚本；否则，样式规则必须在事件循环到达其更新渲染步骤时才提供给脚本。

在文档的上下文中，一个元素el如果满足以下所有条件，则贡献了阻止脚本的样式表：

el是由该文档的解析器创建的。
el要么是style元素，要么是当el由解析器创建时是一个外部资源链接（贡献到样式处理模型）的link元素。
el的media属性的值与环境匹配。
el的样式表在元素创建时是启用的。
在事件循环上次到达步骤1时，el的根是那个文档。
用户代理尚未放弃加载那个特定的样式表。用户代理可以在任何时候放弃加载样式表。

如果在样式表加载之前放弃样式表，则即使样式表最终加载，脚本也可能最终使用不正确的信息。例如，如果样式表将一个元素的颜色设置为绿色，但在样式表加载之前执行了检查结果样式的脚本，则脚本会发现元素是黑色（或其他默认颜色），可能因此做出错误的选择（例如，决定在页面其他地方使用黑色，而不是绿色）。实现者必须平衡脚本使用不正确信息的可能性与等待慢速网络请求完成时的不作为对性能的影响。

预计上述规则的对应规则也适用于<?xml-stylesheet?>处理指令。但是，这尚未彻底调查。

文档有一个阻止脚本的样式表集，这是一个有序集，最初为空。

如果以下步骤返回true，则文档document有一个阻止脚本的样式表：

如果document的阻止脚本的样式表集不为空，则返回true。
如果document的节点可导航对象为null，则返回false。
令containerDocument为document的节点可导航对象的容器文档。
如果containerDocument非null且containerDocument的阻止脚本的样式表集不为空，则返回true。
返回false。

如果一个文档没有阻止脚本的样式表，则它不有一个阻止脚本的样式表。

4.3 区块

Introduction_to_HTML/Document_and_website_structure#HTML_for_structuring_content

所有当前引擎支持。

Firefox4+ Safari5+ Chrome5+

Opera11.1+ Edge79+

Edge (旧版)12+ Internet Explorer9+

Firefox Android? Safari iOS? Chrome Android? WebView Android? Samsung Internet? Opera Android11.1+

4.3.1 `body` 元素

Element/body

所有当前引擎支持。

Firefox1+ Safari1+ Chrome1+

Opera? Edge79+

Edge (旧版)12+ Internet ExplorerYes

Firefox Android? Safari iOS? Chrome Android? WebView Android? Samsung Internet? Opera Android?

HTMLBodyElement

所有当前引擎支持。

Firefox1+ Safari3+ Chrome1+

Opera12.1+ Edge79+

Edge (旧版)12+ Internet Explorer4+

Firefox Android? Safari iOS1+ Chrome Android? WebView Android? Samsung Internet? Opera Android12.1+

分类:

无。

该元素可用的上下文:

作为 html 元素中的第二个元素。

内容模型:

流内容。

在 text/html 中标签的省略:

如果元素为空，或者 body 元素内的第一个内容不是 ASCII 空白或注释，则可以省略 body 元素的开始标签，除非 body 元素内的第一个内容是 meta、noscript、link、script、style 或 template 元素。

如果 body 元素后面不是紧跟一个注释，则可以省略 body 元素的结束标签。

内容属性:

全局属性

onafterprint

onbeforeprint

onbeforeunload

onhashchange

onlanguagechange

onmessage

onmessageerror

onoffline

ononline

onpageswap

onpagehide

onpagereveal

onpageshow

onpopstate

onrejectionhandled

onstorage

onunhandledrejection

onunload

[Exposed=Window]
interface HTMLBodyElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

HTMLBodyElement includes WindowEventHandlers;

body 元素代表文档的内容。

在符合规范的文档中，只有一个 body 元素。document.body IDL 属性为脚本提供了访问文档的 body 元素的便捷方法。

一些 DOM 操作（例如，拖放模型的某些部分）是根据“body 元素”定义的。这指的是 DOM 中的特定元素，而不是任意的 body 元素。

body 元素将事件处理程序内容属性作为多个事件处理程序的公开。它还反映了这些事件处理程序的事件处理程序 IDL 属性。

Window 对象的事件处理程序，在 Window-反射 body 元素事件处理程序集中命名的，由 body 元素公开，替换了普通事件处理程序的相同名称，通常由 HTML 元素支持。

因此，例如，在一个 error 事件冒泡到 body 元素的子元素时，会首先触发该元素的 onerror 事件处理程序内容属性，然后触发根 html 元素的事件处理程序，最后才会触发 onerror 事件处理程序内容属性在 body 元素上。这是因为事件会从目标冒泡到 body，再到 html，再到 Document，再到 Window，并且事件处理程序在 body 上是监视 Window 而不是 body。然而，附加到 body 的常规事件监听器使用 addEventListener()，会在事件通过 body 冒泡时运行，而不是在它到达 Window 对象时运行。

此页面更新指示器以显示用户是否在线：

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>Online or offline?</title>
  <script>
   function update(online) {
     document.getElementById('status').textContent =
       online ? 'Online' : 'Offline';
   }
  </script>
 </head>
 <body ononline="update(true)"
       onoffline="update(false)"
       onload="update(navigator.onLine)">
  <p>You are: <span id="status">(Unknown)</span></p>
 </body>
</html>

4.3.2 `article` 元素

元素/article

在所有当前引擎中支持。

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge（遗留版）12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

类别:: 流内容.; 分区内容.; 可触及内容.
该元素可以使用的上下文:: 在分区内容的地方。
内容模型:: 流内容.
文本/html中的标签省略:: 没有标签可以省略。
内容属性:: 全局属性
无障碍考虑:: 对于作者.; 对于实现者.
DOM 接口:: 使用HTMLElement.

article 元素表示文档、页面、应用程序或网站中的一个完整或自包含的组成部分，并且原则上可以独立分发或重用，例如，在联合发布中。这可以是论坛帖子、杂志或报纸文章、博客条目、用户提交的评论、互动小部件或设备，或任何其他独立的内容项。

当article 元素嵌套时，内部的 article 元素表示与外部文章内容相关的文章。例如，一个允许用户提交评论的网站上的博客条目可以将评论表示为在该博客条目的article 元素内嵌套的article 元素。

与article 元素关联的作者信息（见 address 元素）不适用于嵌套的 article 元素。

当特定用于要在联合发布中重新分发的内容时，article 元素的用途类似于 Atom 中的 entry 元素。[ATOM]

可以使用 schema.org 微数据词汇提供 article 元素的出版日期，使用 CreativeWork 子类型之一。

当页面的主要内容（即不包括页脚、页眉、导航块和侧边栏）完全是一个自包含的组成部分时，可以使用article标记这些内容，但在这种情况下，它在技术上是多余的（因为页面本身就是一个单一的文档，很明显它是一个单一的组成部分）。

此示例展示了一个使用article元素的博客帖子，并附有一些 schema.org 注释：

<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h2 itemprop="headline">The Very First Rule of Life</h2>
  <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <footer>
  <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
 </footer>
</article>

这是同一个博客帖子，但显示了一些评论：

<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h2 itemprop="headline">The Very First Rule of Life</h2>
  <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <section>
  <h1>Comments</h1>
  <article itemprop="comment" itemscope itemtype="http://schema.org/Comment" id="c1">
   <link itemprop="url" href="#c1">
   <footer>
    <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">George Washington</span>
    </span></p>
    <p><time itemprop="dateCreated" datetime="2009-10-10">15 minutes ago</time></p>
   </footer>
   <p>Yeah! Especially when talking about your lobbyist friends!</p>
  </article>
  <article itemprop="comment" itemscope itemtype="http://schema.org/Comment" id="c2">
   <link itemprop="url" href="#c2">
   <footer>
    <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">George Hammond</span>
    </span></p>
    <p><time itemprop="dateCreated" datetime="2009-10-10">5 minutes ago</time></p>
   </footer>
   <p>Hey, you have the same first name as me.</p>
  </article>
 </section>
</article>

注意使用了footer来提供每条评论的信息（例如，谁写的以及何时写的）：footer元素可以在其部分的开头出现，当情况合适时，例如在这种情况下。（在这种情况下使用header也不会错误；这主要是作者的个人偏好问题。）

在这个示例中，article元素用于在门户页面上托管小部件。这些小部件被实现为自定义内置元素，以获得特定的样式和脚本行为。

<!DOCTYPE HTML>
<html lang=en>
<title>eHome Portal</title>
<script src="/scripts/widgets.js"></script>
<link rel=stylesheet href="/styles/main.css">
<article is="stock-widget">
 <h2>Stocks</h2>
 <table>
  <thead> <tr> <th> Stock <th> Value <th> Delta
  <tbody> <template> <tr> <td> <td> <td> </template>
 </table>
 <p> <input type=button value="Refresh" onclick="this.parentElement.refresh()">
</article>
<article is="news-widget">
 <h2>News</h2>
 <ul>
  <template>
   <li>
    <p><img> <strong></strong>
    <p>
  </template>
 </ul>
 <p> <input type=button value="Refresh" onclick="this.parentElement.refresh()">
</article>

4.3.3 `section` 元素

Element/section

所有当前浏览器均支持。

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

类别:: 流内容.; 分区内容.; 可感知内容.
可用上下文:: 期望有分区内容的地方。
内容模型:: 流内容.
文本/HTML中的标签省略:: 没有标签是可以省略的。
内容属性:: 全局属性
无障碍考虑:: 针对作者.; 针对实现者.
DOM接口:: 使用HTMLElement.

section 元素表示文档或应用程序中的一个通用部分。在这种上下文中，一个部分是内容的主题分组，通常带有标题。

部分的示例包括章节、选项卡对话框中的各个选项卡页面，或论文的编号部分。一个网站的主页可以分成几个部分，如介绍、新闻项目和联系信息。

建议作者在可能进行内容转载的情况下使用article元素，而不是section元素。

section 元素不是一个通用的容器元素。当仅需要一个元素用于样式目的或作为脚本的便利时，建议作者使用 div 元素。一般规则是，section 元素只有在其内容将在文档的大纲中明确列出时才合适。

在以下示例中，我们看到一篇关于苹果的文章（网页的一个部分），包含两个简短的部分。

<article>
 <hgroup>
  <h2>Apples</h2>
  <p>Tasty, delicious fruit!</p>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h3>Red Delicious</h3>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
 </section>
 <section>
  <h3>Granny Smith</h3>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
 </section>
</article>

这是一个毕业典礼程序，其中包含两个部分，一个是毕业人员名单，另一个是仪式的描述。（这个示例中的标记使用了一种不常见的样式，有时用于最小化元素间空白。）

<!DOCTYPE Html>
<Html Lang=En
 ><Head
   ><Title
     >Graduation Ceremony Summer 2022</Title
   ></Head
 ><Body
   ><H1
     >Graduation</H1
   ><Section
     ><H2
       >Ceremony</H2
     ><P
       >Opening Procession</P
     ><P
       >Speech by Valedictorian</P
     ><P
       >Speech by Class President</P
     ><P
       >Presentation of Diplomas</P
     ><P
       >Closing Speech by Headmaster</P
   ></Section
   ><Section
     ><H2
       >Graduates</H2
     ><Ul
       ><Li
         >Molly Carpenter</Li
       ><Li
         >Anastasia Luccio</Li
       ><Li
         >Ebenezar McCoy</Li
       ><Li
         >Karrin Murphy</Li
       ><Li
         >Thomas Raith</Li
       ><Li
         >Susan Rodriguez</Li
     ></Ul
   ></Section
 ></Body
></Html>

在这个示例中，书籍作者将一些部分标记为章节，另一些标记为附录，并使用 CSS 对这两类部分的标题进行不同的样式设置。

<style>
 section { border: double medium; margin: 2em; }
 section.chapter h2 { font: 2em Roboto, Helvetica Neue, sans-serif; }
 section.appendix h2 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
</style>
<header>
 <hgroup>
  <h1>My Book</h1>
  <p>A sample with not much content</p>
 </hgroup>
 <p><small>Published by Dummy Publicorp Ltd.</small></p>
</header>
<section class="chapter">
 <h2>My First Chapter</h2>
 <p>This is the first of my chapters. It doesn't say much.</p>
 <p>But it has two paragraphs!</p>
</section>
<section class="chapter">
 <h2>It Continues: The Second Chapter</h2>
 <p>Bla dee bla, dee bla dee bla. Boom.</p>
</section>
<section class="chapter">
 <h2>Chapter Three: A Further Example</h2>
 <p>It's not like a battle between brightness and earthtones would go
 unnoticed.</p>
 <p>But it might ruin my story.</p>
</section>
<section class="appendix">
 <h2>Appendix A: Overview of Examples</h2>
 <p>These are demonstrations.</p>
</section>
<section class="appendix">
 <h2>Appendix B: Some Closing Remarks</h2>
 <p>Hopefully this long example shows that you <em>can</em> style
 sections, so long as they are used to indicate actual sections.</p>
</section>

4.3.4 `nav` 元素

Element/nav

在所有当前的引擎中都支持。

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

类别:: 流内容.; 章节内容.; 可感知内容.
此元素可以使用的上下文:: 在需要章节内容的地方。
内容模型:: 流内容.
在 text/html 中的标签省略:: 没有标签是可以省略的。
内容属性:: 全局属性
无障碍考虑:: 给作者.; 给实施者.
DOM 接口:: 使用 HTMLElement.

nav 元素表示一个页面的部分，该部分链接到其他页面或页面内的部分：一个包含导航链接的部分。

并不是页面上的所有链接组都需要放在 nav 元素中——该元素主要用于包含主要导航块的部分。特别是，脚注中通常有一个简短的链接列表，链接到网站的各种页面，例如服务条款、主页和版权页面。在这种情况下，仅使用 footer 元素就足够了；虽然在这种情况下可以使用 nav 元素，但通常是不必要的。

用户代理（如屏幕阅读器）可以利用此元素来确定在初始渲染时应跳过哪些页面内容，或者在请求时提供哪些内容（或两者兼有），以便为需要从导航信息中受益的用户提供帮助。

在以下示例中，有两个 nav 元素，一个用于站点的主要导航，一个用于页面本身的次要导航。

<body>
 <h1>The Wiki Center Of Exampland</h1>
 <nav>
  <ul>
   <li><a href="/">Home</a></li>
   <li><a href="/events">Current Events</a></li>
   ...more...
  </ul>
 </nav>
 <article>
  <header>
   <h2>Demos in Exampland</h2>
   <p>Written by A. N. Other.</p>
  </header>
  <nav>
   <ul>
    <li><a href="#public">Public demonstrations</a></li>
    <li><a href="#destroy">Demolitions</a></li>
    ...more...
   </ul>
  </nav>
  <div>
   <section id="public">
    <h2>Public demonstrations</h2>
    <p>...more...</p>
   </section>
   <section id="destroy">
    <h2>Demolitions</h2>
    <p>...more...</p>
   </section>
   ...more...
  </div>
  <footer>
   <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
  </footer>
 </article>
 <footer>
  <p><small>© copyright 1998 Exampland Emperor</small></p>
 </footer>
</body>

在以下示例中，页面上有几个地方包含链接，但其中只有一个地方被视为导航区域。

<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
  <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
  <nav>
   <h2>Navigation</h2>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h2 itemprop="headline">My Day at the Beach</h2>
   </header>
   <div itemprop="articleBody">
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </div>
   <footer>
    <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </main>
 <footer>
  <p>Copyright ©
   <span itemprop="copyrightYear">2010</span>
   <span itemprop="copyrightHolder">The Example Company</span>
  </p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>

您还可以在上述示例中看到使用 schema.org 词汇的微数据注释，这些注释提供了有关博客文章的发布日期和其他元数据。

一个 nav 元素不必包含列表，它也可以包含其他类型的内容。在这个导航块中，链接以散文形式提供：

<nav>
 <h1>Navigation</h1>
 <p>You are on my home page. To the north lies <a href="/blog">my
 blog</a>, from whence the sounds of battle can be heard. To the east
 you can see a large mountain, upon which many <a
 href="/school">school papers</a> are littered. Far up thus mountain
 you can spy a little figure who appears to be me, desperately
 scribbling a <a href="/school/thesis">thesis</a>.</p>
 <p>To the west are several exits. One fun-looking exit is labeled <a
 href="https://games.example.com/">"games"</a>. Another more
 boring-looking exit is labeled <a
 href="https://isp.example.net/">ISP™</a>.</p>
 <p>To the south lies a dark and dank <a href="/about">contacts
 page</a>. Cobwebs cover its disused entrance, and at one point you
 see a rat run quickly out of the page.</p>
</nav>

在这个例子中，nav 用于电子邮件应用程序中，让用户切换文件夹：

<p><input type=button value="Compose" onclick="compose()"></p>
<nav>
 <h1>Folders</h1>
 <ul>
  <li> <a href="/inbox" onclick="return openFolder(this.href)">Inbox</a> <span class=count></span>
  <li> <a href="/sent" onclick="return openFolder(this.href)">Sent</a>
  <li> <a href="/drafts" onclick="return openFolder(this.href)">Drafts</a>
  <li> <a href="/trash" onclick="return openFolder(this.href)">Trash</a>
  <li> <a href="/customers" onclick="return openFolder(this.href)">Customers</a>
 </ul>
</nav>

4.3.5 `aside` 元素

Element/aside

支持所有当前引擎。

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

类别:: 流内容.; 分节内容.; 显性内容.
该元素可以使用的上下文:: 在分节内容中。
内容模型:: 流内容.
text/html中的标签省略:: 两个标签都不可省略。
内容属性:: 全局属性
无障碍考虑:: 给作者的建议.; 给实施者的建议.
DOM接口:: 使用HTMLElement.

aside 元素表示页面的一部分，其中包含与aside 元素周围的主要内容仅间接相关的内容，这些内容可以被认为是与该内容分开的。这种部分通常在印刷排版中表示为侧边栏。

该元素可用于排版效果，如引用或侧边栏，广告，nav 元素组，以及其他被认为与页面主要内容分开的内容。

不应仅将aside 元素用于括号内容，因为这些内容是文档的主要流程的一部分。

以下示例展示了如何使用aside来标记有关瑞士的背景材料，该材料位于关于欧洲的更长新闻故事中。

<aside>
 <h2>Switzerland</h2>
 <p>Switzerland, a land-locked country in the middle of geographic
 Europe, has not joined the geopolitical European Union, though it is
 a signatory to a number of European treaties.</p>
</aside>

以下示例展示了如何使用aside 来标记一篇较长文章中的引言摘录。

...

<p>He later joined a large company, continuing on the same work.
<q>I love my job. People ask me what I do for fun when I'm not at
work. But I'm paid to do my hobby, so I never know what to
answer. Some people wonder what they would do if they didn't have to
work... but I know what I would do, because I was unemployed for a
year, and I filled that time doing exactly what I do now.</q></p>

<aside>
 <q>People ask me what I do for fun when I'm not at work. But I'm
 paid to do my hobby, so I never know what to answer.</q>
</aside>

<p>Of course his work — or should that be hobby? —
isn't his only passion. He also enjoys other pleasures.</p>

...

以下摘录展示了aside 如何用于博客的博客列表和其他侧边内容：

<body>
 <header>
  <h1>My wonderful blog</h1>
  <p>My tagline</p>
 </header>
 <aside>
  <!-- this aside contains two sections that are tangentially related
  to the page, namely, links to other blogs, and links to blog posts
  from this blog -->
  <nav>
   <h2>My blogroll</h2>
   <ul>
    <li><a href="https://blog.example.com/">Example Blog</a>
   </ul>
  </nav>
  <nav>
   <h2>Archives</h2>
   <ol reversed>
    <li><a href="/last-post">My last post</a>
    <li><a href="/first-post">My first post</a>
   </ol>
  </nav>
 </aside>
 <aside>
  <!-- this aside is tangentially related to the page also, it
  contains twitter messages from the blog author -->
  <h1>Twitter Feed</h1>
  <blockquote cite="https://twitter.example.net/t31351234">
   I'm on vacation, writing my blog.
  </blockquote>
  <blockquote cite="https://twitter.example.net/t31219752">
   I'm going to go on vacation soon.
  </blockquote>
 </aside>
 <article>
  <!-- this is a blog post -->
  <h2>My last post</h2>
  <p>This is my last post.</p>
  <footer>
   <p><a href="/last-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <article>
  <!-- this is also a blog post -->
  <h2>My first post</h2>
  <p>This is my first post.</p>
  <aside>
   <!-- this aside is about the blog post, since it's inside the
   <article> element; it would be wrong, for instance, to put the
   blogroll here, since the blogroll isn't really related to this post
   specifically, only to the page as a whole -->
   <h2>Posting</h2>
   <p>While I'm thinking about it, I wanted to say something about
   posting. Posting is fun!</p>
  </aside>
  <footer>
   <p><a href="/first-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <footer>
  <p><a href="/archives">Archives</a> -
   <a href="/about">About me</a> -
   <a href="/copyright">Copyright</a></p>
 </footer>
</body>

4.3.6 `h1`、`h2`、`h3`、`h4`、`h5` 和 `h6` 元素

元素/标题元素

支持所有当前的浏览器引擎。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (遗留版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

元素/标题元素

支持所有当前的浏览器引擎。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (遗留版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

元素/标题元素

支持所有当前的浏览器引擎。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (遗留版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

元素/标题元素

支持所有当前的浏览器引擎。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (遗留版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

元素/标题元素

支持所有当前的浏览器引擎。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (遗留版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

元素/标题元素

支持所有当前的浏览器引擎。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (遗留版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLHeadingElement

支持所有当前的浏览器引擎。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (遗留版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

流内容。

作为 hgroup 元素的子元素。

在标题内容预期的位置。

两个标签都不可省略。

[Exposed=Window]
interface HTMLHeadingElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

这些元素代表其部分的标题。

这些元素的语义和意义定义在标题和大纲部分。

这些元素有一个标题级别，由其名称中的数字给出。标题级别对应于嵌套部分的级别。h1 元素用于顶级部分，h2 用于子部分，h3 用于子子部分，依此类推。

就各自的文档大纲（标题和部分结构）而言，这两个片段在语义上是等效的：

<body>
<h1>Let's call it a draw(ing surface)</h1>
<h2>Diving in</h2>
<h2>Simple shapes</h2>
<h2>Canvas coordinates</h2>
<h3>Canvas coordinates diagram</h3>
<h2>Paths</h2>
</body>

<body>
 <h1>Let's call it a draw(ing surface)</h1>
 <section>
  <h2>Diving in</h2>
 </section>
 <section>
  <h2>Simple shapes</h2>
 </section>
 <section>
  <h2>Canvas coordinates</h2>
  <section>
   <h3>Canvas coordinates diagram</h3>
  </section>
 </section>
 <section>
  <h2>Paths</h2>
 </section>
</body>

作者可能会因为前一种风格的简洁性而偏好它，或者因为后一种风格的额外样式钩子而偏好它。哪种更好完全是作者个人风格的选择问题。

4.3.7 `hgroup` 元素

Element/hgroup

所有当前引擎都支持。

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android2.2+Samsung Internet?Opera Android11.1+

类别:: 流内容.; 标题内容.; 可感知内容.
此元素可用的上下文:: 在期望有标题内容的地方。
内容模型:: 零个或多个p元素，接着一个h1、h2、h3、h4、h5或h6元素，之后跟零个或多个p元素，可能夹杂有脚本支持元素。
在 text/html 中的标签省略:: 两个标签都不可省略。
内容属性:: 全局属性
可访问性考虑:: 供作者参考.; 供实施者参考.
DOM 接口:: 使用HTMLElement.

hgroup 元素表示一个标题和相关内容。该元素可用于将一个或多个 h1–h6 元素与一个或多个包含子标题、替代标题或标语内容的 p 元素组合在一起。

以下是包含在 hgroup 元素中的一些有效标题示例。

<hgroup>
 <h1>The reality dysfunction</h1>
 <p>Space is not the only void</p>
</hgroup>

<hgroup>
 <h1>Dr. Strangelove</h1>
 <p>Or: How I Learned to Stop Worrying and Love the Bomb</p>
</hgroup>

4.3.8 `header` 元素

Element/header

所有当前引擎都支持。

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

类别:: 流内容.; 可感知内容.
此元素可以使用的上下文:: 在期望有流内容的地方。
内容模型:: 流内容，但没有 header 或 footer 元素的后代。
在 text/html 中的标签省略:: 没有标签可以省略。
内容属性:: 全局属性
可访问性考虑:: 如果存在祖先分区内容元素: 供作者参考; 供实现者参考.; 否则: 供作者参考; 供实现者参考.
DOM 接口:: 使用 HTMLElement.

header 元素表示一组介绍性或导航辅助工具。

header 元素通常旨在包含一个标题（h1–h6 元素或 hgroup 元素），但这不是强制要求的。header 元素也可以用于包装一个部分的目录、一个搜索表单或任何相关的徽标。

以下是一些示例标题。第一个是为一个游戏设计的：

<header>
 <p>Welcome to...</p>
 <h1>Voidwars!</h1>
</header>

下面的片段展示了如何使用该元素标记规范的头部：

<header>
 <hgroup>
  <h1>Fullscreen API</h1>
  <p>Living Standard — Last Updated 19 October 2015<p>
 </hgroup>
 <dl>
  <dt>Participate:</dt>
  <dd><a href="https://github.com/whatwg/fullscreen">GitHub whatwg/fullscreen</a></dd>
  <dt>Commits:</dt>
  <dd><a href="https://github.com/whatwg/fullscreen/commits">GitHub whatwg/fullscreen/commits</a></dd>
 </dl>
</header>

`header>`元素不是分节内容；它不会引入一个新节。

在这个例子中，页面有一个由`h1>`元素给出的页面标题，以及两个由 `h2>` 元素给出的子部分。`header>` 元素后的内容仍然是上一个由 `header>` 元素开始的子部分的一部分，因为 `header>` 元素不会参与大纲算法。

<body>
 <header>
  <h1>Little Green Guys With Guns</h1>
  <nav>
   <ul>
    <li><a href="/games">Games</a>
    <li><a href="/forum">Forum</a>
    <li><a href="/download">Download</a>
   </ul>
  </nav>
  <h2>Important News</h2> <!-- this starts a second subsection -->
  <!-- this is part of the subsection entitled "Important News" -->
  <p>To play today's games you will need to update your client.</p>
  <h2>Games</h2> <!-- this starts a third subsection -->
 </header>
 <p>You have three active games:</p>
 <!-- this is still part of the subsection entitled "Games" -->
 ...

4.3.9 `footer` 元素

Element/footer

支持所有当前引擎。

Firefox4+Safari5+Chrome5+

Opera11.1+Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+

类别:: 流内容。; 可触及内容。
可以使用此元素的上下文:: 在预期出现流内容的地方。
内容模型:: 流内容，但没有 header 或 footer 元素的后代。
在 text/html 中的标签省略:: 两个标签都不能省略。
内容属性:: 全局属性
可访问性考虑:: 如果有祖先分区内容元素: 供作者参考; 供实现者参考。; 否则: 供作者参考; 供实现者参考。
DOM 接口:: 使用 HTMLElement。

footer 元素表示它最近的祖先分区内容元素的页脚，或者如果没有这样的祖先，则为主体元素。页脚通常包含有关其部分的信息，如撰写者、相关文档的链接、版权数据等。

当 footer 元素包含整个部分时，它们表示附录、索引、长篇后记、详细的许可协议以及其他类似内容。

部分的作者或编辑的联系信息应放在 address 元素中，该元素可能位于一个 footer 元素内部。署名和其他可能适合于 header 或 footer 的信息可以放在任意一个（或都不放）。这些元素的主要目的是帮助作者编写自解释的标记，易于维护和样式化；它们并不打算对作者强加特定的结构。

页脚不一定非得出现在部分的末尾，尽管通常会这样。

当没有祖先 sectioning content 元素时，它适用于整个页面。

footer 元素本身不是 sectioning content；它不会引入一个新部分。

这是一个页面，上面和下面都有两个 footer，内容相同：

<body>
 <footer><a href="../">Back to index...</a></footer>
 <hgroup>
  <h1>Lorem ipsum</h1>
  <p>The ipsum of all lorems</p>
 </hgroup>
 <p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
 ea commodo consequat. Duis aute irure dolor in reprehenderit in
 voluptate velit esse cillum dolore eu fugiat nulla
 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 culpa qui officia deserunt mollit anim id est laborum.</p>
 <footer><a href="../">Back to index...</a></footer>
</body>

这是一个示例，展示了 footer 元素同时用于站点范围的页脚和部分页脚的用法。

<!DOCTYPE HTML>
<HTML LANG="en"><HEAD>
<TITLE>The Ramblings of a Scientist</TITLE>
<BODY>
<H1>The Ramblings of a Scientist</H1>
<ARTICLE>
 <H1>Episode 15</H1>
 <VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD>
  <P><A HREF="/fm/015.ogv">Download video</A>.</P>
 </VIDEO>
 <FOOTER> <!-- footer for article -->
  <P>Published <TIME DATETIME="2009-10-21T18:26-07:00">on 2009/10/21 at 6:26pm</TIME></P>
 </FOOTER>
</ARTICLE>
<ARTICLE>
 <H1>My Favorite Trains</H1>
 <P>I love my trains. My favorite train of all time is a Köf.</P>
 <P>It is fun to see them pull some coal cars because they look so
 dwarfed in comparison.</P>
 <FOOTER> <!-- footer for article -->
  <P>Published <TIME DATETIME="2009-09-15T14:54-07:00">on 2009/09/15 at 2:54pm</TIME></P>
 </FOOTER>
</ARTICLE>
<FOOTER> <!-- site wide footer -->
 <NAV>
  <P><A HREF="/credits.html">Credits</A> —
     <A HREF="/tos.html">Terms of Service</A> —
     <A HREF="/index.html">Blog Index</A></P>
 </NAV>
 <P>Copyright © 2009 Gordon Freeman</P>
</FOOTER>
</BODY>
</HTML>

一些网站设计有时被称为“肥大页脚”——包含大量内容的页脚，包括图片、指向其他文章的链接、反馈页面的链接、特别优惠……在某种程度上，页脚就像是整个“首页”。

这个片段展示了一个网站页面底部的“肥大页脚”：

...
 <footer>
  <nav>
   <section>
    <h1>Articles</h1>
    <p><img src="images/somersaults.jpeg" alt=""> Go to the gym with
    our somersaults class! Our teacher Jim takes you through the paces
    in this two-part article. <a href="articles/somersaults/1">Part
    1</a> · <a href="articles/somersaults/2">Part 2</a></p>
    <p><img src="images/kindplus.jpeg"> Tired of walking on the edge of
    a clif<!-- sic -->? Our guest writer Lara shows you how to bumble
    your way through the bars. <a href="articles/kindplus/1">Read
    more...</a></p>
    <p><img src="images/crisps.jpeg"> The chips are down, now all
    that's left is a potato. What can you do with it? <a
    href="articles/crisps/1">Read more...</a></p>
   </section>
   <ul>
    <li> <a href="/about">About us...</a>
    <li> <a href="/feedback">Send feedback!</a>
    <li> <a href="/sitemap">Sitemap</a>
   </ul>
  </nav>
  <p><small>Copyright © 2015 The Snacker —
  <a href="/tos">Terms of Service</a></small></p>
 </footer>
</body>

4.3.10 `address` 元素

元素/address

所有当前浏览器都支持。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别:: 流内容。; 可触及内容。
可以使用此元素的上下文:: 在期望有流内容的地方。
内容模型:: 流内容，但没有标题内容后代，没有分节内容后代，并且没有header、footer或address元素的后代。
在 text/html 中的标签省略:: 标签不可省略。
内容属性:: 全局属性
可访问性考虑:: 给作者。; 给实现者。
DOM 接口:: 使用HTMLElement。

address 元素表示其最近的 article 或 body 元素祖先的联系信息。如果该祖先是 body 元素，则联系信息适用于整个文档。

例如，W3C 网站上的与 HTML 相关的页面可能包含以下联系信息：

<ADDRESS>
 <A href="../People/Raggett/">Dave Raggett</A>,
 <A href="../People/Arnaud/">Arnaud Le Hors</A>,
 contact persons for the <A href="Activity">W3C HTML Activity</A>
</ADDRESS>

address 元素不能用于表示任意地址（例如邮政地址），除非这些地址确实是相关的联系信息。（p 元素是标记邮政地址的合适元素。）

address 元素不得包含除联系信息以外的其他信息。

例如，以下是 address 元素的非规范用法：

<ADDRESS>Last Modified: 1999/12/24 23:37:50</ADDRESS>

通常，address 元素会与其他信息一起包含在 footer 元素中。

节点 node 的联系信息是由以下列表中第一个适用条目定义的 address 元素的集合：

如果 node 是 article 元素
如果 node 是 body 元素: 联系信息包括所有以 node 为祖先的 address 元素，并且这些元素没有其他 body 或 article 元素祖先是 node 的后代。
如果 node 有一个祖先元素是 article 元素
如果 node 有一个祖先元素是 body 元素: node 的联系信息与最近的 article 或 body 元素祖先的联系信息相同，以最近者为准。
如果 node 的节点文档有一个 body 元素: node 的联系信息与 Document 的 body 元素的联系信息相同。
否则: node 没有联系信息。

用户代理可以向用户公开节点的联系信息，或将其用于其他目的，例如基于部分的联系信息对部分进行索引。

<footer>
 <address>
  For more details, contact
  <a href="mailto:js@example.com">John Smith</a>.
 </address>
 <p><small>© copyright 2038 Example Corp.</small></p>
</footer>

4.3.11 标题和大纲

h1–h6元素具有一个标题级别，由元素名称中的数字给出。

这些元素表示标题。标题的标题级别越低，该标题拥有的祖先部分就越少。

大纲是文档中的所有标题，按树状顺序排列。

大纲应用于生成文档大纲，例如生成目录时。当创建交互式目录时，条目应跳转到相关的标题。

如果文档中有一个或多个标题，则大纲中至少应有一个标题具有标题级别 1。

每个跟随另一个标题的标题 lead 在大纲中必须具有一个小于、等于或比 lead 的标题级别多 1 的标题级别。

以下示例是不符合规范的：

<body>
 <h1>Apples</h1>
 <p>Apples are fruit.</p>
 <section>
  <h3>Taste</h3>
  <p>They taste lovely.</p>
 </section>
</body>

可以按以下方式编写，这样它就符合规范：

<body>
 <h1>Apples</h1>
 <p>Apples are fruit.</p>
 <section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
 </section>
</body>

4.3.11.1 示例大纲

以下标记片段：

<body>
  <hgroup id="document-title">
    <h1>HTML: Living Standard</h1>
    <p>Last Updated 12 August 2016</p>
  </hgroup>
  <p>Some intro to the document.</p>
  <h2>Table of contents</h2>
  <ol id=toc>...</ol>
  <h2>First section</h2>
  <p>Some intro to the first section.</p>
</body>

…结果产生了 3 个文档标题：

<h1>HTML: Living Standard</h1>
<h2>Table of contents</h2>.
<h2>First section</h2>.

渲染后的大纲可能如下所示：

Top-level section with the heading "HTML: Living Standard" and two subsections; "Table of contents" and "First section".

首先，这里是一个文档，内容是一本章节非常短且包含子章节的书：

<!DOCTYPE HTML>
<html lang=en>
<title>The Tax Book (all in one page)</title>
<h1>The Tax Book</h1>
<h2>Earning money</h2>
<p>Earning money is good.</p>
<h3>Getting a job</h3>
<p>To earn money you typically need a job.</p>
<h2>Spending money</h2>
<p>Spending is what money is mainly used for.</p>
<h3>Cheap things</h3>
<p>Buying cheap things often not cost-effective.</p>
<h3>Expensive things</h3>
<p>The most expensive thing is often not the most cost-effective either.</p>
<h2>Investing money</h2>
<p>You can lend your money to other people.</p>
<h2>Losing money</h2>
<p>If you spend money or invest money, sooner or later you will lose money.
<h3>Poor judgement</h3>
<p>Usually if you lose money it's because you made a mistake.</p>

它的大纲可以如下所示：

The Tax Book
1. Earning money
  1. Getting a job
2. Spending money
  1. Cheap things
  2. Expensive things
3. Investing money
4. Losing money
  1. Poor judgement

注意到，title 元素不是标题。

一个文档可以包含多个顶级标题：

<!DOCTYPE HTML>
<html lang=en>
<title>Alphabetic Fruit</title>
<h1>Apples</h1>
<p>Pomaceous.</p>
<h1>Bananas</h1>
<p>Edible.</p>
<h1>Carambola</h1>
<p>Star.</p>

文档的大纲可以呈现如下：

Apples
Bananas
Carambola

header 元素不会影响文档的大纲：

<!DOCTYPE HTML>
<html lang="en">
<title>We're adopting a child! — Ray's blog</title>
<h1>Ray's blog</h1>
<article>
 <header>
  <nav>
   <a href="?t=-1d">Yesterday</a>;
   <a href="?t=-7d">Last week</a>;
   <a href="?t=-1m">Last month</a>
  </nav>
  <h2>We're adopting a child!</h2>
 </header>
 <p>As of today, Janine and I have signed the papers to become
 the proud parents of baby Diane! We've been looking forward to
 this day for weeks.</p>
</article>
</html>

文档的大纲可以呈现如下：

Ray's blog
1. We're adopting a child!

以下示例符合规范，但不推荐使用，因为它没有任何标题，其标题级别为1：

<!DOCTYPE HTML>
<html lang=en>
<title>Alphabetic Fruit</title>
<section>
 <h2>Apples</h2>
 <p>Pomaceous.</p>
</section>
<section>
 <h2>Bananas</h2>
 <p>Edible.</p>
</section>
<section>
 <h2>Carambola</h2>
 <p>Star.</p>
</section>

该文档的大纲可以如下呈现：

1. Apples
2. Bananas
3. Carambola

以下示例符合规范，但不推荐，因为第一个标题的标题级别不是1：

<!DOCTYPE HTML>
<html lang=en>
<title>Feathers on The Site of Encyclopedic Knowledge</title>
 <h2>A plea from our caretakers</h2>
 <p>Please, we beg of you, send help! We're stuck in the server room!</p>
<h1>Feathers</h1>
<p>Epidermal growths.</p>

文档的大纲可以呈现如下：

1. A plea from our caretakers
Feathers

4.3.11.2 向用户暴露大纲

鼓励用户代理向用户暴露页面大纲，以帮助导航。这对于非视觉媒体尤其重要，例如屏幕阅读器。

例如，用户代理可以将箭头键映射如下：

Shift + ← 左箭头: 转到前一个标题
Shift + → 右箭头: 转到下一个标题
Shift + ↑ 向上箭头: 转到下一个标题，其级别比当前标题的级别低一个
Shift + ↓ 向下箭头: 转到下一个标题，其级别与当前标题的级别相同

4.3.12 使用摘要

本节为非规范性内容。

元素	目的
元素	示例
`body`	文档的内容。
`body`	`<!DOCTYPE HTML> <html lang="en"> <head> <title>Steve Hill's Home Page</title> </head> <body> <p>Hard Trance is My Life.</p> </body> </html>`
`article`	文档、页面、应用程序或站点中的一个完整或自包含的组成部分，原则上可以独立分发或重用，例如在联合发布中。这可以是论坛帖子、杂志或报纸文章、博客条目、用户提交的评论、互动小部件或工具，或任何其他独立的内容项。
`article`	`<article> <img src="/tumblr_masqy2s5yn1rzfqbpo1_500.jpg" alt="Yellow smiley face with the caption 'masif'"> <p>My fave Masif tee so far!</p> <footer>Posted 2 days ago</footer> </article> <article> <img src="/tumblr_m9tf6wSr6W1rzfqbpo1_500.jpg" alt=""> <p>Happy 2nd birthday Masif Saturdays!!!</p> <footer>Posted 3 weeks ago</footer> </article>`
`section`	文档或应用程序中的一个通用部分。在此上下文中，部分是内容的主题性分组，通常带有标题。
`section`	`<h1>Biography</h1> <section> <h1>The facts</h1> <p>1500+ shows, 14+ countries</p> </section> <section> <h1>2010/2011 figures per year</h1> <p>100+ shows, 8+ countries</p> </section>`
`nav`	一个链接到其他页面或页面内部部分的页面部分：一个包含导航链接的部分。
`nav`	`<nav> <p><a href="/">Home</a> <p><a href="/biog.html">Bio</a> <p><a href="/discog.html">Discog</a> </nav>`
`aside`	一个页面部分，包含与围绕`aside`元素的内容间接相关的内容，且这些内容可以被认为是独立于该内容的。这些部分通常在印刷排版中表现为侧边栏。
`aside`	`<h1>Music</h1> <p>As any burner can tell you, the event has a lot of trance.</p> <aside>You can buy the music we played at our <a href="buy.html">playlist page</a>.</aside> <p>This year we played a kind of trance that originated in Belgium, Germany, and the Netherlands in the mid-90s.</p>`
`h1`–`h6`	一个标题
`h1`–`h6`	`<h1>The Guide To Music On The Playa</h1> <h2>The Main Stage</h2> <p>If you want to play on a stage, you should bring one.</p> <h2>Amplified Music</h2> <p>Amplifiers up to 300W or 90dB are welcome.</p>`
`hgroup`	一个标题及相关内容。该元素可用于将一个或多个 `h1`–`h6` 元素与一个或多个 `p` 元素组合在一起，这些元素包含表示子标题、替代标题或标语的内容。
`hgroup`	`<hgroup> <h1>Burning Music</h1> <p>The Guide To Music On The Playa</p> </hgroup> <section> <hgroup> <h1>Main Stage</h1> <p>The Fiction Of A Music Festival</p> </hgroup> <p>If you want to play on a stage, you should bring one.</p> </section> <section> <hgroup> <h1>Loudness!</h1> <p>Questions About Amplified Music</p> </hgroup> <p>Amplifiers up to 300W or 90dB are welcome.</p> </section>`
`header`	一组引导性或导航性辅助工具。
`header`	`<article> <header> <h1>Hard Trance is My Life</h1> <p>By DJ Steve Hill and Technikal</p> </header> <p>The album with the amusing punctuation has red artwork.</p> </article>`
`footer`	其最近祖先的分区内容元素的页脚，或者如果没有这样的祖先，则为body元素。页脚通常包含有关其部分的信息，例如作者、相关文档的链接、版权数据等。
`footer`	`<article> <h1>Hard Trance is My Life</h1> <p>The album with the amusing punctuation has red artwork.</p> <footer> <p>Artists: DJ Steve Hill and Technikal</p> </footer> </article>`

4.3.12.1 文章还是区块?

本节为非规范性内容。

section 是其他内容的一部分。article 是一个独立的内容。但如何区分这两者呢？大多数情况下，真正的答案是“这取决于作者的意图”。

例如，可以想象一本书中有一章关于“格兰尼·史密斯”苹果，只提到“这些多汁的绿色苹果是制作苹果派的绝佳填料”；这将是一个 section，因为还有很多其他章节（可能）讲述其他种类的苹果。

另一方面，可以想象一条推文或Reddit评论或Tumblr帖子或报纸分类广告只说了“格兰尼·史密斯。这些多汁的绿色苹果是制作苹果派的绝佳填料”；这将是 article，因为这就是全部内容。

对文章的评论不是其所在 article 的一部分，因此它是自己的 article。

4.4 内容分组

4.4.1 `p` 元素

Element/p

在所有当前引擎中都支持。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLParagraphElement

在所有当前引擎中都支持。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

流内容。

在期望出现流内容的地方。

在 text/html 中的标签省略:

p 元素的结束标签可以省略，如果该p元素后面紧跟着一个 address、article、aside、blockquote、details、div、dl、fieldset、figcaption、figure、、form、h1、h2、h3、h4、h5、h6、header、hgroup、hr、main、、nav、ol、p、pre、search、section、table，或 ul 元素，或者如果父元素没有更多内容且父元素是一个HTML 元素（不是 a、audio、del、ins、map、noscript，或 video 元素，或一个自主自定义元素。

[Exposed=Window]
interface HTMLParagraphElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

p 元素表示一个段落。

虽然段落通常在视觉媒体中通过与相邻块之间通过空行物理分隔的文本块表示，样式表或用户代理同样可以用不同的方式来呈现段落分隔，例如使用行内段落标记 (¶)。

以下示例是符合规范的 HTML 片段：

<p>The little kitten gently seated herself on a piece of
carpet. Later in her life, this would be referred to as the time the
cat sat on the mat.</p>

<fieldset>
 <legend>Personal information</legend>
 <p>
   <label>Name: <input name="n"></label>
   <label><input name="anon" type="checkbox"> Hide from other users</label>
 </p>
 <p><label>Address: <textarea name="a"></textarea></label></p>
</fieldset>

<p>There was once an example from Femley,<br>
Whose markup was of dubious quality.<br>
The validator complained,<br>
So the author was pained,<br>
To move the error from the markup to the rhyming.</p>

p 元素不应在更具体的元素更为合适的情况下使用。

以下示例在技术上是正确的：

<section>
 <!-- ... -->
 <p>Last modified: 2001-04-23</p>
 <p>Author: fred@example.com</p>
</section>

然而，最好标记为：

<section>
 <!-- ... -->
 <footer>Last modified: 2001-04-23</footer>
 <address>Author: fred@example.com</address>
</section>

或者：

<section>
 <!-- ... -->
 <footer>
  <p>Last modified: 2001-04-23</p>
  <address>Author: fred@example.com</address>
 </footer>
</section>

列表元素（特别是 ol 和 ul 元素）不能作为 p 元素的子元素。因此，当一个句子包含项目符号列表时，可能会想知道应该如何标记。

例如，这个精彩的句子有与以下内容相关的项目符号：

wizards,
faster-than-light travel, and
telepathy,

并在下面进一步讨论。

解决方案是认识到，在 HTML 术语中，段落不是一个逻辑概念，而是一个结构概念。在上面的精彩例子中，实际上有五个段落，根据本规范定义：一个在列表之前，一个对应每个项目符号，以及一个在列表之后。

因此，上述示例的标记可以是：

<p>For instance, this fantastic sentence has bullets relating to</p>
<ul>
 <li>wizards,
 <li>faster-than-light travel, and
 <li>telepathy,
</ul>
<p>and is further discussed below.</p>

希望方便地为由多个“结构性”段落组成的这种“逻辑”段落设置样式的作者可以使用 div 元素，而不是 p 元素。

因此，上述示例可以变为如下：

<div>For instance, this fantastic sentence has bullets relating to
<ul>
 <li>wizards,
 <li>faster-than-light travel, and
 <li>telepathy,
</ul>
and is further discussed below.</div>

这个示例仍然有五个结构段落，但现在作者可以只对 div 进行样式设置，而不必单独考虑示例的每个部分。

4.4.2 `hr` 元素

Element/hr

所有当前引擎均支持。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLHRElement

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

类别:

流内容。

此元素可以使用的上下文:

在期望流内容的地方。

作为 select 元素的子元素。

内容模型:

无。

在 text/html 中的标签省略:

没有结束标签。

[Exposed=Window]
interface HTMLHRElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

hr 元素表示一个段落级别的主题分隔线，例如故事中的场景变换，或参考书中某部分主题的过渡；或者，它表示一个 select 元素中的选项集之间的分隔符。

以下是一个项目手册的虚构摘录，展示了两个使用 hr 元素来分隔部分中的主题的部分。

<section>
 <h1>Communication</h1>
 <p>There are various methods of communication. This section
 covers a few of the important ones used by the project.</p>
 <hr>
 <p>Communication stones seem to come in pairs and have mysterious
 properties:</p>
 <ul>
  <li>They can transfer thoughts in two directions once activated
  if used alone.</li>
  <li>If used with another device, they can transfer one's
  consciousness to another body.</li>
  <li>If both stones are used with another device, the
  consciousnesses switch bodies.</li>
 </ul>
 <hr>
 <p>Radios use the electromagnetic spectrum in the meter range and
 longer.</p>
 <hr>
 <p>Signal flares use the electromagnetic spectrum in the
 nanometer range.</p>
</section>
<section>
 <h1>Food</h1>
 <p>All food at the project is rationed:</p>
 <dl>
  <dt>Potatoes</dt>
  <dd>Two per day</dd>
  <dt>Soup</dt>
  <dd>One bowl per day</dd>
 </dl>
 <hr>
 <p>Cooking is done by the chefs on a set rotation.</p>
</section>

在部分之间不需要使用 hr 元素，因为 section 元素和 h1 元素本身就暗示了主题的变化。

以下摘自彼得·F·汉密尔顿的《潘多拉的星辰》一书，展示了两个场景变换前的段落以及一个变换后的段落。场景变换在印刷书籍中由第二段和第三段之间的一个孤立的居中星星空隙表示，而在这里则使用 hr 元素来表示。

<p>Dudley was ninety-two, in his second life, and fast approaching
time for another rejuvenation. Despite his body having the physical
age of a standard fifty-year-old, the prospect of a long degrading
campaign within academia was one he regarded with dread. For a
supposedly advanced civilization, the Intersolar Commonwealth could be
appallingly backward at times, not to mention cruel.</p>
<p><i>Maybe it won't be that bad</i>, he told himself. The lie was
comforting enough to get him through the rest of the night's
shift.</p>
<hr>
<p>The Carlton AllLander drove Dudley home just after dawn. Like the
astronomer, the vehicle was old and worn, but perfectly capable of
doing its job. It had a cheap diesel engine, common enough on a
semi-frontier world like Gralmond, although its drive array was a
thoroughly modern photoneural processor. With its high suspension and
deep-tread tyres it could plough along the dirt track to the
observatory in all weather and seasons, including the metre-deep snow
of Gralmond's winters.</p>

`hr` 元素不会影响文档的大纲。

4.4.3 ``pre`` 元素

Element/pre

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLPreElement

所有当前引擎均支持。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer6+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

期望出现流内容的地方。

在 text/html 中的标签省略:

没有标签可以省略。

[Exposed=Window]
interface HTMLPreElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

pre 元素表示一块预格式化文本，其中结构由排版约定而非元素表示。

在 HTML 语法中，紧跟在 pre 元素起始标签之后的前导换行符会被删除。

一些使用 pre 元素的示例：

包括电子邮件，其中段落由空行表示，列表由前缀为项目符号的行表示，等等。
包括计算机代码片段，其中结构根据该语言的约定进行指示。
显示 ASCII 艺术。

建议作者考虑当格式丢失时预格式化文本的体验情况，例如对于语音合成器、盲文显示器等用户。对于像 ASCII 艺术这样的情况，可能更普遍可访问的替代展示方式，例如文本描述，会更适合读者。

要表示一块计算机代码，可以将 pre 元素与 code 元素一起使用；要表示一块计算机输出，可以将 pre 元素与 samp 元素一起使用。类似地，kbd 元素可以在 pre 元素内使用，以指示用户要输入的文本。

此元素具有涉及双向算法的渲染要求。

在以下片段中，展示了一段计算机代码。

<p>This is the <code>Panel</code> constructor:</p>
<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>

在以下片段中，samp 和 kbd 元素混合在一个 pre 元素的内容中，以展示 Zork I 的会话。

<pre><samp>You are in an open field west of a big white house with a boarded
front door.
There is a small mailbox here.

></samp> <kbd>open mailbox</kbd>

<samp>Opening the mailbox reveals:
A leaflet.

></samp></pre>

以下展示了一首现代诗，使用了 pre 元素来保留其独特的格式，这些格式是诗歌本身的固有部分。

<pre>                maxling

it is with a          heart
               heavy

that i admit loss of a feline
        so           loved

a friend lost to the
        unknown
                                (night)

~cdr 11dec07</pre>

4.4.4 `blockquote` 元素

Element/blockquote

支持所有当前的浏览器。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLQuoteElement

支持所有当前的浏览器。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer6+

Firefox Android?Safari iOS1+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

类别:

流内容。

可触及内容。

可以使用此元素的上下文:

在期望流内容的地方。

内容模型:

流内容。

在 text/html 中的标签省略:

两个标签都不可省略。

内容属性:

全局属性

cite — 链接到引用的来源或更多关于编辑的信息

[Exposed=Window]
interface HTMLQuoteElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute USVString cite;
};

HTMLQuoteElement 接口也被 q 元素使用。

blockquote 元素表示从其他来源引用的部分。

在 blockquote 内部的内容必须从其他来源引用，其地址（如果有的话）可以在 cite 属性中注明。

如果存在 cite 属性，它必须是一个有效的 URL，可能被空格包围。为了获得相应的引用链接，属性的值必须解析相对于元素的节点文档。用户代理可能允许用户跟随这些引用链接，但它们主要用于私人用途（例如，服务器端脚本收集有关站点使用引用的统计数据），而不是供读者使用。

blockquote 的内容可以被省略或按照文本语言的传统方式添加上下文。

例如，在英语中，这通常使用方括号来完成。考虑一个页面，其中包含句子“Jane ate the cracker. She then said she liked apples and fish.”；它可以被引用为：

<blockquote>
 <p>[Jane] then said she liked [...] fish.</p>
</blockquote>

如果有的话，引用的归属必须放置在 blockquote 元素之外。

例如，这里归属是在引用之后的段落中给出的：

<blockquote>
 <p>I contend that we are both atheists. I just believe in one fewer
 god than you do. When you understand why you dismiss all the other
 possible gods, you will understand why I dismiss yours.</p>
</blockquote>
<p>— Stephen Roberts</p>

下面的其他示例展示了其他几种表示归属的方式。

cite IDL 属性必须反映元素的 cite 内容属性。

这里使用了一个 blockquote 元素与一个 figure 元素及其 figcaption 一起使用，以明确地将引用与其归属关系联系起来（归属不是引用的一部分，因此不应包含在 blockquote 内部）：

<figure>
 <blockquote>
  <p>The truth may be puzzling. It may take some work to grapple with.
  It may be counterintuitive. It may contradict deeply held
  prejudices. It may not be consonant with what we desperately want to
  be true. But our preferences do not determine what's true. We have a
  method, and that method helps us to reach not absolute truth, only
  asymptotic approaches to the truth — never there, just closer
  and closer, always finding vast new oceans of undiscovered
  possibilities. Cleverly designed experiments are the key.</p>
 </blockquote>
 <figcaption>Carl Sagan, in "<cite>Wonder and Skepticism</cite>", from
 the <cite>Skeptical Inquirer</cite> Volume 19, Issue 1 (January-February
 1995)</figcaption>
</figure>

下一个示例展示了 cite 与 blockquote 一起使用的情况：

<p>His next piece was the aptly named <cite>Sonnet 130</cite>:</p>
<blockquote cite="https://quotes.example.org/s/sonnet130.html">
  <p>My mistress' eyes are nothing like the sun,<br>
  Coral is far more red, than her lips red,<br>
  ...

这个示例展示了一个论坛帖子如何使用 blockquote 来显示用户回复的帖子。每个帖子使用 article 元素来标记线程。

<article>
 <h1><a href="https://bacon.example.com/?blog=109431">Bacon on a crowbar</a></h1>
 <article>
  <header><strong>t3yw</strong> 12 points 1 hour ago</header>
  <p>I bet a narwhal would love that.</p>
  <footer><a href="?pid=29578">permalink</a></footer>
  <article>
   <header><strong>greg</strong> 8 points 1 hour ago</header>
   <blockquote><p>I bet a narwhal would love that.</p></blockquote>
   <p>Dude narwhals don't eat bacon.</p>
   <footer><a href="?pid=29579">permalink</a></footer>
   <article>
    <header><strong>t3yw</strong> 15 points 1 hour ago</header>
    <blockquote>
     <blockquote><p>I bet a narwhal would love that.</p></blockquote>
     <p>Dude narwhals don't eat bacon.</p>
    </blockquote>
    <p>Next thing you'll be saying they don't get capes and wizard
    hats either!</p>
    <footer><a href="?pid=29580">permalink</a></footer>
    <article>
     <article>
      <header><strong>boing</strong> -5 points 1 hour ago</header>
      <p>narwhals are worse than ceiling cat</p>
      <footer><a href="?pid=29581">permalink</a></footer>
     </article>
    </article>
   </article>
  </article>
  <article>
   <header><strong>fred</strong> 1 points 23 minutes ago</header>
   <blockquote><p>I bet a narwhal would love that.</p></blockquote>
   <p>I bet they'd love to peel a banana too.</p>
   <footer><a href="?pid=29582">permalink</a></footer>
  </article>
 </article>
</article>

这个示例展示了如何使用 blockquote 来表示短片段，演示了在 blockquote 元素内部不必使用 p 元素：

<p>He began his list of "lessons" with the following:</p>
<blockquote>One should never assume that his side of
the issue will be recognized, let alone that it will
be conceded to have merits.</blockquote>
<p>He continued with a number of similar points, ending with:</p>
<blockquote>Finally, one should be prepared for the threat
of breakdown in negotiations at any given moment and not
be cowed by the possibility.</blockquote>
<p>We shall now discuss these points...

如何表示对话的示例会在后面的章节中展示；不适合使用 cite 和 blockquote 元素来实现这一目的。

4.4.5 `ol` 元素

Element/ol

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLOListElement

Support in all current engines.

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

类别:

流内容。

如果元素的子元素包括至少一个 li 元素：可触及内容。

此元素可用的上下文:

在期望流内容的地方。

内容模型:

零个或多个 li 元素和支持脚本的元素。

在 text/html 中的标签省略:

两个标签都不可省略。

内容属性:

全局属性

reversed — 反向编号列表

start — 列表的起始值

type — 列表标记的类型

[Exposed=Window]
interface HTMLOListElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute boolean reversed;
  [CEReactions] attribute long start;
  [CEReactions] attribute DOMString type;

  // also has obsolete members
};

ol 元素表示一系列项目，其中项目经过刻意排序，改变顺序会改变文档的意义。

列表的项目是li元素的子节点，ol元素按树顺序排列。

Element/ol#attr-reversed

Support in all current engines.

Firefox18+Safari6+Chrome18+

Opera?Edge79+

Edge (旧版)≤79+Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

reversed 属性是一个布尔属性。如果存在，它表示列表是降序的（..., 3, 2, 1）。如果省略该属性，列表是升序的（1, 2, 3, ...）。

start 属性如果存在，必须是一个有效整数。它用于确定列表的起始值。

ol元素有一个起始值，这是一个按以下方式确定的整数：

如果ol元素有start属性，则：
1. 令parsed为解析属性值为整数的结果。
2. 如果parsed没有错误，则返回parsed。
如果ol元素有reversed属性，则返回拥有的li元素的数量。
返回1。

type属性可以用来指定在列表中使用的标记类型，在某些情况下这很重要（例如，因为项目要按其编号/字母引用）。如果指定了该属性，其值必须与下表中某行第一列给出的字符相同。type属性表示与第一列匹配的行的第二列给定的状态；如果没有单元格匹配，或者省略该属性，则该属性表示十进制状态。

关键字	状态	描述	值为 1-3 和 3999-4001 的示例
`1` (U+0031)	十进制	十进制数字	`1.`	`2.`	`3.`	...	`3999.`	`4000.`	`4001.`	...
`a` (U+0061)	小写字母	小写拉丁字母	`a.`	`b.`	`c.`	...	`ewu.`	`ewv.`	`eww.`	...
`A` (U+0041)	大写字母	大写拉丁字母	`A.`	`B.`	`C.`	...	`EWU.`	`EWV.`	`EWW.`	...
`i` (U+0069)	小写罗马数字	小写罗马数字	`i.`	`ii.`	`iii.`	...	`mmmcmxcix.`	`i̅v̅.`	`i̅v̅i.`	...
`I` (U+0049)	大写罗马数字	大写罗马数字	`I.`	`II.`	`III.`	...	`MMMCMXCIX.`	`I̅V̅.`	`I̅V̅I.`	...

用户代理应以与type属性的状态一致的方式呈现ol元素的列表项。小于或等于零的数字应始终使用十进制系统，而不管type属性。

对于CSS用户代理，在'list-style-type' CSS属性中，提供了此属性的映射在渲染部分（映射很简单：上述状态与其对应的CSS值名称相同）。

在CSS用户代理中，可以重新定义用于实现此属性的默认CSS列表样式；这样做会影响列表项的呈现方式。

reversed和type IDL属性必须反映同名的相应内容属性。

start IDL属性必须反映同名的内容属性，默认值为1。

这意味着在start IDL属性与列表的起始值不一定匹配的情况下，当start内容属性被省略且reversed内容属性被指定时。

以下标记显示了一个顺序重要的列表，因此ol元素是合适的。将此列表与ul部分中的等效列表进行比较，以查看使用ul元素的相同项目示例。

<p>I have lived in the following countries (given in the order of when
I first lived there):</p>
<ol>
 <li>Switzerland
 <li>United Kingdom
 <li>United States
 <li>Norway
</ol>

注意改变列表顺序如何改变文档的意义。在以下示例中，改变前两个项目的相对顺序改变了作者的出生地：

<p>I have lived in the following countries (given in the order of when
I first lived there):</p>
<ol>
 <li>United Kingdom
 <li>Switzerland
 <li>United States
 <li>Norway
</ol>

4.4.6 `ul`元素

Element/ul

支持所有当前引擎。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLUListElement

支持所有当前引擎。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

类别:

流内容。

如果元素的子元素包含至少一个li元素：可感知内容。

此元素可使用的上下文:

期望流内容的地方。

内容模型:

零个或多个li和脚本支持元素。

在text/html中的标签省略:

两个标签都不可省略。

[Exposed=Window]
interface HTMLUListElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

ul元素表示一系列项目，这些项目的顺序并不重要——也就是说，改变顺序不会实质性地改变文档的意义。

列表的项目是li元素的子节点，属于ul元素。

以下标记显示了一个顺序不重要的列表，因此ul元素是合适的。将此列表与ol部分中的等效列表进行比较，以查看使用ol元素的相同项目示例。

<p>I have lived in the following countries:</p>
<ul>
 <li>Norway
 <li>Switzerland
 <li>United Kingdom
 <li>United States
</ul>

请注意，改变列表的顺序不会改变文档的意义。上面的项目按字母顺序排列，但在下面的片段中，它们按2007年当前账户余额的大小排列，而不会改变文档的意义：

<p>I have lived in the following countries:</p>
<ul>
 <li>Switzerland
 <li>Norway
 <li>United Kingdom
 <li>United States
</ul>

Element/menu

支持所有当前引擎。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer6+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLMenuElement

支持所有当前引擎。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer6+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

类别:

。

如果元素的子元素包含至少一个元素：。

此元素可使用的上下文:

期望的地方。

内容模型:

零个或多个和元素。

在text/html中的标签省略:

两个标签都不可省略。

[Exposed=Window]
interface HTMLMenuElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

menu元素表示一个由其内容组成的工具栏，以无序项目列表的形式（由li元素表示），每个项目代表用户可以执行或激活的命令。

menu元素只是ul的语义替代，用于表示命令的无序列表（"工具栏"）。

在这个示例中，一个文本编辑应用程序使用menu元素提供一系列编辑命令：

<menu>
 <li><button onclick="copy()"><img src="copy.svg" alt="Copy"></button></li>
 <li><button onclick="cut()"><img src="cut.svg" alt="Cut"></button></li>
 <li><button onclick="paste()"><img src="paste.svg" alt="Paste"></button></li>
</menu>

请注意，将其样式化为传统工具栏菜单的样式取决于应用程序。

4.4.8 `li` 元素

Element/li

支持所有当前引擎。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLLIElement

支持所有当前引擎。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

类别:

无。

此元素可以使用的上下文:

在 ol 元素中。

在 ul 元素中。

在元素中。

内容模型:

流内容。

在 text/html 中的标签省略:

如果 li 元素后面紧跟另一个 li 元素，或者父元素中没有更多内容，则结束标签可以省略。

内容属性:

全局属性

如果该元素不是 ul 或元素的子元素： value — 列表项的序数值

[Exposed=Window]
interface HTMLLIElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute long value;

  // also has obsolete members
};

li 元素代表列表项。如果它的父元素是 ol、ul 或 menu 元素，那么该元素就是父元素列表中的一项，如这些元素的定义所示。否则，该列表项与任何其他 li 元素没有定义的列表相关关系。

value 属性（如果存在）必须是有效整数。当 li 的列表所有者是 ol 元素时，用于确定列表项的序数值。

任何其计算值为 'display' 为 'list-item' 的元素都有一个列表所有者，其确定方式如下：

如果该元素没有被渲染，则返回 null；该元素没有列表所有者。
让 ancestor 成为该元素的父元素。
如果该元素有 ol、ul 或 menu 祖先元素，则将 ancestor 设置为最近的此类祖先元素。
返回 ancestor 最近的包含祖先元素，该祖先元素生成一个 CSS 框。

这样的元素总是存在的，因为至少文档元素总是会生成一个 CSS 框。

要确定由给定的列表所有者 owner 拥有的每个元素的序数值，请执行以下步骤：

设 i 为 1。
如果 owner 是 ol 元素，则将 numbering 设置为 owner 的起始值。否则，将 numbering 设置为 1。
循环：如果 i 大于 owner 拥有的列表项的数量，则返回；所有 owner 的已拥有列表项已分配序数值。
设 item 为 owner 的第 i 个已拥有列表项，按树顺序。
如果 item 是具有 value 属性的 li 元素，则：
1. 将 parsed 设置为解析该属性的值为整数的结果。
2. 如果 parsed 没有错误，则将 numbering 设置为 parsed。
item 的序数值为 numbering。
如果 owner 是 ol 元素，且 owner 具有 reversed 属性，则将 numbering 减 1；否则，将 numbering 加 1。
将 i 加 1。
转到标记为循环的步骤。

value IDL 属性必须反映 value 内容属性的值。

元素的 value IDL 属性不直接对应其序数值；它只是反映内容属性。例如，给定此列表：

<ol>
 <li>Item 1
 <li value="3">Item 3
 <li>Item 4
</ol>

序数值为 1、3 和 4，而 value IDL 属性获取时返回 0、3、0。

以下示例中列出了前十名电影（按逆序）。请注意，通过使用 figure 元素及其 figcaption 元素为列表提供标题的方式。

<figure>
 <figcaption>The top 10 movies of all time</figcaption>
 <ol>
  <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li>
  <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
  <li value="8"><cite>A Bug's Life</cite>, 1998</li>
  <li value="7"><cite>Toy Story</cite>, 1995</li>
  <li value="6"><cite>Monsters, Inc</cite>, 2001</li>
  <li value="5"><cite>Cars</cite>, 2006</li>
  <li value="4"><cite>Toy Story 2</cite>, 1999</li>
  <li value="3"><cite>Finding Nemo</cite>, 2003</li>
  <li value="2"><cite>The Incredibles</cite>, 2004</li>
  <li value="1"><cite>Ratatouille</cite>, 2007</li>
 </ol>
</figure>

此标记也可以如下编写，在 reversed 属性的 ol 元素上：

<figure>
 <figcaption>The top 10 movies of all time</figcaption>
 <ol reversed>
  <li><cite>Josie and the Pussycats</cite>, 2001</li>
  <li><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
  <li><cite>A Bug's Life</cite>, 1998</li>
  <li><cite>Toy Story</cite>, 1995</li>
  <li><cite>Monsters, Inc</cite>, 2001</li>
  <li><cite>Cars</cite>, 2006</li>
  <li><cite>Toy Story 2</cite>, 1999</li>
  <li><cite>Finding Nemo</cite>, 2003</li>
  <li><cite>The Incredibles</cite>, 2004</li>
  <li><cite>Ratatouille</cite>, 2007</li>
 </ol>
</figure>

虽然在 li 元素中包含标题元素（例如 h1）是符合规范的，但这可能不会传达作者想要表达的语义。标题会开启一个新的部分，因此列表中的标题会隐式地将列表分割成多个部分。

4.4.9 `dl` 元素

Element/dl

支持所有当前引擎。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLDListElement

支持所有当前引擎。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

类别:

流内容。

如果元素的子元素包含至少一个名称-值组：明显内容。

此元素可使用的上下文:

预期流内容的地方。

内容模型:

可以是：一个或多个组，每个组由一个或多个 dt 元素组成，后跟一个或多个 dd 元素，可选地夹杂脚本支持元素。

或：一个或多个 div 元素，可选地夹杂脚本支持元素。

在 text/html 中的标签省略:

标签不可省略。

[Exposed=Window]
interface HTMLDListElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

dl 元素代表一个关联列表，由零个或多个名称-值组（描述列表）组成。名称-值组由一个或多个名称（dt 元素，可能是 div 元素的子元素）后跟一个或多个值（dd 元素，可能是 div 元素的子元素），忽略除 dt 和 dd 元素以外的所有节点，以及作为 div 元素子元素的 dt 和 dd 元素。在单个 dl 元素中，每个名称不应有多个 dt 元素。

名称-值组可以是术语和定义、元数据主题和值、问题和答案，或任何其他名称-值数据组。

组内的值是替代的；构成同一值的多个段落必须都包含在同一 dd 元素中。

组列表的顺序以及每个组内名称和值的顺序可能很重要。

为了用微数据属性或其他适用于整个组的全局属性注释组，或仅用于样式目的，dl 元素中的每个组都可以包含在 div 元素中。这不会改变 dl 元素的语义。

dl 元素 dl 的名称-值组是使用以下算法确定的。名称-值组有一个名称（dt 元素列表，最初为空）和一个值（dd 元素列表，最初为空）。

设 groups 为一个空的名称-值组列表。
设 current 为一个新的名称-值组。
设 seenDd 为 false。
设 child 为 dl 的第一个子节点。
设 grandchild 为 null。
当 child 不为 null 时：
1. 如果 child 是 div 元素，则：
  1. 设 grandchild 为 child 的第一个子节点。
  2. 当 grandchild 不为 null 时：
    1. 处理 dt 或 dd 以处理 grandchild。
    2. 将 grandchild 设置为 grandchild 的下一个兄弟节点。
2. 否则，处理 dt 或 dd 以处理 child。
3. 将 child 设置为 child 的下一个兄弟节点。
如果 current 不为空，则将 current 追加到 groups。
返回 groups。

要处理 dt 或 dd 节点 node，需执行以下步骤：

设 groups、current 和 seenDd 为调用这些步骤的算法中同名的变量。
如果 node 是 dt 元素，则：
1. 如果 seenDd 为 true，则将 current 追加到 groups，将 current 设置为一个新的名称-值组，并将 seenDd 设置为 false。
2. 将 node 追加到 current 的名称中。
否则，如果 node 是 dd 元素，则将 node 追加到 current 的值中，并将 seenDd 设置为 true。

当名称-值组的名称或值为空列表时，通常是因为错误地在 dd 元素的位置使用了 dt 元素，反之亦然。合规检查器可以发现此类错误，并可能建议作者如何正确使用标记。

在以下示例中，一个条目（“作者”）链接到两个值（“约翰”和“卢克”）。

<dl>
 <dt> Authors
 <dd> John
 <dd> Luke
 <dt> Editor
 <dd> Frank
</dl>

在以下示例中，一个定义链接到两个术语。

<dl>
 <dt lang="en-US"> <dfn>color</dfn> </dt>
 <dt lang="en-GB"> <dfn>colour</dfn> </dt>
 <dd> A sensation which (in humans) derives from the ability of
 the fine structure of the eye to distinguish three differently
 filtered analyses of a view. </dd>
</dl>

以下示例展示了使用 dl 元素标记各种元数据。在示例的末尾，一个组有两个元数据标签（“作者”和“编辑”）和两个值（“Robert Rothman”和“Daniel Jackson”）。此示例还使用 div 元素将 dt 和 dd 元素组围起来，以帮助样式化。

<dl>
 <div>
  <dt> Last modified time </dt>
  <dd> 2004-12-23T23:33Z </dd>
 </div>
 <div>
  <dt> Recommended update interval </dt>
  <dd> 60s </dd>
 </div>
 <div>
  <dt> Authors </dt>
  <dt> Editors </dt>
  <dd> Robert Rothman </dd>
  <dd> Daniel Jackson </dd>
 </div>
</dl>

以下示例显示了使用 dl 元素来提供一组指令。这里指令的顺序很重要（在其他示例中，区块的顺序并不重要）。

<p>Determine the victory points as follows (use the
first matching case):</p>
<dl>
 <dt> If you have exactly five gold coins </dt>
 <dd> You get five victory points </dd>
 <dt> If you have one or more gold coins, and you have one or more silver coins </dt>
 <dd> You get two victory points </dd>
 <dt> If you have one or more silver coins </dt>
 <dd> You get one victory point </dd>
 <dt> Otherwise </dt>
 <dd> You get no victory points </dd>
</dl>

以下代码片段显示了使用 dl 元素作为词汇表。请注意使用 dfn 来表示正在定义的词。

<dl>
 <dt><dfn>Apartment</dfn>, n.</dt>
 <dd>An execution context grouping one or more threads with one or
 more COM objects.</dd>
 <dt><dfn>Flat</dfn>, n.</dt>
 <dd>A deflated tire.</dd>
 <dt><dfn>Home</dfn>, n.</dt>
 <dd>The user's login directory.</dd>
</dl>

此示例在 dl 元素中使用了微数据属性，并结合 div 元素，来标注一家法国餐馆的冰淇淋甜点。

<dl>
 <div itemscope itemtype="http://schema.org/Product">
  <dt itemprop="name">Café ou Chocolat Liégeois
  <dd itemprop="offers" itemscope itemtype="http://schema.org/Offer">
   <span itemprop="price">3.50</span>
   <data itemprop="priceCurrency" value="EUR">€</data>
  <dd itemprop="description">
   2 boules Café ou Chocolat, 1 boule Vanille, sauce café ou chocolat, chantilly
 </div>

 <div itemscope itemtype="http://schema.org/Product">
  <dt itemprop="name">Américaine
  <dd itemprop="offers" itemscope itemtype="http://schema.org/Offer">
   <span itemprop="price">3.50</span>
   <data itemprop="priceCurrency" value="EUR">€</data>
  <dd itemprop="description">
   1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly
 </div>
</dl>

如果没有 div 元素，标记将需要使用 itemref 属性来将 dd 元素中的数据与项链接，如下所示。

<dl>
 <dt itemscope itemtype="http://schema.org/Product" itemref="1-offer 1-description">
  <span itemprop="name">Café ou Chocolat Liégeois</span>
 <dd id="1-offer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  <span itemprop="price">3.50</span>
  <data itemprop="priceCurrency" value="EUR">€</data>
 <dd id="1-description" itemprop="description">
  2 boules Café ou Chocolat, 1 boule Vanille, sauce café ou chocolat, chantilly

 <dt itemscope itemtype="http://schema.org/Product" itemref="2-offer 2-description">
  <span itemprop="name">Américaine</span>
 <dd id="2-offer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  <span itemprop="price">3.50</span>
  <data itemprop="priceCurrency" value="EUR">€</data>
 <dd id="2-description" itemprop="description">
  1 boule Crème brûlée, 1 boule Vanille, 1 boule Caramel, chantilly
</dl>

dl 元素不适合用于标记对话。请参阅一些如何标记对话的示例。

4.4.10 `dt` 元素

Element/dt

支持所有当前引擎。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别:: 无。
此元素可使用的上下文:: 在 dl 元素中，在 dd 或 dt 元素之前。; 在 dl 元素的子元素 div 元素中，在 dd 或 dt 元素之前。
内容模型:: 流内容，但不能有 header、footer、分区内容或标题内容的后代。
在 text/html 中的标签省略:: 如果 dt 元素后面紧跟另一个 dt 元素或 dd 元素，则其结束标签可以省略。
内容属性:: 全局属性
可访问性注意事项:: 给作者的建议。; 给实现者的建议。
DOM 接口:: 使用 HTMLElement。

dt 元素表示描述列表（dl 元素）中术语-描述组的术语或名称部分。

dt 元素本身在 dl 元素中使用时，并不表示其内容是被定义的术语，但可以使用 dfn 元素来表示这一点。

此示例展示了使用 dt 元素表示问题，使用 dd 元素表示答案的常见问题（FAQ）列表。

<article>
 <h1>FAQ</h1>
 <dl>
  <dt>What do we want?</dt>
  <dd>Our data.</dd>
  <dt>When do we want it?</dt>
  <dd>Now.</dd>
  <dt>Where is it?</dt>
  <dd>We are not sure.</dd>
 </dl>
</article>

4.4.11 `dd` 元素

Element/dd

支持所有当前引擎。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别:: 无。
此元素可使用的上下文:: 在 dl 元素中，在 dt 或 dd 元素之后。; 在 dl 元素的子元素 div 元素中，在 dt 或 dd 元素之后。
内容模型:: 流内容。
在 text/html 中的标签省略:: 如果 dd 元素后面紧跟另一个 dd 元素或 dt 元素，或者父元素中没有更多内容，则其结束标签可以省略。
内容属性:: 全局属性
可访问性注意事项:: 给作者的建议。; 给实现者的建议。
DOM 接口:: 使用 HTMLElement。

dd 元素表示描述列表（dl 元素）中术语-描述组的描述、定义或值部分。

dl 可以用于定义词汇表，就像在字典中一样。在以下示例中，每个条目由带有 dt 的 dfn 给出，并有多个 dd，展示定义的各个部分。

<dl>
 <dt><dfn>happiness</dfn></dt>
 <dd class="pronunciation">/ˈhæpinəs/</dd>
 <dd class="part-of-speech"><i><abbr>n.</abbr></i></dd>
 <dd>The state of being happy.</dd>
 <dd>Good fortune; success. <q>Oh <b>happiness</b>! It worked!</q></dd>
 <dt><dfn>rejoice</dfn></dt>
 <dd class="pronunciation">/rɪˈdʒɔɪs/</dd>
 <dd><i class="part-of-speech"><abbr>v.intr.</abbr></i> To be delighted oneself.</dd>
 <dd><i class="part-of-speech"><abbr>v.tr.</abbr></i> To cause one to be delighted.</dd>
</dl>

4.4.12 `figure` 元素

Element/figure

支持所有当前引擎。

Firefox4+Safari5.1+Chrome8+

Opera11+Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11+

类别:: 流内容。; 明显内容。
此元素可使用的上下文:: 预期流内容的地方。
内容模型:: 可以是：一个 figcaption 元素后跟流内容。; 或者：流内容后跟一个 figcaption 元素。; 或者：流内容。
在 text/html 中的标签省略:: 标签不可省略。
内容属性:: 全局属性
可访问性注意事项:: 给作者的建议。; 给实现者的建议。
DOM 接口:: 使用 HTMLElement。

figure 元素表示一些独立的流内容，可选地带有标题，通常作为单一单元从文档的主流中引用。

在此上下文中，“独立”并不一定意味着独立。例如，段落中的每个句子都是独立的；作为句子一部分的图像不适合使用 figure，但由图像构成的完整句子则是合适的。

因此，该元素可以用来注释插图、图表、照片、代码列表等。

当 figure 从文档的主要内容中通过标题（例如，通过图号）进行引用时，这样的内容可以很容易地从主内容中移开，例如，移到页面侧边、专用页面或附录，而不会影响文档的流。

如果 figure 元素通过其相对位置引用，例如，“在上面的照片中”或“如下一图所示”，则移动图形会破坏页面的意义。鼓励作者使用标签引用图形，而不是使用此类相对引用，以便可以轻松地重新设计页面而不影响页面的意义。

元素的第一个 figcaption 元素子元素（如果有），表示 figure 元素内容的标题。如果没有 figcaption 子元素，则没有标题。

figure 元素的内容是周围流的一部分。如果页面的目的是显示图形，例如图片共享网站上的照片，则可以使用 figure 和 figcaption 元素明确提供该图形的标题。对于仅与周围流略有相关或具有不同目的的内容，应使用 aside 元素（它本身可以包含 figure）。例如，重复来自 article 内容的拉引引用会更适合放在 aside 中，而不是 figure 中，因为它不是内容的一部分，而是为了吸引读者或突出关键主题而重复内容。

此示例展示了使用 figure 元素来标记代码列表。

<p>In <a href="#l4">listing 4</a> we see the primary core interface
API declaration.</p>
<figure id="l4">
 <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
 <pre><code>interface PrimaryCore {
 boolean verifyDataLine();
 undefined sendData(sequence&lt;byte> data);
 undefined initSelfDestruct();
}</code></pre>
</figure>
<p>The API is designed to use UTF-8.</p>

在这里，我们看到使用 figure 元素来标记作为页面主要内容的照片（如在画廊中）。

<!DOCTYPE HTML>
<html lang="en">
<title>Bubbles at work — My Gallery™</title>
<figure>
 <img src="bubbles-work.jpeg"
      alt="Bubbles, sitting in his office chair, works on his
           latest project intently.">
 <figcaption>Bubbles at work</figcaption>
</figure>
<nav><a href="19414.html">Prev</a> — <a href="19416.html">Next</a></nav>

在此示例中，我们看到一个不是 figure 的图像，以及一个是 figure 的图像和视频。第一个图像实际上是示例第二句话的一部分，因此它不是一个独立的单元，因此使用 figure 是不合适的。

<h2>Malinko's comics</h2>

<p>This case centered on some sort of "intellectual property"
infringement related to a comic (see Exhibit A). The suit started
after a trailer ending with these words:

<blockquote>
 <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
</blockquote>

<p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
preemptive strike using snowballs. A complete copy of the trailer is
included with Exhibit B.

<figure>
 <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
 <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption>
</figure>

<figure>
 <video src="ex-b.mov"></video>
 <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
</figure>

<p>The case was resolved out of court.

这里使用 figure 元素标记了一部分诗。

<figure>
 <p>'Twas brillig, and the slithy toves<br>
 Did gyre and gimble in the wabe;<br>
 All mimsy were the borogoves,<br>
 And the mome raths outgrabe.</p>
 <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
</figure>

在此示例中，这可能是讨论城堡的一个更大作品的一部分，使用嵌套的 figure 元素为组中的每个图形提供了一个组标题和单独的标题：

<figure>
 <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
 <figure>
  <figcaption>Etching. Anonymous, ca. 1423.</figcaption>
  <img src="castle1423.jpeg" alt="The castle has one tower, and a tall wall around it.">
 </figure>
 <figure>
  <figcaption>Oil-based paint on canvas. Maria Towle, 1858.</figcaption>
  <img src="castle1858.jpeg" alt="The castle now has two towers and two walls.">
 </figure>
 <figure>
  <figcaption>Film photograph. Peter Jankle, 1999.</figcaption>
  <img src="castle1999.jpeg" alt="The castle lies in ruins, the original tower all that remains in one piece.">
 </figure>
</figure>

上一个示例也可以更简洁地写成如下形式（使用 title 属性代替嵌套的 figure/figcaption 对）：

<figure>
 <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
      alt="The castle has one tower, and a tall wall around it.">
 <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
      alt="The castle now has two towers and two walls.">
 <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
      alt="The castle lies in ruins, the original tower all that remains in one piece.">
 <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure>

图形有时仅通过内容隐式地引用：

<article>
 <h1>Fiscal negotiations stumble in Congress as deadline nears</h1>
 <figure>
  <img src="obama-reid.jpeg" alt="Obama and Reid sit together smiling in the Oval Office.">
  <figcaption>Barack Obama and Harry Reid. White House press photograph.</figcaption>
 </figure>
 <p>Negotiations in Congress to end the fiscal impasse sputtered on Tuesday, leaving both chambers
 grasping for a way to reopen the government and raise the country's borrowing authority with a
 Thursday deadline drawing near.</p>
 ...
</article>

4.4.13 `figcaption` 元素

Element/figcaption

支持所有当前引擎。

Firefox4+Safari5.1+Chrome8+

Opera11+Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11+

类别:: 无。
此元素可使用的上下文:: 作为 figure 元素的第一个或最后一个子元素。
内容模型:: 流内容。
在 text/html 中的标签省略:: 标签不可省略。
内容属性:: 全局属性
可访问性注意事项:: 给作者的建议。; 给实现者的建议。
DOM 接口:: 使用 HTMLElement。

figcaption 元素表示其父 figure 元素内容的标题或说明（如果有）。

该元素可以包含有关来源的附加信息：

<figcaption>
 <p>A duck.</p>
 <p><small>Photograph courtesy of 🌟 News.</small></p>
</figcaption>

<figcaption>
 <p>Average rent for 3-room apartments, excluding non-profit apartments</p>
 <p>Zürich’s Statistics Office — <time datetime=2017-11-14>14 November 2017</time></p>
</figcaption>

4.4.14 `main` 元素

Element/main

支持所有当前引擎。

Firefox21+Safari7+Chrome26+

Opera16+Edge79+

Edge (旧版)12+Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别:: 流内容。; 明显内容。
此元素可使用的上下文:: 预期流内容的地方，但仅当它是层次结构正确的 main 元素。
内容模型:: 流内容。
在 text/html 中的标签省略:: 标签不可省略。
内容属性:: 全局属性
可访问性注意事项:: 给作者的建议。; 给实现者的建议。
DOM 接口:: 使用 HTMLElement。

main 元素表示文档的主要内容。

文档中不能有多个未指定 hidden 属性的 main 元素。

层次结构正确的 main 元素是指其祖先元素仅限于 html、body、div、没有可访问名称的 form 元素和自主自定义元素。每个 main 元素都必须是层次结构正确的 main 元素。

在此示例中，作者使用了一种将页面的每个组件呈现在一个框中的布局。为了包装页面的主要内容（而不是页眉、页脚、导航栏和侧边栏），使用了 main 元素。

<!DOCTYPE html>
<html lang="en">
<title>RPG System 17</title>
<style>
 header, nav, aside, main, footer {
   margin: 0.5em; border: thin solid; padding: 0.5em;
   background: #EFF; color: black; box-shadow: 0 0 0.25em #033;
 }
 h1, h2, p { margin: 0; }
 nav, main { float: left; }
 aside { float: right; }
 footer { clear: both; }
</style>
<header>
 <h1>System Eighteen</h1>
</header>
<nav>
 <a href="../16/">← System 17</a>
 <a href="../18/">RPXIX →</a>
</nav>
<aside>
 <p>This system has no HP mechanic, so there's no healing.
</aside>
<main>
 <h2>Character creation</h2>
 <p>Attributes (magic, strength, agility) are purchased at the cost of one point per level.</p>
 <h2>Rolls</h2>
 <p>Each encounter, roll the dice for all your skills. If you roll more than the opponent, you win.</p>
</main>
<footer>
 <p>Copyright © 2013
</footer>
</html>

在以下示例中，使用了多个 main 元素，并使用脚本使导航在不进行服务器往返的情况下工作，并为非当前元素设置 hidden 属性：

<!doctype html>
<html lang=en-CA>
<meta charset=utf-8>
<title> … </title>
<link rel=stylesheet href=spa.css>
<script src=spa.js async></script>
<nav>
 <a href=/>Home</a>
 <a href=/about>About</a>
 <a href=/contact>Contact</a>
</nav>
<main>
 <h1>Home</h1>
 …
</main>
<main hidden>
 <h1>About</h1>
 …
</main>
<main hidden>
 <h1>Contact</h1>
 …
</main>
<footer>Made with ❤️ by <a href=https://example.com/>Example 👻</a>.</footer>

4.4.15 `search` 元素

Element/search

当前引擎不支持。

FirefoxNoSafariNoChromeNo

OperaNoEdgeNo

Edge (旧版)NoInternet ExplorerNo

Firefox Android?Safari iOS?Chrome AndroidNoWebView Android?Samsung Internet?Opera Android?

类别:: 流内容。; 明显内容。
此元素可使用的上下文:: 预期流内容的地方。
内容模型:: 流内容。
在 text/html 中的标签省略:: 标签不可省略。
内容属性:: 全局属性
可访问性注意事项:: 给作者的建议。; 给实现者的建议。
DOM 接口:: 使用 HTMLElement。

search 元素表示文档或应用程序中包含一组与执行搜索或过滤操作相关的表单控件或其他内容的部分。这可以是网站或应用程序的搜索；在当前网页上搜索或过滤搜索结果的方法；或全局或互联网范围的搜索功能。

仅用于呈现搜索结果是不合适的，尽管可以将建议和链接作为“快速搜索”结果的一部分包含在搜索功能中。而是期望将返回的搜索结果网页作为该网页主要内容的一部分呈现。

在以下示例中，作者在网页的header中包含了一个搜索表单：

<header>
  <h1><a href="/">My fancy blog</a></h1>
  ...
  <search>
    <form action="search.php">
      <label for="query">Find an article</label>
      <input id="query" name="q" type="search">
      <button type="submit">Go!</button>
    </form>
  </search>
</header>

在这个示例中，作者完全使用 JavaScript 实现了其网络应用程序的搜索功能。没有使用 form 元素来执行服务器端提交，但包含的 search 元素在语义上标识了其后代内容的目的是表示搜索功能。

<search>
  <label>
    Find and filter your query
    <input type="search" id="query">
  </label>
  <label>
    <input type="checkbox" id="exact-only">
    Exact matches only
  </label>

  <section>
    <h3>Results found:</h3>
    <ul id="results">
      <li>
        <p><a href="services/consulting">Consulting services</a></p>
        <p>
          Find out how can we help you improve your business with our integrated consultants, Bob and Bob.
        </p>
      </li>
      ...
    </ul>
    <!--
      when a query returns or filters out all results
      render the no results message here
    -->
    <output id="no-results"></output>
  </section>
</search>

在以下示例中，页面有两个搜索功能。第一个位于网页的header中，作为一个全局机制来搜索网站的内容。其目的通过指定的title属性来指示。第二个是页面主要内容的一部分，表示一个搜索和过滤当前页面内容的机制。它包含一个标题来指示其目的。

<body>
  <header>
    ...
    <search title="Website">
      ...
    </search>
  </header>
  <main>
    <h1>Hotels near your location</h1>
     <search>
       <h2>Filter results</h2>
       ...
     </search>
     <article>
      <!-- search result content -->
    </article>
  </main>
</body>

4.4.16 `div` 元素

Element/div

支持所有当前引擎。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLDivElement

支持所有当前引擎。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

类别:

流内容。

可感知内容。

此元素可使用的上下文:

预期流内容的地方。

作为 dl 元素的子元素。

内容模型:

如果元素是 dl 元素的子元素：一个或多个 dt 元素，后跟一个或多个 dd 元素，可以与脚本支持元素混合。

如果元素不是 dl 元素的子元素：流内容。

在 text/html 中的标签省略:

标签不可省略。

[Exposed=Window]
interface HTMLDivElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

div 元素本身没有任何特殊含义。它表示其子元素。它可以与 class、lang 和 title 属性一起使用，以标记一组连续元素的语义。它还可以在 dl 元素中使用，包裹 dt 和 dd 元素的组。

强烈建议作者将 div 元素视为最后的手段，当没有其他合适的元素时才使用。使用更合适的元素而不是 div 元素，可以提高读者的可访问性，并且更易于作者维护。

例如，一篇博客文章可以使用 article 来标记，一个章节可以使用 section 来标记，一个页面的导航可以使用 nav 来标记，一组表单控件可以使用 fieldset 来标记。

另一方面，div 元素可以用于样式目的，或者用于包裹章节中的多个段落，这些段落都需要以类似的方式进行注释。在下面的例子中，我们看到 div 元素被用来一次设置两个段落的语言，而不是分别设置两个段落元素的语言：

<article lang="en-US">
 <h1>My use of language and my cats</h1>
 <p>My cat's behavior hasn't changed much since her absence, except
 that she plays her new physique to the neighbors regularly, in an
 attempt to get pets.</p>
 <div lang="en-GB">
  <p>My other cat, coloured black and white, is a sweetie. He followed
  us to the pool today, walking down the pavement with us. Yesterday
  he apparently visited our neighbours. I wonder if he recognises that
  their flat is a mirror image of ours.</p>
  <p>Hm, I just noticed that in the last paragraph I used British
  English. But I'm supposed to write in American English. So I
  shouldn't say "pavement" or "flat" or "colour"...</p>
 </div>
 <p>I should say "sidewalk" and "apartment" and "color"!</p>
</article>

4.5 文本级语义

4.5.1 `a` 元素

Element/a

所有当前引擎支持。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLAnchorElement

所有当前引擎支持。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

分类:

流内容。

短语内容。

如果该元素有 href 属性: 交互内容。

感知内容。

此元素可用的上下文:

期望短语内容的地方。

内容模型:

透明，但不得有交互内容后代， a 元素后代，或具有 tabindex 属性的后代。

text/html 中的标签省略:

两端标签都不能省略。

内容属性:

全局属性

href — 超链接的地址

target — 可导航对象用于超链接导航

download — 是否下载资源而不是导航到它，以及如果是则下载的文件名

ping — 要 ping 的 URL

rel — 包含超链接的文档位置与目标资源之间的关系

hreflang — 链接资源的语言

type — 被引用资源的类型提示

referrerpolicy — 元素发起的引用策略对 fetches

可访问性考虑:

如果该元素有 href 属性: 作者; 实现者。

否则: 作者; 实现者。

DOM 接口:

[Exposed=Window]
interface HTMLAnchorElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString target;
  [CEReactions] attribute DOMString download;
  [CEReactions] attribute USVString ping;
  [CEReactions] attribute DOMString rel;
  [SameObject, PutForwards=value] readonly attribute DOMTokenList relList;
  [CEReactions] attribute DOMString hreflang;
  [CEReactions] attribute DOMString type;

  [CEReactions] attribute DOMString text;

  [CEReactions] attribute DOMString referrerPolicy;

  // also has obsolete members
};
HTMLAnchorElement includes HTMLHyperlinkElementUtils;

如果 a 元素有 href 属性，那么它表示一个超链接（超文本锚点），由其内容标示。

如果 a 元素没有 href 属性，那么该元素表示一个占位符，表示如果相关的话，本来可以放置一个链接的位置，仅包含该元素的内容。

如果没有 href 属性，则 target、download、ping、rel、hreflang、type 和 referrerpolicy 属性必须省略。

如果 itemprop 属性在 a 元素上被指定，则必须同时指定 href 属性。

如果一个网站在每个页面上使用一致的导航工具栏，那么通常链接到页面本身的链接可以使用 a 元素进行标记：

<nav>
 <ul>
  <li> <a href="/">Home</a> </li>
  <li> <a href="/news">News</a> </li>
  <li> <a>Examples</a> </li>
  <li> <a href="/legal">Legal</a> </li>
 </ul>
</nav>

href、target、download、ping 和 referrerpolicy 属性影响用户跟随超链接或下载超链接时发生的事情，这些超链接是使用 a 元素创建的。rel、hreflang 和 type 属性可用于在用户跟随链接之前向其指示目标资源的可能性质。

a.text: Same as textContent.

HTMLAnchorElement/download

支持所有当前的引擎。

Firefox20+Safari10.1+Chrome15+

Opera?Edge79+

Edge (传统版)13+Internet Explorer不支持

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLAnchorElement/rel

支持所有当前的引擎。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (传统版)12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

IDL 属性 download、ping、target、rel、hreflang 和 type，必须反映同名的相应内容属性。

HTMLAnchorElement/relList

支持所有当前的引擎。

Firefox30+Safari9+Chrome65+

Opera?Edge79+

Edge (传统版)18Internet Explorer不支持

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

IDL 属性 relList 必须反映 rel 内容属性。

HTMLAnchorElement/referrerPolicy

支持所有当前的引擎。

Firefox50+Safari14+Chrome52+

Opera?Edge79+

Edge (传统版)?Internet Explorer不支持

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

IDL 属性 referrerPolicy 必须反映 referrerpolicy 内容属性，仅限已知值。

text 属性的 getter 必须返回该元素的后代文本内容。

text 属性的 setter 必须用给定的值替换所有字符串。

a 元素可以包裹整个段落、列表、表格等，甚至整个部分，只要其中没有交互内容（例如按钮或其他链接）。此示例展示了如何将整个广告块变成一个链接：

<aside class="advertising">
 <h1>Advertising</h1>
 <a href="https://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
   <h1>Mellblomatic 9000!</h1>
   <p>Turn all your widgets into mellbloms!</p>
   <p>Only $9.99 plus shipping and handling.</p>
  </section>
 </a>
 <a href="https://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
   <h1>The Mellblom Browser</h1>
   <p>Web browsing at the speed of light.</p>
   <p>No other browser goes faster!</p>
  </section>
 </a>
</aside>

以下示例展示了如何使用一点脚本将职位列表表格中的整行有效地变成一个超链接：

<table>
 <tr>
  <th>Position
  <th>Team
  <th>Location
 <tr>
  <td><a href="/jobs/manager">Manager</a>
  <td>Remotees
  <td>Remote
 <tr>
  <td><a href="/jobs/director">Director</a>
  <td>Remotees
  <td>Remote
 <tr>
  <td><a href="/jobs/astronaut">Astronaut</a>
  <td>Architecture
  <td>Remote
</table>
<script>
document.querySelector("table").onclick = ({ target }) => {
  if (target.parentElement.localName === "tr") {
    const link = target.parentElement.querySelector("a");
    if (link) {
      link.click();
    }
  }
}
</script>

4.5.2 `em` 元素

Element/em

支持所有当前引擎。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别：: 流内容。; 短语内容。; 显著内容。
可以使用该元素的上下文：: 在预期短语内容的地方。
内容模型：: 短语内容。
在 text/html 中省略标签：: 标签不可省略。
内容属性：: 全局属性
可访问性考虑：: 作者参考。; 实现者参考。
DOM 接口：: 使用 HTMLElement。

em 元素表示其内容的强调。

特定内容的强调程度由其祖先 em 元素的数量决定。

强调位置的变化会改变句子的含义。因此，该元素是内容的一个组成部分。具体的强调使用方式取决于语言。

这些例子展示了如何通过改变强调来改变意思。首先，一个一般的事实陈述，没有任何强调：

<p>Cats are cute animals.</p>

通过强调第一个词，声明暗示讨论的动物种类有问题（也许有人在断言狗是可爱的）：

<p><em>Cats</em> are cute animals.</p>

将重音移到动词上，突出的是整个句子的真实性受到质疑（也许有人在说猫不可爱）：

<p>Cats <em>are</em> cute animals.</p>

通过将重音移到形容词上，猫的具体性质再次被强调（也许有人暗示猫是凶猛的动物）：

<p>Cats are <em>cute</em> animals.</p>

同样地，如果有人断言猫是蔬菜，纠正这种说法的人可能会强调最后一个词：

<p>Cats are cute <em>animals</em>.</p>

通过强调整个句子，可以看出说话者在努力传达这个观点。这种强调通常也会影响标点符号，因此这里用了感叹号。

<p><em>Cats are cute animals!</em></p>

愤怒中带有对可爱程度的强调，可能会导致如下的标记：

<p><em>Cats are <em>cute</em> animals!</em></p>

em 元素不是一个通用的“斜体”元素。有时，文本需要从段落的其余部分中脱颖而出，就像是以不同的情绪或语气书写的。对于这种情况，i 元素更合适。

em 元素也不是用来表达重要性的；对于这个目的，strong 元素更合适。

4.5.3 `strong` 元素

Element/strong

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Categories:: 流内容。; 短语内容。; 可感知内容。
此元素可以使用的上下文:: 在需要短语内容的地方。
内容模型:: 短语内容。
在 text/html 中的标签省略:: 标签不能省略。
内容属性:: 全局属性
可访问性考虑:: 对作者。; 对实现者。
DOM 接口:: 使用 HTMLElement。

strong 元素表示其内容的重要性、严肃性或紧迫性。

重要性：strong 元素可以用在标题、说明或段落中，以区分真正重要的部分与其他可能更详细、更幽默或只是例行公事的部分。（这与标记子标题不同，子标题适合使用 hgroup 元素。）

例如，前一段的第一个词用 strong 标记，以将其与段落中其他更详细的文字区分开来。

严肃性：strong 元素可以用来标记警告或注意事项。

紧迫性：strong 元素可以用来表示用户需要比文档其他部分更早看到的内容。

内容的相对重要级别由其祖先 strong 元素的数量决定；每个 strong 元素都会增加其内容的重要性。

用 strong 元素改变文本的重要性不会改变句子的含义。

在这里，“chapter”一词和实际的章节号只是例行公事，实际的章节名称用 strong 标记：

<h1>Chapter 1: <strong>The Praxis</strong></h1>

在下面的例子中，说明中的图名用 strong 标记，以将其与例行公事的文本（前）和描述（后）区分开来：

<figcaption>Figure 1. <strong>Ant colony dynamics</strong>. The ants in this colony are
affected by the heat source (upper left) and the food source (lower right).</figcaption>

在这个例子中，标题实际上是“Flowers, Bees, and Honey”，但是作者在标题中添加了轻松愉快的部分。使用 strong 元素标记第一部分，以将其与后面的部分区分开来。

<h1><strong>Flowers, Bees, and Honey</strong> and other things I don't understand</h1>

这是一个游戏中警告通知的示例，其中各个部分根据它们的重要性进行了标记：

<p><strong>Warning.</strong> This dungeon is dangerous.
<strong>Avoid the ducks.</strong> Take any gold you find.
<strong><strong>Do not take any of the diamonds</strong>,
they are explosive and <strong>will destroy anything within
ten meters.</strong></strong> You have been warned.</p>

在这个示例中，使用了 strong 元素来表示用户首先需要阅读的部分文本。

<p>Welcome to Remy, the reminder system.</p>
<p>Your tasks for today:</p>
<ul>
 <li><p><strong>Turn off the oven.</strong></p></li>
 <li><p>Put out the trash.</p></li>
 <li><p>Do the laundry.</p></li>
</ul>

4.5.4 `small` 元素

Element/small

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别:: 流内容.; 短语内容.; 可感知内容.
该元素可用的上下文:: 短语内容预期出现的地方。
内容模型:: 短语内容。
在 text/html 中省略标签:: 两个标签都不可省略。
内容属性:: 全局属性
无障碍考虑:: 对于作者.; 对于实现者.
DOM 接口:: 使用 HTMLElement.

small 元素表示旁注，如小字打印。

small 元素并不会“降低”或减少通过 em 元素强调的文本或通过 strong 元素标记为重要的文本的重要性。要标记文本为不强调或不重要，只需不要使用 em 或 strong 元素即可。

small 元素不应用于长时间的文本，例如多个段落、列表或文本部分。它仅适用于短文本。例如，列出使用条款的页面中的文本不适合使用 small 元素：在这种情况下，文本不是旁注，它是页面的主要内容。

small 元素不得用于子标题；为此，使用 hgroup 元素。

在此示例中，small 元素用于指示酒店房间价格中不包含增值税：

<dl>
 <dt>Single room
 <dd>199 € <small>breakfast included, VAT not included</small>
 <dt>Double room
 <dd>239 € <small>breakfast included, VAT not included</small>
</dl>

在第二个示例中，small 元素用于文章中的附注。

<p>Example Corp today announced record profits for the
second quarter <small>(Full Disclosure: Foo News is a subsidiary of
Example Corp)</small>, leading to speculation about a third quarter
merger with Demo Group.</p>

这与侧边栏不同，侧边栏可能包含多个段落，并且与正文的主要流动分开。在以下示例中，我们看到同一篇文章中的侧边栏。该侧边栏也有小字，指明了侧边栏中信息的来源。

<aside>
 <h1>Example Corp</h1>
 <p>This company mostly creates small software and Web
 sites.</p>
 <p>The Example Corp company mission is "To provide entertainment
 and news on a sample basis".</p>
 <p><small>Information obtained from <a
 href="https://example.com/about.html">example.com</a> home
 page.</small></p>
</aside>

在最后一个示例中，small 元素被标记为 重要的 小字。

<p><strong><small>Continued use of this service will result in a kiss.</small></strong></p>

4.5.5 `s` 元素

元素/s

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别:: 流内容。; 短语内容。; 可触及内容。
此元素可用的上下文:: 在短语内容中。
内容模型:: 短语内容。
在 text/html 中的标签省略:: 两个标签都不可省略。
内容属性:: 全局属性
无障碍考虑:: 面向作者。; 面向实现者。
DOM 接口:: 使用HTMLElement。

s 元素表示不再准确或不再相关的内容。

s 元素不适用于指示文档编辑；要标记一段文本为已从文档中删除，请使用del 元素。

在这个示例中，建议零售价已被标记为不再相关，因为相关产品有了新的销售价格。

<p>Buy our Iced Tea and Lemonade!</p>
<p><s>Recommended retail price: $3.99 per bottle</s></p>
<p><strong>Now selling for just $2.99 a bottle!</strong></p>

4.5.6 `cite` 元素

元素/cite

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别:: 流内容。; 短语内容。; 可触及内容。
此元素可用的上下文:: 在短语内容中。
内容模型:: 短语内容。
在 text/html 中的标签省略:: 两个标签都不可省略。
内容属性:: 全局属性
无障碍考虑:: 面向作者。; 面向实现者。
DOM 接口:: 使用HTMLElement。

cite 元素表示一个作品的标题（例如：一本书，一篇论文，一篇文章，一首诗，一份乐谱，一首歌曲，一部剧本，一部电影，一档电视节目，一款游戏，一件雕塑，一幅画，一场戏剧制作，一部剧，一部歌剧，一部音乐剧，一次展览，一份法律案件报告，一个计算机程序，等等）。这可以是被引用或详细引用的作品（即，引用），也可以只是随意提到的作品。

一个人的名字不是作品的标题——即使人们称那个人人为“作品”——因此，该元素不应用于标记人名。（在某些情况下，b 元素可能适用于名字；例如，在一篇关于名人的八卦文章中，名人名字作为关键字以不同样式呈现，以吸引注意。在其他情况下，如果确实需要元素，可以使用span元素。）

下一个示例展示了cite 元素的典型用法：

<p>My favorite book is <cite>The Reality Dysfunction</cite> by
Peter F. Hamilton. My favorite comic is <cite>Pearls Before
Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive
Samba</cite> by the Cannonball Adderley Sextet.</p>

这是正确的用法：

<p>According to the Wikipedia article <cite>HTML</cite>, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.</p>

然而，以下用法是不正确的，因为这里的cite 元素包含的内容远超作品的标题：

<!-- do not copy this example, it is an example of bad usage! -->
<p>According to <cite>the Wikipedia article on HTML</cite>, as it
stood in mid-February 2008, leaving attribute values unquoted is
unsafe. This is obviously an over-simplification.</p>

cite 元素是参考文献中引用的关键部分，但仅用于标记标题：

<p><cite>Universal Declaration of Human Rights</cite>, United Nations,
        December 1948. Adopted by General Assembly resolution 217 A (III).</p>

引用不是引述（对于引述，q 元素更为合适）。

这是不正确的用法，因为cite 不用于引述：

<p><cite>This is wrong!</cite>, said Ian.</p>

这也是不正确的用法，因为一个人不是一个作品：

<p><q>This is still wrong!</q>, said <cite>Ian</cite>.</p>

正确的用法不使用cite 元素：

<p><q>This is correct</q>, said Ian.</p>

如上所述，b 元素可能适用于在某些类型的文档中标记名字作为关键词：

<p>And then <b>Ian</b> said <q>this might be right, in a
gossip column, maybe!</q>.</p>

4.5.7 `q` 元素

元素/q

在所有当前的引擎中均有支持。

Firefox1+Safari3+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别:: 流内容.; 短语内容.; 可感知内容.
此元素可以使用的上下文:: 在需要短语内容的地方。
内容模型:: 短语内容.
在 text/html 中的标签省略:: 两个标签都不可省略。
内容属性:: 全局属性; cite — 链接到引用的来源或有关编辑的更多信息
可访问性考虑:: 给作者的建议.; 给实现者的建议.
DOM 接口:: 使用 HTMLQuoteElement.

q 元素表示从其他来源引用的一些短语内容。

引用标点（如引号）不应立即出现在 q 元素之前、之后或内部；这些标点将由用户代理在渲染时插入。

q 元素中的内容必须是从另一个来源引用的，其地址（如果有）可以在 cite 属性中引用。来源可以是虚构的，比如在小说或剧本中引用的角色。

如果存在 cite 属性，它必须是一个有效的 URL，可能被空格包围。要获得相应的引用链接，属性的值必须解析相对于元素的节点文档。用户代理可能允许用户跟随这些引用链接，但这些链接主要用于私人用途（例如，由收集站点引用统计的服务器端脚本），而不是供读者使用。

q 元素不得用于代替不表示引用的引号；例如，使用 q 元素标记讽刺性陈述是不合适的。

使用 q 元素标记引用完全是可选的；仅使用明确的引用标点而不使用 q 元素同样是正确的。

这是 q 元素的一个简单示例：

<p>The man said <q>Things that are impossible just take
longer</q>. I disagreed with him.</p>

这是一个示例，其中 q 元素中包含了一个显式的引用链接，以及一个在外部的显式引用：

<p>The W3C page <cite>About W3C</cite> says the W3C's
mission is <q cite="https://www.w3.org/Consortium/">To lead the
World Wide Web to its full potential by developing protocols and
guidelines that ensure long-term growth for the Web</q>. I
disagree with this mission.</p>

在下面的示例中，引用本身包含了另一个引用：

<p>In <cite>Example One</cite>, he writes <q>The man
said <q>Things that are impossible just take longer</q>. I
disagreed with him</q>. Well, I disagree even more!</p>

在下面的示例中，使用了引号而不是 q 元素：

<p>His best argument was ❝I disagree❞, which
I thought was laughable.</p>

在下面的示例中，没有引号——引号用于命名一个词。在这种情况下使用 q 元素是不适当的。

<p>The word "ineffable" could have been used to describe the disaster
resulting from the campaign's mismanagement.</p>

4.5.8 `dfn` 元素

Element/dfn

所有当前引擎均支持。

Firefox1+Safari6+Chrome15+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别:: 流内容.; 短语内容.; 可感知内容.
该元素可以使用的上下文:: 在预期的短语内容中。
内容模型:: 短语内容，但其中不能有 dfn 元素的后代。
文本/html 中的标签省略:: 两个标签都不能省略。
内容属性:: 全局属性; 此外，title 属性在此元素上具有特殊语义: 术语的完整形式或缩写的扩展。
无障碍考虑:: 针对作者.; 针对实现者.
DOM 接口:: 使用 HTMLElement.

dfn 元素表示术语的定义实例。最近的段落、描述列表组或部分，即 dfn 元素的最近祖先，必须还包含术语的定义，该术语由 dfn 元素给出。

定义术语: 如果 dfn 元素有一个 title 属性，那么该属性的确切值就是正在定义的术语。否则，如果它包含恰好一个子元素节点且没有子 Text 节点，并且该子元素是带有 title 属性的 abbr 元素，那么该属性的确切值就是正在定义的术语。否则，就是后代文本内容，即 dfn 元素给出的定义术语。

如果 title 属性存在，那么它必须仅包含正在定义的术语。

祖先元素的 title 属性不会影响 dfn 元素。

一个链接到 dfn 元素的 a 元素表示由 dfn 元素定义的术语的实例。

在下面的片段中，术语“Garage Door Opener”首先在第一段中被定义，然后在第二段中使用。在这两种情况下，它的缩写才是实际显示的内容。

<p>The <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>
<!-- ... later in the document: -->
<p>Teal'c activated his <abbr title="Garage Door Opener">GDO</abbr>
and so Hammond ordered the iris to be opened.</p>

通过添加一个 a 元素，可以使引用变得明确：

<p>The <dfn id=gdo><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>
<!-- ... later in the document: -->
<p>Teal'c activated his <a href=#gdo><abbr title="Garage Door Opener">GDO</abbr></a>
and so Hammond ordered the iris to be opened.</p>

4.5.9 `abbr` 元素

Element/abbr

在所有当前引擎中均受支持。

Firefox1+Safari4+Chrome2+

Opera?Edge79+

Edge (旧版)12+Internet Explorer7+

Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别:: 流内容.; 措辞内容.; 可感知内容.
可以使用该元素的上下文:: 在期望措辞内容的地方。
内容模型:: 措辞内容.
在 text/html 中的标签省略:: 两个标签都不能省略。
内容属性:: 全局属性; 此外，title 属性在此元素上具有特殊语义：缩写的完整术语或扩展
无障碍考虑:: 供作者参考.; 供实现者参考.
DOM 接口:: 使用 HTMLElement.

元素 abbr 表示缩写或首字母缩略词，通常带有其扩展形式。title 属性可用于提供缩写的扩展形式。该属性（如果指定）必须包含缩写的扩展形式，且仅此而已。

下面的段落包含了一个使用 abbr 元素标记的缩写。该段落定义了术语 “Web Hypertext Application Technology Working Group”。

<p>The <dfn id=whatwg><abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr></dfn>
is a loose unofficial collaboration of web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.</p>

另一种写法是：

<p>The <dfn id=whatwg>Web Hypertext Application Technology
Working Group</dfn> (<abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr>)
is a loose unofficial collaboration of web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.</p>

这个段落中有两个缩写。请注意，只有一个被定义了；另一个没有相关的扩展，因此没有使用 abbr 元素。

<p>The
<abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>
started working on HTML5 in 2004.</p>

这个段落将一个缩写链接到它的定义。

<p>The <a href="#whatwg"><abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>
community does not have much representation from Asia.</p>

这个段落标记了一个缩写，但没有提供扩展，可能作为一个挂钩来应用缩写的样式（例如小型大写字母）。

<p>Philip` and Dashiva both denied that they were going to
get the issue counts from past revisions of the specification to
backfill the <abbr>WHATWG</abbr> issue graph.</p>

如果一个缩写是复数形式的，则扩展的语法数量（复数与单数）必须与元素内容的语法数量一致。

这里复数形式在元素外部，因此扩展使用的是单数形式：

<p>Two <abbr title="Working Group">WG</abbr>s worked on
this specification: the <abbr>WHATWG</abbr> and the
<abbr>HTMLWG</abbr>.</p>

这里复数形式在元素内部，因此扩展使用的是复数形式：

<p>Two <abbr title="Working Groups">WGs</abbr> worked on
this specification: the <abbr>WHATWG</abbr> and the
<abbr>HTMLWG</abbr>.</p>

不必使用此元素来标记缩写。它在以下情况下被认为是有用的：

作者希望提供扩展的缩写，其中使用带有 abbr 元素和 title 属性是一种替代方案，可以避免在文中直接包含扩展（例如括号中的内容）。
可能对文档读者不熟悉的缩写，鼓励作者使用带有 abbr 元素和 title 属性，或者在第一次使用缩写时在文本中直接包含扩展。
需要语义注解的缩写，例如，以便从样式表中识别并赋予特定样式，对于这种情况可以使用 abbr 元素而不带 title 属性。

在 title 属性中提供一次扩展不会导致同一文档中其他具有相同内容但没有 title 属性的 abbr 元素表现得像具有相同扩展一样。每个 abbr 元素都是独立的。

4.5.10 `ruby` 元素

Element/ruby

在所有当前引擎中均受支持。

Firefox38+Safari5+Chrome5+

Opera?Edge79+

Edge (旧版)12+Internet Explorer5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别:: 流内容。; 措辞内容。; 可感知内容。
可以使用此元素的上下文:: 在期望措辞内容的地方。
内容模型:: 参见正文。
在 text/html 中的标签省略:: 没有标签可以省略。
内容属性:: 全局属性
可访问性考虑:: 对于作者。; 对于实现者。
DOM 接口:: 使用 HTMLElement。

ruby 元素允许一个或多个短语内容的片段被标记为 ruby 注释。Ruby 注释是与基础文本并排显示的短文本片段，主要用于东亚排版，作为发音指南或包含其他注释。在日语中，这种排版形式也被称为 furigana。

ruby 元素的内容模型由以下一种或多种序列组成：

以下之一：
- 措辞内容，但没有 ruby 元素且没有 ruby 元素的子孙
- 一个单独的 ruby 元素，它本身没有 ruby 元素的子孙
以下之一：
- 一个或多个 rt 元素
- 一个rp元素，后面跟着一个或多个rt元素，每个元素本身后面跟着一个rp元素

ruby 和 rt 元素可以用于多种类型的注释，尤其包括（但不限于）下述描述的那些。有关特别是日语 Ruby 的更多细节，以及如何为日语渲染 Ruby，请参见日语文本布局要求。[JLREQ]

在撰写时，CSS 还未提供完全控制 HTML ruby 元素渲染的方式。希望 CSS 能在适当的时候扩展以支持下述样式。

日语中单个基本字符的单字注音

一个或多个平假名或片假名字符（注音标注）与每个表意字符（基本文本）一起放置。这用于提供汉字字符的读音。

<ruby>B<rt>annotation</ruby>

在此示例中，请注意每个注音如何对应一个基本字符。

<ruby>君<rt>くん</ruby><ruby>子<rt>し</ruby>は<ruby>和<rt>わ</ruby>して<ruby>同<rt>どう</ruby>ぜず。

君くん子しは和わして同どうぜず。

在这个例子中，可以用一个ruby元素来书写，包含两个基本文本片段和两个注音（每个一个），而不是两个连续的ruby元素，每个包含一个基本文本片段和注音（如上面的标记所示）：

<ruby>君<rt>くん</rt>子<rt>し</rt>

复合词（熟语）的单字注音

这与前面的情况类似：复合词中的每个表意字符（基本文本）都用平假名或片假名字符（注音标注）给出其读音。不同之处在于，基本文本片段形成复合词，而不是彼此分离。

<ruby>B<rt>annotation</ruby>B<rt>annotation</rt></ruby>

在此示例中，再次注意每个注音如何对应一个基本字符。在这个例子中，每个复合词（熟语）对应一个ruby元素。

这里的渲染预计是每个注音放置在对应的基本字符上方（或在垂直文本中旁边），注音不会超出相邻字符的范围。

<ruby>鬼<rt>き</rt>門<rt>もん</rt></ruby>の<ruby>方<rt>ほう</rt>角<rt>がく</rt></ruby>を<ruby>凝<rt>ぎょう</rt>視<rt>し</rt></ruby>する

鬼き門もんの方ほう角がくを凝ぎょう視しする

熟语注音

这在语义上与前面的情况相同（基本复合词中的每个表意字符都有其读音注音，使用平假名或片假名字符），但渲染是更复杂的熟语注音渲染。

这是与前面单字注音复合词相同的示例。不同的渲染预计通过不同的样式（例如CSS）实现，此处不作展示。

<ruby>鬼<rt>き</rt>門<rt>もん</rt></ruby>の<ruby>方<rt>ほう</rt>角<rt>がく</rt></ruby>を<ruby>凝<rt>ぎょう</rt>視<rt>し</rt></ruby>する

有关熟语注音渲染的更多详细信息，请参见《日本文本布局要求》中的附录F。 [JLREQ]

描述意义的组注音

注音描述基本文本的含义，而不是（或除了）发音。因此，基本文本和注音都可以是多个字符长。

<ruby>BASE<rt>annotation</ruby>

这里一个复合表意词有其对应的片假名作为注音。

<ruby>境界面<rt>インターフェース</ruby>

境界面インターフェース

这里一个复合表意词有其英文翻译作为注音。

<ruby lang="ja">編集者<rt lang="en">editor</ruby>

編集者editor

熟字注音的组注音

对应于多个基本字符的语音读音，因为一对一的映射将非常困难。（在英语中，“Colonel”和“Lieutenant”这两个词是单词的例子，在某些方言中，发音与单个字母的直接映射非常不明确。）

在这个例子中，一种花的名称用组注音提供了其读音：

<ruby>紫陽花<rt>あじさい</ruby>

紫陽花あじさい

具有语音和语义注音的文本（双面注音）

有时，上述注音样式会组合使用。

如果这导致两个注音覆盖同一个基本片段，则可以将注音放在一起。

<ruby>BASE<rt>annotation 1</rt><rt>annotation 2</ruby>

<ruby>B<rt>a</rt><ruby>A<rt>a</rt></ruby>S<rt>a</rt></ruby>E<rt>a</rt></ruby>

在这个人为的例子中，一些符号的名字用英文和法文给出。

<ruby>
♥ <rt> Heart <rt lang=fr> Cœur </rt>
☘ <rt> Shamrock <rt lang=fr> Trèfle </rt>
✶ <rt> Star <rt lang=fr> Étoile </rt>
</ruby>

在更复杂的情况下，如以下示例中，使用嵌套的ruby元素来给出内部注音，然后整个ruby再在“外部”层级给出一个注音。

<ruby><ruby>B<rt>a</rt>A<rt>n</rt>S<rt>t</rt>E<rt>n</rt></ruby><rt>annotation</ruby>

在这里，语音读音和含义都用注音标注给出。嵌套ruby元素上的注音给出了每个基本字符的单字注音，而外部rt元素的注音给出了使用平假名表示的含义。

<ruby><ruby>東<rt>とう</rt>南<rt>なん</rt></ruby><rt>たつみ</rt></ruby>の方角

東とう南なんたつみの方角

这是相同的例子，但意义是用英语而不是日语给出的：

<ruby><ruby>東<rt>とう</rt>南<rt>なん</rt></ruby><rt lang=en>Southeast</rt></ruby>の方角

東とう南なん Southeast の方角

在没有ruby元素祖先的ruby元素中，内容被分段并分为三类：基本文本段、注释段和被忽略的段。被忽略的段不构成文档的语义（它们包含一些元素间空白和rp元素，后者用于不支持ruby的遗留用户代理）。基本文本段可以重叠（每个位置最多两个段重叠，且任何段具有早于重叠段的开始点也必须具有相同或更晚的结束点，任何段具有晚于重叠段的结束点也必须具有相同或更早的开始点）。注释段对应于rt元素。每个注释段可以与一个基本文本段相关联，每个基本文本段也可以有注释段关联。（在符合规范的文档中，每个基本文本段都与至少一个注释段相关联，每个注释段都与一个基本文本段相关联。）ruby元素表示它包含的基本文本段的并集，以及这些基本文本段与注释段的映射。段的描述基于DOM范围；注释段范围始终由一个元素组成。[DOM]

在任何特定时间，ruby元素内容的分段和分类结果是运行以下算法得到的结果：

让base text segments成为一个空的基本文本段列表，每个段可能有一个基本文本子段列表。
让annotation segments成为一个空的注释段列表，每个段可能与一个基本文本段或子段相关联。
让root成为正在运行算法的ruby元素。
如果root有一个ruby元素祖先，则跳到标记为结束的步骤。
让current parent为root。
让index为0。
让start index为null。
让parent start index为null。
让current base text为null。
开始模式：如果index大于或等于current parent中的子节点数量，则跳到标记为结束模式的步骤。
如果current parent中的第index个节点是rt或rp元素，则跳到标记为注释模式的步骤。
将start index设置为index的值。
基本模式：如果current parent中的第index个节点是ruby元素，并且current parent是与root相同的元素，则推送一个ruby层级，然后跳到标记为开始模式的步骤。
如果current parent中的第index个节点是rt或rp元素，则设置当前基本文本，然后跳到标记为注释模式的步骤。
将index增加1。
基本模式后递增：如果index大于或等于current parent中的子节点数量，则跳到标记为结束模式的步骤。
跳回到标记为基本模式的步骤。
注释模式：如果current parent中的第index个节点是rt元素，则推送一个ruby注释，然后跳到标记为注释模式递增的步骤。
如果current parent中的第index个节点是rp元素，则跳到标记为注释模式递增的步骤。
如果current parent中的第index个节点不是Text节点，或者是一个不是元素间空白的Text节点，则跳到标记为基本模式的步骤。
注释模式递增：让lookahead index为index加1。
注释模式空白跳过：如果lookahead index等于current parent中的子节点数量，则跳到标记为结束模式的步骤。
如果lookahead index中的第lookahead index个节点是rt元素或rp元素，则将index设置为lookahead index，并跳到标记为注释模式的步骤。
如果lookahead index中的第lookahead index个节点不是Text节点，或者是一个不是元素间空白的Text节点，则跳到标记为基本模式的步骤（不再增加index，所以到目前为止看到的元素间空白成为下一个基本文本段的一部分）。
将lookahead index增加1。
跳到标记为注释模式空白跳过的步骤。
结束模式：如果current parent不是与root相同的元素，则弹出一个ruby层级，并跳到标记为基本模式后递增的步骤。
结束：返回base text segments和annotation segments。ruby元素的任何内容如果没有被这两个列表中的段描述，则隐含在被忽略的段中。

当上述步骤提到设置当前基本文本时，意味着在算法中的那个点上执行以下步骤：

让annotation range是一个DOM范围，其开始是边界点（current parent，start index），其结束是边界点（current parent，index）。
让base text segments是一个由范围annotation range描述的基本文本段。
将base text segments添加到base text segments中。
让current base text为base text segments。
让start index为null。

当上述步骤提到推送一个ruby层级时，意味着在算法中的那个点上执行以下步骤：

让current parent为current parent中的第index个节点。
让index为0。
将saved start index设置为start index的值。
让start index为null。

当上述步骤提到弹出一个ruby层级时，意味着在算法中的那个点上执行以下步骤：

让index为current parent在root中的位置。
让current parent为root。
将index增加1。
将start index设置为saved start index的值。
让saved start index为null。

当上述步骤提到推送一个ruby注释时，意味着在算法中的那个点上执行以下步骤：

让rt是rt元素，它是current parent的第index个节点。
让annotation range是一个DOM范围，其开始是边界点（current parent，index），其结束是边界点（current parent，index加一）（即，仅包含rt）。
让new annotation segment是一个由范围annotation range描述的注释段。
如果current base text不为null，将new annotation segment与current base text关联。
将new annotation segment添加到annotation segments中。

在这个例子中，日文文本漢字中的每个汉字都用平假名注释其读音。

...
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
...

这可能会被渲染为：

The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it.

在这个示例中，繁体中文文本中的每个汉字都标注了其注音符号读音。

<ruby>漢<rt>ㄏㄢˋ</rt>字<rt>ㄗˋ</rt></ruby>

这可能会渲染成：

The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it.

在这个例子中，每个简体中文文本汉字中的汉字都附有它的拼音注音。

...<ruby>汉<rt>hàn</rt>字<rt>zì</rt></ruby>...

这可能会渲染成：

The two main ideographs, each with its pinyin annotation rendered in a smaller font above it.

在这个更复杂的示例中，缩写“HTML”有四个注解：一个用于整个缩写，简要描述它是什么，一个用于字母“HT”，将其扩展为“Hypertext”，一个用于字母“M”，将其扩展为“Markup”，以及一个用于字母“L”，将其扩展为“Language”。

<ruby>
 <ruby>HT<rt>Hypertext</rt>M<rt>Markup</rt>L<rt>Language</rt></ruby>
 <rt>An abstract language for describing documents and applications
</ruby>

4.5.11 `rt` 元素

Element/rt

在所有当前引擎中都支持。

Firefox38+Safari5+Chrome5+

Opera?Edge79+

Edge (旧版)?Internet Explorer5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别:: 无。
该元素可以使用的上下文:: 作为 ruby 元素的子元素。
内容模型:: 短语内容。
在 text/html 中的标签省略:: rt 元素的结束标签可以省略，如果该 rt 元素后面紧跟着一个 rt 或 rp 元素，或者如果父元素中没有更多内容。
内容属性:: 全局属性
无障碍考虑:: 给作者的建议。; 给实现者的建议。
DOM 接口:: 使用 HTMLElement。

rt 元素标记了 ruby 注释的 ruby 文本组件。当它是 ruby 元素的子元素时，它本身并不代表任何东西，但 ruby 元素使用它作为确定它代表什么的一部分。

一个不属于 ruby 元素的 rt 元素代表与它的子元素相同的东西。

4.5.12 `rp` 元素

Element/rp

Support in all current engines.

Firefox38+Safari5+Chrome5+

Opera?Edge79+

Edge (旧版)?Internet Explorer5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别:: 无。
可以使用该元素的上下文:: 作为 ruby 元素的子元素，紧接在 rt 元素之前或之后。
内容模型:: 文本。
在 text/html 中的标签省略:: rp 元素的结束标签可以省略，如果该 rp 元素后面紧跟着一个 rt 元素或另一个 rp 元素，或者父元素中没有更多内容。
内容属性:: 全局属性
可访问性考虑:: 给作者的建议。; 给实施者的建议。
DOM 接口:: 使用 HTMLElement。

rp 元素可用于为 ruby 注释的 ruby 文本组件提供括号或其他内容，以供不支持 ruby 注释的用户代理显示。

作为ruby元素的子元素的rp元素不表示任何内容。其父元素不是ruby元素的rp元素表示其子元素。

上面的示例中，文本漢字中的每个汉字都附有其语音读音，可以扩展为使用 rp，这样在旧版用户代理中，读音将被放在括号中：

...
<ruby>漢<rp>（</rp><rt>かん</rt><rp>）</rp>字<rp>（</rp><rt>じ</rt><rp>）</rp></ruby>
...

在符合标准的用户代理中，渲染效果如上所示，但在不支持 ruby 的用户代理中，渲染效果将是：

... 漢（かん）字（じ）...

当一个片段有多个注释时，rp 元素也可以放置在注释之间。这里是另一个之前的虚构示例，展示了一些符号，名称以英语和法语给出，但这次也使用了 rp 元素：

<ruby>
♥<rp>: </rp><rt>Heart</rt><rp>, </rp><rt lang=fr>Cœur</rt><rp>.</rp>
☘<rp>: </rp><rt>Shamrock</rt><rp>, </rp><rt lang=fr>Trèfle</rt><rp>.</rp>
✶<rp>: </rp><rt>Star</rt><rp>, </rp><rt lang=fr>Étoile</rt><rp>.</rp>
</ruby>

这将使示例在不支持 ruby 的用户代理中呈现如下：

♥: Heart, Cœur. ☘: Shamrock, Trèfle. ✶: Star, Étoile.

4.5.13 `data` 元素

Element/data

支持所有当前的浏览器。

Firefox22+Safari10+Chrome62+

Opera?Edge79+

Edge (旧版)18Internet Explorer无

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLDataElement

支持所有当前的浏览器。

Firefox22+Safari10+Chrome62+

Opera?Edge79+

Edge (旧版)14+Internet Explorer无

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

在期望出现短语内容的地方。

在 text/html 中的标签省略:

没有标签是可省略的。

value — 机器可读的值

[Exposed=Window]
interface HTMLDataElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString value;
};

data 元素表示其内容，并在 value 属性中提供这些内容的机器可读形式。

value 属性必须存在。其值必须是元素内容的机器可读格式的表示。

当值与日期或时间相关时，可以使用更具体的 time 元素。

该元素可以用于多种目的。

与本规范中定义的微格式或微数据属性结合使用时，该元素可以为数据处理器提供机器可读的值，并为网页浏览器呈现提供人类可读的值。在这种情况下，value 属性中使用的格式由所使用的微格式或微数据词汇决定。

然而，该元素也可以与页面中的脚本一起使用，当脚本需要存储与人类可读值并存的字面值时。在这种情况下，所使用的格式仅取决于脚本的需要。（data-* 属性在这种情况下也可能有用。）

HTMLDataElement/value

支持所有当前浏览器。

Firefox22+Safari10+Chrome62+

Opera?Edge79+

Edge (旧版)14+Internet Explorer不支持

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

value IDL 属性必须反映同名的内容属性。

在这里，一个简短的表格使用了 data 元素对其数字值进行编码，以便表格排序的 JavaScript 库可以在每列上提供排序机制，尽管这些数字在一列中以文本形式呈现，而在另一列中以分解形式呈现。

<script src="sortable.js"></script>
<table class="sortable">
 <thead> <tr> <th> Game <th> Corporations <th> Map Size
 <tbody>
  <tr> <td> 1830 <td> <data value="8">Eight</data> <td> <data value="93">19+74 hexes (93 total)</data>
  <tr> <td> 1856 <td> <data value="11">Eleven</data> <td> <data value="99">12+87 hexes (99 total)</data>
  <tr> <td> 1870 <td> <data value="10">Ten</data> <td> <data value="149">4+145 hexes (149 total)</data>
</table>

4.5.14 `time` 元素

元素/time

所有当前引擎的支持。

Firefox22+Safari7+Chrome62+

Opera49+Edge79+

Edge (旧版)18Internet Explorer无

Firefox Android?Safari iOS4+Chrome Android?WebView Android?Samsung Internet?Opera Android46+

HTMLTimeElement

所有当前引擎的支持。

Firefox22+Safari10+Chrome62+

Opera49+Edge79+

Edge (旧版)14+Internet Explorer无

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android46+

在期望有短语内容的地方。

如果元素有一个 datetime 属性: 短语内容.

否则: 文本，但必须符合下面文本中的要求。

在 text/html 中的标签省略:

没有标签是可以省略的。

内容属性:

全局属性

datetime — 机器可读值

可访问性考虑:

作者。

实现者。

DOM 接口:

[Exposed=Window]
interface HTMLTimeElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString dateTime;
};

time 元素表示它的内容，以及这些内容的机器可读形式，存储在 datetime 属性中。内容的类型限制为各种日期、时间、时区偏移和持续时间，如下所述。

datetime 属性可能存在。如果存在，其值必须是元素内容的机器可读格式。

一个没有 datetime 内容属性的 time 元素不得有任何元素子孙。

datetime 值的 time 元素是元素的 datetime 内容属性的值，如果有的话，否则是子文本内容的值。

datetime 值的 time 元素必须符合以下之一的语法。

一个有效的月份字符串

<time>2011-11</time>

一个有效的日期字符串

<time>2011-11-18</time>

一个有效的无年份日期字符串

<time>11-18</time>

一个有效的时间字符串

<time>14:54</time>

<time>14:54:39</time>

<time>14:54:39.929</time>

一个有效的本地日期和时间字符串

<time>2011-11-18T14:54</time>

<time>2011-11-18T14:54:39</time>

<time>2011-11-18T14:54:39.929</time>

<time>2011-11-18 14:54</time>

<time>2011-11-18 14:54:39</time>

<time>2011-11-18 14:54:39.929</time>

没有时区偏移的带日期时间字符串对于指定在一天内各时区中相同具体时间发生的事件是有用的。例如，2020年新年是在2020-01-01 00:00在每个时区庆祝，而不是在所有时区的同一精确时刻庆祝。对于在所有时区同时发生的事件，例如视频会议，一个有效的全球日期和时间字符串可能更有用。

一个有效的时区偏移字符串

<time>Z</time>

<time>+0000</time>

<time>+00:00</time>

<time>-0800</time>

<time>-08:00</time>

对于没有日期的时间（或指代在多个日期重复的事件的时间），指定控制时间的地理位置通常比指定时区偏移更有用，因为地理位置会随夏令时改变时区偏移。在某些情况下，地理位置甚至会改变时区，例如在2011年底萨摩亚发生的时区调整。存在一个描述时区边界及每个时区内适用规则的数据库，称为时区数据库。[TZDATABASE]

一个有效的全球日期和时间字符串

<time>2011-11-18T14:54Z</time>

<time>2011-11-18T14:54:39Z</time>

<time>2011-11-18T14:54:39.929Z</time>

<time>2011-11-18T14:54+0000</time>

<time>2011-11-18T14:54:39+0000</time>

<time>2011-11-18T14:54:39.929+0000</time>

<time>2011-11-18T14:54+00:00</time>

<time>2011-11-18T14:54:39+00:00</time>

<time>2011-11-18T14:54:39.929+00:00</time>

<time>2011-11-18T06:54-0800</time>

<time>2011-11-18T06:54:39-0800</time>

<time>2011-11-18T06:54:39.929-0800</time>

<time>2011-11-18T06:54-08:00</time>

<time>2011-11-18T06:54:39-08:00</time>

<time>2011-11-18T06:54:39.929-08:00</time>

<time>2011-11-18 14:54Z</time>

<time>2011-11-18 14:54:39Z</time>

<time>2011-11-18 14:54:39.929Z</time>

<time>2011-11-18 14:54+0000</time>

<time>2011-11-18 14:54:39+0000</time>

<time>2011-11-18 14:54:39.929+0000</time>

<time>2011-11-18 14:54+00:00</time>

<time>2011-11-18 14:54:39+00:00</time>

<time>2011-11-18 14:54:39.929+00:00</time>

<time>2011-11-18 06:54-0800</time>

<time>2011-11-18 06:54:39-0800</time>

<time>2011-11-18 06:54:39.929-0800</time>

<time>2011-11-18 06:54-08:00</time>

<time>2011-11-18 06:54:39-08:00</time>

<time>2011-11-18 06:54:39.929-08:00</time>

带日期和时区偏移的时间字符串对于指定特定事件或不固定在特定地理位置的虚拟活动是有用的。例如，小行星撞击的确切时间，或者在每天1400 UTC举行的一系列会议中的某次会议，无论世界上的任何特定部分是否遵守夏令时。对于时间随特定地理位置的本地时区偏移而变化的事件，结合该地理位置的有效的本地日期和时间字符串可能更有用。

一个有效的周字符串

<time>2011-W47</time>

四个或更多ASCII数字，其中至少有一个不是U+0030数字零（0）

<time>2011</time>

<time>0001</time>

一个有效的持续时间字符串

<time>PT4H18M3S</time>

<time>4h18m 3s</time>

元素内容的机器可读等效必须通过以下算法从元素的 datetime 值获取：

如果从元素的 datetime 值解析一个月份字符串返回一个月份，那就是机器可读的等效；返回。
如果从元素的 datetime 值解析一个日期字符串返回一个日期，那就是机器可读的等效；返回。
如果从元素的 datetime 值解析一个无年份日期字符串返回一个无年份日期，那就是机器可读的等效；返回。
如果从元素的 datetime 值解析一个时间字符串返回一个时间，那就是机器可读的等效；返回。
如果从元素的 datetime 值解析一个本地日期和时间字符串返回一个本地日期和时间，那就是机器可读的等效；返回。
如果从元素的 datetime 值解析一个时区偏移字符串返回一个时区偏移，那就是机器可读的等效；返回。
如果从元素的 datetime 值解析一个全球日期和时间字符串返回一个全球日期和时间，那就是机器可读的等效；返回。
如果从元素的 datetime 值解析一个周字符串返回一个周，那就是机器可读的等效；返回。
如果元素的 datetime 值仅由 ASCII 数字组成，其中至少一个不是 U+0030 DIGIT ZERO (0)，那么机器可读的等效是这些数字的十进制解释，代表一个年份；返回。
如果从元素的 datetime 值解析一个持续时间字符串返回一个持续时间，那就是机器可读的等效；返回。
没有机器可读的等效。

上述提到的算法旨在设计成对于任何任意字符串 s，只有一个算法会返回一个值。更高效的方法可能是创建一个算法，能够在一次操作中解析所有这些数据类型；开发这样的算法留给读者作为练习。

HTMLTimeElement/dateTime

在所有当前引擎中都受支持。

Firefox22+Safari10+Chrome62+

Opera49+Edge79+

Edge（旧版）14+Internet Explorer不支持

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android46+

dateTime IDL 属性必须反映元素的 datetime 内容属性。

time 元素可以用于编码日期，例如在微格式中。以下展示了使用 time 元素的 hCalendar 变体来编码事件的一个假设方式：

<div class="vevent">
 <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
 <span class="summary">Web 2.0 Conference</span>:
 <time class="dtstart" datetime="2005-10-05">October 5</time> -
 <time class="dtend" datetime="2005-10-07">7</time>,
 at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>

在这里，使用了基于 Atom 词汇的虚构微数据词汇与 time 元素来标记博客文章的发布日期。

<article itemscope itemtype="https://n.example.org/rfc4287">
 <h1 itemprop="title">Big tasks</h1>
 <footer>Published <time itemprop="published" datetime="2009-08-29">two days ago</time>.</footer>
 <p itemprop="content">Today, I went out and bought a bike for my kid.</p>
</article>

在这个例子中，使用 time 元素标记了另一篇文章的发布日期，这里使用了 schema.org 微数据词汇：

<article itemscope itemtype="http://schema.org/BlogPosting">
 <h1 itemprop="headline">Small tasks</h1>
 <footer>Published <time itemprop="datePublished" datetime="2009-08-30">yesterday</time>.</footer>
 <p itemprop="articleBody">I put a bike bell on her bike.</p>
</article>

在以下代码片段中，使用 time 元素以 ISO8601 格式编码一个日期，以便后续由脚本处理：

<p>Our first date was <time datetime="2006-09-23">a Saturday</time>.</p>

在第二个代码片段中，值包含一个时间：

<p>We stopped talking at <time datetime="2006-09-24T05:00-07:00">5am the next morning</time>.</p>

由页面加载的脚本（因此可以了解页面内部使用 time 元素标记日期和时间的约定）可以扫描整个页面，并查看其中所有的 time 元素，以创建一个日期和时间的索引。

例如，这个元素传达了字符串 "Friday" 以及附加的语义，表示 2011 年 11 月 18 日是与 "Friday" 相对应的日期：

Today is <time datetime="2011-11-18">Friday</time>.

在这个示例中，指定了太平洋标准时间（PST）时区的特定时间：

Your next meeting is at <time datetime="2011-11-18T15:00-08:00">3pm</time>.

4.5.15 `code` 元素

Element/code

所有当前引擎都支持。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别:: 流内容.; 短语内容.; 可感知内容.
此元素可以使用的上下文:: 在期望有短语内容的地方。
内容模型:: 短语内容.
在 text/html 中的标签省略:: 没有标签可以省略。
内容属性:: 全局属性
无障碍考虑:: 针对作者.; 针对实现者.
DOM 接口:: 使用 HTMLElement.

code 元素表示计算机代码的片段。这可以是一个 XML 元素名称、一个文件名、一段计算机程序，或任何计算机能够识别的字符串。

没有正式的方法来指示标记的计算机代码的语言。希望标记 code 元素并标明所用语言的作者，例如，以便语法高亮脚本可以使用正确的规则，可以使用 class 属性，例如，通过向元素添加以 "language-" 为前缀的类。

以下示例展示了如何在段落中使用该元素来标记元素名称和计算机代码，包括标点符号。

<p>The <code>code</code> element represents a fragment of computer
code.</p>

<p>When you call the <code>activate()</code> method on the
<code>robotSnowman</code> object, the eyes glow.</p>

<p>The example below uses the <code>begin</code> keyword to indicate
the start of a statement block. It is paired with an <code>end</code>
keyword, which is followed by the <code>.</code> punctuation character
(full stop) to indicate the end of the program.</p>

以下示例展示了如何使用 pre 和 code 元素标记一段代码。

<pre><code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code></pre>

在该示例中使用了一个类来指示所用的语言。

有关更多详细信息，请参见 pre 元素。

4.5.16 `var` 元素

Element/var

所有当前引擎都支持。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别:: 流内容.; 短语内容.; 可触及内容.
该元素可以使用的上下文:: 在期望出现短语内容的地方。
内容模型:: 短语内容.
在 text/html 中的标签省略:: 没有标签可以省略。
内容属性:: 全局属性
无障碍考虑:: 对于作者.; 对于实现者.
DOM 接口:: 使用 HTMLElement.

var 元素表示一个变量。这可以是数学表达式或编程上下文中的实际变量、一个表示常量的标识符、一个识别物理量的符号、一个函数参数，或仅仅是用作文中占位符的术语。

在下面的段落中，字母 "n" 被用作文中的变量：

<p>If there are <var>n</var> pipes leading to the ice
cream factory then I expect at <em>least</em> <var>n</var>
flavors of ice cream to be available for purchase!</p>

对于数学，特别是对于超出最简单表达式的情况，MathML 更为合适。然而，var 元素仍然可以用来引用在 MathML 表达式中提到的特定变量。

在这个示例中，展示了一个方程，图例中引用了方程中的变量。表达式本身使用 MathML 标记，但变量在图例中使用 var 提及。

<figure>
 <math>
  <mi>a</mi>
  <mo>=</mo>
  <msqrt>
   <msup><mi>b</mi><mn>2</mn></msup>
   <mi>+</mi>
   <msup><mi>c</mi><mn>2</mn></msup>
  </msqrt>
 </math>
 <figcaption>
  Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of
  a triangle with sides <var>b</var> and <var>c</var>
 </figcaption>
</figure>

在这里，描述质量-能量等价的方程被用在句子中，var 元素被用来标记该方程中的变量和常量：

<p>Then she turned to the blackboard and picked up the chalk. After a few moment's
thought, she wrote <var>E</var> = <var>m</var> <var>c</var><sup>2</sup>. The teacher
looked pleased.</p>

4.5.17 `samp` 元素

Element/samp

所有当前引擎都支持。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别:: 流内容.; 短语内容.; 可触及内容.
该元素可以使用的上下文:: 在期望出现短语内容的地方。
内容模型:: 短语内容.
在 text/html 中的标签省略:: 没有标签可以省略。
内容属性:: 全局属性
无障碍考虑:: 对于作者.; 对于实现者.
DOM 接口:: 使用 HTMLElement.

samp 元素表示从另一个程序或计算系统中获取的示例或引用输出。

请参阅 pre 和 kbd 元素以获取更多详细信息。

该元素可以与 output 元素进行对比，后者可用于提供 Web 应用程序中的即时输出。

此示例显示了 samp 元素的内联用法：

<p>The computer said <samp>Too much cheese in tray
two</samp> but I didn't know what that meant.</p>

第二个示例展示了来自控制台程序的示例输出块。嵌套的 samp 和 kbd 元素允许使用样式表对示例输出的特定元素进行样式设置。还有一些 samp 元素使用更详细的标记进行注释，以实现非常精确的样式设置。为此，使用了 span 元素。

<pre><samp><span class="prompt">jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown

<span class="prompt">jdoe@demo:~$</span> <span class="cursor">_</span></samp></pre>

第三个示例展示了一个输入块及其相应的输出。该示例使用了 code 和 samp 元素。

<pre>
<code class="language-javascript">console.log(2.3 + 2.4)</code>
<samp>4.699999999999999</samp>
</pre>

4.5.18 `kbd` 元素

Element/kbd

支持所有当前引擎。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别:: 流内容.; 短语内容.; 可触及内容.
可以使用此元素的上下文:: 在期望有短语内容的地方。
内容模型:: 短语内容.
在 text/html 中的标签省略:: 两个标签都不可省略。
内容属性:: 全局属性
无障碍考虑:: 给作者的建议.; 给实施者的建议.
DOM 接口:: 使用 HTMLElement.

kbd 元素表示用户输入（通常是键盘输入，但也可以用来表示其他输入，例如语音命令）。

当 kbd 元素嵌套在 samp 元素内时，它表示系统回显的输入。

当 kbd 元素包含一个 samp 元素时，它表示基于系统输出的输入，例如调用菜单项。

当 kbd 元素嵌套在另一个 kbd 元素内时，它表示一个实际的键或其他单一输入单元，具体取决于输入机制。

这里使用了 kbd 元素来指示需要按的键：

<p>To make George eat an apple, press <kbd><kbd>Shift</kbd> + <kbd>F3</kbd></kbd></p>

在第二个示例中，用户被指示选择特定的菜单项。外部的 kbd 元素标记了一块输入区域，内部的 kbd 元素表示每个单独的输入步骤，而其中的 samp 元素则指示这些步骤是基于系统显示的内容进行输入的，在这个例子中是菜单标签：

<p>To make George eat an apple, select
<kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd>
</p>

这种精确度并不是必要的；以下示例也同样合适：

<p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p>

4.5.19 `sub` 和 `sup` 元素

元素/sub

所有当前浏览器均支持。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

元素/sup

所有当前浏览器均支持。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

分类:: 流内容。; 短语内容。; 可触及内容。
可以使用此元素的上下文:: 在期望短语内容的地方。
内容模型:: 短语内容。
在 text/html 中的标签省略:: 两个标签都不可省略。
内容属性:: 全局属性
无障碍考虑:: sub 元素: 给作者；给实施者。; sup 元素: 给作者；给实施者。
DOM 接口:: 使用 HTMLElement。

sup 元素表示上标，而 sub 元素表示下标。

这些元素只能用于标记具有特定含义的排版约定，而不是为了排版效果而使用。例如，将 sub 和 sup 元素用于 LaTeX 文档准备系统的名称是不适当的。一般来说，作者应仅在缺少这些元素会改变内容的含义时使用这些元素。

在某些语言中，上标是某些缩写的排版约定的一部分。

<p>Their names are
<span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span> and
<span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>.</p>

sub 元素可以在 var 元素内使用，用于表示具有下标的变量。

在这里，sub 元素用于表示识别变量族中的变量的下标：

<p>The coordinate of the <var>i</var>th point is
(<var>x<sub><var>i</var></sub></var>, <var>y<sub><var>i</var></sub></var>).
For example, the 10th point has coordinate
(<var>x<sub>10</sub></var>, <var>y<sub>10</sub></var>).</p>

数学表达式经常使用下标和上标。建议作者使用 MathML 来标记数学内容，但如果不需要详细的数学标记，作者可以选择使用 sub 和 sup。[MATHML]

<var>E</var>=<var>m</var><var>c</var><sup>2</sup>

f(<var>x</var>, <var>n</var>) = log<sub>4</sub><var>x</var><sup><var>n</var></sup>

4.5.20 `i` 元素

元素/i

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（遗留版）12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别:: 流内容.; 短语内容.; 可感知内容.
此元素可以使用的上下文:: 期望出现的短语内容。
内容模型:: 短语内容.
在 text/html 中的标签省略:: 标签不可省略。
内容属性:: 全局属性
无障碍考虑:: 面向作者.; 面向实现者.
DOM 接口:: 使用 HTMLElement。

i 元素表示一段以另一种语气或情感的文本，或者以其他方式与正常的正文区分开来，表示一种不同的文本特质，如分类名称、术语、另一种语言的习惯用语、音译、思考或西方文本中的船名。

与主要文本不同的语言中的术语应使用 lang 属性（或在 XML 中，lang 属性在 XML 命名空间）进行注解。

下面的示例展示了 i 元素的用法：

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
<p>The term <i>prose content</i> is defined above.</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

在以下示例中，梦境序列使用了 i 元素进行标记。

<p>Raymond tried to sleep.</p>
<p><i>The ship sailed away on Thursday</i>, he
dreamt. <i>The ship had many people aboard, including a beautiful
princess called Carey. He watched her, day-in, day-out, hoping she
would notice him, but she never did.</i></p>
<p><i>Finally one night he picked up the courage to speak with
her—</i></p>
<p>Raymond woke with a start as the fire alarm rang out.</p>

作者可以在 i 元素上使用 class 属性来标识使用该元素的原因，以便在将来需要更改特定用途的样式（例如，梦境序列与分类术语）时，作者不必逐一浏览整个文档（或一系列相关文档）来标注每个用途。

鼓励作者考虑是否有其他元素可能比 i 元素更适用，例如 em 元素用于标记强调，或者 dfn 元素用于标记术语的定义实例。

样式表可以用于格式化 i 元素，就像任何其他元素一样。因此，i 元素中的内容不一定会被斜体显示。

4.5.21 `b` 元素

Element/b

所有当前浏览器均支持。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

分类:: 流内容.; 短语内容.; 可感知内容.
可以使用此元素的上下文:: 在期望出现短语内容的地方。
内容模型:: 短语内容.
在 text/html 中的标签省略:: 没有标签可以省略。
内容属性:: 全局属性
无障碍考虑:: 供作者参考.; 供实施者参考.
DOM 接口:: 使用 HTMLElement.

b 元素表示一段文本，该文本被用来吸引注意，但不传达额外的重要性，也没有暗示其他的声音或情绪，例如文档摘要中的关键字、评论中的产品名称、交互式文本驱动软件中的操作词，或文章的引言。

以下示例展示了如何使用 b 元素来突出显示关键字，而不将其标记为重要：

<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>

在以下示例中，文本冒险中的对象通过使用 b 元素来突出显示其特殊性。

<p>You enter a small room. Your <b>sword</b> glows
brighter. A <b>rat</b> scurries past the corner wall.</p>

另一个b元素合适的情况是标记引言句（或引言段）。以下示例展示了如何标记一篇关于小猫领养一只兔子的BBC文章：

<article>
 <h2>Kittens 'adopted' by pet rabbit</h2>
 <p><b class="lede">Six abandoned kittens have found an
 unexpected new mother figure — a pet rabbit.</b></p>
 <p>Veterinary nurse Melanie Humble took the three-week-old
 kittens to her Aberdeen home.</p>
[...]

与<i>元素一样，作者可以在<b>元素上使用class属性，以便标识该元素的使用原因，以便如果某个特定用途的样式在以后需要更改，作者不必逐一标注每个用途。

<b>元素应作为最后的选择使用，当没有其他更合适的元素时。特别是，标题应使用<h1>到<h6>元素，强调应使用<em>元素，重要性应使用<strong>元素，标记或高亮的文本应使用<mark>元素。

以下是不正确的用法：

<p><b>WARNING!</b> Do not frob the barbinator!</p>

在之前的例子中，正确的元素应该是strong，而不是b。

样式表可以用于格式化 b 元素，就像可以重新样式化任何其他元素一样。因此，b 元素中的内容不一定会被加粗。

4.5.22 `u` 元素

Element/u

在所有当前引擎中都支持。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge（遗留版）12+Internet Explorer是

Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别：: 流内容。; 措辞内容。; 可触及内容。
此元素可用的上下文：: 在期望措辞内容的地方。
内容模型：: 措辞内容。
文本/html 中的标签省略：: 两个标签都不可省略。
内容属性：: 全局属性
无障碍考虑：: 供作者参考。; 供实施者参考。
DOM 接口：: 使用 HTMLElement。

u 元素表示一段文本，该文本具有未明确表达但显式呈现的非文本注释，例如在中文文本中标记该文本为专有名称（中文专有名称标记），或标记该文本为拼写错误。

在大多数情况下，另一个元素可能更合适：用于标记强调的，应该使用 em 元素；用于标记关键词或短语，根据上下文应使用 b 元素或 mark 元素；用于标记书名，应该使用 cite 元素；用于带有明确文本注释的标记，应该使用 ruby 元素；用于技术术语、分类名称、音译、思想，或在西方文本中标记船名，应该使用 i 元素。

在视觉呈现中，u 元素的默认渲染与超链接（下划线）的传统渲染相冲突。建议作者避免在可能与超链接混淆的情况下使用 u 元素。

在这个示例中，使用了 u 元素来标记一个拼写错误的词：

<p>The <u>see</u> is full of fish.</p>

4.5.23 `mark` 元素

Element/mark

在所有当前引擎中都支持。

Firefox4+Safari5.1+Chrome7+

Opera11+Edge79+

Edge（遗留版）12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别：: 流内容。; 措辞内容。; 可触及内容。
此元素可用的上下文：: 在期望措辞内容的地方。
内容模型：: 措辞内容。
文本/html 中的标签省略：: 两个标签都不可省略。
内容属性：: 全局属性
无障碍考虑：: 供作者参考。; 供实施者参考。
DOM 接口：: 使用 HTMLElement。

mark 元素表示文档中一段被标记或高亮的文本，用于参考目的，因为它在另一上下文中的相关性。当在引文或从散文中引用的其他文本块中使用时，它表示一个原本不存在但已添加的高亮，以引起读者对文本中一部分的注意，这部分可能在原作者写作时未被认为重要，但现在正受到意料之外的关注。当在文档的主要散文中使用时，它表示文档中的一部分由于其对用户当前活动的相关性而被高亮。

这个示例展示了如何使用 mark 元素来引起对引文中特定部分的注意：

<p lang="en-US">Consider the following quote:</p>
<blockquote lang="en-GB">
 <p>Look around and you will find, no-one's really
 <mark>colour</mark> blind.</p>
</blockquote>
<p lang="en-US">As we can tell from the <em>spelling</em> of the word,
the person writing this quote is clearly not American.</p>

（然而，如果目标是标记该元素为拼写错误，使用 u 元素，可能带有一个类，将更为合适。）

另一个 mark 元素的示例是高亮显示匹配某些搜索字符串的文档部分。如果有人查看文档，而服务器知道用户正在搜索“kitten”这个词，则服务器可能会返回一个修改过的文档，其中一个段落如下所示：

<p>I also have some <mark>kitten</mark>s who are visiting me
these days. They're really cute. I think they like my garden! Maybe I
should adopt a <mark>kitten</mark>.</p>

在以下片段中，文本段落提到了代码片段的特定部分。

<p>The highlighted part below is where the error lies:</p>
<pre><code>var i: Integer;
begin
   i := <mark>1.1</mark>;
end.</code></pre>

这与 语法高亮 是不同的，语法高亮更适合使用 span 元素。将两者结合，可以得到：

<p>The highlighted part below is where the error lies:</p>
<pre><code><span class=keyword>var</span> <span class=ident>i</span>: <span class=type>Integer</span>;
<span class=keyword>begin</span>
   <span class=ident>i</span> := <span class=literal><mark>1.1</mark></span>;
<span class=keyword>end</span>.</code></pre>

这是另一个示例，展示了如何使用 mark 来高亮显示原本未被强调的引用文本的一部分。在这个示例中，常见的排版惯例使得作者将引号中的 mark 元素明确地设置为斜体。

<style>
 blockquote mark, q mark {
   font: inherit; font-style: italic;
   text-decoration: none;
   background: transparent; color: inherit;
 }
 .bubble em {
   font: inherit; font-size: larger;
   text-decoration: underline;
 }
</style>
<article>
 <h1>She knew</h1>
 <p>Did you notice the subtle joke in the joke on panel 4?</p>
 <blockquote>
  <p class="bubble">I didn't <em>want</em> to believe. <mark>Of course
  on some level I realized it was a known-plaintext attack.</mark> But I
  couldn't admit it until I saw for myself.</p>
 </blockquote>
 <p>(Emphasis mine.) I thought that was great. It's so pedantic, yet it
 explains everything neatly.</p>
</article>

顺便提一下，注意这个示例中 em 元素和 mark 元素之间的区别。em 元素是原始引用文本的一部分，而 mark 元素则用于高亮显示评论的部分。

以下示例展示了标记文本片段的 重要性（strong）与标记文本片段的 相关性（mark）之间的区别。这是一本教科书的摘录，其中突出显示了与考试相关的部分。尽管安全警告可能很重要，但显然与考试无关。

<h3>Wormhole Physics Introduction</h3>

<p><mark>A wormhole in normal conditions can be held open for a
maximum of just under 39 minutes.</mark> Conditions that can increase
the time include a powerful energy source coupled to one or both of
the gates connecting the wormhole, and a large gravity well (such as a
black hole).</p>

<p><mark>Momentum is preserved across the wormhole. Electromagnetic
radiation can travel in both directions through a wormhole,
but matter cannot.</mark></p>

<p>When a wormhole is created, a vortex normally forms.
<strong>Warning: The vortex caused by the wormhole opening will
annihilate anything in its path.</strong> Vortexes can be avoided when
using sufficiently advanced dialing technology.</p>

<p><mark>An obstruction in a gate will prevent it from accepting a
wormhole connection.</mark></p>

4.5.24 `bdi` 元素

Element/bdi

支持所有当前的浏览器。

Firefox10+Safari6+Chrome16+

Opera?Edge79+

Edge (旧版)?Internet Explorer不支持

Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android?

类别:: 流内容.; 短语内容.; 可感知内容.
此元素可以使用的上下文:: 在期望有短语内容的地方。
内容模型:: 短语内容.
在 text/html 中的标签省略:: 没有标签可以省略。
内容属性:: 全局属性; 此外，dir 全局属性在此元素上具有特殊语义。
可访问性考虑:: 针对作者.; 针对实现者.
DOM 接口:: 使用HTMLElement.

bdi 元素表示一段文本，这段文本将从其周围环境中隔离开来，以便进行双向文本格式化。 [BIDI]

dir 全局属性在此元素上默认为 auto（它不会像其他元素那样从父元素继承）。

此元素具有涉及双向算法的渲染要求。

此元素在嵌入方向性未知的用户生成内容时特别有用。

在此示例中，显示了用户名以及用户提交的帖子数量。如果没有使用 bdi 元素，阿拉伯语用户的用户名将会混淆文本（双向算法会把冒号和数字“3”放在“User”一词旁边，而不是放在“posts”一词旁边）。

<ul>
 <li>User <bdi>jcranmer</bdi>: 12 posts.
 <li>User <bdi>hober</bdi>: 5 posts.
 <li>User <bdi>إيان</bdi>: 3 posts.
</ul>

如果将 `bdi` 元素替换为 `b` 元素，则用户名会混淆双向算法，第三个项目符号会显示为“User 3 :”，后面跟着阿拉伯名字（从右到左），然后是“posts”和句号。

4.5.25 `bdo` 元素

Element/bdo

在所有当前引擎中都支持。

Firefox10+Safari4+Chrome15+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别:: 流内容。; 措辞内容。; 可感知内容。
可以使用该元素的上下文:: 在需要措辞内容的地方。
内容模型:: 措辞内容。
在 text/html 中的标签省略:: 没有标签可以省略。
内容属性:: 全局属性; 此外，dir全局属性在该元素上具有特殊语义。
无障碍考虑:: 对于作者。; 对于实施者。
DOM 接口:: 使用 HTMLElement。

bdo 元素表示对其子元素的显式文本方向格式控制。它允许作者通过显式指定方向覆盖来覆盖 Unicode 双向算法。[BIDI]

作者必须在该元素上指定 dir 属性，值为 ltr 以指定从左到右的覆盖，值为 rtl 以指定从右到左的覆盖。auto 值不得指定。

该元素具有涉及双向算法的渲染要求。

4.5.26 `span` 元素

元素/span

在所有当前浏览器中均支持。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLSpanElement

在所有当前浏览器中均支持。

Firefox1+Safari6+Chrome15+

Opera?Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

流内容。

在需要措辞内容的地方。

在 text/html 中的标签省略:

没有标签可以省略。

[Exposed=Window]
interface HTMLSpanElement : HTMLElement {
  [HTMLConstructor] constructor();
};

span 元素本身没有特定含义，但与全局属性（例如 class、lang 或 dir）一起使用时非常有用。它表示其子元素。

在这个示例中，代码片段使用了 span 元素和 class 属性进行标记，以便通过 CSS 对其关键字和标识符进行颜色编码：

<pre><code class="lang-c"><span class="keyword">for</span> (<span class="ident">j</span> = 0; <span class="ident">j</span> &lt; 256; <span class="ident">j</span>++) {
  <span class="ident">i_t3</span> = (<span class="ident">i_t3</span> & 0x1ffff) | (<span class="ident">j</span> &lt;&lt; 17);
  <span class="ident">i_t6</span> = (((((((<span class="ident">i_t3</span> >> 3) ^ <span class="ident">i_t3</span>) >> 1) ^ <span class="ident">i_t3</span>) >> 8) ^ <span class="ident">i_t3</span>) >> 5) & 0xff;
  <span class="keyword">if</span> (<span class="ident">i_t6</span> == <span class="ident">i_t1</span>)
    <span class="keyword">break</span>;
}</code></pre>

4.5.27 `br` 元素

Element/br

所有当前引擎的支持。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLBRElement

所有当前引擎的支持。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

在需要措辞内容的地方。

无.

在 text/html 中的标签省略:

没有结束标签。

[Exposed=Window]
interface HTMLBRElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

br 元素表示一个换行符。

虽然换行符在视觉媒体中通常通过将后续文本物理移动到新行来表示，但样式表或用户代理同样可以将换行符以其他方式呈现，例如作为绿色点或额外的间距。

br 元素只能用于实际作为内容一部分的换行符，例如在诗歌或地址中。

以下示例是正确使用 br 元素：

<p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p>

br 元素不得用于分隔段落中的主题组。

以下示例是不符合规范的，因为它们滥用了 br 元素：

<p><a ...>34 comments.</a><br>
<a ...>Add a comment.</a></p>

<p><label>Name: <input name="name"></label><br>
<label>Address: <input name="address"></label></p>

以下是上述情况的替代方案，这些方案是正确的：

<p><a ...>34 comments.</a></p>
<p><a ...>Add a comment.</a></p>

<p><label>Name: <input name="name"></label></p>
<p><label>Address: <input name="address"></label></p>

如果一个段落仅包含一个br元素，它代表一个占位的空白行（例如在模板中）。这样的空白行不应被用于呈现目的。

任何在br元素内部的内容不应被视为周围文本的一部分。

这个元素有涉及双向算法的呈现要求。

4.5.28 `wbr` 元素

元素/wbr

支持所有当前引擎。

Firefox1+Safari4+Chrome1+

Opera11.6+Edge79+

Edge (旧版)?Internet Explorer5.5–7

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+

类别:: 流内容。; 短语内容。
该元素可以使用的上下文:: 在期望短语内容的地方。
内容模型:: 无。
在 text/html 中的标签省略:: 没有结束标签。
内容属性:: 全局属性
无障碍考虑:: 对于作者。; 对于实施者。
DOM 接口:: 使用 HTMLElement。

wbr 元素表示一种换行机会。

在以下示例中，有人引用了某句话，这句话为了效果被写成了一个长单词。然而，为了确保文本可以以可读的方式换行，这句话中的单词使用了 wbr 元素进行分隔。

<p>So then she pointed at the tiger and screamed
"there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me"!</p>

任何在wbr元素内的内容都不应被视为周围文本的一部分。

var wbr = document.createElement("wbr");
wbr.textContent = "This is wrong";
document.body.appendChild(wbr);

该元素具有涉及双向算法的渲染要求。

4.5.29 使用总结

本节为非规范性内容。

元素	用途	示例
`a`	超链接	`访问我的<a href="drinks.html">drinks</a>页面。`
`em`	强调重音	`我必须说我<em>非常喜爱</em>柠檬水。`
`strong`	重要性	`这茶<strong>非常烫</strong>。`
`small`	附带评论	`这些葡萄被酿成了酒。<small>酒精具有成瘾性。</small>`
`s`	不准确的文本	`价格：<s>£4.50</s> £2.00！`
`cite`	作品标题	`案件<cite>Hugo v. Danielle</cite>在此具有相关性。`
`q`	引用	`法官说<q>你可以喝鱼缸里的水</q>但不建议这么做。`
`dfn`	定义实例	`术语<dfn>有机食品</dfn>指不使用合成化学品生产的食品。`
`abbr`	缩写	`爱尔兰的有机食品由<abbr title="Irish Organic Farmers and Growers Association">IOFGA</abbr>认证。`
`ruby`, `rt`, `rp`	注音标注	`<ruby>OJ<rp>(<rt>橙汁</rp>)</ruby>`
`data`	机器可读的等价物	`今天起有售！<data value="UPC:022014640201">北岸有机苹果酒</data>`
`time`	日期或时间相关数据的机器可读等价物	`从<time datetime="2011-11-18">11月18日</time>开始有售！`
`code`	计算机代码	`<code>fruitdb</code>程序可用于跟踪水果生产。`
`var`	变量	`如果碗里有<var>n</var>个水果，至少<var>n</var>÷2会是熟的。`
`samp`	计算机输出	`电脑显示<samp>未知错误 -3</samp>。`
`kbd`	用户输入	`按<kbd>F1</kbd>继续。`
`sub`	下标	`水的化学式为 H<sub>2</sub>O。`
`sup`	上标	`重水中的氢通常是<sup>2</sup>H。`
`i`	替代声音	`柠檬水主要由<i>柠檬柑橘</i>组成。`
`b`	关键词	`拿一个<b>柠檬</b>并用一个<b>榨汁机</b>榨汁。`
`u`	注解	`苹果汁与<u class="spelling">接骨木花</u>汁的混合物非常宜人。`
`mark`	高亮	`接骨木花糖浆，按<mark>1 份</mark>糖浆兑 10 份水的比例调配，与其他饮品<mark>显著不同</mark>。`
`bdi`	文本方向隔离	`推荐的餐厅是<bdi lang="">My Juice Café (At The Beach)</bdi>。`
`bdo`	文本方向格式化	`提议是用反向顺序写英语。"Juice" 会变成 "<bdo dir=rtl>eciuJ</bdo>"。`
`span`	其他	`在法语中我们称它为<span lang="fr">sirop de sureau</span>。`
`br`	换行	`Simply Orange Juice Company<br>Apopka, FL 32703<br>美国`
`wbr`	换行机会	`www.simply<wbr>orange<wbr>juice.com`

4.6 链接

4.6.1 介绍

链接是一个概念性构造，通过 a、area、form 和 link 元素创建，这些元素表示两个资源之间的连接，其中一个是当前的 文档。在 HTML 中有三种类型的链接：

外部资源链接: 这些链接指向需要用来增强当前文档的资源，通常由用户代理自动处理。所有外部资源链接都具有获取和处理链接资源算法，用于描述如何获取资源。
超链接: 这些链接指向其他资源，通常由用户代理向用户公开，以便用户可以使用户代理导航到这些资源，例如访问它们或下载它们。
内部资源链接: 这些链接指向当前文档中的资源，用于赋予这些资源特殊的意义或行为。

对于具有 link 元素、href 属性和 rel 属性的链接，必须为 rel 属性的关键字创建链接，这些关键字在链接类型部分中定义。

类似地，对于具有 a 和 area 元素、href 属性和 rel 属性的链接，必须为 rel 属性的关键字创建链接，这些关键字在链接类型部分中定义。然而，与 link 元素不同的是，a 和 area 元素如果具有 href 属性，但没有 rel 属性，或者其 rel 属性没有定义为指定超链接的关键字，也必须创建一个超链接。这种隐含的超链接没有特殊意义（它没有链接类型），仅仅是将元素的节点文档链接到元素的 href 属性指定的资源。

类似地，对于具有 form 元素和 rel 属性的链接，必须为 rel 属性的关键字创建链接，这些关键字在链接类型部分中定义。没有 rel 属性的 form 元素，或者其 rel 属性没有定义为指定超链接的关键字，也必须创建一个超链接。

一个超链接可以有一个或多个超链接注解，这些注解修改该超链接的处理语义。

4.6.2 由 `a` 和 `area` 元素创建的链接

href 属性在 a 和 area 元素上必须具有一个有效的 URL，可能被空格包围的值。

href 属性在 a 和 area 元素上不是必需的；当这些元素没有 href 属性时，它们不会创建超链接。

target 属性（如果存在）必须是有效的可导航目标名称或关键字。它给出了将使用的可导航目标的名称。用户代理在跟随超链接时使用此名称。

download 属性（如果存在）表示作者打算将超链接用于下载资源。该属性可以有一个值；如果有，该值指定作者建议用于在本地文件系统中标记资源的默认文件名。对允许的值没有限制，但作者应注意，大多数文件系统对文件名中支持的标点符号有限制，用户代理可能会相应地调整文件名。

Element/a#attr-ping

所有当前引擎的支持。

Firefox🔰 1+ Safari6+ Chrome12+

Opera? Edge79+

Edge (旧版)17+ Internet Explorer无

Firefox Android? Safari iOS? Chrome Android? WebView Android≤37+ Samsung Internet? Opera Android?

ping 属性（如果存在）提供了希望在用户跟随超链接时收到通知的资源的 URL。其值必须是一个用空格分隔的令牌集合，每个令牌必须是一个有效的非空 URL，其方案必须是HTTP(S) 方案。该值由用户代理用于超链接审计。

rel 属性在a 和 area 元素上控制元素创建的链接类型。属性值必须是一个无序的唯一空格分隔令牌集合。允许的关键词及其含义在下文定义。

rel的支持的令牌是HTML 链接类型中定义的允许在a 和 area 元素上使用的关键词，这些关键词影响处理模型，并由用户代理支持。可能的支持的令牌包括noreferrer、noopener 和 opener。rel 的支持的令牌必须仅包括用户代理实现处理模型的令牌。

rel 属性没有默认值。如果省略该属性，或者属性中的值都未被用户代理识别，则文档与目标资源之间没有特定的关系，只是两个之间存在一个超链接。

hreflang 属性在创建超链接的a 元素上（如果存在）提供了链接资源的语言。该属性仅供参考。其值必须是有效的 BCP 47 语言标签。[BCP47] 用户代理不应将该属性视为权威性——在获取资源时，用户代理必须仅使用与资源关联的语言信息来确定其语言，而不是链接中包含的元数据。

type 属性（如果存在）提供了链接资源的MIME 类型。该属性仅供参考。其值必须是有效的 MIME 类型字符串。用户代理不得将type 属性视为权威性——在获取资源时，用户代理不得使用链接中包含的元数据来确定其类型。

referrerpolicy 属性是一个referrer 策略属性。其目的是设置在跟随超链接时使用的referrer 策略。[REFERRERPOLICY]

当a 或 area 元素的激活行为被触发时，用户代理可以允许用户表示是否希望将超链接用于导航，或者是否希望下载指定的资源。

在没有用户偏好的情况下，如果元素没有download 属性，则默认行为应为导航；如果元素具有该属性，则默认行为应为下载指定的资源。

一个a 或 area 元素的激活行为在给定事件event 时为：

如果element没有href属性，则返回。
将hyperlinkSuffix设为null。
如果element是a元素，并且event的目标是具有ismap属性的img，则：
1. 将x和y设为0。
2. 如果event的isTrusted属性被初始化为true，则将x设为图像左边缘到点击位置的距离（以CSS 像素为单位），将y设为图像上边缘到点击位置的距离（以CSS 像素为单位）。
3. 如果x为负，则将x设为0。
4. 如果y为负，则将y设为0。
5. 将hyperlinkSuffix设为U+003F（?）、x的值（以十进制整数形式使用ASCII 数字表示）、U+002C（,）和y的值（以十进制整数形式使用ASCII 数字表示）的拼接。
将userInvolvement设为event的用户导航参与。
如果用户表示了下载超链接的偏好，则将userInvolvement设为"browser UI"。

即，如果用户表示了特定的下载偏好，这不再被视为仅仅是"activation"。
如果element具有download属性，或者用户表示了下载超链接的偏好，则下载由element创建的超链接，将hyperlinkSuffix设为hyperlinkSuffix，将userInvolvement设为userInvolvement。
否则，跟随由element创建的超链接，将hyperlinkSuffix设为hyperlinkSuffix，将userInvolvement设为userInvolvement。

4.6.3 `a` 和 `area` 元素的 API

interface mixin HTMLHyperlinkElementUtils {
  [CEReactions] stringifier attribute USVString href;
  readonly attribute USVString origin;
  [CEReactions] attribute USVString protocol;
  [CEReactions] attribute USVString username;
  [CEReactions] attribute USVString password;
  [CEReactions] attribute USVString host;
  [CEReactions] attribute USVString hostname;
  [CEReactions] attribute USVString port;
  [CEReactions] attribute USVString pathname;
  [CEReactions] attribute USVString search;
  [CEReactions] attribute USVString hash;
};

hyperlink.toString()

hyperlink.href HTMLAnchorElement/href 所有当前引擎都支持。 Firefox1+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ HTMLAnchorElement/toString 所有当前引擎都支持。 Firefox22+Safari3+Chrome52+ Opera?Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android? HTMLAreaElement/href 所有当前引擎都支持。 Firefox1+Safari1+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ HTMLAreaElement/toString 所有当前引擎都支持。 Firefox22+Safari10.1+Chrome32+ Opera?Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回超链接的 URL。

可以设置，以更改 URL。

hyperlink.origin HTMLAnchorElement/origin 所有当前浏览器均支持。 Firefox26+Safari5.1+Chrome8+ Opera?Edge79+ Edge (旧版)17+Internet Explorer不支持 Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android? HTMLAreaElement/origin 所有当前浏览器均支持。 Firefox26+Safari10+Chrome32+ Opera?Edge79+ Edge (旧版)17+Internet Explorer不支持 Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android?

返回超链接的 URL 来源。

hyperlink.protocol HTMLAnchorElement/protocol 所有当前引擎都支持。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? HTMLAreaElement/protocol 所有当前引擎都支持。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回超链接 URL 的 scheme。

可以设置，以更改 URL 的 scheme。

hyperlink.username HTMLAnchorElement/username 所有当前引擎均支持。 Firefox26+Safari10+Chrome32+ Opera?Edge79+ Edge (旧版)?Internet Explorer不支持 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? HTMLAreaElement/username 所有当前引擎均支持。 Firefox26+Safari10+Chrome32+ Opera?Edge79+ Edge (旧版)?Internet Explorer不支持 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回超链接的 URL 的用户名。

可以设置，以更改 URL 的用户名。

hyperlink.password HTMLAnchorElement/password 所有当前引擎均支持。 Firefox26+Safari10+Chrome32+ Opera?Edge79+ Edge (旧版)?Internet Explorer不支持 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? HTMLAreaElement/password 所有当前引擎均支持。 Firefox26+Safari10+Chrome32+ Opera?Edge79+ Edge (旧版)?Internet Explorer不支持 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回超链接的 URL 的密码。

可以设置，以更改 URL 的密码。

hyperlink.host HTMLAnchorElement/host 所有当前引擎均支持。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? HTMLAreaElement/host 所有当前引擎均支持。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回超链接的 URL 的主机和端口（如果与 scheme 的默认端口不同）。

可以设置，以更改 URL 的主机和端口。

hyperlink.hostname HTMLAnchorElement/hostname 所有当前引擎均支持。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? HTMLAreaElement/hostname 所有当前引擎均支持。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回超链接的 URL 的主机。

可以设置，以更改 URL 的主机。

hyperlink.port HTMLAnchorElement/port 所有当前引擎均支持。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? HTMLAreaElement/port 所有当前引擎均支持。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回超链接的 URL 的端口。

可以设置，以更改 URL 的端口。

hyperlink.pathname HTMLAnchorElement/pathname 所有当前引擎均支持。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? HTMLAreaElement/pathname 所有当前引擎均支持。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回超链接的 URL 的路径。

可以设置，以更改 URL 的路径。

hyperlink.search HTMLAnchorElement/search 所有当前引擎均支持。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? HTMLAreaElement/search 所有当前引擎均支持。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回超链接的 URL 的查询（包括前导的 "?"，如果非空）。

可以设置，以更改 URL 的查询（忽略前导的 "?"）。

hyperlink.hash HTMLAnchorElement/hash 所有当前引擎均支持。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? HTMLAreaElement/hash 所有当前引擎均支持。 Firefox1+Safari1+Chrome1+ Opera?Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回超链接的 URL 的片段（包括前导的 "#"，如果非空）。

可以设置，以更改 URL 的片段（忽略前导的 "#"）。

实现了 HTMLHyperlinkElementUtils mixin 的元素有一个关联的 url（为 null 或 URL）。初始值为 null。

实现了 HTMLHyperlinkElementUtils mixin 的元素有一个关联的设置 URL 算法，该算法执行以下步骤：

将此元素的 url 设置为 null。
如果此元素的 href 内容属性缺失，则返回。
让 url 成为编码解析 URL 的结果，给定此元素的 href 内容属性的值，相对于此元素的节点文档。
如果 url 不是失败，则将此元素的 url 设置为 url。

当实现了 HTMLHyperlinkElementUtils mixin 的元素被创建时，以及每当这些元素的 href 内容属性被设置、修改或删除时，用户代理必须设置 url。

这只对 blob: URLs 可观察，因为解析它们涉及到一个 Blob URL 存储查找。

实现了 HTMLHyperlinkElementUtils mixin 的元素有一个关联的重新初始化 url 算法，该算法执行以下步骤：

如果元素的 url 非空，它的 scheme 为 "blob"，并且它具有一个不透明路径，则终止这些步骤。
设置 url。

要更新 href，将元素的 href 内容属性的值设置为元素的 url，并进行序列化。

href 获取器步骤如下：

重新初始化 url。
让 url 为 this 的 url。
如果 url 为 null 且 this 没有 href 内容属性，则返回空字符串。
否则，如果 url 为 null，则返回 this 的 href 内容属性的值。
返回 url，并进行序列化。

href 设置器步骤如下：将 this 的 href 内容属性的值设置为给定的值。

origin 获取器步骤如下：

重新初始化 url。
如果 this 的 url 为 null，则返回空字符串。
返回序列化的 this 的 url 的 origin。

protocol 获取器步骤如下：

重新初始化 url。
如果 this 的 url 为 null，则返回 ":"。
返回 this 的 url 的 scheme，后跟 ":"。

protocol 设置器步骤如下：

重新初始化 url。
如果 this 的 url 为 null，则返回。
对给定值进行基本 URL 解析，后跟 ":"，使用 this 的 url 作为 url 和 scheme start state 作为 state override。

因为 URL 解析器会忽略多个连续的冒号，所以提供 "https:"（甚至 "https::::"）与提供 "https" 是一样的。
更新 href。

username 获取器步骤如下：

重新初始化 url。
如果 this 的 url 为 null，则返回空字符串。
返回 this 的 url 的 username。

username 设置器步骤如下：

重新初始化 url。
让 url 为 this 的 url。
如果 url 为 null 或 url 不能具有用户名/密码/端口，则返回。
设置用户名，给定 url 和给定值。
更新 href。

password 获取器步骤如下：

重新初始化 url。
让 url 为 this 的 url。
如果 url 为 null，则返回空字符串。
返回 url 的密码。

password 设置器步骤如下：

重新初始化 url。
让 url 为 this 的 url。
如果 url 为 null 或 url 不能有用户名/密码/端口，则返回。
设置密码，给定 url 和指定值。
更新 href。

host 获取器步骤如下：

重新初始化 url。
让 url 为 this 的 url。
如果 url 或 url 的 host 为 null，返回空字符串。
如果 url 的 port 为 null，返回 url 的 host，序列化。
返回 url 的 host，序列化，后跟 ":" 和 url 的 port，序列化。

host 设置器步骤如下：

重新初始化 url。
让 url 为 this 的 url。
如果 url 为 null 或 url 有一个不透明路径，则返回。
基本 URL 解析给定值，将 url 作为 url 和 host 状态作为 状态覆盖。
更新 href。

hostname 获取器步骤如下：

重新初始化 url。
让 url 为 this 的 url。
如果 url 或 url 的 host 为 null，返回空字符串。
返回 url 的 host，序列化。

hostname 设置器步骤如下：

重新初始化 url。
让 url 为 this 的 url。
如果 url 为 null 或 url 有一个不透明路径，则返回。
基本 URL 解析给定的值，使用 url 作为 url 和主机名状态作为 状态覆盖。
更新 href。

port的getter步骤如下：

重新初始化 URL。
让 url 为 this 的 url。
如果 url 或 url 的端口为 null，则返回空字符串。
返回 url 的端口，并将其序列化。

port 设置器步骤如下：

重新初始化 URL。
让 url 为 this 的 url。
如果 url 为 null 或 url 不能包含用户名/密码/端口，则返回。
如果给定的值为空字符串，则将 url 的端口设置为 null。
否则，基本 URL 解析给定值，将 url 作为 url，将端口状态作为 状态覆盖。
更新 href。

pathname 获取器步骤如下：

重新初始化 URL。
让 url 为 this 的 url。
如果 url 为 null，则返回空字符串。
返回 URL 路径序列化 url 的结果。

pathname 设置器步骤如下：

重新初始化 URL。
让 url 为 this 的 url。
如果 url 为 null 或 url 具有不透明路径，则返回。
将 url 的路径设置为空列表。
基本 URL 解析给定值，将 url 作为 url，将路径开始状态作为 状态覆盖。
更新 href。

search 获取器步骤如下：

重新初始化 URL。
让 url 为 this 的 url。
如果 url 为 null，或者 url 的查询为 null 或空字符串，则返回空字符串。
返回 "?"，后跟 url 的查询。

search 设置器步骤如下：

重新初始化 URL。
让 url 为 this 的 url。
如果 url 为 null，则终止这些步骤。
如果给定值为空字符串，则将 url 的查询设置为 null。
否则：
1. 让 input 为给定值，去除前导的 "?"（如果有的话）。
2. 将 url 的查询设置为空字符串。
3. 基本 URL 解析 input，将 url 作为 url，将查询状态作为 状态覆盖。
更新 href。

hash 获取器步骤如下：

重新初始化 URL。
让 url 为 this 的 url。
如果 url 为 null，或者 url 的片段为 null 或空字符串，则返回空字符串。
返回 "#"，后跟 url 的片段。

hash 设置器步骤如下：

重新初始化 URL。
让 url 为 this 的 url。
如果 url 为 null，则返回。
如果给定值为空字符串，则将 url 的片段设置为 null。
否则：
1. 让 input 为给定值，去除前导的 "#"（如果有的话）。
2. 将 url 的片段设置为空字符串。
3. 基本 URL 解析 input，将 url 作为 url，将片段状态作为 状态覆盖。
更新 href。

4.6.4 跟随超链接

如果满足以下任意条件，则元素 element 不能导航：

element 的节点文档没有完全激活；或者
element 既不是 a 元素，也不是已连接。

这也被表单提交用于 form 元素。a 元素的例外是为了与网页内容兼容。

要获取元素的 noopener，给定一个 a、area，或 form 元素 element 和一个字符串 target：

如果 element 的链接类型包含 noopener 或 noreferrer 关键字，则返回 true。
如果 element 的链接类型不包含 opener 关键字，并且 target 是对 "_blank" 的 ASCII 不区分大小写匹配，则返回 true。
返回 false。

要跟随由元素 subject 创建的超链接，给定一个可选的 hyperlinkSuffix（默认值为 null）和一个可选的 userInvolvement（默认值为 "none")：

如果 subject 不能导航，则返回。
将 replace 设置为 false。
将 targetAttributeValue 设置为空字符串。
如果 subject 是 a 或 area 元素，则将 targetAttributeValue 设置为获取元素的目标的结果，给定 subject。
将 noopener 设置为获取元素的 noopener 的结果，使用 subject 和 targetAttributeValue。
将 targetNavigable 设置为应用选择可导航对象的规则的第一个返回值，给定 targetAttributeValue、subject 的节点可导航性和 noopener。
如果 targetNavigable 为 null，则返回。
将 urlString 设置为编码-解析-序列化 URL 的结果，给定 subject 的 href 属性值，相对于 subject 的节点文档。
如果 urlString 失败，则返回。
如果 hyperlinkSuffix 非 null，则将其附加到 urlString。
将 referrerPolicy 设置为 subject 的当前状态的 referrerpolicy 内容属性。
如果 subject 的链接类型包含 noreferrer 关键字，则将 referrerPolicy 设置为 "no-referrer"。
导航 targetNavigable 到 urlString，使用 subject 的节点文档，将 referrerPolicy 设置为 referrerPolicy，将 userInvolvement 设置为 userInvolvement。

与许多其他类型的导航不同，跟随超链接在文档未完全加载时没有特殊的 "replace" 行为。这对于用户发起的跟随超链接实例以及通过例如 aElement.click() 触发的脚本也是如此。

4.6.5 下载资源

HTMLAnchorElement/download

所有当前引擎都支持。

Firefox20+Safari10.1+Chrome15+

Opera?Edge79+

Edge (旧版)13+Internet Explorer无

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

在某些情况下，资源旨在用于稍后而不是立即查看。为了表示资源旨在被下载以便后续使用，而不是立即使用，可以在创建指向该资源的超链接的a或area元素上指定download属性。

此外，属性还可以指定一个值，以指定用户代理在将资源存储在文件系统中时应使用的文件名。这个值可以被Content-Disposition HTTP 头的文件名参数覆盖。[RFC6266]

在跨源情况下，download属性必须与Content-Disposition HTTP 头结合使用，特别是与attachment处置类型，以避免用户被警告可能的恶意活动。（这是为了保护用户免于在没有完全理解的情况下下载敏感的个人或机密信息。）

要下载由元素subject创建的超链接，给定一个可选的hyperlinkSuffix（默认为null）和一个可选的userInvolvement（默认为"none"）：

如果subject 无法导航，则返回。
如果subject的节点文档的活动沙箱标志设置了沙箱下载浏览上下文标志，则返回。
让urlString成为编码、解析和序列化URL的结果，给定subject的href属性值，相对于subject的节点文档。
如果urlString失败，则返回。
如果hyperlinkSuffix非空，则将其附加到urlString。
如果userInvolvement不是"browser UI"，则：
1. 断言：subject具有download属性。
2. 让navigation成为subject的相关全局对象的导航API。
3. 让filename成为subject的download属性的值。
4. 让continue成为在navigation上触发下载请求navigate事件的结果，设置destinationURL为urlString，userInvolvement为userInvolvement，filename为filename。
5. 如果continue为false，则返回。
并行执行以下步骤：
1. 用户代理可以选择中止这些步骤，如果认为这样做可以保护用户免受潜在的恶意下载。
2. 让request成为一个新的请求，其URL为urlString，客户端为入口设置对象，发起者为"download"，目的地为空字符串，并且其同步标志和使用URL凭证标志被设置。
3. 处理对request的获取结果，作为下载处理。

当用户代理需要将从fetch获取的资源作为下载处理时，如果成功获取资源，它应该提供一种方式让用户将资源保存以便后用。否则，它应该向用户报告任何下载文件时出现的问题。

如果用户代理需要为作为下载处理的资源选择一个文件名，它应使用以下算法。

该算法旨在减轻从不信任的网站下载文件的安全风险，强烈建议用户代理遵循此算法。

将filename设为未定义值。
如果资源有一个`Content-Disposition`头部，该头部指定了attachment处置类型，并且头部包含文件名信息，则将filename设为头部指定的值，然后跳转到下列sanitize步骤。[RFC6266]
将interface origin设为Document中download或navigate操作发起的origin，如果有的话。
将resource origin设为下载资源的URL的origin，除非该URL的scheme组件是data，在这种情况下，将resource origin设为interface origin，如果有的话。
如果没有interface origin，则将trusted operation设为true。否则，如果resource origin与interface origin是相同来源，则将trusted operation设为true，否则设为false。
如果trusted operation为true，并且资源有一个`Content-Disposition`头部且头部包含文件名信息，则将filename设为头部指定的值，然后跳转到下列sanitize步骤。[RFC6266]
如果下载不是由a或area元素创建的超链接发起的，或者发起下载的超链接的元素在下载发起时没有download属性，或者有该属性但其值在下载发起时为空字符串，则跳到标记为无建议文件名的步骤。
将proposed filename设为发起下载时hyperlink的`download`属性的值。
如果trusted operation为true，则将filename设为proposed filename，然后跳转到下列sanitize步骤。
如果资源有一个`Content-Disposition`头部且该头部指定了attachment处置类型，则将filename设为proposed filename，然后跳转到下列sanitize步骤。[RFC6266]
No proposed filename：如果trusted operation为true，或者用户表示希望下载该资源，则将filename的值从资源的URL中以实现定义的方式派生，并跳转到下列sanitize步骤。
将filename设为用户的首选文件名或用户代理选择的文件名，然后跳转到下列sanitize步骤。

如果算法达到此步骤，则表示下载是从与资源来源不同的来源发起的，并且该来源没有标记文件为适合下载，并且下载不是由用户发起的。这可能是因为使用了`download`属性来触发下载，或因为所涉及的资源不是用户代理支持的类型。

这可能是危险的，例如，恶意服务器可能试图让用户在不知情的情况下下载私人信息，并将其重新上传到恶意服务器，通过欺骗用户认为数据来自恶意服务器。

因此，用户的利益在于某种方式通知用户该资源来自完全不同的来源，并且为了防止混淆，任何潜在恶意的interface origin所建议的文件名应被忽略。
Sanitize：可选地，允许用户影响filename。例如，用户代理可以提示用户输入文件名，可能将上述确定的filename作为默认值。
将filename调整为适合本地文件系统的格式。

例如，这可能涉及去除文件名中不合法的字符，或修剪前导和尾随空白字符。
如果平台约定在任何方式上不使用扩展名来确定文件系统上的文件类型，则将filename作为文件名返回。
将claimed type设为资源的Content-Type元数据给出的类型（如果已知）。将named type设为filename的扩展名给出的类型（如果已知）。对于此步骤的目的，type是一个将MIME类型映射到扩展名的映射。
如果named type与用户的首选项一致（例如，因为filename的值是通过提示用户确定的），则将filename作为文件名返回。
如果claimed type和named type是相同的类型（即资源的Content-Type元数据与filename的扩展名给出的类型一致），则将filename作为文件名返回。
如果claimed type已知，则更改filename以添加与claimed type对应的扩展名。

否则，如果named type已知为潜在危险（例如，平台约定将其视为本地可执行文件、shell脚本、HTML应用程序或可执行宏文档），则可选地更改filename以添加一个已知安全的扩展名（例如".txt"）。

最后一步可能使得无法下载可执行文件，这可能不是所期望的。正如往常一样，实现者必须在安全性和可用性之间做出平衡。
将filename作为文件名返回。

对于本算法的目的，文件扩展名指的是文件名中任何由平台约定用于识别文件类型的部分。例如，许多操作系统使用文件名中最后一个点（"."）之后的部分来确定文件的类型，并从中决定文件的打开或执行方式。

用户代理在决定将生成的文件存储在用户文件系统中的位置时，应忽略资源本身、其URL和任何download属性提供的目录或路径信息。

4.6.6 超链接审计

如果由a或area元素创建的超链接具有ping属性，并且用户跟随该超链接，而元素的href属性的值可以相对于元素的节点文档进行解析，且解析不会失败，则用户代理必须获取ping属性的值，在ASCII空白处拆分该字符串，相对于元素的节点文档，解析每个结果令牌，然后为每个结果URL ping URL运行这些步骤，忽略解析返回失败的情况：

如果ping URL的方案不是HTTP(S) 方案，则返回。
可选地，返回。（例如，用户代理可能希望根据用户表达的偏好忽略任何或所有 ping URL。）
让settingsObject成为元素的节点文档的相关设置对象。
让request成为一个新的请求，其URL是ping URL，方法是`POST`，头部列表是 « (`Content-Type`, `text/ping`) »，主体是`PING`，客户端是settingsObject，目标是空字符串，凭证模式是`include`，引用者是`no-referrer`，并且request的使用URL凭证标志被设置，且发起者类型是`ping`。
让target URL成为对元素的href 属性的值，相对于元素的节点文档进行的编码-解析和序列化 URL的结果，然后：

如果包含正在审核的超链接的Document对象的URL和ping URL具有相同的来源

如果来源不同，但URL的方案不是`https`

request必须包含一个`Ping-From`头部，其值为包含超链接的文档的URL，以及一个`Ping-To` HTTP头部，其值为target URL。

否则

request必须包含一个`Ping-To` HTTP头部，其值为target URL。request不包含`Ping-From`头部。
获取 request。

这可以与主要获取操作并行进行，并且与该获取操作的结果无关。

用户代理应允许用户调整此行为，例如与禁用发送HTTP `Referer`（如所写）头部的设置结合使用。根据用户的偏好，用户代理可以完全忽略 ping属性，或者有选择地忽略列表中的URL（例如，忽略任何第三方URL）；这在上述步骤中已明确考虑。

用户代理必须忽略响应中返回的任何实体主体。用户代理可以在开始接收响应主体后提前关闭连接。

当存在ping属性时，用户代理应清楚地向用户指示，跟随该超链接还会在后台发送辅助请求，可能包括列出实际的目标URL。

例如，视觉用户代理可以在状态栏或工具提示中包含目标ping URL的主机名和超链接的实际URL。

ping 属性与现有技术如HTTP重定向和JavaScript在允许网页跟踪哪些外部链接最受欢迎或允许广告商跟踪点击率方面是冗余的。

然而，ping 属性为用户提供了相对于这些替代方案的以下优势：

它允许用户查看未被遮掩的最终目标URL。
它允许用户代理通知用户有关带外通知的信息。
它允许用户禁用通知而不丧失底层链接功能。
它允许用户代理优化可用网络带宽的使用，以便目标页面加载更快。

因此，虽然可以在没有此功能的情况下跟踪用户，但鼓励作者使用ping 属性，以便用户代理可以使用户体验更透明。

4.6.6.1 ``Ping-From`` 和 ``Ping-To`` 头部

`Ping-From` 和 `Ping-To` HTTP 请求头部包含在超链接审计请求中。它们的值是一个URL，序列化的。

4.6.7 链接类型

链接类型

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+

Opera9+Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

Link_types

下表总结了本规范定义的链接类型及其对应的关键词。此表为非规范性表格；实际的链接类型定义将在接下来的几节中给出。

在本节中，术语引用文档指的是由表示链接的元素标识的资源，而术语当前文档指的是表示链接的元素所在的资源。

要确定哪些链接类型适用于link、a、area或form元素，必须对元素的rel属性进行ASCII 空格分割。生成的令牌即为适用于该元素的链接类型的关键词。

除非另有说明，否则每个rel属性中不得指定重复的关键词。

一些表格下方的部分会列出某些关键词的同义词。所指示的同义词应按用户代理指定的方式处理，但不得在文档中使用（例如，关键词"copyright"）。

关键词总是ASCII 不区分大小写，并且必须按此方式进行比较。

因此，rel="next"与rel="NEXT"是相同的。

被标记为body-ok的关键词会影响link元素是否可以出现在文档主体中。body-ok关键词包括dns-prefetch、modulepreload、pingback、preconnect、prefetch、preload 和 stylesheet。

需要由网页浏览器实现的新链接类型将被添加到此标准中。其余类型可以注册为扩展。

链接类型	对...的影响			body-ok	有 ``Link`` 处理	简要描述
链接类型	`link`	`a` 和 `area`	`form`	body-ok	有 ``Link`` 处理	简要描述
`alternate`	超链接		不允许	·	·	提供当前文档的替代表示。
`canonical`	超链接	不允许		·	·	提供当前文档的首选 URL。
`author`	超链接		不允许	·	·	提供指向当前文档或文章作者的链接。
`bookmark`	不允许	超链接	不允许	·	·	提供最近的祖先部分的永久链接。
`dns-prefetch`	外部资源	不允许		是	·	指定用户代理应预先执行目标资源的来源的 DNS 解析。
`expect`	内部资源	不允许		·	·	期望当前文档中会出现目标 ID 的元素。
`external`	不允许	注释		·	·	指示引用的文档不属于与当前文档相同的网站。
`help`	超链接			·	·	提供上下文相关帮助的链接。
`icon`	外部资源	不允许		·	·	导入表示当前文档的图标。
`manifest`	外部资源	不允许		·	·	导入或链接到应用程序清单。[MANIFEST]
`modulepreload`	外部资源	不允许		是	·	指定用户代理必须预先获取模块脚本并将其存储在文档的模块映射中以供后续评估。可选地，模块的依赖项也可以被获取。
`license`	超链接			·	·	指示当前文档的主要内容受所引用文档中描述的版权许可证的覆盖。
`next`	超链接			·	·	指示当前文档是一个系列的一部分，下一个文档是所引用的文档。
`nofollow`	不允许	注释		·	·	指示当前文档的原始作者或发布者不认可所引用的文档。
`noopener`	不允许	注释		·	·	如果超链接会创建一个辅助的顶级可遍历项，则创建一个非辅助浏览上下文（即具有合适的`目标`属性值）。
`noreferrer`	不允许	注释		·	·	不会包含 ``Referer`` (sic) 头。此外，具有与`noopener`相同的效果。
`opener`	不允许	注释		·	·	如果超链接会创建一个具有非辅助浏览上下文（即具有“`_blank`”作为`目标`属性值）的顶级可遍历项，则创建一个辅助浏览上下文。
`pingback`	外部资源	不允许		是	·	提供处理当前文档的 pingback 的 pingback 服务器地址。
`preconnect`	外部资源	不允许		是	是	指定用户代理应预先连接到目标资源的来源。
`prefetch`	外部资源	不允许		是	·	指定用户代理应预先获取并缓存目标资源，因为它可能会在后续的导航中需要。
`preload`	外部资源	不允许		是	是	指定用户代理必须预先获取并缓存目标资源，以便根据`as`属性给出的潜在目的地（以及与相应的请求目的地相关联的优先级）进行当前导航。
`prev`	超链接			·	·	指示当前文档是一个系列的一部分，前一个文档是所引用的文档。
`privacy-policy`	超链接		不允许	·	·	提供有关当前文档适用的数据收集和使用实践的信息链接。
`search`	超链接			·	·	提供指向可用于搜索当前文档及其相关页面的资源的链接。
`stylesheet`	外部资源	不允许		是	·	导入样式表。
`tag`	不允许	超链接	不允许	·	·	提供适用于当前文档的标签（由给定地址标识）。
`terms-of-service`	超链接		不允许	·	·	提供指向有关当前文档提供者与希望使用当前文档的用户之间的协议的信息的链接。

4.6.7.1 链接类型 "`alternate`"

备用样式表

仅在一个引擎中支持。

Firefox3+Safari?Chrome1–48

OperaYesEdgeNo

Edge (旧版)?Internet Explorer8+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

alternate 关键字可以与 link、a 和 area 元素一起使用。

这个关键字的含义取决于其他属性的值。

如果元素是 link 元素且 rel 属性也包含 stylesheet 关键字

alternate 关键字会修改 stylesheet 关键字的含义，如该关键字的描述所示。alternate 关键字不会创建自己的链接。

这里，一组 link 元素提供了一些样式表：

<!-- a persistent style sheet -->
<link rel="stylesheet" href="default.css">

<!-- the preferred alternate style sheet -->
<link rel="stylesheet" href="green.css" title="Green styles">

<!-- some alternate style sheets -->
<link rel="alternate stylesheet" href="contrast.css" title="High contrast">
<link rel="alternate stylesheet" href="big.css" title="Big fonts">
<link rel="alternate stylesheet" href="wide.css" title="Wide screen">

如果 alternate 关键字与 type 属性的值设置为 application/rss+xml 或 application/atom+xml 一起使用

这个关键字创建了一个超链接，引用了一个聚合源（虽然不一定与当前页面聚合完全相同的内容）。

为了进行源自动发现，用户代理应考虑文档中所有使用 link 元素且 alternate 关键字的元素，以及其 type 属性设置为 application/rss+xml 或 application/atom+xml 的元素。如果用户代理有默认的聚合源概念，第一个这样的元素（按树顺序）应作为默认。

以下 link 元素为博客提供了聚合源：

<link rel="alternate" type="application/atom+xml" href="posts.xml" title="Cool Stuff Blog">
<link rel="alternate" type="application/atom+xml" href="posts.xml?category=robots" title="Cool Stuff Blog: robots category">
<link rel="alternate" type="application/atom+xml" href="comments.xml" title="Cool Stuff Blog: Comments">

这样的 link 元素会被用于源自动发现，首先的元素（在适用情况下）作为默认。

以下示例提供了各种不同的聚合源给用户，使用了 a 元素：

<p>You can access the planets database using Atom feeds:</p>
              <ul>
               <li><a href="recently-visited-planets.xml" rel="alternate" type="application/atom+xml">Recently Visited Planets</a></li>
               <li><a href="known-bad-planets.xml" rel="alternate" type="application/atom+xml">Known Bad Planets</a></li>
               <li><a href="unexplored-planets.xml" rel="alternate" type="application/atom+xml">Unexplored Planets</a></li>
              </ul>

这些链接不会用于 feed 自动发现。

否则

该关键词创建一个引用当前文档的备用表示形式的超链接。

引用文档的性质由hreflang和type属性给出。

如果alternate关键词与hreflang属性一起使用，并且该属性的值与文档元素的语言不同，则表示引用的文档是一个翻译版本。

如果alternate关键词与type属性一起使用，则表示引用的文档是当前文档在指定格式中的重新表述。

当使用alternate关键词时，hreflang和type属性可以组合使用。

以下示例展示了如何指定使用替代格式、面向其他语言和其他媒体的页面版本：

<link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML">
<link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML">
<link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print title="English HTML (for printing)">
<link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)">
<link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="English PDF">
<link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF">

此关系是可传递的——即，如果一个文档链接到两个具有"alternate"链接类型的其他文档，那么，除了意味着这些文档是第一个文档的备用表示之外，还意味着这两个文档也是彼此的备用表示。

4.6.7.2 链接类型 "`author`"

author 关键字可以与 link、a 和 area 元素一起使用。这个关键字创建一个超链接。

对于 a 和 area 元素，author 关键字表示所引用的文档提供有关定义超链接的元素最近的 article 元素祖先的更多信息（如果有的话），否则提供有关整个页面的信息。

对于 link 元素，author 关键字表示所引用的文档提供有关整个页面的作者的更多信息。

"引用的文档" 可以是（并且通常是）一个 mailto: URL，提供作者的电子邮件地址。 [MAILTO]

同义词：出于历史原因，用户代理还必须将具有 rev 属性值为 "made" 的 link、a 和 area 元素视为具有 author 关键字指定的链接关系。

4.6.7.3 链接类型 "`bookmark`"

bookmark 关键字可以与 a 和 area 元素一起使用。这个关键字创建一个超链接。

bookmark关键字为链接元素的最近祖先article元素或链接元素最密切相关的部分提供永久链接，如果没有祖先article元素。

以下代码段有三个永久链接。用户代理可以通过查看永久链接的位置来确定哪个永久链接适用于规范的哪个部分。

 ...
 <body>
  <h1>Example of permalinks</h1>
  <div id="a">
   <h2>First example</h2>
   <p><a href="a.html" rel="bookmark">This permalink applies to
   only the content from the first H2 to the second H2</a>. The DIV isn't
   exactly that section, but it roughly corresponds to it.</p>
  </div>
  <h2>Second example</h2>
  <article id="b">
   <p><a href="b.html" rel="bookmark">This permalink applies to
   the outer ARTICLE element</a> (which could be, e.g., a blog post).</p>
   <article id="c">
    <p><a href="c.html" rel="bookmark">This permalink applies to
    the inner ARTICLE element</a> (which could be, e.g., a blog comment).</p>
   </article>
  </article>
 </body>
 ...

4.6.7.4 链接类型 "`canonical`"

canonical 关键字可以与 link 元素一起使用。这个关键字创建一个超链接。

canonical 关键字表示由 href 属性给出的 URL 是当前文档的首选 URL。这有助于搜索引擎减少重复内容，详细描述见 The Canonical Link Relation。 [RFC6596]

4.6.7.5 链接类型 "`dns-prefetch`"

Link_types/dns-prefetch

Firefox3+Safari?Chrome46+

Opera?Edge79+

Edge (旧版)NoInternet Explorer?

Firefox Android?Safari iOS?Chrome AndroidYesWebView Android46+Samsung Internet?Opera Android?

The dns-prefetch 关键字可以与 link 元素一起使用。此关键字创建一个外部资源链接。此关键字是body-ok。

The dns-prefetch 关键字表示，预先为指定资源的源执行DNS解析可能是有益的，因为用户很可能需要位于该源的资源，预先解决DNS解析的延迟成本将改善用户体验。

对于 dns-prefetch 关键字，没有默认的资源类型。

适合获取和处理此类链接的时间是：

当外部资源链接在已浏览上下文连接的link元素上创建时。
当外部资源链接的link元素变为浏览上下文连接时。
当已浏览上下文连接的外部资源链接的link元素的href属性更改时。

此类型链接资源的获取和处理步骤，给定一个link元素el，如下：

让url成为给定el的href属性值相对el的节点文档的编码解析URL的结果。
如果url解析失败，则返回。
让partitionKey成为给定el的节点文档的相关设置对象的网络分区键的确定的结果。
用户代理应给定partitionKey和url的源，解析源。

由于此算法的结果可以被缓存，因此将来的获取可能会更快。

4.6.7.6 链接类型 "`expect`"

expect 关键字可用于link元素。此关键字创建一个内部资源链接。

由expect关键字创建的内部资源链接可以用来阻止渲染，直到它指示的元素连接到文档并完全解析。

expect关键字没有默认的资源类型。

当link元素el发生以下任何情况时：

expect内部资源链接在已经浏览上下文连接的el上创建；
一个expect内部资源链接已经在el上创建，并且el变为浏览上下文连接；
一个expect内部资源链接已经在el上创建，el已经浏览上下文连接，并且el的href属性被设置、更改或移除；
一个expect内部资源链接已经在el上创建，el已经浏览上下文连接，并且el的media属性被设置、更改或移除；

然后处理el。

为了给定一个link元素el处理内部资源链接，执行以下步骤：

让doc成为el的节点文档。
让url成为给定el的href属性值的编码解析URL的结果，相对于doc。
如果失败，或者url不等于doc的URL，并且排除片段设置为false，则取消阻止渲染 el并返回。
让indicatedElement成为给定doc和url选择指示部分的结果。
如果以下所有条件都为真：
- doc的当前文档准备状态是"loading";
- el创建了一个内部资源链接；
- el是浏览上下文连接的；
- el的rel属性包含expect；
- el是潜在的渲染阻塞；
- el的media属性与环境匹配；并且
- indicatedElement不是一个元素，或者位于一个打开元素栈的HTML解析器的堆栈上，其关联的文档是doc，
然后阻止渲染el。
否则，取消阻止渲染el。

为了给定一个文档doc处理内部资源链接：

对于每个expectlink元素link在doc的渲染阻塞元素集中，处理link。

以下属性更改步骤，给定element、localName、value和namespace，用于确保expectlink元素响应动态id和name更改：

如果namespace不为null，则返回。
如果element位于一个打开元素栈的HTML解析器中，则返回。
如果以下任一条件为真：
- localName是id；或者
- localName是name，并且element是一个a元素，
然后处理内部资源链接给定element的节点文档。

4.6.7.7 链接类型 "`external`"

external 关键字可用于a、area和form元素。此关键字不会创建超链接，但会注释由该元素创建的任何其他超链接（如果没有其他关键字创建，则为隐含超链接）。

external 关键字表示该链接指向的文档不属于当前文档所在网站的一部分。

4.6.7.8 链接类型 "`help`"

help 关键字可用于link、a、area和form元素。此关键字创建一个超链接。

对于a、area和form元素，help关键字表示引用的文档为定义超链接的元素的父元素及其子元素提供进一步的帮助信息。

在以下示例中，表单控件具有相关的上下文帮助。例如，当用户按下“帮助”或“F1”键时，用户代理可以使用此信息显示引用的文档。

 <p><label> 主题: <input name=topic> <a href="help/topic.html" rel="help">(帮助)</a></label></p>

对于link元素，help关键字表示引用的文档为整个页面提供帮助。

对于a和area元素，在某些浏览器中，help关键字会使链接使用不同的光标。

4.6.7.9 链接类型 "`icon`"

Link_types#icon

Support in all current engines.

Firefox2+Safari3.1+Chrome4+

Opera9+Edge79+

Edge (旧版)12+Internet Explorer11

Firefox Android4+Safari iOSNoChrome Android18+WebView Android38+Samsung Internet4.0+Opera AndroidNo

caniuse.com table

icon 关键字可用于link元素。此关键字创建一个外部资源链接。

指定的资源是代表页面或网站的图标，应该由用户代理在用户界面中代表页面时使用。

图标可以是听觉图标、视觉图标或其他类型的图标。如果提供了多个图标，用户代理必须根据type、media和sizes属性选择最合适的图标。如果有多个同样合适的图标，用户代理必须使用在用户代理收集图标列表时树顺序中最后声明的图标。如果用户代理尝试使用一个图标但在进一步检查时发现该图标实际上不合适（例如，因为它使用了不支持的格式），那么用户代理必须尝试下一个根据属性确定的最合适的图标。

用户代理不要求在图标列表更改时更新图标，但鼓励这样做。

icon关键字没有默认的资源类型。然而，为了确定资源类型，用户代理必须期望资源是图像。

sizes关键字表示图标的原始像素大小（相对于CSS 像素）。

一个宽度为50 CSS 像素的图标，适用于每个CSS 像素具有两个设备像素（2x，192dpi）的显示器，其宽度为100原始像素。此功能不支持指示在小高分辨率图标与大低分辨率图标之间使用不同的资源（例如50×50 2x与100×100 1x）。

要解析和处理属性的值，用户代理必须首先在ASCII空白处拆分属性的值，然后必须解析每个结果关键字以确定它代表什么。

any关键字表示资源包含一个可缩放的图标，例如由SVG图像提供的图标。

其他关键字必须进一步解析如下，以确定它们代表什么：

如果关键字不包含一个U+0078拉丁小写字母x或U+0058拉丁大写字母X字符，则此关键字不代表任何内容。返回该关键字。
令width string为"x"或"X"之前的字符串。
令height string为"x"或"X"之后的字符串。
如果width string或height string以U+0030数字零（0）字符开头或包含除ASCII数字以外的任何字符，则此关键字不代表任何内容。返回该关键字。
应用解析非负整数的规则到width string以获得width。
应用解析非负整数的规则到height string以获得height。
关键字表示资源包含一个宽度为width设备像素、高度为height设备像素的位图图标。

sizes属性中指定的关键字不得表示实际不可用的图标大小。

对于给定的link元素el和请求request，这种类型的链接资源的链接资源获取设置步骤为：

设置request的目的地为"image"。
返回true。

这种类型的链接资源的处理链接头步骤不执行任何操作。

在没有带有link的icon关键字的情况下，对于HTTP(S)协议的Document对象，用户代理可以改为并行运行以下步骤：

让request成为一个新的请求，其URL是通过将URL记录解析为"/favicon.ico"而获得的URL，相对于Document对象的URL，客户端是Document对象的相关设置对象，目的地为"image"，同步标志被设置，凭证模式为"include"，并且使用URL凭证标志被设置。
令response为获取request的结果。
使用response的不安全响应作为图标，就像它是用icon关键字声明的一样。

以下代码片段显示了带有多个图标的应用程序顶部部分。

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>lsForums — Inbox</title>
  <link rel=icon href=favicon.png sizes="16x16" type="image/png">
  <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
  <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
  <link rel=icon href=iphone.png sizes="57x57" type="image/png">
  <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
  <link rel=stylesheet href=lsforums.css>
  <script src=lsforums.js></script>
  <meta name=application-name content="lsForums">
 </head>
 <body>
  ...

由于历史原因，icon关键字前面可能有关键字"shortcut"。如果存在"shortcut"关键字，则rel属性的整个值必须与字符串"shortcut icon"（在标记之间有一个U+0020空格字符，没有其他ASCII空白）进行ASCII不区分大小写匹配。

4.6.7.10 链接类型 "`license`"

license 关键字可用于link、a、area和form元素。此关键字创建一个超链接。

license 关键字表示引用的文档提供了当前文档主要内容所依据的版权许可条款。

本规范未规定如何区分文档的主要内容和不被视为主要内容的部分。区分应向用户明确。

考虑一个照片分享网站。该网站上的页面可能描述和展示照片，页面标记如下：

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>Exampl Pictures: Kissat</title>
  <link rel="stylesheet" href="/style/default">
 </head>
 <body>
  <h1>Kissat</h1>
  <nav>
   <a href="../">Return to photo index</a>
  </nav>
  <figure>
   <img src="/pix/39627052_fd8dcd98b5.jpg">
   <figcaption>Kissat</figcaption>
  </figure>
  <p>One of them has six toes!</p>
  <p><small><a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a></small></p>
  <footer>
   <a href="/">Home</a> | <a href="../">Photo index</a>
   <p><small>© copyright 2009 Exampl Pictures. All Rights Reserved.</small></p>
  </footer>
 </body>
</html>

同义词：由于历史原因，用户代理还必须将关键字"copyright"视为license关键字。

4.6.7.11 链接类型 "`manifest`"

Link_types/manifest

仅在一个引擎中支持。

Firefox?Safari?ChromeNo

Opera?EdgeNo

Edge (旧版)?Internet Explorer?

Firefox Android?Safari iOS?Chrome Android39+WebView Android?Samsung Internet?Opera Android?

manifest 关键字可以用于 link 元素。这个关键字创建一个外部资源链接。

manifest 关键字指示提供与当前文档相关的元数据的清单文件。

由 manifest 关键字指定的资源没有默认类型。

当Web应用程序未安装时，适当的时间来获取和处理链接资源类型的链接是当用户代理认为有必要时。例如，当用户选择安装Web应用程序时。

对于已安装的Web应用程序，适当的时间来获取和处理链接资源类型的链接是：

当外部资源链接在已经浏览上下文连接的 link 元素上创建时。
当外部资源链接的 link 元素变为浏览上下文连接时。
当已经浏览上下文连接的外部资源链接的 link 元素的 href 属性更改时。

在任何情况下，只有第一个 link 元素在树顺序中，其 rel 属性包含 manifest 标记，才能被使用。

用户代理不得为了这种链接类型延迟加载事件。

对于这种类型的链接资源，给定一个 link 元素 el 和请求 request，链接资源获取设置步骤是：

让 navigable 成为 el 的节点文档的节点可导航。
如果 navigable 为空，则返回 false。
如果 navigable 不是顶级可遍历，则返回 false。
将 request 的发起者设置为 "manifest"。
将 request 的目标设置为 "manifest"。
将 request 的模式设置为 "cors"。
将 request 的凭据模式设置为 el 的 crossorigin 内容属性的 CORS设置属性凭据模式。
返回 true。

要处理这种类型的链接资源给定一个 link 元素 el、布尔值 success、响应 response 和字节序列 bodyBytes：

如果 response 的 Content-Type元数据不是 JSON MIME类型，则将 success 设置为 false。
如果 success 为 true：
1. 让 document URL 成为 el 的节点文档的 URL。
2. 让 manifest URL 成为 response 的 URL。
3. 处理清单给定 document URL、manifest URL 和 bodyBytes。[MANIFEST]

对于这种类型的链接资源，处理链接头步骤是无操作。

4.6.7.12 链接类型 "`modulepreload`"

Link_types/modulepreload

Firefox115+Safari?Chrome66+

Opera?Edge79+

Edge (旧版)NoInternet Explorer?

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

modulepreload 关键字可以用于 link 元素。这个关键字创建一个外部资源链接。这个关键字是 body-ok。

modulepreload 关键字是 preload 关键字的专业替代，具有针对预加载模块脚本的处理模型。特别是，它使用特定的模块脚本获取行为（包括，例如，对 crossorigin 属性的不同解释），并将结果放入适当的模块映射中以便稍后评估。相比之下，使用 preload 关键字的类似外部资源链接会将结果放入预加载缓存中，而不会影响文档的模块映射。

此外，实现可以利用模块脚本声明其依赖关系的事实来预先获取指定模块的依赖关系。这被视为一种优化机会，因为用户代理知道，很可能稍后也需要这些依赖关系。通常情况下，除非使用诸如service workers之类的技术或在服务器端进行监控，否则不会察觉。值得注意的是，适当的 load 或 error 事件将在指定模块被获取后发生，不会等待任何依赖关系。

用户代理不得为了这种链接类型延迟加载事件。

适当的时间来获取和处理链接资源类型的链接是：

当外部资源链接在已经浏览上下文连接的 link 元素上创建时。
当外部资源链接的 link 元素变为浏览上下文连接时。
当已经浏览上下文连接的外部资源链接的 link 元素的 href 属性更改时。

与其他一些链接关系不同，更改这些 as、crossorigin 和 referrerpolicy 相关属性不会触发新获取。这是因为文档的模块映射已经被之前的获取填充，因此重新获取毫无意义。

获取和处理链接资源算法用于 modulepreload 链接，给定一个 link 元素 el，其步骤如下：

如果 el 的 href 属性的值为空字符串，则返回。
让 destination 成为 el 的 as 属性的当前状态（一个目标），或者如果它没有状态，则为 "script"。
如果 destination 不是类似脚本的，则在排队一个元素任务上，在给定 el 的网络任务源上触发一个事件名为 error 在 el 上，并返回。
让 url 成为编码解析一个URL 的结果，给定 el 的 href 属性的值，相对于 el 的节点文档。
如果 url 失败，则返回。
让 settings object 成为 el 的节点文档的相关设置对象。
让 credentials mode 成为 el 的 crossorigin 属性的 CORS设置属性凭据模式。
让 cryptographic nonce 成为 el.[[CryptographicNonce]]。
让 integrity metadata 成为 el 的 integrity 属性的值，如果指定的话，否则为空字符串。
如果 el 没有 integrity 属性，则将 integrity metadata 设置为解析模块完整性元数据的结果，给定 url 和 settings object。
让 referrer policy 成为 el 的 referrerpolicy 属性的当前状态。
让 fetch priority 成为 el 的 fetchpriority 属性的当前状态。
让 options 成为脚本获取选项，其密码随机数为 cryptographic nonce，完整性元数据为 integrity metadata，解析器元数据为 "not-parser-inserted"，凭据模式为 credentials mode，引用策略为 referrer policy，获取优先级为 fetch priority。
获取一个modulepreload模块脚本图，给定 url，destination，settings object，options，并使用以下步骤，给定 result：
1. 如果 result 为 null，则触发一个事件名为 error 在 el 上，并返回。
2. 触发一个事件名为 load 在 el 上。

对于这种类型的链接资源，处理链接头步骤是无操作。

以下代码段显示了具有多个模块预加载的应用程序的顶部部分：

<!DOCTYPE html>
<html lang="en">
<title>IRCFog</title>

<link rel="modulepreload" href="app.mjs">
<link rel="modulepreload" href="helpers.mjs">
<link rel="modulepreload" href="irc.mjs">
<link rel="modulepreload" href="fog-machine.mjs">

<script type="module" src="app.mjs">
...

假设应用程序的模块图如下所示：

The module graph is rooted at app.mjs, which depends on irc.mjs and fog-machine.mjs. In turn, irc.mjs depends on helpers.mjs.

这里我们看到应用程序开发人员使用 modulepreload 声明其模块图中的所有模块，确保用户代理发起对它们的获取。没有这种预加载，用户代理可能需要进行多次网络往返才能发现 helpers.mjs，如果没有诸如HTTP/2服务器推送之类的技术。这种方式，modulepreload link 元素可以用作应用程序模块的 "manifest"。

以下代码显示了如何将 modulepreload 链接与 import() 结合使用，以确保网络获取提前完成，因此当调用 import() 时，模块已经在模块映射中准备就绪（但未评估）：

<link rel="modulepreload" href="awesome-viewer.mjs">

<button onclick="import('./awesome-viewer.mjs').then(m => m.view())">
  View awesome thing
</button>

4.6.7.13 链接类型 "`nofollow`"

nofollow 关键字可以用于 a、area 和 form 元素。这个关键字不会创建一个超链接，而是注释任何其他由元素创建的超链接（如果没有其他关键字创建超链接，则为隐含的超链接）。

nofollow 关键字表示链接不被页面的原始作者或出版者认可，或者链接到引用的文档主要是由于两个页面的相关人员之间的商业关系而包含的。

4.6.7.14 链接类型 "`noopener`"

Link_types/noopener

所有当前引擎均支持。

Firefox52+Safari10.1+Chrome49+

Opera?Edge79+

Edge (旧版)?Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Link_types/noopener

所有当前引擎均支持。

Firefox52+Safari10.1+Chrome49+

Opera?Edge79+

Edge (旧版)?Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

noopener 关键字可以用于 a、area 和 form 元素。这个关键字不会创建一个超链接，而是注释任何其他由元素创建的超链接（如果没有其他关键字创建超链接，则为隐含的超链接）。

这个关键字表示，通过遵循超链接生成的任何新创建的顶级可遍历不会包含辅助浏览上下文。例如，结果 Window 的 opener 获取器将返回 null。

另见处理模型。

这通常会创建一个带有辅助浏览上下文的顶级可遍历（假设不存在目标名称为 "example" 的现有可导航）：

<a href=help.html target=example>Help!</a>

这会创建一个不带有辅助浏览上下文的顶级可遍历（假设相同情况）：

<a href=help.html target=example rel=noopener>Help!</a>

这些是等效的，仅导航父可导航：

<a href=index.html target=_parent>Home</a>

<a href=index.html target=_parent rel=noopener>Home</a>

4.6.7.15 链接类型 "`noreferrer`"

Link_types/noreferrer

所有当前引擎均支持。

Firefox33+Safari5+Chrome16+

Opera?Edge79+

Edge (旧版)13+Internet Explorer🔰 11

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet1.5+Opera Android?

Link_types/noreferrer

所有当前引擎均支持。

Firefox33+Safari5+Chrome16+

Opera?Edge79+

Edge (旧版)13+Internet Explorer🔰 11

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet1.5+Opera Android?

noreferrer 关键字可以用于 a、area 和 form 元素。这个关键字不会创建一个超链接，而是注释任何其他由元素创建的超链接（如果没有其他关键字创建超链接，则为隐含的超链接）。

它表示在跟随链接时不会泄露任何引用信息，并且还暗示在相同条件下 noopener 关键字的行为。

另见直接操作引用的处理模型。

<a href="..." rel="noreferrer" target="_blank"> 与 <a href="..." rel="noreferrer noopener" target="_blank"> 具有相同的行为。

4.6.7.16 链接类型 "`opener`"

opener 关键字可以用于 a、area 和 form 元素。这个关键字不会创建一个超链接，而是注释任何其他由元素创建的超链接（如果没有其他关键字创建超链接，则为隐含的超链接）。

这个关键字表示，通过遵循超链接生成的任何新创建的顶级可遍历将包含一个辅助浏览上下文。

另见处理模型。

在以下示例中，opener 用于允许帮助页面弹出窗口导航其打开者，例如，当用户正在寻找的内容可以在其他地方找到时。一种替代方法可能是使用命名目标，而不是 _blank，但这可能会与现有名称冲突。

<a href="..." rel=opener target=_blank>Help!</a>

4.6.7.17 链接类型 "`pingback`"

pingback 关键字可以用于 link 元素。这个关键字创建一个外部资源链接。这个关键字是 body-ok。

关于 pingback 关键字的语义，请参见 Pingback 1.0。[PINGBACK]

4.6.7.18 链接类型 "`preconnect`"

Link_types/preconnect

所有当前引擎均支持。

Firefox39+Safari11.1+Chrome46+

Opera?Edge79+

Edge (旧版)?Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet4.0+Opera Android?

preconnect 关键字可以用于 link 元素。这个关键字创建一个外部资源链接。这个关键字是 body-ok。

preconnect 关键字表示预先与指定资源的源建立连接可能是有利的，因为用户很可能需要位于该源的资源，通过预先解决与建立连接相关的延迟成本可以改善用户体验。

没有资源类型的默认类型由 preconnect 关键字指定。

用户代理不得因这种链接类型延迟加载事件。

合适的获取和处理此类链接的时机是：

当外部资源链接已创建于已浏览上下文连接的 link 元素上。
当外部资源链接的 link 元素变为浏览上下文连接。
当已经浏览上下文连接的外部资源链接的 link 元素的 href 属性被改变时。
当已经浏览上下文连接的外部资源链接的 link 元素的 crossorigin 属性被设置、改变或移除时。

获取和处理此类型链接资源的步骤，给定一个 link 元素 el，是从 el 创建链接选项并给定结果进行预连接。

对于这种类型的链接资源，给定链接处理选项 options 的处理链接头步骤是给定 options 进行预连接。

给定链接处理选项 options 进行预连接：

如果 options 的 href 为空字符串，则返回。
给定 options 的 href 和 options 的基本URL，进行编码-解析 URL 并得到 url。

将基本URL传递而不是文档或环境是由 issue #9715 追踪的。
如果 url 解析失败，则返回。
如果 url 的方案不是 HTTP(S) 方案，则返回。
给定 options 的环境，确定网络分区键并得到 partitionKey。
设定 useCredentials 为 true。
如果 options 的 crossorigin 是匿名并且 options 的 origin 与 url 的 origin 不同源，则设定 useCredentials 为 false。
用户代理应尝试给定 partitionKey、url 的 origin 和 useCredentials，获取连接。

此连接已获取但未直接使用。它将保留在连接池中以供后续使用。

用户代理应尽可能尝试启动预连接并执行完整的连接握手（HTTP 为 DNS+TCP，HTTPS 源为 DNS+TCP+TLS），但由于资源限制或其他原因，允许选择执行部分握手（HTTP 仅为 DNS，HTTPS 源为 DNS 或 DNS+TCP），或完全跳过。

每个源的最佳连接数取决于协商协议、用户当前的连接配置文件、可用设备资源、全局连接限制和其他特定上下文变量。因此，多少连接应打开的决定由用户代理决定。

4.6.7.19 链接类型 "`prefetch`"

Link_types/prefetch

Firefox2+SafariNoChrome8+

Opera?Edge79+

Edge (旧版)12+Internet Explorer11

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet1.5+Opera Android?

prefetch 关键字可以用于 link 元素。这个关键字创建一个外部资源链接。这个关键字是 body-ok。

prefetch 关键字表示预先获取和缓存指定的资源或同站点文档可能是有益的，因为用户很可能会在将来导航中需要此资源。

没有资源类型的默认类型由 prefetch 关键字指定。

合适的获取和处理此类链接的时机是：

当外部资源链接已创建于已浏览上下文连接的 link 元素上。
当外部资源链接的 link 元素变为浏览上下文连接。
当已经浏览上下文连接的外部资源链接的 link 元素的 href 属性被改变时。
当已经浏览上下文连接的外部资源链接的 link 元素的 crossorigin 属性被设置、改变或移除时。

获取和处理此类型链接资源的算法，给定一个 link 元素 el，如下：

如果 el 的 href 属性的值为空字符串，则返回。
将 options 设为从 el 创建链接选项的结果。
设定 options 的 destination 为空字符串。
将 request 设为创建一个链接请求并给定 options 的结果。
如果 request 为 null，则返回。
设定 request 的 initiator 为 "prefetch"。
将 processPrefetchResponse 设为以下步骤，给定响应 response 和 null、失败或字节序列 bytesOrNull：
1. 如果 response 是网络错误，触发一个名为 error 的事件于 el。
2. 否则，触发一个名为 load 的事件于 el。
用户代理应获取 request，并将 processResponseConsumeBody 设为 processPrefetchResponse。用户代理可以延迟获取 request 以优先处理当前文档所需的其他请求。

处理链接头步骤对于这种类型的链接资源是无操作。

4.6.7.20 链接类型 "`preload`"

Link_types/preload

Support in one engine only.

Firefox85+Safari?🔰 50+

Opera37+🔰 79+

Edge (旧版)NoInternet Explorer?

Firefox Android?Safari iOS?Chrome Android?WebView Android50+Samsung Internet5.0+Opera Android?

preload 关键字可以用于 link 元素。这个关键字创建一个外部资源链接。这个关键字是 body-ok。

preload 关键字表示用户代理会根据 as 属性给出的潜在目的地和 fetchpriority 属性给出的优先级预先获取和缓存指定的资源，因为用户很可能需要该资源用于当前导航。

用户代理在加载资源时可能会执行额外的操作，例如预先解码图片或创建样式表。但是，这些额外的操作不能有可观察的效果。

没有资源类型的默认类型由 preload 关键字指定。

用户代理不得为了这种链接类型延迟加载事件。

合适的获取和处理此类链接的时机是：

当外部资源链接已创建于已浏览上下文连接的 link 元素上。
当外部资源链接的 link 元素变为浏览上下文连接。
当已经浏览上下文连接的外部资源链接的 link 元素的 href 属性被改变时。
当已经浏览上下文连接的外部资源链接的 link 元素的 as 属性被改变时。
当已经浏览上下文连接的外部资源链接的 link 元素的 type 属性被设置、移除或改变时，而之前由于 type 属性指定的请求目的地不支持的类型导致资源未被获取。
当已经浏览上下文连接的外部资源链接的 link 元素的 media 属性被改变或移除时，而之前由于 media 属性不匹配环境导致资源未被获取。

Document 有一个预加载资源的映射，这是一个有序映射，初始为空。

预加载键是一个结构体。它有以下项：

URL: 一个 URL
目的地: 一个字符串
模式: 一个请求模式，可以是 "same-origin"、"cors" 或 "no-cors"
凭证模式: 一个凭证模式

预加载条目是一个结构体。它有以下项：

完整性元数据: 一个字符串
响应: 空或一个响应
响应可用时: 空，或一个接受响应或空的算法

要消费一个预加载的资源给 Window window，给定一个 URL url、一个字符串 destination、一个字符串 mode、一个字符串 credentialsMode、一个字符串 integrityMetadata 和 onResponseAvailable，这是一个接受响应的算法：

让 key 成为一个预加载键，其 URL 是 url，目的地是 destination，模式是 mode，凭证模式是 credentialsMode。
让 preloads 成为 window 的关联的 Document 的预加载资源的映射。
如果 key 不存在于 preloads 中，则返回 false。
让 entry 成为 preloads[key]。
让 consumerIntegrityMetadata 成为解析 integrityMetadata 的结果。
让 preloadIntegrityMetadata 成为解析 entry 的完整性元数据的结果。
如果以下条件都不适用：
- consumerIntegrityMetadata 是 no metadata；
- consumerIntegrityMetadata 等于 preloadIntegrityMetadata；
  
  此比较将忽略未知的完整性选项。参见问题 #116。
则返回 false。

预加载和消费者之间完整性元数据的差异，即使两者都匹配数据，也会导致从网络重新请求资源。

将网络错误添加到预加载缓存中是很重要的，因此如果预加载请求导致错误，错误的响应不会在稍后从网络重新请求。这也有安全方面的影响；考虑一个开发人员在预加载请求上指定了子资源完整性元数据，但在随后的资源请求上没有。如果预加载请求未通过子资源完整性验证并被丢弃，资源请求将从网络获取并使用潜在的恶意响应，而不验证其完整性。[SRI]
移除 preloads[key]。
如果 entry 的响应是空的，则设置 entry 的响应可用时为 onResponseAvailable。
否则，用 entry 的响应调用 onResponseAvailable。
返回 true。

为此部分，字符串 type 若满足以下算法，则匹配字符串 destination：

如果 type 是空字符串，则返回 true。
如果 destination 是 "fetch"，则返回 true。
让 mimeTypeRecord 成为解析 type 的结果。
如果 mimeTypeRecord 是失败，则返回 false。
如果 mimeTypeRecord 不是用户代理支持的，则返回 false。
如果以下任何一个为真：
- destination 是 "audio" 或 "video"，并且 mimeTypeRecord 是音频或视频 MIME 类型；
- destination 是类脚本目的地，并且 mimeTypeRecord 是 JavaScript MIME 类型；
- destination 是 "image"，并且 mimeTypeRecord 是图片 MIME 类型；
- destination 是 "font"，并且 mimeTypeRecord 是字体 MIME 类型；
- destination 是 "json"，并且 mimeTypeRecord 是 JSON MIME 类型；
- destination 是 "style"，并且 mimeTypeRecord 的精华是 text/css；
- destination 是 "track"，并且 mimeTypeRecord 的精华是 text/vtt；
则返回 true。
返回 false。

要为一个请求 request 创建一个预加载键，返回一个新的预加载键，其 URL 是 request 的 URL，目的地是 request 的目的地，模式是 request 的模式，并且凭证模式是 request 的凭证模式。

要给定一个字符串 destination 翻译预加载目的地：

如果 destination 不是 "fetch"、"font"、"image"、"script"、"style" 或 "track"，则返回 null。
返回翻译 destination 的结果。

要预加载给定一个链接处理选项 options 和一个可选的 processResponse，这是一个接受响应的算法：

如果 options 的类型不匹配 options 的目的地，则返回。
如果 options 的目的地是 "image" 并且 options 的源集不是 null，则将 options 的 href 设置为选择一个图片源从 options 的源集。
让 request 成为创建一个链接请求给定 options 的结果。
如果 request 为 null，则返回。
让 unsafeEndTime 为 0。
让 entry 成为一个新的预加载条目，其完整性元数据是 options 的完整性。
让 key 成为创建一个预加载键给定 request 的结果。
如果 options 的文档是 "pending"，则将 request 的发起者类型设置为 "early hint"。
让 controller 为 null。
让 reportTiming 给定一个 Document document 为报告计时给 document 的相关全局对象。
将 controller 设置为获取 request 的结果，其中 processResponseConsumeBody 设置为以下步骤，给定一个响应 response 和 null、失败或一个字节序列 bodyBytes：
1. 如果 bodyBytes 是一个字节序列，则将 response 的主体设置为 bodyBytes 作为主体。
  
  通过使用 processResponseConsumeBody，我们提取了整个主体。这是为了确保预加载器从网络加载整个主体，无论预加载是否会被消费（在此时是不确定的）。此步骤然后将请求的主体重置为包含相同字节的新主体，以便其他规范可以在实际消费时读取它，尽管我们已经这样做了一次。
2. 否则，将 response 设置为一个网络错误。
3. 将 unsafeEndTime 设置为不安全共享当前时间。
4. 如果 options 的文档不是 null，则调用 reportTiming 给定 options 的文档。
5. 如果entry的on response available为null，则将entry的response设置为response；否则，调用entry的on response available并传入response。
6. 如果给定 processResponse，则调用 processResponse 使用 response。
让 commit 成为以下步骤，给定一个 Document document：
1. 如果 entry 的响应不是 null，则调用 reportTiming 给定 document。
2. 将 document 的预加载资源的映射[key] 设置为 entry。
如果 options 的文档是 null，则将 options 的文档就绪时设置为 commit。否则，调用 commit 给定 options 的文档。

获取和处理这种类型的链接资源的步骤，给定一个 link 元素 el，是：

更新 el 的源集。
让 options 成为从元素创建链接选项的结果。
预加载 options，以下步骤给定一个响应 response：
1. 如果 response 是网络错误，则触发事件，命名为 error，在 el 上。否则，在 el 上触发事件，命名为 load。
  
  实际浏览器行为与规范在这里不同，改变行为的可行性尚未调查。见问题 #1142。

为这种链接类型处理链接头的步骤，给定一个链接处理选项 options 是预加载 options。

4.6.7.21 链接类型 "`privacy-policy`"

privacy-policy 关键字可用于 link、 a和 area 元素。该关键字创建一个超链接。

privacy-policy 关键字表示引用的文档包含关于适用于当前文档的数据收集和使用实践的信息，如 Additional Link Relation Types 中更详细描述的那样。引用的文档可以是独立的隐私政策，或者是某些更通用文档的特定部分。[RFC6903]

4.6.7.22 链接类型 "`search`"

search 关键字可用于link、 a、 area和 form 元素。该关键字创建一个超链接。

search 关键字表示引用的文档提供了一个专门用于搜索该文档及其相关资源的接口。

OpenSearch 描述文档可与link 元素和search 链接类型一起使用，以使用户代理能够自动发现搜索接口。[OPENSEARCH]

4.6.7.23 链接类型 "`stylesheet`"

stylesheet 关键字可用于link 元素。此关键字创建一个外部资源链接，它有助于样式处理模型。此关键字是body-ok。

指定的资源是一个CSS 样式表，它描述了如何呈现文档。

Alternative_style_sheets

仅支持一个引擎。

Firefox3+Safari?Chrome1–48

OperaYesEdgeNo

Edge (旧版)?Internet Explorer8+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

如果alternate 关键字也在link 元素上指定，那么该链接是一个替代样式表；在这种情况下， title 属性必须在link 元素上指定，且其值不能为空。

stylesheet 关键字的默认资源类型是text/css。

此类型的link 元素如果是由其节点文档的解析器创建的，则被认为是隐含地潜在渲染阻塞。

当带有stylesheet 关键字的link 元素的disabled 属性被设置时，禁用关联的CSS 样式表。

此类链接获取和处理的适当时机是：

当在已经浏览上下文连接的link 元素上创建外部资源链接时。
当外部资源链接的link元素变成浏览上下文连接时。
当已浏览上下文已连接的外部资源链接的link元素的href属性被更改时。
当已经浏览上下文连接的外部资源链接的link 元素的disabled 属性被设置、更改或移除时。
当已经浏览上下文连接的外部资源链接的link 元素的crossorigin 属性被设置、更改或移除时。
当已经浏览上下文连接的外部资源链接的link 元素的type 属性被设置或更改为与之前获得的外部资源（如果有）的Content-Type 元数据不匹配时。
当已经浏览上下文连接的外部资源链接的link 元素的type 属性被移除或更改时，由于之前指定了不受支持的类型，导致未获取。
当已经浏览上下文连接的外部资源链接从替代样式表变为非替代样式表或反之时。

怪癖：如果文档已设置为怪癖模式，具有与外部资源的相同来源，且外部资源的内容类型元数据不是支持的样式表类型，则用户代理必须将其视为text/css。

此类链接资源的链接资源获取设置步骤，给定一个 link元素el和请求request，如下：

如果el的disabled属性被设置，则返回false。
如果el贡献了一个脚本阻塞样式表，则追加el到其节点文档的脚本阻塞样式表集合。
如果el的media属性的值与环境匹配，且el是潜在渲染阻塞的，则在el上阻塞渲染。
如果el当前是渲染阻塞的，则将request的渲染阻塞设置为true。
返回true。

请参见issue #968，了解使用CSSOM 获取CSS样式表算法代替默认获取和处理链接资源算法的计划。与此同时，任何关键子资源的请求应将其渲染阻塞设置为link元素当前是否渲染阻塞。

要处理此类型的链接资源，给定一个link元素el，布尔值success，响应response，和字节序列bodyBytes：

如果资源的内容类型元数据不是text/css，则将success设置为false。
如果el不再创建一个贡献于样式处理模型的外部资源链接，或者自从该资源被获取以来，它变得适合再次获取，那么：
1. 从el的节点文档的脚本阻塞样式表集合中移除el。
2. 返回。
如果el有一个关联的CSS样式表，移除CSS样式表。
如果success为true，那么：
1. 创建一个CSS样式表，具有以下属性：
  
  类型
  
  text/css
  
  位置
  
  response的URL列表[0]
  
  我们在此提供一个URL，假设w3c/csswg-drafts issue #9316将会被修复。
  
  所有者节点
  
  el
  
  媒体
  
  el的media属性。
  
  这是对（此时可能不存在的）属性的引用，而不是该属性当前值的副本。CSSOM定义了当属性动态设置、更改或删除时会发生什么。
  
  标题
  
  如果el在文档树中，则为el的title属性；否则为空字符串。
  
  同样，这是对属性的引用，而不是该属性当前值的副本。
  
  备用标志
  
  如果链接是一个备用样式表，并且el的明确启用为false，则设置此标志；否则不设置。
  
  来源清洁标志
  
  如果资源是CORS同源，则设置；否则不设置。
  
  父CSS样式表
  
  所有者CSS规则
  
  null
  
  禁用标志
  
  保持默认值。
  
  CSS规则
  
  未初始化。
  
  这似乎不对。大概我们应该使用bodyBytes? 跟踪于issue #2997。
  
  CSS环境编码的结果是运行以下步骤的结果：[CSSSYNTAX]
  1. 如果el有一个charset属性，从该属性的值中获取编码。如果成功，返回结果编码。[ENCODING]
  2. 否则，返回文档的字符编码。[DOM]
2. 在el上触发名为load的事件。
否则，在el上触发名为error的事件。
如果el贡献了一个脚本阻塞样式表，则：
1. 断言：el的节点文档的脚本阻塞样式表集合包含el。
2. 从其节点文档的脚本阻塞样式表集合中移除el。
解除el的渲染阻塞。

此类链接资源的处理链接头步骤是不做任何事情。

4.6.7.24 链接类型 "`tag`"

tag 关键字可以与a和area元素一起使用。这个关键字创建一个超链接。

tag关键字表示引用的文档代表的tag适用于当前文档。

由于它表示该标签适用于当前文档，因此在标签云的标记中使用此关键字是不合适的，因为标签云列出了跨多个页面的热门标签。

本文档是关于一些宝石的，所以它被标记为"https://en.wikipedia.org/wiki/Gemstone"，以明确将其归类为适用于"珠宝"类型的宝石，而不是美国的城镇、Ruby包格式或瑞士机车类：

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>My Precious</title>
 </head>
 <body>
  <header><h1>My precious</h1> <p>Summer 2012</p></header>
  <p>Recently I managed to dispose of a red gem that had been
  bothering me. I now have a much nicer blue sapphire.</p>
  <p>The red gem had been found in a bauxite stone while I was digging
  out the office level, but nobody was willing to haul it away. The
  same red gem stayed there for literally years.</p>
  <footer>
   Tags: <a rel=tag href="https://en.wikipedia.org/wiki/Gemstone">Gemstone</a>
  </footer>
 </body>
</html>

在这个文档中，有两篇文章。然而，"tag"链接适用于整个页面（无论其放置位置，包括在article元素内时也是如此）。

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>Gem 4/4</title>
 </head>
 <body>
  <article>
   <h1>801: Steinbock</h1>
   <p>The number 801 Gem 4/4 electro-diesel has an ibex and was rebuilt in 2002.</p>
  </article>
  <article>
   <h1>802: Murmeltier</h1>
   <figure>
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b0/Trains_de_la_Bernina_en_hiver_2.jpg"
         alt="The 802 was red with pantographs and tall vents on the side.">
    <figcaption>The 802 in the 1980s, above Lago Bianco.</figcaption>
   </figure>
   <p>The number 802 Gem 4/4 electro-diesel has a marmot and was rebuilt in 2003.</p>
  </article>
  <p class="topic"><a rel=tag href="https://en.wikipedia.org/wiki/Rhaetian_Railway_Gem_4/4">Gem 4/4</a></p>
 </body>
</html>

4.6.7.25 链接类型 "`terms-of-service`"

terms-of-service关键字可以与link、a和area元素一起使用。这个关键字创建一个超链接。

terms-of-service关键字表示引用的文档包含关于当前文档提供者与希望使用当前文档的用户之间的协议的信息，如Additional Link Relation Types中更详细描述的那样。[RFC6903]

4.6.7.26 顺序链接类型

某些文档是文档序列的一部分。

文档序列是指每个文档可以有一个前一个兄弟文档和一个下一个兄弟文档。没有前一个兄弟文档的文档是其序列的起点，没有下一个兄弟文档的文档是其序列的终点。

一个文档可以属于多个序列。

4.6.7.26.1 链接类型 "`next`"

next关键字可以与link、a、area和form元素一起使用。这个关键字创建一个超链接。

next关键字表示文档是一个序列的一部分，并且链接指向序列中下一个逻辑文档。

当next关键字与link元素一起使用时，用户代理应该处理这些链接，就像它们使用dns-prefetch、preconnect或prefetch关键字一样。用户代理希望使用哪个关键字取决于实现；例如，用户代理可能希望在节省数据、电池电量或处理能力时使用成本较低的preconnect处理模型，或者可能希望根据对类似场景中过去用户行为的启发式分析来选择一个关键字。

4.6.7.26.2 链接类型 "`prev`"

prev关键字可以与link、a、area和form元素一起使用。这个关键字创建一个超链接。

prev关键字表示文档是一个序列的一部分，并且链接指向序列中上一个逻辑文档。

同义词：出于历史原因，用户代理还必须将关键字"previous"视为prev关键字。

4.6.7.27 其他链接类型

预定义链接类型集的扩展可以在现有rel值的microformats页面上注册。[MFREL]

任何人都可以随时编辑现有rel值的microformats页面以添加类型。扩展类型必须指定以下信息：

关键字

实际定义的值。该值不应与任何其他定义的值混淆相似（例如，仅在大小写上有所不同）。

如果该值包含U+003A冒号字符（:），则它还必须是一个绝对URL。

对...的影响 link

以下之一：

不允许: 不允许在 link 元素上指定关键字。
超链接: 可以在 link 元素上指定关键字；它创建一个超链接。
外部资源: 可以在 link 元素上指定关键字；它创建一个外部资源链接。

对...的影响 a 和 area

以下之一：

不允许: 不允许在 a 和 area 元素上指定关键字。
超链接: 可以在 a 和 area 元素上指定关键字；它创建一个超链接。
外部资源: 可以在 a 和 area 元素上指定关键字；它创建一个外部资源链接。
超链接注释: 可以在 a 和 area 元素上指定关键字；它注释由元素创建的其他超链接。

对...的影响 form

以下之一：

不允许: 不允许在 form 元素上指定关键字。
超链接: 可以在 form 元素上指定关键字；它创建一个超链接。
外部资源: 可以在 form 元素上指定关键字；它创建一个外部资源链接。
超链接注释: 可以在 form 元素上指定关键字；它注释由元素创建的其他超链接。

简要描述

关键字含义的简短非规范性描述。

规范

更详细描述关键字语义和要求的链接。它可以是wiki上的另一页，也可以是链接到外部页面。

同义词

具有完全相同处理要求的其他关键字值列表。作者不应使用定义为同义词的值，它们仅用于允许用户代理支持旧版内容。任何人都可以删除未实际使用的同义词；仅那些需要与旧版内容兼容处理的名称应以这种方式注册。

状态

以下之一：

建议: 关键字尚未经过广泛的同行评审和批准。有人建议它，并且正在或即将使用它。
批准: 关键字已经过广泛的同行评审和批准。它有一个规范，明确定义了如何处理使用该关键字的页面，包括当它们以不正确的方式使用时。
停止使用: 关键字经过广泛的同行评审后被认为不符合要求。现有页面正在使用此关键字，但新页面应避免使用。简要描述和规范条目将详细说明作者应使用的替代内容（如果有）。

如果发现关键字与现有值冗余，则应将其移除并列为现有值的同义词。

如果关键字在一个月或更长时间内未使用或未指定，则可以从注册表中删除。

如果添加的关键字处于建议状态并发现与现有值冗余，则应将其移除并列为现有值的同义词。如果添加的关键字处于建议状态并发现有害，则应将其状态更改为停止使用。

任何人都可以随时更改状态，但应仅根据上述定义进行。

合规检查器必须使用现有rel值的microformats页面上提供的信息来确定值是否被允许：本规范中定义的或标记为"建议"或"批准"的值在用于其描述的元素时必须被接受，而标记为"停止使用"或未在本规范或上述页面上列出的值必须被拒绝为无效。合规检查器可以缓存此信息（例如，为了性能原因或避免使用不可靠的网络连接）。

当作者使用本规范或wiki页面未定义的新类型时，合规检查器应提议将该值添加到wiki中，详情如上所述，状态为"建议"。

在现有rel值的microformats页面中以"建议"或"批准"状态定义的扩展类型，可以按照"对...的影响"字段所述的方式与 rel 属性一起用于 link、a 和 area 元素。[MFREL]

4.7 编辑

ins 和 del 元素表示对文档的编辑。

4.7.1 `ins` 元素

Element/ins

所有当前引擎支持。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别：: 流内容。; 短语内容。; 可感知内容。
该元素可以使用的上下文：: 短语内容预期的位置。
内容模型：: 透明。
在 text/html 中省略标签：: 两个标签都不可省略。
内容属性：: 全局属性; cite — 链接到引用的来源或有关编辑的更多信息; datetime — 更改的日期和（可选）时间
无障碍考虑：: 对于作者。; 对于实现者。
DOM 接口：: 使用 HTMLModElement。

ins 元素表示文档中的新增内容。

以下表示添加了一个段落：

<aside>
 <ins>
  <p> I like fruit. </p>
 </ins>
</aside>

以下也是，因为这里的 aside 元素中的所有内容都算作短语内容，因此这里只存在一个段落：

<aside>
 <ins>
  Apples are <em>tasty</em>.
 </ins>
 <ins>
  So are pears.
 </ins>
</aside>

ins 元素不应跨段落边界。

以下示例表示添加了两个段落，其中第二个段落分两部分插入。此示例中的第一个 ins 元素跨越了段落边界，这被认为是不好的做法。

<aside>
 <!-- don't do this -->
 <ins datetime="2005-03-16 00:00Z">
  <p> I like fruit. </p>
  Apples are <em>tasty</em>.
 </ins>
 <ins datetime="2007-12-19 00:00Z">
  So are pears.
 </ins>
</aside>

这是一个更好的标记方法。它使用了更多的元素，但没有任何元素跨越隐含的段落边界。

<aside>
 <ins datetime="2005-03-16 00:00Z">
  <p> I like fruit. </p>
 </ins>
 <ins datetime="2005-03-16 00:00Z">
  Apples are <em>tasty</em>.
 </ins>
 <ins datetime="2007-12-19 00:00Z">
  So are pears.
 </ins>
</aside>

4.7.2 `del` 元素

Element/del

所有当前引擎支持。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

类别：: 流内容。; 短语内容。; 可感知内容。
该元素可以使用的上下文：: 短语内容预期的位置。
内容模型：: 透明。
在 text/html 中省略标签：: 两个标签都不可省略。
内容属性：: 全局属性; cite — 链接到引用的来源或有关编辑的更多信息; datetime — 更改的日期和（可选）时间
无障碍考虑：: 对于作者。; 对于实现者。
DOM 接口：: 使用 HTMLModElement。

del 元素表示文档中的删除内容。

del 元素不应跨段落边界。

以下示例展示了一个“待办”列表，其中已完成的项目被划掉，并标注完成的日期和时间。

<h1>To Do</h1>
<ul>
 <li>Empty the dishwasher</li>
 <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li>
 <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
 <li>Buy a printer</li>
</ul>

4.7.3 `ins` 和 `del` 元素的公共属性

cite 属性可用于指定解释更改的文档的 URL。当该文档很长时，例如会议记录，作者被鼓励包含一个片段，指向该文档中特定讨论更改的部分。

如果存在 cite 属性，它必须是一个有效的 URL（可能被空格包围），用于解释更改。为了获得相应的引用链接，必须相对于元素的节点文档解析该属性的值。用户代理可以允许用户跟随这些引用链接，但它们主要用于私有用途（例如，由服务器端脚本收集站点编辑的统计数据），而不是为读者准备的。

datetime 属性可用于指定更改的时间和日期。

如果存在，datetime 属性的值必须是有效的日期字符串（可选时间）。

用户代理必须根据解析日期或时间字符串算法解析 datetime 属性。如果该算法没有返回日期或全局日期和时间，那么修改没有相关联的时间戳（该值是不符合规范的；它不是有效的日期字符串（可选时间））。否则，修改被标记为在给定的日期或全局日期和时间进行的。如果给定的值是全局日期和时间，那么用户代理应该使用相关的时区偏移信息来确定展示给定日期时间的时区。

这个值可以展示给用户，但它主要是为了私有用途。

ins 和 del 元素必须实现 HTMLModElement 接口：

HTMLModElement

支持所有当前的引擎。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer6+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

[Exposed=Window]
interface HTMLModElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute USVString cite;
  [CEReactions] attribute DOMString dateTime;
};

cite IDL 属性必须反映元素的 cite 内容属性。dateTime IDL 属性必须反映元素的 datetime 内容属性。

4.7.4 编辑和段落

本节为非规范性内容。

由于 ins 和 del 元素不影响段落划分，在某些没有显式 p 元素的情况下，这些元素可能会跨越整个段落或其他非短语内容元素和部分另一段。例如：

<section>
 <ins>
  <p>
   This is a paragraph that was inserted.
  </p>
  This is another paragraph whose first sentence was inserted
  at the same time as the paragraph above.
 </ins>
 This is a second sentence, which was there all along.
</section>

通过仅将一些段落包裹在 p 元素中，甚至可以使一个段落的结尾、整个第二段和第三段的开始被同一个 ins 或 del 元素覆盖（尽管这非常混乱，并不被认为是好的做法）：

<section>
 This is the first paragraph. <ins>This sentence was
 inserted.
 <p>This second paragraph was inserted.</p>
 This sentence was inserted too.</ins> This is the
 third paragraph in this example.
 <!-- (don't do this) -->
</section>

然而，由于隐含段落的定义方式，无法使用同一个 ins 或 del 元素来标记一个段落的结尾和下一个段落的开始。你需要使用一个（或两个）p 元素和两个 ins 或 del 元素，例如：

<section>
 <p>This is the first paragraph. <del>This sentence was
 deleted.</del></p>
 <p><del>This sentence was deleted too.</del> That
 sentence needed a separate &lt;del&gt; element.</p>
</section>

部分因为上述的混乱，强烈建议作者始终使用 p 元素来标记所有段落，而不是使用跨越隐含段落边界的 ins 或 del 元素。

4.7.5 编辑和列表

本节为非规范性内容。

ol 和 ul 元素的内容模型不允许 ins 和 del 元素作为子元素。列表总是表示所有项目，包括那些本应标记为已删除的项目。

要指示某个项目已插入或删除，可以将 ins 或 del 元素包裹在 li 元素的内容周围。要指示某个项目已被另一个替换，可以在单个 li 元素中包含一个或多个 del 元素，后跟一个或多个 ins 元素。

在以下示例中，一个最初为空的列表随着时间的推移添加和删除了项目。示例中加重显示的部分显示了列表的“当前”状态。列表项编号没有考虑编辑。

<h1>Stop-ship bugs</h1>
<ol>
 <li><ins datetime="2008-02-12T15:20Z">Bug 225:
 Rain detector doesn't work in snow</ins></li>
 <li><del datetime="2008-03-01T20:22Z"><ins datetime="2008-02-14T12:02Z">Bug 228:
 Water buffer overflows in April</ins></del></li>
 <li><ins datetime="2008-02-16T13:50Z">Bug 230:
 Water heater doesn't use renewable fuels</ins></li>
 <li><del datetime="2008-02-20T21:15Z"><ins datetime="2008-02-16T14:25Z">Bug 232:
 Carbon dioxide emissions detected after startup</ins></del></li>
</ol>

在以下示例中，最初只有水果的列表被替换为只有颜色的列表。

<h1>List of <del>fruits</del><ins>colors</ins></h1>
<ul>
 <li><del>Lime</del><ins>Green</ins></li>
 <li><del>Apple</del></li>
 <li>Orange</li>
 <li><del>Pear</del></li>
 <li><ins>Teal</ins></li>
 <li><del>Lemon</del><ins>Yellow</ins></li>
 <li>Olive</li>
 <li><ins>Purple</ins></li>
</ul>

4.7.6 编辑和表格

本节为非规范性内容。

表格模型中的元素有复杂的内容模型要求，不允许 ins 和 del 元素，因此指示对表格的编辑可能会很困难。

要指示整行或整列已被添加或删除，可以将该行或列中每个单元格的全部内容包裹在 ins 或 del 元素中。

这里，一个表格的行被添加了：

<table>
 <thead>
  <tr> <th> Game name           <th> Game publisher   <th> Verdict
 <tbody>
  <tr> <td> Diablo 2            <td> Blizzard         <td> 8/10
  <tr> <td> Portal              <td> Valve            <td> 10/10
  <tr> <td> <ins>Portal 2</ins> <td> <ins>Valve</ins> <td> <ins>10/10</ins>
</table>

这里，一列被删除了（删除时间和解释原因的页面链接也一并给出）：

<table>
 <thead>
  <tr> <th> Game name           <th> Game publisher   <th> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">Verdict</del>
 <tbody>
  <tr> <td> Diablo 2            <td> Blizzard         <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">8/10</del>
  <tr> <td> Portal              <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
  <tr> <td> Portal 2            <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
</table>

一般来说，没有好的方法可以指示更复杂的编辑（例如，删除一个单元格，移动所有后续单元格向上或向左）。

4.8 嵌入内容

4.8.1 `picture` 元素

Element/picture

支持所有当前引擎。

Firefox38+Safari9.1+Chrome38+

Opera?Edge79+

Edge (旧版)13+Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLPictureElement

支持所有当前引擎。

Firefox38+Safari9.1+Chrome38+

Opera?Edge79+

Edge (旧版)13+Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

分类：

流内容。

可感知内容。

期望嵌入内容的地方。

零个或多个 source 元素，后跟一个 img 元素，可选地混合脚本支持元素。

在 text/html 中标签省略：

两个标签都不能省略。

内容属性：

全局属性

无障碍考虑：

作者。

实施者。

DOM 接口：

[Exposed=Window]
interface HTMLPictureElement : HTMLElement {
  [HTMLConstructor] constructor();
};

picture 元素是一个容器，提供多种来源给其包含的 img 元素，以便作者可以声明性地控制或给用户代理提供关于使用哪个图像资源的提示，基于屏幕像素密度、视口大小、图像格式等因素。它代表其子元素。

picture 元素与类似的 video 和 audio 元素有些不同。虽然它们都包含 source 元素，但当元素嵌套在 picture 元素中时，src 属性没有意义，并且资源选择算法也不同。此外，picture 元素本身不显示任何内容；它仅为其包含的 img 元素提供上下文，使其能够从多个 URLs 中选择。

4.8.2 `source` 元素

Element/source

支持所有当前引擎。

Firefox3.5+Safari3.1+Chrome3+

Opera?Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLSourceElement

支持所有当前引擎。

Firefox3.5+Safari3.1+Chrome3+

Opera12.1+Edge 79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

类别:

无。

此元素可以使用的上下文:

作为 picture 元素的子元素，在 img 元素之前。

作为媒体元素的子元素，在任何流内容或 track 元素之前。

内容模型:

无。

在 text/html 中省略标签:

无结束标签。

内容属性:

全局属性

type — 嵌入资源的类型

media — 适用的媒体

src (在 audio 或 video 中) — 资源地址

srcset (在 picture 中) — 在不同情况下使用的图像，例如高分辨率显示器，小显示器等。

sizes (在 picture 中) — 不同页面布局的图像大小

width (在 picture 中) — 水平尺寸

height (在 picture 中) — 垂直尺寸

可访问性注意事项:

作者。

实现者。

DOM 接口:

[Exposed=Window]
interface HTMLSourceElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute USVString src;
  [CEReactions] attribute DOMString type;
  [CEReactions] attribute USVString srcset;
  [CEReactions] attribute DOMString sizes;
  [CEReactions] attribute DOMString media;
  [CEReactions] attribute unsigned long width;
  [CEReactions] attribute unsigned long height;
};

source 元素允许作者为 img 元素指定多个替代的 source sets 或为 media 元素指定多个替代的媒体资源。它本身不表示任何内容。

type 属性可以存在。如果存在，其值必须是一个有效的 MIME 类型字符串。

media 属性也可以存在。如果存在，其值必须包含一个有效的媒体查询列表。如果值不匹配环境，用户代理将跳到下一个 source 元素。

media 属性仅在资源选择算法中对 media 元素进行一次评估。相比之下，当使用 picture 元素时，用户代理将对环境的变化做出反应。

其余的要求取决于父元素是 picture 元素还是 media 元素：

source 元素的父元素是 picture 元素

srcset 属性必须存在，并且是一个 srcset 属性。

srcset 属性在 source 元素被选中时，将图像来源提供给 source set。

如果 srcset 属性包含任何使用宽度描述符的图像候选字符串，则 sizes 属性也可以存在。如果另外，下一个兄弟 img 元素不允许自动尺寸，则 sizes 属性必须存在。sizes 属性是一个 sizes 属性，如果 source 元素被选中，则该属性为 source size 贡献值。

如果 img 元素允许自动尺寸，则可以省略前一个兄弟 source 元素上的 sizes 属性。在这种情况下，它等同于指定 auto。

source 元素支持尺寸属性。img 元素可以使用 width 和 height 属性来确定其渲染尺寸和纵横比，如渲染部分所定义。

type 属性指定 source set 中图像的类型，以便用户代理在不支持给定类型时跳到下一个 source 元素。

如果未指定 type 属性，当用户代理在获取后发现不支持图像格式时，它不会选择不同的 source 元素。

当 source 元素有一个后续的兄弟 source 元素或 img 元素，并且指定了 srcset 属性时，必须满足以下至少一个条件：

指定了 media 属性，并且在去除前导和尾随 ASCII 空白后，其值不是空字符串且不与字符串 "all" 进行 ASCII 不区分大小写匹配。
指定了 type 属性。

src 属性不得存在。

source 元素的父元素是 media 元素

src 属性提供 URL 的媒体资源。该值必须是有效的非空 URL（可能被空格包围）。该属性必须存在。

type 属性指定媒体资源的类型，以帮助用户代理在获取之前确定是否可以播放此媒体资源。某些 MIME 类型定义的 codecs 参数可能需要指定资源的确切编码方式。[RFC6381]

在已经插入到 video 或 audio 元素中的情况下动态修改 source 元素的 src 或 type 属性将无效。要更改正在播放的内容，只需直接在 media 元素上使用 src 属性，可能使用 canPlayType() 方法从可用资源中选择。通常，在文档解析后手动操作 source 元素是一种不必要的复杂方法。

以下列表显示了一些如何在 codecs= MIME 参数中使用 type 属性的示例。

H.264 约束基线档次视频（主和扩展视频兼容）级别 3 和低复杂度 AAC 音频在 MP4 容器中

<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

H.264 扩展档次视频（基线兼容）级别 3 和低复杂度 AAC 音频在 MP4 容器中

<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>

H.264 主档次视频级别 3 和低复杂度 AAC 音频在 MP4 容器中

<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>

H.264 '高' 档次视频（与主、基线或扩展档次不兼容）级别 3 和低复杂度 AAC 音频在 MP4 容器中

<source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>

MPEG-4 可视简单档次级别 0 视频和低复杂度 AAC 音频在 MP4 容器中

<source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>

MPEG-4 高级简单档次级别 0 视频和低复杂度 AAC 音频在 MP4 容器中

<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>

MPEG-4 可视简单档次级别 0 视频和 AMR 音频在 3GPP 容器中

<source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>

Theora 视频和 Vorbis 音频在 Ogg 容器中

<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>

Theora 视频和 Speex 音频在 Ogg 容器中

<source src='video.ogv' type='video/ogg; codecs="theora, speex"'>

单独的 Vorbis 音频在 Ogg 容器中

<source src='audio.ogg' type='audio/ogg; codecs=vorbis'>

单独的 Speex 音频在 Ogg 容器中

<source src='audio.spx' type='audio/ogg; codecs=speex'>

单独的 FLAC 音频在 Ogg 容器中

<source src='audio.oga' type='audio/ogg; codecs=flac'>

Dirac 视频和 Vorbis 音频在 Ogg 容器中

<source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>

srcset 和 sizes 属性不得存在。

source HTML 元素插入步骤，给定 insertedNode，如下：

如果 insertedNode 的父元素是没有 src 属性且 networkState 值为 NETWORK_EMPTY 的 media 元素，则调用该 media 元素的资源选择算法。
如果 insertedNode 的下一个兄弟元素是 img 元素，且其父元素是 picture 元素，则将此计为该 img 元素的相关变动。

source HTML 元素移除步骤，给定 removedNode 和 oldParent，如下：

如果 removedNode 的下一个兄弟元素是 img 元素，且 oldParent 是 picture 元素，则将此计为该 img 元素的相关变动。

IDL 属性 src，type，srcset，sizes 和 media 必须反映相应名称的内容属性。

如果作者不确定用户代理是否都能渲染所提供的媒体资源，作者可以监听最后一个 error 事件并触发回退行为：

<script>
 function fallback(video) {
   // replace <video> with its contents
   while (video.hasChildNodes()) {
     if (video.firstChild instanceof HTMLSourceElement)
       video.removeChild(video.firstChild);
     else
       video.parentNode.insertBefore(video.firstChild, video);
   }
   video.parentNode.removeChild(video);
 }
</script>
<video controls autoplay>
 <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
         onerror="fallback(parentNode)">
 ...
</video>

4.8.3 `img` 元素

Element/img

所有当前引擎支持。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLImageElement

所有当前引擎支持。

Firefox1+Safari1+Chrome1+

Opera8+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

流内容。

如果该元素有一个usemap属性: 交互内容。

显著内容。

此元素可以使用的上下文:

嵌入内容被期望的地方。

作为picture元素的子元素，在所有source元素之后。

无内容。

没有结束标签。

alt — 图像不可用时的替代文本

src — 资源地址

srcset — 不同情况下使用的图像，例如高分辨率显示器、小显示器等。

sizes — 不同页面布局的图像大小

crossorigin — 元素如何处理跨域请求

usemap — 要使用的图像映射的名称

ismap — 图像是否为服务器端图像映射

width — 水平尺寸

height — 垂直尺寸

referrerpolicy — 元素发起的referrer policy的fetches

decoding — 处理此图像进行展示时使用的解码提示

loading — 用于确定加载延迟

fetchpriority — 为元素发起的请求优先级设置fetches

可访问性注意事项:

如果元素具有非空的alt属性: 给作者; 给实现者。

否则: 给作者; 给实现者。

DOM接口:

[Exposed=Window,
 LegacyFactoryFunction=Image(optional unsigned long width, optional unsigned long height)]
interface HTMLImageElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString alt;
  [CEReactions] attribute USVString src;
  [CEReactions] attribute USVString srcset;
  [CEReactions] attribute DOMString sizes;
  [CEReactions] attribute DOMString? crossOrigin;
  [CEReactions] attribute DOMString useMap;
  [CEReactions] attribute boolean isMap;
  [CEReactions] attribute unsigned long width;
  [CEReactions] attribute unsigned long height;
  readonly attribute unsigned long naturalWidth;
  readonly attribute unsigned long naturalHeight;
  readonly attribute boolean complete;
  readonly attribute USVString currentSrc;
  [CEReactions] attribute DOMString referrerPolicy;
  [CEReactions] attribute DOMString decoding;
  [CEReactions] attribute DOMString loading;
  [CEReactions] attribute DOMString fetchPriority;

  Promise<undefined> decode();

  // also has obsolete members
};

img 元素表示一张图片。

img 元素有一个维度属性源，初始设置为元素本身。

HTMLImageElement/src

支持所有当前引擎。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

Element/img#attr-srcset

支持所有当前引擎。

Firefox38+Safari8+Chrome34+

Opera?Edge79+

Edge (旧版)≤18+Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

由src和srcset属性以及任何先前兄弟source元素的srcset属性（如果父元素是picture元素）给出的图像是嵌入的内容；alt属性的值为那些无法处理图像或禁用图像加载的用户提供等效内容（即它是img元素的回退内容）。

alt属性值的要求在一个单独的章节中描述。

src属性必须存在，并且必须包含一个有效的非空URL（可能被空格包围），引用一个非交互的、可选动画的图像资源，该资源既不是分页的也不是脚本的。

上述要求意味着图像可以是静态位图（例如PNG、GIF、JPEG）、单页矢量文档（单页PDF、包含SVG文档元素的XML文件）、动画位图（APNG、动画GIF）、动画矢量图形（包含SVG文档元素并使用声明性SMIL动画的XML文件）等。然而，这些定义排除了带有脚本的SVG文件、多页PDF文件、交互式MNG文件、HTML文档、纯文本文件等。[PNG] [GIF] [JPEG] [PDF] [XML] [APNG] [SVG] [MNG]

srcset属性也可以存在，并且是一个srcset属性。

srcset属性和src属性（如果未使用宽度描述符）为图像来源提供了源集（如果未选择source元素）。

如果srcset属性存在且有任何使用宽度描述符的图像候选字符串，则sizes属性也必须存在。如果未指定srcset属性，并且loading属性处于Lazy状态，则可以使用值“auto”指定sizes属性（ASCII大小写不敏感）。sizes属性是一个sizes属性，它为源集提供源尺寸（如果未选择source元素）。

img元素允许自动大小如果：

其loading属性处于Lazy状态，并且
其sizes属性的值为“auto”(ASCII大小写不敏感)，或以“auto,”(ASCII大小写不敏感)开头。

Attributes/crossorigin

支持所有当前引擎。

Firefox8+Safari6+Chrome13+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

crossorigin属性是一个CORS设置属性。其目的是允许具有跨源访问权限的第三方网站的图像与canvas一起使用。

referrerpolicy属性是一个引用策略属性。其目的是设置在引用策略时使用的获取图像。[REFERRERPOLICY]

decoding属性表示解码此图像的首选方法。如果存在，该属性必须是一个图像解码提示。此属性的缺省值和无效值都是auto状态。

HTMLImageElement/fetchPriority

FirefoxNo🔰 preview+102+

Opera?Edge102+

Edge (旧版)?Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

fetchpriority属性是一个获取优先级属性。其目的是设置在请求优先级时使用的获取图像。

loading属性是一个延迟加载属性。其目的是指示视口外图像的加载策略。

当loading属性的状态更改为Eager状态时，用户代理必须执行以下步骤：

令resumptionSteps为img元素的延迟加载恢复步骤。
如果resumptionSteps为null，则返回。
将img的延迟加载恢复步骤设置为null。
调用resumptionSteps。

<img src="1.jpeg" alt="1">
<img src="2.jpeg" loading=eager alt="2">
<img src="3.jpeg" loading=lazy alt="3">
<div id=very-large></div> <!-- Everything after this div is below the viewport -->
<img src="4.jpeg" alt="4">
<img src="5.jpeg" loading=lazy alt="5">

在上述示例中，图像按如下方式加载：

1.jpeg, 2.jpeg, 4.jpeg: 这些图像急切加载，并延迟窗口的加载事件。
3.jpeg: 由于位于视口中，该图像在布局已知时加载，但不会延迟窗口的加载事件。
5.jpeg: 该图像仅在滚动到视口中时加载，不会延迟窗口的加载事件。

建议开发者在延迟加载的图像上通过width和height属性指定首选的纵横比，即使CSS设置了图像的宽度和高度属性，以防止页面布局在图像加载后发生变化。

给定insertedNode，img的HTML元素插入步骤如下：

如果insertedNode的父元素是picture元素，那么将其视为insertedNode的相关突变。

给定removedNode和oldParent，img的HTML元素移除步骤如下：

如果oldParent是picture元素，那么将其视为removedNode的相关突变。

必须避免将img元素作为布局工具使用。特别是，img元素不应被用来显示透明图像，因为这些图像通常不会传达任何意义，也很少为文档增加有用的内容。

一个 img 元素表示的内容取决于 src 属性和 alt 属性。

如果 src 属性已设置，而 alt 属性设置为空字符串

该图片可能是装饰性的或补充内容，和文档中的其他信息重复。

如果图片是可用的且用户代理被配置为显示该图片，则该元素表示元素的图片数据。

否则，该元素表示无内容，可能会完全从渲染中省略。用户代理可能会通知用户有图片存在但已被省略。

如果 src 属性已设置，而 alt 属性设置为非空值

该图片是内容的关键部分；alt 属性提供了图片的文本等效或替代。

如果图片是可用的且用户代理被配置为显示该图片，则该元素表示元素的图片数据。

否则，该元素表示由 alt 属性给出的文本。用户代理可能会通知用户有图片存在但已被省略。

如果 src 属性已设置，而 alt 属性未设置

该图片可能是内容的关键部分，但没有可用的文本等效物。

在符合规范的文档中，缺少 alt 属性表示图片是内容的关键部分，但在生成图片时没有可用的文本替代。

如果图片是可用的且用户代理被配置为显示该图片，则该元素表示元素的图片数据。

如果图片有一个 src 属性，其值为空字符串，则该元素表示无内容。

否则，用户代理应显示某种指示，表明有一张图片未被渲染，并且如果用户请求，或用户代理配置为如此，或在响应导航时需要提供上下文信息，则提供图片的标题信息，按如下方式：

如果图片有一个 title 属性，其值非空字符串，则返回该属性的值。
如果图片是 figure 元素的后代，该元素有一个子 figcaption 元素，并且忽略 figcaption 元素及其后代，如果 figure 元素没有其他流内容后代，除了元素间的空白和 img 元素，则返回第一个这样的 figcaption 元素的内容。
返回无内容。（没有标题信息。）

如果 src 属性未设置，而 alt 属性设置为空字符串或 alt 属性完全未设置

该元素表示无内容。

否则

该元素表示 alt 属性给出的文本。

alt 属性不代表建议信息。用户代理不得以与 alt 属性内容相同的方式展示 title 属性的内容。

用户代理可以始终为用户提供显示任何图片或阻止显示任何图片的选项。用户代理也可以应用启发式方法来帮助用户在无法看到图片时利用图片，例如，由于视觉障碍或使用没有图形能力的文本终端。这些启发式方法可以包括，例如，对图片中找到的文本进行光学字符识别（OCR）。

虽然鼓励用户代理修复缺失的 alt 属性的情况，但作者不应依赖于这种行为。有关提供文本作为图片替代的要求详细描述如下。

img 元素的 img 元素的内容（如果有的话）在渲染时将被忽略。

usemap 属性（如果存在）可以指示该图片有一个相关的图片地图。

ismap 属性，当用于一个是 a 元素的后代元素上，并且该 href 属性存在时，表示该元素提供访问服务器端图片地图的功能。这影响了在相应的 a 元素上的事件处理。

ismap 属性是一个布尔属性。该属性不得在没有具有 a 元素且该元素上没有 href 属性的元素上指定。

使用 usemap 和 ismap 属性可能会导致在与 source 元素及在 media 属性指定的 picture 元素一起使用时，行为可能会令人困惑。

img 元素支持尺寸属性。

HTMLImageElement/alt

在所有当前引擎中支持。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLImageElement/srcset

在所有当前引擎中支持。

Firefox38+Safari8+Chrome34+

Opera?Edge79+

Edge（旧版）12+Internet Explorer无

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLImageElement/sizes

在所有当前引擎中支持。

Firefox38+Safari9.1+Chrome38+

Opera?Edge79+

Edge（旧版）13+Internet Explorer无

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

alt、src、srcset 和 sizes IDL 属性必须反映相应的同名内容属性。

HTMLImageElement/crossOrigin

在所有当前引擎中支持。

Firefox8+Safari6+Chrome13+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer11

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

crossOrigin IDL 属性必须反映 crossorigin 内容属性，限制为已知值。

HTMLImageElement/useMap

在所有当前引擎中支持。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

useMap IDL 属性必须反映 usemap 内容属性。

HTMLImageElement/isMap

在所有当前引擎中支持。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

isMap IDL 属性必须反映 ismap 内容属性。

HTMLImageElement/referrerPolicy

在所有当前引擎中支持。

Firefox50+Safari14+Chrome52+

Opera?Edge79+

Edge（旧版）?Internet Explorer无

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

referrerPolicy IDL 属性必须反映 referrerpolicy 内容属性，限制为已知值。

HTMLImageElement/decoding

在所有当前引擎中支持。

Firefox63+Safari11.1+Chrome65+

Opera?Edge79+

Edge（旧版）?Internet Explorer无

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

SVGImageElement/decoding

Firefox63+Safari无Chrome65+

Opera?Edge79+

Edge（旧版）?Internet Explorer无

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

decoding IDL 属性必须反映 decoding 内容属性，限制为已知值。

HTMLImageElement/loading

在所有当前引擎中支持。

Firefox75+Safari15.4+Chrome77+

Opera?Edge79+

Edge（旧版）?Internet Explorer无

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

loading IDL 属性必须反映 loading 内容属性，限制为已知值。

fetchPriority IDL 属性必须反映 fetchpriority 内容属性，限制为已知值。

image.width [ = value ] HTMLImageElement/width 在所有当前引擎中都受支持。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

image.height [ = value ] HTMLImageElement/height 在所有当前引擎中都受支持。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

这些属性返回图像的实际渲染尺寸，如果尺寸未知则返回 0。

可以设置这些属性，以改变相应的内容属性。

image.naturalWidth HTMLImageElement/naturalWidth 在所有当前引擎中都受支持。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

image.naturalHeight HTMLImageElement/naturalHeight 在所有当前引擎中都受支持。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

这些属性返回图像的自然尺寸，如果尺寸未知则返回 0。

image.complete HTMLImageElement/complete 在所有当前引擎中都受支持。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

如果图像已经完全下载，或者没有指定图像，则返回 true；否则返回 false。

image.currentSrc HTMLImageElement/currentSrc 在所有当前引擎中都受支持。 Firefox38+Safari9.1+Chrome38+ Opera?Edge79+ Edge (旧版)13+Internet Explorer无 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回图像的绝对 URL。

image.decode() HTMLImageElement/decode 在所有当前引擎中都受支持。 Firefox68+Safari11.1+Chrome64+ Opera?Edge79+ Edge (旧版)?Internet Explorer无 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? SVGImageElement/decode Firefox68+Safari无Chrome64+ Opera?Edge79+ Edge (旧版)?Internet Explorer无 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

该方法使用户代理对图像进行解码，以并行方式进行解码，返回一个在解码完成时会被兑现的 Promise。

如果图像无法解码，Promise 将被拒绝，并返回一个 "EncodingError" DOMException。

image = new Image([ width [, height ] ]) HTMLImageElement/Image 在所有当前引擎中都受支持。 Firefox1+Safari1+Chrome1+ Opera8+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

返回一个新的 img 元素，其 width 和 height 属性设置为传入相关参数的值（如果适用）。

IDL 属性 width 和 height 必须返回图像的实际渲染宽度和高度，单位为 CSS 像素，如果图像正在渲染；否则返回图像的密度修正的自然宽度和高度，单位为 CSS 像素，如果图像具有密度修正的自然宽度和高度并且是可用但未渲染；否则返回 0，如果图像不可可用或没有密度修正的自然宽度和高度。 [CSS]

在设置时，这些属性必须表现得像是反映了具有相同名称的内容属性。

IDL 属性 naturalWidth 和 naturalHeight 必须返回图像的密度修正的自然宽度和高度，单位为 CSS 像素，如果图像具有密度修正的自然宽度和高度并且是可用，否则返回 0。 [CSS]

由于图像的密度修正的自然宽度和高度会考虑其元数据中指定的任何方向，naturalWidth 和 naturalHeight 反映了在应用任何需要的旋转以正确定位图像后的尺寸，而不管 'image-orientation' 属性的值。

complete 获取步骤如下：

如果以下任意条件为真：
- 同时省略了 src 属性和 srcset 属性；
- 省略了 srcset 属性，并且 src 属性的值为空字符串；
- img 元素的当前请求的状态为完全可用并且其挂起请求为 null；或
- img 元素的当前请求的状态为损坏并且其挂起请求为 null，
则返回 true。
返回 false。

currentSrc IDL 属性必须返回 img 元素的当前请求的当前 URL。

decode() 方法在被调用时，必须执行以下步骤：

创建一个新的 promise 对象，命名为 promise。
将一个微任务排入队列，以执行以下步骤：
这是因为更新图像数据也在微任务中进行。因此，为了使以下代码正常工作
```
img.src = "stars.jpg";
img.decode();
```
正确解码stars.jpg，我们需要将任何处理延迟一个微任务。
1. 如果以下任意条件为真：
  - this 的节点文档不是完全激活；或
  - this 的当前请求的状态为损坏，
  则用 "EncodingError" DOMException 拒绝 promise。
2. 否则，并行地等待以下任意情况发生，并执行相应的操作：
  
  此 img 元素的节点文档停止完全激活
  
  此 img 元素的当前请求更改或被修改
  
  此 img 元素的当前请求的状态变为损坏
  
  用 "EncodingError" DOMException 拒绝 promise。
  
  此 img 元素的当前请求的状态变为完全可用
  
  解码图像。
  
  如果不需要对图像进行解码（例如，因为它是矢量图形），则用 undefined 解析 promise。
  
  如果解码失败（例如由于图像数据无效），则用 "EncodingError" DOMException 拒绝 promise。
  
  如果解码过程成功完成，则用 undefined 解析 promise。
  
  用户代理应确保解码后的媒体数据保持可用，至少直到下一个成功的更新渲染步骤结束。这是 API 合同的重要部分，应该尽可能不被破坏。（通常，只有在低内存情况下需要驱逐解码图像数据，或当图像过大以至于无法在此期间保持解码状态时，这种情况才会被违反。）
  
  动画图像只有在所有帧加载完毕后才会变为完全可用。因此，即使实现可以在此之前解码第一帧，上述步骤也不会这样做，而是等待所有帧都可用。
返回 promise。

没有 decode() 方法时，加载一个 img 元素并显示它的过程可能如下所示：

const img = new Image();
img.src = "nebula.jpg";
img.onload = () => {
    document.body.appendChild(img);
};
img.onerror = () => {
    document.body.appendChild(new Text("Could not load the nebula :("));
};

然而，这可能会导致明显的掉帧，因为在将图像插入到 DOM 中后发生的绘制会导致主线程上进行同步解码。

这可以使用 decode() 方法来重写：

const img = new Image();
img.src = "nebula.jpg";
img.decode().then(() => {
    document.body.appendChild(img);
}).catch(() => {
    document.body.appendChild(new Text("Could not load the nebula :("));
});

这种后者的形式避免了原始方法中的掉帧，通过允许用户代理并行解码图像，只有在解码过程完成后才将其插入到 DOM 中（从而导致它被绘制）。

由于 decode() 方法尝试确保解码后的图像数据至少在一个帧内可用，因此可以与 requestAnimationFrame() API 结合使用。这意味着它可以与确保所有 DOM 修改都作为动画帧回调一起批处理的编码风格或框架一起使用：

const container = document.querySelector("#container");

const { containerWidth, containerHeight } = computeDesiredSize();
requestAnimationFrame(() => {
 container.style.width = containerWidth;
 container.style.height = containerHeight;
});

// ...

const img = new Image();
img.src = "supernova.jpg";
img.decode().then(() => {
    requestAnimationFrame(() => container.appendChild(img));
});

提供了一个遗留的工厂函数用于创建 HTMLImageElement 对象（除了 DOM 中的工厂方法，如 createElement()）: Image(width, height)。当被调用时，遗留工厂函数必须执行以下步骤：

让 document 为当前的全局对象的关联 Document。
让 img 为在 document 上创建一个元素的结果，指定元素为 img，命名空间为 HTML 命名空间。
如果提供了 width，则使用 "width" 和 width 为 img 设置属性值。
如果提供了 height，则使用 "height" 和 height 为 img 设置属性值。
返回 img。

一张图片在不同的上下文中可能需要不同的替代文本。

在以下每种情况下，使用的是相同的图片，但 alt 文本每次都不同。这张图片是瑞士日内瓦州卡鲁日市的市徽。

这里它被用作补充图标：

<p>I lived in <img src="carouge.svg" alt=""> Carouge.</p>

这里它被用作代表城镇的图标：

<p>Home town: <img src="carouge.svg" alt="Carouge"></p>

这里它作为文本的一部分用于城镇：

<p>Carouge has a coat of arms.</p>
<p><img src="carouge.svg" alt="The coat of arms depicts a lion, sitting in front of a tree."></p>
<p>It is used as decoration all over the town.</p>

这里它用来支持类似的文本，其中描述被给出，并且作为图像的补充，而不是替代图像：

<p>Carouge has a coat of arms.</p>
<p><img src="carouge.svg" alt=""></p>
<p>The coat of arms depicts a lion, sitting in front of a tree.
It is used as decoration all over the town.</p>

这里它作为故事的一部分使用：

<p>She picked up the folder and a piece of paper fell out.</p>
<p><img src="carouge.svg" alt="Shaped like a shield, the paper had a
red background, a green tree, and a yellow lion with its tongue
hanging out and whose tail was shaped like an S."></p>
<p>She stared at the folder. S! The answer she had been looking for all
this time was simply the letter S! How had she not seen that before? It all
came together now. The phone call where Hector had referred to a lion's tail,
the time Maria had stuck her tongue out...</p>

在出版时未知图像的具体内容，只知道它将是某种徽章，因此无法提供替代文本，而是仅在 title 属性中提供简短的图像说明：

<p>The last user to have uploaded a coat of arms uploaded this one:</p>
<p><img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms."></p>

Ideally, the author would find a way to provide real replacement text even in this case, e.g. by asking the previous user. Not providing replacement text makes the document more difficult to use for people who are unable to view images, e.g. blind users, or users or very low-bandwidth connections or who pay by the byte, or users who are forced to use a text-only web browser.

以下是一些更多的示例，展示了相同的图片在不同的上下文中使用，每次都有不同的适当替代文本。

<article>
 <h1>My cats</h1>
 <h2>Fluffy</h2>
 <p>Fluffy is my favorite.</p>
 <img src="fluffy.jpg" alt="She likes playing with a ball of yarn.">
 <p>She's just too cute.</p>
 <h2>Miles</h2>
 <p>My other cat, Miles just eats and sleeps.</p>
</article>

<article>
 <h1>Photography</h1>
 <h2>Shooting moving targets indoors</h2>
 <p>The trick here is to know how to anticipate; to know at what speed and
 what distance the subject will pass by.</p>
 <img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be
 photographed quite nicely using this technique.">
 <h2>Nature by night</h2>
 <p>To achieve this, you'll need either an extremely sensitive film, or
 immense flash lights.</p>
</article>

<article>
 <h1>About me</h1>
 <h2>My pets</h2>
 <p>I've got a cat named Fluffy and a dog named Miles.</p>
 <img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy.">
 <p>My dog Miles and I like go on long walks together.</p>
 <h2>music</h2>
 <p>After our walks, having emptied my mind, I like listening to Bach.</p>
</article>

<article>
 <h1>Fluffy and the Yarn</h1>
 <p>Fluffy was a cat who liked to play with yarn. She also liked to jump.</p>
 <aside><img src="fluffy.jpg" alt="" title="Fluffy"></aside>
 <p>She would play in the morning, she would play in the evening.</p>
</article>

4.8.4 图像

4.8.4.1 介绍

本节为非规范性内容。

要在 HTML 中嵌入图像，当只有一个图像资源时，使用 img 元素及其 src 属性。

<h2>From today's featured article</h2>
<img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
was an English <a href="/wiki/Music_hall">music hall</a> singer, ...

然而，有许多情况下，作者可能希望使用多个图像资源供用户代理选择：

不同的用户可能具有不同的环境特征：
- 用户的物理屏幕尺寸可能彼此不同。
  
  一部手机的屏幕对角线可能为4英寸，而一台笔记本电脑的屏幕对角线可能为14英寸。
  
  这仅在图像的呈现大小依赖于视口大小时相关。
- 用户的屏幕像素密度可能彼此不同。
  
  无论物理屏幕尺寸如何，一部手机的屏幕每英寸的物理像素数量可能是另一部手机的三倍。
- 用户的缩放级别可能彼此不同，或者单个用户的缩放级别可能随着时间而变化。
  
  用户可能会放大某张图像，以便获得更详细的视图。
  
  缩放级别和屏幕像素密度（前一点）都可以影响每CSS像素的物理屏幕像素数量。这个比例通常称为设备像素比。
- 用户的屏幕方向可能彼此不同，或者单个用户的屏幕方向可能随着时间而变化。
  
  平板电脑可以竖着或旋转90度，因此屏幕可以是“竖屏”或“横屏”。
- 用户的网络速度、网络延迟和带宽成本可能彼此不同，或者单个用户的网络条件可能随时间变化。
  
  用户可能在工作时使用快速、低延迟且成本固定的连接，在家时使用慢速、低延迟且成本固定的连接，在其他地方使用可变速度、高延迟和可变成本的连接。
作者可能希望根据通常是视口的宽度，显示相同的图像内容但呈现不同的大小。这通常称为视口基于选择。

一个网页可能在顶部有一个横跨整个视口宽度的横幅。在这种情况下，图像的呈现大小取决于屏幕的物理大小（假设浏览器窗口最大化）。

另一个网页可能将图像分列，对于屏幕物理尺寸较小的设备使用一列，对于屏幕物理尺寸中等的设备使用两列，对于屏幕物理尺寸较大的设备使用三列，每种情况中的图像呈现大小会有所变化以填满视口。在这种情况下，即使屏幕较小，一列布局中的图像也可能比两列布局中的图像要大。
作者可能希望根据图像的呈现大小显示不同的图像内容。这通常称为艺术方向。

当网页在大物理尺寸的屏幕上查看时（假设浏览器窗口最大化），作者可能希望包括一些围绕图像关键部分的较少相关部分。当同一网页在小物理尺寸的屏幕上查看时，作者可能希望仅显示图像的关键部分。
作者可能希望使用不同的图像格式显示相同的图像内容，具体取决于用户代理支持哪些图像格式。这通常称为图像格式基于选择。

一个网页可能有一些图像使用JPEG、WebP和JPEG XR图像格式，其中后两种格式具有比JPEG更好的压缩能力。由于不同的用户代理支持不同的图像格式，有些格式提供更好的压缩比，作者希望将更好的格式提供给支持这些格式的用户代理，同时为不支持这些格式的用户代理提供JPEG备选格式。

上述情况并不是相互排斥的。例如，将不同的资源结合使用来应对不同的设备像素比和不同的艺术方向是合理的。

虽然可以通过脚本解决这些问题，但这样做会引入一些其他问题：

一些用户代理会在脚本有机会运行之前，主动下载HTML标记中指定的图像，以便更快地完成网页加载。如果脚本更改要下载的图像，用户代理可能会开始两个独立的下载，这可能会导致更糟糕的页面加载性能。
如果作者避免在HTML标记中指定任何图像，而是通过脚本实例化单个下载，这样可以避免上述的双重下载问题，但对于禁用脚本的用户，图像将完全不会下载，同时激进的图像下载优化也将被禁用。

考虑到这些问题，本规范引入了一些功能，以声明性的方式解决上述问题。

基于设备像素比的选择，当图像的渲染大小是固定的

src 和 srcset 属性可以用于 img 元素，使用 x 描述符提供多个仅在大小上有所不同的图像（较小的图像是较大图像的缩小版）。

当图像的渲染大小依赖于视口宽度（基于视口的选择）时，x 描述符是不适用的，但可以与艺术方向一起使用。

<h2>From today's featured article</h2>
<img src="/uploads/100-marie-lloyd.jpg"
     srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
     alt="" width="100" height="150">
<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
was an English <a href="/wiki/Music_hall">music hall</a> singer, ...

用户代理可以根据用户屏幕的像素密度、缩放级别以及可能的其他因素（如用户的网络条件）选择任何给定的资源。

为了与旧版用户代理兼容，这些用户代理尚不理解 srcset 属性，必须在 img 元素的 src 属性中指定一个 URL。这将导致即使在旧版用户代理中也会显示一些有用的内容（尽管可能分辨率较低）。对于新的用户代理，src 属性参与资源选择，就像它是在 srcset 中以 1x 描述符指定的那样。

图像的渲染大小在 width 和 height 属性中给出，这使得用户代理可以在图像下载之前为其分配空间。

基于视口的选择

srcset 和 sizes 属性可以使用 w 描述符来提供多种仅在尺寸上有所不同的图像（较小的图像是较大图像的缩小版）。

在此示例中，一个横幅图像占据整个视口的宽度（使用适当的 CSS）。

<h1><img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
     src="wolf-400.jpg" alt="The rad wolf"></h1>

用户代理将根据指定的 w 描述符和 sizes 属性中指定的渲染尺寸来计算每个图像的实际像素密度。然后，它可以根据用户屏幕的像素密度、缩放级别以及其他可能的因素（如用户的网络条件）选择任何给定的资源。

如果用户的屏幕宽度为 320 CSS 像素，这相当于指定 wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x。另一方面，如果用户的屏幕宽度为 1200 CSS 像素，这相当于指定 wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x。通过使用 w 描述符和 sizes 属性，用户代理可以选择正确的图像源进行下载，无论用户设备的大小如何。

为了向后兼容，在 img 元素的 src 属性中指定了一个 URL。在新的用户代理中，当 srcset 属性使用 w 描述符时，src 属性会被忽略。

在此示例中，网页有三种布局，取决于视口的宽度。窄布局有一列图像（每个图像的宽度约为 100%），中间布局有两列图像（每个图像的宽度约为 50%），最宽布局有三列图像，并有一些页面边距（每个图像的宽度约为 33%）。在视口宽度分别为 30em 和 50em 时，会在这些布局之间切换。

<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
     srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
     src="swing-400.jpg" alt="Kettlebell Swing">

sizes 属性设置了在 30em 和 50em 处的布局断点，并声明在这些断点之间的图像尺寸为 100vw、50vw 或 calc(33vw - 100px)。这些尺寸不一定要与 CSS 中指定的实际图像宽度完全匹配。

用户代理将从 sizes 属性中选择一个宽度，使用第一个返回值为真的 <media-condition>（括号中的部分），或者如果所有条件都评估为假，则使用最后一个值（calc(33vw - 100px)）。

例如，如果视口宽度为 29em，则 (max-width: 30em) 评估为真，使用 100vw，因此图像尺寸（用于资源选择）为 29em。如果视口宽度为 32em，则 (max-width: 30em) 评估为假，但 (max-width: 50em) 评估为真，使用 50vw，因此图像尺寸（用于资源选择）为 16em（视口宽度的一半）。注意，稍宽的视口会因为不同的布局而导致图像变小。

用户代理可以像前一个示例一样计算实际的像素密度并选择合适的资源。

此示例与前一个示例相同，但图像是延迟加载的。在这种情况下，sizes 属性可以使用 auto 关键字，用户代理将使用 width 属性（或 CSS 中指定的宽度）作为源大小。

<img loading="lazy" width="200" height="200" sizes="auto"
     srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
     src="swing-400.jpg" alt="Kettlebell Swing">

为了更好地向后兼容不支持 auto 关键字的旧版用户代理，可以在需要时指定后备尺寸。

<img loading="lazy" width="200" height="200"
     sizes="auto, (max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
     srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
     src="swing-400.jpg" alt="Kettlebell Swing">

艺术方向基于选择

picture 元素和 source 元素，加上 media 属性，可以用来提供多种图像，图像内容有所不同（例如，小图像可能是大图像的裁剪版本）。

<picture>
  <source media="(min-width: 45em)" srcset="large.jpg">
  <source media="(min-width: 32em)" srcset="med.jpg">
  <img src="small.jpg" alt="The wolf runs through the snow.">
</picture>

用户代理将选择第一个 source 元素，其 media 属性的媒体查询匹配，然后从其 srcset 属性中选择一个合适的 URL。

图像的呈现大小取决于选择的资源。要指定用户代理在下载图像之前可以使用的尺寸，可以使用 CSS。

img { width: 300px; height: 300px }
@media (min-width: 32em) { img { width: 500px; height:300px } }
@media (min-width: 45em) { img { width: 700px; height:400px } }

此示例结合了艺术方向和设备像素比基于选择。提供一个占据视口一半的横幅，有两个版本，一个用于宽屏幕，一个用于窄屏幕。

<h1>
 <picture>
  <source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">
  <img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="The Breakfast Combo">
 </picture>
</h1>

基于图像格式的选择

type 属性在 source 元素上可以用来提供多种不同格式的图像。

<h2>From today's featured article</h2>
<picture>
 <source srcset="/uploads/100-marie-lloyd.webp" type="image/webp">
 <source srcset="/uploads/100-marie-lloyd.jxr" type="image/vnd.ms-photo">
 <img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
</picture>
<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
was an English <a href="/wiki/Music_hall">music hall</a> singer, ...

在这个示例中，用户代理将选择第一个具有受支持 MIME 类型的 type 属性的 source 元素。如果用户代理支持 WebP 图像，将选择第一个 source 元素。如果不支持，但用户代理支持 JPEG XR 图像，将选择第二个 source 元素。如果这两种格式都不支持，将选择 img 元素。

4.8.4.1.1 自适应图像

本节为非规范性内容。

CSS 和媒体查询可用于构建根据用户环境动态调整的图形页面布局，特别是针对不同的视口尺寸和像素密度。然而，对于内容，CSS 并没有帮助；取而代之的是，我们有 img 元素的 srcset 属性和 picture 元素。本节将通过一个示例说明如何使用这些功能。

考虑一种情况，在宽屏（宽于 600 CSS 像素）上使用名为 a-rectangle.png 的 300×150 图像，但在较小屏幕（600 CSS 像素及以下）上使用名为 a-square.png 的 100×100 图像。其标记如下所示：

<figure>
 <picture>
  <source srcset="a-square.png" media="(max-width: 600px)">
  <img src="a-rectangle.png" alt="Barney Frank wears a suit and glasses.">
 </picture>
 <figcaption>Barney Frank, 2011</figcaption>
</figure>

有关在 alt 属性中放置内容的详细信息，请参阅提供文本作为图像替代的要求一节。

问题在于，当图像加载时，用户代理不一定知道使用什么尺寸的图像。为了避免在页面加载时多次重新布局，可以使用 CSS 和 CSS 媒体查询来提供尺寸：

<style>
 #a { width: 300px; height: 150px; }
 @media (max-width: 600px) { #a { width: 100px; height: 100px; } }
</style>
<figure>
 <picture>
  <source srcset="a-square.png" media="(max-width: 600px)">
  <img src="a-rectangle.png" alt="Barney Frank wears a suit and glasses." id="a">
 </picture>
 <figcaption>Barney Frank, 2011</figcaption>
</figure>

或者，可以使用 width 和 height 属性来为旧版用户代理提供宽度和高度，仅使用 CSS 为支持 picture 的用户代理提供样式：

<style media="(max-width: 600px)">
 #a { width: 100px; height: 100px; }
</style>
<figure>
 <picture>
  <source srcset="a-square.png" media="(max-width: 600px)">
  <img src="a-rectangle.png" width="300" height="150"
  alt="Barney Frank wears a suit and glasses." id="a">
 </picture>
 <figcaption>Barney Frank, 2011</figcaption>
</figure>

带有img元素的src属性，用于提供图像的URL，以便支持不兼容picture元素的旧版用户代理。这就引出了一个问题：在src属性中提供哪张图片。

如果作者希望在旧版用户代理中提供最大图像，标记可以如下：

<picture>
 <source srcset="pear-mobile.jpeg" media="(max-width: 720px)">
 <source srcset="pear-tablet.jpeg" media="(max-width: 1280px)">
 <img src="pear-desktop.jpeg" alt="The pear is juicy.">
</picture>

然而，如果旧版移动用户代理更为重要，可以在source元素中列出所有三个图像，完全覆盖src属性。

<picture>
 <source srcset="pear-mobile.jpeg" media="(max-width: 720px)">
 <source srcset="pear-tablet.jpeg" media="(max-width: 1280px)">
 <source srcset="pear-desktop.jpeg">
 <img src="pear-mobile.jpeg" alt="The pear is juicy.">
</picture>

由于此时，支持picture的用户代理实际上完全忽略了src属性，因此src属性可以默认任何图像，包括既不是最小也不是最大的图像：

<picture>
 <source srcset="pear-mobile.jpeg" media="(max-width: 720px)">
 <source srcset="pear-tablet.jpeg" media="(max-width: 1280px)">
 <source srcset="pear-desktop.jpeg">
 <img src="pear-tablet.jpeg" alt="The pear is juicy.">
</picture>

上述max-width媒体特性用于指定图像适用的最大（视口）尺寸。也可以使用min-width。

<picture>
 <source srcset="pear-desktop.jpeg" media="(min-width: 1281px)">
 <source srcset="pear-tablet.jpeg" media="(min-width: 721px)">
 <img src="pear-mobile.jpeg" alt="The pear is juicy.">
</picture>

4.8.4.2 `source`、`img` 和 `link` 元素的共同属性

4.8.4.2.1 Srcset 属性

srcset 属性是一个在本节中定义了要求的属性。

如果存在，其值必须由一个或多个图像候选字符串组成，每个字符串之间用 U+002C 逗号字符 (,) 分隔。如果一个图像候选字符串不包含描述符且 URL 后面没有 ASCII 空白字符，则下一个图像候选字符串（如果有的话）必须以一个或多个 ASCII 空白字符开头。

一个图像候选字符串由以下组件组成，按顺序排列，并有以下列表中描述的进一步限制：

零个或多个 ASCII 空白字符。
一个有效的非空 URL，不能以 U+002C 逗号字符 (,) 开头或结尾，引用一个非交互式的、可选动画的图像资源，该资源既不是分页的也不是脚本化的。
零个或多个 ASCII 空白字符。
零个或一个以下项：
- 一个宽度描述符，由以下部分组成：ASCII 空白字符，一个有效的非负整数，表示一个大于零的数字，代表宽度描述符值，以及一个 U+0077 拉丁小写字母 W 字符。
- 一个像素密度描述符，由以下部分组成：ASCII 空白字符，一个有效的浮点数，表示一个大于零的数字，代表像素密度描述符值，以及一个 U+0078 拉丁小写字母 X 字符。
零个或多个 ASCII 空白字符。

对于具有相同宽度描述符值的元素，不能有一个图像候选字符串，其值与另一个图像候选字符串的宽度描述符值相同。

对于具有相同像素密度描述符值的元素，不能有一个图像候选字符串，其值与另一个图像候选字符串的像素密度描述符值相同。为了满足此要求，没有描述符的图像候选字符串等同于具有 1x 描述符的图像候选字符串。

如果某个元素的图像候选字符串指定了宽度描述符，那么该元素的所有其他图像候选字符串也必须指定宽度描述符。

在图像候选字符串的宽度描述符中指定的宽度必须与由该图像候选字符串的 URL 提供的资源中的自然宽度匹配（如果该资源具有自然宽度）。

如果某个元素具有 sizes 属性，那么该元素的所有图像候选字符串必须指定宽度描述符。

4.8.4.2.2 Sizes 属性

sizes 属性是一个具有本节定义的要求的属性。

如果存在，该属性的值必须是有效的源尺寸列表。

有效的源尺寸列表是一个匹配以下语法的字符串：[CSSVALUES] [MQ]

<source-size-list> = <source-size>#? , <source-size-value>
<source-size> = <media-condition> <source-size-value> | auto
<source-size-value> = <length> | auto

<source-size-value> 如果是一个 <length>，必须是非负的，并且不能使用除数学函数之外的 CSS 函数。

关键字 auto 是一个在解析 sizes 属性中计算的宽度。如果存在，它必须是第一个条目，整个 <source-size-list> 值必须是字符串 "auto"（ASCII 不区分大小写）或者以字符串 "auto," 开头（ASCII 不区分大小写）。

如果启动了图像加载的 img 元素（通过更新图像数据或响应环境变化算法）允许自动尺寸并且正在渲染，那么 auto 就是具体对象尺寸宽度。否则，auto 值将被忽略，使用下一个源尺寸（如果有）。

auto 关键字可以在 sizes 属性中指定在 source 元素中，也可以在 sizes 属性中指定在 img 元素中，前提是满足以下条件。否则，不得指定 auto。

该元素是一个 source 元素，且有一个后续的 img 元素。
该元素是一个 img 元素。
在上述任一条件下引用的 img 元素允许自动尺寸。

此外，强烈建议使用 width 和 height 属性或使用 CSS 指定尺寸。如果未指定尺寸，图像可能会以 300x150 的尺寸呈现，因为 sizes="auto" 在渲染部分中意味着 contain-intrinsic-size: 300px 150px。

<source-size-value> 提供了图像的预期布局宽度。作者可以使用 <media-condition> 指定不同环境下的不同宽度。

在 <source-size-value> 中不允许使用百分比，以避免混淆其相对参照。可以使用 'vw' 单位来表示相对于视口宽度的尺寸。

4.8.4.3 处理模型

一个 img 元素有一个当前请求和一个待处理请求。当前请求初始设置为一个新的图像请求。待处理请求初始设置为 null。

一个图像请求有一个状态、一个当前 URL 和一个图像数据。

一个图像请求的状态是以下之一：

不可用: 用户代理尚未获取任何图像数据，或已获取部分或全部图像数据但尚未解码足够的图像以获取图像尺寸。
部分可用: 用户代理已获取部分图像数据，并且至少图像尺寸是可用的。
完全可用: 用户代理已获取所有图像数据，并且至少图像尺寸是可用的。
损坏: 用户代理已获取所有它能获取的图像数据，但无法解码图像以获取图像尺寸（例如图像已损坏，或格式不受支持，或无法获取数据）。

一个图像请求的当前 URL 初始为空字符串。

一个图像请求的图像数据是解码后的图像数据。

当一个图像请求的状态为部分可用或完全可用时，该图像请求被称为可用。

当一个 img 元素的当前请求的状态为完全可用并且用户代理能够无错误地解码媒体数据，则该 img 元素被称为完全可解码。

一个图像请求的状态初始为不可用。

当一个 img 元素的当前请求为可用时，该 img 元素提供一个绘图源，其宽度为图像的密度校正自然宽度（如果有），高度为图像的密度校正自然高度（如果有），外观为图像的自然外观。

一个 img 元素被称为使用 srcset 或 picture，如果它有一个指定的 srcset 属性，或者如果它的父元素是一个 picture 元素。

每个 img 元素都有一个最后选择的源，其初始值必须为 null。

每个图像请求都有一个当前像素密度，其初始值必须为 1。

每个图像请求都有首选密度校正尺寸，它要么是包含宽度和高度的结构，要么为 null。初始值必须为 null。

要确定一个 img 元素 img 的密度校正自然宽度和高度：

让 dim 成为 img 的当前请求的首选密度校正尺寸。

首选密度校正尺寸是根据图像中的元信息在准备图像以进行展示算法中设置的。
如果 dim 为 null，将 dim 设置为 img 的自然尺寸。
将 dim 的宽度设置为 dim 的宽度除以 img 的当前请求的当前像素密度。
将 dim 的高度设置为 dim 的高度除以 img 的当前请求的当前像素密度。
返回 dim。

例如，如果当前像素密度为 3.125，这意味着每 CSS 英寸有 300 个设备像素，因此如果图像数据为 300x600，则它具有 96 CSS 像素乘 192 CSS 像素的密度校正自然宽度和高度。

所有 img 和 link 元素都与一个源集关联。

一个源集是一个有序的零个或多个图像源和一个源大小。

一个图像源是一个 URL，并且可以选择地包含一个像素密度描述符或一个宽度描述符。

一个源大小是一个 <source-size-value>。当一个源大小具有相对于视口的单位时，必须相对于 img 元素的节点文档的视口进行解释。其他单位的解释与媒体查询中相同。[MQ]

本节中的算法的解析错误表示输入和要求之间的非致命性不匹配。鼓励用户代理以某种方式公开解析错误。

在确定图像的类型及其是否为有效图像时，图像是否成功获取（例如，响应状态是否为成功状态）必须被忽略。

这允许服务器返回带有错误响应的图像，并使其显示出来。

用户代理应该应用图像嗅探规则来确定图像的类型，并且图像的关联内容类型头给出 official type。如果这些规则没有应用，那么图像的类型必须是图像的关联内容类型头给出的类型。

用户代理不得使用 img 元素支持非图像资源（例如，其文档元素为 HTML 元素的 XML 文件）。用户代理不得运行嵌入图像资源中的可执行代码（例如，脚本）。用户代理只能显示多页资源的第一页（例如，PDF 文件）。用户代理不得允许资源以交互方式工作，但应尊重资源中的任何动画。

本规范没有指定支持哪些图像类型。

4.8.4.3.1 何时获取图像

默认情况下，图像会立即获取。用户代理可以为用户提供按需获取图像的选项（例如，带宽受限的用户可能会使用此选项）。

在立即获取图像时，用户代理必须在每次创建元素或发生相关变更时，使用 重新启动动画 标志（如果这样规定）同步地更新图像数据。

在按需获取图像时，用户代理必须在需要图像数据时（即按需）更新图像数据，但仅在 img 元素的当前请求的状态为不可用时进行。当 img 元素经历了相关变更时，如果用户代理仅按需获取图像，则 img 元素的当前请求的状态必须返回到不可用。

4.8.4.3.2 对 DOM 变更的响应

一个 img 元素的相关变更如下：

元素的 src, srcset, width, 或 sizes 属性被设置、改变或移除。
元素的 src 属性被设置为与之前相同的值。这必须为更新图像数据算法设置 重新启动动画 标志。
元素的 crossorigin 属性的状态发生变化。
元素的 referrerpolicy 属性的状态发生变化。
img 或 source 元素的 HTML 元素插入步骤或 HTML 元素移除步骤将变更计为相关变更。
元素的父元素是 picture 元素，并且一个 source 元素作为前一个兄弟元素，其 srcset, sizes, media, type, width 或 height 属性被设置、改变或移除。
元素的采用步骤被执行。
如果元素允许自动尺寸：元素开始或停止被渲染，或其具体对象尺寸宽度发生变化。这必须为更新图像数据算法设置 可能省略事件 标志。

4.8.4.3.3 可用图像列表

每个 Document 对象必须有一个可用图像列表。列表中的每个图像由一个元组标识，该元组包括一个绝对 URL、一个 CORS 设置属性模式，以及（如果模式不是无 CORS）一个源。每个图像还有一个忽略更高层缓存标志。用户代理可以在任何时候将一个 Document 对象的可用图像列表复制到另一个对象（例如，当 Document 被创建时，用户代理可以将其他 Document 中加载的所有图像添加到此列表），但在这样做时不得更改复制条目的键，并且必须取消设置忽略更高层缓存标志。用户代理也可以在任何时候从这些列表中移除图像（例如，为了节省内存）。用户代理必须根据资源的更高层缓存语义（例如 HTTP `Cache-Control` 响应头）适当地移除可用图像列表中的条目，当忽略更高层缓存标志未设置时。

可用图像列表旨在支持在将 src 属性更改为先前已加载的 URL 时的同步切换，并避免在同一文档中重新下载图像，即使它们不允许 HTTP 缓存。它不用于避免在先前图像仍在加载时重新下载相同的图像。

用户代理还可以将图像数据单独存储在可用图像列表之外。

例如，如果一个资源具有 HTTP 响应头 `Cache-Control: must-revalidate`，并且其忽略更高层缓存标志未设置，用户代理会从可用图像列表中移除它，但可以单独保留图像数据，并在服务器响应 `304 Not Modified` 状态时使用该数据。

4.8.4.3.4 解码图像

图像数据通常会被编码以减少文件大小。这意味着为了让用户代理将图像呈现到屏幕上，需要对数据进行解码。解码是将图像的媒体数据转换为适合屏幕呈现的位图形式的过程。请注意，这一过程相对于其他内容呈现过程可能较慢。因此，用户代理可以选择何时执行解码，以创建最佳的用户体验。

图像解码被称为同步解码如果它在完成之前阻止了其他内容的呈现。通常，这会使图像和其他内容同时原子性地呈现。然而，这种呈现会被解码所需的时间延迟。

图像解码被称为异步解码如果它不会阻止其他内容的呈现。这会使非图像内容的呈现更快。然而，直到解码完成之前，图像内容在屏幕上是缺失的。一旦解码完成，屏幕将更新为图像。

在同步和异步解码模式下，最终内容呈现到屏幕上所经过的时间相同。主要的区别在于用户代理是否在呈现最终内容之前呈现非图像内容。

为了帮助用户代理决定是否执行同步或异步解码，可以在 decoding 属性上设置在 img 元素上。decoding 属性的可能值是以下图像解码提示关键字：

关键字	状态	描述
`sync`	同步	表示希望以同步方式解码图像，以便与其他内容原子性地呈现。
`async`	异步	表示希望以异步方式解码图像，以避免延迟其他内容的呈现。
`auto`	自动	表示对解码模式没有偏好（默认值）。

在解码图像时，用户代理应尊重 decoding 属性状态所指示的偏好。如果指示的状态是自动，则用户代理可以自由选择任何解码行为。

也可以使用 decode() 方法来控制解码行为。由于 decode() 方法独立于负责内容呈现的过程进行解码，因此不受 decoding 属性的影响。

4.8.4.3.5 更新图像数据

此算法不能在运行并行的步骤中调用。如果用户代理需要在运行并行的步骤中调用此算法，则需要排队一个任务来实现。

当用户代理需要更新图像数据的img 元素时，可能设置重新启动动画标志，可能设置可能省略事件标志，必须执行以下步骤：

如果元素的节点文档不是完全激活，则：
1. 继续并行运行此算法。
2. 等待直到元素的节点文档完全激活。
3. 如果此实例之后启动了此算法的另一个实例（即使它中止且不再运行），则返回。
4. 排队一个微任务以继续此算法。
如果用户代理无法支持图像，或其图像支持已被禁用，则中止图像请求为当前请求和挂起请求，设置当前请求的状态为不可用，设置挂起请求为null，并返回。
让previous URL成为当前请求的当前URL。
让selected source为null，selected pixel density为未定义。
如果元素不使用srcset或picture并且它具有指定值不是空字符串的src属性，则将selected source设置为元素的src属性的值，并将selected pixel density设置为1.0。
将元素的最后选择的源设置为selected source。
如果selected source不为null，则：
1. 让urlString成为编码-解析-序列化URL的结果，给定selected source，相对于元素的节点文档。
2. 如果urlString失败，则中止这组内部步骤。
3. 让key成为一个包含urlString，img元素的crossorigin属性的模式的元组，并且，如果该模式不是No CORS，则是节点文档的来源。
4. 如果可用图像列表中包含key的条目，则：
  1. 为该条目设置忽略上层缓存标志。
  2. 中止图像请求，对于当前请求和待定请求。
  3. 将待定请求设置为null。
  4. 令当前请求为一个新的图像请求，其图像数据与条目一致，且其状态为完全可用。
  5. 给定img，准备current request进行展示。
  6. 将当前请求的当前像素密度设置为selected pixel density。
  7. 在给定img元素的情况下，将一个元素任务加入队列至DOM 操作任务源，包括以下步骤：
    1. 如果重新启动动画已设置，则重新启动动画。
    2. 将当前请求的当前 URL设置为urlString。
    3. 如果可能省略事件未设置或previousURL不等于urlString，则在img元素上触发名为load的事件。
  8. 中止更新图像数据算法。
排队一个微任务来执行该算法的其余部分，允许调用此算法的任务继续。
如果此实例之后启动了此算法的另一个实例（即使它中止且不再运行），则返回。

只有最后一个实例生效，以避免在例如依次设置src、srcset和crossorigin属性时出现多个请求。
让selected source和selected pixel density分别为选择图像源的结果的URL和像素密度。
如果selected source为null，则：
1. 将当前请求的状态设置为损坏，中止图像请求为当前请求和挂起请求，并将挂起请求设置为null。
2. 排队一个元素任务在DOM操作任务源上，给定img元素和以下步骤：
  1. 将当前请求的当前URL更改为空字符串。
  2. 如果以下所有条件均为真：
    - 元素有一个src属性，或它使用srcset或picture；并且
    - 可能省略事件未设置或previousURL不为空字符串，
    则在img元素上触发一个事件，名称为error。
3. 返回。
让urlString成为编码-解析-序列化URL的结果，给定selected source，相对于元素的节点文档。
如果urlString失败，则：
1. 中止图像请求为当前请求和挂起请求。
2. 将当前请求的状态设置为损坏。
3. 设置挂起请求为null。
4. 排队一个元素任务在DOM操作任务源上，给定img元素和以下步骤：
  1. 将当前请求的当前URL更改为selected source。
  2. 如果没有设置可能省略事件或previousURL不等于selected source，则在img元素上触发一个事件，名称为error。
5. 返回。
如果挂起请求不为null，并且urlString与挂起请求的当前URL相同，则返回。
如果urlString与当前请求的当前URL相同，并且当前请求的状态为部分可用，则中止图像请求为挂起请求，排队一个元素任务在DOM操作任务源上，给定img元素以重启动画（如果设置了重启动画），并返回。
中止图像请求为挂起请求。
将image request设置为一个新的图像请求，其当前URL为urlString。
如果当前请求的状态为不可用或损坏，则将当前请求设置为image request。否则，将挂起请求设置为image request。
让request成为创建潜在的CORS请求的结果，给定urlString、"image"，以及元素的crossorigin内容属性的当前状态。
将request的客户端设置为元素的节点文档的相关设置对象。
如果元素使用srcset或picture，则将request的发起者设置为"imageset"。
将request的引用策略设置为元素的referrerpolicy属性的当前状态。
将request的优先级设置为元素的fetchpriority属性的当前状态。
如果img的懒加载属性处于Eager状态，或禁用脚本用于img，则让delay load event为true，否则为false。
如果给定img的将懒加载元素步骤返回true，则：
1. 将img的懒加载恢复步骤设置为从标记为获取图像的步骤开始的此算法的其余部分。
2. 开始观察懒加载元素的交叉点用于img元素。
3. 返回。
获取图像：获取request。从该算法返回，并作为获取的处理响应的一部分运行剩余步骤，响应response。

以这种方式获得的资源（如果有）是image request的图像数据。它可以是CORS-相同来源或CORS-跨来源；这会影响图像与其他API的交互（例如，在画布上使用时）。

当delay load event为true时，获取图像必须延迟元素的加载事件，直到排队的任务在资源被获取后网络任务源上运行为止（定义如下）。

不幸的是，这可以用来对用户的本地网络执行一个简单的端口扫描（特别是在结合脚本时，尽管实际上不需要脚本来执行此攻击）。用户代理可能会实施比上述描述更严格的跨来源访问控制策略来减轻此攻击，但不幸的是，这些策略通常与现有的网络内容不兼容。
尽快跳转到以下列表中的第一个适用条目：
如果资源类型是multipart/x-mixed-replace
下一个在图像被获取时由网络任务源排队的任务必须运行以下步骤：
1. 如果image request是挂起请求，并且至少一个体被完全解码，则中止图像请求为当前请求，并将挂起请求升级为当前请求。
2. 否则，如果image request是挂起请求，并且用户代理能够确定image request的图像在某种致命的方式中损坏，以至于无法获取图像尺寸，则中止图像请求为当前请求，将挂起请求升级为当前请求，并将当前请求的状态设置为损坏。
3. 否则，如果image request是当前请求，其状态为不可用，并且用户代理能够确定image request的图像的宽度和高度，则将当前请求的状态设置为部分可用。
4. 否则，如果image request是当前请求，其状态为不可用，并且用户代理能够确定image request的图像在某种致命的方式中损坏，以至于无法获取图像尺寸，则将当前请求的状态设置为损坏。
当图像正在获取时，由网络任务源排队的每个任务都必须更新图像的显示，但随着每个新的主体部分的到来，如果用户代理能够确定图像的宽度和高度，则必须根据img元素准备img元素的当前请求以供展示并替换先前的图像。一旦一个主体部分完全解码，执行以下步骤：
1. 将img元素的当前请求的状态设置为完全可用。
2. 如果没有设置可能省略事件或previousURL不等于urlString，则在img元素上排队一个元素任务在DOM操作任务源上，给定img元素以触发一个事件，名称为load。
如果资源类型和数据对应于支持的图像格式，如下所述
下一个在图像被获取时由网络任务源排队的任务必须运行以下步骤：
1. 如果用户代理能够确定image request的图像的宽度和高度，并且image request是挂起请求，则将image request的状态设置为部分可用。
2. 否则，如果用户代理能够确定image request的图像的宽度和高度，并且image request是当前请求，为展示准备image request给定img元素，并将image request的状态设置为部分可用。
3. 否则，如果用户代理能够确定image request的图像在某种致命的方式中损坏，以至于无法获取图像尺寸，并且image request是挂起请求：
  1. 中止图像请求为当前请求和挂起请求。
  2. 将挂起请求升级为当前请求。
  3. 将当前请求的状态设置为损坏。
  4. 触发一个事件，名称为error在img元素上。
4. 否则，如果用户代理能够确定image request的图像在某种致命的方式中损坏，以至于无法获取图像尺寸，并且image request是当前请求：
  1. 中止图像请求为image request。
  2. 如果没有设置可能省略事件或previousURL不等于urlString，则在img元素上触发一个事件，名称为error。
那个任务，以及每个在图像被获取时由网络任务源排队的后续任务，如果image request是当前请求，必须适当地更新图像的展示（例如，如果图像是渐进式JPEG，每个数据包可以提高图像的分辨率）。

此外，一旦资源被获取，最后一个由网络任务源排队的任务必须额外运行这些步骤：
1. 如果image request是挂起请求，中止图像请求为当前请求，将挂起请求升级为当前请求，并为展示准备image request，给定img元素。
2. 将image request设置为完全可用状态。
3. 使用键key将图像添加到可用图像列表，设置忽略更高层缓存标志。
4. 如果 maybe omit events 未设置或 previousURL 不等于 urlString，则在 img 元素上触发一个名为 load 的事件。
否则

图像数据不是支持的文件格式；用户代理必须将image request的状态设置为损坏，中止图像请求为当前请求和挂起请求，将挂起请求升级为当前请求如果image request是挂起请求，然后，如果没有设置可能省略事件或previousURL不等于urlString，排队一个元素任务在DOM操作任务源上，给定img元素以触发一个事件，名称为error。

当用户代理为元素x运行上述算法时，必须从元素的节点文档到元素x保持一个强引用，即使该元素未连接。

要中止图像请求对于一个图像请求或空的image request，意味着运行以下步骤：

如果image request为空，则返回。
忘记image request的图像数据，如果有的话。
中止任何为image request进行的获取算法实例，丢弃该算法生成的任何挂起任务。

将挂起请求升级为当前请求对于img元素意味着运行以下步骤：

让img元素的当前请求成为挂起请求。
让img元素的挂起请求为null。

4.8.4.3.6 为展示准备图像

要为展示准备图像，对于给定的图像元素img和req的图像请求:

让exifTagMap为从req的图像数据中获得的EXIF标签，由相关编解码器定义。[EXIF]
让physicalWidth和physicalHeight为从req的图像数据中获得的宽度和高度，由相关编解码器定义。
让dimX为exifTagMap标签0xA002 (PixelXDimension)的值。
让dimY为exifTagMap标签0xA003 (PixelYDimension)的值。
让resX为exifTagMap标签0x011A (XResolution)的值。
让resY为exifTagMap标签0x011B (YResolution)的值。
让resUnit为exifTagMap标签0x0128 (ResolutionUnit)的值。
如果dimX或dimY不是正整数，则返回。
如果resX或resY不是正浮点数，则返回。
如果resUnit不等于2 (Inch)，则返回。
让widthFromDensity为physicalWidth的值，乘以72并除以resX。
让heightFromDensity为physicalHeight的值，乘以72并除以resY。
如果widthFromDensity不等于dimX或heightFromDensity不等于dimY，则返回。
如果req的图像数据是CORS跨域，则将img的自然尺寸设置为dimX和dimY，相应地缩放img的像素数据，并返回。
将req的首选密度校正尺寸设置为一个结构，其宽度设置为dimX，高度设置为dimY。
适当地更新req的img元素的展示。

EXIF中的分辨率相当于每英寸CSS点，因此72是根据分辨率计算大小的基础。

尚未规定如果EXIF在图像已经展示后到达的情况。见问题#4929。

4.8.4.3.7 选择图像源

要选择图像源，给定一个img元素el：

更新el的source set。
如果el的source set为空，则返回null作为URL，并返回undefined作为像素密度。
返回从 el 的源集合中选择图像的结果。

要从source set中选择图像源，给定一个source setsourceSet：

如果sourceSet中的条目b与之前的条目a具有相同的关联像素密度描述符，则删除条目b。重复此步骤，直到sourceSet中的所有条目都不再具有与之前条目相同的关联像素密度描述符。
以实现定义的方式，从sourceSet中选择一个图像源。将其命名为selectedSource。
返回selectedSource及其关联的像素密度。

4.8.4.3.8 从属性创建source set

当被要求创建一个source set，给定字符串default source、字符串srcset、字符串sizes以及元素或null的img：

令source set为一个空的source set。
如果srcset不是空字符串，则将source set设置为解析srcset的结果。
令source size为解析sizes与img的结果。
如果default source不是空字符串，并且source set不包含具有像素密度描述符值为1的图像源，并且没有具有宽度描述符的图像源，则将default source附加到source set。
规范化source set的源密度。
返回source set。

4.8.4.3.9 更新source set

当被要求为给定的img或link元素el更新source set时，用户代理必须执行以下操作：

将el的source set设置为空的source set。
令elements为« el »。
如果el是其父节点为picture元素的img元素，则替换elements的内容为el的父节点的子元素，保留相对顺序。
如果el是img元素，则令img为el，否则为null。
对于elements中的每个child：
1. 如果child是el：
  1. 令default source为空字符串。
  2. 令srcset为空字符串。
  3. 令sizes为空字符串。
  4. 如果el是具有srcset属性的img元素，则将srcset设置为该属性的值。
  5. 否则，如果el是具有imagesrcset属性的link元素，则将srcset设置为该属性的值。
  6. 如果el是具有sizes属性的img元素，则将sizes设置为该属性的值。
  7. 否则，如果el是具有imagesizes属性的link元素，则将sizes设置为该属性的值。
  8. 如果el是具有src属性的img元素，则将default source设置为该属性的值。
  9. 否则，如果el是具有href属性的link元素，则将default source设置为该属性的值。
  10. 令el的source set为给定default source、srcset、sizes和img时创建的source set的结果。
  11. 返回。
    
    如果el是link元素，那么elements仅包含el，因此此步骤将立即达到，算法的其余部分将不会运行。
2. 如果child不是source元素，则继续。
3. 如果child没有srcset属性，继续到下一个子元素。
4. 解析child的srcset属性，并将返回的source set作为source set。
5. 如果source set没有图像源，继续到下一个子元素。
6. 如果child具有media属性，并且其值不与环境匹配，继续到下一个子元素。
7. 解析child的sizes属性，并将source set的source size设置为返回的值。
8. 如果child具有type属性，并且其值是未知或不支持的MIME类型，继续到下一个子元素。
9. 如果child具有width或height属性，则将el的尺寸属性源设置为child。否则，将el的尺寸属性源设置为el。
10. 规范化source set的源密度。
11. 将el的source set设置为source set。
12. 返回。

每个img元素单独考虑其前一个兄弟source元素加上img元素本身来选择图像源，忽略任何其他（无效的）元素，包括同一个picture元素中的其他img元素，或作为相关img元素的后续兄弟的source元素。

4.8.4.3.10 解析 srcset 属性

当被要求从元素解析srcset 属性时，解析元素的srcset 属性的值如下：

令input为传递给此算法的值。
令position为input中的指针，初始指向字符串的开头。
令candidates为初始为空的source set。
分割循环：收集由position给定的input中是ASCII空白字符或U+002C 逗号字符的代码点序列。如果收集到任何U+002C 逗号字符，这是一个解析错误。
如果position已超过input的末尾，返回candidates。
收集由position给定的input中不是ASCII空白字符的代码点序列，并将其设为url。
令descriptors为一个新的空列表。
如果url以U+002C (，)结尾，则：
1. 从url中移除所有尾随的U+002C 逗号字符。如果移除了多个字符，这是一个解析错误。
否则：
1. 描述符分词器：跳过由position给定的input中的ASCII空白字符。
2. 令current descriptor为空字符串。
3. 令state为在描述符中。
4. 令c为position处的字符。根据state的值执行以下操作。对于此步骤的目的，“EOF”是一个特殊字符，表示position已超过input的末尾。
  
  在描述符中
  
  根据c的值执行以下操作：
  
  ASCII空白字符
  
  如果current descriptor不为空，将current descriptor追加到descriptors中，并将current descriptor设为空字符串。将state设为在描述符之后。
  
  U+002C 逗号 (,)
  
  将position推进到input中的下一个字符。如果current descriptor不为空，将current descriptor追加到descriptors中。跳到标记为描述符解析器的步骤。
  
  U+0028 左括号 (()
  
  将c追加到current descriptor中。将state设为在括号中。
  
  EOF
  
  如果current descriptor不为空，将current descriptor追加到descriptors中。跳到标记为描述符解析器的步骤。
  
  其他任何值
  
  将c追加到current descriptor中。
  
  在括号中
  
  根据c的值执行以下操作：
  
  U+0029 右括号 ())
  
  将c追加到current descriptor中。将state设为在描述符中。
  
  EOF
  
  将current descriptor追加到descriptors中。跳到标记为描述符解析器的步骤。
  
  其他任何值
  
  将c追加到current descriptor中。
  
  在描述符之后
  
  根据c的值执行以下操作：
  
  ASCII空白字符
  
  保持在此状态。
  
  EOF
  
  跳到标记为描述符解析器的步骤。
  
  其他任何值
  
  将state设为在描述符中。将position设为input中的前一个字符。
  
  将position推进到input中的下一个字符。重复此步骤。
  
  为了与将来的添加兼容，此算法支持多个描述符和带括号的描述符。
描述符解析器：令error为否。
令width为不存在。
令density为不存在。
令future-compat-h为不存在。
对于descriptors中的每个描述符，执行以下列表中的相应步骤：
如果描述符由一个有效的非负整数组成，后跟一个U+0077 拉丁小写字母W
1. 如果用户代理不支持sizes属性，令error为是。
  
  符合规范的用户代理将支持sizes属性。然而，用户代理通常在实际中以增量方式实现和发布功能。
2. 如果width和density都不是不存在，则令error为是。
3. 应用解析非负整数的规则到描述符。如果结果为0，令error为是。否则，令width为结果。
如果描述符由一个有效的浮点数组成，后跟一个U+0078 拉丁小写字母X
1. 如果width、density和future-compat-h都不是不存在，则令error为是。
2. 应用解析浮点数值的规则到描述符。如果结果小于0，令error为是。否则，令density为结果。
  
  如果density为0，则自然尺寸将是无限的。预计用户代理在图像渲染大小方面有其限制。
如果描述符由一个有效的非负整数组成，后跟一个U+0068 拉丁小写字母H
这是一个解析错误。
1. 如果future-compat-h和density都不是不存在，则令error为是。
2. 应用解析非负整数的规则到描述符。如果结果为0，令error为是。否则，令future-compat-h为结果。
其他任何情况

令error为是。
如果future-compat-h不是不存在且width是不存在，令error为是。
如果error仍然是否，则向candidates追加一个新的图像源，其URL为url，宽度为width（如果不是不存在），像素密度为density（如果不是不存在）。否则，这是一个解析错误。
返回到标记为分割循环的步骤。

4.8.4.3.11 解析 sizes 属性

当被要求从一个元素element解析sizes 属性，并且有一个img元素或null img时：

令unparsed sizes list为解析element的sizes 属性的值（或空字符串，如果属性不存在）后的结果。[CSSSYNTAX]
令size为null。
对于unparsed sizes list中的每个unparsed size：
1. 从unparsed size的末尾移除所有连续的<whitespace-token>。如果unparsed size现在为空，则这是一个解析错误；继续。
2. 如果unparsed size中的最后一个组件值是一个有效的非负<source-size-value>，则将size设为其值并从unparsed size中移除该组件值。除数学函数外的任何CSS函数都是无效的。否则，这是一个解析错误；继续。
3. 如果size是auto，并且img不是null，并且img正在渲染，并且img允许自动尺寸，则将size设为img的具体对象尺寸宽度，以CSS像素为单位。
  
  如果size仍然是auto，则它将被忽略。
4. 从unparsed size的末尾移除所有连续的<whitespace-token>。如果unparsed size现在为空：
  1. 如果这不是unparsed sizes list中的最后一项，则这是一个解析错误。
  2. 如果size不是auto，则返回size。否则，继续。
5. 将unparsed size中的剩余组件值解析为<media-condition>。如果它未正确解析，或者它正确解析但<media-condition>的结果为false，继续。[MQ]
6. 如果size不是auto，则返回size。否则，继续。
返回100vw。

使用一个不带<media-condition>的裸<source-size-value>（作为一个<length>）作为一个不在列表末尾的<source-size-list>条目是无效的。然而，解析算法允许它出现在<source-size-list>中的任何位置，并且如果列表中的前一个条目未被使用，则会立即接受它作为尺寸。这是为了支持将来的扩展，并防止简单的作者错误，例如最后的尾随逗号。一个裸的auto关键字被允许有其他条目跟在其后，以为遗留的用户代理提供回退。

4.8.4.3.12 规范化源密度

图像源可以有一个像素密度描述符、一个宽度描述符，或者伴随其URL没有任何描述符。规范化源集会给每个图像源一个像素密度描述符。

当要求规范化源密度时，对于一个源集合 source set，用户代理必须执行以下操作:

令source size为source set的源尺寸。
对于source set中的每个图像源：
1. 如果图像源有像素密度描述符，继续到下一个图像源。
2. 否则，如果图像源有宽度描述符，将宽度描述符替换为具有像素密度描述符值的像素密度描述符，其值为宽度描述符值除以源尺寸，单位为x。
  
  如果源尺寸为0，则密度将是无穷大，这会导致自然尺寸为0 x 0。
3. 否则，给图像源一个1x的像素密度描述符。

4.8.4.3.13 应对环境变化

用户代理可以随时运行以下算法，以更新img元素的图像，以应对环境变化。（用户代理不需要运行此算法；例如，如果用户不再查看页面，用户代理可能会等到用户返回页面后再确定使用哪个图像，以防在此期间环境再次变化。）

用户代理特别鼓励在用户更改视口大小（例如，通过调整窗口大小或更改页面缩放），以及将img元素插入到文档中时运行此算法，以使密度校正后的自然宽度和高度匹配新的视口，并在涉及艺术指导时选择正确的图像。

等待稳定状态。同步部分包括此算法的所有剩余步骤，直到算法声明同步部分结束为止。（同步部分的步骤标有⌛。）
⌛ 如果img元素没有使用srcset或picture，其节点文档不完全活动，具有资源类型为multipart/x-mixed-replace的图像数据，或挂起请求不为null，则返回。
⌛ 令selected source和selected pixel density分别为选择图像源的URL和像素密度的结果。
⌛ 如果selected source为null，则返回。
⌛ 如果selected source和selected pixel density与元素的最后选择的源和当前像素密度相同，则返回。
⌛ 令urlString为编码、解析和序列化URL的结果，给定selected source，相对于元素的节点文档。
⌛ 如果urlString失败，则返回。
⌛ 令corsAttributeState为元素的crossorigin内容属性的状态。
⌛ 令origin为img元素的节点文档的源。
⌛ 令client为img元素的节点文档的相关设置对象。
⌛ 令key为一个元组，包含urlString、corsAttributeState，如果corsAttributeState不为无CORS，则包含origin。
⌛ 令image request为一个新的图像请求，其当前URL为urlString。
⌛ 令元素的挂起请求为image request。
结束同步部分，并行继续其余步骤。
如果可用图像列表中包含key的条目，则将image request的图像数据设置为该条目的图像数据。继续下一步。

否则：
1. 令request为创建潜在的CORS请求的结果，给定urlString、"image"和corsAttributeState。
2. 将request的客户端设置为client，发起者设置为"imageset"，并设置request的同步标志。
3. 将request的引用策略设置为元素的referrerpolicy属性的当前状态。
4. 将request的优先级设置为元素的fetchpriority属性的当前状态。
5. 令response为获取request的结果。
6. 如果response的不安全响应是网络错误或如果图像格式不受支持（通过应用图像嗅探规则确定），或如果用户代理能够确定image request的图像以某种致命方式损坏，导致无法获取图像尺寸，或如果资源类型为multipart/x-mixed-replace，则将挂起请求设为null并中止这些步骤。
7. 否则，response的不安全响应是image request的图像数据。它可以是CORS-同源或CORS-跨源；这会影响图像与其他API的交互（例如，在canvas上使用时）。
将元素任务排队到DOM操作任务源，给定img元素和以下步骤：
1. 如果img元素自此算法启动以来经历了相关突变，则将挂起请求设为null并中止这些步骤。
2. 将img元素的最后选择的源设为selected source，将img元素的当前像素密度设为selected pixel density。
3. 将image request的状态设为完全可用。
4. 使用key将图像添加到可用图像列表中，并设置忽略更高层缓存标志。
5. 将挂起请求升级为当前请求。
6. 为展示准备image request给定img元素。
7. 触发一个事件，名为load，在img元素上。

4.8.4.4 提供文字作为图像替代的要求

4.8.4.4.1 一般准则

除非另有规定，alt 属性必须指定且其值不能为空；其值必须是图像的适当替代。alt 属性的具体要求取决于图像的表示目的，如以下部分所述。

编写替代文字时要考虑的最一般规则是：意图是用 alt 属性的文字替换每个图像不会改变页面的意义。

因此，一般来说，可以通过考虑如果不能包含图像时会写什么来编写替代文字。

由此引申出 alt 属性的值不应包含可视为图像的说明、标题或图例的文字。它应该包含用户可以替代图像使用的替代文字，而不是补充图像。title 属性可以用于补充信息。

另一个引申点是 alt 属性的值不应重复已经在图像旁边的文章中提供的信息。

考虑替代文字的一种方法是思考如何通过电话阅读包含图像的页面，而不提及存在图像。你用来替代图像的内容通常是编写替代文字的良好开端。

4.8.4.4.2 只包含图像的链接或按钮

当创建超链接的a元素或button元素没有文本内容但包含一个或多个图像时，alt属性必须包含传达链接或按钮目的的文本。

在此示例中，用户被要求从三个颜色列表中选择他们喜欢的颜色。每种颜色由图像表示，但对于配置用户代理不显示图像的用户，使用颜色名称代替：

<h1>Pick your color</h1>
<ul>
 <li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li>
 <li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li>
 <li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li>
</ul>

在此示例中，每个按钮都有一组图像以指示用户所需的颜色输出类型。每种情况下第一个图像用于提供替代文本。

<button name="rgb"><img src="red" alt="RGB"><img src="green" alt=""><img src="blue" alt=""></button>
<button name="cmyk"><img src="cyan" alt="CMYK"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>

由于每个图像代表文字的一部分，也可以这样写：

<button name="rgb"><img src="red" alt="R"><img src="green" alt="G"><img src="blue" alt="B"></button>
<button name="cmyk"><img src="cyan" alt="C"><img src="magenta" alt="M"><img src="yellow" alt="Y"><img src="black" alt="K"></button>

但是，使用其他替代文字时，这可能行不通，在每种情况下将所有替代文字放入一个图像中可能更有意义：

<button name="rgb"><img src="red" alt="sRGB profile"><img src="green" alt=""><img src="blue" alt=""></button>
<button name="cmyk"><img src="cyan" alt="CMYK profile"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>

4.8.4.4.3 带有替代图形表示的短语或段落：图表、图解、图形、地图、插图

有时，图形形式可以更清晰地表达某些内容，例如流程图、图解、图形或显示方向的简单地图。在这种情况下，可以使用img元素来提供图像，但仍必须提供较少的文本版本，以便无法查看图像的用户（例如，由于连接非常慢，或因为他们使用的是纯文本浏览器，或者因为他们通过免提汽车语音网页浏览器听取页面，或者因为他们是盲人）仍然能够理解所传达的信息。

文本必须在alt属性中给出，必须传达与src属性中指定的图像相同的信息。

重要的是要意识到，替代文本是图像的替代，而不是图像的描述。

在以下示例中，我们有一个以图像形式显示的流程图，alt属性中的文本以散文形式重新表述流程图：

<p>In the common case, the data handled by the tokenization stage
comes from the network, but it can also come from script.</p>
<p><img src="images/parsing-model-overview.svg" alt="The Network
passes data to the Input Stream Preprocessor, which passes it to the
Tokenizer, which passes it to the Tree Construction stage. From there,
data goes to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to the
Tokenizer."></p>

这里是另一个示例，显示了在描述中包含图像问题的好解决方案和坏解决方案。

首先，这是好的解决方案。此示例显示了如果图像从未存在，替代文本应该是你会放在散文中的内容。

<!-- This is the correct way to do things. -->
<p>
 You are standing in an open field west of a house.
 <img src="house.jpeg" alt="The house is white, with a boarded front door.">
 There is a small mailbox here.
</p>

其次，这是坏的解决方案。在这种错误的做法中，替代文本只是图像的描述，而不是图像的文字替代。这是错误的，因为当图像不显示时，文本的流畅性不如第一个示例。

<!-- This is the wrong way to do things. -->
<p>
 You are standing in an open field west of a house.
 <img src="house.jpeg" alt="A white house, with a boarded front door.">
 There is a small mailbox here.
</p>

类似“Photo of white house with boarded door”这样的文字也会是糟糕的替代文本（尽管它可能适合用于title属性或带有此图像的figcaption元素中的figure元素）。

4.8.4.4.4 带有替代图形表示的短语或标签：图标、标志

文档可以包含图标形式的信息。图标旨在帮助视觉浏览器用户一眼就能识别功能。

在某些情况下，图标是传达相同意义的文本标签的补充。在这些情况下，alt属性必须存在但必须为空。

这里图标在传达相同意义的文本旁边，所以它们的alt属性为空：

<nav>
 <p><a href="/help/"><img src="/icons/help.png" alt=""> Help</a></p>
 <p><a href="/configure/"><img src="/icons/configuration.png" alt="">
 Configuration Tools</a></p>
</nav>

在其他情况下，图标旁边没有描述其含义的文本；图标应是自解释的。在这些情况下，必须在alt属性中给出等效的文本标签。

这里，新闻网站上的文章用图标标明其主题。

<body>
 <article>
  <header>
   <h1>Ratatouille wins <i>Best Movie of the Year</i> award</h1>
   <p><img src="movies.png" alt="Movies"></p>
  </header>
  <p>Pixar has won yet another <i>Best Movie of the Year</i> award,
  making this its 8th win in the last 12 years.</p>
 </article>
 <article>
  <header>
   <h1>Latest TWiT episode is online</h1>
   <p><img src="podcasts.png" alt="Podcasts"></p>
  </header>
  <p>The latest TWiT episode has been posted, in which we hear
  several tech news stories as well as learning much more about the
  iPhone. This week, the panelists compare how reflective their
  iPhones' Apple logos are.</p>
 </article>
</body>

许多页面包含标志、徽章、旗帜或徽章，这些代表特定实体，如公司、组织、项目、乐队、软件包、国家等。

如果标志用于表示实体，例如作为页面标题，alt属性必须包含标志所代表的实体的名称。alt属性不得包含“标志”这样的文字，因为传达的不是它是标志这一事实，而是实体本身。

如果标志用于表示其代表的实体名称旁边，则该标志是补充性的，其alt属性必须为空。

如果标志仅作为装饰材料使用（作为品牌，或例如作为文章中提到的标志所属实体的旁边图像），则适用下文关于纯装饰图像的条目。如果标志实际上正在被讨论，则它被用作带有替代图形表示的短语或段落（标志的描述），并适用上面的第一个条目。

在以下片段中，出现了上述四种情况。首先，我们看到一个标志用于代表公司：

<h1><img src="XYZ.gif" alt="The XYZ company"></h1>

接下来，我们看到一个段落，使用一个标志在公司名称旁边，所以没有任何替代文本：

<article>
 <h2>News</h2>
 <p>We have recently been looking at buying the <img src="alpha.gif"
 alt=""> ΑΒΓ company, a small Greek company
 specializing in our type of product.</p>

在第三个片段中，我们看到一个标志被用作旁注，作为讨论收购的更大文章的一部分：

<aside><p><img src="alpha-large.gif" alt=""></p></aside>
 <p>The ΑΒΓ company has had a good quarter, and our
 pie chart studies of their accounts suggest a much bigger blue slice
 than its green and orange slices, which is always a good sign.</p>
</article>

最后，我们有一篇关于标志的评论文章，因此替代文本中详细描述了该标志。

<p>Consider for a moment their logo:</p>

<p><img src="/images/logo" alt="It consists of a green circle with a
green question mark centered inside it."></p>

<p>How unoriginal can you get? I mean, oooooh, a question mark, how
<em>revolutionary</em>, how utterly <em>ground-breaking</em>, I'm
sure everyone will rush to adopt those specifications now! They could
at least have tried for some sort of, I don't know, sequence of
rounded squares with varying shades of green and bold white outlines,
at least that would look good on the cover of a blue book.</p>

此示例显示了替代文本应如何编写，以便如果图像不可用，使用文本时，文本能够无缝地融入周围的文本，就像图像从未存在过一样。

4.8.4.4.5 图形化呈现的文本

有时，图像仅由文本组成，图像的目的是传达文本本身，而不是突出用于呈现文本的实际排版效果。

在这种情况下，alt属性必须存在，但其内容必须与图像本身的文本相同。

考虑一个包含“Earth Day”文本的图形，但字母上都装饰有花卉和植物。如果文本仅用作标题，为图形用户增加页面趣味，那么正确的替代文本就是相同的文本“Earth Day”，无需提及装饰：

<h1><img src="earthdayheading.png" alt="Earth Day"></h1>

在照明手稿中，某些图像可能会使用图形。在这种情况下的替代文本只是图像所代表的字符。

<p><img src="initials/o.svg" alt="O">nce upon a time and a long long time ago, late at
night, when it was dark, over the hills, through the woods, across a great ocean, in a land far
away, in a small house, on a hill, under a full moon...

当图像用于表示无法用Unicode表示的字符时，例如外字、异体字或新字符（如新货币符号），替代文本应为更常规的书写方式，例如使用平假名或片假名给出字符的发音。

在1997年的这个例子中，一个看起来像带有两个横线而不是一个的花体E的新货币符号用图像表示。替代文本给出了字符的发音。

<p>Only <img src="euro.png" alt="euro ">5.99!

如果字符可以达到相同的目的，则不应使用图像。只有当文本不能直接用文本表示时，例如由于装饰或没有适当的字符（如外字的情况），才应使用图像。

如果作者因为其默认系统字体不支持某个字符而想使用图像，那么网络字体比图像更好的解决方案。

4.8.4.4.6 周围文本的图形表示

在许多情况下，图像实际上只是补充，其存在只是加强了周围的文本。在这些情况下，alt属性必须存在，但其值必须为空字符串。

一般来说，如果删除图像不会使页面的实用性降低，但包括图像会使视觉浏览器的用户更容易理解概念，那么图像就属于这一类。

以下是以图形形式重复前一段的流程图：

<p>The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</p>
<p><img src="images/parsing-model-overview.svg" alt=""></p>

在这些情况下，仅包含一个标题的替代文本是错误的。如果要包括标题，可以使用title属性，或者使用figure和figcaption元素。在后一种情况下，图像实际上是带有替代图形表示的短语或段落，因此需要替代文本。

<!-- Using the title="" attribute -->
<p>The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</p>
<p><img src="images/parsing-model-overview.svg" alt=""
title="Flowchart representation of the parsing model."></p>

<!-- Using <figure> and <figcaption> -->
<p>The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</p>
<figure>
 <img src="images/parsing-model-overview.svg" alt="The Network leads to
 the Input Stream Preprocessor, which leads to the Tokenizer, which
 leads to the Tree Construction stage. The Tree Construction stage
 leads to two items. The first is Script Execution, which leads via
 document.write() back to the Tokenizer. The second item from which
 Tree Construction leads is the DOM. The DOM is related to the Script
 Execution.">
 <figcaption>Flowchart representation of the parsing model.</figcaption>
</figure>

<!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
<p>The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</p>
<p><img src="images/parsing-model-overview.svg"
        alt="Flowchart representation of the parsing model."></p>
<!-- Never put the image's caption in the alt="" attribute! -->

以下是以图形形式重复前一段的图表：

<p>According to a study covering several billion pages,
about 62% of documents on the web in 2007 triggered the Quirks
rendering mode of web browsers, about 30% triggered the Almost
Standards mode, and about 9% triggered the Standards mode.</p>
<

p><img src="rendering-mode-pie-chart.png" alt=""></p>

4.8.4.4.7 辅助图像

有时，图像对内容并非至关重要，但也不是纯装饰或完全与文本重复。在这些情况下，alt属性必须存在，其值应为空字符串或该图像所传达信息的文本表示。如果图像有标题说明图像的标题，那么alt属性的值不应为空（因为这对非视觉读者来说会很困惑）。

考虑一篇关于政治人物的新闻文章，其中个人的脸部显示在图像中。图像不是纯装饰性的，因为它与故事相关。图像也不是完全与故事重复，因为它显示了政治家的外貌。是否需要提供任何替代文本是一个创作决定，取决于图像是否影响了文章的解释。

在第一个变体中，图像没有上下文，未提供替代文本：

<p><img src="president.jpeg" alt=""> Ahead of today's referendum,
the President wrote an open letter to all registered voters. In it, she admitted that the country was
divided.</p>

如果图片只是脸部，描述它可能没有意义。读者不关心这个人是红发还是金发，是白皮肤还是黑皮肤，是一只眼睛还是两只眼睛。

然而，如果图片更具动态性，例如显示政治家愤怒、特别高兴或沮丧，那么一些替代文本在设定文章基调方面会很有用，否则可能会错过这一点：

<p><img src="president.jpeg" alt="The President is sad.">
Ahead of today's referendum, the President wrote an open letter to all
registered voters. In it, she admitted that the country was divided.
</p>

<p><img src="president.jpeg" alt="The President is happy!">
Ahead of today's referendum, the President wrote an open letter to all
registered voters. In it, she admitted that the country was divided.
</p>

总统“悲伤”还是“高兴”会影响如何解释其余的段落：她可能是在说她对国家的分裂感到不满，还是在说国家分裂的前景对她的政治生涯有利？根据图像的不同，解释也会不同。

如果图像有标题，那么包括替代文本可以避免让非视觉用户对标题所指内容感到困惑。

<p>Ahead of today's referendum, the President wrote an open letter to
all registered voters. In it, she admitted that the country was divided.</p>
<figure>
 <img src="president.jpeg"
      alt="A high forehead, cheerful disposition, and dark hair round out the President's face.">
 <figcaption> The President of Ruritania. Photo © 2014 PolitiPhoto. </figcaption>
</figure>

4.8.4.4.8 纯装饰性图像，不添加任何信息

如果图像是装饰性的，但并不是特别针对页面的——例如作为整个网站设计方案的一部分——图像应该在网站的CSS中指定，而不是在文档的标记中。

然而，一个装饰性图像虽然没有被周围的文本讨论，但仍有一定的相关性，可以使用img元素包含在页面中。这类图像是装饰性的，但仍构成内容的一部分。在这些情况下，alt属性必须存在，但其值必须为空字符串。

尽管图像相关，但纯装饰性的示例包括在关于火人节活动的博客文章中展示黑岩城景观的照片，或者在朗诵某首诗的页面上展示受该诗启发的绘画图像。以下片段显示了后一种情况的示例（此片段仅包括第一节）：

<h1>The Lady of Shalott</h1>
<p><img src="shalott.jpeg" alt=""></p>
<p>On either side the river lie<br>
Long fields of barley and of rye,<br>
That clothe the wold and meet the sky;<br>
And through the field the road run by<br>
To many-tower'd Camelot;<br>
And up and down the people go,<br>
Gazing where the lilies blow<br>
Round an island there below,<br>
The island of Shalott.</p>

4.8.4.4.9 一组没有链接的图像组成一幅更大的图片

当一幅图片被切割成较小的图像文件，然后再一起显示以组成完整的图片时，其中一个图像的 alt 属性必须按照适用于整幅图片的相关规则进行设置，然后所有剩余的图像的 alt 属性必须设置为空字符串。

在以下示例中，一幅代表 XYZ Corp 公司标志的图片被切割成两部分，第一部分包含字母 "XYZ"，第二部分包含单词 "Corp"。替代文本（"XYZ Corp"）全部在第一张图片中。

<h1><img src="logo1.png" alt="XYZ Corp"><img src="logo2.png" alt=""></h1>

在以下示例中，评分以三个填充的星星和两个空心的星星显示。虽然替代文本可以是 "★★★☆☆"，但作者决定更有帮助地将评分以 "3 out of 5" 的形式提供。这是第一张图片的替代文本，其余图片的替代文本为空。

<p>Rating: <meter max=5 value=3><img src="1" alt="3 out of 5"
><img src="1" alt=""><img src="1" alt=""><img src="0" alt=""
><img src="0" alt=""></meter></p>

4.8.4.4.10 一组形成单个大图的图片，带有链接

一般来说，应该使用图片映射，而不是切割图片来创建链接。

然而，如果图片确实被切割，并且切割后的任何组件是链接的唯一内容，则每个链接的图片必须在其alt 属性中有替代文本，表示链接的目的。

在以下示例中，一张图片展示了飞行意大利面怪物的徽标，左侧的面条状附肢和右侧的面条状附肢被分成不同的图片，以便用户可以在冒险中选择左侧或右侧。

<h1>The Church</h1>
<p>You come across a flying spaghetti monster. Which side of His
Noodliness do you wish to reach out for?</p>
<p><a href="?go=left" ><img src="fsm-left.png"  alt="Left side. "></a
  ><img src="fsm-middle.png" alt=""
  ><a href="?go=right"><img src="fsm-right.png" alt="Right side."></a></p>

4.8.4.4.11 内容的关键部分

在某些情况下，图片是内容的关键部分。例如，在一个照片画廊页面中，图片是页面的整个重点。

如何为关键内容的图片提供替代文本取决于图片的来源。

一般情况

当可以提供详细的替代文本时，例如图片是杂志评论中的一系列截图的一部分，或是漫画条的一部分，或是关于该照片的博客文章中的照片，必须在alt 属性中提供可以替代图片的文本。

在一个新操作系统的截图画廊中的一张截图，带有一些替代文本：

<figure>
 <img src="KDE%20Light%20desktop.png"
      alt="The desktop is blue, with icons along the left hand side in
           two columns, reading System, Home, K-Mail, etc. A window is
           open showing that menus wrap to a second line if they
           cannot fit in the window. The window has a list of icons
           along the top, with an address bar below it, a list of
           icons for tabs along the left edge, a status bar on the
           bottom, and two panes in the middle. The desktop has a bar
           at the bottom of the screen with a few buttons, a pager, a
           list of open applications, and a clock.">
 <figcaption>Screenshot of a KDE desktop.</figcaption>
</figure>

财务报告中的一张图表：

<img src="sales.gif"
     title="Sales graph"
     alt="From 1998 to 2005, sales increased by the following percentages
     with each year: 624%, 75%, 138%, 40%, 35%, 9%, 21%">

请注意，“销售图表”对于销售图表来说是不够的替代文本。适合作为标题的文本通常不适合作为替代文本。

无法完全描述的图像

在某些情况下，图像的性质可能使得提供详细的替代文本不切实际。例如，图像可能模糊不清，或是复杂的分形图案，或是详细的地形图。

在这些情况下，alt 属性必须包含一些合适的替代文本，但可以相对简短。

有时确实没有任何文本可以充分描述一张图像。例如，对于罗夏墨迹测试图，很难用有用的文字来描述。然而，即使是简短的描述，也总比没有要好：

<figure>
 <img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right
 symmetry with indistinct edges, with a small gap in the center, two
 larger gaps offset slightly from the center, with two similar gaps
 under them. The outline is wider in the top half than the bottom
 half, with the sides extending upwards higher than the center, and
 the center extending below the sides.">
 <figcaption>A black outline of the first of the ten cards
 in the Rorschach inkblot test.</figcaption>
</figure>

请注意，以下做法会是替代文本的非常糟糕的使用：

<!-- This example is wrong. Do not copy it. -->
<figure>
 <img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
 of the first of the ten cards in the Rorschach inkblot test.">
 <figcaption>A black outline of the first of the ten cards
 in the Rorschach inkblot test.</figcaption>
</figure>

将标题包含在替代文本中并没有什么用，因为这样做实际上是对那些无法查看图像的用户重复了一遍标题，让他们感到困扰，而不会比只读或听一次标题更有帮助。

另一个无法完全描述的图像的例子是分形图，它本质上是无限细节的。

以下示例展示了一种可能的方式来为曼德布罗特集的完整视图提供替代文本。

<img src="ms1.jpeg" alt="The Mandelbrot set appears as a cardioid with
its cusp on the real axis in the positive direction, with a smaller
bulb aligned along the same center line, touching it in the negative
direction, and with these two shapes being surrounded by smaller bulbs
of various sizes.">

同样，一张人的面部照片，例如在传记中，可以被认为是非常相关且关键的内容，但为其提供完全替代的文本可能很困难：

<section class="bio">
 <h1>A Biography of Isaac Asimov</h1>
 <p>Born <b>Isaak Yudovich Ozimov</b> in 1920, Isaac was a prolific author.</p>
 <p><img src="headpics/asimov.jpeg" alt="Isaac Asimov had dark hair, a tall forehead, and wore glasses.
 Later in life, he wore long white sideburns."></p>
 <p>Asimov was born in Russia, and moved to the US when he was three years old.</p>
 <p>...</p>
</section>

在这种情况下，在替代文本中包含对图像本身存在的引用是不必要的（实际上也是不鼓励的），因为这些文本与浏览器报告图像存在本身是重复的。例如，如果替代文本是“艾萨克·阿西莫夫的照片”，则符合标准的用户代理可能会读作“（图像）艾萨克·阿西莫夫的照片”，而不是更有用的“（图像）艾萨克·阿西莫夫有深色头发、高额头，戴着眼镜……”。

内容未知的图像

在一些不幸的情况下，可能完全没有可用的替代文本，要么是因为图像是通过某种自动化方式获取的，没有任何关联的替代文本（例如，网络摄像头），要么是因为页面是通过脚本生成的，用户提供的图像没有提供合适或可用的替代文本（例如，照片共享网站），要么是因为作者自己不知道图像代表什么（例如，一个盲人摄影师在他们的博客上分享图像）。

在这种情况下，alt 属性可以省略，但还必须满足以下条件之一：

img 元素位于一个 figure 元素中，该元素包含一个 figcaption 元素，该元素包含除了元素间空白之外的内容，并且忽略 figcaption 元素及其后代，figure 元素没有流内容后代，除了元素间空白和img 元素。
title 属性存在且具有非空值。

依赖于title 属性目前不推荐使用，因为许多用户代理并不以本规范要求的可访问方式公开该属性（例如，需要鼠标等指针设备来触发工具提示的显示，这排除了仅使用键盘和仅使用触摸的用户，例如使用现代手机或平板电脑的用户）。

这种情况应保持在绝对最低限度。如果作者有可能提供真实的替代文本，那么省略alt 属性是不被接受的。

在一个照片分享网站上，如果网站收到的图像没有任何元数据，只包含说明，可以这样标记：

<figure>
 <img src="1100670787_6a7c664aef.jpg">
 <figcaption>Bubbles traveled everywhere with us.</figcaption>
</figure>

然而，如果能够从用户那里获得图像的重要部分的详细描述并将其包含在页面上，那将更好。

一个盲人用户的博客中显示了一张由用户拍摄的照片。最初，用户可能不知道他们拍摄的照片展示了什么：

<article>
 <h1>I took a photo</h1>
 <p>I went out today and took a photo!</p>
 <figure>
  <img src="photo2.jpeg">
  <figcaption>A photograph taken blindly from my front porch.</figcaption>
 </figure>
</article>

然而，用户最终可能会从他们的朋友那里获得图像的描述，并可以添加替代文本：

<article>
 <h1>I took a photo</h1>
 <p>I went out today and took a photo!</p>
 <figure>
  <img src="photo2.jpeg" alt="The photograph shows my squirrel
  feeder hanging from the edge of my roof. It is half full, but there
  are no squirrels around. In the background, out-of-focus trees fill the
  shot. The feeder is made of wood with a metal grate, and it contains
  peanuts. The edge of the roof is wooden too, and is painted white
  with light blue streaks.">
  <figcaption>A photograph taken blindly from my front porch.</figcaption>
 </figure>
</article>

有时，图像的全部意义在于无法提供文本描述，用户需要提供描述。例如，CAPTCHA 图像的目的就是查看用户是否能够字面上读取图形。这里是标记 CAPTCHA 的一种方式（注意 title 属性）：

<p><label>What does this image say?
<img src="captcha.cgi?id=8934" title="CAPTCHA">
<input type=text name=captcha></label>
(If you cannot see the image, you can use an <a
href="?audio">audio</a> test instead.)</p>

另一个示例是显示图像并要求提供替代文本的软件，目的是然后编写具有正确替代文本的页面。这样的页面可以包含一个图像表格，如下所示：

<table>
 <thead>
  <tr> <th> Image <th> Description
 <tbody>
  <tr>
   <td> <img src="2421.png" title="Image 640 by 100, filename 'banner.gif'">
   <td> <input name="alt2421">
  <tr>
   <td> <img src="2422.png" title="Image 200 by 480, filename 'ad3.gif'">
   <td> <input name="alt2422">
</table>

请注意，即使在这个示例中，也尽可能多地在title 属性中包含有用的信息。

由于一些用户根本无法使用图像（例如，因为他们的连接非常慢，或因为他们使用的是仅文本浏览器，或因为他们正在使用免提汽车语音网页浏览器来听页面内容，或仅仅因为他们是盲人），alt 属性只允许在没有替代文本且无法提供替代文本时省略，而不是提供替代文本，如上例所示。缺乏作者的努力不是省略alt 属性的可接受理由。

4.8.4.4.12 不打算给用户显示的图像

一般来说，作者应避免将img元素用于显示图像以外的其他目的。

如果img元素用于显示图像以外的其他目的，例如作为页面浏览量统计的一部分，则alt属性必须为空字符串。

在这种情况下，width和height属性应设置为零。

4.8.4.4.13 在电子邮件或私人文档中，打算给一个已知能查看图像的特定人

本节不适用于公开访问的文档，或其目标受众不一定为作者个人认识的人，例如网站上的文档、发送到公开邮件列表的电子邮件或软件文档。

当图像包含在针对特定且已知能够查看图像的个人的私人通信（例如HTML电子邮件）中时，alt属性可以省略。然而，即使在这种情况下，仍强烈建议作者包括替代文本（根据图像的类型，如上所述），以便在用户使用不支持图像的邮件客户端时，电子邮件仍然可以使用，或者在文档被转发给其他可能不易查看图像的用户时，文档仍然可用。

4.8.4.4.14 标记生成器的指导

标记生成器（如所见即所得的创作工具）应尽可能从用户那里获取替代文本。然而，认识到在许多情况下，这可能不可行。

对于作为链接唯一内容的图像，标记生成器应检查链接目标，以确定目标的标题或目标的URL，并使用以这种方式获得的信息作为替代文本。

对于有标题的图像，标记生成器应使用figure和figcaption元素，或title属性，来提供图像的标题。

作为最后的手段，实施者应将alt属性设置为空字符串，假设图像是纯粹的装饰性图像，不添加任何信息但仍特定于周围内容，或者完全省略alt属性，假设图像是内容的关键部分。

标记生成器可以在img元素上指定generator-unable-to-provide-required-alt属性，用于未能获取替代文本的情况，因此省略了alt属性。该属性的值必须为空字符串。包含这些属性的文档不符合规范，但合规检查器将默默忽略这一错误。

这旨在避免标记生成器因省略alt属性而被迫用更严重的错误（如提供虚假的替代文本）来替代，因为最先进的自动合规检查器无法区分虚假的替代文本和正确的替代文本。

标记生成器通常应避免使用图像本身的文件名作为替代文本。同样，标记生成器应避免从任何将同样可供呈现用户代理（例如，Web浏览器）使用的内容中生成替代文本。

这是因为一旦页面生成，它通常不会被更新，而随后读取页面的浏览器可以由用户更新，因此浏览器可能会比标记生成器在生成页面时具有更为最新和精确的启发式规则。

4.8.4.4.15 合规检查器的指导

合规检查器必须报告缺少alt属性为错误，除非符合以下列出的条件之一：

img元素位于符合上述条件的figure元素中。
img元素有一个title属性，其值不是空字符串（如上述描述）。
合规检查器已配置为假设文档是针对特定且已知能够查看图像的个人的电子邮件或文档。
img元素有一个（不符合规范的）generator-unable-to-provide-required-alt属性，其值为空字符串。一个不报告缺少alt属性为错误的合规检查器，也不得报告存在空generator-unable-to-provide-required-alt属性为错误。（这种情况不代表文档符合规范，只是生成器无法确定适当的替代文本——验证器在这种情况下不需要显示错误，因为这样的错误可能会促使标记生成器仅仅为了消除验证器的警告而包含虚假的替代文本。当然，合规检查器可以报告缺少alt属性的错误，即使存在generator-unable-to-provide-required-alt属性；例如，可能有用户选项报告所有合规错误，即使这些错误可能是使用标记生成器的更或少不可避免的结果。）

4.8.5 `iframe` 元素

Element/iframe

在所有当前引擎中支持。

Firefox1+Safari4+Chrome1+

Opera15+Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android14+

HTMLIFrameElement

在所有当前引擎中支持。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

流内容。

交互内容。

当需要嵌入内容时。

无。

在 text/html 中省略标签:

两个标签都不可省略。

内容属性:

全局属性

src — 资源地址

srcdoc — 在 iframe 中渲染的文档

name — 可导航内容的名称

sandbox — 嵌套内容的安全规则

allow — 应用于 iframe 内容的权限策略

allowfullscreen — 是否允许 iframe 内容使用 requestFullscreen()

width — 水平方向尺寸

height — 垂直方向尺寸

referrerpolicy — 元素发起的引用策略的fetches

loading — 用于确定加载延迟

[Exposed=Window]
interface HTMLIFrameElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute USVString src;
  [CEReactions] attribute (TrustedHTML or DOMString) srcdoc;
  [CEReactions] attribute DOMString name;
  [SameObject, PutForwards=value] readonly attribute DOMTokenList sandbox;
  [CEReactions] attribute DOMString allow;
  [CEReactions] attribute boolean allowFullscreen;
  [CEReactions] attribute DOMString width;
  [CEReactions] attribute DOMString height;
  [CEReactions] attribute DOMString referrerPolicy;
  [CEReactions] attribute DOMString loading;
  readonly attribute Document? contentDocument;
  readonly attribute WindowProxy? contentWindow;
  Document? getSVGDocument();

  // also has obsolete members
};

iframe 元素表示其可导航内容。

src 属性提供了该元素的 URL，该页面将被该元素的可导航内容包含。该属性（如果存在）必须是一个有效的非空 URL，可能被空格包围。如果 itemprop 属性在一个 iframe 元素上指定，则 src 属性也必须被指定。

Element/iframe#attr-srcdoc

在所有当前引擎中支持。

Firefox25+Safari6+Chrome20+

Opera?Edge79+

Edge (旧版)?Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android?

srcdoc 属性提供了该元素的可导航内容的页面内容。该属性的值用于构建一个 iframe srcdoc 文档，它是一个 文档，其 URL 匹配 about:srcdoc。

srcdoc 属性（如果存在）必须使用 HTML 语法，由以下语法组件按给定顺序组成：

任意数量的注释和ASCII 空白字符。
可选的DOCTYPE。
任意数量的注释和ASCII 空白字符。
文档元素，以html元素的形式。
任意数量的注释和ASCII 空白字符。

上述要求也适用于XML 文档。

这里一个博客使用 srcdoc 属性和下面描述的 sandbox 属性结合使用，为支持此功能的用户代理提供博客文章评论中防止脚本注入的额外保护层：

<article>
 <h1>I got my own magazine!</h1>
 <p>After much effort, I've finally found a publisher, and so now I
 have my own magazine! Isn't that awesome?! The first issue will come
 out in September, and we have articles about getting food, and about
 getting in boxes, it's going to be great!</p>
 <footer>
  <p>Written by <a href="/users/cap">cap</a>, 1 hour ago.
 </footer>
 <article>
  <footer> Thirteen minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
  <iframe sandbox srcdoc="<p>did you get a cover picture yet?"></iframe>
 </article>
 <article>
  <footer> Nine minutes ago, <a href="/users/cap">cap</a> wrote: </footer>
  <iframe sandbox srcdoc="<p>Yeah, you can see it <a href=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>in my gallery</a>."></iframe>
 </article>
 <article>
  <footer> Five minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
  <iframe sandbox srcdoc="<p>hey that's earl's table.
<p>you should get earl&amp;amp;me on the next cover."></iframe>
 </article>

请注意引号必须被转义的方式（否则 srcdoc 属性会提前结束），以及在沙盒内容中提到的原始符号（例如在URL或文本中）必须双重转义的方式——一次是为了在最初解析 srcdoc 属性时保留符号，另一次是为了防止在解析沙盒内容时误解符号。

此外，请注意，由于 DOCTYPE 在 iframe srcdoc 文档中是可选的，而 html，head 和 body 元素有可选的开始和结束标签，并且 title 元素在 iframe srcdoc 文档中也是可选的，所以 srcdoc 属性中的标记可以相对简洁，尽管它代表了整个文档，因为只需要在语法中字面上出现 body 元素的内容。其他元素仍然存在，但只是隐含地存在。

在HTML 语法中，作者只需记住使用 U+0022 引号字符 (") 包裹属性内容，然后转义所有的 U+0026 符号 (&) 和 U+0022 引号 (") 字符，并指定 sandbox 属性，以确保内容安全嵌入。（记得在引号之前转义符号，以确保引号变成 " 而不是 &quot;。）

在 XML 中，U+003C 小于号字符 (<) 也需要转义。为了防止属性值规范化，一些 XML 的空白字符——特别是 U+0009 制表符 (tab)、U+000A 换行符 (LF) 和 U+000D 回车符 (CR)——也需要转义。[XML]

如果 src 属性和 srcdoc 属性同时指定，则 srcdoc 属性优先。这允许作者为不支持 srcdoc 属性的旧版用户代理提供一个后备的 URL。

iframe HTML 元素插入步骤，给定 insertedNode，如下：

如果 insertedNode 的 shadow-including root 的浏览上下文为 null，则返回。
为 insertedNode 创建一个新的子可导航对象。
如果 insertedNode 有 sandbox 属性，则根据属性值和 insertedNode 的 iframe 沙盒标志集解析沙盒指令。
处理 insertedNode 的 iframe 属性，并将 initialInsertion 设置为 true。

iframe HTML 元素移除步骤，给定 removedNode，是销毁子可导航对象，给定 removedNode。

这在没有触发任何 unload 事件的情况下发生（该元素的内容文档被销毁，而不是卸载）。

虽然 iframe 元素在影子树中处理，如上所述，但其行为的其他几个方面在影子树方面没有明确规定。有关详细信息，请参见 issue #763。

每当一个具有非空可导航内容的 iframe 元素的 srcdoc 属性被设置、更改或移除时，用户代理必须处理 iframe 属性。

同样，每当一个具有非空可导航内容但没有指定 srcdoc 属性的 iframe 元素的 src 属性被设置、更改或移除时，用户代理必须处理 iframe 属性。

要处理 iframe 的属性，对于元素 element，可选布尔值 initialInsertion （默认为 false）：

如果 element 的 srcdoc 属性已指定，则：
1. 将 element 的 current navigation was lazy loaded 布尔值设为 false。
2. 如果 will lazy load element steps 给定 element 返回 true，则：
  1. 将 element 的 lazy load resumption steps 设置为从标记为 navigate to the srcdoc resource 的步骤开始的算法的其余部分。
  2. 将 element 的 current navigation was lazy loaded 布尔值设为 true。
  3. 启动对 element 的懒加载元素的交叉观察。
  4. 返回。
3. Navigate to the srcdoc resource：导航 element 的 iframe 或 frame，about:srcdoc，空字符串和 element 的 srcdoc 属性的值。
  
  生成的 Document 必须被视为一个 iframe srcdoc 文档。
否则：
1. 让 url 成为给定 element 和 initialInsertion 后运行共享属性处理步骤的结果。
2. 如果 url 为 null，则返回。
3. 如果 url 匹配 about:blank 且 initialInsertion 为 true，则：
  1. 运行iframe 加载事件步骤，给定 element。
  2. 返回。
4. 让 referrerPolicy 成为 element 的 referrerpolicy 内容属性的当前状态。
5. 将 element 的 current navigation was lazy loaded 布尔值设为 false。
6. 如果 will lazy load element steps 给定 element 返回 true，则：
  1. 将 element 的 lazy load resumption steps 设置为从标记为 navigate 的步骤开始的算法的其余部分。
  2. 将 element 的 current navigation was lazy loaded 布尔值设为 true。
  3. 启动对 element 的懒加载元素的交叉观察。
  4. 返回。
7. Navigate：导航 element 的 iframe 或 frame，给定 url 和 referrerPolicy。

给定元素 element 和布尔值 initialInsertion，iframe 和 frame 元素的共享属性处理步骤如下：

令 url 为 URL 记录 about:blank。
如果 element 指定了 src 属性，并且其值不是空字符串，则：
1. 令 maybeURL 为编码解析 URL 的结果，给定该属性的值，相对于 element 的节点文档。
2. 如果 maybeURL 不是失败，则将 url 设置为 maybeURL。
如果 element 的节点可导航的包含的祖先可导航包含一个可导航，其活动文档的 URL 等于 url，且 排除片段 设置为 true，则返回 null。
如果 url 匹配 about:blank，且 initialInsertion 为 true，则执行 URL 和历史记录更新步骤，给定 element 的可导航内容的活动文档和 url。

如果 url 是类似 about:blank?foo 的内容，这是必要的。如果 url 只是纯粹的 about:blank，这将不做任何事情。
返回 url。

要导航到一个 iframe 或 frame，给定一个元素 element，一个 URL url，一个引荐策略 referrerPolicy，以及一个可选的字符串或 null srcdocString（默认为 null）：

让 historyHandling 为 "auto"。
如果 element 的内容可导航的活动文档未完全加载，则将 historyHandling 设置为 "replace"。
如果 element 是一个 iframe，则将 element 的待处理资源计时开始时间设置为当前高分辨率时间，考虑到 element 的节点文档的相关全局对象。
导航 element 的内容可导航到 url，使用 element 的节点文档，其中 historyHandling 设置为 historyHandling，referrerPolicy 设置为 referrerPolicy，以及 documentResource 设置为 srcdocString。

每个 文档 都有一个 iframe 加载中标志和一个静音 iframe 加载标志。当一个 文档 被创建时，这些标志必须被取消设置。

要运行 iframe 加载事件步骤，给定一个 iframe 元素 element：

断言：element 的内容可导航不为 null。
让 childDocument 为 element 的内容可导航的活动文档。
如果 childDocument 的静音 iframe 加载标志已设置，则返回。
如果 element 的待处理资源计时开始时间不为 null，则：
1. 让 global 为 element 的节点文档的相关全局对象。
2. 让 fallbackTimingInfo 为一个新的获取计时信息其开始时间为 element 的待处理资源计时开始时间和其响应结束时间为当前高分辨率时间给定 global。
3. 标记资源计时给定 fallbackTimingInfo， url， "iframe"， global，空字符串，一个新的响应体信息，以及 0。
4. 将 element 的待处理资源计时开始时间设置为 null。
设置 childDocument 的 iframe 加载中标志。
触发一个事件名为 load 于 element。
取消设置 childDocument 的 iframe 加载中标志。

这与脚本一起使用时，可以用于探测本地网络 HTTP 服务器的 URL 空间。用户代理可能会实现比上述描述更严格的跨源访问控制策略以减轻此攻击，但不幸的是，这些策略通常与现有的网页内容不兼容。

如果某个元素类型可能延迟加载事件，则对于该类型的每个元素 element，用户代理必须延迟 element 的节点文档的加载事件，如果 element 的内容可导航非 null，并且以下任意条件为真：

element 的内容可导航的活动文档不准备好执行后加载任务；
element 的内容可导航的正在延迟 load 事件为真；或者
任何东西正在延迟 element 的内容可导航的活动文档的加载事件。

如果在处理 load 事件期间， element 的内容可导航再次被导航，这将进一步延迟加载事件。

每个 iframe 元素有一个关联的当前导航是惰性加载布尔值，初始值为 false。它在处理 iframe 属性算法中设置和取消设置。

一个 iframe 元素，其当前导航是惰性加载布尔值为 false 可能延迟加载事件。

每个 iframe 元素有一个关联的 null 或 DOMHighResTimeStamp 待处理资源计时开始时间，初始值为 null。

如果在元素创建时，srcdoc 属性未设置，而 src 属性也未设置或已设置但其值无法被解析，则元素的内容可导航将保持在初始 about:blank 文档。

如果用户导航离开此页面，iframe 的内容可导航的活动 WindowProxy 对象将代理新的 Window 对象用于新的 文档 对象，但 src 属性不会改变。

name 属性（如果存在）必须是一个有效的可导航目标名称。给定的值用于命名元素的内容可导航，如果在创建时存在该属性。

Element/iframe#attr-sandbox

所有当前浏览器均支持。

Firefox17+Safari5+Chrome4+

Opera?Edge79+

Edge（旧版）12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

sandbox 属性在指定时，会对由 iframe 托管的任何内容启用一组额外的限制。其值必须是无序的唯一空格分隔的标记集合，且这些标记是 ASCII 不区分大小写。允许的值包括：

allow-downloads
allow-forms
allow-modals
allow-orientation-lock
allow-pointer-lock
allow-popups
allow-popups-to-escape-sandbox
allow-presentation
allow-same-origin
allow-scripts
allow-top-navigation
allow-top-navigation-by-user-activation
allow-top-navigation-to-custom-protocols

当设置了该属性时，内容会被视为来自一个唯一的不透明源，表单、脚本以及各种可能令人烦恼的 API 会被禁用，且链接被防止指向其他可导航对象。allow-same-origin 关键字使内容被视为来自其真实源，而不是强制其成为一个不透明源；allow-top-navigation 关键字允许内容导航其可遍历的可导航对象； allow-top-navigation-by-user-activation 关键字行为类似，但只允许在浏览上下文的活动窗口具有临时激活时进行此类导航；allow-top-navigation-to-custom-protocols 重新启用对非 fetch 协议的导航，允许交给外部软件；而 allow-forms、 allow-modals、 allow-orientation-lock、 allow-pointer-lock、 allow-popups、 allow-presentation、 allow-scripts、和 allow-popups-to-escape-sandbox 关键字分别重新启用表单、模态对话框、屏幕方向锁定、指针锁 API、弹出窗口、展示 API、脚本和未沙箱化的辅助浏览上下文的创建。allow-downloads 关键字允许内容执行下载。 [POINTERLOCK] [SCREENORIENTATION] [PRESENTATION]

allow-top-navigation 和 allow-top-navigation-by-user-activation 关键字不能同时指定，因为这样做是多余的；在这种不符合规范的标记中，只有 allow-top-navigation 会有效。

类似地，如果指定了 allow-top-navigation-to-custom-protocols 关键字，则不能指定 allow-top-navigation 或 allow-popups 关键字，因为这样做是多余的。

要在沙箱内容中允许 alert()、confirm() 和 prompt() 函数，必须同时指定 allow-modals 和 allow-same-origin 关键字，并且加载的 URL 需要与同源，与顶级源相同。没有 allow-same-origin 关键字，内容总是被视为跨源的，跨源内容无法显示简单对话框。

当嵌入页面与包含 iframe 的页面具有相同源时，同时设置 allow-scripts 和 allow-same-origin 关键字允许嵌入页面简单地删除 sandbox 属性，然后重新加载自己，从而有效地完全突破沙箱。

这些标志仅在内容可导航的 iframe 元素被导航时生效。删除它们，或删除整个 sandbox 属性，对已加载的页面没有影响。

不应从与包含 iframe 元素的文件相同的服务器上提供潜在的恶意文件。如果攻击者能够说服用户直接访问恶意内容，而不是在 iframe 中访问，沙箱化恶意内容的帮助非常有限。为了限制恶意 HTML 内容可能造成的损害，它应该从一个单独的专用域提供。使用不同的域可以确保文件中的脚本无法攻击站点，即使用户被欺骗直接访问这些页面，也不会在没有 sandbox 属性保护的情况下。

当 iframe 元素的 sandbox 属性在具有非空内容可导航时被设置或更改，用户代理必须解析沙箱指令以获取属性值和 iframe 元素的 iframe 沙箱标志设置。

当 iframe 元素的 sandbox 属性在具有非空内容可导航时被移除，用户代理必须清空 iframe 元素的 iframe 沙箱标志设置。

在这个例子中，一些完全未知、可能具有攻击性的用户提供的 HTML 内容被嵌入到一个页面中。由于它是从一个单独的域提供的，因此受到所有正常的跨站点限制。此外，嵌入的页面禁用了脚本、插件和表单，且无法导航到其他框架或窗口（除了自身或它嵌入的任何框架或窗口）。

<p>We're not scared of you! Here is your content, unedited:</p>
<iframe sandbox src="https://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>

重要的是使用一个单独的域，以确保即使攻击者说服用户直接访问该页面，该页面也不会在网站的源上下文中运行，从而使用户免受页面中发现的任何攻击。

在这个例子中，一个来自其他网站的小工具被嵌入。这个小工具启用了脚本和表单，并且解除源沙箱限制，允许小工具与其源服务器通信。然而，沙箱仍然有用，因为它禁用了插件和弹出窗口，从而降低了用户暴露于恶意软件和其他干扰的风险。

<iframe sandbox="allow-same-origin allow-forms allow-scripts"
        src="https://maps.example.com/embedded.html"></iframe>

假设文件 A 包含以下片段：

<iframe sandbox="allow-same-origin allow-forms" src=B></iframe>

假设文件 B 也包含一个 iframe：

<iframe sandbox="allow-scripts" src=C></iframe>

此外，假设文件 C 包含一个链接：

<a href=D>Link</a>

在这个示例中，假设所有文件都以 text/html 格式提供。

在这种情况下，页面 C 的所有 sandboxing 标志都被设置。脚本被禁用，因为 A 中的 iframe 中禁用了脚本，这会覆盖 B 中 allow-scripts 关键字。表单也被禁用，因为内层的 iframe（在 B 中）没有设置 allow-forms 关键字。

假设现在 A 中的一个脚本移除了 A 和 B 中的所有 sandbox 属性。这立即不会改变任何东西。如果用户点击 C 中的链接，将页面 D 加载到 B 中的 iframe 中，页面 D 现在将表现得好像 B 中的 iframe 设置了 allow-same-origin 和 allow-forms 关键字，因为这是在 B 加载时 A 中的 content navigable 的状态。

一般来说，动态移除或更改 sandbox 属性是不明智的，因为这会使推测哪些内容将被允许变得相当困难。

allow 属性在指定时，决定了在容器策略用于权限策略初始化 Document 的 iframe 的内容可导航时使用的策略。它的值必须是一个序列化权限策略。[PERMISSIONSPOLICY]

在这个示例中，iframe 用于嵌入来自在线导航服务的地图。allow 属性用于在嵌套上下文中启用地理位置 API。

<iframe src="https://maps.example.com/" allow="geolocation"></iframe>

allowfullscreen 属性是一个布尔属性。当指定时，它表示 文档 对象在 iframe 元素的内容可导航区域将会被初始化为一个允许从任何源使用 "fullscreen" 特性的权限策略。这是通过处理权限策略属性算法来强制执行的。 [PERMISSIONSPOLICY]

在这里，使用 iframe 嵌入了一个视频网站的播放器。需要 allowfullscreen 属性来允许播放器以全屏模式显示视频。

<article>
 <header>
  <p><img src="/usericons/1627591962735"> <b>Fred Flintstone</b></p>
  <p><a href="/posts/3095182851" rel=bookmark>12:44</a> — <a href="#acl-3095182851">Private Post</a></p>
 </header>
 <p>Check out my new ride!</p>
 <iframe src="https://video.example.com/embed?id=92469812" allowfullscreen></iframe>
</article>

无论是 allow 还是 allowfullscreen 都不能授予 iframe 元素的内容可导航访问某个功能，前提是该元素的节点文档尚未被允许使用该功能。

要确定一个 Document 对象 document 是否允许使用权限控制功能 feature，请执行以下步骤：

如果 document 的浏览上下文为 null，则返回 false。
如果 document 不是完全活跃的，则返回 false。
如果在 feature、document 和 document 的源上运行是否在文档中启用功能的结果为 "Enabled"，则返回 true。
返回 false。

由于它们仅影响权限策略的内容可导航的活动文档，allow 和 allowfullscreen 属性仅在内容可导航的 iframe 被导航时才会生效。添加或删除这些属性对已经加载的文档没有影响。

iframe 元素支持尺寸属性，用于嵌入内容具有特定尺寸的情况（例如广告单元具有明确的尺寸）。

iframe 元素永远不会有回退内容，因为它将始终创建一个新的子可导航，无论指定的初始内容是否成功使用。

referrerpolicy 属性是一个引用来源政策属性。它的作用是设置在处理 iframe 属性时使用的引用来源政策。[REFERRERPOLICY]

loading 属性是一个延迟加载属性。它的作用是指示对于视口之外的 iframe 元素的加载策略。

当 loading 属性的状态更改为 Eager 状态时，用户代理必须执行以下步骤：

让 resumptionSteps 为 iframe 元素的延迟加载恢复步骤。
如果 resumptionSteps 为 null，则返回。
将 iframe 的延迟加载恢复步骤设置为 null。
调用 resumptionSteps。

iframe 元素的后代不代表任何内容。（在不支持 iframe 元素的传统用户代理中，这些内容会被解析为可能作为回退内容的标记。）

HTML 解析器将 iframe 元素中的标记视为文本。

HTMLIFrameElement/src

支持所有当前的引擎。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

IDL 属性 src、name、sandbox 和 allow 必须反映相同名称的内容属性。

HTMLIFrameElement/srcdoc

支持所有当前的引擎。

Firefox25+Safari6+Chrome20+

Opera?Edge79+

Edge (旧版)?Internet Explorer不支持

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

srcdoc 获取器步骤如下：

让 attribute 为运行通过命名空间和本地名称获取属性的结果，参数为 null、srcdoc 的本地名称，和 this。
如果 attribute 为 null，则返回空字符串。
返回 attribute 的值。

srcdoc 设置器步骤如下：

让 compliantString 为调用获取受信任的类型符合字符串算法的结果，参数为 TrustedHTML、this 的相关全局对象、给定值、“HTMLIFrameElement srcdoc” 和 “script”。
设置属性值，参数为 this、srcdoc 的本地名称和 compliantString。

受支持的标记对于 sandbox 的 DOMTokenList 是在 sandbox 属性中定义的允许值，并且用户代理支持的值。

allowFullscreen IDL 属性必须反映 allowfullscreen 内容属性。

HTMLIFrameElement/referrerPolicy

所有当前引擎都支持。

Firefox50+Safari14+Chrome52+

Opera?Edge79+

Edge (旧版)?Internet Explorer不支持

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

referrerPolicy IDL 属性必须反映 referrerpolicy 内容属性，仅限已知值。

loading IDL 属性必须反映 loading 内容属性，仅限已知值。

HTMLIFrameElement/contentDocument

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer8+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

contentDocument 获取器的步骤是返回此的内容文档。

HTMLIFrameElement/contentWindow

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+

Opera8+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

contentWindow 获取器的步骤是返回此的内容窗口。

以下是一个使用iframe 来包含来自广告经纪人的广告的页面示例：

<iframe src="https://ads.example.com/?customerid=923513721&amp;format=banner"
        width="468" height="60"></iframe>

4.8.6 `embed` 元素

Element/embed

支持所有当前引擎。

Firefox1+Safari4+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLEmbedElement

支持所有当前引擎。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

交互内容.

当需要嵌入内容时。

无内容.

在 text/html 中的标签省略:

无结束标签.

内容属性:

全局属性

src — 资源的地址

type — 嵌入资源的类型

width — 水平尺寸

height — 垂直尺寸

任何其他无命名空间的属性（见正文）。

[Exposed=Window]
interface HTMLEmbedElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute USVString src;
  [CEReactions] attribute DOMString type;
  [CEReactions] attribute DOMString width;
  [CEReactions] attribute DOMString height;
  Document? getSVGDocument();

  // also has obsolete members
};

embed 元素为外部应用程序或交互内容提供了一个集成点。

src 属性提供了嵌入资源的 URL。如果存在，此属性必须包含一个有效的非空 URL，可能会被空格包围。

如果在 itemprop 属性的 embed 元素上指定了，那么必须也指定 src 属性。

type 属性（如果存在）提供了通过插件选择实例化的 MIME 类型。其值必须是有效的 MIME 类型字符串。如果同时存在 type 属性和 src 属性，那么 type 属性必须指定与显式内容类型元数据相同的类型，由 src 属性指定的资源。

当发生以下任一情况时，为元素实例化的任何插件必须被移除，embed 元素不表示任何内容:

元素既没有 src 属性也没有 type 属性。
元素有一个媒体元素祖先。
元素有一个 object 祖先元素，该元素没有显示其回退内容。

当同时满足以下条件时，embed 元素被称为潜在活动:

元素在文档中，或在上次文档中时，事件循环达到了步骤1。
元素的节点文档完全激活。
元素设置了 src 属性或 type 属性（或两者皆有）。
元素的 src 属性要么不存在，要么其值不是空字符串。
元素不是媒体元素的后代。
元素不是一个没有显示其回退内容的 object 元素的后代。
元素正在渲染，或在上次事件循环达到了步骤1 时正在渲染。

每当一个 embed 元素不再潜在活动变为潜在活动，以及每当一个潜在活动的 embed 元素保留潜在活动并设置了 src 属性，已更改或删除，或设置了 type 属性，已更改或删除，用户代理必须在 embed 任务源上排队一个元素任务，给定元素以运行该元素的 embed 元素设置步骤。

定义 embed 元素设置步骤对于给定的 embed 元素 element 如下:

如果另一个任务已排队运行 embed 元素设置步骤给定 element，则返回。
如果 element 设置了 src 属性，则:
1. 让 url 成为编码解析 URL 的结果，给定 element 的 src 属性的值，相对于 element 的节点文档。
2. 如果 url 失败，则返回。
3. 让 request 成为一个新的请求，其 URL 是 url，客户端是 element 的节点文档的相关设置对象，目的地是 "embed"，凭证模式是 "include"，模式是 "navigate"，启动类型是 "embed"，并且其使用 URL 凭证标志设置。
4. 获取 request，设置 处理响应 的步骤，给定响应 response:
  1. 如果另一个任务已排队运行 embed 元素设置步骤给定 element，则返回。
  2. 如果 response 是一个网络错误，则触发一个事件名为 load 在 element 上，并返回。
  3. 让 type 成为确定内容类型的结果，给定 element 和 response。
  4. 切换 type:
    null
    不显示插件给 element。
    否则
    如果 element 的可导航内容为 null，则为 element 创建一个新的子可导航内容。
    
    导航 element 的可导航内容到 response 的 URL，使用 element 的节点文档，设置响应为 response，并设置 历史处理 为 "替换"。
    
    element 的 src 属性不会更新，即使可导航内容进一步导航到其他位置。
    
    element 现在表示其可导航内容。
  获取资源必须延迟加载事件 element 的节点文档。
否则，不显示插件给 element。

确定给定 embed 元素 element 和响应 response 的内容类型，运行以下步骤:

如果 element 设置了 type 属性，并且该属性的值是一个插件支持的类型，则返回 type 属性的值。
如果 response 的路径组件与插件支持的模式匹配，则返回该插件可以处理的类型。

例如，一个插件可能会说它可以处理路径组件以四个字符字符串 ".swf" 结尾的 URL。
如果 response 具有显式内容类型元数据，并且该值是插件支持的类型，则返回该值。
返回 null。

上面的算法有意允许 response 具有非 OK 状态。这允许服务器即使在错误响应中（例如，HTTP 500 内部服务器错误代码仍然可以包含插件数据）返回数据给插件。

不为 embed 元素 element 显示插件:

销毁一个子可导航内容给定 element。
显示一个指示没有找到插件的标识，作为 element 的内容。
element 现在表示什么都没有。

embed 元素没有回退内容；其后代将被忽略。

每当一个 embed 元素潜在活动变为非潜在活动时，为该元素实例化的任何插件必须被卸载。

embed 元素可能会延迟加载事件。

embed 元素支持尺寸属性。

IDL 属性 src 和 type 必须分别反映同名的内容属性。

4.8.7 `object` 元素

元素/object

所有当前引擎均支持。

Firefox1+Safari3+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLObjectElement

所有当前引擎均支持。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

流内容.

期望嵌入内容的地方。

在 text/html 中省略标签:

标签均不可省略。

内容属性:

全局属性

data — 资源地址

type — 嵌入资源类型

name — 内容可导航的名称

form — 将元素与 表单 元素关联

width — 水平尺寸

height — 垂直尺寸

[Exposed=Window]
interface HTMLObjectElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute USVString data;
  [CEReactions] attribute DOMString type;
  [CEReactions] attribute DOMString name;
  readonly attribute HTMLFormElement? form;
  [CEReactions] attribute DOMString width;
  [CEReactions] attribute DOMString height;
  readonly attribute Document? contentDocument;
  readonly attribute WindowProxy? contentWindow;
  Document? getSVGDocument();

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  boolean reportValidity();
  undefined setCustomValidity(DOMString error);

  // also has obsolete members
};

根据 object 元素实例化的内容类型，节点还支持其他接口。

object 元素可以表示一个外部资源，具体取决于资源的类型，该资源将被视为图像或子可导航内容。

data 属性指定资源的 URL。它必须存在，并且必须包含有效的非空 URL，可能被空格包围。

type 属性（如果存在）指定资源的类型。如果存在，该属性必须是有效的 MIME 类型字符串。

name 属性（如果存在）必须是一个有效的可导航目标名称。给定的值用于命名元素的内容可导航（如果适用），并且如果在元素的内容可导航创建时存在，则适用。

每当发生以下情况之一时：

元素被创建，
元素从打开元素栈的 HTML 解析器或 XML 解析器弹出，
元素不在打开元素栈的 HTML 解析器或 XML 解析器中，并且它要么被插入文档，要么从文档中移除，
元素的节点文档更改了它是否为完全活动，
元素的祖先 object 元素显示或隐藏其后备内容，
元素的 classid 属性被设置、更改或移除，
元素的 classid 属性不存在，并且其 data 属性被设置、更改或移除，
元素的 classid 属性和 data 属性都不存在，并且其 type 属性被设置、更改或移除，
元素从正在渲染变为未渲染，或反之亦然，

...用户代理必须排队一个元素任务在给定 object 元素的 DOM 操作任务源上，运行以下步骤来重新确定 object 元素表示的内容。此任务排队或正在运行时，必须延迟元素的加载事件在其节点文档中。

如果用户表示希望显示此 object 元素的后备内容而不是元素的通常行为，那么跳转到下面标记为后备的步骤。

例如，用户可以要求显示元素的后备内容，因为该内容使用用户觉得更容易访问的格式。
如果元素有一个祖先媒体元素，或有一个祖先 object 元素未显示其后备内容，或者元素不在其文档中，其浏览上下文为非空，或者元素的节点文档未完全活动，或者元素仍在打开元素栈的 HTML 解析器或 XML 解析器中，或者元素未渲染，则跳转到下面标记为后备的步骤。
如果 data 属性存在且其值不为空字符串，则：
1. 如果 type 属性存在且其值不是用户代理支持的类型，则用户代理可以跳过获取内容以检查其真实类型，直接跳转到下面标记为后备的步骤。
2. 令 url 为编码解析 URL 的结果，给定 data 属性的值，相对于元素的节点文档。
3. 如果 url 失败，则触发一个事件名为 error 在元素上，然后跳转到下面标记为后备的步骤。
4. 令 request 为一个新的请求，其 URL 为 url，客户端为元素的节点文档的相关设置对象，目标为 "object"，凭证模式为 "include"，模式为 "navigate"，发起者类型为 "object"，并且其使用 URL 凭证标志被设置。
5. 获取 request。
  
  获取资源必须延迟元素的加载事件在其节点文档中，直到在资源被获取（在下文中定义）后由网络任务源排队的任务被执行。
6. 如果资源尚不可用（例如，由于资源未在缓存中，因此需要通过网络请求来加载资源），则跳转到下面标记为后备的步骤。资源可逐步加载；用户代理可以选择在获得足够数据以开始处理资源时认为资源“可用”。
7. 如果加载失败（例如，出现 HTTP 404 错误，DNS 错误），触发一个事件名为 error 在元素上，然后跳转到下面标记为后备的步骤。
8. 确定 resource type，如下所示：
  1. 令 resource type 为未知。
  2. 如果用户代理配置为严格遵守此资源的 Content-Type 标头，并且资源有关联的 Content-Type 元数据，则令 resource type 为在资源的 Content-Type 元数据中指定的类型，并跳转到下面标记为 处理程序 的步骤。
    
    这可能引入一个漏洞，其中站点试图嵌入使用特定类型的资源，但远程站点覆盖了它，并为用户代理提供了触发不同类型内容的资源，具有不同的安全特性。
  3. 运行以下列表中的适当步骤集：
    如果资源有关联的 Content-Type 元数据
    令 binary 为假。
    
    如果在资源的 Content-Type 元数据中指定的类型是 "text/plain"，并且应用文本或二进制资源判别规则到资源的结果是资源不是 text/plain，则将 binary 设置为真。
    
    如果在资源的 Content-Type 元数据中指定的类型是 "application/octet-stream"，则将 binary 设置为真。
    
    如果 binary 为假，则令 resource type 为在资源的 Content-Type 元数据中指定的类型，并跳转到下面标记为 处理程序 的步骤。
    
    如果在 type 属性存在于 object 元素上，并且其值不是 application/octet-stream，则运行以下步骤：
    
    如果属性的值是以 "image/" 开头的类型，而不是 XML MIME 类型，则令 resource type 为在 type 属性中指定的类型。
    
    跳转到下面标记为 处理程序 的步骤。
    否则，如果资源没有关联的 Content-Type 元数据
    如果在 type 属性存在于 object 元素上，则令 tentative type 为在 type 属性中指定的类型。
    
    否则，令 tentative type 为资源的计算类型。
    
    如果 tentative type 不是 application/octet-stream，则令 resource type 为 tentative type 并跳转到下面标记为 处理程序 的步骤。
  4. 如果应用 URL 解析器算法到指定资源的 URL（在任何重定向之后）的结果为一个 URL 记录，其路径组件匹配插件支持的模式，则令 resource type 为该插件可以处理的类型。
    
    例如，插件可能会说它可以处理路径组件以四字符字符串 ".swf" 结尾的资源。
  此步骤可能会结束，或上面的子步骤之一直接跳到下一步，而 resource type 仍然未知。在这两种情况下，下一步将触发后备。
9. 处理程序：根据以下第一个匹配的情况处理内容：
  
  如果 resource type 是 XML MIME 类型，或 resource type 不以 "image/" 开头
  
  如果 object 元素的内容可导航为 null，则为元素创建一个新的子可导航内容。
  
  令 response 为获取的响应。
  
  如果 response 的 URL 不匹配 about:blank，则使用元素的节点文档，导航元素的内容可导航到 response 的 URL，历史处理 设置为 "替换"。
  
  data 属性不会更新如果内容可导航进一步导航到其他位置。
  
  object 元素表示其内容可导航。
  
  如果 resource type 以 "image/" 开头，并且未禁用图像支持
  
  销毁一个子可导航内容给定 object 元素。
  
  应用图像嗅探规则以确定图像的类型。
  
  object 元素表示指定的图像。
  
  如果图像无法渲染，例如因为它格式错误或格式不受支持，跳转到下面标记为后备的步骤。
  
  否则
  
  给定的 resource type 不受支持。跳转到下面标记为后备的步骤。
  
  如果上一步结束时 resource type 仍然未知，这就是触发的情况。
10. 元素的内容不是 object 元素表示的一部分。
11. 如果 object 元素不表示其内容可导航，则在资源完全加载后，排队一个元素任务在给定 object 元素的 DOM 操作任务源上，触发一个事件名为 load 在元素上。
  
  如果元素确实表示其内容可导航，则在创建的 Document 完全加载后，将排队一个类似的任务。
12. 返回。
后备：object 元素表示元素的子元素。这是元素的后备内容。销毁一个子可导航内容给定元素。

由于上述算法，object 元素的内容充当后备内容，仅在引用的资源无法显示时使用（例如返回 404 错误）。这允许多个 object 元素嵌套在一起，针对具有不同能力的多个用户代理，用户代理选择它支持的第一个。

object 元素可能延迟加载事件。

form 属性用于显式关联 object 元素与其表单所有者。

object 元素支持尺寸属性。

HTMLObjectElement/data

所有当前引擎均支持。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLObjectElement/type

所有当前引擎均支持。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android? Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLObjectElement/name

所有当前引擎均支持。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

IDL 属性 data、type 和 name 各自必须反映同名的相应内容属性。

HTMLObjectElement/contentDocument

所有当前引擎均支持。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer8+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

contentDocument getter 步骤是返回 this 的内容文档。

HTMLObjectElement/contentWindow

所有当前引擎均支持。

Firefox22+Safari13+Chrome53+

Opera?Edge79+

Edge (旧版)17+Internet ExplorerNo

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

contentWindow getter 步骤是返回 this 的内容窗口。

willValidate、validity 和 validationMessage 属性，以及 checkValidity()、reportValidity() 和 setCustomValidity() 方法，是约束验证 API 的一部分。form IDL 属性是元素的表单 API 的一部分。

在此示例中，使用 object 元素将 HTML 页面嵌入到另一个页面中。

<figure>
 <object data="clock.html"></object>
 <figcaption>My HTML Clock</figcaption>
</figure>

4.8.8 `video` 元素

Element/video

所有当前引擎均支持。

Firefox3.5+Safari3.1+Chrome3+

Opera10.5+Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLVideoElement

所有当前引擎均支持。

Firefox3.5+Safari3.1+Chrome3+

Opera10.5+Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+

如果元素具有 controls 属性：Interactive content.

Palpable content.

Contexts in which this element can be used:

在期望嵌入内容的地方。

Content model:

如果元素具有 src 属性：零个或多个 track 元素，然后是透明内容，但不能有媒体元素后代。

如果元素没有 src 属性：零个或多个 source 元素，然后是零个或多个 track 元素，然后是透明内容，但不能有媒体元素后代。

Tag omission in text/html:

标签都不可省略。

Content attributes:

全局属性

src — 资源地址

crossorigin — 处理跨域请求的方式

poster — 视频播放前显示的海报帧

preload — 提示需要缓冲多少媒体资源

autoplay — 页面加载时自动开始播放媒体资源

plays inline — 鼓励用户代理在元素的播放区域内显示视频内容

loop — 是否循环播放媒体资源

muted — 默认是否静音媒体资源

controls — 显示用户代理控件

width — 水平尺寸

height — 垂直尺寸

[Exposed=Window]
interface HTMLVideoElement : HTMLMediaElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute unsigned long width;
  [CEReactions] attribute unsigned long height;
  readonly attribute unsigned long videoWidth;
  readonly attribute unsigned long videoHeight;
  [CEReactions] attribute USVString poster;
  [CEReactions] attribute boolean playsInline;
};

A video 元素用于播放视频或电影，以及带有字幕的音频文件。

可以在 video 元素内提供内容。用户代理不应向用户显示此内容；它是为不支持 video 的旧版网页浏览器准备的，以便向这些旧浏览器的用户显示文本，告知他们如何访问视频内容。

特别地，此内容并不是为了应对可访问性问题。为了使视频内容对部分视力障碍者、盲人、听力障碍者、聋人以及其他有身体或认知障碍的人可访问，有多种功能可用。可以提供嵌入视频流中的字幕或使用 track 元素作为外部文件的字幕。手语轨道可以嵌入视频流中。音频描述可以嵌入视频流中或以文本形式使用 WebVTT 文件引用，并由用户代理合成成语音。WebVTT 还可以用于提供章节标题。对于不愿意使用媒体元素的用户，可以通过简单地在 video 元素附近的文本中链接到转录本或其他文本替代品来提供这些内容。[WEBVTT]

The video 元素是一个媒体元素，其媒体数据显然是视频数据，可能还包括相关的音频数据。

src，crossorigin，preload，autoplay，loop，muted，和 controls 属性是所有媒体元素的共同属性。

poster 属性提供一个图像文件的 URL，用户代理可以在没有视频数据时显示该图像。如果存在此属性，则必须包含一个有效的非空 URL，可能被空格包围。

如果指定的资源要被使用，那么，当元素被创建或 poster 属性被设置、更改或移除时，用户代理必须运行以下步骤来确定元素的海报帧（无论元素的显示海报标志的值如何）：

如果此算法的现有实例正在为此 video 元素运行，则中止该算法实例而不更改海报帧。
如果 poster 属性的值为空字符串或属性不存在，则没有海报帧；返回。
让 url 成为编码解析 URL 的结果，给定 poster 属性的值，相对于元素的节点文档。
如果 url 失败，则返回。没有海报帧。
让 request 成为一个新请求，其 URL 是 url，客户端是元素的节点文档的相关设置对象，目标是 "image"，启动者类型是 "video"，凭证模式是 "include"，并且使用 URL 凭证标志被设置。
抓取 request。这必须延迟元素的加载事件的节点文档。
如果因此获得图像，则海报帧是该图像。否则，没有海报帧。

poster 属性提供的图像，即 海报帧，旨在作为视频的代表帧（通常是第一个非空白帧），以便让用户了解视频的内容。

playsinline 属性是一个布尔属性。如果存在，它作为用户代理的提示，视频应该默认在文档中“内联”显示，受限于元素的播放区域，而不是全屏显示或在一个独立的可调整大小的窗口中显示。

缺少 playsinline 属性并不意味着视频将默认全屏显示。事实上，大多数用户代理已经选择默认内联播放所有视频，并且在这些用户代理中，playsinline 属性没有效果。

A video 元素表示以下列表中第一个匹配条件的内容：

当没有视频数据可用时（元素的 readyState 属性为 HAVE_NOTHING，或 HAVE_METADATA 但尚未获得任何视频数据，或元素的 readyState 属性为任何后续值，但媒体资源没有视频通道）: video 元素表示其海报帧（如果有），否则表示透明黑，没有自然尺寸。
当 video 元素暂停时，当前播放位置是视频的第一帧，并且元素的显示海报标志被设置: video 元素表示其海报帧（如果有），否则表示视频的第一帧。
当 video 元素暂停，且与当前播放位置对应的视频帧不可用时（例如因为视频正在查找或缓冲）
当 video 元素既不可能播放，也不暂停时（例如在查找或停滞时）: video 元素表示视频的最后一帧。
当 video 元素暂停时: video 元素表示与当前播放位置对应的视频帧。
否则（video 元素有一个视频通道并且可能播放）: video 元素表示与不断增加的 “当前”位置对应的视频帧。当当前播放位置变化，使得最后渲染的帧不再是视频中与当前播放位置对应的帧时，必须渲染新帧。

视频帧必须从在事件循环最后到达步骤 1 时所选择的视频轨道中获取。

视频流中与特定播放位置对应的帧由视频流的格式定义。

video 元素还表示任何文本轨迹提示，其文本轨迹提示活动标志被设置且文本轨迹处于显示模式，并且任何媒体资源中的音频，在当前播放位置。

任何与媒体资源相关的音频必须（如果播放）与当前播放位置同步播放，在元素的有效媒体音量下播放。用户代理必须播放在事件循环最后到达步骤 1 时启用的音频轨道。

此外，用户代理可以通过在视频或元素的播放区域的其他区域上覆盖文本或图标，或以其他适当方式，向用户提供消息（如“缓冲中”、“没有视频加载”、“错误”或更详细的信息）。

无法渲染视频的用户代理可以使元素表示一个链接到外部视频播放工具或视频数据本身。

当 video 元素的媒体资源有一个视频通道时，元素提供一个绘制源，其宽度是媒体资源的自然宽度，其高度是媒体资源的自然高度，其外观是与当前播放位置对应的视频帧，如果那是可用的，否则（例如当视频正在查找或缓冲时）其以前的外观，如果有的话，否则（例如因为视频仍在加载第一帧）为黑色。

video.videoWidth HTMLVideoElement/videoWidth 所有当前引擎均支持。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+
video.videoHeight HTMLVideoElement/videoHeight 所有当前引擎均支持。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+: 这些属性返回视频的自然尺寸，如果尺寸未知则返回0。

自然宽度和自然高度是媒体资源在考虑了资源的尺寸、纵横比、净有效区、分辨率等之后的尺寸，如资源使用的格式定义的那样。如果一种非方格式没有定义如何将纵横比应用于视频数据的尺寸以获得“正确”的尺寸，那么用户代理必须通过增加一个尺寸并保持另一个不变来应用比率。

videoWidth IDL 属性必须返回自然宽度的视频以 CSS 像素为单位。videoHeight IDL 属性必须返回视频的自然高度，以 CSS 像素为单位。如果元素的 readyState 属性为 HAVE_NOTHING，则这些属性必须返回 0。

每当自然宽度或自然高度变化时（例如，因为选择了不同的视频轨道），如果元素的 readyState 属性不是 HAVE_NOTHING，用户代理必须排队一个媒体元素任务给媒体元素，以触发一个名为 resize 的事件。

video 元素支持尺寸属性。

在没有相反的样式规则的情况下，视频内容应在元素的播放区域内居中显示，以最大可能的尺寸完全适应播放区域，同时保持视频内容的纵横比。因此，如果播放区域的纵横比与视频的纵横比不匹配，视频将显示为信箱模式或柱箱模式。播放区域中不包含视频的区域不表示任何内容。

在实现 CSS 的用户代理中，上述要求可以通过使用渲染部分建议的样式规则来实现。

自然宽度是 video 元素播放区域的自然宽度，如果有并且元素当前表示其海报帧；否则，它是视频资源的自然宽度，如果可用；否则自然宽度丢失。

自然高度是 video 元素播放区域的自然高度，如果有并且元素当前表示其海报帧；否则它是视频资源的自然高度，如果可用；否则自然高度丢失。

默认对象大小是宽度为 300 CSS 像素和高度为 150 CSS 像素。[CSSIMAGES]

用户代理应提供控件以启用或禁用显示闭合字幕、音频描述轨道和与视频流相关的其他附加数据，但这些功能不应干扰页面的正常渲染。

用户代理可以允许用户以更适合用户的方式查看视频内容，例如全屏或在独立的可调整大小的窗口中。用户代理甚至可以在播放视频时默认触发这种查看模式，尽管它们在指定了 playsinline 属性时不应这样做。与其他用户界面功能一样，启用此功能的控件不应干扰页面的正常渲染，除非用户代理正在向用户展示用户界面。然而，在这种独立的查看模式中，用户代理可以使完整的用户界面可见，即使 controls 属性不存在。

用户代理可以允许视频播放影响可能干扰用户体验的系统功能；例如，用户代理可以在视频播放期间禁用屏幕保护程序。

poster IDL 属性必须反映 poster 内容属性。

playsInline IDL 属性必须反映 playsinline 内容属性。

此示例展示了如何检测视频播放失败的情况：

<script>
 function failed(e) {
   // video playback failed - show a message saying why
   switch (e.target.error.code) {
     case e.target.error.MEDIA_ERR_ABORTED:
       alert('You aborted the video playback.');
       break;
     case e.target.error.MEDIA_ERR_NETWORK:
       alert('A network error caused the video download to fail part-way.');
       break;
     case e.target.error.MEDIA_ERR_DECODE:
       alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
       break;
     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
       alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
       break;
     default:
       alert('An unknown error occurred.');
       break;
   }
 }
</script>
<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>
<p><a href="tgif.vid">Download the video file</a>.</p>

4.8.9 `audio` 元素

Element/audio

支持所有当前引擎。

Firefox3.5+Safari3.1+Chrome3+

Opera10.5+Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS3+Chrome Android?WebView Android3+Samsung Internet?Opera Android11+

HTMLAudioElement

支持所有当前引擎。

Firefox3.5+Safari3.1+Chrome3+

Opera10.5+Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+

类别:

流内容。

短语内容。

嵌入内容。

如果元素有一个controls属性：交互内容。

如果元素有一个controls属性：可感知内容。

使用此元素的上下文:

预期嵌入内容的地方。

内容模型:

如果元素有src属性：零个或多个track元素，然后透明，但没有媒体元素后代。

如果元素没有src属性：零个或多个source元素，然后零个或多个track元素，然后透明，但没有媒体元素后代。

在 text/html 中省略标签:

标签均不可省略。

内容属性:

全局属性

src — 资源地址

crossorigin — 元素如何处理跨域请求

preload — 提示媒体资源可能需要多少缓冲

autoplay — 提示媒体资源可以在页面加载时自动启动

loop — 是否循环媒体资源

muted — 是否默认静音媒体资源

controls — 显示用户代理控件

可访问性考虑:

给作者。

给实现者。

DOM 接口:

[Exposed=Window,
 LegacyFactoryFunction=Audio(optional DOMString src)]
interface HTMLAudioElement : HTMLMediaElement {
  [HTMLConstructor] constructor();
};

audio 元素表示声音或音频流。

内容可以放在audio元素中。用户代理不应向用户显示这些内容；它们是为不支持audio的旧版网页浏览器准备的，以便向这些旧版浏览器的用户显示如何访问音频内容的文本。

特别地，这些内容不是为了解决可访问性问题。为了使音频内容对聋人或有其他身体或认知障碍的人可访问，有多种功能可用。如果有字幕或手语视频，可以使用video元素代替audio元素播放音频，允许用户启用视觉替代。可以使用track元素和WebVTT 文件提供章节标题以帮助导航。自然，也可以通过简单地在audio元素附近的正文中链接到它们来提供转录或其他文本替代。[WEBVTT]

audio元素是一个媒体元素，其媒体数据大体上是音频数据。

src、crossorigin、preload、autoplay、loop、muted 和 controls 属性是所有媒体元素共有的属性。

audio = new Audio([ url ]) HTMLAudioElement/Audio 支持所有当前引擎。 Firefox3.5+Safari3.1+Chrome4+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+: 返回一个新的audio元素，src 属性设置为传递的参数值（如果适用）。

为创建HTMLAudioElement对象提供了一个传统的工厂函数（除了 DOM 的工厂方法如createElement()外）：Audio(src)。调用传统工厂函数时，必须执行以下步骤：

令document为当前全局对象的关联Document。
令audio为创建元素的结果，给定document、audio和HTML 命名空间。
设置一个audio的属性值，使用“preload”和“auto”。
如果src被给定，则设置audio的一个属性值，使用“src”和src。（这将导致用户代理在返回之前调用对象的资源选择算法。）
返回audio。

4.8.10 `track` 元素

Element/track

支持所有当前引擎。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android25+WebView Android?Samsung Internet?Opera Android12.1+

HTMLTrackElement

支持所有当前引擎。

Firefox31+Safari6+Chrome23+

Opera12+Edge79+

Edge（旧版）12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+

类别:

无。

该元素可以使用的上下文:

作为媒体元素的子元素，位于任何流内容之前。

内容模型:

无内容。

在 text/html 中省略标签:

无结束标签。

内容属性:

全局属性

kind — 文本轨道的类型

src — 资源的地址

srclang — 文本轨道的语言

label — 用户可见标签

default — 如果没有其他文本轨道更合适，则启用该轨道

[Exposed=Window]
interface HTMLTrackElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString kind;
  [CEReactions] attribute USVString src;
  [CEReactions] attribute DOMString srclang;
  [CEReactions] attribute DOMString label;
  [CEReactions] attribute boolean default;

  const unsigned short NONE = 0;
  const unsigned short LOADING = 1;
  const unsigned short LOADED = 2;
  const unsigned short ERROR = 3;
  readonly attribute unsigned short readyState;

  readonly attribute TextTrack track;
};

track 元素允许作者为媒体元素指定显式的外部定时文本轨道。它本身不代表任何东西。

kind 属性是一个枚举属性，具有以下关键字和状态：

关键字	状态	简要描述
`subtitles`	字幕	对话的转录或翻译，适用于声音可用但听不懂的情况（例如用户不理解媒体资源音轨的语言）。覆盖在视频上。
`captions`	字幕	对话、音效、相关音乐提示和其他相关音频信息的转录或翻译，适用于声音不可用或不清晰的情况（例如由于静音、被环境噪声淹没或用户是聋人）。覆盖在视频上；标记为适合听力障碍者。
`descriptions`	描述	对媒体资源视频组件的文本描述，旨在视觉组件被遮挡、不可用或无法使用时进行音频合成（例如用户在驾驶时无需屏幕与应用程序互动，或用户是盲人）。合成为音频。
`chapters`	章节元数据	供脚本使用的轨道。用户代理不显示。
`metadata`	元数据	供脚本使用的轨道。用户代理不显示。

属性的缺失值默认值为字幕状态，无效值默认值为元数据状态。

src 属性提供文本轨道数据的 URL。值必须是有效的非空 URL，可能被空格包围。此属性必须存在。

元素有一个相关的轨道 URL（一个字符串），初始为空字符串。

当元素的 src 属性被设置时，执行以下步骤：

令 trackURL 失败。
令 value 为元素的 src 属性值。
如果 value 不是空字符串，则将 trackURL 设置为编码、解析和序列化 URL 的结果，给定 value，相对于元素的节点文档。
如果 trackURL 不是失败，则将元素的轨道 URL 设置为 trackURL；否则设为空字符串。

如果元素的轨道 URL 指定了 WebVTT 资源，并且元素的 kind 属性不在章节元数据或元数据状态中，则 WebVTT 文件必须是使用提示文本的 WebVTT 文件。[WEBVTT]

srclang 属性提供文本轨道数据的语言。值必须是有效的 BCP 47 语言标签。如果元素的 kind 属性处于字幕状态，则必须存在此属性。[BCP47]

如果元素有一个 srclang 属性且其值不是空字符串，则元素的轨道语言为属性的值。否则，元素没有轨道语言。

label 属性提供用户可读的轨道标题。用户代理在列出字幕、字幕和音频描述轨道时使用此标题。

如果存在 label 属性，其值不得为空字符串。此外，不得有两个相同媒体元素的 track 子元素，其 kind 属性处于相同状态，其 srclang 属性都缺失或有相同语言的值，并且其 label 属性都缺失或有相同值。

如果元素有一个 label 属性且其值不是空字符串，则元素的轨道标签为属性的值。否则，元素的轨道标签为空字符串。

default 属性是一个布尔属性，如果指定，表示如果用户的偏好不表明另一个轨道更合适，则启用该轨道。

每个媒体元素不能有超过一个 track 子元素，其 kind 属性处于字幕或字幕状态，且 default 属性已指定。

每个媒体元素不能有超过一个 track 子元素，其 kind 属性处于描述状态，且 default 属性已指定。

每个媒体元素不能有超过一个 track 子元素，其 kind 属性处于章节元数据状态，且 default 属性已指定。

对于 track 元素，其 kind 属性处于元数据状态且 default 属性已指定的数量没有限制。

track.readyState

返回文本轨道就绪状态，用以下列表中的数字表示：

track.NONE (0): 文本轨道未加载状态。
track.LOADING (1): 文本轨道加载中状态。
track.LOADED (2): 文本轨道已加载状态。
track.ERROR (3): 文本轨道加载失败状态。

track.track

返回对应于文本轨道的 TextTrack 对象。

readyState 属性必须返回对应于文本轨道就绪状态的数值，如以下列表所定义：

NONE（数值 0）: 文本轨道未加载状态。
LOADING（数值 1）: 文本轨道加载中状态。
LOADED（数值 2）: 文本轨道已加载状态。
ERROR（数值 3）: 文本轨道加载失败状态。

track IDL 属性必须在获取时返回文本轨道的相应 TextTrack 对象。

HTMLTrackElement/src

支持所有当前引擎。

Firefox31+Safari6+Chrome23+

Opera12+Edge79+

Edge（旧版）12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+

src，srclang，label 和 default IDL 属性必须反映同名的相应内容属性。kind IDL 属性必须反映同名内容属性，仅限于已知值。

此视频包含多种语言的字幕：

<video src="brave.webm">
 <track kind=subtitles src=brave.en.vtt srclang=en label="English">
 <track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the Hard of Hearing">
 <track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">
 <track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">
</video>

（最后两个 lang 属性描述的是 label 属性的语言，而不是字幕本身的语言。字幕的语言由 srclang 属性指定。）

4.8.11 媒体元素

HTMLMediaElement对象（在本规范中audio和video）被简单地称为媒体元素。

HTMLMediaElement

支持所有当前引擎。

Firefox3.5+Safari3.1+Chrome3+

Opera10.5+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+

enum CanPlayTypeResult { "" /* empty string */, "maybe", "probably" };
typedef (MediaStream or MediaSource or Blob) MediaProvider;

[Exposed=Window]
interface HTMLMediaElement : HTMLElement {

  // error state
  readonly attribute MediaError? error;

  // network state
  [CEReactions] attribute USVString src;
  attribute MediaProvider? srcObject;
  readonly attribute USVString currentSrc;
  [CEReactions] attribute DOMString? crossOrigin;
  const unsigned short NETWORK_EMPTY = 0;
  const unsigned short NETWORK_IDLE = 1;
  const unsigned short NETWORK_LOADING = 2;
  const unsigned short NETWORK_NO_SOURCE = 3;
  readonly attribute unsigned short networkState;
  [CEReactions] attribute DOMString preload;
  readonly attribute TimeRanges buffered;
  undefined load();
  CanPlayTypeResult canPlayType(DOMString type);

  // ready state
  const unsigned short HAVE_NOTHING = 0;
  const unsigned short HAVE_METADATA = 1;
  const unsigned short HAVE_CURRENT_DATA = 2;
  const unsigned short HAVE_FUTURE_DATA = 3;
  const unsigned short HAVE_ENOUGH_DATA = 4;
  readonly attribute unsigned short readyState;
  readonly attribute boolean seeking;

  // playback state
  attribute double currentTime;
  undefined fastSeek(double time);
  readonly attribute unrestricted double duration;
  object getStartDate();
  readonly attribute boolean paused;
  attribute double defaultPlaybackRate;
  attribute double playbackRate;
  attribute boolean preservesPitch;
  readonly attribute TimeRanges played;
  readonly attribute TimeRanges seekable;
  readonly attribute boolean ended;
  [CEReactions] attribute boolean autoplay;
  [CEReactions] attribute boolean loop;
  Promise<undefined> play();
  undefined pause();

  // controls
  [CEReactions] attribute boolean controls;
  attribute double volume;
  attribute boolean muted;
  [CEReactions] attribute boolean defaultMuted;

  // tracks
  [SameObject] readonly attribute AudioTrackList audioTracks;
  [SameObject] readonly attribute VideoTrackList videoTracks;
  [SameObject] readonly attribute TextTrackList textTracks;
  TextTrack addTextTrack(TextTrackKind kind, optional DOMString label = "", optional DOMString language = "");
};

媒体元素属性，src，crossorigin，preload，autoplay，loop，muted和controls适用于所有媒体元素。它们在本节中定义。

媒体元素用于向用户展示音频数据，或视频和音频数据。在本节中，这被称为媒体数据，因为本节同样适用于音频或视频的媒体元素。

术语媒体资源用于指代完整的媒体数据集，例如完整的视频文件或完整的音频文件。

媒体资源有一个关联的来源，可以是"none"、"multiple"、"rewritten"或一个来源。最初设定为"none"。

媒体资源可以有多个音频和视频轨道。对于媒体元素，媒体资源的视频数据仅为元素的videoTracks属性中当前选定的轨道（如果有）在事件循环最后一次到达步骤1时的数据，而媒体资源的音频数据则是元素的audioTracks属性中当前启用的所有轨道（如果有）在事件循环最后一次到达步骤1时混合后的结果。

audio 和 video 元素都可以用于音频和视频。两者之间的主要区别是audio元素没有用于显示视觉内容（如视频或字幕）的播放区域，而video元素有。

每个媒体元素都有一个唯一的媒体元素事件任务源。

要排队媒体元素任务与一个媒体元素element和一系列步骤steps，请根据element和steps在媒体元素的媒体元素事件任务源上排队一个元素任务。

4.8.11.1 错误代码

MediaError

支持所有当前的引擎。

Firefox4+Safari3.1+Chrome3+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

media.error HTMLMediaElement/error 支持所有当前的引擎。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

返回一个MediaError对象，表示元素当前的错误状态。

如果没有错误，则返回 null。

所有媒体元素都有一个关联的错误状态，它记录了自资源选择算法最后一次调用以来元素遇到的最后一个错误。error属性，在获取时，必须返回为此最后一个错误创建的MediaError对象，如果没有错误，则返回 null。

[Exposed=Window]
interface MediaError {
  const unsigned short MEDIA_ERR_ABORTED = 1;
  const unsigned short MEDIA_ERR_NETWORK = 2;
  const unsigned short MEDIA_ERR_DECODE = 3;
  const unsigned short MEDIA_ERR_SRC_NOT_SUPPORTED = 4;

  readonly attribute unsigned short code;
  readonly attribute DOMString message;
};

media.error.code MediaError/code 支持所有当前的引擎。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+: 返回当前错误的错误代码，见下表。
media.error.message MediaError/message 支持所有当前的引擎。 Firefox52+Safari15+Chrome59+ Opera?Edge79+ Edge (旧版)?Internet Explorer不支持 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?: 返回有关遇到的错误情况的具体诊断信息。消息和消息格式在不同的用户代理之间通常并不统一。如果没有这样的消息可用，则返回空字符串。

每个MediaError对象都有一个消息，它是一个字符串，还有一个代码，它是以下之一：

MEDIA_ERR_ABORTED (数值1): 用户代理应用户请求中止了媒体资源的获取过程。
MEDIA_ERR_NETWORK (数值2): 某种类型的网络错误导致用户代理在资源已被确认为可用后停止获取媒体资源。
MEDIA_ERR_DECODE (数值3): 在资源已被确认为可用后，解码媒体资源时发生了某种错误。
MEDIA_ERR_SRC_NOT_SUPPORTED (数值4): src属性指示的媒体资源或分配的媒体提供对象不适用。

要创建一个MediaError，给定一个错误代码，它是上述值之一，返回一个新的MediaError对象，其代码是给定的错误代码，其消息是包含用户代理能够提供的关于错误情况原因的任何详细信息的字符串，如果用户代理无法提供这些详细信息，则为空字符串。此消息字符串不得仅包含通过提供的错误代码已经可用的信息；例如，它不得只是将代码翻译为字符串格式。如果没有比错误代码提供的更多的附加信息，则消息必须设置为空字符串。

code的获取步骤是返回this的代码。

message的获取步骤是返回this的消息。

4.8.11.2 媒体资源的位置

src内容属性在媒体元素上给出了要显示的媒体资源（视频、音频）的URL。如果存在，该属性必须包含一个有效的非空URL，可能被空格包围。

如果在媒体元素上指定了itemprop属性，则必须同时指定src属性。

crossorigin内容属性在媒体元素上是一个CORS设置属性。

如果创建一个带有src属性的媒体元素，用户代理必须立即调用媒体元素的资源选择算法。

如果设置或更改媒体元素的src属性，用户代理必须调用媒体元素的媒体元素加载算法。（移除src属性不会这样做，即使存在source元素。）

HTMLMediaElement/src

支持所有当前的引擎。

Firefox3.5+Safari3.1+Chrome3+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

src IDL 属性在媒体元素上必须反映同名的内容属性。

HTMLMediaElement/crossOrigin

支持所有当前的引擎。

Firefox22+Safari10+Chrome33+

Opera?Edge79+

Edge (旧版)13+Internet Explorer不支持

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

crossOrigin IDL 属性必须反映crossorigin内容属性，仅限于已知值。

媒体提供对象是一个可以表示媒体资源的对象，与URL分开。MediaStream对象，MediaSource对象和Blob对象都是媒体提供对象。

每个媒体元素都可以有一个分配的媒体提供对象，它是一个媒体提供对象。当创建媒体元素时，它没有分配的媒体提供对象。

media.srcObject [ = source ] HTMLMediaElement/srcObject 仅在一个引擎中支持。 Firefox🔰 42+Safari11+🔰 108+ Opera?🔰 108+ Edge (旧版)?Internet Explorer不支持 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

允许媒体元素被分配一个媒体提供对象。

media.currentSrc HTMLMediaElement/currentSrc 支持所有当前的引擎。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

返回当前URL的媒体资源，如果有的话。

当没有媒体资源或没有URL时，返回空字符串。

currentSrc IDL 属性必须最初设置为空字符串。其值由下面定义的资源选择算法更改。

srcObject IDL 属性，在获取时，必须返回元素的分配的媒体提供对象，如果有的话，否则返回null。在设置时，它必须将元素的分配的媒体提供对象设置为新值，然后调用元素的媒体元素加载算法。

有三种方法可以指定媒体资源：srcObject IDL 属性、src内容属性和source元素。IDL 属性优先，其次是内容属性，最后是元素。

4.8.11.3 MIME 类型

媒体资源可以通过其类型来描述，特别是 MIME 类型，在某些情况下还可以带有codecs参数。（是否允许codecs参数取决于 MIME 类型。）[RFC6381]

类型通常是有些不完整的描述；例如 "video/mpeg" 除了说明容器类型外什么也没说，即使像 "video/mp4; codecs="avc1.42E01E, mp4a.40.2"" 这样的类型也不包括实际比特率的信息（只包括最大比特率）。因此，给定一种类型，用户代理通常只能知道它可能能够播放该类型的媒体（置信度不同），或它绝对不能播放该类型的媒体。

用户代理知道无法渲染的类型是描述用户代理绝对不支持的资源的类型，例如因为它不识别容器类型，或者它不支持列出的编解码器。

MIME 类型"application/octet-stream"没有参数时，永远不会是用户代理知道无法渲染的类型。用户代理在用来标记潜在的媒体资源时，必须将该类型视为等同于缺少任何显式的Content-Type 元数据。

只有MIME 类型"application/octet-stream"没有参数在这里是特例；如果有任何参数出现，它将被视为与任何其他MIME 类型相同。这偏离了应该忽略未知MIME 类型参数的规则。

media.canPlayType(type) HTMLMediaElement/canPlayType 支持所有当前引擎。 Firefox3.5+Safari4+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+: 根据用户代理是否有信心播放给定类型的媒体资源，返回空字符串（否定回应）、"maybe"或"probably"。

canPlayType(type) 方法必须在type为用户代理知道无法渲染的类型或类型为"application/octet-stream"时返回空字符串；如果用户代理有信心该类型表示的媒体资源可以在此音频或视频元素中渲染，则必须返回"probably"；否则，必须返回"maybe"。建议实现者除非能确定该类型是否支持，否则返回"maybe"。一般来说，如果允许codecs参数且该参数不存在，用户代理不应为该类型返回"probably"。

此脚本测试用户代理是否支持（虚构的）新格式，以动态决定是否使用视频元素：

<section id="video">
 <p><a href="playing-cats.nfv">Download video</a></p>
</section>
<script>
 const videoSection = document.getElementById('video');
 const videoElement = document.createElement('video');
 const support = videoElement.canPlayType('video/x-new-fictional-format;codecs="kittens,bunnies"');
 if (support === "probably") {
   videoElement.setAttribute("src", "playing-cats.nfv");
   videoSection.replaceChildren(videoElement);
 }
</script>

type 属性允许用户代理避免下载无法渲染格式的资源。 source 元素的

4.8.11.4 网络状态

media.networkState HTMLMediaElement/networkState 支持所有当前引擎。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android4+Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+: 返回元素的当前网络活动状态，以下列表中的代码之一。

当媒体元素与网络交互时，它们的当前网络活动由networkState属性表示。获取时，它必须返回元素的当前网络状态，该状态必须是以下值之一：

NETWORK_EMPTY（数值 0）: 元素尚未初始化。所有属性都处于初始状态。
NETWORK_IDLE（数值 1）: 元素的资源选择算法处于活动状态并已选择资源，但此时并未实际使用网络。
NETWORK_LOADING（数值 2）: 用户代理正在积极尝试下载数据。
NETWORK_NO_SOURCE（数值 3）: 元素的资源选择算法处于活动状态，但尚未找到可用的资源。

资源选择算法在下文定义，描述了networkState属性何时更改值以及触发哪些事件以指示此状态的变化。

4.8.11.5 加载媒体资源

media.load() HTMLMediaElement/load 在所有当前引擎中都支持。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+: 导致元素重置并开始从头选择和加载新的媒体资源。

所有媒体元素都具有一个可以自动播放标志，其初始状态必须为 true，以及一个延迟加载事件标志，其初始状态必须为 false。当延迟加载事件标志为 true 时，该元素必须延迟其文档的加载事件。

当在媒体元素上调用 load() 方法时，用户代理必须执行媒体元素加载算法。

媒体元素具有一个关联的布尔值当前是否暂停，初始值为 false。

媒体元素加载算法包含以下步骤：

将此元素的当前是否暂停设置为 false。
中止此元素的任何已经运行的资源选择算法实例。
将 pending tasks 设为来自媒体元素的媒体元素事件任务源的所有任务的列表，存在于其中一个任务队列中。
对于 pending tasks 中的每个任务，若其会解决待处理的播放承诺或拒绝待处理的播放承诺，立即按任务排队的顺序解决或拒绝这些承诺。
将 pending tasks 中的每个任务从其任务队列中移除。

基本上，当媒体元素开始加载新资源时，待处理的事件和回调会被丢弃，正在处理的承诺会被立即解决或拒绝。
如果media element的networkState被设置为NETWORK_LOADING或NETWORK_IDLE，queue a media element task给定media element去fire an event命名为abort在media element上。
如果媒体元素的 networkState 没有设置为 NETWORK_EMPTY，则：
1. 排队一个媒体元素任务，给定媒体元素去触发一个事件，名为emptied在媒体元素上。
2. 如果媒体元素的获取过程正在进行，用户代理应停止该过程。
3. 如果媒体元素的指定的媒体提供者对象是一个 MediaSource 对象，则将其分离。
4. 忘记媒体元素的媒体资源特定轨道。
5. 如果 readyState 没有设置为 HAVE_NOTHING，则将其设置为该状态。
6. 如果 paused 属性为 false，则：
  1. 将 paused 属性设置为 true。
  2. 处理待处理的播放承诺和拒绝待处理的播放承诺，并以结果和一个 “AbortError” DOMException。
7. 如果 seeking 为 true，则将其设置为 false。
8. 将当前播放位置设置为0。
  
  将官方播放位置设置为0。
  
  如果这改变了官方播放位置，那么排队一个媒体元素任务，给定媒体元素去触发一个事件，名为timeupdate在媒体元素上。
9. 将时间轴偏移设置为 Not-a-Number (NaN)。
10. 更新 duration 属性为 Not-a-Number (NaN)。
  
  用户代理不会为此特定的持续时间变化触发 durationchange 事件。
将 playbackRate 属性设置为 defaultPlaybackRate 属性的值。
将 error 属性设置为 null，并将可以自动播放标志设置为 true。
调用媒体元素的资源选择算法。
任何之前正在播放的媒体资源播放停止。

资源选择算法对于一个媒体元素如下所述。该算法始终作为任务的一部分调用，但算法的第一步之一是返回并继续运行剩余步骤并行。此外，该算法与事件循环机制紧密交互；特别是，它有同步部分（作为事件循环算法的一部分触发）。这些部分中的步骤标有 ⌛。

将元素的 networkState 属性设置为 NETWORK_NO_SOURCE 值。
将元素的显示海报标志设置为 true。
将媒体元素的延迟加载事件标志设置为 true（这会延迟加载事件）。
等待稳定状态，允许调用此算法的任务继续。同步部分包含此算法的所有剩余步骤，直到算法指示同步部分已结束。（同步部分中的步骤标有 ⌛。）
⌛ 如果媒体元素的阻塞解析器标志为 false，则填充待处理文本轨道列表。
⌛ 如果媒体元素有一个指定的媒体提供者对象，则将 mode 设为 object。

⌛ 否则，如果媒体元素没有指定的媒体提供者对象，但有 src 属性，则将 mode 设为 attribute。

⌛ 否则，如果媒体元素没有指定的媒体提供者对象且没有 src 属性，但有一个 source 元素子节点，则将 mode 设为 children，并将 candidate 设为第一个这样的 source 元素子节点，按树顺序。

⌛ 否则，媒体元素没有指定的媒体提供者对象，也没有 src 属性，也没有 source 元素子节点：
1. ⌛ 将 networkState 设置为 NETWORK_EMPTY。
2. ⌛ 将元素的延迟加载事件标志设置为 false。这会停止延迟加载事件。
3. 结束同步部分并返回。
⌛ 将媒体元素的 networkState 设置为 NETWORK_LOADING。
⌛ 排队一个媒体元素任务，给定媒体元素去触发一个事件，名为loadstart在媒体元素上。
运行以下列表中的适当步骤：
如果 mode 是 object
1. ⌛ 将 currentSrc 属性设置为空字符串。
2. 结束同步部分，剩余步骤继续并行。
3. 运行资源获取算法，使用指定的媒体提供者对象。如果该算法在不中止此算法的情况下返回，则加载失败。
4. 媒体提供者加载失败：到达此步骤表示媒体资源加载失败。处理待处理的播放承诺并排队一个媒体元素任务，让媒体元素使用结果运行专用媒体源失败步骤。
5. 等待前一步排队的任务执行完毕。
6. 返回。在此算法再次触发之前，元素不会尝试加载另一个资源。
如果 mode 是 attribute
1. ⌛ 如果 src 属性的值为空字符串，则结束同步部分，并跳到下面的 属性加载失败 步骤。
2. ⌛ 将 urlRecord 设为编码解析 URL 的结果，给定 src 属性的值，相对于媒体元素的节点文档，当 src 属性最后一次更改时。
3. ⌛ 如果 urlRecord 不是失败，则将 currentSrc 属性设置为应用 URL 序列化器到 urlRecord 的结果。
4. 结束同步部分，剩余步骤继续并行。
5. 如果 urlRecord 不是失败，则运行资源获取算法，使用 urlRecord。如果该算法在不中止此算法的情况下返回，则加载失败。
6. 属性加载失败：到达此步骤表示媒体资源加载失败或 urlRecord 失败。处理待处理的播放承诺并排队一个媒体元素任务，让媒体元素使用结果运行专用媒体源失败步骤。
7. 等待前一步排队的任务执行完毕。
8. 返回。在此算法再次触发之前，元素不会尝试加载另一个资源。
否则（mode 是 children）
1. ⌛ 将 pointer 设为由媒体元素的子节点列表中的两个相邻节点定义的位置，视列表的开始（列表中第一个子节点之前，如果有的话）和列表的结束（列表中最后一个子节点之后，如果有的话）为节点本身。一个节点是 pointer 之前的节点，另一个节点是 pointer 之后的节点。初始情况下，将 pointer 设为 candidate 节点和下一个节点之间的位置，如果有的话，或列表的末尾，如果它是最后一个节点。
  
  当节点被插入和移除到媒体元素中时，必须按以下方式更新 pointer：
  
  如果一个新节点被插入到定义 pointer 的两个节点之间
  
  将 pointer 设为 pointer 之前的节点和新节点之间的位置。换句话说，在 pointer 插入发生在 pointer 之后。
  
  如果 pointer 之前的节点被移除
  
  将 pointer 设为 pointer 之后的节点和 pointer 之前的节点之间的位置。换句话说，pointer 相对于剩余节点不会移动。
  
  如果 pointer 之后的节点被移除
  
  将 pointer 设为 pointer 之前的节点和 pointer 之前的节点之后的节点之间的位置。同前一种情况一样，pointer 相对于剩余节点不会移动。
  
  其他变化不会影响 pointer。
2. ⌛ 处理候选：如果 candidate 没有 src 属性，或其 src 属性的值为空字符串，则结束同步部分，并跳到下面的 元素加载失败 步骤。
3. ⌛ 如果 candidate 有 media 属性，其值不匹配环境，则结束同步部分，并跳到下面的 元素加载失败 步骤。
4. ⌛ 将 urlRecord 设为编码解析 URL 的结果，给定 candidate 的 src 属性的值，相对于 candidate 的节点文档，当 src 属性最后一次更改时。
5. ⌛ 如果 urlRecord 失败，则结束同步部分，并跳到下面的 元素加载失败 步骤。
6. ⌛ 如果 candidate 有 type 属性，当解析为 MIME 类型（包括任何由 codecs 参数描述的编解码器，对于定义该参数的类型），表示用户代理知道它不能渲染的类型，则结束同步部分，并跳到下面的 元素加载失败 步骤。
7. ⌛ 将 currentSrc 属性设置为应用 URL 序列化器到 urlRecord 的结果。
8. 结束同步部分，剩余步骤继续并行。
9. 运行资源获取算法，使用 urlRecord。如果该算法在不中止此算法的情况下返回，则加载失败。
10. 元素失败：排队一个媒体元素任务，给定媒体元素去触发一个事件，名为error在candidate上。
11. 等待稳定状态。同步部分包含此算法的所有剩余步骤，直到算法指示同步部分已结束。（同步部分中的步骤标有 ⌛。）
12. ⌛ 忘记媒体元素的媒体资源特定轨道。
13. ⌛ 找到下一个候选：将 candidate 设为 null。
14. ⌛ 搜索循环：如果 pointer 之后的节点是列表的末尾，则跳到下面的等待步骤。
15. ⌛ 如果 pointer 之后的节点是一个 source 元素，将 candidate 设为该元素。
16. ⌛ 前移 pointer，使 pointer 之前的节点现在成为 pointer 之后的节点，并且 pointer 之后的节点成为 pointer 之后节点之后的节点（如果有）。
17. ⌛ 如果 candidate 为 null，跳回 搜索循环 步骤。否则，跳回 处理候选 步骤。
18. ⌛ 等待：将元素的 networkState 属性设置为 NETWORK_NO_SOURCE 值。
19. ⌛ 将元素的显示海报标志设置为 true。
20. ⌛ 排队一个媒体元素任务，让媒体元素设置元素的延迟加载事件标志为 false。这会停止延迟加载事件。
21. 结束同步部分，剩余步骤继续并行。
22. 等待直到 pointer 之后的节点是一个非列表末尾的节点。（此步骤可能永远等待。）
23. 等待稳定状态。同步部分包含此算法的所有剩余步骤，直到算法指示同步部分已结束。（同步部分中的步骤标有 ⌛。）
24. ⌛ 将元素的延迟加载事件标志设置回 true（这会再次延迟加载事件，以防它尚未触发）。
25. ⌛ 将 networkState 设置回 NETWORK_LOADING。
26. ⌛ 跳回上面的 找到下一个候选 步骤。
专用媒体源失败步骤，带有一个承诺列表 promises 如下：
1. 将 error 属性设置为创建一个 MediaError 的结果，使用 MEDIA_ERR_SRC_NOT_SUPPORTED。
2. 忘记媒体元素的媒体资源特定轨道。
3. 将元素的 networkState 属性设置为 NETWORK_NO_SOURCE 值。
4. 将元素的 show poster 标志设置为 true。
5. 触发一个事件，名为error在媒体元素上。
6. 拒绝待处理的播放承诺，使用 promises 和一个 “NotSupportedError” DOMException。
7. 将元素的延迟加载事件标志设置为 false。这会停止延迟加载事件。

要验证媒体响应，给定一个响应 response、一个媒体资源 resource，以及 "entire resource" 或一个 (number, number 或 "until end") 元组 byteRange：

如果 response 是一个网络错误，则返回 false。
如果 byteRange 是 "entire resource"，则返回 true。
让 internalResponse 为 response 的不安全响应。
如果 internalResponse 的状态为 200，则返回 true。
如果 internalResponse 的状态不是 206，则返回 false。
如果从 internalResponse 中提取内容范围值的结果失败，则返回 false。

注意，提取的值不会被使用，特别是不会与 byteRange 进行比较。因此，这一步作为 `Content-Range` 头部的语法验证，但如果响应中的 `Content-Range` 值与请求中的 `Range` 值不匹配，这不被视为失败。
让 origin 为 "rewritten" 如果 internalResponse 的 URL 为 null；否则 internalResponse 的 URL 的 origin。
让 previousOrigin 为 resource 的 origin。
如果以下任何条件为真：
- previousOrigin 是 "none"；
- origin 和 previousOrigin 是 "rewritten"；或
- origin 和 previousOrigin 是 origin，并且 origin 与 previousOrigin 是相同来源，
则将 resource 的 origin 设置为 origin。

否则，如果 response 是 CORS 跨源，则返回 false。

否则，将 resource 的 origin 设置为 "multiple"。

这确保了带有范围头的透明响应不会通过与来自不同来源的其他响应拼接在一起而泄露信息。
返回 true。

用于媒体元素和给定的 URL 记录或媒体提供者对象的资源获取算法如下：

如果算法是通过媒体提供者对象或 URL 记录被调用的，而该 blob URL 条目是一个 blob URL 条目，其对象是一个媒体提供者对象，则让 mode 为 local。否则，让 mode 为 remote。
如果 mode 为 remote，则让 current media resource 为传递给该算法的 URL 记录所给出的资源；否则，让 current media resource 为媒体提供者对象所给出的资源。无论如何，current media resource 现在是元素的媒体资源。
如果有的话，从媒体元素的待处理文本轨道列表中移除所有媒体资源特定文本轨道。
执行以下步骤列表中的适当步骤：
如果 mode 是 remote
1. 可以选择执行以下子步骤。如果用户代理打算不尝试获取资源，直到用户明确请求它（例如，作为实现 preload 属性的 none 关键字的一种方式），这是预期的行为。
  1. 将 networkState 设置为 NETWORK_IDLE。
  2. 排队一个媒体元素任务，给定媒体元素，以触发一个名为 suspend 的事件。
  3. 排队一个媒体元素任务，给定媒体元素，以将元素的 delaying-the-load-event flag 设置为 false。这将停止延迟加载事件。
  4. 等待任务执行。
  5. 等待一个实现定义的事件（例如，用户请求媒体元素开始播放）。
  6. 将元素的 delaying-the-load-event flag 重新设置为 true（这再次延迟加载事件，以防它尚未触发）。
  7. 将 networkState 设置为 NETWORK_LOADING。
2. 如果媒体元素是 audio 元素，则将 destination 设为 "audio"，否则设为 "video"。
3. 让 request 成为创建一个潜在的 CORS 请求的结果，给定 current media resource 的 URL 记录、destination 和媒体元素的当前状态的 crossorigin 内容属性。
4. 将 request 的 client 设置为媒体元素的节点文档的相关设置对象。
5. 将 request 的发起者类型设置为 destination。
6. 让 byteRange 为 "entire resource" 或一个（number，number 或 "until end"）元组，表示满足媒体数据中缺失数据所需的字节范围。该值是实现定义的，并可能依赖于编解码器、网络状况或其他启发式方法。用户代理可能决定完全获取资源，在这种情况下 byteRange 将为 "entire resource"，从字节偏移量到结束获取资源，在这种情况下 byteRange 将为（number，"until end"），或在两个字节偏移量之间获取资源，在这种情况下 byteRange 将为表示两个偏移量的（number，number）元组。
7. 如果 byteRange 不是 "entire resource"，则：
  1. 如果 byteRange[1] 是 "until end"，则向 request 添加一个范围头，给定 byteRange[0]。
  2. 否则，向 request 添加一个范围头，给定 byteRange[0] 和 byteRange[1]。
8. 获取 request，并设置 processResponse 为以下步骤，给定 response response：
  1. 让 global 为媒体元素的节点文档的相关全局对象。
  2. 让 updateMedia 是排队一个媒体元素任务，给定媒体元素以运行以下媒体数据处理步骤列表中的第一个适当步骤。（为此使用一个新任务，使以下描述的工作相对于适当的媒体元素事件任务源发生，而不是使用网络任务源。）
  3. 让 processEndOfMedia 是以下步骤：如果获取过程在没有错误的情况下完成，包括解码媒体数据，并且所有数据都可供用户代理在不进行网络访问的情况下使用，那么，用户代理必须继续执行以下最后一步。这可能永远不会发生，例如在流式传输无限资源（如网络广播）时，或者资源长度超过用户代理的缓存数据能力。
  4. 如果给定 current media resource 和 byteRange 验证 response 的结果为 false，则中止这些步骤。
  5. 否则，增量读取 response 的主体，给定 updateMedia、processEndOfMedia、一个空算法和 global。
  6. 使用以这种方式获取的 response 的不安全响应内容更新媒体数据。response 可以是 CORS-same-origin 或 CORS-cross-origin；这会影响通过 API 公开的字幕，并且，对于 video 元素，当视频被绘制到画布上时，画布是否会被污染。
  媒体元素停止超时是一个实现定义的时间长度，应该约为三秒。当一个正在积极尝试获取媒体数据的媒体元素在等于媒体元素停止超时的时间内未能接收到任何数据时，用户代理必须排队一个媒体元素任务，给定媒体元素来：
  1. 触发一个名为 stalled 的事件。
  2. 将元素的 is currently stalled 设置为 true。
  用户代理可能允许用户选择性地阻止或减慢媒体数据下载。当媒体元素的下载被完全阻止时，用户代理必须像处理它停止了一样（而不是像连接关闭了一样）。下载速度也可能会被用户代理自动限制，例如平衡与共享同一带宽的其他连接的下载。
  
  用户代理可以随时决定不下载更多内容，例如在缓冲一个小时媒体资源的五分钟后，等待用户决定是否播放资源，在交互式资源中等待用户输入，或者当用户导航离开页面时。当媒体元素的下载被暂停时，用户代理必须排队一个媒体元素任务，给定媒体元素，将 networkState 设置为 NETWORK_IDLE 并触发一个名为 suspend 的事件。如果且当资源的下载恢复时，用户代理必须排队一个媒体元素任务，给定媒体元素，将 networkState 设置为 NETWORK_LOADING。在这些任务排队之间，加载被暂停（因此如上所述，不会触发 progress 事件）。
  
  preload 属性提供了一个提示，即使在没有 autoplay 属性的情况下，作者认为建议缓冲多少。
  
  当用户代理决定完全暂停下载时，例如，如果它正在等待用户开始播放然后再下载任何进一步的内容，用户代理必须排队一个媒体元素任务，给定媒体元素，将元素的 delaying-the-load-event flag 设置为 false。这将停止延迟加载事件。
  
  尽管上述步骤给出了发出请求的算法，用户代理可能会使用其他方法，特别是在面对错误条件时。例如，用户代理可能会重新连接到服务器或切换到流协议。用户代理必须只在放弃尝试获取资源时才认为资源出错，并继续上述步骤的错误分支。
  
  为了确定媒体资源的格式，用户代理必须使用专门嗅探音频和视频的规则。
  
  在加载未暂停的情况下（见下文），每 350 毫秒（±200 毫秒）或每接收一个字节，以频率更低者为准，排队一个媒体元素任务，给定媒体元素以：
  1. 触发一个名为 progress 的事件。
  2. 将元素的 is currently stalled 设置为 false。
  虽然用户代理可能仍然需要网络访问才能获取媒体资源的部分内容，用户代理必须停留在此步骤。
  
  例如，如果用户代理已丢弃视频的前半部分，即使播放已结束，用户代理仍将停留在此步骤，因为用户随时可能会回放到开始处。事实上，在这种情况下，一旦播放已结束，用户代理最终将触发一个 suspend 事件，如前所述。
否则（mode 是 local）

由 current media resource 描述的资源（如果有）包含媒体数据。它是 CORS-same-origin。

如果 current media resource 是原始数据流（例如来自 File 对象），则为了确定媒体资源的格式，用户代理必须使用专门嗅探音频和视频的规则。否则，如果数据流是预解码的，则格式是相关规范给出的格式。

每当新的 current media resource 数据可用时，排队一个媒体元素任务，给定媒体元素以运行以下媒体数据处理步骤列表中的第一个适当步骤。

当 current media resource 永久耗尽时（例如，Blob 的所有字节已处理完），如果没有解码错误，则用户代理必须继续执行以下 最后一步。这可能永远不会发生，例如，如果 current media resource 是 MediaStream。
媒体数据处理步骤列表如下：
如果由于网络错误导致媒体数据无法获取，用户代理放弃尝试获取资源

如果可以获取媒体数据，但通过检查发现其格式不受支持，或者无法渲染
在用户代理确定 current media resource 是否可用之前发生的 DNS 错误、HTTP 4xx 和 5xx 错误（以及其他协议的等效错误）以及其他致命网络错误，以及文件使用不受支持的容器格式或所有数据使用不受支持的编解码器，必须导致用户代理执行以下步骤：
1. 用户代理应取消获取过程。
2. 中止此子算法，返回到资源选择算法。
如果发现媒体资源有音轨
1. 创建一个 AudioTrack 对象以表示音轨。
2. 使用新的 AudioTrack 对象更新媒体元素的 audioTracks 属性的 AudioTrackList 对象。
3. 让 enable 为 unknown。
4. 如果媒体资源或 current media resource 的 URL 表示启用特定的音轨集，或者如果用户代理有信息可以选择特定音轨以改善用户体验，那么：如果此音轨是要启用的音轨之一，则将 enable 设置为 true，否则将 enable 设置为 false。
  
  这可能由媒体片段语法触发，但也可能由例如用户代理选择 5.1 环绕声音轨而不是立体声音轨触发。
5. 如果 enable 仍为 unknown，则如果媒体元素还没有启用音轨，则将 enable 设置为 true，否则将 enable 设置为 false。
6. 如果 enable 是 true，则启用此音轨，否则，不启用此音轨。
7. 触发一个名为 addtrack 的事件，使用 TrackEvent，其 track 属性初始化为新的 AudioTrack 对象。
如果发现媒体资源有视频轨道
1. 创建一个 VideoTrack 对象以表示视频轨道。
2. 使用新的 VideoTrack 对象更新媒体元素的 videoTracks 属性的 VideoTrackList 对象。
3. 让 enable 为 unknown。
4. 如果媒体资源或 current media resource 的 URL 表示启用特定的视频轨道集，或者如果用户代理有信息可以选择特定视频轨道以改善用户体验，那么：如果这是第一个这样的视频轨道，则将 enable 设置为 true，否则将 enable 设置为 false。
  
  这可能再次由媒体片段语法触发。
5. 如果 enable 仍为 unknown，则如果媒体元素还没有选中的视频轨道，则将 enable 设置为 true，否则将 enable 设置为 false。
6. 如果 enable 是 true，则选择此轨道并取消选择任何先前选中的视频轨道，否则，不选择此视频轨道。如果其他轨道被取消选择，则将触发 change 事件。
7. 触发一个名为 addtrack 的事件，使用 TrackEvent，其 track 属性初始化为新的 VideoTrack 对象。
一旦获取到足够的媒体数据以确定媒体资源的持续时间、尺寸和其他元数据
这表明资源可用。用户代理必须遵循这些子步骤：
1. 建立媒体时间轴以用于当前播放位置和最早可能的位置，基于媒体数据。
2. 根据上一步建立的媒体时间轴，将时间轴偏移更新为与零时间相对应的日期和时间。如果媒体资源没有明确给出时间和日期，则时间轴偏移必须设置为非数字（NaN）。
3. 将当前播放位置和官方播放位置设置为最早可能的位置。
4. 使用上面建立的媒体时间轴的最后一帧的时间（如果已知）更新 duration 属性。如果未知（例如，一个原则上无限的流），则将 duration 属性更新为正无穷大。
  
  用户代理将排队一个媒体元素任务，给定媒体元素以触发一个名为 durationchange 的事件。
5. 对于 video 元素，设置 videoWidth 和 videoHeight 属性，并排队一个媒体元素任务，给定媒体元素以触发一个名为 resize 的事件。
  
  如果尺寸随后发生变化，将触发进一步的 resize 事件。
6. 将 readyState 属性设置为 HAVE_METADATA。
  
  作为将 readyState 属性设置为新值的一部分，将触发 loadedmetadata DOM 事件。
7. 让 jumped 为 false。
8. 如果媒体元素的默认播放起始位置大于零，则 seek 到该时间，并让 jumped 为 true。
9. 将媒体元素的默认播放起始位置设置为零。
10. 让 initial playback position 为零。
11. 如果媒体资源或 current media resource 的 URL 表示特定的开始时间，则将 initial playback position 设置为该时间，并且如果 jumped 仍为 false，则 seek 到该时间。
  
  例如，对于支持媒体片段语法的媒体格式，片段可用于指示起始位置。
12. 如果没有启用的音轨，则启用一个音轨。这将触发 change 事件。
13. 如果没有选中的视频轨道，则选择一个视频轨道。这将触发 change 事件。
一旦 readyState 属性达到 HAVE_CURRENT_DATA，在触发 loadeddata 事件后，将元素的 delaying-the-load-event flag 设置为 false。这将停止延迟加载事件。

一个尝试减少网络使用的用户代理，同时仍然获取每个媒体资源的元数据，也将在此时停止缓冲，按照前面描述的规则，这包括 networkState 属性切换到 NETWORK_IDLE 值并触发 suspend 事件。

用户代理在播放之前必须确定媒体资源的持续时间并执行此步骤。
一旦整个媒体资源已被获取（但可能在其被解码之前）

触发一个名为 progress 的事件，给定媒体元素。

将 networkState 设置为 NETWORK_IDLE 并触发一个名为 suspend 的事件，给定媒体元素。

如果用户代理丢弃了任何媒体数据，然后需要恢复网络活动以再次获取它，则用户代理必须排队一个媒体元素任务，给定媒体元素，将 networkState 设置为 NETWORK_LOADING。

如果用户代理可以保持媒体资源已加载，则算法将继续执行其 最后一步，该步骤将中止算法。

如果连接在接收到一些媒体数据后中断，导致用户代理放弃尝试获取资源
在用户代理确定 current media resource 是否可用之后发生的致命网络错误（即一旦媒体元素的 readyState 属性不再是 HAVE_NOTHING）必须导致用户代理执行以下步骤：
1. 用户代理应取消获取过程。
2. 将 error 属性设置为创建一个 MediaError 的结果，并设置为 MEDIA_ERR_NETWORK。
3. 将元素的 networkState 属性设置为 NETWORK_IDLE 值。
4. 将元素的 delaying-the-load-event flag 设置为 false。这将停止延迟加载事件。
5. 触发一个名为 error 的事件，给定媒体元素。
6. 中止整体资源选择算法。
如果媒体数据已损坏
在用户代理确定 current media resource 是否可用之后发生的致命解码错误（即一旦媒体元素的 readyState 属性不再是 HAVE_NOTHING）必须导致用户代理执行以下步骤：
1. 用户代理应取消获取过程。
2. 将 error 属性设置为创建一个 MediaError 的结果，并设置为 MEDIA_ERR_DECODE。
3. 将元素的 networkState 属性设置为 NETWORK_IDLE 值。
4. 将元素的 delaying-the-load-event flag 设置为 false。这将停止延迟加载事件。
5. 触发一个事件，名为error在媒体元素上。
6. 中止整体资源选择算法。
如果媒体数据获取过程被用户中止
用户中止了获取过程，例如因为用户按下了“停止”按钮，则用户代理必须执行以下步骤。如果在执行这些步骤时调用了 load() 方法，则不执行这些步骤，因为上述步骤处理了那种特定类型的中止。
1. 用户代理应取消获取过程。
2. 将 error 属性设置为创建一个 MediaError 的结果，并设置为 MEDIA_ERR_ABORTED。
3. 触发一个名为 abort 的事件，给定媒体元素。
4. 如果媒体元素的 readyState 属性值等于 HAVE_NOTHING，则将元素的 networkState 属性设置为 NETWORK_EMPTY 值，将元素的 show poster flag 设置为 true，并触发一个名为 emptied 的事件。
  
  否则，将元素的 networkState 属性设置为 NETWORK_IDLE 值。
5. 将元素的 delaying-the-load-event flag 设置为 false。这将停止延迟加载事件。
6. 中止整体资源选择算法。
如果可以获取媒体数据，但有非致命错误或部分使用不受支持的编解码器，导致用户代理无法完全正确地渲染内容但不妨碍播放

服务器返回的数据部分可用但无法最佳渲染，必须导致用户代理仅渲染它能处理的部分，忽略其余部分。

如果发现媒体资源声明了用户代理支持的媒体资源特定文本轨道

如果媒体数据是 CORS-same-origin，则使用相关数据运行步骤以暴露媒体资源特定文本轨道。

跨源视频不暴露其字幕，因为这将允许攻击，例如恶意网站从用户内联网的机密视频中读取字幕。
最后一步：如果用户代理达到此步骤（这只有在整个资源加载并保持可用的情况下才会发生）：中止整体资源选择算法。

当一个媒体元素需要忘记媒体元素的媒体资源特定轨道时，用户代理必须从媒体元素的文本轨道列表中移除所有媒体资源特定文本轨道，然后清空媒体元素的audioTracks属性的AudioTrackList对象，然后清空媒体元素的videoTracks属性的VideoTrackList对象。作为这一过程的一部分不会触发任何事件（特别是不触发removetrack事件）；可以使用调用此算法的算法触发的error和emptied事件代替。

preload 属性是一个枚举属性，具有以下关键字和状态：

关键字	状态	简要描述
`auto`	自动	向用户代理暗示，用户代理可以优先考虑用户的需求而不会对服务器造成风险，包括乐观地下载整个资源。
(空字符串)	自动	向用户代理暗示，用户代理可以优先考虑用户的需求而不会对服务器造成风险，包括乐观地下载整个资源。
`none`	无	向用户代理暗示，作者不期望用户需要媒体资源，或者服务器希望最小化不必要的流量。此状态不提供有关在缓冲开始后如何积极下载媒体资源的暗示（例如，一旦用户点击“播放”）。
`metadata`	元数据	向用户代理暗示，作者不期望用户需要媒体资源，但获取资源元数据（尺寸、轨道列表、持续时间等）甚至前几帧是合理的。如果用户代理精确地不超过元数据的获取，那么媒体元素最终会将其 `readyState` 属性设置为 `HAVE_METADATA`；但通常会获取一些帧，它可能会是 `HAVE_CURRENT_DATA` 或 `HAVE_FUTURE_DATA`。当媒体资源在播放时，暗示用户代理要考虑带宽稀缺，例如建议节流下载以最慢的速度获取媒体数据，同时保持连续播放。

该属性的 缺失值默认 和 无效值默认 都是实现定义的，尽管建议将元数据状态作为在减少服务器负载和提供最佳用户体验之间的折衷。

即使在媒体资源正在缓冲或播放时也可以更改该属性；上表中的描述应考虑到这一点。

作者可能会在用户开始播放后，将属性从 "none" 或 "metadata" 动态切换为 "auto"。例如，在有许多视频的页面上，这可能用于指示除非请求否则不下载许多视频，但一旦请求其中一个视频，则应积极下载。

preload 属性旨在向用户代理提供一个提示，关于作者认为什么会带来最佳用户体验。该属性可能会被完全忽略，例如基于用户的明确偏好或可用的连接情况。

preload IDL 属性必须反映同名内容属性，仅限于已知值。

autoplay 属性可以覆盖 preload 属性（因为如果媒体播放，它自然首先要缓冲，不论 preload 属性给出的提示如何）。然而，同时包含这两个属性并不是错误。

media.buffered HTMLMediaElement/buffered 所有当前引擎支持。 Firefox4+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+: 返回一个 TimeRanges 对象，该对象表示用户代理已缓冲的媒体资源的范围。

buffered 属性必须返回一个新的静态标准化 TimeRanges 对象，该对象表示用户代理在评估属性时已缓冲的媒体资源的范围（如果有）。用户代理必须准确确定可用的范围，即使对于只能通过繁琐检查确定的媒体流。

通常，这将是锚定在零点的单一范围，但如果例如用户代理在响应搜索时使用 HTTP 范围请求，则可能有多个范围。

用户代理可以丢弃先前缓冲的数据。

因此，一段时间内由 buffered 属性返回的对象范围内的时间位置，可能在稍后时间由相同属性返回的对象范围内不包括。

每次返回一个新对象是属性获取器的不良模式，仅在此固化是因为更改它的代价高昂。这不应复制到新的 API 中。

4.8.11.6 媒体资源的偏移量

media.duration HTMLMediaElement/duration 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

返回媒体资源的长度，单位为秒，假设媒体资源的起点为零。

如果持续时间不可用，则返回 NaN。

对于无限流，返回 Infinity。

media.currentTime [ = value ] HTMLMediaElement/currentTime 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

返回官方播放位置，以秒为单位。

可以设置，以跳到指定时间。

媒体资源有一个媒体时间线，将时间（以秒为单位）映射到媒体资源中的位置。时间线的起点是其最早定义的位置。时间线的持续时间是其最后定义的位置。

建立媒体时间线：如果媒体资源以某种方式指定了起点不是负数的显式时间线（即为每帧指定了特定的时间偏移，并为第一帧指定了零或正偏移），则媒体时间线应为该时间线。（是否可以指定时间线取决于媒体资源的格式。）如果媒体资源指定了显式的开始时间和日期，则该时间和日期应被视为媒体时间线的零点；时间线偏移量将是时间和日期，通过getStartDate()方法暴露。

如果媒体资源具有不连续的时间轴，用户代理必须在整个资源范围内扩展资源开始时使用的时间轴，以使媒体时间轴从最早可能的位置（如下所定义）线性增加，即使底层媒体数据具有无序甚至重叠的时间码。

例如，如果将两个片段连接到一个视频文件中，但视频格式暴露了两个片段的原始时间，则视频数据可能暴露一个时间线，例如 00:15..00:29 然后是 00:05..00:38。然而，用户代理不会暴露这些时间；相反，它会将时间暴露为 00:15..00:29 和 00:29..01:02，作为一个单一视频。

在极少数情况下，如果媒体资源没有显式时间线，媒体时间线的零时间应对应于媒体资源的第一帧。在更罕见的情况下，如果媒体资源没有任何显式时间信息，甚至没有帧持续时间，用户代理必须以实现定义的方式自行确定每帧的时间。

没有显式时间线但有显式帧持续时间的文件格式的示例是动画 GIF 格式。没有任何显式时间的文件格式的示例是 JPEG 推送格式（multipart/x-mixed-replace与 JPEG 帧，通常用作 MJPEG 流的格式）。

如果在没有时间信息的资源情况下，用户代理仍然能够跳到服务器最初提供的第一帧之前的较早位置，则零时间应对应于媒体资源的最早可寻位置；否则，它应对应于从服务器收到的第一帧（用户代理开始接收流的媒体资源中的位置）。

在撰写本文时，没有已知的格式缺少显式帧时间偏移但仍支持跳到服务器发送的第一帧之前的帧。

考虑一个电视广播的流，它在十月的一个阳光明媚的星期五下午开始流，并且始终向连接的用户代理发送相同媒体时间线上的媒体数据，其零时间设置为该流的开始时间。几个月后，连接到该流的用户代理会发现他们收到的第一帧时间有数百万秒。getStartDate()方法将始终返回广播开始的日期；这将允许控制器在其进度条上显示实际时间（例如“下午 2:30”）而不是相对于广播开始的时间（“8 个月 4 小时 12 分钟 23 秒”）。

考虑一个包含多个连接片段的视频流，由不允许用户代理请求特定时间但只按预定顺序流式传输视频数据的服务器广播，始终将第一个传送的帧标识为时间零的帧。如果用户代理连接到此流并收到覆盖时间戳 2010-03-20 23:15:00 UTC 至 2010-03-21 00:05:00 UTC 和 2010-02-12 14:25:00 UTC 至 2010-02-12 14:35:00 UTC 的片段，它会以从 0 秒开始并延伸到 3600 秒（一小时）的媒体时间线暴露这些时间。假设流媒体服务器在第二个片段结束时断开连接，则duration属性会返回 3600。getStartDate()方法会返回一个Date对象，时间对应于 2010-03-20 23:15:00 UTC。然而，如果另一个用户代理五分钟后连接，它会（大概）收到覆盖时间戳 2010-03-20 23:20:00 UTC 至 2010-03-21 00:05:00 UTC 和 2010-02-12 14:25:00 UTC 至 2010-02-12 14:35:00 UTC 的片段，并以从 0 秒开始并延伸到 3300 秒（五十五分钟）的媒体时间线暴露这些时间。在这种情况下，getStartDate()方法会返回一个Date对象，时间对应于 2010-03-20 23:20:00 UTC。

在这两个示例中，seekable属性将给出控制器希望在其 UI 中实际显示的范围；通常，如果服务器不支持跳到任意时间，这将是从用户代理连接到流的时刻到用户代理已获取的最新帧的时间范围；然而，如果用户代理开始丢弃早期信息，实际范围可能会更短。

在任何情况下，用户代理都必须确保使用已建立的媒体时间线（如下所定义）时的最早可能位置大于或等于零。

媒体时间线还有一个关联的时钟。使用哪个时钟由用户代理定义，可能依赖于媒体资源，但它应近似用户的挂钟。

媒体元素有一个当前播放位置，其初始值（即在没有媒体数据的情况下）必须为零秒。当前播放位置是媒体时间线上的时间。

媒体元素也有一个官方播放位置，它最初必须设置为零秒。官方播放位置是当前播放位置的一个近似值，在脚本运行时保持稳定。

媒体元素还有一个默认播放起始位置，其初始值必须设置为零秒。此时间用于在媒体加载之前允许元素进行搜索。

每个媒体元素都有一个显示海报标志。创建媒体元素时，必须将此标志设置为 true。此标志用于控制何时为视频元素显示海报帧，而不是显示视频内容。

currentTime属性必须，在获取时，返回媒体元素的默认播放起始位置，除非该值为零，在这种情况下它必须返回元素的官方播放位置。返回值必须以秒为单位表示。在设置时，如果媒体元素的readyState为HAVE_NOTHING，则必须将媒体元素的默认播放起始位置设置为新值；否则，它必须将官方播放位置设置为新值，然后搜索到新值。新值必须以秒为单位解释。

如果媒体资源是流媒体资源，则用户代理可能无法在缓冲区过期后获取资源的某些部分。同样，某些媒体资源可能有一个不从零开始的媒体时间线。最早可能的位置是用户代理可以再次获得的流或资源中的最早位置。这也是媒体时间线上的一个时间。

最早可能的位置在API中没有明确暴露；它对应于seekable属性的TimeRanges对象中第一个范围的开始时间（如果有的话），否则对应于当前播放位置。

当最早可能的位置变化时，如果当前播放位置早于最早可能的位置，用户代理必须搜索到最早可能的位置；否则，如果用户代理在过去 15 到 250 毫秒内没有在元素上触发timeupdate事件，并且还没有在运行该事件的事件处理程序，则用户代理必须排队媒体元素任务，将该媒体元素给定以触发一个名为timeupdate的事件。

由于上述要求和资源获取算法中在获取媒体元数据时启动的要求，当前播放位置不能小于最早可能的位置。

如果用户代理在任何时候得知音轨或视频轨道已经结束，并且所有媒体数据都对应于媒体时间线中早于最早可能位置的部分，则用户代理可以排队一个媒体元素任务，将该媒体元素给定以运行这些步骤：

从audioTracks属性的AudioTrackList对象或videoTracks属性的VideoTrackList对象中移除该轨道（根据需要）。
触发一个名为removetrack的事件，使用TrackEvent，在上述媒体元素的AudioTrackList或VideoTrackList对象上，初始化track属性为代表轨道的AudioTrack或VideoTrack对象。

duration属性必须返回媒体资源在媒体时间线上的结束时间，以秒为单位。如果没有可用的媒体数据，则属性必须返回 NaN 值。如果媒体资源不被认为是有界的（例如流媒体广播或没有宣布结束时间的直播活动），则属性必须返回正无穷值。

用户代理必须在播放任何媒体数据之前，并且在将readyState设置为大于或等于HAVE_METADATA之前，确定媒体资源的持续时间，即使这样做需要获取资源的多个部分。

当媒体资源的长度变为已知值（例如从未知变为已知，或从先前确定的长度变为新长度）时，用户代理必须排队一个媒体元素任务，将该媒体元素给定以触发一个名为durationchange的事件（加载新媒体资源时重置持续时间不会触发此事件）。如果持续时间发生变化，使当前播放位置大于媒体资源的结束时间，则用户代理还必须搜索到媒体资源的结束时间。

如果“无限”流出于某种原因结束，则持续时间将从正无穷大变为流中最后一帧或样本的时间，并触发durationchange事件。同样，如果用户代理最初估计媒体资源的持续时间而不是精确定义它，并根据新信息稍后修正估计，则持续时间会发生变化并触发durationchange事件。

某些视频文件还有一个与媒体时间线的零时间相对应的显式日期和时间，称为时间线偏移。初始时，时间线偏移必须设置为 NaN。

getStartDate()方法必须返回一个新的Date对象，表示当前的时间线偏移。

loop属性是一个布尔属性，如果指定，表示媒体元素在到达媒体资源的末尾时应回到开始。

HTMLMediaElement/loop

所有当前引擎支持。

Firefox11+Safari4+Chrome3+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

loop IDL 属性必须反映同名内容属性。

4.8.11.7 就绪状态

media.readyState HTMLMediaElement/readyState 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+: 返回一个值，该值表示元素当前相对于渲染当前播放位置的状态，从以下列表中的代码中选择。

媒体元素有一个就绪状态，描述了它在当前播放位置准备渲染的程度。可能的值如下；任何特定时间媒体元素的就绪状态是描述元素状态的最大值：

HAVE_NOTHING（数值 0）

没有可用的关于媒体资源的信息。没有关于当前播放位置的数据。媒体元素的networkState属性设置为NETWORK_EMPTY时，总是处于HAVE_NOTHING状态。

HAVE_METADATA（数值 1）

已获取足够的资源，以便可以获得资源的持续时间。如果是视频元素，也可以获得视频的尺寸。没有可用的关于媒体数据的当前播放位置的数据。

HAVE_CURRENT_DATA（数值 2）

有可用的关于当前播放位置的数据，但没有足够的数据让用户代理能够在不立即恢复到HAVE_METADATA状态的情况下成功地在播放方向上推进当前播放位置，或者在播放方向上没有更多的数据可获取。例如，在视频中，这对应于用户代理拥有当前帧的数据，但没有下一帧的数据，当当前播放位置在当前帧的末尾时；以及当播放已结束时。

HAVE_FUTURE_DATA（数值 3）

有可用的关于当前播放位置的数据，以及足够的数据让用户代理能够在不立即恢复到HAVE_METADATA状态的情况下至少在播放方向上推进当前播放位置，并且文本轨道已准备好。例如，在视频中，这对应于用户代理在当前播放位置位于两帧之间的瞬间时，拥有至少当前帧和下一帧的数据，或者当当前播放位置在帧中间时，拥有当前帧的视频数据和至少能继续播放一点的音频数据。如果播放已结束，用户代理不能处于此状态，因为在这种情况下当前播放位置永远不能前进。

HAVE_ENOUGH_DATA（数值 4）

满足HAVE_FUTURE_DATA状态描述的所有条件，并且满足以下条件之一：

用户代理估计数据的获取速度为，如果当前播放位置按照元素的playbackRate推进，在播放到达媒体资源末尾之前不会超过可用数据。
用户代理已经进入一种状态，在等待更长时间不会获得更多数据，因此进一步延迟播放没有任何好处。（例如，缓冲区可能已满。）

实际上，HAVE_METADATA和HAVE_CURRENT_DATA之间的区别是微不足道的。真正唯一相关的区别是在将视频元素绘制到画布上时，它区分了会绘制某些内容的情况（HAVE_CURRENT_DATA或更高）与不会绘制任何内容的情况（HAVE_METADATA或更低）。同样，HAVE_CURRENT_DATA（仅当前帧）和HAVE_FUTURE_DATA（至少当前帧和下一帧）之间的区别可能是微不足道的（在极端情况下，仅一个帧）。这种区别真正重要的唯一时间是页面提供“逐帧”导航接口时。

当媒体元素的networkState不为NETWORK_EMPTY时，其就绪状态发生变化时，用户代理必须按照以下步骤操作：

从以下列表中应用第一个适用的子步骤集：
如果之前的就绪状态是HAVE_NOTHING，而新就绪状态是HAVE_METADATA

排队一个媒体元素任务，将该媒体元素给定以触发一个名为loadedmetadata的事件。

在此任务运行之前，作为事件循环机制的一部分，渲染将已更新以调整视频元素的大小（如果适用）。

如果之前的就绪状态是HAVE_METADATA，而新就绪状态是HAVE_CURRENT_DATA或更高

如果这是自上次调用load()算法以来首次发生这种情况，对于该媒体元素，用户代理必须排队一个媒体元素任务，给定媒体元素去触发一个名为loadeddata的事件在该元素上。

如果新就绪状态是HAVE_FUTURE_DATA或HAVE_ENOUGH_DATA，则必须运行以下相关步骤。

如果之前的就绪状态是HAVE_FUTURE_DATA或更高，而新就绪状态是HAVE_CURRENT_DATA或更低

如果媒体元素在readyState属性降至HAVE_FUTURE_DATA以下之前处于潜在播放状态，并且元素未结束播放，且播放未因错误停止、因用户互动暂停或因带内内容暂停，用户代理必须排队一个媒体元素任务，将该媒体元素给定以触发一个名为timeupdate的事件，并排队一个媒体元素任务，将该媒体元素给定以触发一个名为waiting的事件。

如果之前的就绪状态是HAVE_CURRENT_DATA或更低，而新就绪状态是HAVE_FUTURE_DATA

用户代理必须排队一个媒体元素任务，将该媒体元素给定以触发一个名为canplay的事件。

如果元素的paused属性为 false，用户代理必须通知关于播放。

如果新就绪状态是HAVE_ENOUGH_DATA
如果之前的就绪状态是HAVE_CURRENT_DATA或更低，用户代理必须排队一个媒体元素任务，将该媒体元素给定以触发一个名为canplay的事件，并且，如果元素的paused属性为 false，通知关于播放。

用户代理必须排队一个媒体元素任务，将该媒体元素给定以触发一个名为canplaythrough的事件。

如果元素不符合自动播放条件，则用户代理必须中止这些子步骤。

用户代理可以运行以下子步骤：
1. 将paused属性设置为 false。
2. 如果元素的显示海报标志为 true，将其设置为 false 并运行时间前进步骤。
3. 排队一个媒体元素任务，将该元素给定以触发一个名为play的事件。
4. 通知关于播放。
或者，如果元素是视频元素，用户代理可以开始观察元素是否与视口相交。当元素开始与视口相交时，如果元素仍然符合自动播放条件，运行上述子步骤。可选地，当元素停止与视口相交时，如果可自动播放标志仍然为真并且自动播放属性仍然指定，运行以下子步骤：
1. 运行内部暂停步骤并将可自动播放标志设置为真。
2. 排队一个媒体元素任务，将该元素给定以触发一个名为pause的事件。
随着元素开始或停止与视口相交，播放和暂停的子步骤可以多次运行，只要可自动播放标志为真。

用户代理不需要支持自动播放，建议用户代理尊重用户对该问题的偏好。建议作者使用自动播放属性而不是使用脚本强制视频播放，以便允许用户在需要时覆盖行为。

媒体元素的就绪状态可能会不连续地在这些状态之间跳跃。例如，媒体元素的状态可以直接从HAVE_METADATA跳到HAVE_ENOUGH_DATA，而不经过HAVE_CURRENT_DATA和HAVE_FUTURE_DATA状态。

readyState IDL 属性在获取时必须返回上述描述的值，表示媒体元素的当前就绪状态。

autoplay属性是一个布尔属性。当存在时，用户代理（如本文中描述的算法所述）将自动开始播放媒体资源，只要它可以在不停止的情况下进行。

建议作者使用自动播放属性，而不是使用脚本触发自动播放，因为这允许用户在不需要时覆盖自动播放，例如使用屏幕阅读器时。作者还被鼓励考虑完全不使用自动播放行为，而是让用户代理等待用户显式启动播放。

HTMLMediaElement/autoplay

所有当前引擎支持。

Firefox3.5+Safari3.1+Chrome3+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

autoplay IDL 属性必须反映同名内容属性。

4.8.11.8 播放媒体资源

media.paused HTMLMediaElement/paused 在所有当前引擎中支持。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

如果播放已暂停，则返回 true；否则返回 false。

media.ended HTMLMediaElement/ended 在所有当前引擎中支持。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

如果播放已达到媒体资源的结束，则返回 true。

media.defaultPlaybackRate [ = value ] HTMLMediaElement/defaultPlaybackRate 在所有当前引擎中支持。 Firefox20+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

返回默认的播放速率，用于用户未快进或倒退媒体时的播放。

可以设置此属性来更改默认的播放速率。

默认速率对播放没有直接影响，但如果用户切换到快进模式，当他们返回到正常播放模式时，预计播放速率将恢复为默认播放速率。

media.playbackRate [ = value ] HTMLMediaElement/playbackRate 在所有当前引擎中支持。 Firefox20+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

返回当前的播放速率，其中 1.0 为正常速度。

可以设置此属性来改变播放速率。

media.preservesPitch HTMLMediaElement/preservesPitch Firefox101+Safari🔰 4+Chrome86+ Opera?Edge86+ Edge (旧版)?Internet Explorer没有 Firefox Android?Safari iOS🔰 4+Chrome Android?WebView Android?Samsung Internet?Opera Android?

如果使用了保持音调算法，当 playbackRate 不等于 1.0 时返回 true。默认值为 true。

可以设置为 false，使媒体资源的音频音调随 playbackRate 改变。这对审美和性能方面都有帮助。

media.played

返回一个 TimeRanges 对象，表示用户代理已播放的媒体资源的范围。

media.play() HTMLMediaElement/play 所有当前引擎均支持。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+

将 paused 属性设置为 false，如果需要的话，加载媒体资源并开始播放。如果播放已经结束，将从头开始重新播放。

media.pause() HTMLMediaElement/pause 所有当前引擎均支持。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

将 paused 属性设置为 true，必要时加载媒体资源。

paused 属性表示媒体元素是否处于暂停状态。该属性初始值必须为 true。

如果媒体元素的 readyState 属性处于 HAVE_NOTHING 状态、HAVE_METADATA 状态，或 HAVE_CURRENT_DATA 状态，或者如果该元素已被用户交互暂停或因带内内容暂停，则该媒体元素被称为被阻塞的媒体元素。

当媒体元素的 paused 属性为 false，且元素没有结束播放、播放没有因错误停止，且元素不是被阻塞的媒体元素时，该媒体元素被称为可能正在播放。

如果 waiting DOM 事件可能会触发，当一个可能正在播放的元素因其 readyState 属性的值变为低于 HAVE_FUTURE_DATA 时。

当以下所有条件都满足时，媒体元素被认为是符合自动播放条件：

它的可以自动播放标志为 true；
它的 paused 属性为 true；
它具有一个 autoplay 属性；
它的节点文档的活动沙箱标志不具有沙箱自动功能浏览上下文标志；并且
它的节点文档被允许使用 "autoplay" 功能。

如果用户代理和系统允许在当前上下文中播放媒体，则媒体元素被认为是允许播放。

例如，用户代理可能只在媒体元素的 Window 对象具有临时激活时允许播放，但可以做出例外，允许在静音时播放。

当以下条件满足时，媒体元素被认为是播放结束：

元素的 readyState 属性为 HAVE_METADATA 或更高，并且
要么：
- 当前播放位置为媒体资源的末尾，并且
- 播放方向为向前，并且
- 媒体元素没有指定 loop 属性。
或者：
- 当前播放位置为最早可能的位置，并且
- 播放方向为向后。

ended 属性必须返回 true，如果在事件循环到达步骤 1 时，媒体元素处于播放结束状态且播放方向为向前，否则返回 false。

当以下条件满足时，媒体元素被认为是由于错误停止：

元素的 readyState 属性为 HAVE_METADATA 或更高，并且用户代理在处理媒体数据时遇到非致命错误，并且由于该错误，无法在当前播放位置播放内容。

当媒体元素的 paused 属性为 false，且 readyState 属性为 HAVE_FUTURE_DATA 或 HAVE_ENOUGH_DATA 时，并且用户代理已到达需要用户进行选择的媒体资源的一个点，以继续播放，则媒体元素被认为是因用户交互暂停。

一个媒体元素可以同时具有播放结束和因用户交互暂停状态。

当一个媒体元素处于可能播放状态并且因因用户交互暂停而停止播放时，用户代理必须排队一个媒体元素任务，以便媒体元素触发一个名为 timeupdate 的事件。

当媒体元素的 paused 属性为 false，且 readyState 属性为 HAVE_FUTURE_DATA 或 HAVE_ENOUGH_DATA 时，且用户代理已暂停媒体资源的播放，以播放时间上锚定到该资源且长度不为零的内容，或播放时间上锚定到该媒体资源的一段但长度大于该段的内容时，媒体元素被认为是因带内内容暂停。

一个媒体元素被认为是因带内内容暂停的一个例子是当用户代理正在播放来自外部 WebVTT 文件的音频描述时，而为某个提示生成的合成语音的时间长于文本轨道提示开始时间和文本轨道提示结束时间之间的时间。

当当前播放位置达到媒体资源的末尾时，且播放方向为前向，用户代理必须遵循以下步骤：

如果媒体元素指定了 loop 属性，则跳转到最早可能的位置并返回。
如上所述，ended IDL 属性将在事件循环返回到步骤 1 时开始返回 true。
排队一个媒体元素任务，给定媒体元素和以下步骤：
1. 触发一个事件，名为 timeupdate，在媒体元素上。
2. 如果媒体元素已经播放结束，且播放方向为前向，并且 paused 为 false，则：
  1. 将 paused 属性设置为 true。
  2. 触发一个事件，名为 pause，在媒体元素上。
  3. 获取挂起的播放承诺和拒绝挂起的播放承诺，结果和 “AbortError” DOMException。
3. 触发一个事件，名为 ended，在媒体元素上。

当当前播放位置达到最早可能的位置的媒体资源时，如果播放方向为后向，则用户代理仅需排队一个媒体元素任务，给定媒体元素，以触发一个事件，事件名为 timeupdate。

这里的“达到”并不意味着当前播放位置必须在正常播放过程中发生变化；它也可以通过跳转进行变化。

defaultPlaybackRate 属性给出媒体资源播放的期望速度，作为其固有速度的倍数。该属性是可变的：在获取时必须返回最后设置的值，如果尚未设置则返回 1.0；在设置时，属性必须设置为新值。

用户代理在向用户暴露用户界面时使用 defaultPlaybackRate。

playbackRate 属性给出有效的播放速率，即媒体资源播放的速度，作为其固有速度的倍数。如果它不等于 defaultPlaybackRate，则意味着用户正在使用诸如快进或慢动作播放等功能。该属性是可变的：在获取时必须返回最后设置的值，如果尚未设置则返回 1.0；在设置时，用户代理必须遵循以下步骤：

如果给定值不被用户代理支持，则抛出 “NotSupportedError” DOMException。
将 playbackRate 设置为新值，如果元素处于可能正在播放状态，则更改播放速度。

当 defaultPlaybackRate 或 playbackRate 属性值发生变化（无论是由脚本设置还是由用户代理直接更改，例如响应用户控制时），用户代理必须排队一个媒体元素任务，给定媒体元素，以触发一个事件，事件名为 ratechange，在媒体元素上。用户代理必须平滑地处理属性更改，不能引入任何可感知的间隙或静音。

preservesPitch 的获取步骤是，如果在播放期间应用了保持音高的算法，则返回 true。设置步骤是相应地开启或关闭保持音高的算法，而不引入任何可感知的间隙或静音。默认情况下，必须启用这种保持音高的算法（即，获取器将初始返回 true）。

played 属性必须返回一个新的静态规范化的 TimeRanges 对象，该对象表示通过通常的单调递增的当前播放位置在正常播放期间到达的媒体时间轴上的范围，如果有的话，在属性被评估时。

每次返回一个新对象是一种不良的属性获取器模式，仅在这里被保留，因为改变它会很麻烦。这不应被复制到新的 API 中。

每个媒体元素都有一个待处理播放承诺的列表，该列表最初必须是空的。

要获取待处理播放承诺对于一个媒体元素，用户代理必须执行以下步骤：

让 promises 成为一个空的承诺列表。
将媒体元素的待处理播放承诺的列表复制到 promises。
清空媒体元素的待处理播放承诺的列表。
返回 promises。

要解决待处理播放承诺对于一个媒体元素和一个承诺列表 promises，用户代理必须用未定义值解决 promises 中的每个承诺。

要拒绝待处理播放承诺对于一个媒体元素和一个承诺列表 promises 及一个异常名称 error，用户代理必须用 error 拒绝 promises 中的每个承诺。

要通知播放状态对于一个媒体元素，用户代理必须执行以下步骤：

获取待处理播放承诺并将结果赋值给 promises。
排队一个媒体元素任务给定该元素和以下步骤：
1. 触发一个事件名为 playing 在该元素上。
2. 解决待处理播放承诺使用 promises。

当对一个媒体元素调用 play() 方法时，用户代理必须执行以下步骤。

如果媒体元素不被允许播放，则返回一个被拒绝的承诺，拒绝原因是 "NotAllowedError" DOMException。
如果媒体元素的 error 属性不为 null 并且其 code 为 MEDIA_ERR_SRC_NOT_SUPPORTED，则返回一个被拒绝的承诺，拒绝原因是 "NotSupportedError" DOMException。

这意味着专用媒体源失败步骤已经执行。播放在媒体元素加载算法清除 error 属性之前是不可能的。
让 promise 成为一个新的承诺，并将 promise 添加到待处理播放承诺的列表。
执行内部播放步骤对于媒体元素。
返回 promise。

对于一个媒体元素的内部播放步骤如下：

如果媒体元素的 networkState 属性的值为 NETWORK_EMPTY，则调用媒体元素的资源选择算法。
如果播放已结束且播放方向为前向，跳转到媒体资源的最早可能位置。

这将导致用户代理排队一个媒体元素任务给定该媒体元素，以触发一个事件名为 timeupdate 在该媒体元素上。
如果媒体元素的 paused 属性为真，则：
1. 将 paused 的值更改为假。
2. 如果显示海报标志为真，则将元素的显示海报标志设置为假，并执行 时间流逝 步骤。
3. 排队一个媒体元素任务，给定媒体元素去触发一个事件，名为play在该元素上。
4. 如果媒体元素的 readyState 属性的值为 HAVE_NOTHING、HAVE_METADATA 或 HAVE_CURRENT_DATA，则排队一个媒体元素任务给定该媒体元素，以触发一个事件名为 waiting 在该元素上。
  
  否则，媒体元素的 readyState 属性的值为 HAVE_FUTURE_DATA 或 HAVE_ENOUGH_DATA：通知播放情况。
否则，如果媒体元素的 readyState 属性的值为 HAVE_FUTURE_DATA 或 HAVE_ENOUGH_DATA，处理待处理的播放承诺并且排队一个媒体元素任务给定该媒体元素以解决待处理的播放承诺。

媒体元素已经在播放。然而，promise 可能会在排队任务执行之前被拒绝。
将媒体元素的可以自动播放标志设置为假。

当调用 pause() 方法时，并且当用户代理需要暂停媒体元素，用户代理必须执行以下步骤：

如果媒体元素的 networkState 属性的值为 NETWORK_EMPTY，调用媒体元素的资源选择算法。
执行内部暂停步骤对于媒体元素。

一个媒体元素的内部暂停步骤如下：

将媒体元素的可以自动播放标志设置为假。
如果媒体元素的 paused 属性为假，则执行以下步骤：
1. 将 paused 的值更改为真。
2. 处理待处理的播放承诺并让 promises 为结果。
3. 排队一个媒体元素任务给定该媒体元素和以下步骤：
  1. 触发一个事件名为 timeupdate 在该元素上。
  2. 触发一个事件名为 pause 在该元素上。
  3. 拒绝待处理的播放承诺使用 promises 和一个 "AbortError" DOMException。
4. 将官方播放位置设置为当前播放位置。

如果元素的 playbackRate 是正值或零，那么播放方向为前进。否则，为后退。

当一个媒体元素处于可能正在播放状态并且其 文档 是一个完全活动的 文档，其当前播放位置必须按照元素的 playbackRate 媒体时间单位每单位时间在媒体时间轴的时钟上单调增加。（该规范总是将其称为增加，但这种增加实际上可能是减少，如果元素的 playbackRate 是负数的话。）

元素的 playbackRate 可以是 0.0，在这种情况下，当前播放位置不会移动，尽管播放没有被暂停（paused 不会变为真，并且 pause 事件不会触发）。

该规范没有定义用户代理如何实现适当的播放速率——根据协议和可用媒体的不同，用户代理可能会与服务器协商，让服务器以适当的速率提供媒体数据，以便（除非在速率更改与服务器更新流的播放速率之间的时间段）客户端实际上不需要丢弃或插值任何帧。

每当用户代理提供稳定状态时，官方播放位置必须设置为当前播放位置。

当播放方向为后退时，任何相应的音频必须是静音。当元素的 playbackRate 低到用户代理无法有效播放音频的程度时，相应的音频也必须被静音。如果元素的 playbackRate 不为 1.0 并且 preservesPitch 为真，则用户代理必须应用音调调整以保持音频的原始音调。否则，用户代理必须加快或减慢音频播放而不进行音调调整。

当一个媒体元素处于可能正在播放状态时，其播放的音频数据必须与当前播放位置同步，并且使用元素的有效媒体音量播放。用户代理必须播放在事件循环上次达到步骤 1 时已启用的音轨数据。

当一个媒体元素不处于可能正在播放状态时，该元素的音频不得播放。

媒体元素在未可能正在播放且不在文档中时，不得播放任何视频，但应播放任何音频组件。媒体元素不得仅仅因为所有对它的引用已被移除而停止播放；只有当媒体元素处于一种状态，无法再播放任何音频时，该元素才能被垃圾回收。

即使对一个没有明确引用的元素，仍有可能播放音频，即使该元素不再积极播放：例如，它可能已被解除暂停但仍在等待内容缓冲，或者仍在缓冲中，但有一个 suspend 事件监听器开始播放。即使是一个媒体资源没有音轨的媒体元素，如果它有一个更改媒体资源的事件监听器，也可能会再次播放音频。

每个媒体元素有一个新引入提示的列表，该列表初始为空。每当一个文本轨道提示被添加到提示列表中的文本轨道，该提示必须被添加到媒体元素的新引入提示的列表中。每当一个文本轨道被添加到文本轨道列表中的媒体元素，该文本轨道中的所有提示必须被添加到媒体元素的新引入提示的列表中。当媒体元素的新引入提示的列表中有新提示被添加，而该媒体元素的显示海报标志未被设置时，用户代理必须执行 时间继续前进 步骤。

当一个文本轨道提示从一个在文本轨道列表中的文本轨道中被移除时，以及每当一个文本轨道从文本轨道列表中的媒体元素中被移除时，如果媒体元素的显示海报标志未被设置时，用户代理必须执行 时间继续前进 步骤。

当媒体元素的当前播放位置发生变化时（例如由于播放或搜索），用户代理必须运行时间向前推进步骤。为了支持依赖提示事件触发时间精度的用例，例如将字幕与视频中的镜头变化同步，用户代理应尽可能接近媒体时间轴上的位置触发提示事件，理想情况下在20毫秒内。如果在步骤运行时当前播放位置发生变化，则用户代理必须等待步骤完成，然后必须立即重新运行这些步骤。因此，这些步骤尽可能或按需运行。

如果一个迭代耗时较长，这可能会导致短时长的提示被跳过，因为用户代理急于 "赶上"，因此这些提示不会出现在 activeCues 列表中。

“时间流逝”的步骤如下：

让 current cues 成为一个提示的列表，初始化时包含所有提示，这些提示来自所有隐藏或显示的文本轨道的媒体元素（不是禁用的），其开始时间小于或等于当前播放位置，其结束时间大于当前播放位置。
让 other cues 成为一个提示的列表，初始化时包含所有提示，这些提示来自隐藏和显示的文本轨道的媒体元素，这些提示不在 current cues 中。
让 last time 成为在此算法最后一次运行时的当前播放位置，如果这不是第一次运行。
如果当前播放位置自上次运行此算法以来，仅通过正常播放中的单调增加发生变化，则让 missed cues 成为在 other cues 中的提示列表，其开始时间大于或等于 last time，其结束时间小于或等于当前播放位置。否则，让 missed cues 成为空列表。
移除 missed cues 中的所有提示，这些提示也在媒体元素的新引入提示列表中，然后清空该元素的新引入提示列表。
如果时间是通过当前播放位置在正常播放期间的单调增加达到的，并且用户代理在过去的15到250毫秒内没有在元素上触发过 timeupdate 事件，并且仍未处理此事件的事件处理程序，则用户代理必须排队一个媒体元素任务，要求媒体元素在元素上触发一个名为 timeupdate 的事件。（在其他情况下，如显式跳转，相关事件会在改变当前播放位置的整个过程中触发。）

因此，事件不会触发得比约66Hz快，或者比4Hz慢（假设事件处理程序的运行时间不超过250毫秒）。鼓励用户代理根据系统负载和每次处理事件的平均成本来调整事件的频率，以便UI更新的频率不会超过用户代理在解码视频时可以舒适处理的程度。
如果 current cues 中的所有提示都已设置其文本轨道提示激活标志，且 other cues 中没有提示设置其文本轨道提示激活标志，并且 missed cues 为空，则返回。
如果时间是通过当前播放位置在正常播放期间的单调增加达到的，并且 other cues 中有提示，这些提示设置了文本轨道提示退出时暂停标志，并且这些提示要么设置了文本轨道提示激活标志，要么也在 missed cues 中，则立即暂停媒体元素。

在其他情况下，例如显式跳转，即使该提示设置了文本轨道提示退出时暂停标志，播放也不会因为超出提示的结束时间而暂停。
让 events 成为一个初始为空的任务列表。此列表中的每个任务将与一个文本轨道、一个文本轨道提示和一个时间相关联，这些信息用于在任务排队之前对列表进行排序。

让 affected tracks 成为一个初始为空的文本轨道列表。

当步骤下列指示为具有时间 time 的文本轨道提示 target 准备一个名为 event 的事件时，用户代理必须执行以下步骤：
1. 让 track 为与文本轨道提示 target 关联的文本轨道。
2. 创建一个任务来触发一个名为 event 的事件于 target。
3. 将新创建的任务添加到 events，并与时间 time、文本轨道 track 和文本轨道提示 target 关联。
4. 将 track 添加到 affected tracks。
对于missed cues中的每个文本轨道提示，准备一个事件，名为enter，为TextTrackCue对象设置文本轨道提示开始时间。
对于每个other cues中已设置其文本轨道提示活动标志或在missed cues中的文本轨道提示，准备一个事件，名为exit，为TextTrackCue对象设置文本轨道提示结束时间和文本轨道提示开始时间中较晚的时间。
对于每个current cues中未设置其文本轨道提示活动标志的文本轨道提示，准备一个事件，名为enter，为TextTrackCue对象设置文本轨道提示开始时间。
按升序对 events 中的任务进行排序（较早时间的任务在前）。

进一步对 events 中具有相同时间的任务按这些文本轨道提示关联的文本轨道提示顺序进行排序。

最后，对 events 中具有相同时间和相同文本轨道提示顺序的任务进行排序，将触发 enter 事件的任务放在触发 exit 事件的任务之前。
排队一个媒体元素任务，要求媒体元素对 events 中的每个任务，按列表顺序。
按文本轨道在媒体元素的文本轨道列表中出现的相同顺序对 affected tracks 进行排序，并移除重复项。
对于 affected tracks 中的每个文本轨道，按列表顺序，排队一个媒体元素任务，要求媒体元素触发一个名为 cuechange 的事件，事件对象为 TextTrack 对象。如果文本轨道有一个对应的 track 元素，则同样触发一个名为 cuechange 的事件，事件对象为 track 元素。
将 current cues 中所有提示的文本轨道提示激活标志设置为激活状态，并将 other cues 中所有提示的文本轨道提示激活标志取消设置。
按照更新文本轨道渲染的规则对 affected tracks 中所有文本轨道进行处理，这些文本轨道处于显示状态，并提供文本轨道的文本轨道语言作为备用语言（如果该语言不为空）。例如，对于基于 WebVTT 的文本轨道，使用 WebVTT 文本轨道显示更新规则。[WEBVTT]

对于上述算法的目的，只有当文本轨道提示列在文本轨道提示列表中时，才被认为是属于文本轨道，而不仅仅是与文本轨道相关联。

如果媒体元素的节点文档不再是完全活动文档，则播放将停止，直到文档再次变为活动状态。

当媒体元素被从 Document 中移除时，用户代理必须执行以下步骤：

等待稳定状态，允许移除媒体元素的任务继续进行。同步部分包含本算法的所有剩余步骤。（同步部分的步骤用 ⌛ 标记。）
⌛ 如果媒体元素仍然在文档中，则返回。
⌛ 执行内部暂停步骤。

4.8.11.9 寻找

media.seeking

如果用户代理当前正在寻找，则返回 true。

media.seekable HTMLMediaElement/seekable 所有当前引擎均支持。 Firefox8+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

返回一个 TimeRanges 对象，表示用户代理能够寻找到的媒体资源的范围。

media.fastSeek(time) HTMLMediaElement/fastSeek Firefox31+Safari8+Chrome无 Opera?Edge无 Edge (旧版)?Internet Explorer无 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

尽可能快速地寻找到接近给定 time 的位置，以速度换取精度。（要精确寻找到一个时间，请使用 currentTime 属性。）

如果媒体资源尚未加载，则不执行任何操作。

seeking 属性初始值必须为 false。

fastSeek(time) 方法必须寻找到由 time 给定的时间，并设置 approximate-for-speed 标志。

当用户代理需要寻找到媒体资源中的特定 new playback position 时，可选择设置 approximate-for-speed 标志，这意味着用户代理必须执行以下步骤。该算法与事件循环机制紧密交互；特别是，它具有一个同步部分（作为事件循环算法的一部分触发）。该部分的步骤用 ⌛ 标记。

将媒体元素的显示海报标志设置为false。
如果媒体元素的readyState为HAVE_NOTHING，则返回。
如果元素的seeking IDL属性为true，则表示此算法的另一个实例正在运行。终止该算法的另一个实例，而无需等待其运行的步骤完成。
将seeking IDL属性设置为true。
如果搜索是响应DOM方法调用或设置IDL属性，则继续脚本。其余步骤必须并行运行。除了标有⌛的步骤外，这些步骤随时可能被另一个实例调用而中止。
如果new playback position晚于媒体资源的末尾，则将其设为媒体资源的末尾。
如果new playback position小于最早可能的位置，则将其设为该位置。
如果（可能现在已更改的）new playback position不在seekable属性提供的范围之一内，则将其设为seekable属性提供的最接近new playback position的范围中的位置。如果两个位置都满足该约束（即new playback position正好位于seekable属性中的两个范围之间），则使用最接近当前播放位置的位置。如果seekable属性中没有给定范围，则将seeking IDL属性设置为false并返回。
如果设置了approximate-for-speed标志，则调整new playback position以允许快速恢复播放。如果此步骤之前的new playback position在当前播放位置之前，则调整后的new playback position也必须在当前播放位置之前。同样，如果此步骤之前的new playback position在当前播放位置之后，则调整后的new playback position也必须在当前播放位置之后。

例如，用户代理可以捕捉到附近的关键帧，以便在恢复播放之前不必花时间解码然后丢弃中间帧。
排队一个媒体元素任务，给定媒体元素去触发一个事件，名为seeking在该元素上。
将当前播放位置设置为new playback position。

如果媒体元素在开始搜索之前是潜在播放状态，但搜索导致其readyState属性变为低于HAVE_FUTURE_DATA的值，则将在该元素上触发一个waiting事件。

此步骤设置当前播放位置，因此可以立即触发其他条件，例如播放何时达到媒体资源的末尾的规则（处理循环的一部分逻辑），即使在用户代理实际上能够渲染该位置的媒体数据之前（如下一步所确定）。

currentTime属性返回官方播放位置，而不是当前播放位置，因此在脚本执行之前独立于此算法进行更新。
等待用户代理确定new playback position的媒体数据是否可用，并且，如果可用，则等待它解码足够的数据以播放该位置。
等待一个稳定状态。同步部分包括此算法的所有剩余步骤。（同步部分中的步骤标有⌛。）
⌛ 将seeking IDL属性设置为false。
⌛ 运行时间向前推进步骤。
⌛ 排队一个媒体元素任务，给定媒体元素去触发一个事件，名为timeupdate在该元素上。
⌛ 排队一个媒体元素任务，给定媒体元素去触发一个事件，名为seeked在该元素上。

seekable 属性必须返回一个新的静态标准化的 TimeRanges 对象，表示用户代理能够寻找到的媒体资源的范围（如果有的话），在评估该属性时返回。

如果用户代理可以在媒体资源中的任意位置进行寻找到，例如，因为这是一个简单的电影文件且用户代理和服务器支持 HTTP Range 请求，那么属性将返回一个具有一个范围的对象，该范围的开始是第一个帧的时间（最早可能的位置，通常为零），结束时间是第一个帧的时间加上 duration 属性的值（这将等于最后一个帧的时间，可能为正无穷）。

该范围可能会不断变化，例如，如果用户代理在无限流上缓存滑动窗口。这在 DVR 观看直播电视时会看到。

每次返回一个新对象是属性获取器的一个糟糕模式，只在此处被铭记，因为改变它的成本很高。这不应被复制到新的 API 中。

用户代理应采取非常宽松和乐观的寻找到视图。用户代理还应在可能的情况下缓冲最近的内容，以使寻找到过程更快。

例如，考虑一个在没有 HTTP Range 请求支持的 HTTP 服务器上提供的大型视频文件。一个浏览器可以实现为只缓冲当前帧和获取后续帧的数据，从不允许寻找到，除了通过重启播放来寻找到开始。但是，这将是一个不好的实现。高质量的实现将缓冲最近几分钟的内容（或更多，如果有足够的存储空间），允许用户快速跳回并重新观看令人惊讶的内容而没有任何延迟，并且如果必要的话，还会允许通过从头开始重新加载文件来进行任意寻找到，这会更慢但仍然比仅仅重启视频并全部观看一遍来获取早期未缓冲的点更方便。

媒体资源可能是内部脚本化的或交互式的。因此，一个媒体元素可能以非线性的方式播放。如果发生这种情况，用户代理必须在寻找到算法被使用时表现得好像当前播放位置变化是不连续的（以便相关事件被触发）。

4.8.11.10 具有多个媒体轨道的媒体资源

一个媒体资源可以包含多个嵌入的音频和视频轨道。例如，除了主要的视频和音频轨道外，一个媒体资源还可以包含外语配音、导演评论、音频描述、备用角度或手语覆盖层。

media.audioTracks HTMLMediaElement/audioTracks 所有当前引擎均支持。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)NoInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?: 返回一个 AudioTrackList 对象，表示在媒体资源中可用的音频轨道。
media.videoTracks HTMLMediaElement/videoTracks 所有当前引擎均支持。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)NoInternet ExplorerNo Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?: 返回一个 VideoTrackList 对象，表示在媒体资源中可用的视频轨道。

媒体元素的 audioTracks 属性必须返回一个 live AudioTrackList 对象，表示在媒体元素的媒体资源中可用的音频轨道。

媒体元素的 videoTracks 属性必须返回一个 live VideoTrackList 对象，表示在媒体元素的媒体资源中可用的视频轨道。

每个媒体元素只有一个 AudioTrackList 对象和一个 VideoTrackList 对象，即使另一个媒体资源被加载到元素中：这些对象会被重用。（不过，AudioTrack 和 VideoTrack 对象则不会。）

4.8.11.10.1 `AudioTrackList` 和 `VideoTrackList` 对象

AudioTrackList

支持所有当前的引擎。

Firefox🔰 33+Safari7+Chrome🔰 37+

Opera?Edge🔰 79+

Edge (旧版)无Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

VideoTrackList

支持所有当前的引擎。

Firefox🔰 33+Safari7+Chrome🔰 37+

Opera?Edge🔰 79+

Edge (旧版)无Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

AudioTrackList

支持所有当前的引擎。

Firefox🔰 33+Safari7+Chrome🔰 37+

Opera?Edge🔰 79+

Edge (旧版)无Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

caniuse.com 表格

AudioTrackList 和 VideoTrackList 接口由前面章节中定义的属性使用。

AudioTrack

支持所有当前的引擎。

Firefox🔰 33+Safari8+Chrome🔰 37+

Opera?Edge🔰 79+

Edge (旧版)无Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

VideoTrack

支持所有当前的引擎。

Firefox🔰 33+Safari7+Chrome🔰 37+

Opera?Edge🔰 79+

Edge (旧版)无Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

[Exposed=Window]
interface AudioTrackList : EventTarget {
  readonly attribute unsigned long length;
  getter AudioTrack (unsigned long index);
  AudioTrack? getTrackById(DOMString id);

  attribute EventHandler onchange;
  attribute EventHandler onaddtrack;
  attribute EventHandler onremovetrack;
};

[Exposed=Window]
interface AudioTrack {
  readonly attribute DOMString id;
  readonly attribute DOMString kind;
  readonly attribute DOMString label;
  readonly attribute DOMString language;
  attribute boolean enabled;
};

[Exposed=Window]
interface VideoTrackList : EventTarget {
  readonly attribute unsigned long length;
  getter VideoTrack (unsigned long index);
  VideoTrack? getTrackById(DOMString id);
  readonly attribute long selectedIndex;

  attribute EventHandler onchange;
  attribute EventHandler onaddtrack;
  attribute EventHandler onremovetrack;
};

[Exposed=Window]
interface VideoTrack {
  readonly attribute DOMString id;
  readonly attribute DOMString kind;
  readonly attribute DOMString label;
  readonly attribute DOMString language;
  attribute boolean selected;
};

media.audioTracks.length AudioTrackList/length 支持所有当前引擎。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

media.videoTracks.length VideoTrackList/length 支持所有当前引擎。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回列表中的轨道数量。

audioTrack = media.audioTracks[index]

videoTrack = media.videoTracks[index]

返回指定的 AudioTrack 或 VideoTrack 对象。

audioTrack = media.audioTracks.getTrackById(id) AudioTrackList/getTrackById 支持所有当前引擎。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera? Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

videoTrack = media.videoTracks.getTrackById(id) VideoTrackList/getTrackById 支持所有当前引擎。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回具有给定标识符的 AudioTrack 或 VideoTrack 对象，如果没有具有该标识符的轨道，则返回 null。

audioTrack.id AudioTrack/id 支持所有当前引擎。 Firefox🔰 33+Safari8+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

videoTrack.id VideoTrack/id 支持所有当前引擎。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回给定轨道的 ID。如果格式支持片段，并且可以与 getTrackById() 方法一起使用，则这是可使用的 ID。

audioTrack.kind AudioTrack/kind 支持所有当前引擎。 Firefox🔰 33+Safari8+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

videoTrack.kind VideoTrack/kind 支持所有当前引擎。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回给定轨道所属的类别。下面给出了可能的轨道类别。

audioTrack.label AudioTrack/label 支持所有当前引擎。 Firefox🔰 33+Safari8+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

videoTrack.label VideoTrack/label 支持所有当前引擎。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回给定轨道的标签（如果已知），否则返回空字符串。

audioTrack.language AudioTrack/language 支持所有当前引擎。 Firefox🔰 33+Safari8+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

videoTrack.language VideoTrack/language 支持所有当前引擎。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回给定轨道的语言（如果已知），否则返回空字符串。

audioTrack.enabled [ = value ] AudioTrack/enabled 支持所有当前引擎。 Firefox🔰 33+Safari8+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

如果给定轨道处于活动状态，则返回 true，否则返回 false。

可以设置，以更改轨道是否已启用。如果同时启用多个音轨，则它们会混合。

media.videoTracks.selectedIndex VideoTrackList/selectedIndex 支持所有当前引擎。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回当前选定轨道的索引（如果有），否则返回 −1。

videoTrack.selected [ = value ] VideoTrack/selected 支持所有当前引擎。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

如果给定轨道处于活动状态，则返回 true，否则返回 false。

可以设置，以更改轨道是否已选择。可以选择零个或一个视频轨道；在选择新轨道时，取消选择先前的轨道。

一个 AudioTrackList 对象表示一个动态列表，包含零个或多个音轨，其中零个或多个可以同时启用。每个音轨由一个 AudioTrack 对象表示。

一个 VideoTrackList 对象表示一个动态列表，包含零个或多个视频轨道，其中每次只能选择零个或一个。每个视频轨道由一个 VideoTrack 对象表示。

AudioTrackList 和 VideoTrackList 对象中的轨道必须保持一致的顺序。如果媒体资源的格式定义了顺序，则必须使用该顺序；否则，顺序必须是轨道在媒体资源中声明的相对顺序。使用的顺序称为列表的自然顺序。

因此，这些对象中的每个轨道都有一个索引；第一个索引为 0，每个后续轨道的编号比前一个高一。如果媒体资源动态添加或删除音轨或视频轨道，则轨道的索引将动态更改。如果媒体资源完全更改，则所有先前的轨道将被删除并替换为新轨道。

AudioTrackList length 和 VideoTrackList length 属性的获取器必须返回其对象在获取时表示的轨道数量。

支持的属性索引 AudioTrackList 和 VideoTrackList 对象在任何时刻的支持的属性索引是从零到各自对象表示的轨道数量减一的数字（如果表示任何轨道）。如果一个 AudioTrackList 或 VideoTrackList 对象不表示任何轨道，则它没有支持的属性索引。

对于给定索引 index 在 AudioTrackList 或 VideoTrackList 对象 list 中确定索引属性的值，用户代理必须返回表示list 中第index个轨道的 AudioTrack 或 VideoTrack 对象。

AudioTrackList getTrackById(id) 和 VideoTrackList getTrackById(id) 方法必须返回在 AudioTrackList 或 VideoTrackList 对象（分别）中的第一个 AudioTrack 或 VideoTrack 对象（分别），其标识符等于 id 参数的值（如上定义的列表的自然顺序）。当没有轨道与给定参数匹配时，方法必须返回 null。

AudioTrack 和 VideoTrack 对象表示媒体资源的特定轨道。每个轨道可以有一个标识符、类别、标签和语言。这些轨道的各个方面在轨道的生命周期内是永久的；即使从媒体资源的 AudioTrackList 或 VideoTrackList 对象中移除这些轨道，这些方面也不会改变。

此外， AudioTrack 对象可以启用或禁用；这是音轨的启用状态。创建 AudioTrack 时，其启用状态 必须设置为 false（禁用）。资源获取算法可以覆盖此设置。

类似地，每个 VideoTrack 对象的 VideoTrackList 对象中可以选择一个，这就是视频轨道的选择状态。创建 VideoTrack 时，其选择状态必须设置为 false（未选择）。资源获取算法可以覆盖此设置。

AudioTrack id 和 VideoTrack id 属性必须返回轨道的标识符（如果有），否则返回空字符串。如果媒体资源的格式支持媒体片段语法，则返回的特定轨道的标识符必须与使用该标识符作为该轨道在轨道维度中的名称时相同，从而启用该轨道片段。 [INBAND]

例如，在 Ogg 文件中，这将是轨道的 Name 头字段。 [OGGSKELETONHEADERS]

AudioTrack kind 和 VideoTrack kind 属性必须返回轨道的类别（如果有），否则返回空字符串。

轨道的类别是下表第一列中根据第二列和第三列中的定义最适合该轨道的字符串，如由媒体资源中的元数据确定。表中某一行第三列中的单元格说明了该行第一列中给定类别适用的对象；某个类别仅在适用于音轨时才适用于音轨，仅在适用于视频轨道时才适用于视频轨道。类别必须仅返回 AudioTrack 对象，如果它们适用于音频，并且必须仅返回 VideoTrack 对象，如果它们适用于视频。

对于 Ogg 文件，轨道的 Role 头字段提供了相关元数据。对于 DASH 媒体资源， Role 元素传达了信息。对于 WebM，目前只有 FlagDefault 元素映射到一个值。从媒体容器到 HTML 的带内媒体资源轨道的来源有更多细节。 [OGGSKELETONHEADERS] [DASH] [WEBMCG] [INBAND]

`AudioTrack` 的 `kind` 和 `VideoTrack` 的 `kind` 返回值
类别	定义	适用于...	示例
"`alternative`"	主轨道的可能替代，例如歌曲的不同版本（音频），或不同的视角（视频）。	音频和视频。	Ogg: "audio/alternate" 或 "video/alternate"; DASH: "alternate" 没有 "main" 和 "commentary" 角色，并且音频没有 "dub" 角色（忽略其他角色）。
"`captions`"	带有字幕的主视频轨道版本。（用于遗留内容；新内容将使用文本轨道。）	仅视频。	DASH: "caption" 和 "main" 角色一起（忽略其他角色）。
"`descriptions`"	视频轨道的音频描述。	仅音频。	Ogg: "audio/audiodesc".
"`main`"	主要音轨或视频轨道。	音频和视频。	Ogg: "audio/main" 或 "video/main"; WebM: 设置了 "FlagDefault" 元素; DASH: "main" 角色没有 "caption"、"subtitle" 和 "dub" 角色（忽略其他角色）。
"`main-desc`"	混合了音频描述的主要音轨。	仅音频。	MPEG-2 TS 中的 AC3 音频: bsmod=2 和 full_svc=1。
"`sign`"	音轨的手语翻译。	仅视频。	Ogg: "video/sign".
"`subtitles`"	带有字幕的主视频轨道版本。（用于遗留内容；新内容将使用文本轨道。）	仅视频。	DASH: "subtitle" 和 "main" 角色一起（忽略其他角色）。
"`translation`"	主要音轨的翻译版本。	仅音频。	Ogg: "audio/dub". DASH: "dub" 和 "main" 角色一起（忽略其他角色）。
"`commentary`"	对主要音轨或视频轨道的评论，例如导演评论。	音频和视频。	DASH: "commentary" 角色没有 "main" 角色（忽略其他角色）。
""（空字符串）	没有明确的类别，或轨道元数据中给出的类别未被用户代理识别。	音频和视频。

AudioTrack label 和 VideoTrack label 属性必须返回轨道的标签（如果有），否则返回空字符串。 [INBAND]

AudioTrack language 和 VideoTrack language 属性必须返回轨道的 BCP 47 语言标签（如果有），否则返回空字符串。如果用户代理无法将该语言表示为 BCP 47 语言标签（例如，因为媒体资源格式中的语言信息是没有定义解释的自由格式字符串），那么该方法必须返回空字符串，就像轨道没有语言一样。 [INBAND]

AudioTrack enabled 属性，在获取时，必须返回 true 如果轨道当前已启用，否则返回 false。在设置时，如果新值为 true，则必须启用轨道，否则禁用轨道。（如果轨道不再在一个 AudioTrackList 对象中，则轨道的启用或禁用除了更改 AudioTrack 对象上的属性值外没有其他效果。）

每当 AudioTrackList 中已禁用的音轨被启用，以及启用的音轨被禁用时，用户代理必须排队媒体元素任务给定媒体元素以触发一个名为 change 的事件在 AudioTrackList 对象上。

在媒体时间轴上没有特定位置数据的音轨，或在该位置不存在的音轨，必须被解释为在该时间点上是静音的。

VideoTrackList selectedIndex 属性必须返回当前选择的轨道的索引（如果有）。如果 VideoTrackList 对象当前不表示任何轨道，或者如果没有选择任何轨道，则必须返回 −1。

VideoTrack selected 属性，在获取时，必须返回 true 如果轨道当前已选择，否则返回 false。在设置时，如果新值为 true，则必须选择轨道，否则取消选择它。如果轨道在一个 VideoTrackList中，则该列表中的所有其他 VideoTrack 对象必须取消选择。（如果轨道不再在一个 VideoTrackList 对象中，则轨道的选择或取消选择除了更改 VideoTrack 对象上的属性值外没有其他效果。）

每当 VideoTrackList 中先前未选择的轨道被选择，以及当 VideoTrackList 中已选择的轨道未选择且没有新轨道被选中代替时，用户代理必须排队一个媒体元素任务给定媒体元素以触发一个名为 change 的事件在 VideoTrackList 对象上。该任务必须在排队一个元素任务之前排队触发 resize 事件的任务（如果有）。

在媒体时间轴上没有特定位置数据的视频轨道必须在该时间点上被解释为透明黑色，具有与该位置之前的最后一帧相同的尺寸，或者如果位置在该轨道的所有数据之前，则具有该轨道第一帧的尺寸。当前位置根本不存在的轨道必须被视为存在但没有数据。

例如，如果一个视频有一个在播放一个小时后才引入的轨道，并且用户选择该轨道然后返回到开始位置，则用户代理将表现得像该轨道从媒体资源的开始处开始，但只是在一小时内透明。

以下是事件处理程序（及其对应的事件处理程序事件类型），这些处理程序必须由所有实现 AudioTrackList 和 VideoTrackList 接口的对象支持，作为事件处理程序 IDL 属性:

事件处理程序	事件处理程序事件类型
`onchange` AudioTrackList/change_event 支持所有当前引擎。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? TextTrackList/change_event 支持所有当前引擎。 Firefox31+Safari7+Chrome33+ Opera?Edge79+ Edge (旧版)18Internet Explorer不支持 Firefox Android?Safari iOS?Chrome Android?WebView Android4.4+Samsung Internet?Opera Android? VideoTrackList/change_event 支持所有当前引擎。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?	`change`
`onaddtrack` AudioTrackList/addtrack_event 支持所有当前引擎。 Firefox🔰 33+Safari 7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? TextTrackList/addtrack_event 支持所有当前引擎。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer11 Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ VideoTrackList/addtrack_event 支持所有当前引擎。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?	`addtrack`
`onremovetrack` AudioTrackList/removetrack_event 支持所有当前引擎。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? TextTrackList/removetrack_event 支持所有当前引擎。 Firefox31+Safari7+Chrome33+ Opera20+Edge79+ Edge (旧版)18Internet ExplorerNo Firefox Android?Safari iOS?Chrome Android?WebView Android4.4+Samsung Internet?Opera Android20+ VideoTrackList/removetrack_event 支持所有当前引擎。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?	`removetrack`

4.8.11.10.2 以声明方式选择特定的音频和视频轨道

audioTracks 和 videoTracks 属性允许脚本选择应该播放的轨道，但也可以通过在片段中指定特定轨道，以声明方式选择特定轨道，即通过指定URL的媒体资源。片段的格式取决于MIME类型。[RFC2046] [URL]

在这个例子中，一个使用支持媒体片段语法的格式的视频被嵌入，以便启用标记为“Alternative”的替代角度，而不是默认的视频轨道。

<video src="myvideo#track=Alternative"></video>

4.8.11.11 定时文本轨迹

4.8.11.11.1 文本轨迹模型

媒体元素可以有一组相关的文本轨迹，称为媒体元素的文本轨迹列表。文本轨迹按以下顺序排序：

对应于track元素子元素的文本轨迹，在媒体元素的树顺序中。
使用addTextTrack()方法添加的任何文本轨迹，按添加顺序排列，最早的在前。
任何特定于媒体资源的文本轨迹（文本轨迹对应于媒体资源中的数据），按媒体资源的格式规范中定义的顺序排列。

文本轨迹包括：

文本轨迹的类型

这决定了用户代理如何处理轨迹。类型由一个字符串表示。可能的字符串包括：

subtitles
captions
descriptions
chapters
metadata

在对应于文本轨迹的track元素的情况下，轨迹类型可以动态更改。

标签

这是一个人类可读的字符串，用于识别轨迹。

在对应于文本轨迹的track元素的情况下，轨迹的标签可以动态更改。

当文本轨迹标签为空字符串时，用户代理应自动从文本轨迹的其他属性（例如文本轨迹的类型和语言）生成一个适当的标签，以在其用户界面中使用。此自动生成的标签不会在API中公开。

带内元数据轨迹调度类型

这是从媒体资源中提取的一个字符串，专门用于带内元数据轨迹，以便将这些轨迹分派给文档中的不同脚本。

例如，传统电视台的网络直播，配有网页特定的互动功能，可以包含带有广告定位、游戏节目期间的问答游戏数据、体育比赛中的玩家状态、烹饪节目的食谱信息等元数据的文本轨迹。随着每个节目开始和结束，新的轨迹可能会被添加或从流中移除，当每个轨迹被添加时，用户代理可以使用此属性的值将其绑定到专用的脚本模块。

除了带内元数据文本轨迹之外，带内元数据轨迹调度类型为空字符串。如何为不同媒体格式填充此值在暴露特定媒体资源文本轨迹的步骤中进行了描述。

语言

这是一个表示文本轨迹提示语言的字符串（BCP 47语言标签）。[BCP47]

在对应于文本轨迹的track元素的情况下，文本轨迹的语言可以动态更改。

准备状态

以下之一：

未加载: 表示文本轨迹的提示尚未获取。
正在加载: 表示文本轨迹正在加载，目前尚未遇到致命错误。解析器可能仍会向轨迹添加更多提示。
已加载: 表示文本轨迹已加载且没有致命错误。
加载失败: 表示文本轨迹已启用，但用户代理尝试获取它时失败（例如，URL无法解析，网络错误，未知的文本轨迹格式）。一些或所有提示可能丢失，且不会被获取。

文本轨迹的准备状态在轨迹获取过程中动态变化。

模式

以下之一：

禁用: 表示文本轨迹未激活。除了在DOM中暴露轨迹之外，用户代理将忽略文本轨迹。没有提示激活，没有事件触发，用户代理不会尝试获取轨迹的提示。
隐藏: 表示文本轨迹已激活，但用户代理未主动显示提示。如果尚未尝试获取轨迹的提示，用户代理将立即尝试。用户代理维护一个活跃提示的列表，并相应触发事件。
显示: 表示文本轨道是活跃的。如果尚未尝试获取轨道的提示，用户代理将立即进行此尝试。用户代理正在维护一个列表，记录哪些提示是活跃的，并相应地触发事件。此外，对于类型为字幕或标题的文本轨道，提示适当地叠加在视频上；对于类型为描述的文本轨道，用户代理以非视觉方式向用户提供提示；对于类型为章节的文本轨道，用户代理提供一种机制，使用户可以通过选择提示在媒体资源中的任何一点进行导航。

一个或多个提示的列表

一个文本轨迹提示的列表，以及更新文本轨迹渲染的规则。例如，对于WebVTT，更新WebVTT文本轨迹显示的规则。[WEBVTT]

文本轨迹的提示列表可以动态更改，因为文本轨迹尚未加载或仍在加载，或由于DOM操作。

每个文本轨迹都有一个对应的TextTrack对象。

每个媒体元素都有一个待处理文本轨迹列表，该列表必须最初为空，还有一个被解析器阻塞标志，该标志必须最初为假，以及一个是否执行了自动轨迹选择标志，该标志也必须最初为假。

当用户代理需要填充待处理文本轨迹列表时，用户代理必须将元素的待处理文本轨迹列表中添加每个文本轨迹，这些文本轨迹在元素的文本轨迹列表中，其文本轨迹模式不是禁用的，并且其文本轨迹准备状态是加载中。

每当一个track元素的父节点发生变化时，用户代理必须从它所在的任何待处理文本轨迹列表中移除相应的文本轨迹。

每当一个文本轨迹的文本轨迹准备状态变为已加载或加载失败时，用户代理必须从它所在的任何待处理文本轨迹列表中移除它。

当一个媒体元素由HTML 解析器或XML 解析器创建时，用户代理必须将该元素的被解析器阻塞标志设置为真。当一个媒体元素从打开元素栈中弹出时，用户代理必须尊重用户对自动文本轨迹选择的偏好，填充待处理文本轨迹列表，并将元素的被解析器阻塞标志设置为假。

当一个媒体元素的待处理文本轨迹列表为空且元素的被解析器阻塞标志为假时，该媒体元素的文本轨迹被认为是准备好的。

每个媒体元素都有一个待处理文本轨迹更改通知标志，该标志最初未设置。

每当一个文本轨迹，它在一个媒体元素的文本轨迹列表中，其文本轨迹模式发生变化时，用户代理必须对该媒体元素执行以下步骤：

如果媒体元素的待处理文本轨迹更改通知标志被设置，返回。
设置媒体元素的待处理文本轨迹更改通知标志。
队列一个媒体元素任务，使该媒体元素执行以下步骤：
1. 取消设置媒体元素的待处理文本轨迹更改通知标志。
2. 触发一个事件，事件名称为change，该事件发给媒体元素的textTracks属性的TextTrackList对象。
如果媒体元素的显示海报标志未设置，执行时间继续步骤。

本节中列出的任务源是任务的DOM 操作任务源。

一个文本轨迹提示是文本轨迹中的时间敏感数据单元，例如对于字幕和标题，表示在特定时间出现并在另一个时间消失的文本。

每个文本轨迹提示包括：

标识符: 一个任意字符串。
开始时间: 以秒和秒的分数表示的时间，描述提示适用的媒体数据范围的开始。
结束时间: 以秒和秒的分数表示的时间，描述提示适用的媒体数据范围的结束，或者对于一个无限制文本轨迹提示，表示正无穷大。
暂停退出标志: 一个布尔值，指示在达到提示适用的范围结束时是否暂停播放媒体资源。
一些附加格式特定数据: 根据格式的需要，包含提示的实际数据的附加字段。例如，WebVTT 有一个文本轨迹提示书写方向等。[WEBVTT]

一个无限制文本轨迹提示是一个文本轨迹提示，其文本轨迹提示结束时间设置为正无穷大。一个活跃的无限制文本轨迹提示无法通过正常播放过程中当前播放位置的单调增加变为不活动（例如，在一个没有宣布结束时间的实时事件中的章节元数据提示）。

文本轨迹提示开始时间和文本轨迹提示结束时间可以为负值。（虽然当前播放位置永远不能为负值，因此完全在时间零之前的提示不能处于活动状态。）

每个文本轨迹提示都有一个对应的TextTrackCue对象（更具体地说，是一个继承自TextTrackCue的对象——例如，WebVTT提示使用VTTCue接口）。一个文本轨迹提示的内存表示可以通过此TextTrackCue API 动态更改。[WEBVTT]

一个文本轨迹提示与更新文本轨迹渲染的规则相关联，这些规则由特定类型的文本轨迹提示规范定义。这些规则在表示提示的对象通过TextTrack对象的addCue()方法添加到该对象时特别使用。

此外，每个文本轨迹提示有两项动态信息：

活动标志

该标志必须最初未设置。此标志用于确保在提示变为活跃或不活跃时适当地触发事件，并确保正确的提示被渲染。

每当文本轨道提示从其文本轨道的文本轨道提示列表中移除时；每当文本轨道本身从其媒体元素的文本轨道列表中移除时，或其文本轨道模式更改为禁用时；以及每当媒体元素的readyState更改回HAVE_NOTHING时，用户代理必须同步取消设置此标志。当对于在相关事件发生前正在显示的文本轨道中的一个或多个提示以这种方式取消设置标志后，用户代理必须在为所有受影响的提示取消设置标志后，应用这些文本轨道的文本轨道渲染更新规则。例如，对于基于WebVTT的文本轨道，WebVTT文本轨道显示更新规则。[WEBVTT]

显示状态

这作为渲染模型的一部分，用于保持提示的一致位置。它必须最初为空。每当文本轨迹提示活动标志被取消设置时，用户代理必须清空文本轨迹提示显示状态。

文本轨迹提示的排序在媒体元素的文本轨迹中相对彼此进行，这一排序方式如下确定：首先按照文本轨迹对提示进行分组，分组的顺序与其在媒体元素的文本轨迹列表中出现的顺序相同；然后，在每组内，提示必须按照其开始时间进行排序，最早的时间优先；接着，任何具有相同开始时间的提示必须按照其结束时间进行排序，最晚的时间优先；最后，任何具有相同结束时间的提示必须按照其最后添加到各自的文本轨迹提示列表的顺序进行排序，最旧的优先（例如，对于来自WebVTT文件的提示，这最初将是提示在文件中列出的顺序）。[WEBVTT]

4.8.11.11.2 嵌入式文本轨迹的来源

媒体资源特定文本轨迹是一个文本轨迹，对应于在媒体资源中找到的数据。

处理和渲染此类数据的规则由相关规范定义，例如，如果媒体资源是视频，则由视频格式规范定义。一些遗留格式的详细信息可以在从媒体容器中获取嵌入式媒体资源轨迹到HTML中找到。[INBAND]

当媒体资源包含用户代理识别并支持作为文本轨迹的数据时，用户代理将执行暴露媒体资源特定文本轨迹的步骤，如下所示。

将相关数据与新的文本轨迹及其对应的新TextTrack对象关联。该文本轨迹是媒体资源特定文本轨迹。
根据相关规范定义的数据语义设置新的文本轨迹的类型、标签和语言。如果数据中没有标签，则标签必须设置为空字符串。
将文本轨迹提示列表与适用于该格式的文本轨迹渲染更新规则关联。
如果新的文本轨迹的类型是章节或元数据，则根据媒体资源的类型设置文本轨迹嵌入式元数据轨迹分派类型，如下：

如果媒体资源是Ogg文件

文本轨迹嵌入式元数据轨迹分派类型必须设置为Name头字段的值。[OGGSKELETONHEADERS]

如果媒体资源是WebM文件

文本轨迹嵌入式元数据轨迹分派类型必须设置为CodecID元素的值。[WEBMCG]

如果媒体资源是MPEG-2文件

令stream type为文件程序映射部分中描述文本轨迹类型的"stream_type"字段的值，解释为8位无符号整数。令length为相同部分中的"ES_info_length"字段的值，解释为动态图像和相关音频信息的通用编码中定义的整数。令descriptor bytes为"ES_info_length"字段之后的length字节。文本轨迹嵌入式元数据轨迹分派类型必须设置为stream type字节和零个或多个descriptor bytes字节的串联，使用十六进制表示，采用ASCII大写十六进制数字。

如果媒体资源是MPEG-4文件

令第一个stsd盒子、位于第一个stbl盒子、位于第一个minf盒子、位于第一个mdia盒子中的文本轨迹的trak盒子为stsd盒子（如果存在）。如果文件没有stsd盒子，或stsd盒子既没有mett盒子也没有metx盒子，则文本轨迹嵌入式元数据轨迹分派类型必须设置为空字符串。否则，如果stsd盒子有mett盒子，则文本轨迹嵌入式元数据轨迹分派类型必须设置为字符串"mett"、一个U+0020 SPACE字符和第一个mett盒子的第一个mime_format字段的值，如果该字段在该盒子中缺失，则为空字符串。否则，如果stsd盒子没有mett盒子但有metx盒子，则文本轨迹嵌入式元数据轨迹分派类型必须设置为字符串"metx"、一个U+0020 SPACE字符和第一个metx盒子的第一个namespace字段的值，如果该字段在该盒子中缺失，则为空字符串。
用解析出的提示填充新的文本轨迹的提示列表，遵循暴露提示的指南，并根据需要动态更新它。
将新的文本轨迹的准备状态设置为已加载。
将新的文本轨迹的模式设置为与用户的偏好和相关规范要求的数据一致的模式。

例如，如果没有其他激活的字幕，并且这是一个强制字幕轨迹（提供音频轨迹的主要语言的字幕，但仅限于实际使用另一种语言的音频），则可以在此处激活这些字幕。
将新的文本轨迹添加到媒体元素的文本轨迹列表中。
触发事件，事件名称为addtrack，在媒体元素的textTracks属性的TextTrackList对象上，使用TrackEvent，其中track属性初始化为文本轨迹的TextTrack对象。

4.8.11.11.3 外部文本轨迹的来源

当创建一个track元素时，它必须与一个新的文本轨迹（其值设置如下所定义）及其相应的新TextTrack对象关联。

文本轨迹类型由元素的kind属性的状态确定，依据下表；对于第一列中的状态，类型是第二列中给定的字符串：

状态	字符串
Subtitles	`subtitles`
Captions	`captions`
Descriptions	`descriptions`
Chapters metadata	`chapters`
Metadata	`metadata`

文本轨迹标签是元素的轨迹标签。

文本轨迹语言是元素的轨迹语言（如果有的话），否则为空字符串。

随着kind、label和srclang属性的设置、更改或删除，文本轨迹必须相应地更新，如上定义。

对轨迹URL的更改在下面的算法中处理。

文本轨迹准备状态最初是未加载，文本轨迹模式最初是禁用。

文本轨迹提示列表最初为空。解析引用文件时会动态修改它。与列表关联的是适用于该格式的文本轨迹渲染更新规则；对于WebVTT，这是更新WebVTT文本轨迹显示的规则。[WEBVTT]

当track元素的父元素发生变化并且新父元素是媒体元素时，用户代理必须将track元素的相应文本轨迹添加到媒体元素的文本轨迹列表中，然后将媒体元素任务排入队列，给定媒体元素，触发一个事件，事件名为addtrack，在媒体元素的textTracks属性的TextTrackList对象上，使用TrackEvent，其中track属性初始化为文本轨迹的TextTrack对象。

当track元素的父元素发生变化并且旧父元素是媒体元素时，用户代理必须将track元素的相应文本轨迹从媒体元素的文本轨迹列表中移除，然后将媒体元素任务排入队列，给定媒体元素，触发一个事件，事件名为removetrack，在媒体元素的textTracks属性的TextTrackList对象上，使用TrackEvent，其中track属性初始化为文本轨迹的TextTrack对象。

当一个文本轨迹对应一个track元素被添加到媒体元素的文本轨迹列表时，用户代理必须将媒体元素任务排入队列，给定媒体元素，按以下步骤运行媒体元素：

如果元素的被解析器阻塞标志为真，则返回。
如果元素的已执行自动轨迹选择标志为真，则返回。
尊重用户对自动文本轨迹选择的偏好。

当用户代理需要为媒体元素尊重用户对自动文本轨迹选择的偏好时，用户代理必须运行以下步骤：

为subtitles和captions执行自动文本轨迹选择。
为descriptions执行自动文本轨迹选择。
如果在媒体元素的文本轨迹列表中有任何文本轨迹，其文本轨迹类型是chapters或metadata，并且其对应的track元素设置了default属性，其文本轨迹模式设置为禁用，则将所有此类轨迹的文本轨迹模式设置为隐藏。
将元素的已执行自动轨迹选择标志设置为真。

当上述步骤要求为一个或多个文本轨迹类型执行自动文本轨迹选择时，意味着运行以下步骤：

令candidates为媒体元素的文本轨迹列表中，文本轨迹的类型是传递给算法的类型之一（如果有），按文本轨迹列表中给定的顺序。
如果candidates为空，则返回。
如果candidates中的任何文本轨迹的文本轨迹模式设置为显示，则返回。
如果用户根据其文本轨迹类型、文本轨迹语言和文本轨迹标签表达了希望启用candidates中的轨迹的意愿，则将其文本轨迹模式设置为显示。

例如，用户可以设置浏览器偏好，如“我希望在任何可能的情况下启用法语字幕”，或者“如果有标题中包含‘评论’的字幕轨迹，启用它”，或者“如果有音频描述轨迹可用，启用一个，最好是瑞士德语，但如果没有，则启用标准瑞士德语或标准德语”。

否则，如果candidates中有任何文本轨迹，其对应track元素设置了default属性，并且其文本轨迹模式设置为禁用，则将第一个这样的轨迹的文本轨迹模式设置为显示。

当一个文本轨迹对应一个track元素经历以下任何情况时，用户代理必须启动track处理模型，用于该文本轨迹及其track元素：

track元素被创建。
文本轨迹的文本轨迹模式发生变化。
track元素的父元素发生变化，新父元素是媒体元素。

当用户代理启动track处理模型时，为文本轨迹及其track元素，它必须运行以下算法。此算法与事件循环机制密切互动；特别是，它有一个同步部分（在事件循环算法的一部分触发）。该部分的步骤标有⌛。

如果此算法的另一个实例已经在为该文本轨迹及其track元素运行，则返回，让另一个算法处理该元素。
如果文本轨迹的文本轨迹模式未设置为隐藏或显示，则返回。
如果文本轨迹的track元素没有一个媒体元素作为父元素，则返回。
在允许导致这些步骤运行的情况下，并行运行剩余步骤。
顶部：等待稳定状态。同步部分包括以下步骤。（同步部分的步骤标有⌛。）
⌛将文本轨迹准备状态设置为加载中。
⌛令URL为track元素的轨迹URL。
⌛如果track元素的父元素是媒体元素，则令corsAttributeState为父媒体元素的crossorigin内容属性的状态。否则，令corsAttributeState为无CORS。
结束同步部分，并行继续剩余步骤。
如果URL不为空字符串，则：
1. 令request为创建一个潜在的CORS请求的结果，给定URL、“track”和corsAttributeState，并设置同源回退标志。
2. 将request的客户端设置为track元素的节点文档的相关设置对象。
3. 将request的启动器类型设置为“track”。
4. 获取request。
通过获取算法在网络任务源上排队处理数据时，任务必须确定资源的类型。如果资源的类型不是受支持的文本轨迹格式，加载将失败，如下所述。否则，资源的数据必须传递给适当的解析器（例如，WebVTT解析器），并在接收时传递给该解析器的输出使用的文本轨迹提示列表。[WEBVTT]

适当的解析器将在这些网络任务源任务期间逐步更新文本轨迹提示列表，因为每个任务会处理从网络接收的数据。

本规范目前没有说明是否或如何检查文本轨迹的MIME类型，或者是否或如何使用实际文件数据进行文件类型嗅探。实施者在这个问题上的意图有所不同，因此不清楚正确的解决方案是什么。在这里没有任何要求的情况下，HTTP规范严格要求遵循Content-Type头的规定（“Content-Type指定了底层数据的媒体类型。”...“只有在Content-Type字段未给出媒体类型的情况下，接收方可以尝试通过检查其内容和/或标识资源的URI的名称扩展来猜测媒体类型。”）。

如果由于任何原因（网络错误、服务器返回错误代码、CORS失败等）导致获取失败，或者URL为空字符串，则在媒体元素上排队一个元素任务，首先将文本轨迹准备状态更改为加载失败，然后触发一个事件，事件名为error，在track元素上。

如果获取没有失败，但资源的类型不是受支持的文本轨迹格式，或者文件未成功处理（例如，该格式是XML格式，文件包含XML要求检测和报告给应用程序的良好格式错误），则在检测到上述问题的网络任务源上排队的任务，必须将文本轨迹准备状态更改为加载失败，并触发一个事件，事件名为error，在track元素上。

如果获取没有失败，并且文件已成功处理，则在解析数据后，通过网络任务源排队的最后一个任务，必须将文本轨迹准备状态更改为已加载，并触发一个事件，事件名为load，在track元素上。

如果在获取进行时：
- 轨迹URL发生变化，使其不再等于URL，而文本轨迹模式设置为隐藏或显示；或者
- 文本轨迹模式更改为隐藏或显示，而轨迹URL不等于URL
...那么用户代理必须中止获取，丢弃该算法生成的任何待处理任务（特别是不在URL更改后的文本轨迹提示列表中添加任何提示），然后在track元素上排队一个元素任务，首先将文本轨迹准备状态更改为加载失败，然后触发一个事件，事件名为error，在track元素上。
等待，直到文本轨迹准备状态不再设置为加载中。
等待，直到轨迹URL不再等于URL，同时文本轨迹模式设置为隐藏或显示。
跳到标记为顶部的步骤。

每当track元素的src属性被设置、更改或删除时，用户代理必须立即清空该元素的文本轨迹的文本轨迹提示列表。（这也会导致上面的算法停止从以前给定的URL获取的资源中添加提示，如果有的话。）

4.8.11.11.4 在各种格式中暴露提示的指南作为文本轨迹提示

特定格式的文本轨迹提示如何解释，以便由HTML用户代理进行处理，由该格式定义。在缺乏此类规范的情况下，本节提供了一些限制，以便实现可以尝试一致地暴露这些格式。

为了支持文本轨迹模型，每个定时数据单元被转换为一个文本轨迹提示。当格式的特性与文本轨迹提示的方面在本规范中没有定义时，实现必须确保映射与上述文本轨迹提示的方面的定义一致，并符合以下限制：

文本轨迹提示标识符: 如果格式没有明显的类似物，应设置为空字符串。
文本轨迹提示退出时暂停标志: 应设置为false。

4.8.11.11.5 文本轨道 API

TextTrackList

在所有当前引擎中都支持。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

[Exposed=Window]
interface TextTrackList : EventTarget {
  readonly attribute unsigned long length;
  getter TextTrack (unsigned long index);
  TextTrack? getTrackById(DOMString id);

  attribute EventHandler onchange;
  attribute EventHandler onaddtrack;
  attribute EventHandler onremovetrack;
};

media.textTracks.length HTMLMediaElement/textTracks 在所有当前引擎中都支持。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet1.0+Opera Android12.1+: 返回与媒体元素（例如 track 元素）关联的文本轨道的数量。这是媒体元素的文本轨道列表中的文本轨道数量。
media.textTracks[ n ]: 返回表示 n 第文本轨道的 TextTrack 对象，位于媒体元素的文本轨道列表中。
textTrack = media.textTracks.getTrackById(id) TextTrackList/getTrackById 在所有当前引擎中都支持。 Firefox31+Safari8+Chrome33+ Opera?Edge79+ Edge (旧版)18Internet Explorer不支持 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?: 返回具有给定标识符的 TextTrack 对象，如果没有该标识符的轨道，则返回 null。

TextTrackList 对象表示一个动态更新的文本轨道列表，按给定的顺序排列。

textTracks 属性的媒体元素必须返回一个 TextTrackList 对象，表示 TextTrack 对象作为文本轨道在媒体元素的文本轨道列表中，顺序与文本轨道列表中的顺序相同。

TextTrackList/length

在所有当前引擎中都支持。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

length 属性的 TextTrackList 对象必须返回列表中文本轨道的数量，该列表由 TextTrackList 对象表示。

一个 TextTrackList 对象在任何时刻的支持的属性索引是从零到文本轨道数量减一（如果有的话）的数字。如果列表中没有文本轨道，则没有支持的属性索引。

要确定一个索引属性的值在给定索引 index 的情况下，用户代理必须返回在 TextTrackList 对象表示的列表中第 index 个文本轨道。

getTrackById(id) 方法必须返回 TextTrack 对象中第一个其 id IDL 属性返回的值等于 id 参数值的轨道。当没有轨道与给定的参数匹配时，该方法必须返回 null。

TextTrack

在所有当前引擎中支持。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android31+Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

enum TextTrackMode { "disabled",  "hidden",  "showing" };
enum TextTrackKind { "subtitles",  "captions",  "descriptions",  "chapters",  "metadata" };

[Exposed=Window]
interface TextTrack : EventTarget {
  readonly attribute TextTrackKind kind;
  readonly attribute DOMString label;
  readonly attribute DOMString language;

  readonly attribute DOMString id;
  readonly attribute DOMString inBandMetadataTrackDispatchType;

  attribute TextTrackMode mode;

  readonly attribute TextTrackCueList? cues;
  readonly attribute TextTrackCueList? activeCues;

  undefined addCue(TextTrackCue cue);
  undefined removeCue(TextTrackCue cue);

  attribute EventHandler oncuechange;
};

textTrack = media.addTextTrack(kind [, label [, language ] ])

创建并返回一个新的 TextTrack 对象，该对象还会被添加到媒体元素的文本轨道列表中。

textTrack.kind TextTrack/kind 在所有当前引擎中都支持。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回文本轨道类型字符串。

textTrack.label TextTrack/label 在所有当前引擎中都支持。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回文本轨道标签，如果存在，否则返回空字符串（表示可能需要从对象的其他属性生成自定义标签，如果对象暴露给用户）。

textTrack.language TextTrack/language 在所有当前引擎中都支持。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回文本轨道语言字符串。

textTrack.id TextTrack/id 在所有当前引擎中都支持。 Firefox31+Safari8+Chrome33+ Opera?Edge79+ Edge (旧版)18Internet Explorer不支持 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回给定轨道的 ID。

对于带内轨道，这是可以与片段一起使用的 ID（如果格式支持媒体片段语法），并且可以与 getTrackById() 方法一起使用。

对于与 TextTrack 对象对应的 track 元素，这是 track 元素的 ID。

textTrack.inBandMetadataTrackDispatchType TextTrack/inBandMetadataTrackDispatchType Firefox31+Safari8+Chrome不支持 Opera?Edge不支持 Edge (旧版)不支持Internet Explorer不支持 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回文本轨道带内元数据调度类型字符串。

textTrack.mode [ = value ] TextTrack/mode 在所有当前引擎中都支持。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer10+ Firefox Android31+Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回文本轨道模式，表示为以下列表中的一个字符串：

"disabled": 文本轨道禁用模式。
"hidden": 文本轨道隐藏模式。
"showing": 文本轨道显示模式。

可以设置来更改模式。

textTrack.cues TextTrack/cues 在所有当前引擎中都支持。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回文本轨道提示列表，作为 TextTrackCueList 对象。

textTrack.activeCues TextTrack/activeCues 在所有当前引擎中都支持。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer10+ Firefox Android31+Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回一个包含当前活动的文本轨道提示的文本轨道提示列表的 TextTrackCueList 对象。

textTrack.addCue(cue) TextTrack/addCue 在所有当前引擎中都支持。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

将给定提示添加到 textTrack 的文本轨道提示列表中。

textTrack.removeCue(cue) TextTrack/removeCue 在所有当前引擎中都支持。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

从 textTrack 的文本轨道提示列表中删除给定提示。

当媒体元素的 addTextTrack(kind, label, language) 方法被调用时，必须运行以下步骤：

创建一个新的 TextTrack 对象。
创建一个与新对象对应的新文本轨道，并将其文本轨道类型设置为 kind，其文本轨道标签设置为 label，其文本轨道语言设置为 language，其文本轨道就绪状态设置为文本轨道已加载状态，其文本轨道模式设置为文本轨道隐藏模式，其文本轨道提示列表设置为空列表。

最初，文本轨道提示列表与任何更新文本轨道渲染的规则无关。当向其中添加文本轨道提示时，文本轨道提示列表永久设置其规则。
将新文本轨道添加到媒体元素的文本轨道列表中。
排队一个媒体元素任务，给定媒体元素以触发一个事件，该事件名为 addtrack，并在媒体元素的 textTracks 属性的 TextTrackList 对象上，使用 TrackEvent，其 track 属性初始化为新文本轨道的 TextTrack 对象。
返回新的 TextTrack 对象。

kind 属性必须返回文本轨道类型，该文本轨道由 TextTrack 对象表示。

label 属性必须返回文本轨道标签，该文本轨道由 TextTrack 对象表示。

language 属性必须返回文本轨道语言，该文本轨道由 TextTrack 对象表示。

id 属性返回轨道的标识符（如果有的话），否则返回空字符串。对于与 track 元素对应的轨道，轨道的标识符是元素的 id 属性的值（如果有的话）。对于带内轨道，轨道的标识符由媒体资源指定。如果媒体资源是支持媒体片段语法的格式，返回的特定轨道的标识符必须与作为此类片段轨道维度的轨道名称时会启用该轨道的标识符相同。

inBandMetadataTrackDispatchType 属性必须返回文本轨道带内元数据调度类型，该文本轨道由 TextTrack 对象表示。

mode 属性在获取时，必须返回与文本轨道模式相对应的字符串，该文本轨道由 TextTrack 对象表示，如下列表所定义：

"disabled": 文本轨道禁用模式。
"hidden": 文本轨道隐藏模式。
"showing": 文本轨道显示模式。

在设置时，如果新值不等于属性当前返回的值，则必须按如下步骤处理新值：

如果新值是 "disabled": 将文本轨道模式设置为文本轨道，由 TextTrack 对象表示，并设置为文本轨道禁用模式。
如果新值是 "hidden": 将文本轨道模式设置为文本轨道，由 TextTrack 对象表示，并设置为文本轨道隐藏模式。
如果新值是 "showing": 将文本轨道模式设置为文本轨道，由 TextTrack 对象表示，并设置为文本轨道显示模式。

如果文本轨道模式是文本轨道，由 TextTrack 对象表示，不是文本轨道禁用模式，则 cues 属性必须返回一个实时的 TextTrackCueList 对象，该对象表示文本轨道提示列表的子集，列表中的文本轨道由 TextTrack 对象表示，其结束时间发生在脚本开始时的最早可能位置或之后，按文本轨道提示顺序排列。否则，必须返回 null。对于每个 TextTrack 对象，当返回一个对象时，每次都必须返回相同的 TextTrackCueList 对象。

脚本开始时的最早可能位置是上次事件循环达到步骤 1 时的最早可能位置。

如果文本轨道模式是文本轨道，由 TextTrack 对象表示，不是文本轨道禁用模式，则 activeCues 属性必须返回一个实时的 TextTrackCueList 对象，该对象表示文本轨道提示列表的子集，列表中的文本轨道由 TextTrack 对象表示，其脚本开始时的活动标志已设置，按文本轨道提示顺序排列。否则，必须返回 null。对于每个 TextTrack 对象，当返回一个对象时，每次都必须返回相同的 TextTrackCueList 对象。

如果文本轨道提示的脚本开始时活动标志已设置，则表示其文本轨道提示活动标志在上次事件循环达到步骤 1 时已设置。

addCue(cue) 方法在 TextTrack 对象中被调用时，必须运行以下步骤：

如果文本轨道提示列表还没有任何关联的更新文本轨道渲染的规则，则将文本轨道提示列表与适用于 cue 的更新文本轨道渲染的规则相关联。
如果文本轨道提示列表关联的更新文本轨道渲染的规则与适用于 cue 的更新文本轨道渲染的规则不相同，则抛出 "InvalidStateError" DOMException。
如果给定的 cue 在文本轨道提示列表中，则将 cue 从该文本轨道提示列表中移除。
将 cue 添加到 TextTrack 对象的文本轨道的文本轨道提示列表中。

removeCue(cue) 方法在 TextTrack 对象中被调用时，必须运行以下步骤：

如果给定的 cue 不在 TextTrack 对象的文本轨道的文本轨道提示列表中，则抛出 "NotFoundError" DOMException。
从 TextTrack 对象的文本轨道的文本轨道提示列表中移除 cue。

在这个例子中，使用一个 audio 元素来播放包含多个音效的音频文件中的特定音效。使用提示暂停音频，以便音频在剪辑结束时正好结束，即使浏览器正在运行一些脚本。如果页面依赖于脚本来暂停音频，那么如果浏览器无法在指定的时间运行脚本，则可能会听到下一个剪辑的开始部分。

var sfx = new Audio('sfx.wav');
var sounds = sfx.addTextTrack('metadata');

// add sounds we care about
function addFX(start, end, name) {
  var cue = new VTTCue(start, end, '');
  cue.id = name;
  cue.pauseOnExit = true;
  sounds.addCue(cue);
}
addFX(12.783, 13.612, 'dog bark');
addFX(13.612, 15.091, 'kitten mew');

function playSound(id) {
  sfx.currentTime = sounds.getCueById(id).startTime;
  sfx.play();
}

// play a bark as soon as we can
sfx.oncanplaythrough = function () {
  playSound('dog bark');
}
// meow when the user tries to leave,
// and have the browser ask them to stay
window.onbeforeunload = function (e) {
  playSound('kitten mew');
  e.preventDefault();
}

TextTrackCueList

Support in all current engines.

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

[Exposed=Window]
interface TextTrackCueList {
  readonly attribute unsigned long length;
  getter TextTrackCue (unsigned long index);
  TextTrackCue? getCueById(DOMString id);
};

cuelist.length

返回列表中提示的数量。

cuelist[index]

返回列表中索引为 index 的文本轨提示。这些提示按文本轨提示顺序排序。

cuelist.getCueById(id)

返回第一个具有id的文本轨道提示（按文本轨道提示顺序）。

如果没有提示具有给定的标识符或参数为空字符串，则返回null。

A TextTrackCueList 对象表示按给定顺序动态更新的文本轨提示列表。

TextTrackCueList/length

所有当前引擎都支持。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

The length 属性必须返回由 TextTrackCueList 对象表示的列表中的提示数量。

The supported property indices of a TextTrackCueList object at any instant are the numbers from zero to the number of 提示 in the list represented by the TextTrackCueList object minus one, if any. If there are no 提示 in the list, there are no supported property indices.

To determine the value of an indexed property for a given index index, the user agent must return the indexth 文本轨提示 in the list represented by the TextTrackCueList object.

TextTrackCueList/getCueById

所有当前引擎都支持。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

The getCueById(id) 方法，当传入的参数不是空字符串时，必须返回列表中第一个标识符为 id 的文本轨提示，如果有的话，否则返回 null。如果参数为空字符串，则该方法必须返回 null。

TextTrackCue

所有当前引擎都支持。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

[Exposed=Window]
interface TextTrackCue : EventTarget {
  readonly attribute TextTrack? track;

  attribute DOMString id;
  attribute double startTime;
  attribute unrestricted double endTime;
  attribute boolean pauseOnExit;

  attribute EventHandler onenter;
  attribute EventHandler onexit;
};

cue.track

返回该文本轨道提示所属的TextTrack对象（如果有），否则返回null。

cue.id [ = value ]

返回文本轨道提示标识符。

可设置。

cue.startTime [ = value ]

返回文本轨道提示开始时间，单位为秒。

可设置。

cue.endTime [ = value ]

返回文本轨道提示结束时间，单位为秒。

对于无界文本轨道提示返回正无穷大。

可设置。

cue.pauseOnExit [ = value ]

如果文本轨道提示退出时暂停标志被设置，则返回true，否则返回false。

可设置。

TextTrackCue/track

所有当前引擎都支持。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

获取时，track属性必须返回TextTrack对象，该对象表示TextTrackCue对象表示的文本轨道提示在其提示列表中找到的文本轨道。如果没有，则返回null。

TextTrackCue/id

所有当前引擎都支持。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

获取时，id属性必须返回TextTrackCue对象表示的文本轨道提示的文本轨道提示标识符。设置时，必须将文本轨道提示标识符设置为新值。

TextTrackCue/startTime

所有当前引擎都支持。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

获取时，startTime属性必须返回TextTrackCue对象表示的文本轨道提示的文本轨道提示开始时间，单位为秒。设置时，必须将文本轨道提示开始时间设置为新值，解释为秒；然后，如果TextTrackCue对象的文本轨道提示在其文本轨道的提示列表中，并且该文本轨道在媒体元素的文本轨道列表中，并且媒体元素的显示海报标志未设置，则为该媒体元素运行时间推进步骤。

TextTrackCue/endTime

所有当前引擎都支持。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

获取时，endTime属性必须返回TextTrackCue对象表示的文本轨道提示的文本轨道提示结束时间，单位为秒或正无穷大。设置时，如果新值是负无穷大或NaN（非数值），则抛出TypeError异常。否则，必须将文本轨道提示结束时间设置为新值。然后，如果TextTrackCue对象的文本轨道提示在其文本轨道的提示列表中，并且该文本轨道在媒体元素的文本轨道列表中，并且媒体元素的显示海报标志未设置，则为该媒体元素运行时间推进步骤。

TextTrackCue/pauseOnExit

所有当前引擎都支持。

Firefox31+Safari6+Chrome23+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

获取时，pauseOnExit属性必须返回true，如果TextTrackCue对象表示的文本轨道提示的文本轨道提示退出时暂停标志已设置；否则返回false。设置时，如果新值为true，则必须设置文本轨道提示退出时暂停标志；否则必须取消设置。

4.8.11.11.6 文本轨道API对象的事件处理程序

以下是必须由所有实现TextTrackList接口的对象支持的事件处理程序及其相应的事件处理程序事件类型，作为事件处理程序IDL属性支持：

事件处理程序	事件处理程序事件类型
`onchange`	`change`
`onaddtrack`	`addtrack`
`onremovetrack`	`removetrack`

以下是必须由所有实现TextTrack接口的对象支持的事件处理程序及其相应的事件处理程序事件类型，作为事件处理程序IDL属性支持：

事件处理程序	事件处理程序事件类型
`oncuechange` TextTrack/cuechange_event 所有当前引擎都支持。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+	`cuechange`

以下是必须由所有实现TextTrackCue接口的对象支持的事件处理程序及其相应的事件处理程序事件类型，作为事件处理程序IDL属性支持：

事件处理程序	事件处理程序事件类型
`onenter` TextTrackCue/enter_event 所有当前引擎都支持。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+	`enter`
`onexit` TextTrackCue/exit_event 所有当前引擎都支持。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+	`exit`

4.8.11.11.7 元数据文本轨道的最佳实践

本节为非规范性内容。

文本轨道可以用于存储与媒体数据相关的数据，用于交互或增强视图。

例如，显示体育直播的页面可以包含当前比分的信息。假设一个机器人比赛正在直播，图像可以覆盖分数，如下所示：

为了使得比分显示在用户任意快进视频时都能正确渲染，元数据文本轨道提示需要根据比分的适当长度设置。例如，在上面的框架中，可能会有一个持续整个比赛时间的提示，给出比赛编号，一个提示持续到蓝方联盟的分数变化，一个提示持续到红方联盟的分数变化。如果视频只是现场直播流，右下角的时间可能会根据当前视频时间自动派生，而不是基于提示。然而，如果视频只是精彩片段，那么这些时间也可能会在提示中给出。

以下显示了在WebVTT文件中可能会有的片段：

WEBVTT

...

05:10:00.000 --> 05:12:15.000
matchtype:qual
matchnumber:37

...

05:11:02.251 --> 05:11:17.198
red:78

05:11:03.672 --> 05:11:54.198
blue:66

05:11:17.198 --> 05:11:25.912
red:80

05:11:25.912 --> 05:11:26.522
red:83

05:11:26.522 --> 05:11:26.982
red:86

05:11:26.982 --> 05:11:27.499
red:89

...

关键在于注意信息是在适用事件的时间长度内给出的提示中。如果比分是以零长度（或非常短的，几乎零长度）提示的方式给出的，例如在05:11:17.198说“red+2”，在05:11:25.912说“red+3”，等，则会出现问题：首先，寻求实现变得更加困难，因为脚本必须遍历整个提示列表以确保没有错过通知；此外，如果提示很短，脚本可能永远不会看到它们处于活动状态，除非它专门监听它们。

在这种方式使用提示时，鼓励作者使用cuechange事件来更新当前注释。（特别是，使用timeupdate事件会较不适当，因为它会在提示未更改时仍需工作，更重要的是，会在元数据提示变为活动状态和显示更新之间引入更高的延迟，因为timeupdate事件是有速率限制的。）

4.8.11.12 通过URL识别轨道类型

需要使用URL来识别AudioTrack或VideoTrack的kind或kindIDL属性的其他规范或格式，或者识别文本轨道类型，必须使用about:html-kindURL。

4.8.11.13 用户界面

controls属性是一个布尔属性。如果存在，则表示作者没有提供脚本控制器，希望用户代理提供自己的一套控制。

如果存在该属性，或者该脚本已禁用的媒体元素，则用户代理应当向用户展示一个用户界面。这个用户界面应当包括开始播放、暂停播放、跳转到内容中任意位置（如果内容支持任意跳转）、更改音量、更改隐藏字幕或嵌入手语轨道的显示、选择不同音轨或打开音频描述、以及以更适合用户的方式显示媒体内容（例如全屏视频或在独立的可调整大小的窗口中）。其他控制也可以提供。

即使没有该属性，用户代理也可以提供控制来影响媒体资源的播放（例如播放、暂停、跳转、轨道选择和音量控制），但这些功能不应干扰页面的正常渲染。例如，这些功能可以在媒体元素的上下文菜单、平台媒体键或遥控器中提供。用户代理可以通过如上所述向用户展示一个用户界面来实现这一点（就像存在controls属性一样）。

如果用户代理通过在媒体元素上显示控件来向用户展示用户界面，则用户代理应当在用户与此界面交互时抑制任何用户交互事件。（例如，如果用户点击视频的播放控件，不会同时向页面上的元素触发mousedown事件等）。

如果可能（特别是用于开始、停止、暂停和继续播放、跳转、更改播放速率、快进或倒退、列出、启用和禁用文本轨道、以及静音或更改音量），用户代理暴露的用户界面功能必须根据上述DOM API实现，以确保例如所有相同的事件触发。

诸如快进或倒退的功能必须仅通过更改playbackRate属性（而不是defaultPlaybackRate属性）来实现。

跳转必须根据跳转到媒体元素的媒体时间轴中的请求位置来实现。对于跳转到任意位置会很慢的媒体资源，用户代理应当在响应用户操作近似位置界面（如跳转条）时使用approximate-for-speed标志。

HTMLMediaElement/controls

所有当前引擎支持。

Firefox3.5+Safari3.1+Chrome3+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

controlsIDL属性必须反映同名的内容属性。

media.volume [ = value ] HTMLMediaElement/volume 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS🔰3+Chrome Android?WebView Android 37+Samsung Internet?Opera Android12.1+

返回当前播放音量，范围为0.0到1.0，其中0.0是最安静的，1.0是最响亮的。

可以设置以更改音量。

如果新值不在0.0到1.0的范围内，则抛出"IndexSizeError"DOMException。

media.muted [ = value ] HTMLMediaElement/muted 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

如果音频被静音，返回true，覆盖volume属性；如果volume属性被尊重，返回false。

可以设置，以更改音频是否被静音。

媒体元素具有一个播放音量，范围为0.0（静音）到1.0（最响亮）。最初，音量应为1.0，但用户代理可以在每个站点或其他情况下记住上次设置的值，因此音量可能从其他值开始。

volumeIDL属性必须返回播放音量的任何音频部分的媒体元素。在设置时，如果新值在0.0到1.0范围内（包括），则媒体元素的播放音量必须设置为新值。如果新值不在0.0到1.0范围内（包括），则在设置时，必须抛出"IndexSizeError"DOMException。

媒体元素也可以静音。如果有任何东西将元素静音，则它是静音的。（例如，当播放方向是向后时，元素被静音。）

mutedIDL属性必须返回最后设置的值。当创建媒体元素时，如果元素指定了一个muted内容属性，则mutedIDL属性应设置为true；否则，用户代理可以将值设置为用户的首选值（例如记住上次设置的值）。当mutedIDL属性设置为true时，媒体元素必须静音。

每当volume和mutedIDL属性返回的值之一发生变化时，用户代理必须队列一个媒体元素任务给定媒体元素以触发一个事件，命名为volumechange在媒体元素上。然后，如果媒体元素不允许播放，用户代理必须为媒体元素运行内部暂停步骤。

用户代理有一个关联的音量锁定（布尔值）。其值是实现定义的，决定是否播放音量生效。

元素的有效媒体音量确定如下：

如果用户已指示用户代理覆盖元素的音量，则返回用户所需的音量。
如果用户代理的音量锁定为true，则返回系统音量。
如果元素的音频输出被静音，则返回零。
设volume为播放音量的媒体元素的音频部分，范围为0.0（静音）到1.0（最响亮）。
返回volume，相对于0.0到1.0的范围解释，0.0为静音，1.0为最响亮的设置，中间的值增加响度。范围不必是线性的。最响亮的设置可以低于系统的最大可能设置；例如用户可以设置最大音量。

muted内容属性在媒体元素上是一个布尔属性，控制媒体资源的音频输出的默认状态，可能会覆盖用户偏好。

HTMLMediaElement/defaultMuted

所有当前引擎支持。

Firefox11+Safari6+Chrome15+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer不支持

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

defaultMutedIDL属性必须反映muted内容属性。

此属性没有动态效果（它只控制元素的默认状态）。

这个视频（广告）会自动播放，但为了避免打扰用户，它在没有声音的情况下播放，并允许用户打开声音。如果没有用户交互，用户代理可以暂停视频。

<video src="adverts.cgi?kind=video" controls autoplay loop muted></video>

4.8.11.14 时间范围

TimeRanges

所有当前引擎支持。

Firefox4+Safari3.1+Chrome6+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

实现TimeRanges接口的对象表示一系列时间范围（期间）。

[Exposed=Window]
interface TimeRanges {
  readonly attribute unsigned long length;
  double start(unsigned long index);
  double end(unsigned long index);
};

media.length TimeRanges/length 所有当前引擎支持。 Firefox4+Safari3.1+Chrome6+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

返回对象中的范围数。

time = media.start(index) TimeRanges/start 所有当前引擎支持。 Firefox4+Safari3.1+Chrome6+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

返回给定索引的范围的开始时间。

如果索引超出范围，则抛出"IndexSizeError" DOMException。

time = media.end(index) TimeRanges/end 所有当前引擎支持。 Firefox4+Safari3.1+Chrome6+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

返回给定索引的范围的结束时间。

如果索引超出范围，则抛出"IndexSizeError" DOMException。

lengthIDL属性必须返回对象所表示的范围数。

start(index)方法必须返回对象所表示的第index个范围的开始位置，以该对象覆盖的时间轴开始测量的秒数。

end(index)方法必须返回对象所表示的第index个范围的结束位置，以该对象覆盖的时间轴开始测量的秒数。

如果以大于或等于对象表示的范围数的index参数调用这些方法，则必须抛出"IndexSizeError" DOMException。

当一个TimeRanges对象被称为标准化TimeRanges对象时，它所表示的范围必须遵守以下标准：

一个范围的开始必须大于所有较早范围的结束。
一个范围的开始必须小于或等于同一范围的结束。

换句话说，此类对象中的范围是有序的，不重叠且不接触（相邻范围折叠成一个更大的范围）。范围可以是空的（仅引用时间上的一个时刻），例如，在用户代理丢弃整个媒体资源的情况下，指示当前仅缓冲一个帧，当媒体元素暂停时。

一个TimeRanges对象中的范围必须是包含的。

因此，一个范围的结束等于后续相邻（接触但不重叠）范围的开始。同样，覆盖整个以零为锚点的时间轴的范围的开始将等于零，结束将等于时间轴的持续时间。

由媒体元素的buffered， seekable和 playedIDL属性返回的对象使用的时间轴必须是该元素的媒体时间轴。

4.8.11.15 `TrackEvent`接口

TrackEvent

所有当前引擎支持。

Firefox27+Safari6+Chrome23+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer11

Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

[Exposed=Window]
interface TrackEvent : Event {
  constructor(DOMString type, optional TrackEventInit eventInitDict = {});

  readonly attribute (VideoTrack or AudioTrack or TextTrack)? track;
};

dictionary TrackEventInit : EventInit {
  (VideoTrack or AudioTrack or TextTrack)? track = null;
};

event.track TrackEvent/track 所有当前引擎支持。 Firefox27+Safari6+Chrome23+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer11 Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+: 返回事件相关的轨道对象(TextTrack， AudioTrack，或 VideoTrack)。

track属性必须返回它初始化时的值。它代表事件的上下文信息。

4.8.11.16 事件摘要

本节为非规范性内容。

在媒体元素上触发以下事件，作为上述处理模型的一部分：

事件名称	接口	触发时机...	前提条件
`loadstart` HTMLMediaElement/loadstart_event 所有当前引擎支持。 Firefox6+Safari4+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+	`Event`	用户代理开始查找媒体数据，作为资源选择算法的一部分。	`networkState`等于`NETWORK_LOADING`
`progress` HTMLMediaElement/progress_event 所有当前引擎支持。 Firefox6+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+	`Event`	用户代理正在获取媒体数据。	`networkState`等于`NETWORK_LOADING`
`suspend` HTMLMediaElement/suspend_event 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+	`Event`	用户代理有意暂停当前获取媒体数据。	`networkState`等于`NETWORK_IDLE`
`abort` HTMLMediaElement/abort_event 所有当前引擎支持。 Firefox9+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+	`Event`	用户代理在媒体数据完全下载之前停止获取，但不是由于错误。	`error`是一个代码为`MEDIA_ERR_ABORTED`的对象。`networkState`等于`NETWORK_EMPTY`或`NETWORK_IDLE`，取决于何时中止下载。
`error` HTMLMediaElement/error_event 所有当前引擎支持。 Firefox6+Safari3.1+Chrome3+ Opera11.6+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12+	`Event`	在获取媒体数据时发生错误或资源类型不支持媒体格式。	`error`是一个代码为`MEDIA_ERR_NETWORK`或更高的对象。`networkState`等于`NETWORK_EMPTY`或`NETWORK_IDLE`，取决于何时中止下载。
`emptied` HTMLMediaElement/emptied_event 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+	`Event`	网络状态先前不为`NETWORK_EMPTY`的媒体元素刚刚切换到该状态（要么是加载期间发生了致命错误即将报告，要么是在资源选择算法已在运行时调用了`load()`方法）。	`networkState`为`NETWORK_EMPTY`；所有IDL属性都在其初始状态。
`stalled` HTMLMediaElement/stalled_event 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+	`Event`	用户代理尝试获取媒体数据，但数据意外未到达。	`networkState`为`NETWORK_LOADING`。
`loadedmetadata` HTMLMediaElement/loadedmetadata_event 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+	`Event`	用户代理刚刚确定了媒体资源的持续时间和维度，并且文本轨道已准备好。	`readyState`首次等于或大于`HAVE_METADATA`。
`loadeddata` HTMLMediaElement/loadeddata_event 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+	`Event`	用户代理可以在当前播放位置首次渲染媒体数据。	`readyState`首次增加到`HAVE_CURRENT_DATA`或更高。
`canplay` HTMLMediaElement/canplay_event 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+	`Event`	用户代理可以恢复播放媒体数据，但估计如果现在开始播放，则无法在不需进一步缓冲内容的情况下以当前播放速率渲染媒体资源直至结束。	`readyState`新增加到`HAVE_FUTURE_DATA`或更高。
`canplaythrough` HTMLMediaElement/canplaythrough_event 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+	`Event`	用户代理估计如果现在开始播放，媒体资源可以以当前播放速率渲染到结束而不需进一步缓冲。	`readyState`新等于`HAVE_ENOUGH_DATA`。
`playing` HTMLMediaElement/playing_event 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+	`Event`	播放准备开始，在暂停或因缺少媒体数据而延迟后。	`readyState`新大于或等于`HAVE_FUTURE_DATA`，且`paused`为false，或`paused`新为false且`readyState`大于或等于`HAVE_FUTURE_DATA`。即使此事件触发，元素也可能仍未可能正在播放，例如，如果元素是因用户互动暂停或因带内内容暂停。
`waiting` HTMLMediaElement/waiting_event 所有当前引擎支持。 Firefox6+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+	`Event`	播放已停止，因为下一帧不可用，但用户代理预期该帧将适时可用。	`readyState`小于或等于`HAVE_CURRENT_DATA`，且`paused`为false。`seeking`为true，或当前播放位置不包含在`buffered`中的任何范围内。播放可能由于其他原因停止而`paused`不为false，但这些原因不会触发此事件（当这些情况解决时，也不会触发单独的`playing`事件）：例如，播放已结束，或播放因错误停止，或元素已因用户互动暂停或因带内内容暂停。
`seeking` HTMLMediaElement/seeking_event 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android? Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+	`Event`	`seeking`IDL属性已更改为true，且用户代理已开始寻找新位置。
`seeked` HTMLMediaElement/seeked_event 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+	`Event`	`seeking`IDL属性已更改为false，当前播放位置已更改。
`ended` HTMLMediaElement/ended_event 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+	`Event`	播放已停止，因为到达媒体资源的末端。	`currentTime`等于媒体资源的末端；`ended`为true。
`durationchange` HTMLMediaElement/durationchange_event 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+	`Event`	`duration`属性刚刚更新。
`timeupdate` HTMLMediaElement/timeupdate_event 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+	`Event`	当前播放位置在正常播放过程中或以特别有趣的方式（例如不连续地）发生了变化。
`play` HTMLMediaElement/play_event 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+	`Event`	元素不再暂停。在`play()`方法返回后或`autoplay`属性导致播放开始时触发。	`paused`新为false。
`pause` HTMLMediaElement/pause_event 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+	`Event`	元素已暂停。在`pause()`方法返回后触发。	`paused`新为true。
`ratechange` HTMLMediaElement/ratechange_event 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+ Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+	`Event`	`defaultPlaybackRate`或`playbackRate`属性刚刚更新。
`resize`	`Event`	`videoWidth`和`videoHeight`属性之一或两者刚刚更新。	媒体元素是`video`元素；`readyState`不为`HAVE_NOTHING`
`volumechange` HTMLMediaElement/volumechange_event 所有当前引擎支持。 Firefox6+Safari3.1+Chrome3+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+	`Event`	`volume`属性或`muted`属性已更改。在相关属性的setter返回后触发。

以下事件会在source元素上触发：

事件名称	接口	触发时机
`error`	`Event`	在获取媒体数据时发生错误或资源类型不是支持的媒体格式。

以下事件会在AudioTrackList、VideoTrackList和TextTrackList对象上触发：

事件名称	接口	触发时机
`change` AudioTrackList/change_event 所有当前引擎支持。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)NoInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? TextTrackList/change_event 所有当前引擎支持。 Firefox31+Safari7+Chrome33+ Opera?Edge79+ Edge (旧版)18Internet ExplorerNo Firefox Android?Safari iOS?Chrome Android?WebView Android4.4+Samsung Internet?Opera Android? VideoTrackList/change_event 所有当前引擎支持。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)NoInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?	`Event`	一个或多个轨道在轨道列表中已启用或禁用。
`addtrack` AudioTrackList/addtrack_event 所有当前引擎支持。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)NoInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? TextTrackList/addtrack_event 所有当前引擎支持。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer11 Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android? VideoTrackList/addtrack_event 所有当前引擎支持。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)NoInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?	`TrackEvent`	轨道已添加到轨道列表中。
`removetrack` AudioTrackList/removetrack_event 所有当前引擎支持。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)NoInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? TextTrackList/removetrack_event 所有当前引擎支持。 Firefox31+Safari7+Chrome33+ Opera20+Edge79+ Edge (旧版)18Internet ExplorerNo Firefox Android?Safari iOS?Chrome Android?WebView Android4.4+Samsung Internet?Opera Android? VideoTrackList/removetrack_event 所有当前引擎支持。 Firefox🔰 33+Safari7+Chrome🔰 37+ Opera?Edge🔰 79+ Edge (旧版)NoInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?	`TrackEvent`	轨道已从轨道列表中移除。

以下事件在TextTrack对象和track元素上触发：

事件名称	接口	触发时机
`cuechange` HTMLTrackElement/cuechange_event 所有当前引擎支持。 Firefox68+Safari10+Chrome32+ Opera19+Edge79+ Edge (旧版)14+Internet ExplorerNo Firefox Android?Safari iOS?Chrome Android?WebView Android4.4.3+Samsung Internet?Opera Android19+ TextTrack/cuechange_event 所有当前引擎支持。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+	`Event`	轨道中的一个或多个提示已变为活动或停止活动。

以下事件在track元素上触发：

事件名称	接口	触发时机
`error`	`Event`	获取轨道数据时发生错误或资源类型不是受支持的文本轨道格式。
`load`	`Event`	轨道数据已被获取并成功处理。

以下事件在TextTrackCue对象上触发：

事件名称	接口	触发时机
`enter` TextTrackCue/enter_event 所有当前引擎支持。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+	`Event`	提示已变为活动。
`exit` TextTrackCue/exit_event 所有当前引擎支持。 Firefox31+Safari6+Chrome23+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+	`Event`	提示已停止活动。

4.8.11.17 安全和隐私考量

video和audio元素的主要安全和隐私影响来自跨源嵌入媒体的能力。威胁可以从两个方向流动：从恶意内容到受害页面，以及从恶意页面到受害内容。

如果受害页面嵌入恶意内容，威胁在于内容可能包含脚本代码，试图与嵌入内容的Document交互。为避免这种情况，用户代理必须确保内容无法访问嵌入页面。在使用DOM概念的媒体内容的情况下，嵌入的内容必须被视为在其自己无关的顶级可遍历中。

例如，如果在video元素中嵌入一个SVG动画，用户代理不会给予它访问外部页面DOM的权限。从SVG资源中的脚本视角来看，SVG文件将显得处于一个没有父级的单独顶级可遍历中。

如果恶意页面嵌入受害内容，威胁在于嵌入页面可能会从内容中获取其本不会访问的信息。API确实暴露了一些信息：媒体的存在、其类型、其持续时间、其大小及其主机的性能特征。这些信息已经可能带来问题，但实际上可以通过img元素获取到差不多的信息，因此被认为是可以接受的。

然而，如果用户代理进一步暴露内容中的元数据，如字幕，则可能获得显著更敏感的信息。因此，只有在视频资源使用CORS时才暴露这些信息。crossorigin属性允许作者启用CORS。[FETCH]

没有这个限制，攻击者可能会欺骗在企业网络内运行的用户访问一个试图从企业内联网泄露位置加载视频的网站。如果这样的影片包含新产品的机密计划，那么能够读取字幕将造成严重的机密泄露。

4.8.11.18 使用媒体元素的作者的最佳实践

本节为非规范性内容。

在小型设备（如机顶盒或手机）上播放音视频资源通常受到设备硬件资源有限的限制。例如，一个设备可能只支持同时播放三个视频。因此，当媒体元素media elements播放完毕时，通过非常谨慎地移除对该元素的所有引用并允许其被垃圾回收，或者更好的方法是将元素的src属性设置为空字符串，来释放资源。如果设置了srcObject，则将srcObject设置为null。

同样地，当播放速率不完全是1.0时，硬件、软件或格式限制可能会导致视频帧丢失和音频断断续续或静音。

4.8.11.19 实现媒体元素的最佳实践

本节为非规范性内容。

实现media element API的各个方面的准确程度被认为是实现质量问题。

例如，在实现buffered属性时，报告已缓冲范围的精确程度取决于用户代理检查数据的仔细程度。由于API以时间报告范围，但数据是以字节流获取的，因此接收可变比特率流的用户代理可能只能通过实际解码所有数据来确定精确时间。然而，用户代理不需要这样做；他们可以返回估计值（例如基于到目前为止看到的平均比特率），这些估计值会随着更多信息的出现而进行修正。

作为一般规则，用户代理应保守而非乐观。例如，报告所有内容都已缓冲但实际上并没有缓冲完全是有害的。

另一个实现质量问题是当编解码器仅设计用于前向播放（例如关键帧很少且间隔很远，并且中间帧仅具有前一帧的增量）时，反向播放视频。用户代理可能会表现不佳，例如只显示关键帧；然而，更好的实现会做更多的工作，从而表现得更好，例如实际前向解码视频部分，存储完整帧，然后反向播放这些帧。

同样，实现可以随时丢弃缓冲数据（没有要求用户代理在媒体元素的生命周期内保留所有获取的媒体数据），这也是实现质量问题：有足够资源的用户代理被鼓励保留所有数据，因为这可以提供更好的用户体验。例如，如果用户在观看直播，用户代理可以只允许用户观看直播视频；然而，更好的用户代理会缓冲所有内容，并允许用户浏览早期材料，暂停，前后播放等。

当一个media element暂停时被从文档中移除并且在事件循环到达步骤1之前未重新插入，实现资源受限的用户代理被鼓励利用这个机会释放所有由media element使用的硬件资源（如视频平面、网络资源和数据缓冲区）。（用户代理仍需跟踪播放位置等，以防以后重新开始播放。）

4.8.12 `map` 元素

Element/map

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorer支持

Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLMapElement

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

在预期短语内容的地方。

在 text/html 中省略标签:

两者标签都不可省略。

内容属性:

全局属性

name — 用于从 usemap 属性引用图像地图的名称

[Exposed=Window]
interface HTMLMapElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString name;
  [SameObject] readonly attribute HTMLCollection areas;
};

map 元素，与 img 元素和任何 area 元素后代一起使用，定义一个图像地图。该元素表示其子元素。

name 属性为地图提供了一个名称，以便可以引用。该属性必须存在，并且必须具有一个没有 ASCII 空白字符的非空值。name 属性的值不得等于同一树中的其他 map 元素的 name 属性的值。如果还指定了 id 属性，则两个属性的值必须相同。

map.areas: 返回一个根植于 map 元素的 HTMLCollection，其过滤器仅匹配 area 元素。

areas 属性必须返回一个根植于 map 元素的 HTMLCollection，其过滤器仅匹配 area 元素。

IDL 属性 name 必须反映同名的内容属性。

图像地图可以与页面上的其他内容一起定义，以简化维护。这个示例是一个页面，在页面顶部有一个图像地图，在底部有一组对应的文本链接。

<!DOCTYPE HTML>
<HTML LANG="EN">
<TITLE>Babies™: Toys</TITLE>
<HEADER>
 <H1>Toys</H1>
 <IMG SRC="/images/menu.gif"
      ALT="Babies™ navigation menu. Select a department to go to its page."
      USEMAP="#NAV">
</HEADER>
 ...
<FOOTER>
 <MAP NAME="NAV">
  <P>
   <A HREF="/clothes/">Clothes</A>
   <AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"> |
   <A HREF="/toys/">Toys</A>
   <AREA ALT="Toys" COORDS="100,0,200,50" HREF="/toys/"> |
   <A HREF="/food/">Food</A>
   <AREA ALT="Food" COORDS="200,0,300,50" HREF="/food/"> |
   <A HREF="/books/">Books</A>
   <AREA ALT="Books" COORDS="300,0,400,50" HREF="/books/">
  </P>
 </MAP>
</FOOTER>

4.8.13 `area` 元素

Element/area

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge（旧版）12+Internet Explorer支持

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLAreaElement

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge（旧版）12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

在预期短语内容的地方，但仅当有一个 map 元素祖先时。

内容模型:

无内容.

在 text/html 中省略标签:

没有结束标签.

内容属性:

全局属性

alt — 当图像不可用时使用的替代文本

coords — 在图像地图中创建形状的坐标

shape — 在图像地图中创建形状的类型

href — 超链接的地址

target — 用于导航超链接的可导航目标

download — 是否下载资源而不是导航到它，如果是，则为其文件名

ping — 要 ping 的 URL

rel — 文档中包含超链接的位置与目标资源之间的关系

referrerpolicy — 元素发起的获取的引用策略

无障碍考虑:

如果元素有 href 属性：作者参考；实现者参考。

否则：作者参考；实现者参考。

DOM 接口:

[Exposed=Window]
interface HTMLAreaElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString alt;
  [CEReactions] attribute DOMString coords;
  [CEReactions] attribute DOMString shape;
  [CEReactions] attribute DOMString target;
  [CEReactions] attribute DOMString download;
  [CEReactions] attribute USVString ping;
  [CEReactions] attribute DOMString rel;
  [SameObject, PutForwards=value] readonly attribute DOMTokenList relList;
  [CEReactions] attribute DOMString referrerPolicy;

  // also has obsolete members
};
HTMLAreaElement includes HTMLHyperlinkElementUtils;

area 元素表示在图像地图上的超链接和相应的区域，或者是图像地图上的一个无效区域。

具有父节点的 area 元素必须有一个 map 元素祖先。

如果 area 元素具有 href 属性，那么 area 元素表示一个超链接。在这种情况下，alt 属性必须存在。它指定超链接的文本。其值必须是这样的文本：当与图像地图的其他超链接文本以及图像的替代文本一起呈现时，但没有图像本身时，向用户提供与超链接使用其形状应用于图像时相同类型的选择。如果同一图像地图中有另一个 area 元素指向相同的资源，并且其 alt 属性不为空，则该属性可以留空。

如果 area 元素没有 href 属性，则该元素表示的区域不可选择，并且必须省略 alt 属性。

在这两种情况下，shape 和 coords 属性指定该区域。

shape 属性是一个具有以下关键字和状态的枚举属性:

关键字	符合	状态	简要描述
`circle`		圆形状态	表示一个圆形，使用 `coords` 属性中的三个整数。
`circ`	否	圆形状态	表示一个圆形，使用 `coords` 属性中的三个整数。
`default`		默认状态	该区域是整个图像。（不使用 `coords` 属性。）
`poly`		多边形状态	表示一个多边形，使用 `coords` 属性中的至少六个整数。
`polygon`	否	多边形状态	表示一个多边形，使用 `coords` 属性中的至少六个整数。
`rect`		矩形状态	表示一个矩形，使用 `coords` 属性中的四个整数。
`rectangle`	否	矩形状态	表示一个矩形，使用 `coords` 属性中的四个整数。

该属性的 缺省值 和 无效值 都是矩形状态。

coords 属性必须包含一个有效的浮点数列表，如果指定的话。该属性提供了由 shape 属性描述的形状的坐标。此属性的处理在图像地图处理模型中描述。

在圆形状态中，area 元素必须具有 coords 属性，该属性包含三个整数，最后一个必须为非负数。第一个整数必须是从图像左边缘到圆心的距离，第二个整数必须是从图像上边缘到圆心的距离，第三个整数必须是圆的半径，均以 CSS 像素为单位。

在默认状态中，area 元素不能有 coords 属性。（该区域是整个图像。）

在多边形状态中，area 元素必须具有 coords 属性，至少包含六个整数，并且整数的数量必须是偶数。每对整数必须表示从图像左侧和顶部的距离，均以 CSS 像素为单位，并且所有坐标一起表示多边形的点，按顺序排列。

在矩形状态中，area 元素必须具有 coords 属性，其中包含四个整数，第一个必须小于第三个，第二个必须小于第四个。这四个点分别表示从图像左边缘到矩形左侧的距离、从顶部边缘到顶部的距离、从左侧到右侧的距离和从顶部到底部的距离，均以 CSS 像素为单位。

当用户代理允许用户跟随超链接或下载超链接时，area 元素的 href、target、download 和 ping 属性决定了链接的跟随方式。rel 属性可用于向用户指示在用户跟随链接之前目标资源的可能性质。

target、download、ping、rel 和 referrerpolicy 属性必须省略，如果没有 href 属性。

如果 itemprop 属性在 area 元素上指定，则还必须指定 href 属性。

HTMLAreaElement/rel

所有当前引擎都支持。

Firefox30+Safari9+Chrome54+

Opera?Edge79+

Edge（旧版）12+Internet Explorer11

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

ID属性 alt、coords、shape、target、download、ping 和 rel，必须反映同名的相应内容属性。

HTMLAreaElement/relList

所有当前引擎都支持。

Firefox30+Safari9+Chrome65+

Opera41+Edge79+

Edge（旧版）18Internet Explorer不支持

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

ID属性 relList 必须反映 rel 内容属性。

HTMLAreaElement/referrerPolicy

所有当前引擎都支持。

Firefox50+Safari14.1+Chrome52+

Opera?Edge79+

Edge（旧版）?Internet Explorer不支持

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

ID属性 referrerPolicy 必须反映 referrerpolicy 内容属性，仅限于已知值。

4.8.14 图像映射

4.8.14.1 编写

图像映射允许将图像上的几何区域与超链接关联起来。

图像（以img元素的形式）可以通过在img元素上指定usemap属性来关联到图像映射（以map元素的形式）。如果指定了usemap属性，它必须是指向map元素的有效的哈希名称引用。

考虑如下所示的图像：

一个包含四个形状的线条，等间距排列：一个红色空心框，一个绿色圆圈，一个蓝色三角形和一个黄色四角星。

如果我们只想让有颜色的区域可以点击，我们可以这样做：

<p>
 Please select a shape:
 <img src="shapes.png" usemap="#shapes"
      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
 <map name="shapes">
  <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
  <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
  <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
        href="yellow.html" alt="Yellow star.">
 </map>
</p>

4.8.14.2 处理模型

如果img元素有指定usemap属性，用户代理必须按如下方式处理：

使用解析哈希名称引用的规则解析该属性的值为指向map元素，并以该元素为上下文节点。这将返回一个元素（map）或null。
如果返回null，则返回。该图像并未关联到图像映射。
否则，用户代理必须收集所有作为map后代的area元素。将这些元素称为areas。

获取形成图像映射的area元素列表（areas）后，交互式用户代理必须以两种方式之一处理该列表。

如果用户代理打算显示img元素表示的文本，则必须使用以下步骤。

删除areas中所有没有href属性的area元素。
删除areas中所有没有alt属性或alt属性值为空字符串的area元素，如果在areas中有另一个具有相同href属性值且具有非空alt属性的area元素。
每个剩余的areas中的area元素都代表一个超链接。这些超链接应以与img的文本相关的方式提供给用户。

在这种情况下，用户代理可以以area和img元素没有指定alt属性或其alt属性为空字符串或其他不可见文本的方式表示这些元素，使用一种实现定义的方式来指示缺少适当的作者提供的文本。

如果用户代理打算显示图像并允许与图像进行交互以选择超链接，则图像必须与一组从areas中的area元素中获取的层叠形状关联，以相反的树顺序（即map中最后指定的area元素是最底层的形状，map中的第一个元素，在树顺序中，是最顶层的形状）。

每个areas中的area元素必须按如下方式处理以获得叠加在图像上的形状：

找到该元素的shape属性所代表的状态。
使用解析浮点数列表的规则解析该元素的coords属性（如果存在），并将结果设为coords列表。如果属性不存在，则将coords列表设为空列表。

如果coords列表中的项目数少于当前状态下area元素的最小数量，则形状为空；返回。

状态	最小项目数
圆形状态	3
默认状态	0
多边形状态	6
矩形状态	4

根据以下列表中与shape属性的状态相对应的条目，检查coords列表中的多余项目：

圆形状态

丢弃列表中第三个项目以后的任何项目。

默认状态

丢弃列表中的所有项目。

多边形状态

如果项目数为奇数，则丢弃最后一个项目。

矩形状态

丢弃列表中第四个项目以后的任何项目。
如果shape属性代表矩形状态，并且列表中的第一个数字大于第三个数字，则交换这两个数字。
如果shape属性代表矩形状态，并且列表中的第二个数字大于第四个数字，则交换这两个数字。
如果shape属性代表圆形状态，并且列表中的第三个数字小于或等于零，则形状为空；返回。
现在，由元素表示的形状是下面列表中与shape属性状态对应的条目所描述的形状：

圆形状态

令x为coords列表中的第一个数字，y为第二个数字，r为第三个数字。

该形状是一个圆，其中心点距离图像左边缘xCSS像素，距离图像上边缘yCSS像素，半径为rCSS像素。

默认状态

形状是一个完全覆盖整个图像的矩形。

多边形状态

令x_i为coords中的第2i个条目，y_i为coords中的第2i+1个条目（coords中的第一个条目索引为0）。

令coordinates为(x_i, y_i)，以CSS像素为单位，从图像左上角开始测量，对于所有i的整数值，从0到N/2-1，其中N是coords中的条目数。

该形状是一个多边形，其顶点由coordinates给出，其内部通过奇偶规则确定。[GRAPHICS]

矩形状态

令x₁为coords中的第一个数字，y₁为第二个数字，x₂为第三个数字，y₂为第四个数字。

该形状是一个矩形，其左上角由坐标(x₁, y₁)给出，右下角由坐标(x₂, y₂)给出，这些坐标以CSS像素为单位，从图像的左上角测量。

由于历史原因，坐标必须相对于显示后的图像解释，即CSS 'width'和'height'属性（或者，对于非CSS浏览器，图像元素的width和height属性——CSS浏览器将这些属性映射到上述CSS属性）。

浏览器缩放功能和使用CSS或SVG应用的变换不会影响坐标。

根据上述算法与一组层叠形状关联的图像的指针设备交互，必须首先将相关的用户交互事件发送到指针设备指示的点覆盖的最顶层形状（如果有），或者发送到图像元素本身（如果没有形状覆盖该点）。用户代理还可以允许选择和激活代表超链接的单个area元素（例如使用键盘）。

由于map元素（及其area元素）可以与多个img元素关联，因此area元素可能对应于文档的多个可聚焦区域。

图像映射是实时的；如果DOM发生变化，用户代理必须像重新运行图像映射算法一样处理。

4.8.15 MathML

HTML/HTML5/HTML5_Parser#Inline_SVG_and_MathML_support

支持所有当前引擎。

Firefox4+Safari5.1+Chrome7+

Opera11.6+Edge79+

Edge (旧版)12+Internet Explorer9+

Firefox Android5+Safari iOS5+Chrome Android18+WebView Android3+Samsung Internet1.0+Opera Android12+

MathML math 元素属于嵌入内容, 短语内容, 流内容, 和可感知内容类别，用于本规范中的内容模型。

当 MathML annotation-xml 元素包含来自 HTML 命名空间的元素时，这些元素都必须是流内容。

当 MathML 令牌元素 (mi, mo, mn, ms, 和 mtext) 是 HTML 元素的后代时，它们可以包含来自 HTML 命名空间的短语内容元素。

用户代理必须通过假装在 MathML 元素中发现的内容模型不允许直接文本的情况下将文本实际包装在 MathML mtext 元素中来处理文本，而非元素间空白。 (但这种文本并不符合规范。)

用户代理必须假装任何 MathML 元素的内容不符合元素的内容模型时，其内容被一个包含适当错误信息的 MathML merror 元素替换，以用于 MathML 布局和渲染。

MathML 元素的语义由 MathML 和其他适用的规范定义。 [MATHML]

这是在 HTML 文档中使用 MathML 的一个示例：

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>The quadratic formula</title>
 </head>
 <body>
  <h1>The quadratic formula</h1>
  <p>
   <math>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
     <mrow>
      <mo form="prefix">−</mo> <mi>b</mi>
      <mo>±</mo>
      <msqrt>
       <msup> <mi>b</mi> <mn>2</mn> </msup>
       <mo>−</mo>
       <mn>4</mn> <mo>⁢</mo> <mi>a</mi> <mo>⁢</mo> <mi>c</mi>
      </msqrt>
     </mrow>
     <mrow>
      <mn>2</mn> <mo>⁢</mo> <mi>a</mi>
     </mrow>
    </mfrac>
   </math>
  </p>
 </body>
</html>

4.8.16 SVG

HTML/HTML5/HTML5_Parser#Inline_SVG_and_MathML_support

支持所有当前引擎。

Firefox37+Safari11.1+Chrome7+

Opera15+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android37+Safari iOS11.3+Chrome Android18+WebView Android4.4+Samsung Internet4+Opera Android15+

SVG svg 元素属于嵌入内容, 短语内容, 流内容, 和可感知内容类别，用于本规范中的内容模型。

当 SVG foreignObject 元素包含来自 HTML 命名空间的元素时，这些元素都必须是流内容。

在 HTML 文档中的 SVG title 元素的内容模型是短语内容。 (这进一步限制了SVG 2中的要求。)

SVG 元素的语义由 SVG 2 和其他适用的规范定义。 [SVG]

doc = iframe.getSVGDocument()
doc = embed.getSVGDocument()
doc = object.getSVGDocument(): 返回 Document 对象，当 iframe, embed, 或 object 元素用于嵌入 SVG 时。

getSVGDocument() 方法的步骤如下：

让 document 成为 this 的内容文档。
如果 document 非空，并且因为页面加载处理模型针对 XML 文件部分创建了它，因为在资源的计算类型在导航算法中是 image/svg+xml，那么返回 document。
返回 null。

4.8.17 尺寸属性

作者要求：在 img、 iframe、 embed、 object、 video、 source 元素上，当其父元素是 picture 元素时，以及当其 type 属性处于图片按钮状态时， input 元素，可以指定 width 和 height 属性，以给出元素视觉内容的尺寸（分别是宽度和高度，相对于输出媒介的标称方向），单位为 CSS 像素。如果指定了这些属性，它们的值必须是有效的非负整数。

给定的指定尺寸可能与资源本身指定的尺寸不同，因为资源的分辨率可能与 CSS 像素分辨率不同。（在屏幕上，CSS 像素的分辨率是 96ppi，但一般来说，CSS 像素分辨率取决于阅读距离。）如果同时指定了两个属性，则必须满足以下陈述之一：

specified width - 0.5 ≤ specified height * target ratio ≤ specified width + 0.5
specified height - 0.5 ≤ specified width / target ratio ≤ specified height + 0.5
specified height = specified width = 0

target ratio 是资源的自然宽度与自然高度的比率。specified width 和 specified height 分别是 width 和 height 属性的值。

如果相关资源没有自然宽度和自然高度，则必须省略这两个属性。

如果两个属性都为0，这表示该元素不打算用于用户（例如，它可能是一个用于计数页面浏览量的服务的一部分）。

尺寸属性不应用于拉伸图像。

用户代理要求：用户代理应使用这些属性作为渲染的提示。

HTMLObjectElement/width

支持所有当前引擎。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLObjectElement/height

支持所有当前引擎。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

width 和 height IDL 属性在 iframe、 embed、 object、 source 和 video 元素上必须反映相应的内容属性。

对于 iframe、 embed 和 object， IDL 属性是 DOMString；对于 video 和 source， IDL 属性是 unsigned long。

对于 img 和 input 元素，相应的 IDL 属性在这些各自元素的部分中定义，因为它们更具体地与这些元素的其他行为相关。

4.9 表格数据

4.9.1 `table` 元素

Element/table

支持所有当前引擎。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLTableElement

支持所有当前引擎。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

流内容。

预期出现流内容的地方。

按此顺序：可选的caption元素，随后零个或多个colgroup元素，随后可选的thead元素，随后零个或多个tbody元素或一个或多个tr元素，随后可选的tfoot元素，可选地夹杂一个或多个脚本支持元素。

在text/html中的标签省略:

标签均不可省略。

[Exposed=Window]
interface HTMLTableElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute HTMLTableCaptionElement? caption;
  HTMLTableCaptionElement createCaption();
  [CEReactions] undefined deleteCaption();

  [CEReactions] attribute HTMLTableSectionElement? tHead;
  HTMLTableSectionElement createTHead();
  [CEReactions] undefined deleteTHead();

  [CEReactions] attribute HTMLTableSectionElement? tFoot;
  HTMLTableSectionElement createTFoot();
  [CEReactions] undefined deleteTFoot();

  [SameObject] readonly attribute HTMLCollection tBodies;
  HTMLTableSectionElement createTBody();

  [SameObject] readonly attribute HTMLCollection rows;
  HTMLTableRowElement insertRow(optional long index = -1);
  [CEReactions] undefined deleteRow(long index);

  // also has obsolete members
};

table 元素表示具有多于一个维度的数据，以表格的形式。

table 元素参与表格模型。表格具有由其后代给出的行、列和单元格。这些行和列形成一个网格；表格的单元格必须完全覆盖该网格而不重叠。

判断此一致性要求是否满足的具体规则在表格模型的描述中。

鼓励作者提供描述如何解释复杂表格的信息。关于如何提供此类信息的指导在下方。

表格不得用作布局辅助工具。历史上，一些网页作者错误地使用 HTML 表格来控制其页面布局。这种用法是不符合规范的，因为尝试从此类文档中提取表格数据的工具会得到非常混乱的结果。特别是，使用屏幕阅读器等辅助工具的用户可能会发现很难导航使用表格进行布局的页面。

有多种替代方案可用于布局，而不是使用 HTML 表格，例如 CSS 网格布局、CSS 弹性盒布局（“flexbox”）、CSS 多列布局、CSS 定位和 CSS 表格模型。[CSS]

表格可能很复杂，难以理解和导航。为了帮助用户，用户代理应清晰地将表格中的单元格彼此区分开来，除非用户代理已将表格分类为（不符合规范的）布局表格。

鼓励作者和实现者考虑使用一些在下方描述的表格设计技巧以使表格更易于用户导航。

用户代理，特别是那些对任意内容进行表格分析的用户代理，鼓励找到确定哪些表格实际包含数据而哪些仅用于布局的启发式方法。本规范未定义精确的启发式方法，但以下建议作为可能的指标：

特征	指示
使用 `role` 属性，值为 `presentation`	可能是布局表格
使用不符合规范的 `border` 属性，值为 0	可能是布局表格
使用不符合规范的 `cellspacing` 和 `cellpadding` 属性，值为 0	可能是布局表格
使用 `caption`、`thead` 或 `th` 元素	可能是非布局表格
使用 `headers` 和 `scope` 属性	可能是非布局表格
使用不符合规范的 `border` 属性，值为非0	可能是非布局表格
使用 CSS 设置的显式可见边框	可能是非布局表格
使用 `summary` 属性	不是一个好的指标（历史上，布局表格和非布局表格都设置了这个属性）

以上建议很可能是错误的。强烈建议实现者提供反馈，详细说明他们尝试创建布局表格检测启发式方法的经验。

如果一个 table 元素有一个（不符合规范的）summary 属性，并且用户代理未将其分类为布局表格，则用户代理可以向用户报告该属性的内容。

table.caption [ = value ] HTMLTableElement/caption 支持所有当前引擎。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回表格的 caption 元素。

可设置，以替换 caption 元素。

caption = table.createCaption() HTMLTableElement/createCaption 支持所有当前引擎。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

确保表格有一个 caption 元素，并返回它。

table.deleteCaption() HTMLTableElement/deleteCaption 支持所有当前引擎。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

确保表格没有 caption 元素。

table.tHead [ = value ] HTMLTableElement/tHead 支持所有当前引擎。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回表格的 thead 元素。

可设置，以替换 thead 元素。如果新值不是 thead 元素，则抛出 "HierarchyRequestError" DOMException。

thead = table.createTHead() HTMLTableElement/createTHead 支持所有当前引擎。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

确保表格有一个 thead 元素，并返回它。

table.deleteTHead() HTMLTableElement/deleteTHead 支持所有当前引擎。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

确保表格没有 thead 元素。

table.tFoot [ = value ] HTMLTableElement/tFoot 支持所有当前引擎。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回表格的 tfoot 元素。

可设置，以替换 tfoot 元素。如果新值不是 tfoot 元素，则抛出 "HierarchyRequestError" DOMException。

tfoot = table.createTFoot() HTMLTableElement/createTFoot 支持所有当前引擎。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

确保表格有一个 tfoot 元素，并返回它。

table.deleteTFoot() HTMLTableElement/deleteTFoot 支持所有当前引擎。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

确保表格没有 tfoot 元素。

table.tBodies HTMLTableElement/tBodies 支持所有当前引擎。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回一个 HTMLCollection，包含表格的 tbody 元素。

tbody = table.createTBody() HTMLTableElement/createTBody 支持所有当前引擎。 Firefox25+Safari6+Chrome20+ Opera?Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

创建一个 tbody 元素，将其插入表格中，并返回它。

table.rows HTMLTableElement/rows 支持所有当前引擎。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回一个 HTMLCollection，包含表格的 tr 元素。

tr = table.insertRow([ index ]) HTMLTableElement/insertRow 支持所有当前引擎。 Firefox1+Safari4+Chrome1+ Opera10+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+

创建一个 tr 元素，必要时同时创建 tbody，按给定的位置将其插入表格中，并返回 tr。

位置相对于表中的行。默认省略参数时，索引 -1 相当于插入到表格末尾。

如果给定位置小于 -1 或大于行数，则抛出 "IndexSizeError" DOMException。

table.deleteRow(index) HTMLTableElement/deleteRow 支持所有当前引擎。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

移除表中给定位置的 tr 元素。

位置相对于表中的行。索引 -1 相当于删除表格的最后一行。

如果给定位置小于 -1 或大于最后一行的索引，或没有行，则抛出 "IndexSizeError" DOMException。

在以下所有属性和方法定义中，当一个元素需要表格创建时，意味着根据 table 元素的节点文档、给定的本地名称和 HTML 命名空间创建一个元素。

当获取 caption IDL 属性时，必须返回 caption 元素，若无则返回 null。设置时，必须移除 caption 元素子节点（如果有），并插入新值（若不为 null）。

当调用 createCaption() 方法时，必须返回 caption 元素，若无则创建并插入新 caption 元素，并返回。

当调用 deleteCaption() 方法时，必须移除 caption 元素（如果有）。

当获取 tHead IDL 属性时，必须返回 thead 元素，若无则返回 null。设置时，如果新值为 null 或 thead 元素，必须移除第一个 thead 元素，并插入新值（若不为 null）。如果新值既不是 null 也不是 thead 元素，则抛出 "HierarchyRequestError" DOMException。

当调用 createTHead() 方法时，必须返回 thead 元素，若无则创建并插入新 thead 元素，并返回。

当调用 deleteTHead() 方法时，必须移除 thead 元素（如果有）。

当获取 tFoot IDL 属性时，必须返回 tfoot 元素，若无则返回 null。设置时，如果新值为 null 或 tfoot 元素，必须移除第一个 tfoot 元素，并插入新值（若不为 null）。如果新值既不是 null 也不是 tfoot 元素，则抛出 "HierarchyRequestError" DOMException。

当调用 createTFoot() 方法时，必须返回 tfoot 元素，若无则创建并插入新 tfoot 元素，并返回。

当调用 deleteTFoot() 方法时，必须移除 tfoot 元素（如果有）。

当获取 tBodies 属性时，必须返回一个 HTMLCollection，其过滤器仅匹配 tbody 元素。

当调用 createTBody() 方法时，必须表格创建一个新的 tbody 元素，将其插入到 table 元素的最后一个 tbody 元素之后（如果有），并返回新元素。

当获取 rows 属性时，必须返回一个 HTMLCollection，其过滤器仅匹配 tr 元素。

调用 insertRow(index) 方法时，根据表格状态执行以下操作：

如果 index 小于 -1 或大于 rows 集合中的元素数量：: 必须抛出 "IndexSizeError" DOMException。
如果 rows 集合中没有元素，且 table 中没有 tbody 元素：: 必须表格创建一个 tbody 元素，然后表格创建一个 tr 元素，然后将 tr 元素追加到 tbody 元素中，然后将 tbody 元素追加到 table 元素中，最后返回 tr 元素。
如果 rows 集合中没有元素：: 必须表格创建一个 tr 元素，将其追加到表格中的最后一个 tbody 元素中，并返回 tr 元素。
如果 index 为 -1 或等于 rows 集合中的项目数量：: 必须表格创建一个 tr 元素，并将其追加到 rows 集合中的最后一个 tr 元素的父节点。然后，必须返回新创建的 tr 元素。
否则：: 必须表格创建一个 tr 元素，将其插入到 rows 集合中的第 index 个 tr 元素之前，并返回新创建的 tr 元素。

当调用 deleteRow(index) 方法时，用户代理必须执行以下步骤：

如果 index 小于 -1 或大于等于 rows 集合中的元素数量，则抛出 "IndexSizeError" DOMException。
如果 index 为 -1，则移除 rows 集合中的最后一个元素，或如果集合为空，则不执行任何操作。
否则，移除 rows 集合中的第 index 个元素。

这是一个将表格用于标记数独谜题的示例。请注意，缺少标题，这在这样的表格中是没有必要的。

<style>
 #sudoku { border-collapse: collapse; border: solid thick; }
 #sudoku colgroup, table#sudoku tbody { border: solid medium; }
 #sudoku td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; padding: 0; }
</style>
<h1>Today's Sudoku</h1>
<table id="sudoku">
 <colgroup><col><col><col>
 <colgroup><col><col><col>
 <colgroup><col><col><col>
 <tbody>
  <tr> <td> 1 <td>   <td> 3 <td> 6 <td>   <td> 4 <td> 7 <td>   <td> 9
  <tr> <td>   <td> 2 <td>   <td>   <td> 9 <td>   <td>   <td> 1 <td>
  <tr> <td> 7 <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td> 6
 <tbody>
  <tr> <td> 2 <td>   <td> 4 <td>   <td> 3 <td>   <td> 9 <td>   <td> 8
  <tr> <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>
  <tr> <td> 5 <td>   <td>   <td> 9 <td>   <td> 7 <td>   <td>   <td> 1
 <tbody>
  <tr> <td> 6 <td>   <td>   <td>   <td> 5 <td>   <td>   <td>   <td> 2
  <tr> <td>   <td>   <td>   <td>   <td> 7 <td>   <td>   <td>   <td>
  <tr> <td> 9 <td>   <td>   <td> 8 <td>   <td> 2 <td>   <td>   <td> 5
</table>

4.9.1.1 描述表格的技巧

对于不仅仅由第一行和第一列包含标题的单元格网格组成的表格，以及任何读者可能难以理解内容的表格，作者应包括介绍表格的解释信息。这些信息对所有用户都有用，但对无法看到表格的用户尤其有用，例如屏幕阅读器用户。

这样的解释信息应介绍表格的目的，概述其基本单元格结构，突出任何趋势或模式，并一般性地教用户如何使用表格。

例如，以下表格：

具有正面和负面特征的表格
负面	特征	正面
悲伤	心情	快乐
失败	成绩	通过

...可能需要描述说明表格的布局方式，比如“特征在第二列给出，负面在左列，正面在右列”。

有多种方法可以包含这些信息，例如：

用散文形式描述，围绕表格

<p>In the following table, characteristics are given in the second
column, with the negative side in the left column and the positive
side in the right column.</p>
<table>
 <caption>Characteristics with positive and negative sides</caption>
 <thead>
  <tr>
   <th id="n"> Negative
   <th> Characteristic
   <th> Positive
 <tbody>
  <tr>
   <td headers="n r1"> Sad
   <th id="r1"> Mood
   <td> Happy
  <tr>
   <td headers="n r2"> Failing
   <th id="r2"> Grade
   <td> Passing
</table>

在表格的caption中

<table>
 <caption>
  <strong>Characteristics with positive and negative sides.</strong>
  <p>Characteristics are given in the second column, with the
  negative side in the left column and the positive side in the right
  column.</p>
 </caption>
 <thead>
  <tr>
   <th id="n"> Negative
   <th> Characteristic
   <th> Positive
 <tbody>
  <tr>
   <td headers="n r1"> Sad
   <th id="r1"> Mood
   <td> Happy
  <tr>
   <td headers="n r2"> Failing
   <th id="r2"> Grade
   <td> Passing
</table>

在表格的caption中，使用details元素

<table>
 <caption>
  <strong>Characteristics with positive and negative sides.</strong>
  <details>
   <summary>Help</summary>
   <p>Characteristics are given in the second column, with the
   negative side in the left column and the positive side in the right
   column.</p>
  </details>
 </caption>
 <thead>
  <tr>
   <th id="n"> Negative
   <th> Characteristic
   <th> Positive
 <tbody>
  <tr>
   <td headers="n r1"> Sad
   <th id="r1"> Mood
   <td> Happy
  <tr>
   <td headers="n r2"> Failing
   <th id="r2"> Grade
   <td> Passing
</table>

在表格旁边，位于同一个figure中

<figure>
 <figcaption>Characteristics with positive and negative sides</figcaption>
 <p>Characteristics are given in the second column, with the
 negative side in the left column and the positive side in the right
 column.</p>
 <table>
  <thead>
   <tr>
    <th id="n"> Negative
    <th> Characteristic
    <th> Positive
  <tbody>
   <tr>
    <td headers="n r1"> Sad
    <th id="r1"> Mood
    <td> Happy
   <tr>
    <td headers="n r2"> Failing
    <th id="r2"> Grade
    <td> Passing
 </table>
</figure>

在表格旁边，位于figure的figcaption中

<figure>
 <figcaption>
  <strong>Characteristics with positive and negative sides</strong>
  <p>Characteristics are given in the second column, with the
  negative side in the left column and the positive side in the right
  column.</p>
 </figcaption>
 <table>
  <thead>
   <tr>
    <th id="n"> Negative
    <th> Characteristic
    <th> Positive
  <tbody>
   <tr>
    <td headers="n r1"> Sad
    <th id="r1"> Mood
    <td> Happy
   <tr>
    <td headers="n r2"> Failing
    <th id="r2"> Grade
    <td> Passing
 </table>
</figure>

作者还可以使用其他技术，或组合以上技术，视情况而定。

当然，最好的选择不是写一段描述解释表格的布局方式，而是调整表格，使其不需要任何解释。

对于上面示例中使用的表格，只需简单地重新排列表格，使标题在顶部和左侧，即可消除解释的需要，同时也不需要使用headers属性：

<table>
 <caption>Characteristics with positive and negative sides</caption>
 <thead>
  <tr>
   <th> Characteristic
   <th> Negative
   <th> Positive
 <tbody>
  <tr>
   <th> Mood
   <td> Sad
   <td> Happy
  <tr>
   <th> Grade
   <td> Failing
   <td> Passing
</table>

4.9.1.2 表格设计技巧

良好的表格设计是使表格更具可读性和可用性的关键。

在视觉媒体中，提供列和行边框以及交替的行背景可以非常有效地使复杂表格更具可读性。

对于包含大量数字内容的表格，使用等宽字体可以帮助用户看到模式，特别是在用户代理不渲染边框的情况下。（不幸的是，由于历史原因，不渲染表格边框是一种常见的默认设置。）

在语音媒体中，可以通过在读取单元格内容之前报告相应的标题，以及允许用户以网格方式导航表格，而不是按源顺序串行化整个表格的内容，来区分表格单元格。

鼓励作者使用CSS来实现这些效果。

用户代理在页面未使用CSS且表格未被分类为布局表格时，建议使用这些技术渲染表格。

4.9.2 `caption` 元素

Element/caption

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLTableCaptionElement

Support in all current engines.

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

无。

作为table元素的第一个子元素。

流内容，但没有table元素的后代。

如果caption元素后面没有紧接着ASCII空白或注释，则可以省略caption元素的结束标签。

[Exposed=Window]
interface HTMLTableCaptionElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

caption元素代表其父元素（如果有父元素且该父元素是table元素）的table元素的标题。

caption元素参与表格模型。

当table元素是figure元素中除了figcaption之外的唯一内容时，应该省略caption元素，而使用figcaption。

标题可以为表格提供上下文，使其更容易理解。

考虑以下表格：

	1	2	3	4	5	6
1	2	3	4	5	6	7
2	3	4	5	6	7	8
3	4	5	6	7	8	9
4	5	6	7	8	9	10
5	6	7	8	9	10	11
6	7	8	9	10	11	12

从抽象角度看，这个表格不清楚。然而，带有编号（用于在主文中引用）并解释其用途的标题，使其更加清晰：

<caption>
<p>Table 1.
<p>This table shows the total score obtained from rolling two
six-sided dice. The first row represents the value of the first die,
the first column the value of the second die. The total is given in
the cell that corresponds to the values of the two dice.
</caption>

这为用户提供了更多上下文：

表格 1。

这个表格显示了掷两个六面骰子得到的总分。第一行表示第一个骰子的值，第一列表示第二个骰子的值。总分在对应两个骰子值的单元格中给出。
	1	2	3	4	5	6
1	2	3	4	5	6	7
2	3	4	5	6	7	8
3	4	5	6	7	8	9
4	5	6	7	8	9	10
5	6	7	8	9	10	11
6	7	8	9	10	11	12

4.9.3 `colgroup` 元素

Element/colgroup

支持所有当前引擎。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLTableColElement

支持所有当前引擎。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

分类:

无。

此元素可以使用的上下文:

作为 table 元素的子元素，在任何 caption 元素之后，并且在任何 thead、tbody、tfoot 和 tr 元素之前。

内容模型:

如果 span 属性存在：无内容。

如果 span 属性不存在：零个或多个 col 和 template 元素。

在 text/html 中的标签省略:

如果 colgroup 元素内的第一个元素是 col 元素，并且该元素之前没有紧跟另一个 colgroup 元素（其结束标签已省略），则可以省略开始标签。（如果元素为空，则不能省略）。

如果 colgroup 元素后没有紧跟 ASCII 空白字符或注释，则可以省略结束标签。

span — 元素跨越的列数

[Exposed=Window]
interface HTMLTableColElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute unsigned long span;

  // also has obsolete members
};

colgroup 元素表示在其父 table 元素中（一组或多组）列。

如果 colgroup 元素不包含 col 元素，那么该元素可以指定一个 span 内容属性，其值必须是一个有效的非负整数，大于零且小于等于 1000。

colgroup 元素及其 span 属性参与表格模型。

span IDL 属性必须反映相同名称的内容属性。它的值被限制在 [1, 1000] 范围内，其默认值是 1。

4.9.4 `col` 元素

Element/col

支持所有当前引擎。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

分类:: 无。
此元素可以使用的上下文:: 作为 colgroup 元素的子元素，该元素没有 span 属性。
内容模型:: 无内容。
在 text/html 中的标签省略:: 没有结束标签。
内容属性:: 全局属性; span — 元素跨越的列数
无障碍考虑:: 作者指南。; 实现者指南。
DOM 接口:: 使用 HTMLTableColElement，如在 colgroup 元素中定义的那样。

如果 col 元素有一个父元素，而该父元素是一个 colgroup 元素，该元素本身有一个父元素是一个 table 元素，则该 col 元素表示该 colgroup 中的一列或多列。

该元素可以指定一个 span 内容属性，其值必须是一个有效的非负整数，大于零且小于或等于 1000。

col 元素及其 span 属性参与表格模型。

4.9.5 `tbody` 元素

元素/tbody

在所有当前引擎中支持。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLTableSectionElement

在所有当前引擎中支持。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

类别:

无。

此元素可使用的上下文:

作为 table 元素的子元素，在任何 caption、colgroup 和 thead 元素之后，但前提是没有 tr 元素是 table 元素的子元素。

内容模型:

零个或多个 tr 和支持脚本元素。

text/html 中的标签省略:

如果 tbody 元素中的第一个元素是 tr 元素，并且该元素前面没有省略了结束标签的 tbody、thead 或 tfoot 元素，则可以省略开始标签。(如果元素是空的，则不能省略。)

如果 tbody 元素后面紧跟着一个 tbody 或 tfoot 元素，或者父元素中没有更多内容，则可以省略结束标签。

内容属性:

全局属性

无障碍考虑:

作者。

实现者。

DOM 接口:

[Exposed=Window]
interface HTMLTableSectionElement : HTMLElement {
  [HTMLConstructor] constructor();

  [SameObject] readonly attribute HTMLCollection rows;
  HTMLTableRowElement insertRow(optional long index = -1);
  [CEReactions] undefined deleteRow(long index);

  // also has obsolete members
};

HTMLTableSectionElement 接口也用于 thead 和 tfoot 元素。

tbody 元素表示一个块的行，它由父 table 元素的数据主体组成，如果 tbody 元素有一个父元素并且它是一个 table。

tbody 元素参与表模型。

tbody.rows

返回一个 HTMLCollection，其中包含表节的 tr 元素。

tr = tbody.insertRow([ index ])

创建一个 tr 元素，将其插入到给定位置的表节中，并返回 tr。

位置相对于表节中的行。省略参数时，默认值 -1 等同于插入到表节的末尾。

如果给定的位置小于 -1 或大于行数，则抛出 "IndexSizeError" DOMException。

tbody.deleteRow(index)

移除表节中给定位置的 tr 元素。

位置相对于表节中的行。索引 -1 等同于删除表节的最后一行。

如果给定的位置小于 -1 或大于最后一行的索引，或者如果没有行，则抛出 "IndexSizeError" DOMException。

rows 属性必须返回一个根植于该元素的 HTMLCollection，其过滤器仅匹配作为该元素子元素的 tr 元素。

insertRow(index) 方法必须按如下方式操作:

如果 index 小于 -1 或大于 rows 集合中的元素数量，则抛出 "IndexSizeError" DOMException。
让 table row 成为创建元素的结果，给定此元素的节点文档、tr 和 HTML 命名空间。
如果 index 为 -1 或等于 rows 集合中的项目数量，则将 table row 附加到该元素。
否则，将 table row 插入作为该元素的子元素，紧挨着 tr 集合中的第 index 个元素之前。
返回 table row。

deleteRow(index) 方法在调用时必须按如下操作:

如果 index 小于 -1 或大于等于 rows 集合中的元素数量，则抛出 "IndexSizeError" DOMException。
如果 index 为 -1，则从此元素中移除 rows 集合中的最后一个元素，或者如果 rows 集合为空，则不执行任何操作。
否则，从此元素中 rows 集合中 index 位置的元素移除。

4.9.6 `thead` 元素

元素/thead

在所有当前引擎中支持。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

类别:: 无。
此元素可使用的上下文:: 作为 table 元素的子元素，在任何 caption 和 colgroup 元素之后，在任何 tbody、tfoot 和 tr 元素之前，但前提是没有其他 thead 元素是 table 元素的子元素。
内容模型:: 零个或多个 tr 和支持脚本元素。
text/html 中的标签省略:: 如果 thead 元素后面紧跟着一个 tbody 或 tfoot 元素，则可以省略结束标签。
内容属性:: 全局属性
无障碍考虑:: 作者。; 实现者。
DOM 接口:: 使用 HTMLTableSectionElement，如 tbody 元素中定义的。

thead 元素表示由列标签（表头）和任何辅助非表头单元格组成的块的行，前提是 thead 元素有一个父元素并且它是一个 table。

thead 元素参与表模型。

这个例子展示了 thead 元素的使用。注意在 thead 元素中同时使用了 th 和 td 元素：第一行是表头，第二行是如何填写表格的说明。

<table>
 <caption> School auction sign-up sheet </caption>
 <thead>
  <tr>
   <th><label for=e1>Name</label>
   <th><label for=e2>Product</label>
   <th><label for=e3>Picture</label>
   <th><label for=e4>Price</label>
  <tr>
   <td>Your name here
   <td>What are you selling?
   <td>Link to a picture
   <td>Your reserve price
 <tbody>
  <tr>
   <td>Ms Danus
   <td>Doughnuts
   <td><img src="https://example.com/mydoughnuts.png" title="Doughnuts from Ms Danus">
   <td>$45
  <tr>
   <td><input id=e1 type=text name=who required form=f>
   <td><input id=e2 type=text name=what required form=f>
   <td><input id=e3 type=url name=pic form=f>
   <td><input id=e4 type=number step=0.01 min=0 value=0 required form=f>
</table>
<form id=f action="/auction.cgi">
 <input type=button name=add value="Submit">
</form>

4.9.7 `tfoot` 元素

元素/tfoot

在所有当前引擎中支持。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

类别:: 无。
此元素可使用的上下文:: 作为 table 元素的子元素，在任何 caption、colgroup、thead、tbody 和 tr 元素之后，但前提是没有其他 tfoot 元素是 table 元素的子元素。
内容模型:: 零个或多个 tr 和支持脚本元素。
text/html 中的标签省略:: 如果父元素中没有更多内容，则可以省略 tfoot 元素的结束标签。
内容属性:: 全局属性
无障碍考虑:: 作者。; 实现者。
DOM 接口:: 使用 HTMLTableSectionElement，如 tbody 元素中定义的。

tfoot 元素表示由列摘要（表尾）组成的块的行，前提是 tfoot 元素有一个父元素并且它是一个 table。

tfoot 元素参与表模型。

4.9.8 `tr` 元素

元素/tr

在所有当前引擎中支持。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLTableRowElement

在所有当前引擎中支持。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

类别:

无。

此元素可使用的上下文:

作为 thead 元素的子元素。

作为 tbody 元素的子元素。

作为 tfoot 元素的子元素。

作为 table 元素的子元素，在任何 caption、colgroup 和 thead 元素之后，但前提是没有 tbody 元素是 table 元素的子元素。

内容模型:

零个或多个 td、th 和支持脚本元素。

text/html 中的标签省略:

如果 tr 元素后面紧跟着另一个 tr 元素，或者父元素中没有更多内容，则可以省略结束标签。

内容属性:

全局属性

无障碍考虑:

作者。

实现者。

DOM 接口:

[Exposed=Window]
interface HTMLTableRowElement : HTMLElement {
  [HTMLConstructor] constructor();

  readonly attribute long rowIndex;
  readonly attribute long sectionRowIndex;
  [SameObject] readonly attribute HTMLCollection cells;
  HTMLTableCellElement insertCell(optional long index = -1);
  [CEReactions] undefined deleteCell(long index);

  // also has obsolete members
};

tr 元素表示表格中的一个行，该行由表格中的单元格组成。

tr 元素参与表模型。

tr.rowIndex HTMLTableRowElement/rowIndex 在所有当前引擎中支持。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回该行在表格 rows 列表中的位置。

如果该元素不在表格中，则返回 −1。

tr.sectionRowIndex

返回该行在表格节的 rows 列表中的位置。

如果该元素不在表格节中，则返回 −1。

tr.cells

返回一个 HTMLCollection，其中包含该行的 td 和 th 元素。

cell = tr.insertCell([ index ]) HTMLTableRowElement/insertCell 在所有当前引擎中支持。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

创建一个 td 元素，将其插入到表格行中的给定位置，并返回 td。

位置相对于行中的单元格。如果省略参数，默认值 -1 等同于插入到行的末尾。

如果给定的位置小于 -1 或大于单元格数量，则抛出 "IndexSizeError" DOMException。

tr.deleteCell(index)

移除行中给定位置的 td 或 th 元素。

位置相对于行中的单元格。索引 -1 等同于删除行的最后一个单元格。

如果给定的位置小于 -1 或大于最后一个单元格的索引，或者如果没有单元格，则抛出 "IndexSizeError" DOMException。

rowIndex 属性必须，如果该元素有一个父 table 元素，或者一个父 tbody、thead 或 tfoot 元素和一个祖父 table 元素，返回该 tr 元素在该 table 元素的 rows 集合中的索引。如果没有这样的 table 元素，则属性必须返回 -1。

sectionRowIndex 属性必须，如果该元素有一个父 table、tbody、thead 或 tfoot 元素，返回该 tr 元素在父元素的 rows 集合中的索引（对于表格，这是 HTMLTableElement 的 rows 集合；对于表格节，这是 HTMLTableSectionElement 的 rows 集合）。如果没有这样的父元素，则属性必须返回 -1。

cells 属性必须返回一个根植于该 tr 元素的 HTMLCollection，其过滤器仅匹配作为该元素子元素的 td 和 th 元素。

insertCell(index) 方法必须按如下方式操作:

如果 index 小于 -1 或大于 cells 集合中的元素数量，则抛出 "IndexSizeError" DOMException。
让 table cell 成为创建一个元素的结果，给定此 tr 元素的节点文档、td 和 HTML 命名空间。
如果 index 等于 -1 或等于 cells 集合中的项目数量，则将 table cell 附加到该 tr 元素。
否则，将 table cell 插入作为该 tr 元素的子元素，紧挨着 td 或 th 元素在 cells 集合中的第 index 个元素之前。
返回 table cell。

deleteCell(index) 方法必须按如下方式操作:

如果 index 小于 -1 或大于等于 cells 集合中的元素数量，则抛出 "IndexSizeError" DOMException。
如果 index 为 -1，则从其父元素中移除 cells 集合中的最后一个元素，或者如果 cells 集合为空，则不执行任何操作。
否则，从其父元素中 cells 集合中的第 index 个元素移除。

4.9.9 `td` 元素

元素/td

在所有当前引擎中支持。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLTableCellElement

在所有当前引擎中支持。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

类别:

无。

此元素可使用的上下文:

作为 tr 元素的子元素。

内容模型:

流内容。

text/html 中的标签省略:

如果 td 元素后面紧跟着另一个 td 或 th 元素，或者父元素中没有更多内容，则可以省略结束标签。

内容属性:

全局属性

colspan — 单元格跨越的列数

rowspan — 单元格跨越的行数

headers — 该单元格的表头单元格

无障碍考虑:

作者。

实现者。

DOM 接口:

[Exposed=Window]
interface HTMLTableCellElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute unsigned long colSpan;
  [CEReactions] attribute unsigned long rowSpan;
  [CEReactions] attribute DOMString headers;
  readonly attribute long cellIndex;

  [CEReactions] attribute DOMString scope; // only conforming for th elements
  [CEReactions] attribute DOMString abbr;  // only conforming for th elements

  // also has obsolete members
};

HTMLTableCellElement 接口也用于 th 元素。

td 元素表示表格中的数据单元格。

td 元素及其 colspan、rowspan 和 headers 属性参与表模型。

用户代理，尤其是在非视觉环境中或在显示表格为二维网格不切实际的情况下，可能会在渲染单元格内容时为用户提供单元格的上下文；例如，给出其在表模型中的位置，或列出单元格的表头单元格（由分配表头单元格的算法确定）。当列出单元格的表头单元格时，用户代理可以使用这些表头单元格上的 abbr 属性值（如果有），而不是表头单元格的内容。

在这个例子中，我们看到一个由可编辑单元格组成的网格（本质上是一个简单的电子表格）的网页应用片段。一个单元格被配置为显示其上方单元格的总和。三个单元格被标记为表头，使用 th 元素而不是 td 元素。一个脚本会附加事件处理程序到这些元素上以维护总数。

<table>
 <tr>
  <th><input value="Name">
  <th><input value="Paid ($)">
 <tr>
  <td><input value="Jeff">
  <td><input value="14">
 <tr>
  <td><input value="Britta">
  <td><input value="9">
 <tr>
  <td><input value="Abed">
  <td><input value="25">
 <tr>
  <td><input value="Shirley">
  <td><input value="2">
 <tr>
  <td><input value="Annie">
  <td><input value="5">
 <tr>
  <td><input value="Troy">
  <td><input value="5">
 <tr>
  <td><input value="Pierce">
  <td><input value="1000">
 <tr>
  <th><input value="Total">
  <td><output value="1060">
</table>

4.9.10 `th` 元素

元素/th

在所有当前引擎中支持。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

类别:: 无。
此元素可使用的上下文:: 作为 tr 元素的子元素。
内容模型:: 流内容，但没有 header，footer，分节内容或标题内容的后代元素。
text/html 中的标签省略:: 如果 th 元素后面紧跟着一个 td 或 th 元素，或父元素中没有更多内容，则可以省略结束标签。
内容属性:: 全局属性; colspan — 单元格跨越的列数; rowspan — 单元格跨越的行数; headers — 该单元格的表头单元格; scope — 指定表头单元格应用于哪些单元格; abbr — 在其他上下文中引用该单元格时使用的替代标签
无障碍考虑:: 作者。; 实现者。
DOM 接口:: 使用 HTMLTableCellElement，如 td 元素所定义。

th 元素表示表格中的一个表头单元格。

th 元素可以指定一个 scope 内容属性。

scope 属性是一个枚举属性，具有以下关键字和状态：

关键字	状态	简短描述
`row`	row	表头单元格适用于同一行中的一些后续单元格。
`col`	column	表头单元格适用于同一列中的一些后续单元格。
`rowgroup`	row group	表头单元格适用于行组中的所有剩余单元格。
`colgroup`	column group	表头单元格适用于列组中的所有剩余单元格。

属性的 缺失值默认 和 无效值默认 都是自动状态。（在此状态下，表头单元格适用于基于上下文选择的一组单元格。）

如果元素未锚定在行组中，则 th 元素的 scope 属性不得处于行组状态；如果元素未锚定在列组中，则不得处于列组状态。

th 元素可以指定一个 abbr 内容属性。其值必须是表头单元格的替代标签，用于在其他上下文中引用该单元格（例如在描述适用于数据单元格的表头单元格时）。它通常是完整表头单元格的缩写形式，但也可以是扩展形式，或只是不同的措辞。

th 元素及其 colspan，rowspan，headers 和 scope 属性参与表模型。

以下示例展示了 scope 属性的 rowgroup 值如何影响表头单元格适用的数据单元格。

这是一个显示表格的标记片段：

<table>
 <thead>
  <tr> <th> ID <th> Measurement <th> Average <th> Maximum
 <tbody>
  <tr> <td> <th scope=rowgroup> Cats <td> <td>
  <tr> <td> 93 <th> Legs <td> 3.5 <td> 4
  <tr> <td> 10 <th> Tails <td> 1 <td> 1
 <tbody>
  <tr> <td> <th scope=rowgroup> English speakers <td> <td>
  <tr> <td> 32 <th> Legs <td> 2.67 <td> 4
  <tr> <td> 35 <th> Tails <td> 0.33 <td> 1
</table>

这将生成如下表格：

ID	Measurement	Average	Maximum
	Cats
93	Legs	3.5	4
10	Tails	1	1
	English speakers
32	Legs	2.67	4
35	Tails	0.33	1

第一行的表头直接适用于其列中的行。

具有 scope 属性且值为 rowgroup 的表头适用于其行组中的所有单元格，除了第一列中的单元格。

剩余的表头仅适用于它们右侧的单元格。

4.9.11 `td`和`th`元素的共有属性

td和th元素可以有一个colspan内容属性，该属性的值必须是大于零且小于或等于1000的有效非负整数。

td和th元素还可以有一个rowspan内容属性，该属性的值必须是小于或等于65534的有效非负整数。对于该属性，值为零表示单元格将跨越行组中的所有剩余行。

这些属性分别给出了单元格要跨越的列数和行数。如表模型描述的那样，这些属性不得用于重叠单元格。

td和th元素可以有一个headers内容属性。如果指定了headers属性，其值必须包含一个字符串，该字符串由唯一的空格分隔的标记组成，这些标记的值必须是与td或th元素（如表模型所定义）在同一表中的th元素的ID。

具有ID id的th元素被认为是同一表中所有具有headers属性且其值包含该ID的td和th元素直接目标。如果存在一个元素C，它本身被元素B作为目标，而A被C直接作为目标，则元素A被认为是被元素B作为目标。

th元素不得自目标自身。

colspan、rowspan和headers属性参与表模型。

cell.cellIndex

返回单元格在行的cells列表中的位置。这不一定对应单元格在表中的x位置，因为前面的单元格可能覆盖了多个行或列。

如果元素不在行中，则返回-1。

colSpan IDL属性必须反映内容属性colspan。它被限制在范围[1, 1000]，其默认值为1。

rowSpan IDL属性必须反映内容属性rowspan。它被限制在范围[0, 65534]，其默认值为1。

headers IDL属性必须反映相同名称的内容属性。

cellIndex IDL属性必须在该元素有一个父tr元素时，返回该单元格元素在父元素的cells集合中的索引。如果没有这样的父元素，则该属性必须返回-1。

scope IDL属性必须反映相同名称的内容属性，仅限于已知值。

abbr IDL属性必须反映相同名称的内容属性。

4.9.12 处理模型

各种表格元素及其内容属性共同定义了表模型。

一个表格由在二维网格槽上的对齐单元格组成，具有坐标(x, y)。网格是有限的，并且是空的或有一个或多个槽。如果网格有一个或多个槽，则x坐标始终在范围0 ≤ x < x_width ，y坐标始终在范围0 ≤ y < y_height 内。如果x_width和y_height之一或两者为零，则该表为空（没有槽）。表对应于table元素。

一个单元格是锚定在槽(cell_x, cell_y)上的一组槽，并具有特定的width和height，使单元格覆盖所有具有坐标(x, y)的槽，其中cell_x ≤ x < cell_x+width 和cell_y ≤ y < cell_y+height。单元格可以是数据单元格或标题单元格。数据单元格对应于td元素，标题单元格对应于th元素。两种类型的单元格都可以有零个或多个关联的标题单元格。

在某些错误情况下，可能会出现两个单元格占据同一个槽的情况。

一个行是从x=0到x=x_width-1的完整槽集，对于特定的y值。行通常对应于tr元素，尽管在某些涉及跨越多行的单元格情况下，行组的末尾可能有一些隐含的行。

一个列是从y=0到y=y_height-1的完整槽集，对于特定的x值。列可以对应于col元素。如果没有col元素，则列是隐含的。

行组是一组锚定在位置 (0, group_y) 具有特定 height 的行，使得行组覆盖所有坐标 (x, y) 的槽，其中 0 ≤ x < x_width 和 group_y ≤ y < group_y+height。行组对应于 tbody、thead 和 tfoot 元素。并非每一行都必须在一个行组中。

列组是一组锚定在位置 (group_x, 0) 具有特定 width 的列，使得列组覆盖所有坐标 (x, y) 的槽，其中 group_x ≤ x < group_x+width 和 0 ≤ y < y_height。列组对应于 colgroup 元素。并非每一列都必须在一个列组中。

行组不能相互重叠。同样，列组也不能相互重叠。

一个单元格不能覆盖两个或多个行组的槽。然而，一个单元格可以位于多个列组中。一个单元格的所有槽要么是零个，要么是一个行组的一部分，并且是零个或多个列组的一部分。

除了单元格、列、行、行组和列组，表格可以有一个caption元素与之关联。这为表格提供了标题或说明。

表模型错误是指由table元素及其后代表示的数据错误。文档中不应有表模型错误。

4.9.12.1 表格的形成

为了确定哪些元素对应于与table元素关联的表格中的哪些槽，确定表格的尺寸(x_width和y_height)，以及确定是否存在表模型错误，用户代理必须使用以下算法：

令x_width为零。
令y_height为零。
令pending tfoot元素为tfoot元素的列表，初始为空。
令the table为由table元素表示的表格。x_width和y_height变量给出了the table的尺寸。the table最初是空的。
如果table元素没有子元素，则返回the table（它将是空的）。
将第一个caption元素子元素与table元素关联起来。如果没有这样的子元素，那么它没有关联的caption元素。
令current element为table元素的第一个子元素。

如果算法中的某个步骤需要将current element 推进到table的下一个子元素，而没有这样的下一个子元素，那么用户代理必须跳到算法结尾附近标记为end的步骤。
当current element不是以下元素之一时，将current element 推进到table的下一个子元素：
- colgroup
- thead
- tbody
- tfoot
- tr
如果current element是colgroup，请按照以下子步骤进行：
1. 列组：根据下面的适当情况处理current element：
  如果current element有任何col元素子元素
  按照以下步骤进行：
  1. 令x_start的值为x_width。
  2. 令current column为colgroup元素的第一个col元素子元素。
  3. 列：如果current column col元素具有span属性，则使用解析非负整数的规则解析其值。
    
    如果解析结果不是错误或零，则令span为该值。
    
    否则，如果col元素没有span属性，或者尝试解析属性的值导致错误或零，则令span为1。
    
    如果span大于1000，则令其为1000。
  4. 将x_width增加span。
  5. 让the table中的最后span列对应于current column col元素。
  6. 如果current column不是colgroup元素的最后一个col元素子元素，则令current column为colgroup元素的下一个col元素子元素，并返回到标记为列的步骤。
  7. 让所有从 x=x_start 到 x=x_width-1 的最后列在 the table 中形成一个新的列组，锚定在位置 (x_start, 0)，宽度为 x_width-x_start，对应于 colgroup 元素。
  如果current element没有col元素子元素
  1. 如果colgroup元素具有span属性，则使用解析非负整数的规则解析其值。
    
    如果解析结果不是错误或零，则令span为该值。
    
    否则，如果colgroup元素没有span属性，或者尝试解析属性的值导致错误或零，则令span为1。
    
    如果span大于1000，则令其为1000。
  2. 将x_width增加span。
  3. 让the table中的最后span列形成一个新的列组，以x_width-span为锚点，宽度为span，对应于colgroup元素。
2. 推进 current element到table的下一个子元素。
3. 当current element不是以下元素之一时，将current element 推进到table的下一个子元素：
  - colgroup
  - thead
  - tbody
  - tfoot
  - tr
4. 如果current element是colgroup元素，跳到上面标记为列组的步骤。
令y_current为零。
令list of downward-growing cells为空列表。
行：当current element不是以下元素之一时，将current element 推进到table的下一个子元素：
- thead
- tbody
- tfoot
- tr
如果current element是tr，则运行行处理算法，将current element 推进到table的下一个子元素，并返回到标记为行的步骤。
运行行组结束算法。
如果current element是tfoot，则将该元素添加到pending tfoot元素列表中，将current element 推进到table的下一个子元素，并返回到标记为行的步骤。
当前元素current element是thead或tbody。

运行行组处理算法。
将current element 推进到table的下一个子元素。
返回到标记为行的步骤。
结束：对于pending tfoot元素列表中的每个tfoot元素，按树顺序运行行组处理算法。
如果the table中存在仅包含没有被锚定到它们的单元的行或列，那么这是一个表模型错误。
返回the table。

上面的步骤集中调用的行组处理算法是：

令y_start的值为y_height。
对于作为正在处理的元素的子元素的每个tr元素，按树顺序运行行处理算法。
如果 y_height > y_start，那么让所有从 y=y_start 到 y=y_height-1 的最后行在 the table 中形成一个新的行组，锚定在坐标 (0, y_start) 的位置，高度为 y_height-y_start，对应于正在处理的元素。
运行行组结束算法。

当上述算法要求用户代理运行行组结束算法时，用户代理必须遵循以下步骤：

当y_current小于y_height时，执行以下步骤：
1. 运行向下生长的单元算法。
2. 将y_current增加1。
清空list of downward-growing cells。

上述算法调用的行处理算法是：

如果y_height等于y_current，则将y_height增加1。(y_current从不大于y_height。)
令x_current为0。
运行向下生长的单元算法。
如果正在处理的tr元素没有td或th元素子元素，则将y_current增加1，中止此步骤集，并返回到上面的算法。
令current cell为正在处理的tr元素中的第一个td或th元素子元素。
单元格：当x_current小于x_width且坐标为(x_current, y_current)的槽已经有单元格分配给它时，将x_current增加1。
如果x_current等于x_width，则将x_width增加1。(x_current从不大于x_width。)
如果current cell有colspan属性，则解析该属性的值，并令colspan为结果。

如果解析该值失败或返回零，或者该属性不存在，则令colspan为1。

如果colspan大于1000，则令其为1000。
如果current cell有rowspan属性，则解析该属性的值，并令rowspan为结果。

如果解析该值失败或该属性不存在，则令rowspan为1。

如果rowspan大于65534，则令其为65534。
如果rowspan为零且table元素的节点文档未设置为怪癖模式，则令cell grows downward为真，并将rowspan设置为1。否则，令cell grows downward为假。
如果x_width < x_current+colspan，则令x_width为x_current+colspan。
如果y_height < y_current+rowspan，则令y_height为y_current+rowspan。
让坐标为(x, y)的槽覆盖由新单元c覆盖，其锚点为(x_current, y_current)，宽度为colspan，高度为rowspan，对应于current cell元素。

如果current cell元素是th元素，则让这个新单元c为一个标题单元格；否则，让它为一个数据单元格。

要确定哪些标题单元格适用于current cell元素，请使用下一节中描述的分配标题单元格的算法。

如果涉及的任何槽已经有单元覆盖，则这是一个表模型错误。那些槽现在有两个重叠的单元。
如果cell grows downward为真，则将元组{c, x_current, colspan}添加到list of downward-growing cells。
将x_current增加colspan。
如果current cell是正在处理的tr元素中的最后一个td或th元素子元素，则将y_current增加1，中止此步骤集，并返回到上面的算法。
令current cell为正在处理的tr元素中的下一个td或th元素子元素。
返回到标记为单元格的步骤。

当上述算法要求用户代理运行向下生长的单元算法时，用户代理必须对list of downward-growing cells中的每个{cell, cell_x, width}元组，如果有，将单元cell扩展，以便它还覆盖坐标为(x, y_current)的槽，其中cell_x ≤ x < cell_x+width。

4.9.12.2 在数据单元格和标题单元格之间形成关系

每个单元格可以分配零个或多个标题单元格。将标题单元格分配算法分配给单元格principal cell的过程如下。

令header list为空单元格列表。
令(principal_x, principal_y)为principal cell锚定的槽的坐标。
如果principal cell指定了headers属性
1. 取principal cell的headers属性值并按ASCII空白字符分割，得到id list。
2. 对于id list中的每个令牌，如果文档中第一个ID等于该令牌的元素是同一表格中的单元格，并且该单元格不是principal cell，则将该单元格添加到header list。
如果principal cell没有指定headers属性
1. 令principal_width为principal cell的宽度。
2. 令principal_height为principal cell的高度。
3. 对于从principal_y到principal_y+principal_height-1的每个y值，运行扫描和分配标题单元格的内部算法，使用principal cell、header list、初始坐标(principal_x, y)和增量Δx=−1和Δy=0。
4. 对于从principal_x到principal_x+principal_width-1的每个x值，运行扫描和分配标题单元格的内部算法，使用principal cell、header list、初始坐标(x, principal_y)和增量Δx=0和Δy=−1。
5. 如果principal cell锚定在一个行组中，则将所有在同一行组中锚定并且x坐标小于或等于principal_x+principal_width-1且y坐标小于或等于principal_y+principal_height-1的行组标题单元格添加到header list中。
6. 如果principal cell锚定在一个列组中，则将所有在同一列组中锚定并且x坐标小于或等于principal_x+principal_width-1且y坐标小于或等于principal_y+principal_height-1的列组标题单元格添加到header list中。
从header list中移除所有空单元格。
从header list中移除所有重复项。
如果principal cell在header list中，则将其移除。
将header list中的标题分配给principal cell。

扫描和分配标题单元格的内部算法，给定一个principal cell、一个header list、初始坐标(initial_x, initial_y)和Δx和Δy增量，过程如下：

令x等于initial_x。
令y等于initial_y。
令opaque headers为空单元格列表。
如果principal cell是一个标题单元格

令in header block为true，并令headers from current header block为包含principal cell的单元格列表。

否则

令in header block为false，并令headers from current header block为空单元格列表。
循环：将x增加Δx；将y增加Δy。

对于此算法的每次调用，Δx和Δy中的一个将为-1，另一个将为0。
如果x或y小于0，则中止此内部算法。
如果没有单元格覆盖槽(x, y)，或者有多个单元格覆盖槽(x, y)，则返回到标记为循环的子步骤。
令current cell为覆盖槽(x, y)的单元格。
如果current cell是一个标题单元格
1. 设置in header block为true。
2. 将current cell添加到headers from current header block中。
3. 令blocked为false。
4. 如果Δx为0
  
  如果在opaque headers列表中有任何单元格锚定的x坐标与current cell相同，且宽度与current cell相同，则令blocked为true。
  
  如果current cell不是列标题，则令blocked为true。
  
  如果Δy为0
  
  如果在opaque headers列表中有任何单元格锚定的y坐标与current cell相同，且高度与current cell相同，则令blocked为true。
  
  如果current cell不是行标题，则令blocked为true。
5. 如果blocked为false，则将current cell添加到header list中。
如果current cell是一个数据单元格且in header block为true

设置in header block为false。将headers from current header block中的所有单元格添加到opaque headers列表中，并清空headers from current header block列表。
返回到标记为循环的步骤。

锚定在坐标(x, y)、宽度为width、高度为height的槽上的标题单元格，如果符合以下任一条件，则称为列标题：

该单元格的scope属性处于列状态；或
该单元格的scope属性处于自动状态，并且在覆盖y坐标y .. y+height-1的槽上的任何单元格中没有数据单元格。

锚定在坐标(x, y)、宽度为width、高度为height的槽上的标题单元格，如果符合以下任一条件，则称为行标题：

该单元格的scope属性处于行状态；或
该单元格的scope属性处于自动状态，该单元格不是列标题，并且在覆盖x坐标x .. x+width-1的槽上的任何单元格中没有数据单元格。

如果其scope属性处于列组状态，则该标题单元格称为列组标题。

如果其scope属性处于行组状态，则该标题单元格称为行组标题。

如果单元格不包含任何元素，并且其子文本内容（如果有的话）仅由ASCII空白字符组成，则称为空单元格。

4.9.13 示例

本节为非规范性内容。

以下显示了如何标记《史密森物理表，第71卷》表45的底部部分：

<table>
 <caption>Specification values: <b>Steel</b>, <b>Castings</b>,
 Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption>
 <thead>
  <tr>
   <th rowspan=2>Grade.</th>
   <th rowspan=2>Yield Point.</th>
   <th colspan=2>Ultimate tensile strength</th>
   <th rowspan=2>Per cent elong. 50.8&nbsp;mm or 2&nbsp;in.</th>
   <th rowspan=2>Per cent reduct. area.</th>
  </tr>
  <tr>
   <th>kg/mm<sup>2</sup></th>
   <th>lb/in<sup>2</sup></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Hard</td>
   <td>0.45 ultimate</td>
   <td>56.2</td>
   <td>80,000</td>
   <td>15</td>
   <td>20</td>
  </tr>
  <tr>
   <td>Medium</td>
   <td>0.45 ultimate</td>
   <td>49.2</td>
   <td>70,000</td>
   <td>18</td>
   <td>25</td>
  </tr>
  <tr>
   <td>Soft</td>
   <td>0.45 ultimate</td>
   <td>42.2</td>
   <td>60,000</td>
   <td>22</td>
   <td>30</td>
  </tr>
 </tbody>
</table>

该表可能如下所示：

规格值：钢，铸件，ASTM A27-16年，B类；* P最大值0.06；S最大值0.05。
等级。	屈服点。	极限抗拉强度		延伸率。50.8 mm或 2 英寸。	截面收缩率。
等级。	屈服点。	kg/mm²	lb/in²	延伸率。50.8 mm或 2 英寸。	截面收缩率。
硬	0.45 极限	56.2	80,000	15	20
中	0.45 极限	49.2	70,000	18	25
软	0.45 极限	42.2	60,000	22	30

以下显示了如何标记Apple, Inc. 2008财年10-K文件第46页上的毛利表：

<table>
 <thead>
  <tr>
   <th>
   <th>2008
   <th>2007
   <th>2006
 <tbody>
  <tr>
   <th>Net sales
   <td>$ 32,479
   <td>$ 24,006
   <td>$ 19,315
  <tr>
   <th>Cost of sales
   <td>  21,334
   <td>  15,852
   <td>  13,717
 <tbody>
  <tr>
   <th>Gross margin
   <td>$ 11,145
   <td>$  8,154
   <td>$  5,598
 <tfoot>
  <tr>
   <th>Gross margin percentage
   <td>34.3%
   <td>34.0%
   <td>29.0%
</table>

该表可能如下所示：

	2008	2007	2006
净销售额	$ 32,479	$ 24,006	$ 19,315
销售成本	21,334	15,852	13,717
毛利	$ 11,145	$ 8,154	$ 5,598
毛利率	34.3%	34.0%	29.0%

以下显示了如何标记同一文件页下方的运营费用表：

<table>
 <colgroup> <col>
 <colgroup> <col> <col> <col>
 <thead>
  <tr> <th> <th>2008 <th>2007 <th>2006
 <tbody>
  <tr> <th scope=rowgroup> Research and development
       <td> $ 1,109 <td> $ 782 <td> $ 712
  <tr> <th scope=row> Percentage of net sales
       <td> 3.4% <td> 3.3% <td> 3.7%
 <tbody>
  <tr> <th scope=rowgroup> Selling, general, and administrative
       <td> $ 3,761 <td> $ 2,963 <td> $ 2,433
  <tr> <th scope=row> Percentage of net sales
       <td> 11.6% <td> 12.3% <td> 12.6%
</table>

该表可能如下所示：

	2008	2007	2006
研发	$ 1,109	$ 782	$ 712
净销售额百分比	3.4%	3.3%	3.7%
销售、一般和行政	$ 3,761	$ 2,963	$ 2,433
净销售额百分比	11.6%	12.3%	12.6%

4.10 表单

Element#Forms

所有当前引擎均支持。

Firefox4+Safari4+Chrome61+

Opera52+Edge79+

Edge (旧版)16+Internet Explorer10+

Firefox Android5+Safari iOS3.2+Chrome Android61+WebView Android61+Samsung Internet8.0+Opera Android47+

4.10.1 介绍

本节为非规范性内容。

表单是网页的一个组件，包含表单控件，如文本框、按钮、复选框、范围选择器或颜色选择器控件。用户可以与这些表单进行交互，提供数据，然后可以将这些数据发送到服务器进行进一步处理（例如返回搜索或计算的结果）。在许多情况下，不需要客户端脚本，尽管提供了一个API，以便脚本可以增强用户体验或将表单用于提交数据到服务器以外的目的。

编写表单包括几个步骤，这些步骤可以按任何顺序执行：编写用户界面、实现服务器端处理以及配置用户界面与服务器通信。

4.10.1.1 编写表单的用户界面

本节为非规范性内容。

为了简单介绍，我们将创建一个披萨订购表单。

任何表单都从一个form元素开始，控件放在其中。大多数控件由input元素表示，该元素默认提供文本控件。要为控件添加标签，使用label元素；标签文本和控件本身放在label元素内。表单的每个部分都被视为一个段落，通常使用p元素与其他部分分隔。结合这些元素，下面是如何询问客户姓名的示例：

<form>
 <p><label>Customer name: <input></label></p>
</form>

为了让用户选择披萨的大小，我们可以使用一组单选按钮。单选按钮也使用input元素，这次带有值为type属性为radio。为了使单选按钮作为一组工作，它们使用name属性赋予一个共同的名称。为了将一批控件组合在一起，例如在这种情况下的单选按钮，可以使用fieldset元素。这样一组控件的标题由fieldset中的第一个元素给出，该元素必须是legend元素。

<form>
 <p><label>Customer name: <input></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
</form>

从上一步的变化已突出显示。

为了选择配料，我们可以使用复选框。这些使用input元素，其type属性值为checkbox：

<form>
 <p><label>Customer name: <input></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
</form>

这个披萨店总是出错，所以需要一种方法联系客户。为此，我们可以使用专门用于电话号码的表单控件（input元素，其type属性设置为tel）和电子邮件地址（input元素，其type属性设置为email）：

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>Email address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
</form>

我们可以使用input元素，其type属性设置为time来询问送货时间。许多这些表单控件都有属性来精确控制可以指定的值；在这种情况下，特别感兴趣的三个属性是min，max和step。这些设置了最小时间、最大时间和允许值之间的间隔（以秒为单位）。这家披萨店只在上午11点到晚上9点之间送货，不承诺超过15分钟的增量，可以如下标记：

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>Email address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
</form>

textarea元素可用于提供多行文本控件。在这种情况下，我们将使用它为客户提供一个填写送货说明的空间：

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>Email address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
 <p><label>Delivery instructions: <textarea></textarea></label></p>
</form>

最后，为了使表单可提交，我们使用button元素：

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>Email address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
 <p><label>Delivery instructions: <textarea></textarea></label></p>
 <p><button>Submit order</button></p>
</form>

4.10.1.2 实现表单的服务器端处理

本节为非规范性内容。

编写服务器端处理器的具体细节不在本规范范围内。为了介绍的目的，我们假设https://pizza.example.com/order.cgi上的脚本配置为接受使用application/x-www-form-urlencoded格式的提交，期望在HTTP POST主体中发送以下参数：

custname: 顾客的姓名
custtel: 顾客的电话号码
custemail: 顾客的电子邮件地址
size: 披萨尺寸，值可以是small，medium或large
topping: 一种配料，每选一个配料就指定一次，允许的值是bacon，cheese，onion和mushroom
delivery: 请求的送货时间
comments: 送货说明

4.10.1.3 配置表单与服务器通信

本节为非规范性内容。

表单提交通过多种方式暴露给服务器，最常见的是HTTP GET或POST请求。为了指定使用的具体方法，在method属性中进行指定。这并不指定表单数据的编码方式；要指定这个，需要使用enctype属性。还必须使用action属性指定将处理提交数据的服务的URL。

对于每个要提交的表单控件，必须给出一个名称，以便在提交中引用该数据。我们已经为一组单选按钮指定了名称；同样的属性（name）也指定了提交名称。通过为单选按钮提供不同的值（使用value属性），可以在提交中将它们区分开。

多个控件可以具有相同的名称；例如，这里我们给所有复选框相同的名称，服务器通过查看以该名称提交的值来区分哪个复选框被选中——就像单选按钮一样，它们也使用value属性给出了唯一的值。

根据上一节中的设置，这些都变成：

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname"></label></p>
 <p><label>Telephone: <input type=tel name="custtel"></label></p>
 <p><label>Email address: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size value="small"> Small </label></p>
  <p><label> <input type=radio name=size value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery"></label></p>
 <p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
 <p><button>Submit order</button></p>
</form>

某些属性的值带引号而其他的不带引号，并没有特别的意义。HTML语法允许多种同样有效的方式来指定属性，如语法部分讨论的那样。

例如，如果顾客输入“Denise Lawrence”作为姓名，“555-321-8642”作为电话号码，没有指定电子邮件地址，选择了中号披萨，选择了额外的奶酪和蘑菇配料，输入了晚上7点的送货时间，并且将送货说明文本控件留空，用户代理将向在线网络服务提交以下内容：

custname=Denise+Lawrence&custtel=555-321-8642&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00&comments=

4.10.1.4 客户端表单验证

Form_validation

Support in all current engines.

Firefox4+Safari5+Chrome4+

Opera≤12.1+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android?Safari iOS4+Chrome Android?WebView Android≤37+Samsung Internet?Opera Android≤12.1+

本节为非规范性内容。

表单可以进行注释，以便用户代理在表单提交之前检查用户的输入。服务器仍然需要验证输入是否有效（因为恶意用户可以轻松绕过表单验证），但这允许用户避免仅由服务器检查用户输入所带来的等待。

最简单的注释是required属性，可以在input元素上指定，以表明在给出值之前不提交表单。通过将此属性添加到客户姓名、披萨大小和送货时间字段，当用户在未填写这些字段的情况下提交表单时，用户代理会通知用户：

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname" required></label></p>
 <p><label>Telephone: <input type=tel name="custtel"></label></p>
 <p><label>Email address: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size required value="small"> Small </label></p>
  <p><label> <input type=radio name=size required value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size required value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
 <p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
 <p><button>Submit order</button></p>
</form>

还可以使用maxlength属性来限制输入的长度。通过将此属性添加到textarea元素，我们可以将用户限制为1000个字符，防止他们写出大量的文章而不是简明扼要的送货说明：

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname" required></label></p>
 <p><label>Telephone: <input type=tel name="custtel"></label></p>
 <p><label>Email address: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size required value="small"> Small </label></p>
  <p><label> <input type=radio name=size required value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size required value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
 <p><label>Delivery instructions: <textarea name="comments" maxlength=1000></textarea></label></p>
 <p><button>Submit order</button></p>
</form>

当表单提交时，会在每个无效的表单控件上触发invalid事件。这对于显示表单问题的摘要很有用，因为通常浏览器本身只会一次报告一个问题。

4.10.1.5 启用客户端自动填充表单控件

本节为非规范性内容。

一些浏览器尝试通过自动填充表单控件来帮助用户，而不是每次都让用户重新输入他们的信息。例如，一个请求用户电话号码的字段可以自动填充用户的电话号码。

为了帮助用户代理实现这一点，可以使用autocomplete属性来描述字段的用途。在此表单的情况下，有三个字段可以这样注释：关于披萨的收件人信息。添加这些信息如下所示：

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname" required autocomplete="shipping name"></label></p>
 <p><label>Telephone: <input type=tel name="custtel" autocomplete="shipping tel"></label></p>
 <p><label>Email address: <input type=email name="custemail" autocomplete="shipping email"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size required value="small"> Small </label></p>
  <p><label> <input type=radio name=size required value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size required value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
 <p><label>Delivery instructions: <textarea name="comments" maxlength=1000></textarea></label></p>
 <p><button>Submit order</button></p>
</form>

4.10.1.6 改善移动设备上的用户体验

本节为非规范性内容。

某些设备，特别是那些带有虚拟键盘的设备，可以为用户提供多种输入模式。例如，当输入信用卡号码时，用户可能只希望看到数字键（0-9），而在输入他们的名字时，他们可能希望看到默认情况下每个单词首字母大写的表单字段。

使用inputmode属性，我们可以选择合适的输入模式：

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname" required autocomplete="shipping name"></label></p>
 <p><label>Telephone: <input type=tel name="custtel" autocomplete="shipping tel"></label></p>
 <p><label>Buzzer code: <input name="custbuzz" inputmode="numeric"></label></p>
 <p><label>Email address: <input type=email name="custemail" autocomplete="shipping email"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size required value="small"> Small </label></p>
  <p><label> <input type=radio name=size required value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size required value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
 <p><label>Delivery instructions: <textarea name="comments" maxlength=1000></textarea></label></p>
 <p><button>Submit order</button></p>
</form>

4.10.1.7 字段类型、自动填充字段名称和输入模式之间的区别

本节为非规范性内容。

type、autocomplete和inputmode属性看起来似乎很相似。例如，在这三种情况下，字符串“email”都是有效的值。本节试图说明这三个属性之间的区别，并提供如何使用它们的建议。

type属性在input元素上决定了用户代理将使用哪种控件来显示该字段。在选择该属性的不同值时，就像在选择是使用input元素、textarea元素、select元素等。

相反，autocomplete属性描述了用户将输入的值实际代表什么。在选择该属性的不同值时，就像在选择元素的标签是什么。

首先，考虑电话号码。如果一个页面要求用户提供电话号码，那么应该使用的表单控件是<input type=tel>。但是，使用哪个autocomplete值取决于页面要求的电话号码是哪种，是国际格式的电话号码还是本地格式的电话号码，等等。

例如，一个电商网站的结账过程中要求用户提供买家的电话号码（以防付款问题）和朋友的电话号码（以防配送问题）。如果网站期望国际电话号码（带国家代码前缀），那么可能如下所示：

<p><label>Your phone number: <input type=tel name=custtel autocomplete="billing tel"></label>
<p><label>Recipient's phone number: <input type=tel name=shiptel autocomplete="shipping tel"></label>
<p>Please enter complete phone numbers including the country code prefix, as in "+1 555 123 4567".

但是，如果网站仅支持英国客户和收件人，则可能如下所示（注意使用了tel-national而不是tel）：

<p><label>Your phone number: <input type=tel name=custtel autocomplete="billing tel-national"></label>
<p><label>Recipient's phone number: <input type=tel name=shiptel autocomplete="shipping tel-national"></label>
<p>Please enter complete UK phone numbers, as in "(01632) 960 123".

现在，考虑一个人的首选语言。正确的autocomplete值是language。然而，可能有许多不同的表单控件可以用于此目的：文本控件（<input type=text>），下拉列表（<select>），单选按钮（<input type=radio>），等等。这仅取决于所需的界面类型。

最后，考虑名字。如果页面只想从用户那里获取一个名字，那么相关的控件是<input type=text>。如果页面要求用户的全名，那么相关的autocomplete值是name。

<p><label>Japanese name: <input name="j" type="text" autocomplete="section-jp name"></label>
<label>Romanized name: <input name="e" type="text" autocomplete="section-en name"></label>

在这个例子中，section-*关键字在autocomplete属性的值中告诉用户代理，这两个字段期望不同的名称。如果没有这些关键字，当用户在第一个字段中输入值时，用户代理可能会自动将第一个字段的值填入第二个字段中。

关键词中的"-jp"和"-en"部分对用户代理是透明的；用户代理无法从这些部分猜测出两个名字分别应为日语和英语。

除了关于type和autocomplete的选择外，inputmode属性决定了在控件是文本控件时使用何种输入模式（例如，虚拟键盘）。

考虑信用卡号码。适当的输入类型不是<input type=number>，而是<input type=text>。为了鼓励用户代理仍然使用数字输入模式（例如，只显示数字的虚拟键盘），页面可以使用

<p><label>Credit card number:
                <input name="cc" type="text" inputmode="numeric" pattern="[0-9]{8,19}" autocomplete="cc-number">
</label></p>

4.10.1.8 日期、时间和数字格式

本节是非规范性的。

在这个披萨配送的例子中，时间的格式是“HH:MM”：两个数字表示小时（24小时制），两个数字表示分钟。（秒数也可以指定，但在这个例子中没有必要。）

然而，在某些地区，时间呈现给用户时的格式可能不同。例如，在美国，仍然常用12小时制并带有上午/下午指示，如“2pm”。在法国，常用“h”字符分隔小时和分钟，如“14h00”。

日期也存在类似的问题，此外，日期组件的顺序并不总是一致的——例如，在塞浦路斯，2003年2月1日通常写作“1/2/03”，而在日本，同一日期通常写作“2003年02月01日”——即使是数字，在不同地区使用的标点符号也可能不同，例如作为小数点和千位分隔符的标点符号。

因此，有必要区分HTML和表单提交中使用的时间、日期和数字格式（这些格式始终是本规范中定义的格式，并基于广泛使用的ISO 8601标准，用于计算机可读的日期和时间格式），与浏览器向用户呈现的时间、日期和数字格式以及用户输入的格式。

“在线传输”的格式，即HTML标记和表单提交中的格式，旨在使计算机可读且与用户的区域设置无关。例如，日期总是以“YYYY-MM-DD”的格式书写，如“2003-02-01”。虽然有些用户可能会看到这种格式，但其他人可能会看到“01.02.2003”或“2003年2月1日”。

页面中给出的“在线传输”格式时间、日期或数字在显示给用户之前，会转换为用户的首选呈现方式（基于用户偏好或页面本身的区域设置）。同样，在用户使用其首选格式输入时间、日期或数字之后，用户代理会在将其放入DOM或提交之前将其转换回“在线传输”格式。

这样，页面和服务器上的脚本可以以一致的方式处理时间、日期和数字，而不需要支持几十种不同的格式，同时仍能满足用户的需求。

另请参见有关表单控件本地化的实现说明。

4.10.2 类别

主要是由于历史原因，本节中的元素除了通常的类别，如流内容、短语内容和交互内容外，还属于几个重叠（但稍有不同）的类别。

许多元素是表单关联元素，这意味着它们可以有一个表单所有者。

表单关联元素分为几个子类别：

列出的元素

表示在 form.elements 和 fieldset.elements API 中列出的元素。这些元素还具有一个 form 内容属性，以及相应的 form IDL 属性，允许作者指定明确的表单所有者。

可提交的元素

表示在 form 元素提交时，可用于构建输入项列表的元素。

某些可提交的元素，取决于其属性，可能是按钮。下面的内容定义了元素何时为按钮。有些按钮是特定的提交按钮。

可重置的元素

表示当 form 元素重置时，会受到影响的元素。

自动大写和自动更正继承的元素

表示从其表单所有者继承autocapitalize和autocorrect属性的元素。

一些元素，并非所有元素都是表单关联元素，被归类为可标记元素。这些是可以与label元素关联的元素。

4.10.3 `form` 元素

Element/form

Support in all current engines.

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet ExplorerYes

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLFormElement

Support in all current engines.

Firefox1+Safari3+Chrome1+

Opera8+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

当预期为流内容时.

流内容, 但没有 form 元素的后代.

text/html中的标签省略:

没有标签可以省略.

内容属性:

全局属性

accept-charset — 用于表单提交的字符编码

action — 用于 URL 表单提交

autocomplete — 表单控件自动填充功能的默认设置

enctype — 用于条目列表编码类型表单提交

method — 用于表单提交的变体

name — 在document.formsAPI中的表单名称

novalidate — 绕过表单控件验证表单提交

target — 导航表单提交

rel

[Exposed=Window,
 LegacyOverrideBuiltIns,
 LegacyUnenumerableNamedProperties]
interface HTMLFormElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString acceptCharset;
  [CEReactions] attribute USVString action;
  [CEReactions] attribute DOMString autocomplete;
  [CEReactions] attribute DOMString enctype;
  [CEReactions] attribute DOMString encoding;
  [CEReactions] attribute DOMString method;
  [CEReactions] attribute DOMString name;
  [CEReactions] attribute boolean noValidate;
  [CEReactions] attribute DOMString target;
  [CEReactions] attribute DOMString rel;
  [SameObject, PutForwards=value] readonly attribute DOMTokenList relList;

  [SameObject] readonly attribute HTMLFormControlsCollection elements;
  readonly attribute unsigned long length;
  getter Element (unsigned long index);
  getter (RadioNodeList or Element) (DOMString name);

  undefined submit();
  undefined requestSubmit(optional HTMLElement? submitter = null);
  [CEReactions] undefined reset();
  boolean checkValidity();
  boolean reportValidity();
};

form元素表示一个可以通过一组表单关联元素进行操作的超链接，其中一些可以代表可提交到服务器进行处理的可编辑值。

accept-charset属性给出用于提交的字符编码。如果指定，该值必须是UTF-8的ASCII大小写不敏感匹配。[ENCODING]

name属性表示form在forms集合中的名称。该值不能是空字符串，并且该值在其所在的form元素集合中必须是唯一的。

autocomplete属性是一个枚举属性，具有以下关键字和状态：

关键字	状态	简要描述
`on`	on	表单控件将默认其自动填充字段名称设置为"`on`"。
`off`	off	表单控件将默认其自动填充字段名称设置为"`off`"。

属性的缺省值和无效值默认均为on状态。

action，enctype，method，novalidate，以及target属性是表单提交属性。

rel属性在form元素上控制元素创建的链接类型。属性的值必须是无序的唯一空格分隔的标记集合。允许的关键字及其含义定义在前面的章节中。

rel的支持的标记是HTML链接类型中定义的关键字，这些关键字允许在form元素上使用，影响处理模型，并且由用户代理支持。可能的支持的标记是noreferrer，noopener，以及opener。rel的支持的标记只能包括用户代理实现处理模型的列表中的标记。

form.elements HTMLFormElement/elements Support in all current engines. Firefox1+Safari3+Chrome1+ Opera8+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android? Samsung Internet?Opera Android10.1+

返回表单中的<form>元素控件（出于历史原因，不包括图像按钮）的HTMLFormControlsCollection。

form.length HTMLFormElement/length Support in all current engines. Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回表单中表单控件的数量（出于历史原因，不包括图像按钮）。

form[index]

返回表单中的第index个元素（出于历史原因，不包括图像按钮）。

form[name]

返回具有给定ID或name的表单控件（如果有多个，则返回表单控件的RadioNodeList）；如果没有，则返回具有给定ID的img元素。

一旦使用特定名称引用了某个元素，即使元素的实际ID或name发生变化，只要元素仍在树中，该名称仍可用于引用该元素。

如果有多个匹配项，则返回包含所有这些元素的RadioNodeList对象。

form.submit() HTMLFormElement/submit Support in all current engines. Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

提交表单，绕过交互约束验证，并且不会触发submit事件。

form.requestSubmit([ submitter ]) HTMLFormElement/requestSubmit Support in all current engines. Firefox75+Safari16+Chrome76+ Opera?Edge79+ Edge (旧版)?Internet ExplorerNo Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

请求提交表单。与submit()不同，此方法包括交互约束验证和触发submit事件，这两者都可以取消提交。

可以使用submitter参数指向特定的提交按钮，其formaction，formenctype，formmethod，formnovalidate，以及formtarget属性可以影响提交。此外，在构建提交的条目列表时将包括提交者；通常按钮会被排除。

form.reset() HTMLFormElement/reset Support in all current engines. Firefox1+Safari3+Chrome1+ Opera8+Edge79+ Edge (旧版)12+Internet Explorer5.5+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

重置表单。

form.checkValidity()

如果表单的控件全部有效，则返回true；否则返回false。

form.reportValidity()

如果表单的控件全部有效，则返回true；否则返回false，并通知用户。

autocomplete IDL属性必须反映同名内容属性，仅限于已知值。

HTMLFormElement/name

Support in all current engines.

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

name和rel IDL属性必须反映同名内容属性。

HTMLFormElement/acceptCharset

Support in all current engines.

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

acceptCharset IDL属性必须反映accept-charset内容属性。

relList IDL属性必须反映rel内容属性。

elements IDL属性必须返回一个以HTMLFormControlsCollection为根的form元素的根，其过滤器匹配其表单所有者为form元素的列出元素，但出于历史原因，必须从此特定集合中排除input元素，其type属性处于图像按钮状态。

length IDL属性必须返回elements集合所代表的节点数量。

在任何时刻支持的属性索引是由elements属性返回的对象在该时刻支持的索引。

要确定索引属性的值对于form元素，用户代理必须返回item方法在elements集合上返回的值，当使用给定的索引作为其参数调用时。

每个form元素都有一个称为过去名称映射的名称到元素的映射。它用于在控件更改名称时持久化其名称。

支持的属性名称由以下算法获得的名称组成，按照从该算法获得的顺序：

令sourced names为一个最初为空的有序元组列表，由字符串、元素、来源组成，其中来源可以是id，name，或past，如果来源是past，则还有一个年龄。
对于其表单所有者是form元素的每个列出元素 candidate，但出于历史原因，排除input元素，其type属性处于图像按钮状态：
1. 如果candidate有id属性，则添加一个条目到sourced names，其中该id属性的值作为字符串，candidate作为元素，并将id作为来源。
2. 如果candidate有name属性，则添加一个条目到sourced names，其中该name属性的值作为字符串，candidate作为元素，并将name作为来源。
对于其表单所有者是form元素的每个img元素 candidate：
1. 如果candidate有id属性，则添加一个条目到sourced names，其中该id属性的值作为字符串，candidate作为元素，并将id作为来源。
2. 如果candidate有name属性，则添加一个条目到sourced names，其中该name属性的值作为字符串，candidate作为元素，并将name作为来源。
对于过去名称映射中的每个条目past entry，将一个条目添加到sourced names，其中past entry的名称作为字符串，past entry的元素作为元素，将past作为来源，并且past entry在过去名称映射中存在的时间长度作为年龄。
按每个元组的元素条目的树顺序排序sourced names，将相同元素的条目排序为先按id，然后按name，最后按past，并按相同元素和来源的条目按其年龄排序，最老的排在前面。
删除sourced names中名称为空字符串的条目。
删除sourced names中与前面条目名称相同的条目。
按相对顺序返回sourced names中的名称列表。

要确定命名属性的值name对于form元素，用户代理必须运行以下步骤：

让candidates成为一个实时RadioNodeList对象，包含所有列出元素，其表单所有者是form元素，并且具有等于name的id属性或name属性，但出于历史原因，排除其type属性处于图像按钮状态的input元素，按树顺序排序。
如果candidates为空，让candidates成为一个实时RadioNodeList对象，包含所有img元素，其表单所有者是form元素，并且具有等于name的id属性或name属性，按树顺序排序。
如果candidates为空，并且name是form元素的过去名称映射中的一个条目的名称：返回与该名称相关联的对象在该映射中。
如果candidates包含多个节点，则返回candidates。
否则，candidates只包含一个节点。在form元素的过去名称映射中添加一个从name到candidates中的节点的映射，替换具有相同名称的先前条目（如果有）。
返回candidates中的节点。

如果在form元素的过去名称映射中列出的元素更改了表单所有者，则必须从该映射中删除其条目。

submit()方法步骤是从submit()方法设置为true的状态下提交this。

requestSubmit(submitter)方法在调用时，必须执行以下步骤：

如果submitter不为null，则：
1. 如果submitter不是提交按钮，则抛出TypeError。
2. 如果submitter的表单所有者不是该form元素，则抛出"NotFoundError"DOMException。
否则，将submitter设置为该form元素。
提交此form元素，来自submitter。

reset()方法在调用时，必须执行以下步骤：

如果form元素标记为重置锁定，则返回。
标记form元素为重置锁定。
重置该form元素。
取消标记form元素的重置锁定。

如果调用了checkValidity()方法，用户代理必须静态验证form元素的约束，如果约束验证返回正面结果，则返回true，如果返回负面结果，则返回false。

如果调用了reportValidity()方法，用户代理必须交互验证form元素的约束，如果约束验证返回正面结果，则返回true，如果返回负面结果，则返回false，并通知用户。

此示例显示了两个搜索表单：

<form action="https://www.google.com/search" method="get">
 <label>Google: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form>
<form action="https://www.bing.com/search" method="get">
 <label>Bing: <input type="search" name="q"></label> <input type="submit" value="Search...">
</form>

4.10.4 `label` 元素

Element/label

支持所有当前的引擎。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLLabelElement

支持所有当前的引擎。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

流内容。

交互内容。

期望短语内容的地方。

短语内容，但无后代可标记元素，除非它是元素的标记控件，并且无后代 label 元素。

在 text/html 中省略标签:

两个标签都不可省略。

for — 将标签与表单控件关联

[Exposed=Window]
interface HTMLLabelElement : HTMLElement {
  [HTMLConstructor] constructor();

  readonly attribute HTMLFormElement? form;
  [CEReactions] attribute DOMString htmlFor;
  readonly attribute HTMLElement? control;
};

label 元素表示用户界面中的一个标题。标题可以与特定的表单控件关联，称为 label 元素的标记控件，可以使用 for 属性，或通过将表单控件放在 label 元素内来实现。

除以下规则另有规定外，label 元素没有标记控件。

Attributes/for

支持所有当前的引擎。

Firefox1+Safari4+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

for 属性可以被指定，以指示要关联的表单控件。如果指定了该属性，其值必须是与 label 元素在同一树中的可标记元素的 ID。如果指定了该属性并且树中有一个元素的 ID 等于 for 属性的值，并且树序中第一个这样的元素是一个可标记元素，那么该元素就是 label 元素的标记控件。

如果未指定 for 属性，但 label 元素有一个可标记元素后代，那么树序中的第一个这样的后代是 label 元素的标记控件。

label 元素的确切默认呈现和行为，尤其是其激活行为，如果有的话，应与平台的标签行为相匹配。针对事件目标为 label 元素的交互内容后代及这些交互内容后代的任何后代的交互内容的激活行为必须什么都不做。

表单关联的自定义元素是可标记元素，因此对于那些 label 元素的激活行为影响到标记控件的用户代理，无论是内置元素还是自定义元素都会受到影响。

例如，在点击标签激活表单控件的平台上，点击以下代码中的 label 可能会触发用户代理对 input 元素触发点击事件，就像用户直接触发了该元素一样：

<label><input type=checkbox name=lost> Lost</label>

类似地，假设 my-checkbox 被声明为一个表单关联的自定义元素（如这个例子），那么以下代码

<label><my-checkbox name=lost></my-checkbox> Lost</label>

也会有相同的行为，对 my-checkbox 元素触发点击事件。

在其他平台上，这两种情况下的行为可能只是聚焦控件，或什么都不做。

以下示例显示了三个每个都有标签的表单控件，其中两个标签显示了用户使用的正确格式。

<p><label>全名: <input name=fn></input></label></p>
<p><label>年龄: <input name=age type=number min=0></label></p>
<p><label>邮政编码: <input name=pc></input></label></p>

label.control HTMLLabelElement/control 支持所有当前的引擎。 Firefox4+Safari5.1+Chrome6+ Opera12.1+Edge79+ Edge (旧版)18Internet Explorer否 Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+

返回与此元素关联的表单控件。

label.form HTMLLabelElement/form 支持所有当前的引擎。 Firefox1+Safari3+Chrome1+ Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer6+ Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回与此元素关联的表单控件的表单所有者。

如果没有则返回 null。

HTMLLabelElement/htmlFor

支持所有当前的引擎。

Firefox1+Safari3+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

htmlFor IDL 属性必须反映 for 内容属性。

control IDL 属性必须返回 label 元素的标记控件，如果有的话，否则返回 null。

form IDL 属性必须执行以下步骤：

如果 label 元素没有标记控件，则返回 null。
如果 label 元素的标记控件不是表单关联元素，则返回 null。
返回 label 元素的标记控件的表单所有者（仍然可以是 null）。

form IDL 属性与 label 元素上的 form IDL 属性不同，label 元素没有 form 内容属性。

control.labels HTMLButtonElement/labels 支持所有当前的引擎。 Firefox56+Safari5.1+Chrome6+ Opera12.1+Edge79+ Edge (旧版)18Internet Explorer否 Firefox Android?Safari iOS?Chrome Android?WebView Android3+ Samsung Internet?Opera Android12.1+ HTMLInputElement/labels 支持所有当前的引擎。 Firefox56+Safari5+Chrome6+ Opera12.1+Edge79+ Edge (旧版)18Internet Explorer否 Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+ HTMLMeterElement/labels 支持所有当前的引擎。 Firefox56+Safari6+Chrome6+ Opera12.1+Edge79+ Edge (旧版)18Internet Explorer否 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ HTMLOutputElement/labels 支持所有当前的引擎。 Firefox56+Safari5.1+Chrome9+ Opera12.1+Edge79+ Edge (旧版)18Internet Explorer否 Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+ HTMLProgressElement/labels 支持所有当前的引擎。 Firefox56+Safari6+Chrome6+ Opera12.1+Edge79+ Edge (旧版)18Internet Explorer否 Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ HTMLSelectElement/labels 支持所有当前的引擎。 Firefox56+Safari5.1+Chrome6+ Opera12.1+Edge79+ Edge (旧版)18Internet Explorer否 Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+ HTMLTextAreaElement/labels 支持所有当前的引擎。 Firefox56+Safari5.1+Chrome6+ Opera12.1+Edge79+ Edge (旧版)18Internet Explorer否 Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android12.1+: 返回与表单控件关联的所有 NodeList。

可标记元素和所有 input 元素都有一个 live NodeList 对象，表示按树序排列的 label 元素列表，其标记控件是相应的元素。不是表单关联的自定义元素的可标记元素的 labels IDL 属性和 labels IDL 属性，在获取时，必须返回该 NodeList 对象，并且必须始终返回相同的值，除非此元素是 input 元素，其 type 属性处于隐藏状态，则它必须返回 null。

ElementInternals/labels

支持所有当前的引擎。

Firefox98+Safari16.4+Chrome77+

Opera?Edge79+

Edge (旧版)?Internet Explorer否

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

表单关联的自定义元素没有 labels IDL 属性。相反，它们的 ElementInternals 对象有一个 labels IDL 属性。在获取时，如果目标元素不是表单关联的自定义元素，则它必须抛出一个 "NotSupportedError" DOMException。否则，它必须返回该 NodeList 对象，并且始终返回相同的值。

此（不合规）示例显示了当 NodeList 发生变化时以及 labels 返回什么内容时，input 元素的 type 属性发生变化。

<!doctype html>
<p><label><input></label></p>
<script>
 const input = document.querySelector('input');
 const labels = input.labels;
 console.assert(labels.length === 1);

 input.type = 'hidden';
 console.assert(labels.length === 0); // the input is no longer the label's labeled control
 console.assert(input.labels === null);

 input.type = 'checkbox';
 console.assert(labels.length === 1); // the input is once again the label's labeled control
 console.assert(input.labels === labels); // same value as returned originally
</script>

4.10.5 `input` 元素

Element/input

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android1+Samsung Internet?Opera Android12.1+

Element/input

HTMLInputElement

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+

Opera8+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+

类别:

流内容.

短语内容.

如果 type 属性不是隐藏状态: 交互内容.

如果 type 属性不是隐藏状态：列出的、可标记的、可提交的、可重置的，以及自动大写和自动更正继承的与表单关联的元素。

如果 type 属性是隐藏状态：列出的、可提交的、可重置的，以及自动大写和自动更正继承的与表单关联的元素。

如果 type 属性不是隐藏状态: 显著内容.

该元素可用于的上下文:

期望短语内容的地方。

内容模型:

无.

在 text/html 中标签省略:

无结束标签.

内容属性:

全局属性

accept — 在文件上传控件中提示期望的文件类型

alt — 在图像不可用时使用的替代文本

autocomplete — 表单自动填充功能的提示

checked — 控件是否被选中

dirname — 用于发送元素的方向性的表单控件名称，在表单提交中

disabled — 表单控件是否禁用

form — 将元素与 表单 元素关联

formaction — 用于表单提交的 URL

formenctype — 用于表单提交的条目列表编码类型

formmethod — 用于表单提交的变体

formnovalidate — 在表单提交时绕过表单控件验证

formtarget — 导航用于表单提交

height — 垂直尺寸

list — 自动完成选项列表

max — 最大值

maxlength — 值的最大长度

min — 最小值

minlength — 值的最小长度

multiple — 是否允许多个值

name — 用于表单提交和 form.elements API 中使用的元素名称

pattern — 表单控件值应匹配的模式

placeholder — 用户可见的标签，放置在表单控件内

popovertarget — 目标为显示、隐藏或切换的弹出元素

popovertargetaction — 指示目标弹出元素是显示、隐藏还是切换

readonly — 是否允许用户编辑值

required — 控件是否在表单提交时必需

size — 控件大小

src — 资源地址

step — 表单控件值应匹配的粒度

type — 表单控件类型

value — 表单控件的值

width — 水平尺寸

此外，title 属性在此元素上具有特殊语义：模式的描述（与 pattern 属性一起使用时）

无障碍性考虑:

type 属性在隐藏状态: 供作者使用; 供实现者使用.

type 属性在文本状态: 供作者使用; 供实现者使用.

type 属性在搜索状态: 供作者使用; 供实现者使用.

type 属性在电话状态: 供作者使用; 供实现者使用.

type 属性在 URL 状态: 供作者使用; 供实现者使用.

type 属性在电子邮件状态: 供作者使用; 供实现者使用.

type 属性在密码状态: 供作者使用; 供实现者使用.

type 属性在日期状态: 供作者使用; 供实现者使用.

type 属性在月份状态: 供作者使用; 供实现者使用.

type 属性在周状态: 供作者使用; 供实现者使用.

type 属性在时间状态: 供作者使用; 供实现者使用.

type 属性在本地日期和时间状态: 供作者使用; 供实现者使用.

type 属性在数字状态: 供作者使用; 供实现者使用.

type 属性在范围状态: 供作者使用; 供实现者使用.

type 属性在颜色状态: 供作者使用; 供实现者使用.

type 属性在复选框状态: 供作者使用; 供实现者使用.

type 属性在单选按钮状态: 供作者使用; 供实现者使用.

type 属性在文件上传状态: 供作者使用; 供实现者使用.

type 属性在提交按钮状态: 供作者使用; 供实现者使用.

type 属性在图像按钮状态: 供作者使用; 供实现者使用.

type 属性在重置按钮状态: 供作者使用; 供实现者使用.

type 属性在按钮状态: 供作者使用; 供实现者使用.

DOM 接口:

[Exposed=Window]
interface HTMLInputElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString accept;
  [CEReactions] attribute DOMString alt;
  [CEReactions] attribute DOMString autocomplete;
  [CEReactions] attribute boolean defaultChecked;
  attribute boolean checked;
  [CEReactions] attribute DOMString dirName;
  [CEReactions] attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
  attribute FileList? files;
  [CEReactions] attribute USVString formAction;
  [CEReactions] attribute DOMString formEnctype;
  [CEReactions] attribute DOMString formMethod;
  [CEReactions] attribute boolean formNoValidate;
  [CEReactions] attribute DOMString formTarget;
  [CEReactions] attribute unsigned long height;
  attribute boolean indeterminate;
  readonly attribute HTMLDataListElement? list;
  [CEReactions] attribute DOMString max;
  [CEReactions] attribute long maxLength;
  [CEReactions] attribute DOMString min;
  [CEReactions] attribute long minLength;
  [CEReactions] attribute boolean multiple;
  [CEReactions] attribute DOMString name;
  [CEReactions] attribute DOMString pattern;
  [CEReactions] attribute DOMString placeholder;
  [CEReactions] attribute boolean readOnly;
  [CEReactions] attribute boolean required;
  [CEReactions] attribute unsigned long size;
  [CEReactions] attribute USVString src;
  [CEReactions] attribute DOMString step;
  [CEReactions] attribute DOMString type;
  [CEReactions] attribute DOMString defaultValue;
  [CEReactions] attribute [LegacyNullToEmptyString] DOMString value;
  attribute object? valueAsDate;
  attribute unrestricted double valueAsNumber;
  [CEReactions] attribute unsigned long width;

  undefined stepUp(optional long n = 1);
  undefined stepDown(optional long n = 1);

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  boolean reportValidity();
  undefined setCustomValidity(DOMString error);

  readonly attribute NodeList? labels;

  undefined select();
  attribute unsigned long? selectionStart;
  attribute unsigned long? selectionEnd;
  attribute DOMString? selectionDirection;
  undefined setRangeText(DOMString replacement);
  undefined setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");
  undefined setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);

  undefined showPicker();

  // also has obsolete members
};
HTMLInputElement includes PopoverInvokerElement;

input 元素表示一个类型化的数据字段，通常带有一个表单控件，允许用户编辑数据。

type 属性控制元素的数据类型（及相关控件）。它是一个枚举属性，具有以下关键字和状态：

关键字	状态	数据类型	控件类型
`hidden`	隐藏	任意字符串	不适用
`text`	文本	无换行符的文本	文本控件
`search`	搜索	无换行符的文本	搜索控件
`tel`	电话	无换行符的文本	文本控件
`url`	URL	绝对 URL	文本控件
`email`	电子邮件	一个或多个电子邮件地址	文本控件
`password`	密码	无换行符的文本（敏感信息）	隐藏数据输入的文本控件
`date`	日期	不带时区的日期（年、月、日）	日期控件
`month`	月份	不带时区的日期（年和月）	月份控件
`week`	周	不带时区的日期（周年号和周号）	周控件
`time`	时间	不带时区的时间（小时、分钟、秒、分秒）	时间控件
`datetime-local`	本地日期和时间	不带时区的日期和时间（年、月、日、小时、分钟、秒、分秒）	日期和时间控件
`number`	数字	数值	文本控件或微调控件
`range`	范围	数值，但具有额外的语义，即确切值并不重要	滑块控件或类似控件
`color`	颜色	具有 8 位红、绿、蓝组件的 sRGB 颜色	颜色选择器
`checkbox`	复选框	从预定义列表中选择零个或多个值	复选框
`radio`	单选按钮	枚举值	单选按钮
`file`	文件上传	零个或多个文件，每个文件都有一个 MIME 类型和（可选的）文件名	标签和按钮
`submit`	提交按钮	枚举值，具有额外的语义，即它必须是最后选择的值，并启动表单提交	按钮
`image`	图像按钮	相对于特定图像大小的坐标，具有额外的语义，即它必须是最后选择的值，并启动表单提交	可点击的图像或按钮
`reset`	重置按钮	不适用	按钮
`button`	按钮	不适用	按钮

属性的 缺失值默认 和 无效值默认 都是文本状态。

哪些 accept, alt, autocomplete, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, required, size, src, step, 和 width 内容属性， checked, files, valueAsDate, valueAsNumber, 和 list IDL 属性， select() 方法， selectionStart, selectionEnd, 和 selectionDirection, IDL 属性， setRangeText() 和 setSelectionRange() 方法， stepUp() 和 stepDown() 方法，以及 input 和 change 事件适用于 input 元素取决于其 type 属性的状态。定义每种类型的子部分也在规范的“簿记”部分中明确规定了这些功能中的哪些适用，哪些不适用于每种类型。这些功能的行为取决于它们是否适用，如各自部分中定义的（例如内容属性，API，事件）。

下表是非规范性的，概述了哪些内容属性、IDL 属性、方法和事件适用于每种状态：

	隐藏	文本, 搜索	电话, URL	电子邮件	密码	日期, 月份, 周, 时间	本地日期和时间	数字	范围	颜色	复选框, 单选按钮	文件上传	提交按钮	图片按钮	重置按钮, 按钮
内容属性
`accept`	·	·	·	·	·	·	·	·	·	·	·	是	·	·	·
`alt`	·	·	·	·	·	·	·	·	·	·	·	·	·	是	·
`autocomplete`	是	是	是	是	是	是	是	是	是	是	·	·	·	·	·
`checked`	·	·	·	·	·	·	·	·	·	·	是	·	·	·	·
`dirname`	是	是	是	是	是	·	·	·	·	·	·	·	是	·	·
`formaction`	·	·	·	·	·	·	·	·	·	·	·	·	是	是	·
`formenctype`	·	·	·	·	·	·	·	·	·	·	·	·	是	是	·
`formmethod`	·	·	·	·	·	·	·	·	·	·	·	·	是	是	·
`formnovalidate`	·	·	·	·	·	·	·	·	·	·	·	·	是	是	·
`formtarget`	·	·	·	·	·	·	·	·	·	·	·	·	是	是	·
`height`	·	·	·	·	·	·	·	·	·	·	·	·	·	是	·
`list`	·	是	是	是	·	是	是	是	是	是	·	·	·	·	·
`max`	·	·	·	·	·	是	是	是	是	·	·	·	·	·	·
`maxlength`	·	是	是	是	是	·	·	·	·	·	·	·	·	·	·
`min`	·	·	·	·	·	是	是	是	是	·	·	·	·	·	·
`minlength`	·	是	是	是	是	·	·	·	·	·	·	·	·	·	·
`multiple`	·	·	·	是	·	·	·	·	·	·	·	是	·	·	·
`pattern`	·	是	是	是	是	·	·	·	·	·	·	·	·	·	·
`placeholder`	·	是	是	是	是	·	·	是	·	·	·	·	·	·	·
`popovertarget`	·	·	·	·	·	·	·	·	·	·	·	·	是	是	是
`popovertargetaction`	·	·	·	·	·	·	·	·	·	·	·	·	是	是	是
`readonly`	·	是	是	是	是	是	是	是	·	·	·	·	·	·	·
`required`	·	是	是	是	是	是	是	是	·	·	是	是	·	·	·
`size`	·	是	是	是	是	·	·	·	·	·	·	·	·	·	·
`src`	·	·	·	·	·	·	·	·	·	·	·	·	·	是	·
`step`	·	·	·	·	·	是	是	是	是	·	·	·	·	·	·
`width`	·	·	·	·	·	·	·	·	·	·	·	·	·	是	·
IDL 属性和方法
`checked`	·	·	·	·	·	·	·	·	·	·	是	·	·	·	·
`files`	·	·	·	·	·	·	·	·	·	·	·	是	·	·	·
`value`	default	value	value	value	value	value	value	value	value	value	default/on	filename	default	default	default
`valueAsDate`	·	·	·	·	·	是	·	·	·	·	·	·	·	·	·
`valueAsNumber`	·	·	·	·	·	是	是	是	是	·	·	·	·	·	·
`list`	·	是	是	是	·	是	是	是	是	是	·	·	·	·	·
`select()`	·	是	是	是†	是	是†	是†	是†	·	是†	·	是†	·	·	·
`selectionStart`	·	是	是	·	是	·	·	·	·	·	·	·	·	·	·
`selectionEnd`	·	是	是	·	是	·	·	·	·	·	·	·	·	·	·
`selectionDirection`	·	是	是	·	是	·	·	·	·	·	·	·	·	·	·
`setRangeText()`	·	是	是	·	是	·	·	·	·	·	·	·	·	·	·
`setSelectionRange()`	·	是	是	·	是	·	·	·	·	·	·	·	·	·	·
`stepDown()`	·	·	·	·	·	是	是	是	是	·	·	·	·	·	·
`stepUp()`	·	·	·	·	·	是	是	是	是	·	·	·	·	·	·
事件
`input` 事件	·	是	是	是	是	是	是	是	是	是	是	是	·	·	·
`change` 事件	·	是	是	是	是	是	是	是	是	是	是	是	·	·	·

† 如果控件没有可选择的文本，select() 方法将无操作，不会出现"InvalidStateError" DOMException。

某些 type 属性的状态定义了值清理算法。

每个 input 元素都有一个 value，它通过 value IDL 属性暴露出来。某些状态定义了将字符串转换为数字的算法，将数字转换为字符串的算法，将字符串转换为 Date 对象的算法，以及将 Date 对象转换为字符串的算法，这些算法被 max，min，step，valueAsDate，valueAsNumber，以及 stepUp() 使用。

当用户以更改 value 的方式与控件交互时，input 元素的 dirty value flag 必须设置为 true。（当值以编程方式更改时，它也会设置为 true，如 value IDL 属性的定义中所述。）

value 内容属性给出了 input 元素的默认 value。当 value 内容属性被添加、设置或移除时，如果控件的 dirty value flag 为 false，用户代理必须将元素的 value 设置为该 value 内容属性的值（如果有），否则为空字符串，然后运行当前的值清理算法（如果有定义）。

每个 input 元素都有一个 checkedness，它通过 checked IDL 属性暴露出来。

每个 input 元素都有一个布尔 dirty checkedness flag。当它为 true 时，元素被认为有 dirty checkedness。dirty checkedness flag 必须在元素创建时初始化为 false，并且在用户以更改 checkedness 的方式与控件交互时必须设置为 true。

Element/input#checked

所有当前浏览器均支持。

Firefox1+Safari1+Chrome1+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

checked 内容属性是一个布尔属性，用于指定 checkedness（选中状态）为 input 元素的默认值。当添加 checked 内容属性时，如果控件没有 脏选中状态，用户代理必须将该元素的 checkedness 设置为 true；当移除 checked 内容属性时，如果控件没有 脏选中状态，用户代理必须将该元素的 checkedness 设置为 false。

重置算法适用于 input 元素，需将其用户有效性、脏值标志和脏选中状态标志恢复为 false，将元素的值设置为 value 内容属性的值（如果存在），否则为空字符串，将元素的 checkedness 设置为 true（如果元素具有 checked 内容属性）或 false（如果没有），清空选定的文件列表，然后调用值清理算法，如果 type 属性的当前状态定义了一个。

每个 input 元素可以是 可变的。除非另有说明，input 元素始终是 可变的。同样，除非另有说明，用户代理不应允许用户修改元素的值或选中状态。

当 input 元素被禁用时，它不是 可变的。

readonly 属性在某些情况下（例如，Date 状态，但不是 Checkbox 状态）也可以阻止 input 元素变为 可变的。

对于 input 元素，克隆步骤必须将节点被克隆的值、脏值标志、选中状态和脏选中状态标志从被克隆的节点传播到副本。

对于 input 元素，给定 event，激活行为包括以下步骤：

如果 element 不是 可变的，且不在 Checkbox 状态下，也不在 Radio 状态下，则返回。
运行 element 的 input 激活行为（如果有），否则不做任何操作。
在 element 上运行弹出目标属性激活行为。

请记住，元素的激活行为适用于用户发起的激活以及合成激活（例如，通过 el.click()）。用户代理也可能对给定控件有特定的行为——这些行为在此未指定——这些行为仅由真正的用户发起的激活触发。一个常见的选择是在适用的情况下显示选择器。与此相对，input 激活行为仅在特殊的历史情况下（例如文件上传和颜色状态）显示选择器。

传统预激活行为适用于 input 元素，包括以下步骤：

如果该元素的 type 属性在 Checkbox 状态中，则将该元素的选中状态设置为相反的值（即如果为 false 则设置为 true，如果为 true 则设置为 false），并将该元素的 indeterminate IDL 属性设置为 false。
如果该元素的 type 属性在 Radio Button 状态中，则获取该元素所在的单选按钮组中选中状态为 true 的元素的引用（如果有），然后将该元素的选中状态设置为 true。

传统取消激活行为适用于 input 元素，包括以下步骤：

如果该元素的 type 属性在 Checkbox 状态中，则将该元素的选中状态和该元素的 indeterminate IDL 属性恢复到在传统预激活行为运行之前的值。
如果该元素的 type 属性在 Radio Button 状态中，则如果在传统预激活行为中获取的引用元素仍在当前元素的单选按钮组中（如果有），则将该元素的选中状态设置为 true；否则，如果没有这样的元素，或该元素不再在当前元素的单选按钮组中，或者当前元素不再有单选按钮组，则将该元素的选中状态设置为 false。

当 input 元素首次创建时，该元素的渲染和行为必须设置为定义的 type 属性状态的渲染和行为，并且如果有定义，则必须调用值清理算法。

当 input 元素的 type 属性状态发生变化时，用户代理必须执行以下步骤：

如果元素的 type 属性的先前状态将 value IDL 属性设置为 value 模式，并且元素的值不是空字符串，且元素的 type 属性的新状态将 value IDL 属性设置为 default 模式或 default/on 模式，则将元素的 value 内容属性设置为元素的值。
否则，如果元素的 type 属性的先前状态将 value IDL 属性设置为 value 模式以外的任何模式，且元素的 type 属性的新状态将 value IDL 属性设置为 value 模式，则将元素的值设置为 value 内容属性的值（如果有），否则为空字符串，然后将控件的脏值标志设置为 false。
否则，如果元素的 type 属性的先前状态将 value IDL 属性设置为 filename 模式以外的任何模式，且元素的 type 属性的新状态将 value IDL 属性设置为 filename 模式，则将元素的值设置为空字符串。
更新元素的渲染和行为为新状态的渲染和行为。
发出类型变化信号。特别是，Radio Button 状态使用此信号。
如果为 type 属性的新状态定义了值清理算法，则调用值清理算法。
如果 setRangeText() 之前对元素应用了应用，则让 previouslySelectable 为 true，否则为 false。
如果 setRangeText() 现在对元素应用，则让 nowSelectable 为 true，否则为 false。
如果 previouslySelectable 为 false 且 nowSelectable 为 true，则将元素的文本输入光标位置设置为文本控件的开始位置，并将其选择方向设置为 "none"。

name 属性表示元素的名称。 dirname 属性控制元素的方向性的提交方式。 disabled 属性用于使控件不可交互，并防止其值被提交。 form 属性用于显式地将 input 元素与其表单拥有者关联。 autocomplete 属性控制用户代理如何提供自动填充行为。

HTMLInputElement#indeterminate

所有当前引擎的支持情况。

Firefox3.6+Safari3+Chrome1+

Opera≤12.1+Edge79+

Edge (旧版)12+Internet Explorer5.5+

Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android≤12.1+

caniuse.com 表格

indeterminate IDL 属性必须最初设置为 false。获取时，必须返回最后设置的值。设置时，必须设置为新值。除了改变复选框控件的外观外，没有其他效果。

HTMLInputElement/multiple

所有当前引擎的支持情况。

Firefox3.6+Safari4+Chrome2+

Opera12.1+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

accept、alt、max、min、multiple、pattern、placeholder、required、size、src 和 step IDL 属性必须反映同名的内容属性。dirName IDL 属性必须反映 dirname 内容属性。readOnly IDL 属性必须反映 readonly 内容属性。defaultChecked IDL 属性必须反映 checked 内容属性。defaultValue IDL 属性必须反映 value 内容属性。

type IDL 属性必须反映同名的内容属性，仅限于已知值。maxLength IDL 属性必须反映 maxlength 内容属性，仅限于非负数。minLength IDL 属性必须反映 minlength 内容属性，仅限于非负数。

IDL 属性 width 和 height 必须返回图像的渲染宽度和高度，单位为 CSS 像素，如果图像正在渲染；否则返回图像的自然宽度和高度，单位为 CSS 像素，如果图像可用但未渲染；否则返回 0，如果图像不可可用。当 input 元素的 type 属性不在图像按钮状态时，则没有图像可用。[CSS]

设置时，它们必须表现得好像它们反映同名的内容属性。

willValidate， validity，和 validationMessage IDL 属性，以及 checkValidity()， reportValidity()，和 setCustomValidity() 方法，都是约束验证 API 的一部分。labels IDL 属性提供元素的 label 列表。 select()， selectionStart， selectionEnd， selectionDirection， setRangeText()，和 setSelectionRange() 方法和 IDL 属性公开元素的文本选择。disabled， form，和 name IDL 属性是元素表单 API 的一部分。

4.10.5.1 `type` 属性的状态

4.10.5.1.1 隐藏状态（`type=hidden`）

Element/input/hidden

支持所有当前的浏览器引擎。

Firefox1+Safari1+Chrome1+

Opera2+Edge79+

Edge（传统版）12+Internet Explorer是

Firefox Android？Safari iOS？Chrome Android？WebView Android？Samsung Internet？Opera Android？

当一个 input 元素的 type 属性处于隐藏状态时，本节中的规则适用。

该 input 元素表示一个不打算由用户检查或操作的值。

约束验证：如果一个 input 元素的 type 属性处于隐藏状态时，它被排除于约束验证之外。

如果 name 属性存在且其值是与 "_charset_" 进行 ASCII 不区分大小写匹配的，那么元素的 value 属性必须被省略。

autocomplete 和 dirname 内容属性适用于该元素。

value IDL 属性适用于该元素，并且处于默认模式。

以下内容属性不得被指定，并且不适用于该元素： accept, alt, checked, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, popovertarget, popovertargetaction, readonly, required, size, src, step, 和 width。

以下 IDL 属性和方法不适用于该元素： checked, files, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, 和 valueAsNumber IDL 属性； select(), setRangeText(), setSelectionRange(), stepDown(), 和 stepUp() 方法。

以下事件 input 和 change 不适用。

4.10.5.1.2 文本 (`type=text`) 状态和搜索状态 (`type=search`)

Element/input/search

在所有当前引擎中支持。

Firefox4+Safari5+Chrome5+

Opera10.6+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/input/text

在所有当前引擎中支持。

Firefox1+Safari1+Chrome1+

Opera?Edge79+

Edge (旧版)12+Internet Explorer是

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

当 input 元素的 type 属性为文本状态或搜索状态时，本节中的规则适用。

input 元素表示一个单行纯文本编辑控件用于该元素的值。

文本状态和搜索状态的主要区别在于样式：在那些将搜索控件与普通文本控件区分开来的平台上，搜索状态可能会使控件的外观与平台的搜索控件一致，而不是像普通文本控件那样呈现。

如果元素是 可变的，其值应该可以被用户编辑。用户代理不能允许用户在元素的值中插入 U+000A 换行符 (LF) 或 U+000D 回车符 (CR) 字符。

如果元素是 可变的，用户代理应允许用户更改元素的书写方向，将其设置为从左到右的书写方向或从右到左的书写方向。如果用户这样做，用户代理必须运行以下步骤：

如果用户选择了从左到右的书写方向，则将元素的 dir 属性设置为 "ltr" ；如果用户选择了从右到左的书写方向，则设置为 "rtl"。
在用户交互任务源中排队一个元素任务，给定元素以触发名为 input 的事件，并将 bubbles 和 composed 属性初始化为 true。

如果指定了 value 属性，则其值中不得包含 U+000A 换行符 (LF) 或 U+000D 回车符 (CR) 字符。

值清理算法如下：从值中剥离换行符。

以下常见的 input 元素内容属性、IDL 属性和方法适用于该元素： autocomplete, dirname, list, maxlength, minlength, pattern, placeholder, readonly, required, 和 size 内容属性； list、 selectionStart、 selectionEnd、 selectionDirection、和 value IDL 属性； select()、 setRangeText()、和 setSelectionRange() 方法。

value IDL 属性处于值模式。

input 和 change 事件适用。

以下内容属性不得指定且不适用于元素： accept、 alt、 checked、 formaction、 formenctype、 formmethod、 formnovalidate、 formtarget、 height、 max、 min、 multiple、 popovertarget、 popovertargetaction、 src、 step、和 width。

以下 IDL 属性和方法不适用于元素： checked、 files、 valueAsDate、和 valueAsNumber IDL 属性； stepDown() 和 stepUp() 方法。

4.10.5.1.3 电话状态 (`type=tel`)

Element/input/tel

Support in all current engines.

FirefoxYesSafari4+Chrome3+

Opera11+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android?Safari iOS3+Chrome Android18+WebView Android37+Samsung Internet?Opera Android11+

当 input 元素的 type 属性处于 Telephone 状态时，本节规则适用。

input 元素代表一个用于编辑电话号码的控件，该电话号码在元素的 value 中给出。

如果该元素是 可变的，其 value 应该是用户可编辑的。用户代理可以更改用户输入的值的间距，并在谨慎情况下更改标点符号。用户代理不得允许用户在元素的 value 中插入 U+000A 换行符 (LF) 或 U+000D 回车符 (CR) 字符。

value 属性（如果指定）必须具有不包含 U+000A 换行符 (LF) 或 U+000D 回车符 (CR) 字符的值。

值净化算法如下：从 value 中删除换行符。

与 URL 和 Email 类型不同，Telephone 类型不强制执行特定的语法。这是有意为之；实际上，电话号码字段往往是自由格式的字段，因为存在多种有效的电话号码。需要强制执行特定格式的系统建议使用 pattern 属性或 setCustomValidity() 方法来挂钩客户端验证机制。

以下常见的 input 元素内容属性、IDL 属性和方法适用于该元素： autocomplete， dirname， list， maxlength， minlength， pattern， placeholder， readonly， required，和 size 内容属性； list， selectionStart， selectionEnd， selectionDirection，和 value IDL 属性； select()， setRangeText()，和 setSelectionRange() 方法。

value IDL 属性处于 value 模式。

input 和 change 事件适用。

以下内容属性不得指定并且不适用于该元素： accept， alt， checked， formaction， formenctype， formmethod， formnovalidate， formtarget， height， max， min， multiple， popovertarget， popovertargetaction， src， step，和 width。

以下 IDL 属性和方法不适用于该元素： checked， files， valueAsDate，和 valueAsNumber IDL 属性； stepDown() 和 stepUp() 方法。

4.10.5.1.4 URL 状态 (`type=url`)

Element/input/url

Support in all current engines.

Firefox1+Safari1+Chrome1+

Opera11+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

当 input 元素的 type 属性处于 URL 状态时，本节规则适用。

input 元素代表一个用于编辑单个绝对 URL 的控件，该 URL 在元素的 value 中给出。

如果该元素是 可变的，用户代理应允许用户更改其 value 所代表的 URL。用户代理可以允许用户将 value 设置为一个不是有效的绝对 URL 的字符串，但也可以或替代地自动转义用户输入的字符，使得 value 始终是一个有效的绝对 URL（即使这不是用户在界面中看到和编辑的实际值）。用户代理应允许用户将 value 设置为空字符串。用户代理不得允许用户在 value 中插入 U+000A 换行符 (LF) 或 U+000D 回车符 (CR) 字符。

value 属性（如果指定且不为空）必须具有一个有效的可能被空格包围的 URL，且该 URL 也是一个绝对 URL。

值清理算法如下：从值中去除换行符，然后从值中去除前导和尾随的 ASCII 空白。

约束验证：当元素的 value 既不是空字符串也不是有效的绝对 URL 时，元素存在类型不匹配。

value IDL 属性处于 value 模式。

input 和 change 事件适用。

以下 IDL 属性和方法不适用于该元素： checked， files， valueAsDate，和 valueAsNumber IDL 属性； stepDown() 和 stepUp() 方法。

如果文档包含以下标记：

<input type="url" name="location" list="urls">
<datalist id="urls">
 <option label="MIME: Format of Internet Message Bodies" value="https://www.rfc-editor.org/rfc/rfc2045">
 <option label="HTML" value="https://html.spec.whatwg.org/">
 <option label="DOM" value="https://dom.spec.whatwg.org/">
 <option label="Fullscreen" value="https://fullscreen.spec.whatwg.org/">
 <option label="Media Session" value="https://mediasession.spec.whatwg.org/">
 <option label="The Single UNIX Specification, Version 3" value="http://www.unix.org/version3/">
</datalist>

...用户输入了"spec.w"，而用户代理还发现用户最近访问过https://url.spec.whatwg.org/#url-parsing和https://streams.spec.whatwg.org/，那么渲染结果可能如下所示：

一个文本框，左侧有一个图标，接着是文本"spec.w"和一个光标，右侧有一个下拉按钮；下面是一个包含六个URL列表的下拉框，左侧是URL，前四个URL右侧有灰色标签；下拉框右侧有一个滚动条，指示还有更多值可用。

此示例中的前四个URL由与用户输入文本匹配的作者指定列表中的四个URL组成，并以某种实现定义的方式排序（可能根据用户引用这些URL的频率）。请注意，UA利用了这些值是URL的知识，使用户可以省略方案部分并对域名进行智能匹配。

最后两个URL（以及可能更多的URL，根据滚动条指示有更多值可用）是用户代理的会话历史数据中的匹配项。这些数据不会提供给页面DOM。在这种特殊情况下，UA没有提供这些值的标题。

4.10.5.1.5 电子邮件状态 (`type=email`)

Element/input/email

所有当前引擎支持。

Firefox1+Safari5+Chrome5+

Opera11+Edge79+

Edge (旧版)12+Internet Explorer10+

Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android11+

当 input 元素的 type 属性处于电子邮件状态时，本节的规则适用。

电子邮件状态的操作方式取决于是否指定了 multiple 属性。

当元素上未指定 multiple 属性时

input 元素表示用于编辑元素的 value 中给定的电子邮件地址的控件。

如果元素是 可变的，用户代理应允许用户更改其 value 表示的电子邮件地址。用户代理可以允许用户将 value 设置为不是有效电子邮件地址的字符串。用户代理应以与期望用户提供单个电子邮件地址一致的方式行事。用户代理应允许用户将 value 设置为空字符串。用户代理不得允许用户在 value 中插入 U+000A 换行符 (LF) 或 U+000D 回车符 (CR) 字符。用户代理可以转换 value 以进行显示和编辑；特别是，用户代理应将 value 中域标签的 punycode 转换为显示中的 IDN，反之亦然。

约束验证：当用户界面表示用户代理无法转换为 punycode 的输入时，控件遭受错误输入。

value 属性（如果指定且不为空）必须具有单个有效电子邮件地址的值。

值清理算法如下：从值中去除换行符，然后从值中去除前导和尾随的 ASCII 空白。

约束验证：当元素的 value 既不是空字符串也不是单个有效电子邮件地址时，元素遭受类型不匹配。

当元素上指定了 multiple 属性时

input 元素表示用于添加、删除和编辑元素的值中给定的电子邮件地址的控件。

如果元素是 可变的，用户代理应允许用户添加、删除和编辑其值表示的电子邮件地址。用户代理可以允许用户将值列表中的任何单个值设置为不是有效电子邮件地址的字符串，但不得允许用户将任何单个值设置为包含 U+002C 逗号（,）、U+000A 换行符（LF）或 U+000D 回车符（CR）字符的字符串。用户代理应允许用户删除元素的值中的所有地址。用户代理可以转换值以进行显示和编辑；特别是，用户代理应将值中域标签的 punycode 转换为显示中的 IDN，反之亦然。

约束验证：当用户界面描述的情况是某个单独的值包含 U+002C 逗号（,）或表示用户代理无法转换为 punycode 的输入时，控件遭受错误输入。

每当用户更改元素的值时，用户代理必须运行以下步骤：

让 latest values 成为元素的值的副本。
从 latest values 中的每个值中删除前导和尾随的 ASCII 空白字符。
将元素的值设置为 latest values 中所有值的连接结果，每个值之间用单个 U+002C 逗号字符（,）分隔，保持列表的顺序。

value 属性（如果指定）必须具有有效电子邮件地址列表的值。

值清理算法如下：

按逗号拆分元素的值，从每个结果的令牌中去除前导和尾随的 ASCII 空白（如果有的话），并使元素的值成为（可能为空的）结果令牌列表，保持原始顺序。
将元素的值设置为元素的值的连接结果，每个值之间用单个 U+002C 逗号字符（,）分隔，保持列表的顺序。

约束验证：当元素的值不是有效电子邮件地址列表时，元素遭受类型不匹配。

当 multiple 属性被设置或移除时，用户代理必须运行值清理算法。

有效电子邮件地址是符合以下 ABNF 的 email 生成规则的字符串，其字符集为 Unicode。该 ABNF 实现了 RFC 1123 中描述的扩展。[ABNF] [RFC5322] [RFC1034] [RFC1123]

email         = 1*( atext / "." ) "@" label *( "." label )
label         = let-dig [ [ ldh-str ] let-dig ]  ; limited to a length of 63 characters by RFC 1034 section 3.5
atext         = < as defined in RFC 5322 section 3.2.3 >
let-dig       = < as defined in RFC 1034 section 3.5 >
ldh-str       = < as defined in RFC 1034 section 3.5 >

此要求是对 RFC 5322 的故意违反，RFC 5322 定义了一个电子邮件地址语法，在 "@" 字符之前过于严格，"@" 字符之后过于模糊，并且过于宽松（允许大多数用户不熟悉的方式包含注释、空白字符和引号字符串），在这里不实用。

以下兼容 JavaScript 和 Perl 的正则表达式是上述定义的实现。

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

有效电子邮件地址列表是一组逗号分隔的标记集，其中每个标记本身都是一个有效电子邮件地址。要从有效电子邮件地址列表中获取标记列表，实施必须将字符串按逗号分割。

以下常见的 input 元素内容属性、IDL 属性和方法适用于该元素： autocomplete， dirname， list， maxlength， minlength， multiple， pattern， placeholder， readonly， required，和 size 内容属性； list，和 value IDL 属性； select() 方法。

value IDL 属性处于 value 模式。

input 和 change 事件适用于该元素。

以下内容属性不得指定并且不适用于该元素： accept， alt， checked， formaction， formenctype， formmethod， formnovalidate， formtarget， height， max， min， popovertarget， popovertargetaction， src， step，和 width。

以下 IDL 属性和方法不适用于该元素： checked， files， selectionStart， selectionEnd， selectionDirection， valueAsDate，和 valueAsNumber IDL 属性； setRangeText()， setSelectionRange()， stepDown()，和 stepUp() 方法。

4.10.5.1.6 密码状态 (`type=password`)

Element/input/password

支持所有当前引擎。

Firefox1+Safari1+Chrome1+

Opera2+Edge79+

Edge (旧版)12+Internet Explorer2+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

当 input 元素的 type 属性处于密码状态时，本节的规则适用。

该 input 元素表示一个用于编辑元素的 value 的单行纯文本编辑控件。用户代理应遮蔽该值以防止其他人看到。

如果元素是 可变的，其 value 应可由用户编辑。用户代理不得允许用户在 value 中插入 U+000A 换行符（LF）或 U+000D 回车符（CR）。

如果指定了 value 属性，则其值不得包含 U+000A 换行符（LF）或 U+000D 回车符（CR）。

值清理算法如下：从 value 中去除换行符。

以下常见的 input 元素内容属性、IDL 属性和方法适用于该元素： autocomplete， dirname， maxlength， minlength， pattern， placeholder， readonly， required，和 size 内容属性； selectionStart， selectionEnd， selectionDirection，和 value IDL 属性； select()， setRangeText()，和 setSelectionRange() 方法。

value IDL 属性处于 value 模式。

input 和 change 事件适用。

以下内容属性不得指定，且不适用于该元素： accept， alt， checked， formaction， formenctype， formmethod， formnovalidate， formtarget， height， list， max， min， multiple， popovertarget， popovertargetaction， src， step，和 width。

以下 IDL 属性和方法不适用于该元素： checked， files， list， valueAsDate，和 valueAsNumber IDL 属性； stepDown()，和 stepUp() 方法。

4.10.5.1.7 日期状态 (`type=date`)

Element/input/date

支持所有当前引擎。

Firefox57+Safari14.1+Chrome20+

Opera11+Edge79+

Edge (旧版)12+Internet Explorer不支持

Firefox Android?Safari iOS5+Chrome Android?WebView Android?Samsung Internet?Opera Android11+

当 input 元素的 type 属性处于日期状态时，本节的规则适用。

该 input 元素表示一个控件，用于设置元素的 value 为表示特定日期的字符串。

如果元素是 可变的，用户代理应允许用户更改其日期由其 value 表示，正如通过解析日期字符串获得的那样。用户代理不得允许用户将 value 设置为非空字符串且该字符串不是有效日期字符串。如果用户代理提供用于选择日期的用户界面，那么 value 必须设置为表示用户选择的有效日期字符串。用户代理应允许用户将 value 设置为空字符串。

约束验证：当用户界面描述的输入用户代理无法转换为有效日期字符串时，控件存在错误输入。

请参阅引言部分，讨论日期、时间和数字表单控件的输入格式和提交格式之间的区别，以及实现注释，了解表单控件的本地化。

如果指定且不为空，value 属性必须具有有效日期字符串的值。

值清理算法如下：如果元素的 value 不是有效日期字符串，则将其设置为空字符串。

如果指定，min 属性必须具有有效日期字符串的值。max 属性如果指定，则必须具有有效日期字符串的值。

step 属性以天数表示。步长比例因子为 86,400,000 （将天数转换为毫秒，如其他算法中使用）。默认步长为 1 天。

当元素存在步长不匹配时，用户代理可以将元素的 value 四舍五入到最近的日期，对于该日期元素不会存在步长不匹配。

将字符串转换为数字的算法如下：给定字符串 input，如果从 input 中解析日期结果出错，则返回错误；否则，返回从 1970-01-01 上午零时（由值 "1970-01-01T00:00:00.0Z" 表示的时间）到解析的日期（忽略闰秒）所经过的毫秒数。

将数字转换为字符串的算法如下：给定数字 input，返回表示 UTC 时间从 1970-01-01 上午零时（由值 "1970-01-01T00:00:00.0Z" 表示的时间）到当前 input 毫秒后的有效日期字符串。

将字符串转换为 Date 对象的算法如下：给定字符串 input，如果从 input 中解析日期结果出错，则返回错误；否则，返回一个新的Date 对象，表示解析的日期的 UTC 时间的午夜。

将 Date 对象转换为字符串的算法，给定 Date 对象 input，如下：返回表示 input 所在时间的 UTC 时区当前时间的有效日期字符串。

日期状态（以及后续章节中描述的其他与日期和时间相关的状态）不适用于无法相对于当代日历确定精确日期和时间的值的输入。例如，它不适用于输入像“宇宙大爆炸后一毫秒”、“侏罗纪早期”或“公元前 250 年的某个冬天”这样的时间。

对于在引入公历之前的日期输入，建议作者不要使用日期状态（以及后续章节中描述的其他与日期和时间相关的状态），因为用户代理不需要支持将早期时期的日期和时间转换为公历，要求用户手动完成会给用户带来不必要的负担。（这还由于公历是分阶段引入的，这在不同国家发生的时间不同，从 16 世纪中期到 20 世纪初不等。）相反，建议作者使用 选择 元素和 输入 元素与数字状态提供细粒度的输入控件。

以下常见的 input 元素内容属性、IDL 属性和方法适用于该元素： autocomplete， list， max， min， readonly， required，和 step 内容属性； list， value， valueAsDate，和 valueAsNumber IDL 属性； select()， step Down()，和 stepUp() 方法。

value IDL 属性处于 value 模式。

input 和 change 事件适用。

以下内容属性不得指定且不适用于该元素： accept， alt， checked， dirname， formaction， formenctype， formmethod， formnovalidate， formtarget， height， maxlength， minlength， multiple， pattern， placeholder， popovertarget， popovertargetaction， src，和 width。

以下 IDL 属性和方法不适用于该元素： checked， selectionStart， selectionEnd，和 selectionDirection IDL 属性； setRangeText()，和 setSelectionRange() 方法。

4.10.5.1.8 月份状态 (`type=month`)

Element/input/month

在所有当前引擎中都支持。

Firefox不支持Safari不支持Chrome20+

Opera11+Edge79+

Edge (旧版)12+Internet Explorer不支持

Firefox Android18+Safari iOS支持Chrome Android?WebView Android?Samsung Internet?Opera Android?

当一个 input 元素的 type 属性处于月份状态时，本节中的规则适用。

该 input 元素表示一个控件，用于将元素的值设置为代表特定月份的字符串。

如果元素是可变，用户代理应允许用户更改其月份，根据解析月份从中获得。用户代理不得允许用户将值设置为非空且不是有效月份字符串的字符串。如果用户代理提供用于选择月份的用户界面，则值必须设置为表示用户选择的有效月份字符串。用户代理应允许用户将值设置为空字符串。

约束验证：当用户界面描述的输入用户代理无法转换为有效月份字符串时，控件受到错误输入的影响。

请参阅引言部分讨论日期、时间和数字表单控件的输入格式与提交格式之间的差异，以及实现说明关于表单控件本地化的内容。

value 属性（如果指定且不为空）必须具有有效月份字符串的值。

值清理算法如下：如果该值不是有效月份字符串，则将其设置为空字符串。

min 属性（如果指定）必须具有有效月份字符串的值。max 属性（如果指定）必须具有有效月份字符串的值。

step 属性以月份为单位。步长比例因子为 1（算法使用月份，因此无需转换）。默认步长为 1 个月。

当元素步长不匹配时，用户代理可以将元素的值四舍五入到最近的月份，使元素不再步长不匹配。

将字符串转换为数字的算法，给定字符串 input，如下：如果从 input 解析月份结果为错误，则返回错误；否则，返回 1970 年 1 月和解析的月份之间的月份数。

将数字转换为字符串的算法，给定数字 input，如下：返回表示有效月份字符串的字符串，表示距离 1970 年 1 月 input 个月的月份。

将字符串转换为 Date 对象的算法，给定字符串 input，如下：如果从 input 解析月份结果为错误，则返回错误；否则，返回一个新的 Date 对象，表示解析的月份第一日的午夜 UTC。

将 Date 对象转换为字符串的算法，给定 Date 对象 input，如下：返回一个有效月份字符串，表示 input 在 UTC 时区表示的当前时间的月份。

以下通用 input 元素内容属性、IDL 属性和方法适用于该元素： autocomplete， list， max， min， readonly， required，和 step 内容属性； list， value， valueAsDate，和 valueAsNumber IDL 属性； select()， stepDown()，和 stepUp() 方法。

value IDL 属性的模式为 value。

input 和 change 事件适用。

以下内容属性不得指定，并且不适用于该元素： accept， alt， checked， dirname， formaction， formenctype， formmethod， formnovalidate， formtarget， height， maxlength， minlength， multiple， pattern， placeholder， popovertarget， popovertargetaction， size， src，和 width。

以下 IDL 属性和方法不适用于该元素： checked， files， selectionStart， selectionEnd，和 selectionDirection IDL 属性； setRangeText()，和 setSelectionRange() 方法。

4.10.5.1.9 周状态 (`type=week`)

Element/input/week

Firefox不支持Safari不支持Chrome20+

Opera11+Edge79+

旧版 Edge12+Internet Explorer不支持

Firefox Android18+Safari iOS未知Chrome Android未知WebView Android未知Samsung Internet未知Opera Android未知

当 input 元素的 type 属性为周状态时，本节中的规则适用。

该 input 元素表示用于设置元素的值为表示特定周的字符串的控件。

如果元素是 可变的，用户代理应允许用户更改其值所表示的周，通过解析一个周字符串获得。用户代理不得允许用户将值设置为非空的、非有效周字符串的字符串。如果用户代理提供了用于选择周的用户界面，那么值必须设置为表示用户选择的有效周字符串。用户代理应允许用户将值设置为空字符串。

约束验证：当用户界面描述的输入无法转换为有效周字符串时，控件存在错误输入。

请参阅介绍部分，讨论日期、时间和数字表单控件的输入格式和提交格式之间的差异，以及有关表单控件本地化的实现说明。

如果指定且不为空，value 属性的值必须是有效周字符串。

值清理算法如下：如果元素的值不是有效周字符串，则将其设置为空字符串。

如果指定，min 属性的值必须是有效周字符串。如果指定，max 属性的值必须是有效周字符串。

step 属性以周为单位表示。步长比例因子为 604,800,000（将周转换为毫秒，与其他算法中使用的单位一致）。默认步长为 1 周。默认步长基准为 −259,200,000（1970-W01 周的起始时间）。

当元素存在步长不匹配时，用户代理可以将元素的值四舍五入到最近的周，以使元素不会存在步长不匹配。

将字符串转换为数字的算法如下：如果解析一个周字符串结果出错，则返回错误；否则，返回从 1970-01-01 午夜 UTC（由值 "1970-01-01T00:00:00.0Z" 表示的时间）到解析出的周的星期一凌晨 UTC 的毫秒数，不考虑闰秒。

将数字转换为字符串的算法如下：返回一个有效周字符串，表示在 UTC 时间下，从 1970-01-01 午夜 UTC（由值 "1970-01-01T00:00:00.0Z" 表示的时间）开始 input 毫秒后的周。

将字符串转换为 Date 对象的算法如下：如果解析一个周字符串结果出错，则返回错误；否则，返回一个新的 Date 对象，表示解析出的周的星期一凌晨 UTC。

将 Date 对象转换为字符串的算法如下：返回一个有效周字符串，表示在 UTC 时区中 input 所代表的时间的当前周。

以下通用 input 元素内容属性、IDL 属性和方法适用于该元素： autocomplete、 list、 max、 min、 readonly、 required 和 step 内容属性； list、 value、 valueAsDate 和 valueAsNumber IDL 属性； select()、 stepDown() 和 stepUp() 方法。

value IDL 属性的模式为 value。

input 和 change 事件适用。

以下内容属性不得指定且不适用于该元素： accept、 alt、 checked、 dirname、 formaction、 formenctype、 formmethod、 formnovalidate、 formtarget、 height、 maxlength、 minlength、 multiple、 pattern、 placeholder、 popovertarget、 popovertargetaction、 size、 src 和 width。

以下 IDL 属性和方法不适用于该元素： checked、 files、 selectionStart、 selectionEnd 和 selectionDirection IDL 属性； setRangeText() 和 setSelectionRange() 方法。

4.10.5.1.10 时间状态 (`type=time`)

Element/input/time

支持所有当前引擎。

Firefox57+Safari14.1+Chrome20+

Opera10+Edge79+

Edge (旧版)12+Internet ExplorerNo

Firefox Android?Safari iOS5+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

当 input 元素的 type 属性处于时间状态时，本节中的规则适用。

该 input 元素表示一个控件，用于将元素的值设置为表示特定时间的字符串。

如果该元素是 可变的，用户代理应允许用户更改其时间，如通过从中解析时间获得的值。用户代理不得允许用户将值设置为非空字符串，除非该字符串是有效时间字符串。如果用户代理提供用户界面以选择时间，则值必须设置为表示用户选择的有效时间字符串。用户代理应允许用户将值设置为空字符串。

约束验证：当用户界面描述的输入无法由用户代理转换为有效时间字符串时，该控件存在错误输入。

请参阅介绍部分，讨论日期、时间和数字表单控件的输入格式与提交格式的区别，以及有关表单控件本地化的实现注意事项。

如果指定并且不为空，value 属性必须具有有效时间字符串的值。

值净化算法如下：如果元素的值不是有效时间字符串，则将其设置为空字符串。

表单控件具有周期性领域。

如果指定，min 属性必须具有有效时间字符串的值。max 属性如果指定，必须具有有效时间字符串的值。

step 属性以秒为单位表示。步长比例因子是 1000（将秒转换为毫秒，正如其他算法中所使用的那样）。默认步长为 60 秒。

当元素存在步长不匹配时，用户代理可以将元素的值四舍五入到最接近的时间，使该元素不会存在步长不匹配。

将字符串转换为数字的算法如下：如果解析字符串 input 的时间出现错误，则返回错误；否则，返回从午夜到解析出的时间的毫秒数。

将数字转换为字符串的算法如下：返回一个有效时间字符串，表示从午夜开始后 input 毫秒的时间。

将字符串转换为 Date 对象的算法如下：如果解析字符串 input 的时间出现错误，则返回错误；否则，返回一个新的 Date 对象，表示 UTC 时间 1970-01-01 的解析时间。

将 Date 对象转换为字符串的算法如下：返回一个有效时间字符串，表示由 input 表示的 UTC 时间组件。

以下常见 input 元素内容属性、IDL 属性和方法适用于该元素： autocomplete、 list、 max、 min、 readonly、 required 和 step 内容属性； list、 value、 valueAsDate 和 valueAsNumber IDL 属性； select()、 stepDown() 和 stepUp() 方法。

value IDL 属性处于值模式。

input 和 change 事件适用。

以下内容属性不得指定并且不适用于该元素： accept、 alt、 checked、 dirname、 formaction、 formenctype、 formmethod、 formnovalidate、 formtarget、 height、 maxlength、 minlength、 multiple、 pattern、 placeholder、 popovertarget、 popovertargetaction、 size、 src 和 width。

4.10.5.1.11 本地日期和时间状态 (`type=datetime-local`)

Element/input/datetime-local

所有当前引擎均支持。

Firefox93+

目录

完整目录

1 简介

1.1 本规范的适用范围

1.2 这是 HTML5 吗？

1.3 背景

1.4 读者

1.5 范围

1.6 历史

1.7 设计说明

1.7.1 脚本执行的可序列化

1.7.2 与其他规范的兼容性

1.7.3 扩展性

1.8 HTML 与 XML 语法

1.9 本规范的结构

1.9.1 如何阅读本规范

1.9.2 排版约定

1.10 HTML简要介绍

1.10.1 使用 HTML 编写安全应用程序

1.10.2 使用脚本 API 时需避免的常见陷阱

1.10.3 如何捕捉编写 HTML 时的错误：验证器和合规检查器

1.11 对作者的合规要求

1.11.1 表现性标记

1.11.2 语法错误

1.11.3 内容模型和属性值的限制

1.12 建议阅读

2 常见基础设施

2.1 术语

2.1.1 并行处理

2.1.2 资源

2.1.3 XML兼容性

2.1.4 DOM树

2.1.5 脚本

2.1.6 插件

2.1.7 字符编码

2.1.8 合规类

2.1.9 依赖关系

2.1.10 扩展性

2.1.11 与 XPath 和 XSLT 的交互

2.2 策略控制的功能

2.3 通用微语法

2.3.1 通用解析器习惯用法

2.3.2 布尔属性

2.3.3 关键字和枚举属性

2.3.4 数字

2.3.4.1 有符号整数

2.3.4.2 非负整数

2.3.4.3 浮点数

2.3.4.4 百分比和长度

2.3.4.5 非零百分比和长度

2.3.4.6 浮点数列表

2.3.4.7 维度列表

2.3.5 日期和时间

2.3.5.1 月份

2.3.5.2 日期

2.3.5.3 无年份的日期

2.3.5.4 时间

2.3.5.5 本地日期和时间

2.3.5.6 时区

2.3.5.7 全球日期和时间

2.3.5.8 周

2.3.5.9 持续时间

2.3.5.10 更模糊的时间点

2.3.6 颜色

2.3.7 空格分隔的标记

2.3.8 逗号分隔的标记

2.3.9 引用

2.3.10 媒体查询

2.3.11 唯一内部值

2.4 URLs

2.4.1 术语

2.4.2 解析 URL

2.4.3 基础 URL 的动态更改

2.5 获取资源

2.5.1 术语

2.5.2 确定资源类型

2.5.3 从 meta 元素中提取字符编码

2.5.4 CORS 设置属性

2.5.5 引荐政策属性

2.5.6 Nonce 属性

2.5.3 从 `meta` 元素中提取字符编码

2.6.3.1 `HTMLAllCollection` 接口

2.6.3.1.1 [[Call]] (`thisArgument`, `argumentsList`)

2.6.3.2 `HTMLFormControlsCollection` 接口

2.6.3.3 `HTMLOptionsCollection` 接口

2.6.4 `DOMStringList` 接口

2.7.3 StructuredSerializeInternal (`value`, `forStorage` [ , `memory` ] )

2.7.4 StructuredSerialize ( `value` )

2.7.5 StructuredSerializeForStorage ( `value` )

2.7.6 结构化反序列化 (`serialized`, `targetRealm` [, `memory`])

2.7.7 StructuredSerializeWithTransfer ( `value`, `transferList` )

2.7.8 StructuredDeserializeWithTransfer ( `serializeWithTransferResult`, `targetRealm` )

3.1.1 `Document` 对象

3.1.2 `DocumentOrShadowRoot` 接口

3.2.6.1 `title` 属性

3.2.6.2 `lang` 和 `xml:lang` 属性

3.2.6.3 `translate` 属性

3.2.6.4 `dir` 属性

3.2.6.5 `style` 属性

3.2.6.6 嵌入自定义不可见数据使用 `data-*` 属性

3.2.7 `innerText` 和 `outerText` 属性

4.1.1 `html` 元素

4.2.1 `head` 元素

4.2.2 `title` 元素