目录

  1. 1 简介
  2. 2 通用基础设施
  3. 3 HTML 文档的语义、结构和 API
  4. 4 HTML 的元素
  5. 5 微数据
  6. 6 用户交互
  7. 7 加载网页
  8. 8 Web 应用程序 API
  9. 9 通信
  10. 10 Web worker
  11. 11 Worklet
  12. 12 Web 存储
  13. 13 HTML 语法
  14. 14 XML 语法
  15. 15 渲染
  16. 16 过时功能
  17. 17 IANA 注意事项
  18. 索引
  19. 参考文献
  20. 致谢
  21. 知识产权

完整目录

  1. 1 简介
    1. 1.1 本规范处于什么位置？
    2. 1.2 这是 HTML5 吗？
    3. 1.3 背景
    4. 1.4 目标读者
    5. 1.5 范围
    6. 1.6 历史
    7. 1.7 设计说明
      1. 1.7.1 脚本执行的可序列化性
      2. 1.7.2 可扩展性
    8. 1.8 HTML 与 XML 语法
    9. 1.9 本规范的结构
      1. 1.9.1 如何阅读本规范
      2. 1.9.2 排版约定
    10. 1.10 HTML 简介
      1. 1.10.1 使用 HTML 编写安全 应用程序
      2. 1.10.2 使用脚本 API 时 应避免的常见陷阱
      3. 1.10.3 如何发现编写 HTML 时的错误：验证器和一致性检查器
    11. 1.11 对作者的符合性要求
      1. 1.11.1 表现性标记
      2. 1.11.2 语法错误
      3. 1.11.3 对内容模型和 属性值的限制
    12. 1.12 推荐阅读
  2. 2 通用基础设施
    1. 2.1 术语
      1. 2.1.1 并行
      2. 2.1.2 资源
      3. 2.1.3 XML 兼容性
      4. 2.1.4 DOM 树
      5. 2.1.5 脚本
      6. 2.1.6 插件
      7. 2.1.7 字符编码
      8. 2.1.8 符合性类别
      9. 2.1.9 依赖项
      10. 2.1.10 可扩展性
      11. 2.1.11 与 XPath 和 XSLT 的交互
    2. 2.2 策略控制的特性
    3. 2.3 常用微语法
      1. 2.3.1 常用解析器惯用模式
      2. 2.3.2 布尔属性
      3. 2.3.3 关键字和枚举属性
      4. 2.3.4 数字
        1. 2.3.4.1 有符号整数
        2. 2.3.4.2 非负整数
        3. 2.3.4.3 浮点数
        4. 2.3.4.4 百分比和长度
        5. 2.3.4.5 非零百分比和长度
        6. 2.3.4.6 浮点数列表
        7. 2.3.4.7 尺寸列表
      5. 2.3.5 日期和时间
        1. 2.3.5.1 月份
        2. 2.3.5.2 日期
        3. 2.3.5.3 无年份日期
        4. 2.3.5.4 时间
        5. 2.3.5.5 本地日期和时间
        6. 2.3.5.6 时区
        7. 2.3.5.7 全局日期和时间
        8. 2.3.5.8 周
        9. 2.3.5.9 持续时间
        10. 2.3.5.10 较模糊的时间点
      6. 2.3.6 旧式颜色
      7. 2.3.7 空格分隔的标记
      8. 2.3.8 逗号分隔的标记
      9. 2.3.9 引用
      10. 2.3.10 媒体查询
      11. 2.3.11 唯一内部值
    4. 2.4 URL
      1. 2.4.1 术语
      2. 2.4.2 解析 URL
      3. 2.4.3 文档基准 URL
    5. 2.5 获取资源
      1. 2.5.1 术语
      2. 2.5.2 确定资源的类型
      3. 2.5.3 从 meta 元素中提取字符编码
      4. 2.5.4 CORS 设置属性
      5. 2.5.5 引用来源策略属性
      6. 2.5.6 Nonce 属性
      7. 2.5.7 延迟加载属性
      8. 2.5.8 阻塞属性
      9. 2.5.9 获取优先级属性
    6. 2.6 常用 DOM 接口
      1. 2.6.1 在 IDL 属性中反映内容 属性
      2. 2.6.2 通过 IDL 扩展 属性使用反映
      3. 2.6.3 在规范中使用反映
      4. 2.6.4 集合
        1. 2.6.4.1 HTMLAllCollection 接口
          1. 2.6.4.1.1 [[Call]] ( thisArgument, argumentsList )
        2. 2.6.4.2 HTMLFormControlsCollection 接口
        3. 2.6.4.3 HTMLOptionsCollection 接口
      5. 2.6.5 DOMStringList 接口
    7. 2.7 结构化数据的安全传递
      1. 2.7.1 可序列化对象
      2. 2.7.2 可转移对象
      3. 2.7.3 StructuredSerializeInternal ( value, forStorage [ , memory ] )
      4. 2.7.4 StructuredSerialize ( value )
      5. 2.7.5 StructuredSerializeForStorage ( value )
      6. 2.7.6 StructuredDeserialize ( serialized, targetRealm [ , memory ] )
      7. 2.7.7 StructuredSerializeWithTransfer ( value, transferList )
      8. 2.7.8 StructuredDeserializeWithTransfer ( serializeWithTransferResult, targetRealm )
      9. 2.7.9 从其他规范执行 序列化和 转移
      10. 2.7.10 结构化克隆 API
  3. 3 HTML 文档的语义、结构和 API
    1. 3.1 文档
      1. 3.1.1 Document 对象
      2. 3.1.2 DocumentOrShadowRoot 接口
      3. 3.1.3 祖先源
      4. 3.1.4 资源元数据管理
      5. 3.1.5 报告文档加载状态
      6. 3.1.6 渲染阻塞机制
      7. 3.1.7 DOM 树访问器
    2. 3.2 元素
      1. 3.2.1 语义
      2. 3.2.2 DOM 中的元素
      3. 3.2.3 HTML 元素构造函数
      4. 3.2.4 元素定义
        1. 3.2.4.1 属性
      5. 3.2.5 内容模型
        1. 3.2.5.1 “无”内容模型
        2. 3.2.5.2 内容种类
          1. 3.2.5.2.1 元数据内容
          2. 3.2.5.2.2 流式内容
          3. 3.2.5.2.3 分节内容
          4. 3.2.5.2.4 标题内容
          5. 3.2.5.2.5 短语内容
          6. 3.2.5.2.6 嵌入内容
          7. 3.2.5.2.7 交互式内容
          8. 3.2.5.2.8 可感知内容
          9. 3.2.5.2.9 脚本支持元素
        3. 3.2.5.3 透明内容模型
        4. 3.2.5.4 段落
      6. 3.2.6 全局属性
        1. 3.2.6.1 title 属性
        2. 3.2.6.2 lang 和 xml:lang 属性
        3. 3.2.6.3 translate 属性
        4. 3.2.6.4 dir 属性
        5. 3.2.6.5 style 属性
        6. 3.2.6.6 使用 data-* 属性嵌入自定义不可见数据
      7. 3.2.7 innerText 和 outerText 属性
      8. 3.2.8 与双向算法相关的要求
        1. 3.2.8.1 双向算法格式化字符的创作一致性标准
        2. 3.2.8.2 用户代理一致性标准
      9. 3.2.9 与 ARIA 和平台无障碍 API 相关的要求
  4. 4 HTML 的元素
    1. 4.1 文档元素
      1. 4.1.1 html 元素
    2. 4.2 文档元数据
      1. 4.2.1 head 元素
      2. 4.2.2 title 元素
      3. 4.2.3 base 元素
      4. 4.2.4 link 元素
        1. 4.2.4.1 处理 media 属性
        2. 4.2.4.2 处理 type 属性
        3. 4.2.4.3 从 link 元素获取并处理资源
        4. 4.2.4.4 处理 `Link` 标头
        5. 4.2.4.5 早期提示
        6. 4.2.4.6 为用户提供跟随使用 link 元素创建的超链接的方法
      5. 4.2.5 meta 元素
        1. 4.2.5.1 标准元数据名称
        2. 4.2.5.2 其他元数据名称
        3. 4.2.5.3 Pragma 指令
        4. 4.2.5.4 指定文档的字符编码
      6. 4.2.6 style 元素
      7. 4.2.7 样式与脚本的交互
    3. 4.3 章节
      1. 4.3.1 body 元素
      2. 4.3.2 article 元素
      3. 4.3.3 section 元素
      4. 4.3.4 nav 元素
      5. 4.3.5 aside 元素
      6. 4.3.6 h1、h2、h3、h4、h5 和 h6 元素
      7. 4.3.7 hgroup 元素
      8. 4.3.8 header 元素
      9. 4.3.9 footer 元素
      10. 4.3.10 address 元素
      11. 4.3.11 标题和大纲
        1. 4.3.11.1 标题级别和偏移量
        2. 4.3.11.2 大纲示例
        3. 4.3.11.3 向用户公开大纲
      12. 4.3.12 用法摘要
        1. 4.3.12.1 文章还是章节？
    4. 4.4 分组内容
      1. 4.4.1 p 元素
      2. 4.4.2 hr 元素
      3. 4.4.3 pre 元素
      4. 4.4.4 blockquote 元素
      5. 4.4.5 ol 元素
      6. 4.4.6 ul 元素
      7. 4.4.7 menu 元素
      8. 4.4.8 li 元素
      9. 4.4.9 dl 元素
      10. 4.4.10 dt 元素
      11. 4.4.11 dd 元素
      12. 4.4.12 figure 元素
      13. 4.4.13 figcaption 元素
      14. 4.4.14 main 元素
      15. 4.4.15 search 元素
      16. 4.4.16 div 元素
    5. 4.5 文本级语义
      1. 4.5.1 a 元素
      2. 4.5.2 em 元素
      3. 4.5.3 strong 元素
      4. 4.5.4 small 元素
      5. 4.5.5 s 元素
      6. 4.5.6 cite 元素
      7. 4.5.7 q 元素
      8. 4.5.8 dfn 元素
      9. 4.5.9 abbr 元素
      10. 4.5.10 ruby 元素
      11. 4.5.11 rt 元素
      12. 4.5.12 rp 元素
      13. 4.5.13 data 元素
      14. 4.5.14 time 元素
      15. 4.5.15 code 元素
      16. 4.5.16 var 元素
      17. 4.5.17 samp 元素
      18. 4.5.18 kbd 元素
      19. 4.5.19 sub 和 sup 元素
      20. 4.5.20 i 元素
      21. 4.5.21 b 元素
      22. 4.5.22 u 元素
      23. 4.5.23 mark 元素
      24. 4.5.24 bdi 元素
      25. 4.5.25 bdo 元素
      26. 4.5.26 span 元素
      27. 4.5.27 br 元素
      28. 4.5.28 wbr 元素
      29. 4.5.29 用法摘要
    6. 4.6 链接
      1. 4.6.1 简介
      2. 4.6.2 由 a 和 area 元素创建的链接
      3. 4.6.3 超链接元素的 API
      4. 4.6.4 a 和 area 元素的 API
      5. 4.6.5 跟随超链接
      6. 4.6.6 下载资源
      7. 4.6.7 超链接审计
        1. 4.6.7.1 `Ping-From` 和 `Ping-To` 标头
      8. 4.6.8 链接类型
        1. 4.6.8.1 链接类型“alternate”
        2. 4.6.8.2 链接类型“author”
        3. 4.6.8.3 链接类型“bookmark”
        4. 4.6.8.4 链接类型“canonical”
        5. 4.6.8.5 链接类型“dns-prefetch”
        6. 4.6.8.6 链接类型“expect”
        7. 4.6.8.7 链接类型“external”
        8. 4.6.8.8 链接类型“help”
        9. 4.6.8.9 链接类型“icon”
        10. 4.6.8.10 链接类型“license”
        11. 4.6.8.11 链接类型“manifest”
        12. 4.6.8.12 链接类型“modulepreload”
        13. 4.6.8.13 链接类型“nofollow”
        14. 4.6.8.14 链接类型“noopener”
        15. 4.6.8.15 链接类型“noreferrer”
        16. 4.6.8.16 链接类型“opener”
        17. 4.6.8.17 链接类型“pingback”
        18. 4.6.8.18 链接类型“preconnect”
        19. 4.6.8.19 链接类型“prefetch”
        20. 4.6.8.20 链接类型“preload”
        21. 4.6.8.21 链接类型“privacy-policy”
        22. 4.6.8.22 链接类型“search”
        23. 4.6.8.23 链接类型“stylesheet”
        24. 4.6.8.24 链接类型“tag”
        25. 4.6.8.25 链接类型“terms-of-service”
        26. 4.6.8.26 顺序链接类型
          1. 4.6.8.26.1 链接类型“next”
          2. 4.6.8.26.2 链接类型“prev”
        27. 4.6.8.27 其他链接类型
    7. 4.7 编辑
      1. 4.7.1 ins 元素
      2. 4.7.2 del 元素
      3. 4.7.3 ins 和 del 元素共有的属性
      4. 4.7.4 编辑和段落
      5. 4.7.5 编辑和列表
      6. 4.7.6 编辑和表格
    8. 4.8 嵌入内容
      1. 4.8.1 该 picture 元素
      2. 4.8.2 该 source 元素
      3. 4.8.3 该 img 元素
      4. 4.8.4 图像
        1. 4.8.4.1 简介
          1. 4.8.4.1.1 自适应图像
        2. 4.8.4.2 source、 img 和 link 元素共有的属性
          1. 4.8.4.2.1 Srcset 属性
          2. 4.8.4.2.2 Sizes 属性
        3. 4.8.4.3 处理模型
          1. 4.8.4.3.1 获取图像的时机
          2. 4.8.4.3.2 响应 DOM 突变
          3. 4.8.4.3.3 可用图像列表
          4. 4.8.4.3.4 解码图像
          5. 4.8.4.3.5 更新图像数据
          6. 4.8.4.3.6 准备图像以供 呈现
          7. 4.8.4.3.7 选择图像来源
          8. 4.8.4.3.8 从属性创建来源集
          9. 4.8.4.3.9 更新来源集
          10. 4.8.4.3.10 解析 srcset 属性
          11. 4.8.4.3.11 解析 sizes 属性
          12. 4.8.4.3.12 规范化来源密度
          13. 4.8.4.3.13 响应环境变化
        4. 4.8.4.4 提供用作图像替代内容的文本的要求
          1. 4.8.4.4.1 一般准则
          2. 4.8.4.4.2 仅包含图像的链接或按钮
          3. 4.8.4.4.3 具有替代图形表示的短语或段落：图表、示意图、曲线图、地图、插图
          4. 4.8.4.4.4 具有替代图形表示的短语或标签：图标、徽标
          5. 4.8.4.4.5 为获得排版效果而渲染为图形的文本
          6. 4.8.4.4.6 周围部分文本的图形表示
          7. 4.8.4.4.7 辅助图像
          8. 4.8.4.4.8 不添加任何信息的纯装饰性图像
          9. 4.8.4.4.9 形成单个较大图片且不带链接的一 组图像
          10. 4.8.4.4.10 形成单个较大图片且带有链接的一组 图像
          11. 4.8.4.4.11 内容的关键部分
          12. 4.8.4.4.12 并非面向用户的图像
          13. 4.8.4.4.13 面向已知能够查看图像的特定人员的电子邮件或私有文档中的图像
          14. 4.8.4.4.14 面向标记生成器的指南
          15. 4.8.4.4.15 面向一致性检查器的指南
      5. 4.8.5 iframe 元素
      6. 4.8.6 embed 元素
      7. 4.8.7 object 元素
      8. 4.8.8 video 元素
      9. 4.8.9 audio 元素
      10. 4.8.10 track 元素
      11. 4.8.11 媒体元素
        1. 4.8.11.1 错误代码
        2. 4.8.11.2 媒体资源的位置
        3. 4.8.11.3 MIME 类型
        4. 4.8.11.4 网络状态
        5. 4.8.11.5 加载媒体资源
        6. 4.8.11.6 媒体资源中的偏移量
        7. 4.8.11.7 就绪状态
        8. 4.8.11.8 播放媒体资源
        9. 4.8.11.9 定位
        10. 4.8.11.10 具有多个媒体轨道的 媒体资源
          1. 4.8.11.10.1 AudioTrackList 和 VideoTrackList 对象
          2. 4.8.11.10.2 声明式选择 特定音频和视频轨道
        11. 4.8.11.11 定时文本轨道
          1. 4.8.11.11.1 文本轨道模型
          2. 4.8.11.11.2 获取带内文本轨道
          3. 4.8.11.11.3 获取带外文本轨道
          4. 4.8.11.11.4 将各种格式中的提示公开指南为文本轨道提示
          5. 4.8.11.11.5 文本轨道 API
          6. 4.8.11.11.6 文本轨道 API 对象的事件处理程序
          7. 4.8.11.11.7 元数据文本轨道的最佳实践
        12. 4.8.11.12 通过 URL 标识轨道种类
        13. 4.8.11.13 用户界面
        14. 4.8.11.14 时间范围
        15. 4.8.11.15 TrackEvent 接口
        16. 4.8.11.16 事件摘要
        17. 4.8.11.17 安全和隐私注意事项
        18. 4.8.11.18 媒体元素作者的 最佳实践
        19. 4.8.11.19 媒体元素实现者的 最佳实践
      12. 4.8.12 map 元素
      13. 4.8.13 area 元素
      14. 4.8.14 图像映射
        1. 4.8.14.1 创作
        2. 4.8.14.2 处理 模型
      15. 4.8.15 MathML
      16. 4.8.16 SVG
      17. 4.8.17 尺寸属性
    9. 4.9 表格数据
      1. 4.9.1 table 元素
        1. 4.9.1.1 描述表格的技术
        2. 4.9.1.2 表格设计技术
      2. 4.9.2 caption 元素
      3. 4.9.3 colgroup 元素
      4. 4.9.4 col 元素
      5. 4.9.5 tbody 元素
      6. 4.9.6 thead 元素
      7. 4.9.7 tfoot 元素
      8. 4.9.8 tr 元素
      9. 4.9.9 td 元素
      10. 4.9.10 th 元素
      11. 4.9.11 td 和 th 元素的通用属性
      12. 4.9.12 处理 模型
        1. 4.9.12.1 构成表格
        2. 4.9.12.2 建立数据单元格 与标题单元格之间的关系
      13. 4.9.13 示例
    10. 4.10 表单
      1. 4.10.1 简介
        1. 4.10.1.1 编写表单的用户界面
        2. 4.10.1.2 实现表单的 服务器端处理
        3. 4.10.1.3 配置表单与 服务器通信
        4. 4.10.1.4 客户端表单验证
        5. 4.10.1.5 启用 客户端自动填充表单控件
        6. 4.10.1.6 改善移动设备上的 用户体验
        7. 4.10.1.7 字段类型、自动填充字段名称和 输入模态之间的区别
        8. 4.10.1.8 日期、时间和数字格式
      2. 4.10.2 类别
      3. 4.10.3 form 元素
      4. 4.10.4 label 元素
      5. 4.10.5 input 元素
        1. 4.10.5.1 type 属性的状态
          1. 4.10.5.1.1 隐藏状态（type=hidden）
          2. 4.10.5.1.2 文本（type=text）状态和搜索状态（type=search）
          3. 4.10.5.1.3 电话状态（type=tel）
          4. 4.10.5.1.4 URL 状态（type=url）
          5. 4.10.5.1.5 电子邮件状态（type=email）
          6. 4.10.5.1.6 密码状态（type=password）
          7. 4.10.5.1.7 日期状态（type=date）
          8. 4.10.5.1.8 月状态（type=month）
          9. 4.10.5.1.9 周状态（type=week）
          10. 4.10.5.1.10 时间状态（type=time）
          11. 4.10.5.1.11 本地日期和时间状态 （type=datetime-local）
          12. 4.10.5.1.12 数字状态（type=number）
          13. 4.10.5.1.13 范围状态（type=range）
          14. 4.10.5.1.14 颜色状态（type=color）
          15. 4.10.5.1.15 复选框状态（type=checkbox）
          16. 4.10.5.1.16 单选按钮状态（type=radio）
          17. 4.10.5.1.17 文件上传状态（type=file）
          18. 4.10.5.1.18 提交按钮状态（type=submit）
          19. 4.10.5.1.19 图像按钮状态（type=image）
          20. 4.10.5.1.20 重置按钮状态（type=reset）
          21. 4.10.5.1.21 按钮状态（type=button）
        2. 4.10.5.2 关于表单控件本地化的实现 说明
        3. 4.10.5.3 input 元素的通用 属性
          1. 4.10.5.3.1 maxlength 和 minlength 属性
          2. 4.10.5.3.2 size 属性
          3. 4.10.5.3.3 readonly 属性
          4. 4.10.5.3.4 required 属性
          5. 4.10.5.3.5 multiple 属性
          6. 4.10.5.3.6 pattern 属性
          7. 4.10.5.3.7 min 和 max 属性
          8. 4.10.5.3.8 step 属性
          9. 4.10.5.3.9 list 属性
          10. 4.10.5.3.10 placeholder 属性
        4. 4.10.5.4 input 元素的通用 API
        5. 4.10.5.5 通用事件行为
      6. 4.10.6 button 元素
      7. 4.10.7 select 元素
      8. 4.10.8 datalist 元素
      9. 4.10.9 optgroup 元素
      10. 4.10.10 option 元素
      11. 4.10.11 textarea 元素
      12. 4.10.12 output 元素
      13. 4.10.13 progress 元素
      14. 4.10.14 meter 元素
      15. 4.10.15 fieldset 元素
      16. 4.10.16 legend 元素
      17. 4.10.17 selectedcontent 元素
      18. 4.10.18 表单控件基础结构
        1. 4.10.18.1 表单控件的值
        2. 4.10.18.2 可变性
        3. 4.10.18.3 控件与表单的关联
      19. 4.10.19 表单控件共有的属性
        1. 4.10.19.1 命名表单控件：name 属性
        2. 4.10.19.2 提交 元素方向性：dirname 属性
        3. 4.10.19.3 限制用户输入 长度：maxlength 属性
        4. 4.10.19.4 设置最小输入长度要求：minlength 属性
        5. 4.10.19.5 启用 和禁用表单控件：disabled 属性
        6. 4.10.19.6 表单提交属性
        7. 4.10.19.7 自动填充
          1. 4.10.19.7.1 自动填充表单 控件：autocomplete 属性
          2. 4.10.19.7.2 处理模型
      20. 4.10.20 文本控件选区的 API
      21. 4.10.21 约束
        1. 4.10.21.1 定义
        2. 4.10.21.2 约束验证
        3. 4.10.21.3 约束验证 API
        4. 4.10.21.4 安全性
      22. 4.10.22 表单提交
        1. 4.10.22.1 简介
        2. 4.10.22.2 隐式提交
        3. 4.10.22.3 表单提交算法
        4. 4.10.22.4 构造条目列表
        5. 4.10.22.5 选择表单提交 编码
        6. 4.10.22.6 将 条目列表转换为名称-值对列表
        7. 4.10.22.7 URL 编码的表单数据
        8. 4.10.22.8 多部分表单数据
        9. 4.10.22.9 纯文本表单数据
        10. 4.10.22.10 SubmitEvent 接口
        11. 4.10.22.11 FormDataEvent 接口
      23. 4.10.23 重置表单
    11. 4.11 交互式元素
      1. 4.11.1 details 元素
      2. 4.11.2 summary 元素
      3. 4.11.3 命令
        1. 4.11.3.1 分面
        2. 4.11.3.2 使用 a 元素定义命令
        3. 4.11.3.3 使用 button 元素定义命令
        4. 4.11.3.4 使用 input 元素定义命令
        5. 4.11.3.5 使用 option 元素定义命令
        6. 4.11.3.6 使用 legend 元素上的 accesskey 属性 定义命令
        7. 4.11.3.7 使用 accesskey 属性在其他元素上定义命令
      4. 4.11.4 dialog 元素
      5. 4.11.5 对话框轻触关闭
    12. 4.12 脚本
      1. 4.12.1 script 元素
        1. 4.12.1.1 处理模型
        2. 4.12.1.2 脚本语言
        3. 4.12.1.3 script 元素内容的限制
        4. 4.12.1.4 外部脚本的内联 文档
        5. 4.12.1.5 script 元素与 XSLT 的交互
      2. 4.12.2 noscript 元素
      3. 4.12.3 template 元素
        1. 4.12.3.1 template 元素与 XSLT 和 XPath 的交互
      4. 4.12.4 slot 元素
      5. 4.12.5 canvas 元素
        1. 4.12.5.1 2D 渲染上下文
          1. 4.12.5.1.1 实现说明
          2. 4.12.5.1.2 画布设置
          3. 4.12.5.1.3 画布状态
          4. 4.12.5.1.4 线条样式
          5. 4.12.5.1.5 文本样式
          6. 4.12.5.1.6 构建路径
          7. 4.12.5.1.7 Path2D 对象
          8. 4.12.5.1.8 变换
          9. 4.12.5.1.9 2D 渲染上下文的图像源
          10. 4.12.5.1.10 填充和描边样式
          11. 4.12.5.1.11 将矩形绘制到位图
          12. 4.12.5.1.12 将文本绘制到位图
          13. 4.12.5.1.13 将路径绘制到画布
          14. 4.12.5.1.14 绘制焦点 环
          15. 4.12.5.1.15 绘制图像
          16. 4.12.5.1.16 像素操作
          17. 4.12.5.1.17 合成
          18. 4.12.5.1.18 图像平滑
          19. 4.12.5.1.19 阴影
          20. 4.12.5.1.20 滤镜
          21. 4.12.5.1.21 使用 外部定义的 SVG 滤镜
          22. 4.12.5.1.22 绘制模型
          23. 4.12.5.1.23 最佳实践
          24. 4.12.5.1.24 示例
        2. 4.12.5.2 ImageBitmap 渲染 上下文
          1. 4.12.5.2.1 简介
          2. 4.12.5.2.2 ImageBitmapRenderingContext 接口
        3. 4.12.5.3 OffscreenCanvas 接口
          1. 4.12.5.3.1 离屏 2D 渲染上下文
        4. 4.12.5.4 色彩空间和色彩空间 转换
        5. 4.12.5.5 将位图序列化到文件
        6. 4.12.5.6 canvas 元素的安全性
        7. 4.12.5.7 预乘 alpha 和 2D 渲染上下文
    13. 4.13 自定义元素
      1. 4.13.1 简介
        1. 4.13.1.1 创建自主自定义 元素
        2. 4.13.1.2 创建表单关联自定义元素
        3. 4.13.1.3 创建具有 默认无障碍角色、状态和属性的自定义元素
        4. 4.13.1.4 创建自定义内置 元素
        5. 4.13.1.5 自主自定义元素的缺点
        6. 4.13.1.6 在元素创建后 升级元素
        7. 4.13.1.7 限定作用域的自定义元素注册表
        8. 4.13.1.8 公开自定义元素状态
      2. 4.13.2 自定义元素 构造函数和 反应的要求
        1. 4.13.2.1 移动时保留 自定义元素状态
      3. 4.13.3 核心概念
      4. 4.13.4 CustomElementRegistry 接口
      5. 4.13.5 升级
      6. 4.13.6 自定义元素反应
      7. 4.13.7 元素内部结构
        1. 4.13.7.1 ElementInternals 接口
        2. 4.13.7.2 Shadow 根访问
        3. 4.13.7.3 表单关联自定义元素
        4. 4.13.7.4 无障碍语义
        5. 4.13.7.5 自定义状态伪类
    14. 4.14 没有专用元素的常用惯用模式
      1. 4.14.1 面包屑导航
      2. 4.14.2 标签云
      3. 4.14.3 对话
      4. 4.14.4 脚注
    15. 4.15 禁用的元素
    16. 4.16 使用选择器和 CSS 匹配 HTML 元素
      1. 4.16.1 CSS 'attr()' 函数的大小写敏感性
      2. 4.16.2 选择器的大小写敏感性
      3. 4.16.3 伪类
  5. 5 微数据
    1. 5.1 简介
      1. 5.1.1 概述
      2. 5.1.2 基本语法
      3. 5.1.3 带类型的项目
      4. 5.1.4 项目的全局标识符
      5. 5.1.5 定义词汇表时 选择名称
    2. 5.2 编码微数据
      1. 5.2.1 微数据模型
      2. 5.2.2 项目
      3. 5.2.3 名称：itemprop 属性
      4. 5.2.4 值
      5. 5.2.5 将名称与项目关联
      6. 5.2.6 微数据和其他命名空间
    3. 5.3 示例微数据词汇表
      1. 5.3.1 vCard
        1. 5.3.1.1 转换为 vCard
        2. 5.3.1.2 示例
      2. 5.3.2 vEvent
        1. 5.3.2.1 转换为 iCalendar
        2. 5.3.2.2 示例
      3. 5.3.3 作品许可
        1. 5.3.3.1 示例
    4. 5.4 将 HTML 转换为其他格式
      1. 5.4.1 JSON
  6. 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 跟踪用户激活
      1. 6.4.1 数据模型
      2. 6.4.2 处理模型
      3. 6.4.3 受用户激活限制的 API
      4. 6.4.4 UserActivation 接口
      5. 6.4.5 用户代理自动化
    5. 6.5 元素的激活行为
      1. 6.5.1 ToggleEvent 接口
      2. 6.5.2 CommandEvent 接口
    6. 6.6 焦点
      1. 6.6.1 简介
      2. 6.6.2 数据模型
      3. 6.6.3 tabindex 属性
      4. 6.6.4 处理 模型
      5. 6.6.5 顺序焦点导航
      6. 6.6.6 焦点管理 API
      7. 6.6.7 autofocus 属性
    7. 6.7 分配键盘快捷键
      1. 6.7.1 简介
      2. 6.7.2 accesskey 属性
      3. 6.7.3 处理 模型
    8. 6.8 编辑
      1. 6.8.1 使文档区域可编辑：contenteditable 内容 属性
      2. 6.8.2 使整个 文档 可编辑：designMode 获取器和设置器
      3. 6.8.3 页内编辑器的最佳实践
      4. 6.8.4 编辑 API
      5. 6.8.5 拼写和语法检查
      6. 6.8.6 写作建议
      7. 6.8.7 自动大写
      8. 6.8.8 自动更正
      9. 6.8.9 输入模态：inputmode 属性
      10. 6.8.10 输入模态：enterkeyhint 属性
    9. 6.9 页面内查找
      1. 6.9.1 简介
      2. 6.9.2 与 details 和 hidden=until-found 的交互
      3. 6.9.3 与选择的交互
    10. 6.10 关闭请求和关闭观察器
      1. 6.10.1 关闭请求
      2. 6.10.2 关闭观察器基础设施
      3. 6.10.3 CloseWatcher 接口
    11. 6.11 拖放
      1. 6.11.1 简介
      2. 6.11.2 拖动数据存储
      3. 6.11.3 DataTransfer 接口
        1. 6.11.3.1 DataTransferItemList 接口
        2. 6.11.3.2 DataTransferItem 接口
      4. 6.11.4 DragEvent 接口
      5. 6.11.5 处理模型
      6. 6.11.6 事件摘要
      7. 6.11.7 draggable 属性
      8. 6.11.8 拖放模型中的 安全风险
    12. 6.12 popover 属性
      1. 6.12.1 弹出框目标属性
      2. 6.12.2 弹出框轻触关闭
  7. 7 加载网页
    1. 7.1 支持性概念
      1. 7.1.1 源
        1. 7.1.1.1 站点
        2. 7.1.1.2 放宽 同源限制
        3. 7.1.1.3 Origin 接口
      2. 7.1.2 以源为键的代理集群
      3. 7.1.3 跨源打开者 策略
        1. 7.1.3.1 标头
        2. 7.1.3.2 因打开者策略导致的浏览上下文组 切换
        3. 7.1.3.3 报告
      4. 7.1.4 跨源嵌入者策略
        1. 7.1.4.1 标头
        2. 7.1.4.2 嵌入者策略检查
      5. 7.1.5 沙盒化
      6. 7.1.6 iframe 元素 引用者策略
      7. 7.1.7 策略容器
    2. 7.2 与导航和 会话历史相关的 API
      1. 7.2.1 Window、 WindowProxy 和 Location 对象的安全基础设施
        1. 7.2.1.1 与 IDL 集成
        2. 7.2.1.2 共享内部 槽：[[CrossOriginPropertyDescriptorMap]]
        3. 7.2.1.3 共享抽象操作
          1. 7.2.1.3.1 CrossOriginProperties ( O )
          2. 7.2.1.3.2 CrossOriginPropertyFallback ( P )
          3. 7.2.1.3.3 IsPlatformObjectSameOrigin ( O )
          4. 7.2.1.3.4 CrossOriginGetOwnPropertyHelper ( O, P )
          5. 7.2.1.3.5 CrossOriginGet ( O, P, Receiver )
          6. 7.2.1.3.6 CrossOriginSet ( O, P, V, Receiver )
          7. 7.2.1.3.7 CrossOriginOwnPropertyKeys ( O )
      2. 7.2.2 Window 对象
        1. 7.2.2.1 打开和 关闭窗口
        2. 7.2.2.2 对 Window 对象的索引访问
        3. 7.2.2.3 对 Window 对象的命名访问
        4. 7.2.2.4 访问相关窗口
        5. 7.2.2.5 历史浏览器界面元素 API
        6. 7.2.2.6 Window 对象的脚本设置
      3. 7.2.3 WindowProxy 奇异对象
        1. 7.2.3.1 [[GetPrototypeOf]] ( )
        2. 7.2.3.2 [[SetPrototypeOf]] ( V )
        3. 7.2.3.3 [[IsExtensible]] ( )
        4. 7.2.3.4 [[PreventExtensions]] ( )
        5. 7.2.3.5 [[GetOwnProperty]] ( P )
        6. 7.2.3.6 [[DefineOwnProperty]] ( P, Desc )
        7. 7.2.3.7 [[Get]] ( P, Receiver )
        8. 7.2.3.8 [[Set]] ( P, V, Receiver )
        9. 7.2.3.9 [[Delete]] ( P )
        10. 7.2.3.10 [[OwnPropertyKeys]] ( )
      4. 7.2.4 Location 接口
        1. 7.2.4.1 [[GetPrototypeOf]] ( )
        2. 7.2.4.2 [[SetPrototypeOf]] ( V )
        3. 7.2.4.3 [[IsExtensible]] ( )
        4. 7.2.4.4 [[PreventExtensions]] ( )
        5. 7.2.4.5 [[GetOwnProperty]] ( P )
        6. 7.2.4.6 [[DefineOwnProperty]] ( P, Desc )
        7. 7.2.4.7 [[Get]] ( P, Receiver )
        8. 7.2.4.8 [[Set]] ( P, V, Receiver )
        9. 7.2.4.9 [[Delete]] ( P )
        10. 7.2.4.10 [[OwnPropertyKeys]] ( )
      5. 7.2.5 History 接口
      6. 7.2.6 导航 API
        1. 7.2.6.1 简介
        2. 7.2.6.2 Navigation 接口
        3. 7.2.6.3 核心基础设施
        4. 7.2.6.4 初始化和更新条目列表
        5. 7.2.6.5 NavigationHistoryEntry 接口
        6. 7.2.6.6 历史记录条目列表
        7. 7.2.6.7 发起导航
        8. 7.2.6.8 持续导航跟踪
        9. 7.2.6.9 NavigationActivation 接口
        10. 7.2.6.10 navigate 事件
          1. 7.2.6.10.1 NavigateEvent 接口
          2. 7.2.6.10.2 NavigationPrecommitController 接口
          3. 7.2.6.10.3 NavigationDestination 接口
          4. 7.2.6.10.4 触发事件
          5. 7.2.6.10.5 滚动和焦点行为
      7. 7.2.7 事件接口
        1. 7.2.7.1 NavigationCurrentEntryChangeEvent 接口
        2. 7.2.7.2 PopStateEvent 接口
        3. 7.2.7.3 HashChangeEvent 接口
        4. 7.2.7.4 PageSwapEvent 接口
        5. 7.2.7.5 PageRevealEvent 接口
        6. 7.2.7.6 PageTransitionEvent 接口
        7. 7.2.7.7 BeforeUnloadEvent 接口
      8. 7.2.8 NotRestoredReasons 接口
    3. 7.3 文档序列的 基础设施
      1. 7.3.1 可导航对象
        1. 7.3.1.1 可遍历可导航对象
        2. 7.3.1.2 顶级可遍历对象
        3. 7.3.1.3 子可导航对象
        4. 7.3.1.4 Jake 图
        5. 7.3.1.5 相关可导航对象集合
        6. 7.3.1.6 可导航对象销毁
        7. 7.3.1.7 可导航对象 目标名称
      2. 7.3.2 浏览上下文
        1. 7.3.2.1 创建浏览上下文
        2. 7.3.2.2 相关浏览上下文
        3. 7.3.2.3 浏览上下文的分组
      3. 7.3.3 完全活动的文档
    4. 7.4 导航和 会话 历史
      1. 7.4.1 会话历史
        1. 7.4.1.1 会话历史条目
        2. 7.4.1.2 文档状态
        3. 7.4.1.3 会话历史的集中修改
        4. 7.4.1.4 会话历史的低级操作
      2. 7.4.2 导航
        1. 7.4.2.1 支持概念
        2. 7.4.2.2 开始导航
        3. 7.4.2.3 结束导航
          1. 7.4.2.3.1 通常的跨文档 导航情况
          2. 7.4.2.3.2 javascript: URL 特殊情况
          3. 7.4.2.3.3 片段导航
          4. 7.4.2.3.4 非获取方案和外部 软件
        4. 7.4.2.4 阻止导航
        5. 7.4.2.5 中止导航
      3. 7.4.3 重新加载和遍历
      4. 7.4.4 非片段同步“导航”
      5. 7.4.5 填充会话历史条目
      6. 7.4.6 应用历史步骤
        1. 7.4.6.1 更新可遍历对象
        2. 7.4.6.2 更新文档
        3. 7.4.6.3 显示文档
        4. 7.4.6.4 滚动到片段
        5. 7.4.6.5 持久化历史条目状态
    5. 7.5 文档生命周期
      1. 7.5.1 共享文档 创建基础设施
      2. 7.5.2 加载 HTML 文档
      3. 7.5.3 加载 XML 文档
      4. 7.5.4 加载文本文档
      5. 7.5.5 加载 multipart/x-mixed-replace 文档
      6. 7.5.6 加载媒体文档
      7. 7.5.7 加载 用于不具有 DOM 的内联内容的文档
      8. 7.5.8 完成加载过程
      9. 7.5.9 卸载文档
      10. 7.5.10 销毁文档
      11. 7.5.11 中止文档加载
    6. 7.6 推测性加载
      1. 7.6.1 推测规则
        1. 7.6.1.1 数据模型
        2. 7.6.1.2 解析
        3. 7.6.1.3 处理模型
      2. 7.6.2 导航预取
      3. 7.6.3 `Speculation-Rules` 标头
      4. 7.6.4 `Sec-Speculation-Tags` 标头
      5. 7.6.5 安全注意事项
        1. 7.6.5.1 跨站请求
        2. 7.6.5.2 注入的内容
        3. 7.6.5.3 IP 匿名化
      6. 7.6.6 隐私注意事项
        1. 7.6.6.1 启发式方法和可选性
        2. 7.6.6.2 状态分区
        3. 7.6.6.3 身份关联
    7. 7.7 `X-Frame-Options` 标头
    8. 7.8 `Refresh` 标头
    9. 7.9 浏览器用户界面 注意事项
  8. 8 Web 应用程序 API
    1. 8.1 脚本
      1. 8.1.1 简介
      2. 8.1.2 代理和代理集群
        1. 8.1.2.1 与 JavaScript 代理形式体系的集成
        2. 8.1.2.2 与 JavaScript 代理集群形式体系的集成
      3. 8.1.3 领域及其对应物
        1. 8.1.3.1 环境
        2. 8.1.3.2 环境设置对象
        3. 8.1.3.3 领域、设置对象和 全局对象
          1. 8.1.3.3.1 入口
          2. 8.1.3.3.2 现任
          3. 8.1.3.3.3 当前
          4. 8.1.3.3.4 相关
        4. 8.1.3.4 启用和禁用脚本
        5. 8.1.3.5 安全上下文
      4. 8.1.4 脚本 处理 模型
        1. 8.1.4.1 脚本
        2. 8.1.4.2 获取脚本
        3. 8.1.4.3 创建脚本
        4. 8.1.4.4 调用脚本
        5. 8.1.4.5 终止脚本
        6. 8.1.4.6 运行时脚本错误
        7. 8.1.4.7 未处理的 promise 拒绝
        8. 8.1.4.8 导入映射解析结果
        9. 8.1.4.9 推测规则解析结果
      5. 8.1.5 模块说明符解析
        1. 8.1.5.1 解析算法
        2. 8.1.5.2 导入映射
        3. 8.1.5.3 导入映射处理模型
      6. 8.1.6 JavaScript 规范宿主钩子
        1. 8.1.6.1 HostEnsureCanAddPrivateElement(O)
        2. 8.1.6.2 HostEnsureCanCompileStrings(realm, parameterStrings, bodyString, codeString, compilationType, parameterArgs, bodyArg)
        3. 8.1.6.3 HostGetCodeForEval(argument)
        4. 8.1.6.4 HostPromiseRejectionTracker(promise, operation)
        5. 8.1.6.5 HostSystemUTCEpochNanoseconds(global)
        6. 8.1.6.6 与作业相关的宿主钩子
          1. 8.1.6.6.1 HostCallJobCallback(callback, V, argumentsList)
          2. 8.1.6.6.2 HostEnqueueFinalizationRegistryCleanupJob(finalizationRegistry)
          3. 8.1.6.6.3 HostEnqueueGenericJob(job, realm)
          4. 8.1.6.6.4 HostEnqueuePromiseJob(job, realm)
          5. 8.1.6.6.5 HostEnqueueTimeoutJob(job, realm, milliseconds)
          6. 8.1.6.6.6 HostMakeJobCallback(callable)
        7. 8.1.6.7 与模块相关的宿主钩子
          1. 8.1.6.7.1 HostGetImportMetaProperties(moduleRecord)
          2. 8.1.6.7.2 HostGetSupportedImportAttributes()
          3. 8.1.6.7.3 HostLoadImportedModule(referrer, moduleRequest, loadState, payload)
      7. 8.1.7 事件循环
        1. 8.1.7.1 定义
        2. 8.1.7.2 排入任务
        3. 8.1.7.3 处理模型
        4. 8.1.7.4 通用任务源
        5. 8.1.7.5 从其他规范中处理事件循环
      8. 8.1.8 事件
        1. 8.1.8.1 事件处理器
        2. 8.1.8.2 元素、Document 对象和 Window 对象上的事件处理器
          1. 8.1.8.2.1 IDL 定义
        3. 8.1.8.3 事件触发
    2. 8.2 WindowOrWorkerGlobalScope 混入接口
    3. 8.3 Base64 实用方法
    4. 8.4 动态标记插入
      1. 8.4.1 打开输入流
      2. 8.4.2 关闭输入流
      3. 8.4.3 document.write()
      4. 8.4.4 document.writeln()
    5. 8.5 DOM 解析和序列化 API
      1. 8.5.1 DOMParser 接口
      2. 8.5.2 HTML 解析方法
      3. 8.5.3 HTML 序列化方法
      4. 8.5.4 innerHTML 属性
      5. 8.5.5 outerHTML 属性
      6. 8.5.6 insertAdjacentHTML() 方法
      7. 8.5.7 createContextualFragment() 方法
      8. 8.5.8 XMLSerializer 接口
    6. 8.6 HTML 净化
      1. 8.6.1 简介
        1. 8.6.1.1 安全和不安全
      2. 8.6.2 Sanitizer 接口
      3. 8.6.3 净化器配置
        1. 8.6.3.1 配置不变量
      4. 8.6.4 净化算法
      5. 8.6.5 净化常量
      6. 8.6.6 安全考虑
        1. 8.6.6.1 服务器端反射型和存储型 XSS
        2. 8.6.6.2 DOM 覆盖
        3. 8.6.6.3 使用脚本小工具的 XSS
        4. 8.6.6.4 变异型 XSS
    7. 8.7 定时器
    8. 8.8 微任务排队
    9. 8.9 用户提示
      1. 8.9.1 简单对话框
      2. 8.9.2 打印
    10. 8.10 系统状态与功能
      1. 8.10.1 Navigator 对象
        1. 8.10.1.1 客户端标识
        2. 8.10.1.2 语言偏好
        3. 8.10.1.3 浏览器状态
        4. 8.10.1.4 自定义方案处理程序：registerProtocolHandler() 方法
          1. 8.10.1.4.1 安全和隐私
          2. 8.10.1.4.2 用户代理自动化
        5. 8.10.1.5 Cookie
        6. 8.10.1.6 PDF 查看支持
    11. 8.11 图像
      1. 8.11.1 ImageData 接口
      2. 8.11.2 ImageBitmap 接口
    12. 8.12 动画帧
  9. 9 通信
    1. 9.1 MessageEvent 接口
    2. 9.2 服务器发送事件
      1. 9.2.1 简介
      2. 9.2.2 EventSource 接口
      3. 9.2.3 处理模型
      4. 9.2.4 `Last-Event-ID` 标头
      5. 9.2.5 解析事件流
      6. 9.2.6 解释事件流
      7. 9.2.7 编写说明
      8. 9.2.8 无连接推送和其他功能
      9. 9.2.9 垃圾回收
      10. 9.2.10 实现建议
    3. 9.3 跨文档消息传递
      1. 9.3.1 简介
      2. 9.3.2 安全性
        1. 9.3.2.1 作者
        2. 9.3.2.2 用户代理
      3. 9.3.3 发布消息
    4. 9.4 通道消息传递
      1. 9.4.1 简介
        1. 9.4.1.1 示例
        2. 9.4.1.2 端口作为 Web 对象能力模型的基础
        3. 9.4.1.3 端口作为 抽象服务实现的基础
      2. 9.4.2 消息通道
      3. 9.4.3 MessageEventTarget 混入
      4. 9.4.4 消息端口
      5. 9.4.5 端口和垃圾回收
    5. 9.5 向其他浏览 上下文广播
  10. 10 Web worker
    1. 10.1 简介
      1. 10.1.1 范围
      2. 10.1.2 示例
        1. 10.1.2.1 后台 数值计算 worker
        2. 10.1.2.2 将 JavaScript 模块用作 worker
        3. 10.1.2.3 共享 worker 简介
        4. 10.1.2.4 使用共享 worker 的共享状态
        5. 10.1.2.5 委托
        6. 10.1.2.6 提供库
      3. 10.1.3 教程
        1. 10.1.3.1 创建专用 worker
        2. 10.1.3.2 与专用 worker 通信
        3. 10.1.3.3 共享 worker
    2. 10.2 基础设施
      1. 10.2.1 全局作用域
        1. 10.2.1.1 WorkerGlobalScope 通用接口
        2. 10.2.1.2 专用 worker 和 DedicatedWorkerGlobalScope 接口
        3. 10.2.1.3 共享 worker 和 SharedWorkerGlobalScope 接口
      2. 10.2.2 事件循环
      3. 10.2.3 Worker 的生命周期
      4. 10.2.4 处理 模型
      5. 10.2.5 运行时脚本错误
      6. 10.2.6 创建 worker
        1. 10.2.6.1 AbstractWorker 混入
        2. 10.2.6.2 Worker 的脚本设置
        3. 10.2.6.3 专用 worker 和 Worker 接口
        4. 10.2.6.4 共享 worker 和 SharedWorker 接口
      7. 10.2.7 并发硬件能力
    3. 10.3 worker 可用的 API
      1. 10.3.1 导入脚本和库
      2. 10.3.2 WorkerNavigator 接口
      3. 10.3.3 WorkerLocation 接口
  11. 11 Worklet
    1. 11.1 简介
      1. 11.1.1 动机
      2. 11.1.2 代码幂等性
      3. 11.1.3 推测性求值
    2. 11.2 示例
      1. 11.2.1 加载脚本
      2. 11.2.2 注册类并调用其 方法
    3. 11.3 基础设施
      1. 11.3.1 全局作用域
        1. 11.3.1.1 代理和事件循环
        2. 11.3.1.2 创建和终止
        3. 11.3.1.3 Worklet 的脚本设置
      2. 11.3.2 Worklet 类
      3. 11.3.3 worklet 的生命周期
  12. 12 Web 存储
    1. 12.1 简介
    2. 12.2 API
      1. 12.2.1 Storage 接口
      2. 12.2.2 sessionStorage 获取器
      3. 12.2.3 localStorage 获取器
      4. 12.2.4 StorageEvent 接口
    3. 12.3 隐私
      1. 12.3.1 用户跟踪
      2. 12.3.2 数据的敏感性
    4. 12.4 安全
      1. 12.4.1 DNS 欺骗攻击
      2. 12.4.2 跨目录攻击
      3. 12.4.3 实现风险
  13. 13 HTML 语法
    1. 13.1 编写 HTML 文档
      1. 13.1.1 DOCTYPE
      2. 13.1.2 元素
        1. 13.1.2.1 开始标签
        2. 13.1.2.2 结束标签
        3. 13.1.2.3 属性
        4. 13.1.2.4 可选标签
        5. 13.1.2.5 内容模型的限制
        6. 13.1.2.6 原始文本和 可转义原始文本元素内容的限制
      3. 13.1.3 文本
        1. 13.1.3.1 换行符
      4. 13.1.4 字符引用
      5. 13.1.5 CDATA 节
      6. 13.1.6 注释
      7. 13.1.7 处理指令
    2. 13.2 解析 HTML 文档
      1. 13.2.1 解析模型概述
      2. 13.2.2 解析错误
      3. 13.2.3 输入字节流
        1. 13.2.3.1 使用已知字符 编码解析
        2. 13.2.3.2 确定字符编码
        3. 13.2.3.3 字符编码
        4. 13.2.3.4 解析期间更改编码
        5. 13.2.3.5 预处理输入流
      4. 13.2.4 解析状态
        1. 13.2.4.1 插入模式
        2. 13.2.4.2 打开元素栈
        3. 13.2.4.3 活动格式化 元素列表
        4. 13.2.4.4 元素指针
        5. 13.2.4.5 其他解析状态标志
      5. 13.2.5 令牌化
        1. 13.2.5.1 数据状态
        2. 13.2.5.2 RCDATA 状态
        3. 13.2.5.3 RAWTEXT 状态
        4. 13.2.5.4 脚本数据状态
        5. 13.2.5.5 PLAINTEXT 状态
        6. 13.2.5.6 标签打开状态
        7. 13.2.5.7 结束标签打开状态
        8. 13.2.5.8 标签名称状态
        9. 13.2.5.9 RCDATA 小于号状态
        10. 13.2.5.10 RCDATA 结束标签打开状态
        11. 13.2.5.11 RCDATA 结束标签名称状态
        12. 13.2.5.12 RAWTEXT 小于号状态
        13. 13.2.5.13 RAWTEXT 结束标签打开状态
        14. 13.2.5.14 RAWTEXT 结束标签名称状态
        15. 13.2.5.15 脚本数据小于号 状态
        16. 13.2.5.16 脚本数据结束标签打开 状态
        17. 13.2.5.17 脚本数据结束标签名称 状态
        18. 13.2.5.18 脚本数据转义开始 状态
        19. 13.2.5.19 脚本数据转义开始短横线 状态
        20. 13.2.5.20 脚本数据已转义状态
        21. 13.2.5.21 脚本数据已转义短横线 状态
        22. 13.2.5.22 脚本数据已转义双短横线 状态
        23. 13.2.5.23 脚本数据已转义 小于号状态
        24. 13.2.5.24 脚本数据已转义结束标签 打开状态
        25. 13.2.5.25 脚本数据已转义结束标签 名称状态
        26. 13.2.5.26 脚本数据双重转义 开始状态
        27. 13.2.5.27 脚本数据双重已转义 状态
        28. 13.2.5.28 脚本数据双重已转义 短横线状态
        29. 13.2.5.29 脚本数据双重 已转义双短横线状态
        30. 13.2.5.30 脚本数据双重 已转义小于号状态
        31. 13.2.5.31 脚本数据双重转义结束 状态
        32. 13.2.5.32 属性名称之前状态
        33. 13.2.5.33 属性名称状态
        34. 13.2.5.34 属性名称之后状态
        35. 13.2.5.35 属性值之前状态
        36. 13.2.5.36 属性值 （双引号）状态
        37. 13.2.5.37 属性值 （单引号）状态
        38. 13.2.5.38 属性值（不带引号） 状态
        39. 13.2.5.39 属性值（带引号） 之后状态
        40. 13.2.5.40 自闭合开始标签状态
        41. 13.2.5.41 伪注释状态
        42. 13.2.5.42 标记声明打开状态
        43. 13.2.5.43 注释开始状态
        44. 13.2.5.44 注释开始短横线状态
        45. 13.2.5.45 注释状态
        46. 13.2.5.46 注释小于号状态
        47. 13.2.5.47 注释小于号感叹号 状态
        48. 13.2.5.48 注释小于号感叹号 短横线状态
        49. 13.2.5.49 注释小于号 感叹号双短横线状态
        50. 13.2.5.50 注释结束短横线状态
        51. 13.2.5.51 注释结束状态
        52. 13.2.5.52 注释结束感叹号状态
        53. 13.2.5.53 DOCTYPE 状态
        54. 13.2.5.54 DOCTYPE 名称之前状态
        55. 13.2.5.55 DOCTYPE 名称状态
        56. 13.2.5.56 DOCTYPE 名称之后状态
        57. 13.2.5.57 DOCTYPE public 关键字 之后状态
        58. 13.2.5.58 DOCTYPE public 标识符之前状态
        59. 13.2.5.59 DOCTYPE public 标识符（双引号）状态
        60. 13.2.5.60 DOCTYPE public 标识符（单引号）状态
        61. 13.2.5.61 DOCTYPE public 标识符之后状态
        62. 13.2.5.62 DOCTYPE public 与 system 标识符之间状态
        63. 13.2.5.63 DOCTYPE system 关键字 之后状态
        64. 13.2.5.64 DOCTYPE system 标识符之前状态
        65. 13.2.5.65 DOCTYPE system 标识符（双引号）状态
        66. 13.2.5.66 DOCTYPE system 标识符（单引号）状态
        67. 13.2.5.67 DOCTYPE system 标识符之后状态
        68. 13.2.5.68 伪 DOCTYPE 状态
        69. 13.2.5.69 CDATA 节状态
        70. 13.2.5.70 CDATA 节方括号状态
        71. 13.2.5.71 CDATA 节结束状态
        72. 13.2.5.72 处理指令打开 状态
        73. 13.2.5.73 处理指令目标 状态
        74. 13.2.5.74 处理指令目标 之后状态
        75. 13.2.5.75 处理指令数据 状态
        76. 13.2.5.76 处理指令问号 状态
        77. 13.2.5.77 字符引用状态
        78. 13.2.5.78 命名字符引用 状态
        79. 13.2.5.79 歧义与号状态
        80. 13.2.5.80 数字字符引用 状态
        81. 13.2.5.81 十六进制字符 引用开始状态
        82. 13.2.5.82 十六进制字符 引用状态
        83. 13.2.5.83 十进制字符引用 状态
        84. 13.2.5.84 数字字符引用 结束状态
      6. 13.2.6 树构造
        1. 13.2.6.1 创建和插入节点
        2. 13.2.6.2 解析仅包含 文本的元素
        3. 13.2.6.3 关闭具有 隐含结束标签的元素
        4. 13.2.6.4 解析 HTML 内容中的令牌的规则
          1. 13.2.6.4.1 “初始”插入模式
          2. 13.2.6.4.2 “在 html 之前”插入 模式
          3. 13.2.6.4.3 “在 head 之前”插入 模式
          4. 13.2.6.4.4 “在 head 中”插入模式
          5. 13.2.6.4.5 “在 head noscript 中”插入 模式
          6. 13.2.6.4.6 “在 head 之后”插入 模式
          7. 13.2.6.4.7 “在 body 中”插入模式
          8. 13.2.6.4.8 “文本”插入模式
          9. 13.2.6.4.9 “在 table 中”插入模式
          10. 13.2.6.4.10 “在 table 文本中”插入 模式
          11. 13.2.6.4.11 “在 caption 中”插入模式
          12. 13.2.6.4.12 “在列组中”插入 模式
          13. 13.2.6.4.13 “在 table body 中”插入模式
          14. 13.2.6.4.14 “在行中”插入模式
          15. 13.2.6.4.15 “在单元格中”插入模式
          16. 13.2.6.4.16 “在 template 中”插入模式
          17. 13.2.6.4.17 “在 body 之后”插入模式
          18. 13.2.6.4.18 “在 frameset 中”插入模式
          19. 13.2.6.4.19 “在 frameset 之后”插入 模式
          20. 13.2.6.4.20 “在 body 之后之后” 插入模式
          21. 13.2.6.4.21 “在 frameset 之后之后”插入模式
        5. 13.2.6.5 解析外来 内容中令牌的规则
      7. 13.2.7 结束
      8. 13.2.8 推测性 HTML 解析
      9. 13.2.9 将 HTML DOM 强制转换为信息集
      10. 13.2.10 解析器中的错误处理和异常情况简介
        1. 13.2.10.1 错误嵌套的标签： <b><i></b></i>
        2. 13.2.10.2 错误嵌套的标签： <b><p></b></p>
        3. 13.2.10.3 表格中的意外标记
        4. 13.2.10.4 在页面解析过程中 修改页面的脚本
        5. 13.2.10.5 跨多个文档移动的脚本的执行
        6. 13.2.10.6 未闭合的格式化元素
    3. 13.3 序列化 HTML 片段
    4. 13.4 解析 HTML 片段
    5. 13.5 命名字符引用
  14. 14 XML 语法
    1. 14.1 以 XML 语法编写文档
    2. 14.2 解析 XML 文档
    3. 14.3 序列化 XML 片段
    4. 14.4 解析 XML 片段
  15. 15 渲染
    1. 15.1 简介
    2. 15.2 CSS 用户代理 样式表和表现提示
    3. 15.3 非替换元素
      1. 15.3.1 隐藏元素
      2. 15.3.2 页面
      3. 15.3.3 流内容
      4. 15.3.4 短语内容
      5. 15.3.5 双向文本
      6. 15.3.6 章节和标题
      7. 15.3.7 列表
      8. 15.3.8 表格
      9. 15.3.9 外边距折叠怪异行为
      10. 15.3.10 表单控件
      11. 15.3.11 hr 元素
      12. 15.3.12 fieldset 和 legend 元素
    4. 15.4 替换元素
      1. 15.4.1 嵌入内容
      2. 15.4.2 图像
      3. 15.4.3 嵌入内容和图像的属性
      4. 15.4.4 图像映射
    5. 15.5 控件
      1. 15.5.1 原生外观
      2. 15.5.2 书写模式
      3. 15.5.3 按钮布局
      4. 15.5.4 button 元素
      5. 15.5.5 details 和 summary 元素
      6. 15.5.6 作为文本输入控件的 input 元素
      7. 15.5.7 作为特定领域控件的 input 元素
      8. 15.5.8 作为范围控件的 input 元素
      9. 15.5.9 作为颜色井的 input 元素
      10. 15.5.10 作为复选框和 单选按钮控件的 input 元素
      11. 15.5.11 作为文件上传控件的 input 元素
      12. 15.5.12 作为按钮的 input 元素
      13. 15.5.13 marquee 元素
      14. 15.5.14 meter 元素
      15. 15.5.15 progress 元素
      16. 15.5.16 select 元素
      17. 15.5.17 textarea 元素
    6. 15.6 框架和框架集
    7. 15.7 交互式媒体
      1. 15.7.1 链接、表单和导航
      2. 15.7.2 title 属性
      3. 15.7.3 编辑宿主
      4. 15.7.4 原生用户界面中渲染的文本
    8. 15.8 打印媒体
    9. 15.9 无样式的 XML 文档
  16. 16 过时功能
    1. 16.1 过时但符合规范的功能
      1. 16.1.1 过时但符合规范的功能的警告
    2. 16.2 不符合规范的功能
    3. 16.3 对实现的要求
      1. 16.3.1 marquee 元素
      2. 16.3.2 框架
      3. 16.3.3 其他元素、属性和 API
  17. 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 application/speculationrules+json
    7. 17.7 text/event-stream
    8. 17.8 web+ 方案前缀
  18. 索引
    1. 元素
    2. 元素内容类别
    3. 属性
    4. 元素接口
    5. 所有接口
    6. 事件
    7. HTTP 标头
    8. MIME 类型
  19. 参考文献
  20. 致谢
  21. 知识产权

1 简介

1.1 本规范处于什么位置？

本规范非常详细地定义了 Web 平台的很大一部分。就本规范在 Web 平台规范体系中相对于其他规范的 位置而言，可以将其概括如下：

CSS SVG MathML Service Worker IDB Fetch CSP AV1 Opus PNG 本规范 HTTP TLS DOM Unicode Web IDL MIME URL XML JavaScript 编码

1.2 这是 HTML5 吗？

本节是非规范性的。

简而言之：是的。

详细而言：“HTML5”一词被广泛用作一个流行术语，指代现代 Web 技术，其中许多技术（但绝非全部）由 WHATWG 开发。本文档就是其中之一；其他规范可参见 WHATWG 标准 概览。

1.3 背景

本节是非规范性的。

HTML 是万维网的核心标记语言。最初，HTML 主要被设计为一种 用于从语义上描述科学文档的语言。不过，其通用设计使其能够在随后的多年中 适应于描述多种其他类型的文档，甚至应用程序。

1.4 目标读者

本节是非规范性的。

本规范面向使用本规范所定义特性的文档和脚本作者、实现用于处理 使用本规范所定义特性的页面之工具的实现者，以及希望根据本规范的要求 确认文档或实现是否正确的个人。

本文档可能不适合那些对 Web 技术连基本了解都没有的读者，因为在某些地方， 它为了精确性而牺牲了清晰性，并为了完整性而牺牲了简洁性。更易于理解的教程和编写指南 可以更平缓地介绍这一主题。

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

1.5 范围

本节是非规范性的。

本规范仅限于提供一种语义层级的标记语言及相关的 语义层级脚本 API，用于编写 Web 上从静态文档到动态应用程序的无障碍页面。

本规范的范围不包括提供针对特定媒体自定义呈现形式的机制 （不过，本规范末尾确实包含 Web 浏览器的默认渲染规则，并且该语言还提供了若干 与 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 年完成）的名称完成规范化并发布。 此后，这些工作逐渐停滞；虽然部分 DOM Level 3 规范于 2004 年发布， 但工作组在所有 Level 3 草案完成之前便已关闭。

2003 年，作为下一代 Web 表单技术推出的 XForms 发布， 这重新激发了人们继续发展 HTML 本身，而不是寻找其替代品的兴趣。这种兴趣源于这样一种认识： XML 作为 Web 技术的部署仅限于全新的技术（例如 RSS 和后来的 Atom）， 而不是替代已经部署的现有技术（例如 HTML）。

这一新兴趣首先产生了一个概念验证：证明可以扩展 HTML4 的表单， 使其提供 XForms 1.0 所引入的许多特性，而不要求浏览器实现 与现有 HTML 网页不兼容的渲染引擎。在这一早期阶段，尽管该草案已经公开， 并且已经开始向各方征求意见，但该规范仅受 Opera Software 的版权保护。

2004 年，人们在一次 W3C 研讨会上检验了重新启动 HTML 发展的想法；Mozilla 和 Opera 联合向 W3C 提交了构成 HTML5 工作基础的一些原则（如下所述），以及前述 仅涵盖表单相关特性的早期草案提案。该提案因与此前选择的 Web 发展方向冲突而被否决；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 的现行标准，持续 维护规范，而不是将其冻结在包含已知问题的状态，并根据平台发展需要添加 新特性。

2019 年，WHATWG 和 W3C 签署了一项 协议，决定今后合作维护单一版本的 HTML，即本文档。

1.7 设计说明

本节是非规范性的。

必须承认，HTML 的许多方面乍看之下似乎毫无道理且互不一致。

HTML、其配套的 DOM API 以及许多支持技术，都是在数十年的时间里， 由大量优先事项各不相同的人共同开发的；在许多情况下，他们甚至不知道彼此的存在。

因此，各种特性来自许多不同来源，其设计并不总是特别一致。此外，由于 Web 的独特特征，实现中的错误往往会先成为事实标准，随后成为法律意义上的标准； 这是因为在这些错误得到修复之前，内容常常已经在无意中以依赖这些错误的方式编写。

尽管如此，人们仍努力遵循若干设计目标。接下来的几个小节将介绍这些目标。

1.7.1 脚本执行的可序列化性

本节是非规范性的。

为避免让 Web 作者面对多线程的复杂性，HTML 和 DOM API 的设计保证， 任何脚本都无法检测到其他脚本正在同时执行。即使使用 worker，其设计意图也是使实现的行为 可以被视为将所有全局环境中的所有脚本执行完全序列化。

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

1.7.2 可扩展性

本节是非规范性的。

HTML 提供了多种可扩展性机制，可用于以安全的方式添加语义：

1.8 HTML 与 XML 语法

本节是非规范性的。

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

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

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

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

第二种具体语法是 XML。当文档以 XML MIME 类型传输时，例如 application/xhtml+xml，Web 浏览器会将其视为 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 浏览器。
Web 应用程序 API
本节介绍在 HTML 中编写应用程序脚本所需的基本特性。
Web worker
本节定义用于 JavaScript 后台线程的 API。
Worklet
本节为需要与主 JavaScript 执行环境分开运行 JavaScript 的 API 定义基础设施。
通信
本节介绍使用 HTML 编写的应用程序可用于与同一客户端上运行、来自不同域的其他 应用程序通信的一些机制。本节还引入了一种称为服务器发送事件或 EventSource 的服务器推送事件流机制，以及一种供脚本使用的、 称为 WebSocket 的双向全双工套接字协议。
Web 存储
本节定义一种基于名称－值对的客户端存储机制。
HTML 语法
XML 语法
如果所有这些特性都无法以序列化形式表示并发送给其他人，它们便毫无意义； 因此，这些章节定义了 HTML 和 XML 的语法，以及如何使用这些语法解析内容的规则。
渲染
本节定义 Web 浏览器的默认渲染规则。

此外还有一些附录，列出废弃特性和 IANA 注意事项，以及若干索引。

1.9.1 如何阅读本规范

阅读本规范的方式应与阅读所有其他规范相同。首先，应从头到尾阅读多次。 然后，应至少倒着阅读一次。之后，应从目录中随机选择章节并跟随其中所有交叉引用进行阅读。

如下文符合性要求一节所述，本规范描述了适用于多种符合性类别的 符合性标准。特别是，有些符合性要求适用于生产者，例如作者及其创建的文档； 还有些符合性要求适用于消费者，例如 Web 浏览器。 可以根据要求的对象来区分它们：针对生产者的要求规定允许什么， 而针对消费者的要求规定软件应如何行动。

例如，“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="zh-CN">
 <head>
  <title>示例页面</title>
 </head>
 <body>
  <h1>示例页面</h1>
  <p>这是一个<a href="demo.html">简单的</a>示例。</p>
  <!-- 这是一条注释 -->
 </body>
</html>

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

标签必须以元素彼此完全包含且不重叠的方式嵌套：

<p>这<em>非常<strong>错误</em>！</strong></p>
<p>这<em>是<strong>正确的</strong>。</em></p>

本规范定义了一组可在 HTML 中使用的元素，以及这些元素可以如何嵌套的规则。

元素可以具有属性，用于控制元素的工作方式。在下面的示例中， 使用 a 元素及其 href 属性构成了一个超链接： 

<a href="demo.html">简单的</a>

属性位于 开始标签内，由一个名称和一个值组成，两者由 “=”字符分隔。 如果属性值不包含 ASCII 空白或 "、'、`、=、< 或 > 中的任何字符，则可以保持不加引号。否则， 必须使用单引号或双引号将其括起来。如果值为空字符串，则该值连同 “=”字符可以一并省略。 

<!-- 空属性 -->
<input name=address disabled>
<input name=address disabled="">

<!-- 带值的属性 -->
<input name=address maxlength=200>
<input name=address maxlength='200'>
<input name=address maxlength="200">

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

DOM 树包含多种节点，尤其包括 DocumentType 节点、Element 节点、Text 节点、Comment 节点，以及在某些情况下的 ProcessingInstruction 节点。

本节开头的标记片段会转换为以下 DOM 树：

这棵树的文档元素是 html 元素， 在 HTML 文档中，该位置始终是这个元素。它包含两个元素： head 和 body，以及位于两者之间的一个 Text 节点。

DOM 树中的 Text 节点比最初预期的多得多，因为源代码中包含许多空格（此处以“␣”表示）和换行符 （以“⏎”表示），它们最终都会成为 DOM 中的 Text 节点。不过，由于历史原因，原始标记中的空格和换行符并非全部都会出现在 DOM 中。 尤其是，head 开始标签之前的所有空白都会被静默丢弃， 而 body 结束标签之后的所有空白最终都会被放置在 body 的末尾。

head 元素包含一个 title 元素，该元素本身包含一个文本为“示例页面”的 Text 节点。同样，body 元素包含一个 h1 元素、一个 p 元素和一条注释。

可以通过页面中的脚本操作这棵 DOM 树。脚本（通常使用 JavaScript）是一些小程序， 可以使用 script 元素或事件处理程序内容属性 嵌入。例如，下面是一个带脚本的表单，该脚本将表单的 output 元素的值设置为“你好，世界”：

<form name="main">
 结果：<output name="result"></output>
 <script>
  document.forms.main.elements.result.value = '你好，世界';
 </script>
</form>

DOM 树中的每个元素都由一个对象表示，这些对象提供可用于操作它们的 API。 例如，可以通过多种方式更改一个链接（例如上面树中的 a 元素）的 “href”属性：

var a = document.links[0]; // 获取文档中的第一个链接
a.href = 'sample.html'; // 更改链接的目标 URL
a.protocol = 'https'; // 仅更改 URL 的方案部分
a.setAttribute('href', 'https://example.com/'); // 直接更改内容属性

由于实现（尤其是 Web 浏览器等交互式实现）在处理和呈现 HTML 文档时使用 DOM 树来表示文档，因此本规范大多以 DOM 树来表述，而不是以上述标记来表述。

HTML 文档表示对交互式内容的一种与媒体无关的描述。HTML 文档可以渲染到屏幕上， 也可以通过语音合成器输出，或者显示在盲文显示器上。为精确影响这种渲染的方式， 作者可以使用 CSS 等样式语言。

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

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
  <title>带样式的示例页面</title>
  <style>
   body { background: navy; color: yellow; }
  </style>
 </head>
 <body>
  <h1>带样式的示例页面</h1>
  <p>此页面仅用于演示。</p>
 </body>
</html>

有关如何使用 HTML 的更多详细信息，建议作者查阅教程和指南。 本规范中包含的一些示例也可能有所帮助，但需要提醒初学者： 本规范出于必要性，以一种起初可能难以理解的详细程度定义该语言。

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

本节是非规范性的。

使用 HTML 创建交互式网站时，需要谨慎避免引入漏洞，使攻击者能够破坏 网站本身或网站用户的完整性。

全面研究这一问题超出了本文档的范围，因此强烈建议作者更深入地研究该问题。 不过，本节尝试简要介绍 HTML 应用程序开发中的一些常见陷阱。

Web 的安全模型基于“源”的概念，因此 Web 上许多潜在攻击都涉及跨源操作。 [ORIGIN]

未验证用户输入
跨站脚本攻击（XSS）
SQL 注入

接收不可信输入时，例如文本评论等用户生成内容、URL 参数中的值、 来自第三方网站的消息等，必须在使用数据之前对其进行验证，并在显示数据时 正确转义。未能做到这一点，可能使恶意用户实施多种攻击： 从危害可能较小的攻击，例如提供负数年龄等虚假用户信息； 到严重攻击，例如每次用户查看包含该信息的页面时运行脚本，并可能在此过程中传播攻击； 再到灾难性攻击，例如删除服务器中的所有数据。

编写用于验证用户输入的过滤器时，必须始终采用安全列表方式： 只允许已知安全的构造，并禁止所有其他输入。采用阻止列表方式的过滤器 会禁止已知恶意输入并允许其他所有内容，这种方式并不安全，因为并非所有恶意内容 都已经被发现（例如，新的恶意方式可能会在未来被发明）。

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

<ul>
 <li><a href="message.cgi?say=Hello">显示“你好”</a>
 <li><a href="message.cgi?say=Welcome">显示“欢迎”</a>
 <li><a href="message.cgi?say=Kittens">显示“小猫”</a>
</ul>

如果消息未经转义就直接显示给用户，恶意攻击者便可以构造一个包含 script 元素的 URL：

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

如果攻击者随后诱使受害用户访问该页面，攻击者选择的脚本就会在页面上运行。 这种脚本可以执行任意数量的恶意操作，其能力仅受网站所提供功能的限制： 例如，如果该网站是电子商务商店，该脚本可能会导致用户在不知情的情况下 进行任意多次不需要的购买。

这称为跨站脚本攻击。

有许多构造可以用于诱骗网站执行代码。下面列出了一些建议作者在编写 安全列表过滤器时考虑的情况：

跨站请求伪造（CSRF）

如果网站允许用户提交会产生用户特定副作用的表单，例如以用户的名义 在论坛上发布消息、进行购买或申请护照，那么必须验证该请求是用户有意发出的， 而不是其他网站诱骗用户在不知情的情况下发出请求。

出现这一问题是因为 HTML 表单可以提交到其他源。

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

点击劫持

为用户提供执行其可能并不希望执行之操作的界面时，页面的设计需要避免 用户被诱骗激活该界面的可能性。

一种诱骗用户的方式是：恶意网站将受害网站放入一个很小的 iframe 中，然后诱使用户点击， 例如让用户玩反应游戏。一旦用户开始游戏，恶意网站就可以在用户即将点击时， 快速将 iframe 移动到鼠标光标下方，从而诱骗用户点击受害网站的界面。

为避免这种情况，不预期在框架中使用的网站应只在检测到自身不在框架中时 启用其界面（例如，将 window 对象与 top 属性的值进行比较）。

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

本节是非规范性的。

HTML 中的脚本具有“运行至完成”语义，这意味着浏览器通常会不间断地运行脚本， 然后才执行其他操作，例如触发后续事件或继续解析文档。

另一方面，HTML 文件是以增量方式解析的，这意味着解析器可以在任何时候暂停， 以便让脚本运行。这通常是一件好事，但也意味着作者需要小心， 避免在事件可能已经触发之后才挂接事件处理程序。

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

这一问题的一种表现形式涉及 img 元素和 load 事件。该事件可能会在元素完成解析后立即触发， 尤其是在图像已经被缓存的情况下（这种情况很常见）。

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

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

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

<script>
 var img = new Image();
 img.src = 'games.png';
 img.alt = '游戏';
 img.onload = gamesLogoHasLoaded;
 // img.addEventListener('load', gamesLogoHasLoaded, false); // 这样也可以
</script>

不过，如果作者先创建 img 元素，然后在另一个单独的脚本中添加事件监听器， 那么 load 事件可能会在两者之间触发，导致该事件被错过：

<!-- 不要使用这种方式，它存在竞态条件！ -->
 <img id="games" src="games.png" alt="游戏">
 <!-- 当解析器暂停时，'load' 事件可能在此处触发，
      在这种情况下你将无法捕获它！ -->
 <script>
  var img = document.getElementById('games');
  img.onload = gamesLogoHasLoaded; // 可能永远不会触发！
 </script>

1.10.3 如何发现编写 HTML 时的错误：验证器和一致性检查器

本节是非规范性的。

建议作者使用一致性检查器（也称为验证器）来发现常见错误。 WHATWG 在以下地址维护了一份此类工具的列表：https://whatwg.org/validator/

1.11 对作者的符合性要求

本节是非规范性的。

与此前版本的 HTML 规范不同，本规范不仅定义了有效文档的必要处理方式， 还相当详细地定义了无效文档的必要处理方式。

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

1.11.1 表现性标记

本节是非规范性的。

此前 HTML 版本中的大多数表现性特性已不再允许使用。 人们发现，表现性标记通常存在若干问题：

使用表现性元素会降低无障碍性

虽然可以通过某种方式使用表现性标记，为辅助技术（AT）用户提供可接受的体验 （例如使用 ARIA），但与使用语义适当的标记相比，这样做要困难得多。此外， 即使使用这些技术，也无法帮助非辅助技术的非图形界面用户，例如文本模式浏览器的用户， 获得无障碍页面。

另一方面，使用与媒体无关的标记，可以轻松地以适用于更多用户 （例如文本浏览器用户）的方式编写文档。

维护成本更高

以标记与样式相互独立的方式编写网站，会显著更容易维护。例如， 更改一个在整个网站中使用 <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 文件且不存储状态的用户代理）不兼容。 为避免与这类用户代理产生互操作性问题，任何导致此类行为的语法都被视为无效。

可能导致信息集强制转换的错误

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

导致性能不成比例地下降的错误

某些语法构造可能导致性能不成比例地下降。为阻止使用这类构造， 通常会将它们规定为不符合规范。

例如，以下标记会导致性能下降，因为必须在每个段落中重建所有未闭合的 i 元素， 使每个后续段落中的元素数量逐渐增加： 

<p><i>她做了一个梦。
<p><i>她梦见自己吃了早餐。
<p><i>然后是午餐。
<p><i>最后是晚餐。

该片段生成的 DOM 如下：

涉及脆弱语法构造的错误

由于历史原因，某些语法构造相对脆弱。为帮助减少用户意外遇到此类问题的情况， 这些构造被规定为不符合规范。

例如，即使省略结尾分号，属性中的某些命名字符引用仍会被解析。 可以安全地包含一个与号，后跟不构成命名字符引用的字母； 但如果将这些字母更改为确实构成命名字符引用的字符串， 它们就会被解释为相应字符。

在该片段中，属性值为“?bill&ted”：

<a href="?bill&ted">比尔和泰德</a>

然而，在下面的片段中，属性值实际上是“?art©”，而不是 预期的“?art&copy”，因为即使没有结尾分号， “&copy”也会与“&copy;”采用相同的处理方式， 因而被解释为“©”：

<a href="?art&copy">艺术与复制</a>

为避免这一问题，所有命名字符引用都必须以分号结尾， 未使用分号的命名字符引用会被标记为错误。

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

<a href="?bill&ted">比尔和泰德</a> <!-- &ted 没有问题，因为它不是命名字符引用 -->
<a href="?art&amp;copy">艺术与复制</a> <!-- 必须转义 &，因为 &copy 确实是命名字符引用 -->
涉及旧式用户代理中已知互操作性问题的错误

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

例如，这就是为什么不允许在不加引号的属性中使用 U+0060 GRAVE ACCENT 字符（`）。某些旧式用户代理有时会将其视为引号字符。

另一个示例是 DOCTYPE，它必须触发无怪异模式，因为旧式用户代理在怪异模式下的行为通常在很大程度上没有文档说明。

可能使作者面临安全攻击的错误

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

例如，禁止使用 UTF-7 的限制纯粹是为了避免作者遭受一种已知的、使用 UTF-7 的跨站脚本攻击。[UTF7]

作者意图不明确的情况

当标记中作者的意图非常不明确时，通常会将其规定为不符合规范。 尽早纠正这些错误可使后续维护更加容易。

例如，不清楚作者是想让以下内容成为一个 h1 标题，还是一个 h2 标题： 

<h1>联系信息</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 元素，都能达到与在 span 元素中嵌套 div 元素相同的目的，但只有最后一种方式涉及在 行内框中放置块级框，因此禁止使用最后一种组合。

另一个示例是交互式内容 不能相互嵌套。例如，button 元素不能包含 textarea 元素。这是因为嵌套这类交互式元素时的默认行为 会令用户极其困惑。应将这些元素并排放置，而不是相互嵌套。

表明可能误解规范的错误

有时，禁止某些内容是因为允许它很可能会造成作者混淆。

例如，禁止将 disabled 属性设置为值“false”， 因为尽管从表面上看，这似乎表示元素已启用，但实际上它表示元素 已禁用（对实现而言，重要的是该属性是否存在，而不是其值）。

仅为简化语言而施加限制所涉及的错误

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

例如，area 元素的 shape 属性在实践中同时接受 circ 和 circle 作为同义值， 但仍禁止使用 circ 值，以简化教程和其他学习资料。 允许同时使用两者没有任何好处，反而会在教授该语言时造成额外混淆。

涉及解析器特殊行为的错误

某些元素的解析方式有些特殊（通常出于历史原因）， 对其内容模型的限制旨在避免让作者遇到这些问题。

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

<p>欢迎。<form><label>姓名：</label> <input></form>

其解析结果与以下标记完全相同：

<p>欢迎。</p><form><label>姓名：</label> <input></form>
很可能导致脚本以难以调试的方式失败的错误

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

例如，这就是为什么两个 id 属性具有相同值是不符合规范的。 重复 ID 会导致选择错误的元素，有时会产生灾难性影响，而其原因又很难确定。

浪费作者编写时间的错误

某些构造被禁止，是因为从历史上看，它们曾导致大量编写时间被浪费； 通过鼓励作者避免这些构造，可以为作者今后的工作节省时间。

例如，script 元素的 src 属性会导致元素内容被忽略。 不过，这一点并不明显，尤其是当元素内容看起来像可执行脚本时； 这可能导致作者花费大量时间尝试调试内联脚本，却没有意识到它根本没有执行。 为减少这一问题，本规范规定，当 script 元素存在 src 属性时，其中包含可执行脚本是不符合规范的。 这意味着验证文档的作者不太可能在这类错误上浪费时间。

涉及作者在 HTML 和 XML 语法之间迁移时会受影响领域的错误

一些作者希望编写可同时被解释为 XML 和 HTML，并产生相似结果的文件。 尽管由于其中涉及大量细微复杂性，通常不建议采用这种做法 （尤其是在涉及脚本、样式或任何类型的自动序列化时），但本规范仍规定了若干限制， 旨在至少在一定程度上缓解这些困难。这使作者在 HTML 和 XML 语法之间迁移时， 更容易将这种方式作为过渡步骤。

例如，围绕 lang 和 xml:lang 属性存在一些较复杂的规则， 旨在使两者保持同步。

另一个示例是 HTML 序列化中对 xmlns 属性值的限制， 这些限制旨在确保符合规范的文档中的元素，无论按 HTML 还是 XML 处理， 最终都会进入相同的命名空间。

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

正如针对语法的限制旨在允许未来版本的语言引入新语法一样， 对元素内容模型和属性值的某些限制旨在允许 HTML 词汇表在未来扩展。

例如，将 target 属性中以 U+005F LOW LINE 字符（_）开头的值限制为仅允许特定预定义值，可以在未来引入新的预定义值， 而不会与作者定义的值发生冲突。

表明错误使用其他规范的错误

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

例如，要求接受媒体查询列表的属性只能使用有效的 媒体查询列表，可以强化遵循该规范符合性规则的重要性。

1.12 推荐阅读

本节是非规范性的。

以下文档可能会引起本规范读者的兴趣。

万维网字符模型 1.0：基础 [CHARMOD]

本架构规范为规范作者、软件 开发者和内容开发者提供了在万维网上进行可互操作文本处理的共同参考，其基础是由 Unicode 标准和 ISO/IEC 10646 共同定义的通用字符集。涉及的主题包括“字符”“编码”和 “字符串”等术语的使用、参考处理模型、字符编码的选择和标识、 字符转义以及字符串索引。

Unicode 安全注意事项 [UTR36]

由于 Unicode 包含大量字符，并涵盖 世界各地多种不同的书写系统，不正确的使用方式可能使程序或系统面临 潜在的安全攻击。随着越来越多的产品实现国际化，这一点尤其重要。 本文档介绍了程序员、系统分析师、标准开发者和用户应当考虑的一些安全注意事项， 并提供了降低问题风险的具体建议。

Web 内容无障碍指南（WCAG） [WCAG]

Web 内容无障碍指南（WCAG）涵盖了广泛的 建议，用于使 Web 内容更具无障碍性。遵循这些指南可使内容惠及更广泛的残障人士， 包括盲人和低视力人士、失聪和听力受损人士、学习障碍人士、认知能力受限人士、 行动受限人士、言语障碍人士、光敏感人士，以及同时具有上述多种障碍的人士。遵循这些 指南通常还会使 Web 内容对一般用户来说更加易用。

创作工具无障碍指南（ATAG）2.0 [ATAG]

本规范提供了有关设计 Web 内容 创作工具的指南，以提高其对残障人士的无障碍性。符合这些指南的创作工具 将通过为残障作者提供无障碍用户界面，以及使所有作者能够创建、支持并促进 无障碍 Web 内容的制作，从而推动无障碍性。

用户代理无障碍指南（UAAG）2.0 [UAAG]

本文档提供了有关设计用户代理的指南， 以降低残障人士访问 Web 时所面临的障碍。用户代理包括浏览器和其他用于获取并渲染 Web 内容的软件。符合这些指南的用户代理将通过其自身的用户界面以及其他 内部功能来促进无障碍性，其中包括与其他技术（尤其是辅助技术）进行通信的能力。 此外，不仅是残障用户，所有用户都应当会发现符合规范的用户代理更加易用。

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、计算机等。相比之下，要立即运行的操作必须 中断当前正在运行的任务，运行自身，然后恢复先前正在运行的任务。

有关编写利用并行机制的规范的指导，请参阅从其他规范处理事件循环。

为了避免操作相同数据的不同并行 算法之间出现 竞态条件，可以使用并行队列。

并行队列表示必须 串行运行的算法步骤队列。

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

要向并行 队列将步骤入队， 请将算法步骤入队至该并行队列的算法 队列。

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

  1. 令 parallelQueue 为一个新的并行 队列。

  2. 并行运行以下步骤：

    1. 当 true 时：

      1. 令 steps 为从 parallelQueue 的算法 队列中出队的结果。

      2. 如果 steps 不是无，则运行 steps。

      3. 断言：运行 steps 没有抛出异常，因为 并行运行的步骤不允许 抛出异常。

      不要求实现将其实现为持续运行的 循环。标准中的算法旨在易于理解，而不一定有利于 电池续航时间或性能。

  3. 返回 parallelQueue。

并行运行的步骤本身也可以 并行运行 其他步骤。例如，在并行队列内部， 让一系列步骤与该队列 并行运行可能很有用。

假设某个标准定义了 nameList（一个列表），以及一个用于 将 name 添加到 nameList 的方法；除非 nameList 已经包含 name，在这种情况下该方法会拒绝。

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

  1. 令 p 为在 this 的相关领域中创建的新 promise。

  2. 令 global 为 this 的相关全局 对象。

  3. 并行运行以下步骤：

    1. 如果 nameList 包含 name， 则在给定 global 的DOM 操作 任务源上排入一个全局任务，以使用 TypeError 拒绝 p，并中止这些 步骤。

    2. 执行某些可能耗时较长的工作。

    3. 将 name 追加至 nameList。

    4. 在给定 global 的DOM 操作 任务源上排入一个全局任务，以使用 undefined 兑现 p。

  4. 返回 p。

上述过程的两次调用可能会同时运行，这意味着在步骤 3.1 中 name 不在 nameList 中，但它在步骤 3.3 运行之前可能已被添加， 这意味着 name 最终会在 nameList 中出现两次。

并行队列解决了这一问题。该标准会令 nameListQueue 为 启动新的并行 队列的结果，并按如下方式定义添加名称的步骤：

  1. 令 p 为在 this 的相关领域中创建的新 promise。

  2. 令 global 为 this 的相关全局 对象。

  3. 向 nameListQueue将以下步骤入队：

    1. 如果 nameList 包含 name， 则在给定 global 的DOM 操作任务源上排入一个全局任务，以使用 TypeError 拒绝 p，并中止这些 步骤。

    2. 执行某些可能耗时较长的工作。

    3. 将 name 追加至 nameList。

    4. 在给定 global 的DOM 操作 任务源上排入一个全局任务，以使用 undefined 兑现 p。

  4. 返回 p。

这些步骤现在会排队运行，从而避免竞态。

2.1.2 资源

当提及用户代理是否具有能够解码外部资源语义的实现时，本规范使用术语 受支持。如果实现能够处理某种 格式或类型的外部资源，而不会忽略该资源的关键部分，则称该格式或 类型是受支持的。某个特定资源是否 受支持，可能取决于正在使用该资源格式的哪些特性。

例如，如果 PNG 图像的像素数据能够被解码和渲染，那么即使实现并不知道该图像 还包含动画数据，也会认为该图像采用受支持的格式。

如果 MPEG-4 视频文件所使用的压缩格式不受支持，那么即使实现能够根据文件的元数据确定 影片的尺寸，也不会认为该文件采用受支持的格式。

某些规范，尤其是 HTTP 规范中所称的 表示，在本规范中称为资源。 [HTTP]

资源的关键子资源是该资源为了得到正确处理而需要 可用的资源。哪些资源被视为关键资源，由定义该资源格式的 规范确定。

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

此定义尚未实现完全互操作；此外，一些用户代理似乎会将 背景图像或 Web 字体等资源视为关键子资源。理想情况下，应由 CSS 工作组定义这一点；有关这方面的 进展，请参阅 w3c/csswg-drafts 问题 #1088。

2.1.3 XML 兼容性

为了便于从 HTML 迁移到 XML，符合本 规范的用户代理会将 HTML 中的元素放入 http://www.w3.org/1999/xhtml 命名空间中，至少在 DOM 和 CSS 中如此。术语“HTML 元素”指该命名空间中的任何元素， 即使该元素位于 XML 文档中也是如此。

除非另有说明，本规范定义或提及的所有元素都位于 HTML 命名空间（“http://www.w3.org/1999/xhtml”）中，而本规范 定义或提及的所有属性均没有命名空间。

术语元素类型用于指具有给定 局部名称和命名空间的元素集合。例如，button 元素是元素 类型为 button 的元素，这意味着它们具有 局部名称“button”，并且 （根据上述定义隐式地）位于 HTML 命名空间中。

2.1.4 DOM 树

当规定某个元素或属性被忽略， 或被视为其他某个值，或被当作其他事物处理时，这仅指 节点进入 DOM 后对该节点进行的处理。在这种情况下，用户代理不得更改 DOM。

仅当内容属性的新值与其先前值 不同时，才称其值发生更改；将属性设置为其已有的值并不会更改 它。

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

可以针对 HTML 元素的局部 名称定义特定的HTML 元素插入步骤、HTML 元素 连接后步骤、HTML 元素移除步骤和HTML 元素移动 步骤。

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

  1. 如果 insertedNode 是一个元素，其命名空间是 HTML 命名空间， 并且本 标准为 insertedNode 的局部名称 定义了HTML 元素插入步骤， 则以 insertedNode 为参数运行相应的HTML 元素插入步骤。

  2. 如果 insertedNode 是表单相关元素，或者是某个 表单相关元素的祖先：

    1. 如果该表单相关 元素的解析器插入 标志已设置， 则返回。

    2. 重置该表单相关元素的表单所有者。

  3. 如果 insertedNode 是一个 Element， 并且它不位于某个HTML 解析器的 开放元素栈中，则以 insertedNode 的 节点文档为参数，处理内部 资源链接。

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

  1. 如果 insertedNode 是一个元素，其命名空间是 HTML 命名空间， 并且本 标准为 insertedNode 的局部 名称定义了HTML 元素连接后 步骤，则以 insertedNode 为参数运行相应的HTML 元素连接后步骤。

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

  1. 令 document 为 removedNode 的节点文档。

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

    这不会执行取消聚焦步骤、 聚焦步骤或焦点更新步骤，因此不会触发 blur 或 change 事件。

  3. 如果 removedNode 是一个元素，其命名空间是 HTML 命名空间， 并且本 标准为 removedNode 的局部名称 定义了HTML 元素移除步骤， 则以 removedNode、 isSubtreeRoot 和 oldAncestor 为参数运行相应的HTML 元素移除步骤。

  4. 如果 removedNode 是一个具有非空 表单所有者的表单相关元素，并且 removedNode 及其表单所有者已不再 位于同一棵树中，则重置 removedNode 的表单所有者。

  5. 如果 removedNode 的 popover 属性不处于 无弹出框状态，则以 removedNode、false、false、false 和 null 为参数运行隐藏 弹出框算法。

给定 movedNode、isSubtreeRoot 和 oldAncestor，HTML 标准的移动步骤定义如下：

  1. 如果 movedNode 是一个元素，其命名空间是 HTML 命名空间，并且本 标准为 movedNode 的局部名称定义了HTML 元素 移动步骤，则以 movedNode、isSubtreeRoot 和 oldAncestor 为参数运行相应的HTML 元素移动步骤。

  2. 如果 movedNode 是一个具有非空 表单所有者的表单相关元素，并且 movedNode 及其表单所有者已不再位于 同一棵树中，则重置 movedNode 的表单所有者。

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

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

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

2.1.5 脚本

有时会使用“一个 Foo 对象”这一表述，其中 Foo 实际上是一个接口，而不是使用更准确的“一个实现 Foo 接口的对象”。

当正在检索 IDL 属性的值时（例如由作者脚本检索），称该属性正在 获取；当为其分配新值时，称该属性正在 设置。

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

2.1.6 插件

术语插件指用户代理使用的一组由实现定义的内容 处理程序。这些处理程序可以参与用户代理对 Document 对象的渲染，但既不充当该 Document 的子 可导航对象，也不会向该 Document 的 DOM 中引入任何 Node 对象。

通常，此类内容处理程序由第三方提供，不过用户代理也可以 将内置内容处理程序指定为插件。

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

插件的一个示例是：当用户导航到 PDF 文件时，在 可导航对象中实例化的 PDF 查看器。无论 实现该 PDF 查看器组件的一方是否与 实现用户代理本身的一方相同，它都会被视为插件。不过，与用户代理分开启动的 PDF 查看器应用程序（而不是使用相同的界面）根据本 定义并不是插件。

本规范没有定义与插件进行交互的机制，因为预期该机制 取决于具体的用户代理和平台。一些用户代理可能选择支持 Netscape Plugin API 等插件机制；另一些可能使用远程内容转换器，或 内置对某些类型的支持。事实上，本规范根本不要求用户代理 支持插件。[NPAPI]

浏览器在与供插件使用的外部内容交互时 应当极其谨慎。当第三方软件以与用户代理本身相同的 权限运行时，第三方软件中的漏洞会变得与 用户代理中的漏洞一样危险。

(This is a tracking vector.) 由于不同用户拥有不同的插件集合会形成一种 跟踪向量，从而增加用户被唯一识别的可能性，因此建议用户代理 为每个用户支持完全相同的插件集合。

2.1.7 字符编码

字符 编码，或者在不存在歧义时简称为编码，是 Encoding 中定义的，在字节流和 Unicode 字符串之间进行转换的既定方式。一个 编码具有一个编码 名称和一个或多个编码标签，在 Encoding 标准中分别称为 该编码的名称和标签。[ENCODING]

2.1.8 符合性类别

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

符合规范的文档是遵守所有文档符合性标准 的 文档。为了便于阅读，其中一些符合性要求被表述为对作者的符合性 要求；此类要求隐含地也是对文档的要求：根据 定义，假定所有文档都曾有一名作者。（在某些情况下，该作者 本身可能是用户代理——如下所述，此类用户代理还须遵守额外规则。）

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

文档符合性要求与实现符合性要求之间不存在隐含关系。 用户代理不能随意处理不符合规范的 文档；无论输入文档是否符合规范，本规范所述的处理模型都适用于 实现。

用户代理分为多个具有不同符合性 要求的类别，这些类别之间可能重叠。

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

支持XML 语法的 Web 浏览器必须按照本规范的说明，处理 XML 文档中 来自 HTML 命名空间的元素和属性， 以便用户能够与其交互，除非这些元素的语义已被 其他规范覆盖。

符合规范的 Web 浏览器在 XML 文档中发现 script 元素时， 会执行该元素中包含的脚本。不过，如果该元素位于 以 XSLT 表示的转换中（假定用户代理也支持 XSLT），则 处理器会将该 script 元素视为 构成该转换一部分的 不透明元素。

支持HTML 语法的 Web 浏览器必须按照本规范的说明， 处理被标记为 HTML MIME 类型的文档，以便用户能够 与其交互。

支持脚本的用户代理还必须按照 Web IDL 中的说明，成为本规范中 IDL 片段的符合规范的实现。[WEBIDL]

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

非交互式呈现用户代理

仅为了渲染 HTML 和 XML 文档的非交互式版本而处理这些文档的用户代理， 必须遵守与 Web 浏览器相同的符合性标准，但可以不遵守 与用户交互有关的要求。

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

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

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

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

这不是强制要求。尤其是，即使用户代理确实实现了建议默认 渲染，也建议其提供可覆盖该默认设置的选项，以改善 用户体验，例如更改颜色对比度、使用不同的焦点样式，或以其他方式 使体验对用户更具无障碍性和易用性。

被指定为支持建议默认渲染的用户代理，在保持该 指定期间，必须实现渲染一节定义为 用户代理应当实现之行为的规则。

不支持脚本的用户代理

不支持脚本（或完全禁用了脚本特性）的实现，可以不支持本 规范中提及的事件和 DOM 接口。对于本规范中以事件模型 或 DOM 为依据定义的部分，此类用户代理仍必须表现得如同支持事件和 DOM 一样。

脚本可能构成应用程序不可分割的一部分。不支持脚本或 已禁用脚本的 Web 浏览器可能无法完整表达作者的 意图。

符合性检查器

符合性检查器必须验证文档是否符合本规范所述的适用符合性 标准。自动符合性检查器可以不 检测那些需要解释作者意图的错误（例如，如果 blockquote 元素的内容不是引文，则该文档不符合规范， 但在没有人工判断输入的情况下运行的符合性检查器无需检查 blockquote 元素是否只包含引用材料）。

符合性检查器必须检查输入文档在没有 浏览上下文的情况下解析时是否符合规范（这意味着 不运行任何脚本，并且 解析器的脚本模式为已禁用），还应当 检查输入文档 在具有执行脚本之浏览上下文的情况下解析时是否符合规范， 并检查这些脚本是否从不导致出现不符合规范的状态，脚本执行本身期间 短暂出现的状态除外。（这只是一项“应当”而非“必须”的 要求，因为已证明这不可能做到。[COMPUTABLE]）

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

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

换言之，符合性标准分为三种类型：

  1. 可以用 DTD 表达的标准。
  2. 无法由 DTD 表达，但仍可由计算机检查的标准。
  3. 只能由人类检查的标准。

符合性检查器必须检查前两种标准。简单的基于 DTD 的验证器只检查 第一类错误，因此根据 本规范，它不是符合规范的符合性检查器。

数据挖掘工具

出于渲染文档或检查文档符合性以外的原因而处理 HTML 和 XML 文档的 应用程序和工具，应当按照其所处理文档的语义 行事。

如果某个工具生成文档大纲， 但 为每个段落增加嵌套层级，而不为 标题增加嵌套层级，则该工具不符合规范。

创作工具和标记生成器

创作工具和标记生成器必须生成符合规范的文档。 适用于作者的符合性标准，在适当情况下也适用于创作工具。

创作工具可以不严格遵守元素只能用于其 指定用途的要求，但仅限于创作工具尚无法确定 作者意图的范围。不过，创作工具不得自动误用元素，也不得鼓励 用户这样做。

例如，将 address 元素用于 任意联系信息不符合规范；该元素只能用于标记 其最近的 article 或 body 元素祖先的联系信息。 不过，由于 创作工具可能无法判断两者之间的差异，因此创作工具可以不遵守 该要求。但这并不意味着创作工具可以将 address 元素用于任何斜体文本块（例如）；这只意味着创作工具 不必验证当用户使用工具为 article 元素插入联系信息时， 用户确实是在这样做，而不是插入 其他内容。

就符合性检查而言，编辑器必须输出符合规范的文档， 其符合程度应与符合性检查器所验证的程度相同。

当使用创作工具编辑不符合规范的文档时，该工具可以保留 编辑会话期间未被编辑之文档部分中的符合性错误 （即允许编辑工具往返处理错误内容）。不过，如果保留了此类错误， 创作工具不得声称输出符合规范。

创作工具预期大致分为两类：基于结构 或语义数据工作的工具，以及采用所见即所得、特定媒体编辑 方式工作的工具（WYSIWYG）。

对于用于创作 HTML 的工具，前一种机制是首选，因为可以利用 源信息中的结构，对哪些 HTML 元素和 属性最合适作出有根据的选择。

不过，WYSIWYG 工具也是合理的。WYSIWYG 工具应当使用其已知 合适的元素，而不应使用其不知道是否合适的元素。在 某些极端情况下，这可能意味着将流式元素的使用限制为少数几个元素，例如 div、b、i 和 span，并大量使用 style 属性。

无论是否为 WYSIWYG，所有创作工具都应当尽最大努力，使 用户能够创建结构良好、语义丰富且与媒体无关的内容。

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

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

2.1.9 依赖项

本规范依赖于其他若干底层规范。

Infra

以下术语在 Infra 中定义：[INFRA]

Unicode 和 Encoding

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

如前所述，本规范根据这些规范中定义的术语 引入术语。

以下术语按照 Encoding 中的定义使用：[ENCODING]

  • 获取 编码
  • 获取 输出 编码
  • 通用解码 算法，该算法接受字节流和编码并返回字符流
  • UTF-8 解码 算法，该算法接受字节流并返回字符流，此外还会移除一个 前导 UTF-8 字节顺序标记（BOM）（如果存在）
  • 不移除 BOM 的 UTF-8 解码算法，该算法与UTF-8 解码相同， 不同之处在于 它不会移除一个前导 UTF-8 字节顺序标记（BOM）
  • 编码算法， 该算法接受字符流和编码并返回字节流
  • UTF-8 编码 算法，该算法接受字符流并返回字节流
  • BOM 探测 算法，该算法接受字节流并返回编码或 null。
XML 和相关规范

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

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

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

space 这一名称的属性位于XML 命名空间中，由 可扩展标记语言（XML）定义。[XML]

Name 产生式 在 XML 中定义。 [XML]

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

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

URL

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

本规范还引用了若干方案和协议：

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

URL 模式

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

HTTP 和相关规范

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

以下术语在HTTP 状态管理机制中定义： [COOKIES]

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

以下术语在HTTP 结构化字段值中定义： [STRUCTURED-FIELDS]

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

Fetch

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

以下术语在引用来源策略中定义： [REFERRERPOLICY]

以下术语在混合内容中定义：[MIX]

以下术语在子资源完整性中定义：[SRI]

No-Vary-Search HTTP 响应标头字段

以下术语在No-Vary-Search HTTP 响应标头字段中定义： [NOVARYSEARCH]

绘制计时

以下术语在绘制计时中定义：[PAINTTIMING]

导航计时

以下术语在导航计时中定义： [NAVIGATIONTIMING]

资源计时

以下术语在资源计时中定义： [RESOURCETIMING]

性能时间线

以下术语在性能时间线中定义： [PERFORMANCETIMELINE]

长动画帧

以下术语在长动画帧中定义：[LONGANIMATIONFRAMES]

长任务

以下术语在长任务中定义：[LONGTASKS]

Web IDL

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

以下术语在 Web IDL 中定义：

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

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

当本规范要求用户代理创建表示特定时间的 Date 对象 时（该时间可能是特殊值 Not-a-Number），该时间的毫秒 分量（如果存在）必须截断为整数，并且新创建的 Date 对象的时间值必须表示截断后所得的时间。

例如，给定 2000 年 1 月 1 日 UTC 时间 01:00 之后 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 的用户代理还必须实现动态代码品牌 检查提案。以下术语在其中定义，并在本规范中使用： [JSDYNAMICCODEBRANDCHECKS]

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

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

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

WebAssembly

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

DOM

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

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

特别是，以下特性在 DOM 中定义：[DOM]

以下特性在 UI Events 中定义：[UIEVENTS]

以下特性在触摸事件中定义：[TOUCH]

以下特性在指针事件中定义： [POINTEREVENTS]

以下事件在剪贴板 API 和事件中定义： [CLIPBOARD-APIS]

本规范有时使用术语名称指代事件的 类型，例如“名为 click 的事件”或“如果事件 名称为 keypress”。对于事件而言，术语 “名称”和“类型”是同义词。

以下特性在DOM 解析和序列化中定义： [DOMPARSING]

以下特性在选择 API中定义：[SELECTION]

建议用户代理实现 execCommand 中描述的特性。[EXECCOMMAND]

以下特性在全屏 API中定义：[FULLSCREEN]

高精度时间提供以下特性：[HRT]

文件 API

本规范使用文件 API中定义的以下特性： [FILEAPI]

索引数据库 API

以下术语在索引数据库 API中定义： [INDEXEDDB]

媒体源扩展

以下术语在媒体源扩展中定义： [MEDIASOURCE]

媒体捕获和流

以下术语在媒体捕获和流中定义： [MEDIASTREAM]

报告

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

XMLHttpRequest

以下特性和术语在 XMLHttpRequest 中定义： [XHR]

电池状态

以下特性在电池状态 API中定义：[BATTERY]

媒体查询

实现必须支持媒体查询。其中定义了 <media-condition> 特性。[MQ]

CSS 模块

尽管本规范的实现不必支持完整的 CSS （不过建议至少 Web 浏览器支持），但某些特性是根据 特定 CSS 要求定义的。

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

例如，当意外遇到样式表末尾时，用户代理必须关闭所有打开的结构。 因此，当将字符串“rgb(0,0,0”（缺少 右括号）解析为颜色值时，该错误处理规则会隐含补上右 括号，并得到一个值（颜色“black”）。 但是，类似的结构“rgb(0,0,”（同时缺少 括号和“blue”值）无法解析，因为关闭打开的结构并不会 得到可用的值。

以下术语和特性在层叠样式表 （CSS）中定义：[CSS]

'display' 属性的基本版本 在 CSS 中定义，其他 CSS 模块对该属性进行了扩展。 [CSS] [CSSRUBY] [CSSTABLE]

以下术语和特性在 CSS 盒模型中定义： [CSSBOX]

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

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

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

术语绘制 源按照 CSS 图像第 4 级中的定义使用， 以定义某些 HTML 元素与 CSS 'element()' 函数之间的交互。 [CSSIMAGES4]

以下特性在 CSS 背景和边框中定义： [CSSBG]

CSS 背景和边框还定义了以下边框属性： [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 盒对齐中定义：[CSSALIGN]

以下术语和特性在 CSS 显示中定义： [CSSDISPLAY]

以下特性在 CSS 弹性盒布局中定义： [CSSFLEXBOX]

以下术语和特性在 CSS 字体中定义： [CSSFONTS]

以下特性在 CSS 表单中定义： [CSSFORMS]

以下特性在 CSS 间隙中定义： [CSSGAPS]

以下特性在 CSS 网格布局中定义：[CSSGRID]

以下术语在 CSS 行内布局中定义：[CSSINLINE]

以下术语和特性在 CSS 盒尺寸中定义： [CSSSIZING]

以下特性在 CSS 列表和计数器中定义。 [CSSLISTS]

以下特性在 CSS 溢出中定义。[CSSOVERFLOW]

以下术语和特性在 CSS 定位布局中定义： [CSSPOSITION]

以下特性在 CSS 多列布局中定义。 [CSSMULTICOL]

'display' 属性的 'ruby-base' 值在 CSS 注音布局中定义。 [CSSRUBY]

以下特性在 CSS 表格中定义：[CSSTABLE]

以下特性在 CSS 文本中定义：[CSSTEXT]

以下特性在 CSS 书写模式中定义：[CSSWM]

以下特性在 CSS 基本用户界面中定义： [CSSUI]

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

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

以下特性和术语在 CSS 语法中定义： [CSSSYNTAX]

以下术语在选择器中定义：[SELECTORS]

以下特性在 CSS 值和单位中定义： [CSSVALUES]

以下特性在 CSS 视图过渡中定义： [CSSVIEWTRANSITIONS]

术语style 属性 在 CSS 样式属性中定义。[CSSATTR]

以下术语在 CSS 层叠和继承中定义： [CSSCASCADE]

CanvasRenderingContext2D 对象对字体的使用依赖于 CSS 字体和字体加载规范中 描述的特性，尤其包括 FontFace 对象和字体源概念。 [CSSFONTS] [CSSFONTLOAD]

以下接口和术语在几何接口中定义： [GEOMETRY]

以下术语在 CSS 作用域中定义：[CSSSCOPING]

以下术语和特性在 CSS 颜色调整中定义： [CSSCOLORADJUST]

以下术语在 CSS 伪元素中定义：[CSSPSEUDO]

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

以下术语在 CSS 锚点定位中定义：[CSSANCHOR]

交叉观察器

以下术语在交叉观察器中定义： [INTERSECTIONOBSERVER]

调整大小观察器

以下术语在调整大小观察器中定义： [RESIZEOBSERVER]

WebGL

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

WebGPU

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

WebVTT

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

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

ARIA

role 属性在 无障碍富互联网应用（ARIA）中定义，以下 角色也在其中定义：[ARIA]

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

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

内容安全策略

以下术语在内容安全策略中定义：[CSP]

Service Worker

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

安全上下文

以下算法在安全上下文中定义： [SECURE-CONTEXTS]

权限策略

以下术语在权限策略中定义： [PERMISSIONSPOLICY]

支付请求 API

以下特性在支付请求 API中定义： [PAYMENTREQUEST]

MathML

尽管本规范不要求支持完整的 MathML（不过建议至少 Web 浏览器支持）， 但某些特性依赖于实现 MathML 的一小部分。 [MATHML]

以下特性在数学标记语言 （MathML）中定义：

SVG

尽管本规范不要求支持完整的 SVG（不过建议至少 Web 浏览器支持）， 但某些特性依赖于实现 SVG 的部分内容。

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

以下特性在 SVG 2 规范中定义： [SVG]

滤镜效果

以下特性在滤镜效果中定义：[FILTERS]

合成

以下特性在合成和混合中定义： [COMPOSITE]

后台任务的协作式调度

以下特性在后台任务的协作式 调度中定义：[REQUESTIDLECALLBACK]

屏幕方向

以下术语在屏幕方向中定义： [SCREENORIENTATION]

存储

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

Web 应用清单

以下特性在Web 应用清单中定义：[MANIFEST]

WebAssembly JavaScript 接口：ESM 集成

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

WebCodecs

以下特性在 WebCodecs 中定义：[WEBCODECS]

WebDriver

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

WebDriver BiDi

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

Web 加密 API

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

WebSocket

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

WebTransport

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

Web 认证：用于访问公钥凭据的 API

以下术语在Web 认证：用于访问公钥 凭据的 API中定义：[WEBAUTHN]

凭据管理

以下术语在凭据管理中定义：[CREDMAN]

控制台

以下术语在控制台中定义：[CONSOLE]

Web 锁 API

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

可信类型

本规范使用可信类型中定义的以下特性： [TRUSTED-TYPES]

WebRTC API

以下术语在 WebRTC API 中定义：[WEBRTC]

画中画 API

以下术语在画中画 API中定义：[PICTUREINPICTURE]

空闲检测 API

以下术语在空闲检测 API中定义：

Web 语音 API

以下术语在 Web 语音 API中定义：

WebOTP API

以下术语在 WebOTP API 中定义：

Web 共享 API

以下术语在 Web 共享 API中定义：

Web 智能卡 API

以下术语在 Web 智能卡 API中定义：

Web 后台同步

以下术语在Web 后台同步中定义：

Web 周期性后台同步

以下术语在Web 周期性后台同步中定义：

Web 后台获取

以下术语在后台获取中定义：

键盘锁定

以下术语在键盘锁定中定义：

Web MIDI API

以下术语在 Web MIDI API 中定义：

通用传感器 API

以下术语在通用传感器 API中定义：

WebHID API

以下术语在 WebHID API 中定义：

WebXR 设备 API

以下术语在 WebXR 设备 API中定义：

本规范不要求支持任何特定的网络协议、样式 表语言、脚本语言，或上述列表所要求内容之外的任何 DOM 规范。然而，本规范所描述的语言 偏向于使用 CSS 作为样式语言、JavaScript 作为脚本语言，并使用 HTTP 作为网络协议，而且 若干特性假定正在使用这些语言和协议。

实现 HTTP 协议的用户代理还必须实现 HTTP 状态管理 机制（Cookie）。[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 就会被使用。 如果 QName 具有前缀，但表达式上下文中不存在对应的命名空间声明，则会发生错误。

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

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

这等同于将 XPath 2.0 的默认元素命名空间特性添加到 XPath 1.0，并将 HTML 命名空间用作 HTML 文档的默认元素命名空间。 其动机是希望实现既能与旧式 HTML 内容兼容， 又能支持本规范针对 HTML 元素所使用命名空间而引入的 HTML 更改，同时希望使用 XPath 1.0 而不是 XPath 2.0。

此更改是对 XPath 1.0 规范的有意违反， 其动机是希望实现既能与旧式内容兼容，又能 支持本规范针对 HTML 元素所使用的命名空间而引入的 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 输出，还是以内联方式渲染等）。

关于 XSLT 与 HTML 的交互，在script 元素章节中， 以及关于 XSLT、XPath 与 HTML 的交互，在template 元素 章节中，还有其他非规范性说明。

2.2 策略控制的特性

Headers/Permissions-Policy/document-domain

仅一个引擎支持。

Firefox🔰 74+Safari否Chrome🔰 88+
Opera?Edge🔰 88+
Edge（旧版）?Internet Explorer否
Firefox Android?Safari iOS?Chrome Android否WebView Android?Samsung Internet?Opera Android?

本文档定义了以下策略控制的特性：

Headers/Feature-Policy/autoplay

Firefox🔰 74+Safari否Chrome64+
Opera?Edge79+
Edge（旧版）?Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Headers/Permissions-Policy/autoplay

仅一个引擎支持。

Firefox🔰 74+Safari否Chrome88+
Opera?Edge88+
Edge（旧版）?Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

2.3 常用微语法

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

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

2.3.1 常用解析器惯用模式

下述某些微型解析器遵循这样一种模式：使用一个保存待解析字符串的 input 变量，并使用一个指向 input 中下一个待解析字符的 position 变量。

2.3.2 布尔属性

许多属性是布尔属性。 元素上存在布尔属性表示 true 值，不存在该 属性表示 false 值。

如果该属性存在，则其值必须为空字符串，或者是与该属性规范名称 ASCII 不区分大小写匹配的值，并且不得包含前导或 尾随空白。

布尔属性不允许使用值“true”和“false”。要表示 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. 如果未指定该属性：

    1. 如果该属性定义了一个缺失值默认状态 ，则返回该缺失值默认状态 。

    2. 否则，返回无状态。

  2. 如果属性值与为该属性定义的某个关键字 ASCII 不区分大小写匹配，则返回该关键字所表示的状态。

  3. 如果该属性定义了一个空值默认状态 ，并且属性值为空字符串，则返回该空值 默认状态。

  4. 如果该属性定义了一个无效值默认状态 ，则返回该无效值默认状态 。

  5. 返回无状态。

出于创作符合性目的，如果指定了枚举属性，则该属性的 值必须是以下之一：

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

  1. 如果只有一个关键字映射到给定状态，则该关键字就是规范关键字。

  2. 如果只有一个符合规范的关键字映射到给定状态，则该符合规范的关键字就是 规范关键字。

  3. 如果有两个符合规范的关键字映射到给定状态，并且其中一个是空 字符串，则规范关键字是那个不是空 字符串的符合规范关键字。

  4. 否则，该状态的规范关键字将在该属性的 规范中明确给出。

2.3.4 数字

2.3.4.1 有符号整数

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

不带 U+002D HYPHEN-MINUS (-) 前缀的有效整数表示 该数字字符串以十进制表示的数。带有 U+002D HYPHEN-MINUS (-) 前缀的有效整数 表示从零中减去 U+002D HYPHEN-MINUS 之后的数字字符串以十进制表示的数。

解析整数的规则由以下 算法给出。调用时， 必须按照给定顺序执行这些步骤，并在第一个返回 值的步骤处中止。此算法将返回整数或错误。

  1. 令 input 为正在解析的字符串。

  2. 令 position 为指向 input 内部的指针，最初指向 字符串的开头。

  3. 令 sign 的值为“positive”。

  4. 给定 position，在 input 中 跳过 ASCII 空白。

  5. 如果 position 已超过 input 的末尾，则返回错误。

  6. 如果 position 所指示的字符（第一个字符）是 U+002D HYPHEN-MINUS 字符 (-)：

    1. 令 sign 为“negative”。
    2. 将 position 前进到下一个字符。
    3. 如果 position 已超过 input 的末尾，则返回错误。

    否则，如果 position 所指示的字符（第一个字符）是 U+002B PLUS SIGN 字符 (+)：

    1. 将 position 前进到下一个字符。（“+”会被 忽略，但其不符合规范。）
    2. 如果 position 已超过 input 的末尾，则返回错误。

  7. 如果 position 所指示的字符不是ASCII 数字，则返回错误。

  8. 给定 position，从 input 中 收集一个码位序列，该序列由ASCII 数字组成，并将所得序列解释为十进制 整数。令 value 为该整数。

  9. 如果 sign 为“positive”，则返回 value；否则返回 从零中减去 value 的结果。

2.3.4.2 非负整数

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

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

解析非负整数的规则由以下 算法给出。 调用时，必须按照给定顺序执行这些步骤，并在第一个 返回值的步骤处中止。此算法将返回零、正整数或错误。

  1. 令 input 为正在解析的字符串。

  2. 令 value 为使用 解析 整数的规则解析 input 的结果。

  3. 如果 value 是错误，则返回错误。

  4. 如果 value 小于零，则返回错误。

  5. 返回 value。

2.3.4.3 浮点数

如果一个字符串由以下内容组成，则它是一个有效浮点数：

  1. 可选的 U+002D HYPHEN-MINUS 字符 (-)。

  2. 以下两项中的一项或两项，按给定顺序：

    1. 一个或多个ASCII 数字组成的序列。

    2. 以下两项，按给定顺序：

      1. 单个 U+002E FULL STOP 字符 (.)。

      2. 一个或多个ASCII 数字组成的序列。

  3. 可选地：

    1. U+0065 LATIN SMALL LETTER E 字符 (e) 或 U+0045 LATIN CAPITAL LETTER E 字符 (E) 之一。

    2. 可选的 U+002D HYPHEN-MINUS 字符 (-) 或 U+002B PLUS SIGN 字符 (+)。

    3. 一个或多个ASCII 数字组成的序列。

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

Infinity 和 Not-a-Number (NaN) 值不是有效浮点数。

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

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

解析浮点 数值的规则由以下 算法给出。此算法必须在第一个返回某项内容的步骤处中止。 此算法将返回一个数或错误。

  1. 令 input 为正在解析的字符串。

  2. 令 position 为指向 input 内部的指针，最初指向 字符串的开头。

  3. 令 value 的值为 1。

  4. 令 divisor 的值为 1。

  5. 令 exponent 的值为 1。

  6. 给定 position，在 input 中 跳过 ASCII 空白。

  7. 如果 position 已超过 input 的末尾，则返回错误。

  8. 如果 position 所指示的字符是 U+002D HYPHEN-MINUS 字符 (-)：

    1. 将 value 和 divisor 更改为 −1。
    2. 将 position 前进到下一个字符。
    3. 如果 position 已超过 input 的末尾，则返回错误。

    否则，如果 position 所指示的字符（第一个字符）是 U+002B PLUS SIGN 字符 (+)：

    1. 将 position 前进到下一个字符。（“+” 会被忽略，但其不符合规范。）
    2. 如果 position 已超过 input 的末尾，则返回错误。

  9. 如果 position 所指示的字符是 U+002E FULL STOP (.)，并且它 不是 input 中的最后一个字符，而且 position 所指示字符之后的字符 是ASCII 数字，则将 value 设置为零，并跳转到标记为小数部分的步骤。

  10. 如果 position 所指示的字符不是ASCII 数字，则返回错误。

  11. 给定 position，从 input 中 收集一个码位序列，该序列由ASCII 数字组成，并将所得序列解释为十进制 整数。将 value 乘以该整数。

  12. 如果 position 已超过 input 的末尾，则跳转到标记为 转换的步骤。

  13. 小数部分：如果 position 所指示的字符是 U+002E FULL STOP (.)，则运行以下子步骤：

    1. 将 position 前进到下一个字符。

    2. 如果 position 已超过 input 的末尾，或者 position 所指示的字符不是ASCII 数字、 U+0065 LATIN SMALL LETTER E (e) 或 U+0045 LATIN CAPITAL LETTER E (E)，则跳转到标记为 转换的步骤。

    3. 如果 position 所指示的字符是 U+0065 LATIN SMALL LETTER E 字符 (e) 或 U+0045 LATIN CAPITAL LETTER E 字符 (E)，则跳过其余 子步骤。

    4. 小数循环：将 divisor 乘以十。

    5. 将 position 所指示字符的值解释为十进制 数字 (0..9)，再除以 divisor，并将结果加到 value。

    6. 将 position 前进到下一个字符。

    7. 如果 position 已超过 input 的末尾，则跳转到标记为 转换的步骤。

    8. 如果 position 所指示的字符是ASCII 数字，则跳回这些 子步骤中标记为小数循环的步骤。

  14. 如果 position 所指示的字符是 U+0065 (e) 或 U+0045 (E)：

    1. 将 position 前进到下一个字符。

    2. 如果 position 已超过 input 的末尾，则跳转到标记为 转换的步骤。

    3. 如果 position 所指示的字符是 U+002D HYPHEN-MINUS 字符 (-)：

      1. 将 exponent 更改为 −1。
      2. 将 position 前进到下一个字符。

      3. 如果 position 已超过 input 的末尾，则跳转到标记为 转换的步骤。

      否则，如果 position 所指示的字符是 U+002B PLUS SIGN 字符 (+)：

      1. 将 position 前进到下一个字符。

      2. 如果 position 已超过 input 的末尾，则跳转到标记为 转换的步骤。

    4. 如果 position 所指示的字符不是ASCII 数字，则跳转到标记为转换的步骤。

    5. 给定 position，从 input 中 收集一个码位序列，该序列由ASCII 数字组成，并将所得序列解释为十进制 整数。将 exponent 乘以该整数。

    6. 将 value 乘以十的 exponent 次幂。

  15. 转换：令 S 为除 −0 以外的有限 IEEE 754 双精度 浮点值集合，并额外加入两个特殊值：21024 和 −21024。

  16. 令 rounded-value 为 S 中最接近 value 的数；如果有两个同样接近的 值，则选择有效数字为偶数的那个。（为此目的，两个特殊值 21024 和 −21024 被视为具有偶数有效数字。）

  17. 如果 rounded-value 为 21024 或 −21024，则返回错误。

  18. 返回 rounded-value。

2.3.4.4 百分比和长度

解析尺寸值的规则由以下 算法给出。调用时， 必须按照给定顺序执行这些步骤，并在第一个返回 值的步骤处中止。此算法将返回大于或等于 0.0 的数或失败；如果返回 一个数，则还会进一步将其归类为百分比或长度。

  1. 令 input 为正在解析的字符串。

  2. 令 position 为 input 的一个位置 变量， 最初指向 input 的开头。

  3. 给定 position，在 input 中 跳过 ASCII 空白。

  4. 如果 position 已超过 input 的末尾，或者 input 中 position 处的码位不是ASCII 数字，则返回失败。

  5. 给定 position，从 input 中 收集一个码位序列，该序列由ASCII 数字组成，并将所得序列解释为十进制 整数。令 value 为该数。

  6. 如果 position 已超过 input 的末尾，则将 value 作为长度返回。

  7. 如果 input 中 position 处的码位是 U+002E (.)：

    1. 将 position 前进 1。

    2. 如果 position 已超过 input 的末尾，或者 input 中 position 处的码位不是ASCII 数字，则使用 value、 input 和 position 返回当前尺寸值。

    3. 令 divisor 的值为 1。

    4. 当 true 时：

      1. 将 divisor 乘以十。

      2. 将 input 中 position 处码位的值解释为十进制数字 (0..9)，再除以 divisor，并将结果加到 value。

      3. 将 position 前进 1。

      4. 如果 position 已超过 input 的末尾，则将 value 作为长度返回。

      5. 如果 input 中 position 处的码位不是ASCII 数字，则中断。

  8. 使用 value、 input 和 position 返回当前尺寸值。

给定 value、input 和 position，当前尺寸值按以下方式确定：

  1. 如果 position 已超过 input 的末尾，则将 value 作为长度返回。

  2. 如果 input 中 position 处的码位是 U+0025 (%)，则将 value 作为百分比返回。

  3. 将 value 作为长度返回。

2.3.4.5 非零百分比和长度

解析非零尺寸 值的规则由以下算法给出。调用时，必须按照给定顺序执行这些步骤， 并在第一个返回值的步骤处中止。此算法将返回 大于 0.0 的数或错误；如果返回一个数，则还会进一步 将其归类为百分比或长度。

  1. 令 input 为正在解析的字符串。

  2. 令 value 为使用解析 尺寸值的规则解析 input 的结果。

  3. 如果 value 是错误，则返回错误。

  4. 如果 value 为零，则返回错误。

  5. 如果 value 是百分比，则将 value 作为百分比返回。

  6. 将 value 作为长度返回。

2.3.4.6 浮点数列表

一个有效浮点数列表由若干个有效 浮点数组成，这些数由 U+002C COMMA 字符分隔， 并且不包含任何其他字符（例如，不包含ASCII 空白）。 此外，还可能 对可给出的浮点数数量或允许的值范围 施加限制。

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

  1. 令 input 为正在解析的字符串。

  2. 令 position 为指向 input 内部的指针，最初指向 字符串的开头。

  3. 令 numbers 为最初为空的浮点数列表。该列表 将作为此算法的结果。

  4. 给定 position，从 input 中 收集一个码位序列，该序列由ASCII 空白、 U+002C COMMA 或 U+003B SEMICOLON 字符组成。 这会跳过所有前导分隔符。

  5. 当 position 未超过 input 的末尾时：

    1. 给定 position，从 input 中 收集一个码位序列，该序列中的码位不是 ASCII 空白、U+002C COMMA、U+003B SEMICOLON、ASCII 数字、 U+002E FULL STOP 或 U+002D HYPHEN-MINUS 字符。这会跳过 前导垃圾内容。

    2. 给定 position，从 input 中 收集一个码位序列，该序列中的码位不是 ASCII 空白、U+002C COMMA 或 U+003B SEMICOLON 字符，并令 unparsed number 为所得结果。

    3. 令 number 为使用 解析 浮点数值的规则解析 unparsed number 的结果。

    4. 如果 number 是错误，则将 number 设置为零。

    5. 将 number 追加到 numbers。

    6. 给定 position，从 input 中 收集一个码位序列，该序列由ASCII 空白、 U+002C COMMA 或 U+003B SEMICOLON 字符组成。 这会跳过分隔符。

  6. 返回 numbers。

2.3.4.7 尺寸列表

解析尺寸列表的规则如下。 这些规则返回一个由零个或多个数值/单位对组成的列表， 其中单位为百分比、相对或绝对之一。

  1. 令 raw input 为正在解析的字符串。

  2. 如果 raw input 中的最后一个字符是 U+002C COMMA 字符 (,)， 则从 raw input 中移除该字符。

  3. 在逗号处分割字符串 raw input。 令 raw tokens 为所得标记列表。

  4. 令 result 为空的数值/单位对列表。

  5. 对于 raw tokens 中的每个标记，运行以下子步骤：

    1. 令 input 为该标记。

    2. 令 position 为指向 input 内部的指针， 最初指向字符串的开头。

    3. 令 value 为数字 0。

    4. 令 unit 为绝对。

    5. 如果 position 已超过 input 的末尾，则将 unit 设置为相对并 跳转到最后一个子步骤。

    6. 如果 position 处的字符是ASCII 数字，则给定 position，从 input 中收集一个码位序列，该序列由ASCII 数字组成，将所得序列解释为十进制整数，并将 value 增加该整数。

    7. 如果 position 处的字符是 U+002E (.)：

      1. 给定 position，从 input 中 收集一个码位序列，该序列由ASCII 空白和ASCII 数字 组成。令 s 为所得序列。

      2. 移除 s 中的所有ASCII 空白。

      3. 如果 s 不是空字符串：

        1. 令 length 为 s 中的字符数（在空格被 移除之后）。

        2. 令 fraction 为将 s 解释为十进制整数后， 再将该数除以 10length 的结果。

        3. 将 value 增加 fraction。

    8. 给定 position，在 input 中 跳过 ASCII 空白。

    9. 如果 position 处的字符是 U+0025 PERCENT SIGN 字符 (%)， 则将 unit 设置为百分比。

      否则，如果 position 处的字符是 U+002A ASTERISK 字符 (*)，则将 unit 设置为相对。

    10. 向 result 添加一个条目，该条目由 value 给出的数和 unit 给出的单位组成。

  6. 返回列表 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 的有效月份字符串：

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

解析月份字符串的规则如下。该算法将返回年份和 月份，或者不返回任何内容。如果算法在任何时候指出“失败”，则表示算法在该处 中止，并且不返回任何内容。

  1. 令 input 为正在解析的字符串。

  2. 令 position 为指向 input 内部的指针，最初 指向字符串的开头。

  3. 解析月份组成部分以获得 year 和 month。如果这不返回任何内容，则失败。

  4. 如果 position 未超过 input 的末尾，则失败。

  5. 返回 year 和 month。

给定一个 input 字符串和 一个 position，解析月份组成部分的规则如下。该算法将返回年份和月份，或者 不返回任何内容。如果算法在任何时候指出“失败”，则表示算法在该 处中止，并且不返回任何内容。

  1. 给定 position，从 input 中收集一个码位序列，该序列由ASCII 数字组成。如果收集到的序列长度不足四个 字符，则失败。否则，将所得序列解释为十进制整数。 令 year 为该数。

  2. 如果 year 不是大于零的数，则失败。

  3. 如果 position 已超过 input 的末尾，或者 position 处的字符不是 U+002D HYPHEN-MINUS 字符，则失败。 否则，将 position 向前移动一个字符。

  4. 给定 position，从 input 中收集一个码位序列，该序列由ASCII 数字组成。如果收集到的序列长度不恰好为两个 字符，则失败。否则，将所得序列解释为十进制整数。 令 month 为该数。

  5. 如果 month 不是范围 1 ≤ month ≤ 12 内的数，则失败。

  6. 返回 year 和 month。

2.3.5.2 日期

一个日期由一个特定的外推公历 日期组成，不包含时区信息，由年份、月份和日期构成。 [GREGORIAN]

如果一个字符串按给定顺序由以下组成部分构成，则它是表示年份 year、月份 month 和日期 day 的有效日期字符串：

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

解析日期字符串的规则如下。该算法将返回一个 日期，或者不返回任何内容。如果算法在任何时候指出“失败”，则表示算法在该 处中止，并且不返回任何内容。

  1. 令 input 为正在解析的字符串。

  2. 令 position 为指向 input 内部的指针，最初 指向字符串的开头。

  3. 解析日期组成部分以获得 year、month 和 day。如果这不返回任何内容，则失败。

  4. 如果 position 未超过 input 的末尾，则失败。

  5. 令 date 为年份是 year、月份是 month、日期是 day 的日期。

  6. 返回 date。

给定一个 input 字符串和一个 position，解析日期组成部分的规则如下。该算法将返回年份、月份和日期， 或者不返回任何内容。如果算法在任何时候指出“失败”，则表示算法在 该处中止，并且不返回任何内容。

  1. 解析月份组成部分以获得 year 和 month。如果这不返回任何内容，则失败。

  2. 令 maxday 为 year 年 month 月的天数。

  3. 如果 position 已超过 input 的末尾，或者 position 处的字符不是 U+002D HYPHEN-MINUS 字符，则失败。 否则，将 position 向前移动一个字符。

  4. 给定 position，从 input 中收集一个码位序列，该序列由ASCII 数字组成。如果收集到的序列长度不恰好为两个 字符，则失败。否则，将所得序列解释为十进制整数。 令 day 为该数。

  5. 如果 day 不是范围 1 ≤ day ≤ maxday 内的数， 则失败。

  6. 返回 year、month 和 day。

2.3.5.3 无年份日期

一个无年份日期由公历月份和该月份中的 某一天组成，但不关联任何年份。[GREGORIAN]

如果一个字符串按给定顺序由以下组成部分构成，则它是表示月份 month 和日期 day 的有效无年份日期字符串：

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

换言之，如果 month 是“02”， 表示二月，那么日期可以是 29，就如同年份是闰年一样。

解析无年份日期字符串的规则如下。该算法将 返回月份和日期，或者不返回任何内容。如果算法在任何时候指出“失败”，则表示 算法在该处中止，并且不返回任何内容。

  1. 令 input 为正在解析的字符串。

  2. 令 position 为指向 input 内部的指针，最初 指向字符串的开头。

  3. 解析 无年份日期组成部分以获得 month 和 day。如果这不返回任何内容，则 失败。

  4. 如果 position 未超过 input 的末尾，则失败。

  5. 返回 month 和 day。

给定一个 input 字符串和一个 position，解析无年份日期组成部分的规则如下。该算法将返回月份和 日期，或者不返回任何内容。如果算法在任何时候指出“失败”，则表示算法在该处 中止，并且不返回任何内容。

  1. 给定 position，从 input 中收集一个码位序列，该序列由 U+002D HYPHEN-MINUS 字符 (-) 组成。如果收集到的序列长度既不恰好为零 也不恰好为两个字符，则失败。

  2. 给定 position，从 input 中收集一个码位序列，该序列由ASCII 数字组成。如果收集到的序列长度不恰好为两个 字符，则失败。否则，将所得序列解释为十进制整数。 令 month 为该数。

  3. 如果 month 不是范围 1 ≤ month ≤ 12 内的数，则失败。

  4. 令 maxday 为任意闰年（例如 4 或 2000）中月份 month 的天数。

  5. 如果 position 已超过 input 的末尾，或者 position 处的字符不是 U+002D HYPHEN-MINUS 字符，则失败。 否则，将 position 向前移动一个字符。

  6. 给定 position，从 input 中收集一个码位序列，该序列由ASCII 数字组成。如果收集到的序列长度不恰好为两个 字符，则失败。否则，将所得序列解释为十进制整数。 令 day 为该数。

  7. 如果 day 不是范围 1 ≤ day ≤ maxday 内的数， 则失败。

  8. 返回 month 和 day。

2.3.5.4 时间

一个时间由一个不包含时区 信息的特定时间组成，包括小时、分钟、秒和秒的小数部分。

如果一个字符串按给定顺序由以下组成部分构成，则它是表示小时 hour、 分钟 minute 和秒 second 的有效时间字符串：

  1. 两个ASCII 数字，表示 hour，范围为 0 ≤ hour ≤ 23
  2. 一个 U+003A COLON 字符 (:)
  3. 两个ASCII 数字，表示 minute，范围为 0 ≤ minute ≤ 59
  4. 如果 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；无法 表示闰秒。

解析时间字符串的规则如下。该算法将返回一个 时间，或者不返回任何内容。如果算法在任何时候指出“失败”，则表示算法在该 处中止，并且不返回任何内容。

  1. 令 input 为正在解析的字符串。

  2. 令 position 为指向 input 内部的指针，最初 指向字符串的开头。

  3. 解析时间组成部分以获得 hour、minute 和 second。如果这不返回任何内容，则失败。

  4. 如果 position 未超过 input 的末尾，则失败。

  5. 令 time 为小时是 hour、分钟是 minute、秒是 second 的时间。

  6. 返回 time。

给定一个 input 字符串和一个 position，解析时间组成部分的规则如下。该算法将返回小时、分钟和 秒，或者不返回任何内容。如果算法在任何时候指出“失败”，则表示算法在该处 中止，并且不返回任何内容。

  1. 给定 position，从 input 中收集一个码位序列，该序列由ASCII 数字组成。如果收集到的序列长度不恰好为两个 字符，则失败。否则，将所得序列解释为十进制整数。 令 hour 为该数。

  2. 如果 hour 不是范围 0 ≤ hour ≤ 23 内的数，则失败。

  3. 如果 position 已超过 input 的末尾，或者 position 处的字符不是 U+003A COLON 字符，则失败。否则， 将 position 向前移动一个字符。

  4. 给定 position，从 input 中收集一个码位序列，该序列由ASCII 数字组成。如果收集到的序列长度不恰好为两个 字符，则失败。否则，将所得序列解释为十进制整数。 令 minute 为该数。

  5. 如果 minute 不是范围 0 ≤ minute ≤ 59 内的数，则失败。

  6. 令 second 为 0。

  7. 如果 position 未超过 input 的末尾，并且 position 处的字符是 U+003A (:)：

    1. 将 position 前进到 input 中的下一个字符。

    2. 如果 position 已超过 input 的末尾，或位于 input 中的最后一个字符处，或者从 position 开始的 input 中接下来的两个字符 不都是ASCII 数字，则失败。

    3. 给定 position，从 input 中收集一个码位序列，该序列由ASCII 数字 或 U+002E FULL STOP 字符组成。如果收集到的 序列长度为三个字符，或者长度大于三个字符且第三个字符不是 U+002E FULL STOP 字符， 或者包含多个 U+002E FULL STOP 字符，则失败。否则，将所得序列解释为十进制数 （可能带有小数部分）。将 second 设置为该数。

    4. 如果 second 不是范围 0 ≤ second < 60 内的数，则失败。

  8. 返回 hour、minute 和 second。

2.3.5.5 本地日期和时间

一个本地日期和时间由一个特定的 外推公历 日期（包括年份、月份和日期）以及一个时间 （包括小时、分钟、秒和秒的小数部分）组成，但不使用 时区表示。[GREGORIAN]

如果一个字符串按给定顺序由以下组成部分构成，则它是表示 日期和时间的有效本地日期和时间字符串：

  1. 一个表示日期的有效日期字符串
  2. 一个 U+0054 LATIN CAPITAL LETTER T 字符 (T) 或一个 U+0020 SPACE 字符
  3. 一个表示时间的有效时间字符串

如果一个字符串按给定顺序由以下组成部分构成，则它是表示日期和时间的有效 规范化本地日期和时间字符串：

  1. 一个表示日期的有效日期字符串
  2. 一个 U+0054 LATIN CAPITAL LETTER T 字符 (T)
  3. 一个表示时间的有效时间字符串， 并以给定时间所能采用的最短字符串表示 （例如，如果给定时间恰好位于某一分钟，则完全省略秒组成部分）

解析本地日期和时间字符串的规则 如下。该算法将返回 日期和时间，或者不返回任何内容。如果算法在任何时候指出“失败”，则表示 算法在该处中止，并且不返回任何内容。

  1. 令 input 为正在解析的字符串。

  2. 令 position 为指向 input 内部的指针，最初 指向字符串的开头。

  3. 解析日期 组成部分以获得 year、month 和 day。如果这不返回任何内容，则 失败。

  4. 如果 position 已超过 input 的末尾，或者 position 处的字符既不是 U+0054 LATIN CAPITAL LETTER T 字符 (T)，也不是 U+0020 SPACE 字符，则失败。否则，将 position 向前移动一个字符。

  5. 解析时间 组成部分以获得 hour、minute 和 second。如果这不返回任何内容， 则失败。

  6. 如果 position 未超过 input 的末尾，则失败。

  7. 令 date 为年份是 year、月份是 month、日期是 day 的日期。

  8. 令 time 为小时是 hour、分钟是 minute、秒是 second 的时间。

  9. 返回 date 和 time。

2.3.5.6 时区

时区偏移由带符号的小时数和 分钟数组成。

如果一个字符串由以下任一形式组成，则它是表示 时区偏移的有效时区偏移字符串：

此格式允许的时区偏移范围为 -23:59 至 +23:59。目前在 实际使用中，真实时区的偏移范围为 -12:00 至 +14:00，并且真实时区偏移的分钟组成部分 始终为 00、30 或 45。不过，无法保证这种情况会永远 保持不变，因为时区常被当作政治角力工具，因此 容易受到非常反复无常的政策决定影响。

另请参阅下文全局 日期和时间章节中的使用说明和示例，以了解如何将时区偏移用于 早于正式时区形成时期的历史时间。

解析时区偏移字符串的规则如下。该算法将返回 时区偏移，或者不返回任何内容。如果算法在任何时候指出“失败”，则表示 算法在该处中止，并且不返回任何内容。

  1. 令 input 为正在解析的字符串。

  2. 令 position 为指向 input 内部的指针，最初 指向字符串的开头。

  3. 解析 时区偏移组成部分以获得 timezonehours 和 timezoneminutes。如果这 不返回任何内容，则失败。

  4. 如果 position 未超过 input 的末尾，则失败。

  5. 返回一个相对于 UTC 偏移 timezonehours 小时和 timezoneminutes 分钟的时区偏移。

给定一个 input 字符串和一个 position，解析时区偏移组成部分的规则如下。该算法将返回时区小时数 和时区分钟数，或者不返回任何内容。如果算法在任何时候指出“失败”，则表示 算法在该处中止，并且不返回任何内容。

  1. 如果 position 处的字符是 U+005A LATIN CAPITAL LETTER Z 字符 (Z)：

    1. 令 timezonehours 为 0。

    2. 令 timezoneminutes 为 0。

    3. 将 position 前进到 input 中的下一个字符。

    否则，如果 position 处的字符是 U+002B PLUS SIGN (+) 或 U+002D HYPHEN-MINUS (-)：

    1. 如果 position 处的字符是 U+002B PLUS SIGN (+)，令 sign 为“positive”。 否则，它是 U+002D HYPHEN-MINUS (-)；令 sign 为“negative”。

    2. 将 position 前进到 input 中的下一个字符。

    3. 给定 position，从 input 中收集一个码位序列，该序列由ASCII 数字组成。令 s 为收集到的 序列。

    4. 如果 s 的长度恰好为两个字符：

      1. 将 s 解释为十进制整数。令 timezonehours 为该数。

      2. 如果 position 已超过 input 的末尾，或者 position 处的字符不是 U+003A COLON 字符，则失败。 否则，将 position 向前移动一个字符。

      3. 给定 position，从 input 中收集一个码位序列，该序列由 ASCII 数字组成。如果收集到的序列长度不恰好为两个 字符，则失败。否则，将所得序列解释为十进制 整数。令 timezoneminutes 为该数。

      如果 s 的长度恰好为四个字符：

      1. 将 s 的前两个字符解释为十进制整数。令 timezonehours 为该数。

      2. 将 s 的后两个字符解释为十进制整数。令 timezoneminutes 为该数。

      否则，失败。

    5. 如果 timezonehours 不是范围 0 ≤ timezonehours ≤ 23 内的数，则 失败。
    6. 如果 sign 为“negative”，则对 timezonehours 取负值。
    7. 如果 timezoneminutes 不是范围 0 ≤ timezoneminutes ≤ 59 内的数， 则失败。
    8. 如果 sign 为“negative”，则对 timezoneminutes 取负值。

    否则，失败。

  2. 返回 timezonehours 和 timezoneminutes。

2.3.5.7 全局日期和时间

一个全局日期和时间由一个特定的 外推公历 日期（包括年份、月份和日期）以及一个时间 （包括小时、分钟、秒和秒的小数部分）组成，并使用由带符号的小时数和分钟数 构成的时区偏移来表示。[GREGORIAN]

如果一个字符串按给定顺序由以下组成部分构成，则它是表示 日期、时间和时区偏移的有效全局日期和时间字符串：

  1. 一个表示日期的有效日期字符串
  2. 一个 U+0054 LATIN CAPITAL LETTER T 字符 (T) 或一个 U+0020 SPACE 字符
  3. 一个表示时间的有效时间字符串
  4. 一个表示时区偏移的有效 时区偏移字符串

在二十世纪中期 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 快两小时九分钟，这目前并不是真实时区，但仍然 允许使用。

这些日期有几点值得注意：

解析全局日期和时间字符串的规则 如下。该算法将返回 UTC 时间，并附带用于往返转换或显示 的关联时区偏移信息，或者不返回任何内容。如果算法在任何时候指出“失败”，则表示 算法在该处中止，并且不返回任何内容。

  1. 令 input 为正在解析的字符串。

  2. 令 position 为指向 input 内部的指针，最初 指向字符串的开头。

  3. 解析日期 组成部分以获得 year、month 和 day。如果这不返回任何内容，则 失败。

  4. 如果 position 已超过 input 的末尾，或者 position 处的字符既不是 U+0054 LATIN CAPITAL LETTER T 字符 (T)，也不是 U+0020 SPACE 字符，则失败。否则，将 position 向前移动一个字符。

  5. 解析时间 组成部分以获得 hour、minute 和 second。如果这不返回任何内容， 则失败。

  6. 如果 position 已超过 input 的末尾，则 失败。

  7. 解析时区偏移组成部分以 获得 timezonehours 和 timezoneminutes。如果这 不返回任何内容，则失败。

  8. 如果 position 未超过 input 的末尾，则失败。

  9. 令 time 为年份 year、月份 month、日期 day、小时 hour、分钟 minute、秒 second 所表示的时刻，再减去 timezonehours 小时和 timezoneminutes 分钟。该时刻是 UTC 时区中的一个时刻。

  10. 令 timezone 为相对于 UTC 偏移 timezonehours 小时和 timezoneminutes 分钟的时区。

  11. 返回 time 和 timezone。

2.3.5.8 周

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

编号为 year 的周年份在以下任一情况下有 53 周： 它对应外推公历中以星期四 为第一天（1 月 1 日）的年份 year；或者对应外推 公历中以星期三为第一天（1 月 1 日）的年份 year，并且 year 是 能被 400 整除的数，或者是能被 4 整除但不能被 100 整除的数。所有 其他周年份均有 52 周。

有 53 周的周年份，其最后一天的周编号为 53； 有 52 周的周年份，其最后一天的周编号为 52。

某一天的周年份编号可能不同于 外推公历中包含该日的年份编号。 周年份 y 中的第一周，是包含公历年份 y 第一个星期四的那一周。

就现代用途而言，此处定义的周 等同于 ISO 8601 中定义的 ISO 周。[ISO8601]

如果一个字符串按给定顺序由以下组成部分构成，则它是表示周年份 year 和周 week 的有效周字符串：

  1. 四个或更多ASCII 数字，表示 year，其中 year > 0
  2. 一个 U+002D HYPHEN-MINUS 字符 (-)
  3. 一个 U+0057 LATIN CAPITAL LETTER W 字符 (W)
  4. 两个ASCII 数字，表示周 week，范围为 1 ≤ week ≤ maxweek，其中 maxweek 是 周年份 year 的最后一天的周编号

解析周字符串的规则如下。该算法将返回 周年份编号和周编号，或者不返回任何内容。如果算法在任何时候指出“失败”，则表示 算法在该处中止，并且不返回任何内容。

  1. 令 input 为正在解析的字符串。

  2. 令 position 为指向 input 内部的指针，最初 指向字符串的开头。

  3. 给定 position，从 input 中收集一个码位序列，该序列由ASCII 数字组成。如果收集到的序列长度不足四个 字符，则失败。否则，将所得序列解释为十进制整数。 令 year 为该数。

  4. 如果 year 不是大于零的数，则失败。

  5. 如果 position 已超过 input 的末尾，或者 position 处的字符不是 U+002D HYPHEN-MINUS 字符，则失败。 否则，将 position 向前移动一个字符。

  6. 如果 position 已超过 input 的末尾，或者 position 处的字符不是 U+0057 LATIN CAPITAL LETTER W 字符 (W)， 则失败。否则，将 position 向前移动一个字符。

  7. 给定 position，从 input 中收集一个码位序列，该序列由ASCII 数字组成。如果收集到的序列长度不恰好为两个 字符，则失败。否则，将所得序列解释为十进制整数。 令 week 为该数。

  8. 令 maxweek 为年份 year 的最后一天的周编号。

  9. 如果 week 不是范围 1 ≤ week ≤ maxweek 内的数， 则失败。

  10. 如果 position 未超过 input 的末尾，则失败。

  11. 返回周年份编号 year 和周编号 week。

2.3.5.9 持续时间

持续时间由秒数组成。

由于月份和秒无法比较（一个月并不是精确的 秒数，而是一个精确长度取决于从哪一天开始 测量的期间），因此本规范中定义的持续时间不能 包含月份（也不能包含等同于 十二个月的年份）。只能描述表示特定秒数的持续时间。

如果一个字符串由以下任一形式组成，则它是表示持续时间 t 的 有效持续时间字符串：

解析持续时间字符串的规则如下。该算法将返回 持续时间，或者不返回任何内容。如果算法在任何时候 指出“失败”，则表示算法在该处中止，并且不返回任何内容。

  1. 令 input 为正在解析的字符串。

  2. 令 position 为指向 input 内部的指针，最初 指向字符串的开头。

  3. 令 months、seconds 和 component count 均为零。

  4. 令 M-disambiguator 为minutes。

    此标志的另一个值是months。它用于消除 ISO8601 持续时间中“M”单位的歧义，因为月份和分钟使用同一单位。月份不被 允许，但仍会被解析，以便将来兼容，并避免错误解释在其他上下文中 本来有效的 ISO8601 持续时间。

  5. 给定 position，在 input 中 跳过 ASCII 空白。

  6. 如果 position 已超过 input 的末尾，则 失败。

  7. 如果 input 中 position 所指向的字符是 U+0050 LATIN CAPITAL LETTER P 字符，则将 position 前进到下一个字符，将 M-disambiguator 设置为months，并且给定 position，在 input 中跳过 ASCII 空白。

  8. 当 true 时：

    1. 令 units 为未定义。随后将为其指定以下值之一： years、months、weeks、days、hours、minutes 和 seconds。

    2. 令 next character 为未定义。它用于处理 input 中的字符。

    3. 如果 position 已超过 input 的末尾，则中断。

    4. 如果 input 中 position 所指向的字符是 U+0054 LATIN CAPITAL LETTER T 字符，则将 position 前进到下一个字符，将 M-disambiguator 设置为minutes，给定 position，在 input 中跳过 ASCII 空白，然后继续。

    5. 将 next character 设置为 input 中 position 所指向的字符。

    6. 如果 next character 是 U+002E FULL STOP 字符 (.)，则令 N 为 0。（不要 前进 position。这会在 下文处理。）

      否则，如果 next character 是ASCII 数字，则给定 position，从 input 中收集一个码位序列，该序列由ASCII 数字组成，将所得 序列解释为十进制整数，并令 N 为该数。

      否则，next character 不是数值的一部分；失败。

    7. 如果 position 已超过 input 的末尾，则 失败。

    8. 将 next character 设置为 input 中 position 所指向的字符，并在这次将 position 前进到下一个字符。（如果 next character 之前是 U+002E FULL STOP 字符 (.)，这次它仍然是该字符。）

    9. 如果 next character 是 U+002E (.)：

      1. 给定 position，从 input 中收集一个码位序列，该序列由 ASCII 数字组成。令 s 为所得 序列。

      2. 如果 s 是空字符串，则失败。

      3. 令 length 为 s 中的字符数。

      4. 令 fraction 为将 s 解释为十进制整数后，再将该数除以 10length 的结果。

      5. 将 N 增加 fraction。

      6. 给定 position，在 input 中 跳过 ASCII 空白。

      7. 如果 position 已超过 input 的末尾，则 失败。

      8. 将 next character 设置为 input 中 position 所指向的字符，并将 position 前进到 下一个字符。

      9. 如果 next character 既不是 U+0053 LATIN CAPITAL LETTER S 字符，也不是 U+0073 LATIN SMALL LETTER S 字符，则失败。

      10. 将 units 设置为seconds。

      否则：

      1. 如果 next character 是ASCII 空白，则给定 position，在 input 中跳过 ASCII 空白，将 next character 设置为 input 中 position 所指向的字符，并 将 position 前进到下一个字符。

      2. 如果 next character 是 U+0059 LATIN CAPITAL LETTER Y 字符，或 U+0079 LATIN SMALL LETTER Y 字符，则将 units 设置为years，并将 M-disambiguator 设置为months。

        如果 next character 是 U+004D LATIN CAPITAL LETTER M 字符或 U+006D LATIN SMALL LETTER M 字符，并且 M-disambiguator 为 months，则将 units 设置为months。

        如果 next character 是 U+0057 LATIN CAPITAL LETTER W 字符或 U+0077 LATIN SMALL LETTER W 字符，则将 units 设置为weeks，并将 M-disambiguator 设置为minutes。

        如果 next character 是 U+0044 LATIN CAPITAL LETTER D 字符或 U+0064 LATIN SMALL LETTER D 字符，则将 units 设置为days，并将 M-disambiguator 设置为minutes。

        如果 next character 是 U+0048 LATIN CAPITAL LETTER H 字符或 U+0068 LATIN SMALL LETTER H 字符，则将 units 设置为hours，并将 M-disambiguator 设置为minutes。

        如果 next character 是 U+004D LATIN CAPITAL LETTER M 字符或 U+006D LATIN SMALL LETTER M 字符，并且 M-disambiguator 为 minutes，则将 units 设置为minutes。

        如果 next character 是 U+0053 LATIN CAPITAL LETTER S 字符或 U+0073 LATIN SMALL LETTER S 字符，则将 units 设置为seconds，并 将 M-disambiguator 设置为minutes。

        否则，如果 next character 不是上述任何字符，则 失败。

    10. 将 component count 增加 1。

    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. 给定 position，在 input 中 跳过 ASCII 空白。

  9. 如果 component count 为零， 则失败。

  10. 如果 months 不为零，则失败。

  11. 返回由 seconds 秒组成的持续时间。

2.3.5.10 较模糊的时间点

如果一个字符串也是以下任一项，则它是带可选时间的有效日期字符串：

解析日期或时间字符串的规则如下。该 算法将返回一个日期、一个时间、一个全局日期和时间，或者不返回任何内容。如果算法在任何时候 指出“失败”，则表示算法在该处中止，并且不返回任何内容。

  1. 令 input 为正在解析的字符串。

  2. 令 position 为指向 input 内部的指针，最初 指向字符串的开头。

  3. 将 start position 设置为与 position 相同的位置。

  4. 将 date present 和 time present 标志设置为 true。

  5. 解析日期 组成部分以获得 year、month 和 day。如果失败，则将 date present 标志设置为 false。

  6. 如果 date present 为 true，且 position 未超过 input 的末尾，并且 position 处的字符 是 U+0054 LATIN CAPITAL LETTER T 字符 (T) 或 U+0020 SPACE 字符之一，则将 position 前进到 input 中的下一个字符。

    否则，如果 date present 为 true，并且 position 已超过 input 的末尾，或者 position 处的字符既不是 U+0054 LATIN CAPITAL LETTER T 字符 (T)，也不是 U+0020 SPACE 字符，则将 time present 设置为 false。

    否则，如果 date present 为 false，则将 position 恢复到与 start position 相同的位置。

  7. 如果 time present 标志为 true，则解析时间 组成部分以获得 hour、minute 和 second。如果这不返回任何内容， 则失败。

  8. 如果 date present 和 time present 标志 均为 true，但 position 已超过 input 的末尾，则 失败。

  9. 如果 date present 和 time present 标志 均为 true，则解析时区偏移组成部分以 获得 timezonehours 和 timezoneminutes。如果这 不返回任何内容，则失败。

  10. 如果 position 未超过 input 的末尾，则失败。

  11. 如果 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 所表示的时刻，再减去 timezonehours 小时和 timezoneminutes 分钟，该时刻是 UTC 时区中的时刻；令 timezone 为相对于 UTC 偏移 timezonehours 小时和 timezoneminutes 分钟的时区；并返回 time 和 timezone。

2.3.6 旧式颜色

某些已过时的旧式属性使用 解析旧式颜色 值的规则来解析颜色，并给定一个字符串 input。这些规则将返回 CSS 颜色或失败。

  1. 如果 input 是空字符串，则返回失败。

  2. 从 input 中去除前导和尾随 ASCII 空白。

  3. 如果 input 与“transparent”ASCII 不区分大小写匹配，则返回失败。

  4. 如果 input 与某个命名颜色ASCII 不区分大小写匹配，则返回与该 关键字对应的 CSS 颜色。[CSSCOLOR]

    不识别 CSS2 系统 颜色。

  5. 如果 input 的码 位长度为四，第一个字符是 U+0023 (#)，并且 input 的最后三个字符均为 ASCII 十六进制数字：

    1. 令 result 为一个 CSS 颜色。

    2. 将 input 的第二个字符解释为十六进制数字；令 result 的红色分量为所得数字乘以 17。

    3. 将 input 的第三个字符解释为十六进制数字；令 result 的绿色分量为所得数字乘以 17。

    4. 将 input 的第四个字符解释为十六进制数字；令 result 的蓝色分量为所得数字乘以 17。

    5. 返回 result。

  6. 将 input 中所有大于 U+FFFF 的码位（即不在基本多文种平面中的任何字符）替换为“00”。

  7. 如果 input 的码 位长度大于 128，则截断 input，仅保留前 128 个字符。

  8. 如果 input 中的第一个字符是 U+0023 (#)，则将其移除。

  9. 将 input 中不是ASCII 十六进制数字的任何字符替换为 U+0030 (0)。

  10. 当 input 的码 位长度为零或不是 三的倍数时，将 U+0030 (0) 追加到 input。

  11. 将 input 分割为三个码 位长度相等的字符串，以 获得三个分量。令 length 为这些分量共同具有的码 位长度（即 input 的码 位长度的三分之一）。

  12. 如果 length 大于 8，则移除每个分量中前面的 length-8 个字符，并令 length 为 8。

  13. 当 length 大于二且每个 分量的第一个字符均为 U+0030 (0) 时，移除该字符并将 length 减一。

  14. 如果 length 仍然大于二，则截断每个分量， 每个分量仅保留前两个字符。

  15. 令 result 为一个 CSS 颜色。

  16. 将第一个分量解释为十六进制数；令 result 的红色分量为 所得数字。

  17. 将第二个分量解释为十六进制数；令 result 的绿色分量为 所得数字。

  18. 将第三个分量解释为十六进制数；令 result 的蓝色分量为 所得数字。

  19. 返回 result。

2.3.7 空格分隔的标记

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

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

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

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

空格分隔的 标记集合有时 会定义一组允许值。定义允许值集合后，所有标记都必须 来自该允许值列表；其他值不符合规范。如果未提供此类允许值 集合，则所有值均符合规范。

空格分隔的标记集合中的标记应如何比较 （例如是否区分大小写），由每个集合分别定义。

2.3.8 逗号分隔的标记

逗号分隔的标记集合是一个包含零个或多个 标记的字符串，每个标记与下一个标记之间由单个 U+002C COMMA 字符 (,) 分隔，其中标记由任意 零个或多个字符组成，不以ASCII 空白开头或结尾，也不 包含任何 U+002C COMMA 字符 (,)，并且可以选择由ASCII 空白包围。

例如，字符串“ a ,b,,d d ”由四个标记组成： “a”、“b”、空 字符串和“d d”。每个标记周围的前导和尾随空白不算作 标记的一部分，并且空字符串可以作为标记。

逗号分隔的 标记集合有时 会进一步限制有效标记的构成方式。定义此类限制后，所有 标记都必须符合这些限制；其他值不符合规范。如果未指定此类 限制，则所有值均符合规范。

2.3.9 引用

对类型为 type 的元素的有效散列名称引用是一个 由 U+0023 NUMBER SIGN 字符 (#) 后跟一个字符串构成的字符串，该字符串与 同一树中类型为 type 的元素的 name 属性值完全匹配。

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

  1. 如果正在解析的字符串不包含 U+0023 NUMBER SIGN 字符，或者 字符串中第一个此类字符是字符串中的最后一个字符，则返回 null。

  2. 令 s 为正在解析的字符串中第一个 U+0023 NUMBER SIGN 字符之后紧邻的字符至该字符串末尾的字符串。

  3. 返回 scope 的树中按 树顺序排列的第一个类型为 type 的元素，该元素具有值为 s 的 id 或 name 属性；如果不存在此类 元素，则返回 null。

    虽然解析时会考虑 id 属性， 但在确定一个值是否为有效散列名称 引用时不会使用它们。也就是说，基于 id 引用元素的散列名称引用属于符合性错误 （除非该元素还具有值相同的 name 属性）。

2.3.10 媒体查询

如果一个字符串匹配媒体查询的 <media-query-list> 产生式，则它是有效媒体查询列表。 [MQ]

如果一个字符串为空字符串、仅由ASCII 空白组成，或者是一个按照媒体查询中给出的定义与用户环境匹配的媒体查询列表，则该字符串与用户环境匹配。[MQ]

2.3.11 唯一内部值

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

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

2.4 URL

2.4.1 术语

如果一个字符串是有效 URL 字符串，但不是 空字符串，则它是有效非空 URL。

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

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

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

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

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

如果一个URL 的方案为“about”，其路径包含单个字符串“blank”，其 用户名和密码均为空字符串，并且其主机为 null，则该 URL 匹配 about:blank。

此类 URL 的查询和片段可以不为 null。例如，通过解析“about:blank?foo#bar”创建的URL 记录匹配 about:blank。

如果一个URL 的方案为“about”，其路径包含单个字符串“srcdoc”， 其查询为 null，其用户名和密码均为空字符串，并且其主机为 null，则该 URL 匹配 about:srcdoc。

匹配 about:srcdoc要求 URL 的查询为 null，是因为无法 创建其URL具有非 null 查询的iframe srcdoc 文档，这不同于其 URL匹配 about:blank的 Document。换 言之，所有URL 中匹配 about:srcdoc的 URL 仅在其片段上有所不同。

2.4.2 解析 URL

解析 URL 是获取一个字符串并取得它所表示的URL 记录的过程。 虽然此过程在 URL 中定义，但 HTML 标准定义了 若干包装算法，以抽象基准 URL 和编码。[URL]

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

给定字符串 url，相对于一个 Document 对象或环境设置 对象 environment，要解析 URL，请运行以下步骤。它们返回失败或一个URL。

  1. 如果 environment 是一个 Document 对象，则令 baseURL 为 environment 的基准 URL；否则为 environment 的API 基准 URL。

  2. 返回使用 baseURL 将URL 解析器应用于 url 的结果。

给定字符串 url，相对于一个 Document 对象或环境 设置对象 environment，要使用编码解析 URL， 请运行以下步骤。它们返回失败或一个 URL。

  1. 令 encoding 为 UTF-8。

  2. 如果 environment 是一个 Document 对象，则将 encoding 设置为 environment 的字符 编码。

  3. 否则，如果 environment 的相关全局对象是一个 Window 对象，则将 encoding 设置为 environment 的相关 全局对象的关联的 Document的字符 编码。

  4. 如果 environment 是一个 Document 对象，则令 baseURL 为 environment 的基准 URL；否则为 environment 的API 基准 URL。

  5. 返回使用 baseURL 和 encoding 将URL 解析器应用于 url 的结果。

给定字符串 url，相对于一个 Document 对象或 环境设置 对象 environment，要使用编码解析并序列化 URL，请运行以下步骤。它们返回 失败或字符串。

  1. 令 url 为给定 url，相对于 environment 使用编码解析 URL的结果。

  2. 如果 url 为失败，则返回失败。

  3. 返回将URL 序列化器应用于 url 的结果。

2.4.3 文档基准 URL

Document document 的文档基准 URL是通过运行以下步骤获得的 URL 记录：

  1. 如果 document 没有一个具有 href 属性的 base 元素后代，则返回 document 的 后备基准 URL。

  2. 否则，返回 document 中按 树顺序排列的第一个具有 href 属性的 base 元素的冻结基准 URL。

Document 对象 document 的后备基准 URL是通过运行以下步骤获得的 URL 记录：

  1. 如果 document 是iframe srcdoc 文档：

    1. 断言：document 的about 基准 URL不为 null。

    2. 返回 document 的about 基准 URL。

  2. 如果 document 的URL匹配 about:blank，并且 document 的about 基准 URL不为 null，则返回 document 的about 基准 URL。

  3. 返回 document 的URL。

要将 Document document 的 URL 设置为一个URL 记录 url：

  1. 将 document 的URL设置为 url。

  2. 给定 document，响应基准 URL 更改。

要为 Document document 响应基准 URL 更改：

  1. 用户代理应更新向用户显示受影响 URL 或从这些 URL 派生的数据的所有用户界面元素。此类用户界面元素的示例包括 显示超链接的url的状态栏，或者显示 q、blockquote、 ins 或 del 元素的 cite 属性所指定 URL 的某个用户界面。

  2. 确保 CSS :link/:visited/等伪类 得到适当更新。

  3. 对于 document 的影子包含后代中的每个 descendant：

    1. 如果 descendant 是一个 script 元素，并且其 结果是推测规则解析 结果：

      1. 令 oldResult 为 element 的结果。

      2. 令 newResult 为给定 element 的 子节点文本内容和 element 的节点文档，创建推测规则解析 结果的结果。

      3. 给定 element 的相关全局 对象、oldResult 和 newResult，更新 推测规则。

  4. 给定 document，考虑推测性 加载。

这意味着更改基准 URL 不会影响例如由 img 元素显示的图像。因此， 脚本随后访问 src IDL 属性时，将 返回一个新的绝对 URL，该 URL 可能不再对应正在 显示的图像。

2.5 获取资源

2.5.1 术语

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

一个响应，如果其类型为“opaque”或“opaqueredirect”，则为 CORS 跨源。

一个响应的不安全响应， 如果它具有 内部响应，则为该内部响应；否则为该响应本身。

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

  1. 如果 corsAttributeState 为无 CORS，则令 mode 为“no-cors”；否则为 “cors”。

  2. 如果已设置同源后备标志且 mode 为“no-cors”，则将 mode 设置为“same-origin”。

  3. 令 credentialsMode 为“include”。

  4. 如果 corsAttributeState 为匿名，则将 credentialsMode 设置为 “same-origin”。

  5. 返回一个新的请求，其 URL 为 url，目标 为 destination， 模式为 mode，凭据模式为 credentialsMode，并且其使用 URL 凭据标志已设置。

2.5.2 确定资源的类型

资源的Content-Type 元数据必须以符合MIME 嗅探 要求的方式获取和解释。 [MIMESNIFF]

资源的计算所得 MIME 类型必须以符合MIME 嗅探中所给要求的方式确定。[MIMESNIFF]

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

必须严格遵循MIME 嗅探中的规则。 当用户代理使用与服务器预期不同的启发式方法检测内容类型时， 可能会出现安全问题。有关更多详细信息，请参阅MIME 嗅探。 [MIMESNIFF]

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

给定一个字符串 s，从 meta 元素中提取 字符编码的算法如下。它返回字符编码或 不返回任何内容。

  1. 令 position 为指向 s 内部的指针，最初 指向字符串的开头。

  2. 循环：在 s 中查找 position 之后最先出现的七个字符， 这些字符与单词“charset”ASCII 不区分大小写匹配。如果未找到此类匹配，则不返回任何内容。

  3. 跳过紧随单词“charset”之后的所有ASCII 空白（可能不存在）。

  4. 如果下一个字符不是 U+003D EQUALS SIGN (=)，则移动 position，使其指向 该下一个字符之前的位置，然后跳回标记为循环的步骤。

  5. 跳过紧随等号之后的所有ASCII 空白（可能不存在）。

  6. 按以下方式处理下一个字符：

    如果它是 U+0022 QUOTATION MARK 字符 (")，并且 s 中稍后还有一个 U+0022 QUOTATION MARK 字符 (")
    如果它是 U+0027 APOSTROPHE 字符 (')，并且 s 中稍后还有一个 U+0027 APOSTROPHE 字符 (')
    返回从该字符与该字符下一次最早出现位置之间的子字符串中获取编码的结果。
    如果它是未匹配的 U+0022 QUOTATION MARK 字符 (")
    如果它是未匹配的 U+0027 APOSTROPHE 字符 (')
    如果不存在下一个字符
    不返回任何内容。
    否则
    返回从由该字符开始，直到第一个ASCII 空白、U+003B SEMICOLON 字符 (;) 或 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”。
use-credentials 使用凭据 对该元素发出的请求，其模式将设置为 “cors”，其凭据模式将设置为“include”。

该属性的缺失 值默认状态是无 CORS状态，而其无效值 默认状态和空 值默认状态 均为匿名状态。

由CORS 设置 属性控制的大多数获取操作，将通过创建潜在 CORS 请求算法执行。

对于更现代的特性，其请求的模式始终为“cors”，某些CORS 设置 属性已被重新用于表达略有不同的含义，即它们只影响请求的凭据模式。为了执行这种转换，我们将给定CORS 设置属性的CORS 设置属性凭据 模式定义为根据属性状态进行分支确定：

无 CORS
匿名
“same-origin”
使用凭据
“include”

2.5.5 引用来源策略属性

引用来源策略属性是一个枚举属性。每个 引用来源 策略（包括空字符串）都是该属性的关键字，并映射 到同名状态。

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

这些状态对各种获取处理模型的影响，在本规范的各处、 Fetch 和引用来源策略中有更详细的定义。[FETCH] [REFERRERPOLICY]

多种信号都可能影响为给定获取使用哪种处理模型；引用来源策略属性只是其中 之一。通常，这些信号的处理顺序如下：

  1. 首先，是否存在 noreferrer 链接 类型；

  2. 然后，引用来源策略属性的值；

  3. 然后，是否存在任何 meta 元素，且其 name 属性设置为 referrer。

  4. 最后，`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（“仅使用一次的数字”），内容 安全策略可以使用它来确定是否允许继续执行给定的获取操作。其 值为文本。[CSP]

具有 nonce 内容 属性的元素，通过从内容属性中取得值，将其移动到名为 [[CryptographicNonce]] 的内部槽中，通过 HTMLOrSVGOrMathMLElement 接口混入将其暴露给脚本，并将内容属性 设置为空字符串，以确保加密 nonce 只暴露给脚本，而不暴露给 CSS 属性 选择器等侧信道。除非另有规定，该槽的值为空字符串。

element.nonce

返回为 element 的加密 nonce 设置的值。如果未使用 设置器，则该值是最初在 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 属性的 设置器不会更新 相应的内容属性。这一点以及下文在元素 变为与浏览上下文连接时，将 nonce 内容属性设置为空字符串， 旨在防止通过选择器等可轻松读取内容属性的机制泄露 nonce 值。请参阅引入此行为的 议题 #2369了解更多信息。

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

  1. 如果 element 不包含 HTMLOrSVGOrMathMLElement， 则返回。

  2. 如果 localName 不是 nonce，或者 namespace 不为 null，则返回。

  3. 如果 value 为 null，则将 element 的 [[CryptographicNonce]]设置为空字符串。

  4. 否则，将 element 的[[CryptographicNonce]]设置为 value。

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

  1. 令 CSP list 为 element 的影子包含 根的策略 容器的CSP 列表。

  2. 如果 CSP list包含通过标头传递的内容 安全策略，并且 element 具有一个值不为空字符串的 nonce 内容属性：

    1. 令 nonce 为 element 的 [[CryptographicNonce]]。

    2. 使用“nonce”和空字符串，为 element设置属性值。

    3. 将 element 的[[CryptographicNonce]]设置为 nonce。

    如果未恢复 element 的[[CryptographicNonce]]，则此时它 将为空字符串。

给定 node、copy 和 subtree，对包含 HTMLOrSVGOrMathMLElement 的元素执行的克隆步骤，是将 copy 的[[CryptographicNonce]]设置为 node 的[[CryptographicNonce]]。

2.5.7 延迟加载属性

Lazy_loading

所有当前引擎均支持。

Firefox75+Safari15.4+Chrome77+
Opera?Edge79+
Edge（旧版）?Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

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

该属性根据其当前状态，指示用户代理立即获取资源，或者将获取推迟到 与该元素相关的某些条件得到满足时。

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

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

  1. 如果 element 的脚本已禁用， 则返回 false。

    这是一项反跟踪措施，因为如果用户代理在脚本被禁用时仍支持延迟加载， 网站仍然可以通过在页面标记中有策略地放置图像，使服务器能够跟踪 请求了多少图像以及何时请求，从而在整个会话期间跟踪用户的大致 滚动位置。

  2. 如果 element 的延迟加载属性处于延迟状态， 则返回 true。

  3. 返回 false。

每个 img、audio、video 和 iframe 元素都有关联的 延迟加载恢复步骤，初始值为 null。

每个 video 元素 还具有相关联的海报延迟加载恢复步骤， 初始值为 null。

对于将延迟 加载的 img、 audio、video 和 iframe 元素， 这些步骤会从延迟加载 交叉观察器的回调中运行，或者在其延迟加载 属性被设置为立即状态时运行。这会 使元素继续加载。对于 video 元素，海报延迟加载 恢复步骤也会同时运行。

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

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

  1. 令 doc 为 element 的节点文档。

  2. 如果 doc 的延迟加载交叉观察器为 null， 则将其设置为新的 IntersectionObserver 实例，并按以下方式初始化：

    其意图是使用 IntersectionObserver 构造函数的原始值。但是，在交叉观察器为规范公开可用的底层钩子之前， 本规范不得不使用暴露给 JavaScript 的构造函数。请参阅跟踪此问题的 w3c/IntersectionObserver#464。 [INTERSECTIONOBSERVER]

  3. 以 element 作为参数，调用 doc 的延迟加载交叉观察器的 observe 方法。

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

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

  1. 令 doc 为 element 的节点文档。

  2. 断言：doc 的延迟加载交叉观察器不为 null。

  3. 以 element 作为 参数，调用 doc 的延迟加载交叉观察器的 unobserve 方法。

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

（这是一个跟踪向量。） 延迟加载滚动边距是一个 由实现定义的值，但应考虑以下建议：

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

2.5.8 阻塞属性

阻塞属性明确表示，在获取外部资源时应 阻塞某些操作。可被阻塞的操作由 可能的阻塞标记表示，这些标记是下表列出的 字符串：

可能的阻塞标记 描述
“render” 该元素可能阻塞渲染。

将来， 可能会有更多可能的 阻塞标记。

阻塞属性的 值必须是唯一空格分隔 标记的无序集合，其中每个标记都是可能的 阻塞标记。阻塞属性的受支持标记是这些可能的阻塞 标记。任何元素最多只能具有一个阻塞属性。

元素 el 的阻塞标记集合是以下 步骤的结果：

  1. 令 value 为 el 的阻塞属性的值；如果不存在 此类属性，则为空字符串。

  2. 将 value 设置为转换为 ASCII 小写形式后的 value。

  3. 令 rawTokens 为在 ASCII 空白处分割 value的结果。

  4. 返回一个集合，其中包含 rawTokens 中属于可能的阻塞标记的元素。

如果一个元素的阻塞标记集合 包含“render”，或者它是 隐式可能阻塞渲染的，则该元素 可能阻塞渲染；后者将在各个 元素中定义。默认情况下，元素不是隐式可能阻塞渲染的。

2.5.9 获取优先级属性

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

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

该属性的缺失 值默认状态和 无效值 默认状态均为 自动 状态。

2.6 常用 DOM 接口

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

反映的构成要素如下：

可以将反映的 IDL 属性定义为 反映某个反映目标的 反映的内容属性 名称。一般而言，这 意味着 IDL 属性获取器返回内容属性的当前值，而 设置器会将内容属性的值更改为给定值。

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

对于作为元素 element 的反映目标，这些算法定义 如下：

获取 元素

  1. 返回 element。

获取内容属性

  1. 令 attribute 为给定 null、反映的 内容属性名称和 element，按命名空间和 本地名称获取属性的结果。

  2. 如果 attribute 为 null，则返回 null。

  3. 返回 attribute 的值。

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

  1. 给定 element、反映的 内容属性名称和 value，设置属性值。

删除内容 属性

  1. 给定 null、反映的 内容属性名称和 element，按命名空间和本地名称 移除属性。

对于作为 ElementInternals 对象 elementInternals 的反映目标，这些算法定义如下：

获取 元素

  1. 返回 elementInternals 的目标 元素。

获取内容 属性

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

  2. 返回 elementInternals 的目标 元素的内部内容 属性映射[反映的 内容 属性名称]。

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

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

删除内容 属性

  1. 从 elementInternals 的目标元素的内部内容 属性映射[反映的 内容属性名称]中移除相应条目。

这会使 ElementInternals 对象具有某种程度上冗余的数据结构，因为其目标 元素的内部内容属性 映射无法被直接操作，因此 反映只会沿单一方向发生。尽管如此，仍选择了这种方法，以便在定义由多个反映目标共享并受益于 通用 API 语义的 IDL 属性时更不容易出错。

类型为 DOMString 或 DOMString? 并反映枚举内容属性的 IDL 属性，可以被 限制为仅使用已知值。 根据下述处理模型，这会使此类 IDL 属性的获取器仅 返回这些枚举属性的关键字、空字符串或 null。

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

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

如果一个反映的 IDL 属性的 类型为 USVString， 并且可以选择作为 URL 处理：

如果一个反映的 IDL 属性的 类型为 boolean：

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

如果一个反映的 IDL 属性的 类型为 long， 并且可以选择限制为仅使用非负数，还可以选择具有一个 默认 值 defaultValue：

如果一个反映的 IDL 属性的 类型为 unsigned long， 并且可以选择限制为仅使用正 数、限制为仅 使用带后备值的正 数，或者限制在范围 [clampedMin, clampedMax] 内，还可以选择具有一个默认值 defaultValue：

如果一个反映的 IDL 属性的 类型为 double， 并且可以选择被限制为仅使用正数， 还可以选择具有一个默认值 defaultValue：

如 Web IDL 中所定义，设置 Infinity 和 Not-a-Number (NaN) 值时会抛出异常。 [WEBIDL]

如果一个反映的 IDL 属性的 类型为 DOMTokenList，则其 获取器步骤是返回一个 DOMTokenList 对象，其关联元素为 this，关联属性的本地名称为反映的内容 属性名称。规范作者不能在 ElementInternals 上反映此类型的 IDL 属性。

如果一个反映的 IDL 属性的 类型为 T?， 其中 T 是 Element 或继承自 Element 的接口，并且 attr 是反映的内容 属性 名称：

强烈建议使此类型的反映的 IDL 属性的 标识符以“Element”结尾，以保持 一致性。

如果一个反映的 IDL 属性的 类型为 FrozenArray<T>?，其中 T 是 Element 或继承自 Element 的接口，并且 attr 是反映的内容 属性名称：

强烈建议使此类型的反映的 IDL 属性的 标识符以“Elements”结尾，以保持 一致性。

2.6.2 通过 IDL 扩展 属性使用反映

可以通过扩展 属性从 IDL 使用反映。[Reflect]、[ReflectSetter]、[ReflectURL]、 [ReflectNonNegative]、[ReflectPositive] 和 [ReflectPositiveWithFallback] 都会 触发反映。它们必须 不接受参数或接受一个 字符串；不得出现在接口成员属性以外的任何位置；并且一次只能使用其中一个。

对于这些主要反映扩展 属性之一，如果提供了字符串值，则其反映的内容属性 名称为该字符串值； 否则为转换为 ASCII 小写形式后的 IDL 属性名称。

具有 [Reflect] 扩展 属性的 IDL 属性必须反映 [Reflect] 的 反映的内容属性 名称。

具有 [ReflectSetter] 扩展 属性的 IDL 属性，在设置时必须反映 [ReflectSetter] 的 反映的内容属性 名称。

[ReflectURL] 扩展 属性必须 仅出现在类型为 USVString 的属性上。

具有 [ReflectURL] 扩展 属性的 IDL 属性，必须作为 URL反映 [ReflectURL] 的 反映的内容属性 名称。

[ReflectNonNegative] 扩展 属性必须仅出现在类型为 long 的属性上。

具有 [ReflectNonNegative] 扩展 属性的 IDL 属性，必须在限制为仅使用非负 数的情况下反映 [ReflectNonNegative] 的 反映的内容属性 名称。

[ReflectPositive] 和 [ReflectPositiveWithFallback] 扩展 属性必须仅出现在类型 为 double 或 unsigned long 的属性上。

具有 [ReflectPositive] 扩展 属性的 IDL 属性，必须在限制为 仅使用正 数的情况下反映 [ReflectPositive] 的 反映的 内容属性名称。

具有 [ReflectPositiveWithFallback] 扩展 属性的 IDL 属性，必须在限制 为仅使用带 后备值的正数的情况下反映 [ReflectPositiveWithFallback] 的 反映的 内容属性名称。

为了补充上述扩展 属性，我们还 引入了 [ReflectRange] 和 [ReflectDefault]。它们 扩展了反映的工作方式，并且 也必须仅出现在接口 成员属性上。

[ReflectRange] 扩展 属性 必须接受一个仅限两个值的整数列表。它必须仅用于类型为 unsigned long 的属性。此外，它还必须仅与 [Reflect] 同时出现。

具有 [ReflectRange] 扩展 属性的 IDL 属性会被限制在范围 [clampedMin, clampedMax] 内，其中 clampedMin 是提供给 [ReflectRange] 的列表的第一个参数，clampedMax 是第二个参数。

[ReflectDefault] 扩展 属性 必须仅用于类型为 double、 long 或 unsigned long 的属性上。当用于 类型为 double 的属性时，它必须接受十进制数；否则 必须接受整数。此外，它还必须仅与 [Reflect]、 [ReflectNonNegative]、 [ReflectPositive] 或 [ReflectPositiveWithFallback] 同时出现。

具有 [ReflectDefault] 扩展 属性的 IDL 属性具有一个由提供给 [ReflectDefault] 的参数所提供的默认 值。

2.6.3 在规范中使用反映

反映主要用于改善 Web 开发者的人机工程学体验， 使其能够通过反映的 IDL 属性以类型化方式访问内容属性。Web 平台 构建所依据的最终事实来源是内容属性本身。也就是说，规范作者不得使用 反映的 IDL 属性的获取器或设置器步骤，而必须使用内容 属性是否存在及其值。（或者使用建立在其上的抽象，例如枚举 属性的状态。）

两个重要的例外是类型为以下任一类型的反映的 IDL 属性：

对于这些属性，规范作者必须分别使用反映目标的 获取 attr 关联元素和获取 attr 关联元素。不得使用内容属性是否存在及其值， 因为它们无法与反映的 IDL 属性完全同步。

反映 目标的显式设置的 attr 元素、 显式 设置的 attr 元素、缓存的 attr 关联 元素以及缓存的 attr 关联 元素对象应被 视为内部实现细节，不应依赖它们进行构建。

2.6.4 集合

HTMLFormControlsCollection 和 HTMLOptionsCollection 接口是派生自 HTMLCollection 接口的集合。HTMLAllCollection 接口是一个集合，但并非如此派生。

2.6.4.1 HTMLAllCollection 接口

HTMLAllCollection 接口用于旧式 document.all 属性。它的操作方式与 HTMLCollection 类似；主要区别在于，它允许以数量惊人的各种不同方式（滥）用其方法， 而最终都能返回某些内容，并且它可以作为函数调用， 以替代属性访问。

所有 HTMLAllCollection 对象都以一个 Document 为根，并具有匹配所有元素的过滤器，因此一个 HTMLAllCollection 对象的集合所表示的 元素由根 Document 的所有后代元素组成。

实现 HTMLAllCollection 接口的对象是旧式 平台对象，并具有下文章节所述的额外 [[Call]] 内部 方法。它们还具有一个 [[IsHTMLDDA]] 内部槽。

实现 HTMLAllCollection 接口的对象具有几种异常 行为，这是因为它们具有一个[[IsHTMLDDA]] 内部槽：

这些特殊行为是出于与两类旧式 内容兼容的需要：一类使用 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 属性的非空值，以及所有由集合表示的 元素中，所有“all”命名 元素的所有 name 属性的非空值组成；这些元素均由集合表示，并按 树顺序排列，忽略后续重复项；如果一个元素同时提供 id 和 name，二者彼此不同，且均不是先前条目的重复项，则该元素的 id 位于其 name 之前。

length 获取器步骤是返回集合所表示的节点数量。

索引属性获取器必须返回给定传入索引，从 获取“all”索引元素的结果，该元素来自 this。

namedItem(name) 方法步骤是 返回给定 name，从 获取“all”命名 元素所得的结果，该元素来自 this。

item(nameOrIndex) 方法步骤 如下：

  1. 如果未提供 nameOrIndex，则返回 null。

  2. 返回给定 nameOrIndex，从 获取 “all”索引或命名元素所得的结果，该元素来自 this。

以下元素是“all”命名元素： a、 button、 embed、 form、 frame、 frameset、 iframe、 img、 input、 map、 meta、 object、 select 和 textarea

给定索引 index，要从 HTMLAllCollection collection 中获取“all”索引元素，返回 collection 中第 index个元素；如果不存在这样的第 index个元素，则返回 null。

给定名称 name，要从 HTMLAllCollection collection 中获取“all”命名元素，执行 以下步骤：

  1. 如果 name 为空字符串，则返回 null。

  2. 令 subCollection 为一个 HTMLCollection 对象，其根与 collection 相同，均为 Document，其过滤器仅匹配 符合以下任一条件的元素：

  3. 如果 subCollection 中恰好有一个元素，则返回该 元素。

  4. 否则，如果 subCollection 为空，则返回 null。

  5. 否则，返回 subCollection。

给定 nameOrIndex，要从 HTMLAllCollection collection 中获取“all”索引或命名 元素：

  1. 如果 nameOrIndex转换 为 JavaScript String 值后，是一个数组索引属性名称，则返回给定 nameOrIndex 所表示的数，从 collection 中获取 “all”索引元素所得的结果。

  2. 返回给定 nameOrIndex，从 collection 中获取“all”命名 元素所得的结果。

2.6.4.1.1 [[Call]] ( thisArgument, argumentsList )

  1. 如果 argumentsList 的大小为零，或者 argumentsList[0] 为 undefined，则返回 null。

  2. 令 nameOrIndex 为将 argumentsList[0]转换 为 DOMString 的结果。

  3. 令 result 为给定 nameOrIndex，从此 HTMLAllCollection 中获取“all”索引或命名 元素所得的结果。

  4. 返回将 result转换 为 ECMAScript 值的结果。

thisArgument 会被忽略，因此诸如 Function.prototype.call.call(document.all, null, "x") 这样的代码仍会搜索 元素。（document.all.call 不存在，因为 document.all 不继承自 Function.prototype。）

2.6.4.2 HTMLFormControlsCollection 接口

HTMLFormControlsCollection 接口用于 form 元素中列出的 元素的集合。

HTMLFormControlsCollection

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer否
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

RadioNodeList

所有当前引擎均支持。

Firefox33+Safari7+Chrome21+
Opera?Edge79+
Edge (Legacy)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

所有当前引擎均支持。

Firefox33+Safari4+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer否
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

选中由 radioNodeList 表示的、值为 value 的第一个单选按钮。

该对象的受支持属性索引按照 HTMLCollection 对象的定义。

受支持属性名称由该集合所表示的所有 元素的所有 id 和 name 属性的非空值组成；这些 元素由集合表示，并按树顺序排列，忽略 后续 重复项；如果一个元素同时提供 id 和 name，二者 彼此不同，且均不是先前条目的 重复项，则该元素的 id 位于其 name 之前。

namedItem(name) 方法 必须按照以下算法运行：

  1. 如果 name 为空字符串，则返回 null 并停止算法。
  2. 如果调用该方法时，集合中恰好有一个节点具有等于 name 的 id 属性或 name 属性，则返回该节点并停止算法。
  3. 否则，如果集合中没有节点具有等于 name 的 id 属性或 name 属性， 则返回 null 并停止算法。
  4. 否则，创建一个新的 RadioNodeList 对象，该对象表示 HTMLFormControlsCollection 对象的实时 视图，并进一步进行过滤，使 RadioNodeList 对象中仅包含具有等于 name 的 id 属性或 name 属性的 节点。RadioNodeList 对象中的节点必须按 树顺序排序。
  5. 返回该 RadioNodeList 对象。

RadioNodeList 接口中继承自 NodeList 接口的成员，必须像在 NodeList 对象上一样运行。

RadioNodeList/value

所有当前引擎均支持。

Firefox33+Safari7+Chrome21+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

RadioNodeList 对象上的 value IDL 属性在获取时，必须返回运行 以下步骤所返回的值：

  1. 令 element 为 RadioNodeList 对象所表示的、按树顺序排列的 第一个满足以下条件的元素：它是一个 input 元素，其 type 属性处于单选按钮状态，并且 其选中性为 true。否则，令其 为 null。

  2. 如果 element 为 null，则返回空字符串。

  3. 如果 element 是一个没有 value 属性的元素，则返回字符串“on”。

  4. 否则，返回 element 的 value 属性的值。

在设置时，value IDL 属性必须运行 以下步骤：

  1. 如果新值是字符串“on”：令 element 为 RadioNodeList 对象所表示的、按树顺序排列的 第一个满足以下条件的元素：它是一个 input 元素，其 type 属性处于单选按钮状态，并且 其 value 内容属性不存在，或者存在且等于新值（如有）。如果不存在此类元素， 则改为令 element 为 null。

    否则：令 element 为 RadioNodeList 对象所表示的、按树顺序排列的 第一个满足以下条件的元素：它是一个 input 元素，其 type 属性处于单选按钮状态，并且 其 value 内容属性存在且等于新值（如有）。如果不存在此类元素， 则改为令 element 为 null。

  2. 如果 element 不为 null，则将其选中性设置为 true。

2.6.4.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])

将 element 插入到由 before 指定的节点之前。

before 参数可以是一个数字，此时 element 会插入到 具有该编号的项目之前；也可以是 collection 中的一个元素，此时 element 会插入到该元素之前。

如果省略 before、其为 null 或者是超出范围的数字，则会将 element 添加到列表末尾。

如果 element 是要将其插入的元素的祖先，则抛出 “HierarchyRequestError” DOMException。

collection.remove(index)

从 collection 中移除索引为 index 的项目。

collection.selectedIndex

如果存在选中项目，则返回第一个选中项目的索引；如果没有选中 项目，则返回 −1。

collection.selectedIndex = index

将选择更改为 collection 中索引 index 处的 option 元素。

该对象的受支持属性索引按照 HTMLCollection 对象的定义。

length 获取器步骤是返回该集合所表示的节点数量。

length 设置器步骤如下：

  1. 令 current 为该集合所表示的 节点数量。

  2. 如果给定值大于 current：

    1. 如果给定值大于 100,000，则返回。

    2. 令 n 为 value − current。

    3. 给定 n，向 this 所以之为根的 select 元素追加新的 option 元素。

  3. 如果给定值小于 current：

    1. 令 n 为 current − value。

    2. 从各自的父节点中移除集合中的最后 n 个节点。

设置 length 从不会移除 或添加任何 optgroup 元素，也从不会向现有 optgroup 元素添加新的子节点（但可以从中移除子节点）。

受支持属性名称由所有 元素的所有 id 和 name 属性的非空值组成；这些 元素由集合表示，并按树顺序排列，忽略后续 重复项；如果一个元素同时提供 id 和 name，二者 彼此不同，且均不是 先前条目的重复项，则该元素的 id 位于其 name 之前。

给定非负整数 count，要向 select 元素 select 追加新的 option 元素：

  1. 令 fragment 为在给定 select 的节点 文档的情况下，创建 文档片段的结果。

  2. 将 count 个新的 option 元素追加到 fragment。

  3. 将 fragment 追加到 select。

给定属性索引 index 和新值 value，要为 HTMLOptionsCollection collection设置新索引属性的值 或设置现有索引 属性的值：

  1. 如果 value 为 null，则给定 index，从 collection 中移除 一个选项，然后返回。

  2. 令 length 为 collection 所表示的节点数量。

  3. 令 delta 为 index − length。

  4. 如果 delta 大于 0，则给定 delta，向 collection 所以之为根的 select 元素追加新的 option 元素。

  5. 如果 delta 大于或等于 0，则将 value追加到 collection 所以之为根的 select 元素。否则，使用 value替换 collection 中的第 index 个元素。

add(element, before) 方法步骤如下：

  1. 如果 element 是 this 所以之为根的 select 元素的祖先，则抛出 “HierarchyRequestError” DOMException。

  2. 如果 before 是一个元素，但该元素不是 this 所以之为根的 select 元素的后代，则抛出 “NotFoundError” DOMException。

  3. 如果 element 和 before 是同一个元素，则返回。

  4. 令 reference 为 null。

  5. 如果 before 是一个节点，则将 reference 设置为 before。 否则，如果 before 是一个整数，并且 this 中存在第 before 个节点，则将 reference 设置为该节点。

  6. 如果 reference 不为 null，则令 parent 为 reference 的父节点；否则为 this 所以之为根的 select 元素。

  7. 在 reference 之前，将 element预插入到 parent 节点。

给定整数 index，要从 HTMLOptionsCollection collection 中移除一个选项：

  1. 如果 collection 所表示的 节点数量为 0，则返回。

  2. 如果 index 不是一个大于或等于 0 且小于 collection 所表示的节点数量的数， 则返回。

  3. 令 element 为 collection 中的第 index 个元素。

  4. 从其父节点中移除 element。

remove(index) 方法步骤是 给定 index，从 this 中移除一个选项。

selectedIndex 获取器步骤是 返回 this 所以之为根的 select 元素的选中索引。

selectedIndex 设置器步骤 是将 this 所以之为根的 select 元素的选中 索引设置为给定值。

2.6.5 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 接口支持索引属性。其 受支持属性索引是 this 的 关联列表的索引。

DOMStringList/length

所有当前引擎均支持。

Firefox1+Safari5.1+Chrome1+
Opera12.1+Edge79+
Edge（旧版）12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

length 获取器步骤是返回 this 的关联列表的大小。

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) 方法步骤是 返回 this 的关联列表中的第 index 个项目；如果 index 加一大于 this 的关联列表的大小，则返回 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) 方法步骤 是：如果 this 的关联列表包含 string， 则返回 true；否则返回 false。

2.7 结构化数据的安全传递

为了支持跨领域 边界传递 JavaScript 对象，包括平台对象， 本规范定义了以下用于序列化和反序列化对象的基础设施，其中在某些情况下会传输底层数据， 而不是复制它。这个序列化和反序列化过程统称为 “结构化克隆”，尽管大多数 API 会执行单独的序列化和反序列化步骤。 （一个显著的例外是 structuredClone() 方法。）

本节使用 JavaScript 规范中的术语和排版约定。[JAVASCRIPT]

2.7.1 可序列化对象

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+Safari否Chrome77+
Opera?Edge79+
Edge（旧版）?Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+Safari否Chrome77+
Opera?Edge79+
Edge（旧版）?Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+Safari否Chrome77+
Opera?Edge79+
Edge（旧版）?Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+Safari否Chrome77+
Opera?Edge79+
Edge（旧版）?Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+Safari否Chrome77+
Opera?Edge79+
Edge（旧版）?Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+Safari否Chrome77+
Opera?Edge79+
Edge（旧版）?Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+Safari否Chrome77+
Opera?Edge79+
Edge（旧版）?Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

可序列化对象支持 以独立于任何给定领域的方式进行序列化，并在以后进行反序列化。这允许将它们存储在磁盘上并 在以后恢复，或者跨代理乃至代理集群 边界进行克隆。

并非所有对象都是可序列化 对象，而且作为 可序列化对象的对象的所有方面， 也不一定会在序列化时得到保留。

如果平台对象的主接口带有 [Serializable] IDL 扩展 属性，则该平台对象可以是可序列化对象。此类接口还必须定义以下算法：

序列化步骤，接受一个平台对象 value、一个记录 serialized 和一个布尔值 forStorage

一组将 value 中的数据序列化到 serialized 的字段中的步骤。序列化到 serialized 中的结果数据必须 独立于任何领域。

如果无法进行序列化，这些步骤可以抛出异常。

这些步骤可以执行子序列化来序列化嵌套数据 结构。它们不应直接调用 StructuredSerialize，因为这样做会 省略重要的 memory 参数。

如果 forStorage 参数与算法无关，则这些步骤的引言应 省略对该参数的提及。

反序列化步骤，接受一个记录 serialized、 一个平台对象 value 和一个领域 targetRealm

一组对 serialized 中的数据进行反序列化，并使用这些数据适当地设置 value 的步骤。value 将是所讨论的平台对象类型的新创建实例，其内部数据均尚未设置； 设置这些数据是这些步骤的工作。

如果无法进行反序列化，这些步骤可以抛出异常。

这些步骤可以执行子反序列化来反序列化嵌套数据 结构。它们不应直接调用 StructuredDeserialize，因为这样做会 省略重要的 targetRealm 和 memory 参数。

由各个平台对象的定义来决定这些步骤会序列化和反序列化哪些数据。 通常，这些步骤是高度对称的。

[Serializable] 扩展 属性不得接受任何 参数，并且只能出现在接口上。它不得在一个 接口上出现多次。

对于给定的平台对象， 在序列化和反序列化过程中，只考虑该对象的主 接口。因此，如果接口定义涉及继承，则继承链中每个带有 [Serializable] 注解的接口 都需要定义独立的序列化步骤和 反序列化步骤， 包括考虑可能来自继承接口的任何重要数据。

假设我们正在定义一个平台对象 Person，该对象具有 两项关联数据：

然后，我们可以通过使用 [Serializable] 扩展属性注解 Person 接口，并定义 以下配套算法，将 Person 实例定义为可序列化 对象：

给定 value 和 serialized，它们的序列化步骤如下：

  1. 将 serialized.[[Name]] 设置为 value 的关联名称 值。

  2. 令 serializedBestFriend 为 value 的关联好友值的子序列化。

  3. 将 serialized.[[BestFriend]] 设置为 serializedBestFriend。

给定 serialized、value 和 targetRealm，它们的反序列化 步骤如下：

  1. 将 value 的关联名称值设置为 serialized.[[Name]]。

  2. 令 deserializedBestFriend 为 serialized.[[BestFriend]] 的子反序列化。

  3. 将 value 的关联好友值设置为 deserializedBestFriend。

JavaScript 规范中定义的对象由 StructuredSerialize 抽象 操作直接处理。

最初，本 规范定义了“可克隆对象”的概念，此类对象可以从一个领域克隆到另一个领域。但是，为了 更准确地规定某些更复杂情况下的行为，该模型后来被更新，以显式区分 序列化和反序列化。

2.7.2 可转移对象

可转移对象支持 跨代理转移。转移实际上是重新创建对象，同时共享对 底层数据的引用，然后分离正在转移的对象。这对于 转移昂贵资源的所有权非常有用。并非所有对象都是可转移 对象，而且作为可转移对象的对象的所有方面， 也不一定会在转移时得到保留。

转移是一项不可逆且非幂等的操作。对象一旦 被转移，就不能再次转移，事实上也不能再次使用。

如果平台对象的主接口带有 [Transferable] IDL 扩展 属性，则该平台对象可以是可转移对象。此类接口还必须定义以下算法：

转移步骤，接受一个平台对象 value 和一个记录 dataHolder

一组将 value 中的数据转移到 dataHolder 的字段中的步骤。dataHolder 中保存的结果数据必须 独立于任何领域。

如果无法进行转移，这些步骤可以抛出异常。

转移接收步骤，接受一个记录 dataHolder 和一个平台 对象 value

一组接收 dataHolder 中的数据，并使用这些数据适当地设置 value 的步骤。value 将是所讨论的平台对象类型的新创建实例，其内部数据均尚未设置； 设置这些数据是这些步骤的工作。

如果无法接收转移，这些步骤可以抛出异常。

由各个平台对象的定义来决定这些步骤会转移哪些数据。 通常，这些步骤是高度对称的。

[Transferable] 扩展 属性不得接受任何 参数，并且只能出现在接口上。它不得在一个 接口上出现多次。

对于给定的平台对象， 在转移过程中，只考虑该对象的主 接口。因此，如果接口定义涉及继承，则继承链中每个带有 [Transferable] 注解的接口 都需要定义独立的转移步骤和 转移接收步骤， 包括考虑可能来自继承接口的任何重要数据。

作为可转移 对象的平台对象具有一个 [[Detached]] 内部槽。该槽用于确保平台对象一旦被转移，就不能 再次转移。

JavaScript 规范中定义的对象由 StructuredSerializeWithTransfer 抽象操作 直接处理。

2.7.3 StructuredSerializeInternal ( value, forStorage [ , memory ] )

StructuredSerializeInternal 抽象操作 接受一个 JavaScript 值 value 作为输入，并将其序列化为独立于领域的形式，此处表示为一个记录。此 序列化形式包含以后在不同领域中 反序列化为新 JavaScript 值所需的全部信息。

此过程可能抛出异常，例如尝试序列化不可序列化的 对象时。

  1. 如果未提供 memory，则令 memory 为一个空映射。

    memory 映射的目的是避免对对象进行两次序列化。 最终这会保留图中的循环以及重复对象的同一性。

  2. 如果 memory[value]存在，则 返回 memory[value]。

  3. 令 deep 为 false。

  4. 如果 value 是 undefined、null、布尔值、数值、BigInt 值或字符串，则返回 { [[Type]]: "primitive", [[Value]]: value }。

  5. 如果 value是 Symbol，则抛出 “DataCloneError” DOMException。

  6. 令 serialized 为一个未初始化的值。

  7. 如果 value 具有 [[BooleanData]] 内部槽，则将 serialized 设置为 { [[Type]]: "Boolean", [[BooleanData]]: value.[[BooleanData]] }。

  8. 否则，如果 value 具有 [[NumberData]] 内部槽，则将 serialized 设置为 { [[Type]]: "Number", [[NumberData]]: value.[[NumberData]] }。

  9. 否则，如果 value 具有 [[BigIntData]] 内部槽，则将 serialized 设置为 { [[Type]]: "BigInt", [[BigIntData]]: value.[[BigIntData]] }。

  10. 否则，如果 value 具有 [[StringData]] 内部槽，则将 serialized 设置为 { [[Type]]: "String", [[StringData]]: value.[[StringData]] }。

  11. 否则，如果 value 具有 [[DateValue]] 内部槽，则将 serialized 设置为 { [[Type]]: "Date", [[DateValue]]: value.[[DateValue]] }。

  12. 否则，如果 value 具有 [[RegExpMatcher]] 内部槽，则将 serialized 设置为 { [[Type]]: "RegExp", [[RegExpMatcher]]: value.[[RegExpMatcher]], [[OriginalSource]]: value.[[OriginalSource]], [[OriginalFlags]]: value.[[OriginalFlags]] }。

  13. 否则，如果 value 具有 [[ArrayBufferData]] 内部槽：

    1. 如果 IsSharedArrayBuffer(value) 为 true：

      1. 如果当前设置对象的跨源 隔离 能力为 false，则抛出 “DataCloneError” DOMException。

        仅在序列化时（而不是反序列化时）需要执行此检查，因为 跨源 隔离能力不会随时间发生变化，并且 SharedArrayBuffer 无法离开一个代理 集群。

      2. 如果 forStorage 为 true，则抛出 “DataCloneError” DOMException。

      3. 如果 value 具有 [[ArrayBufferMaxByteLength]] 内部槽，则将 serialized 设置为 { [[Type]]: "GrowableSharedArrayBuffer", [[ArrayBufferData]]: value.[[ArrayBufferData]], [[ArrayBufferByteLengthData]]: value.[[ArrayBufferByteLengthData]], [[ArrayBufferMaxByteLength]]: value.[[ArrayBufferMaxByteLength]], [[AgentCluster]]: 周围 代理的代理集群 }。

      4. 否则，将 serialized 设置为 { [[Type]]: "SharedArrayBuffer", [[ArrayBufferData]]: value.[[ArrayBufferData]], [[ArrayBufferByteLength]]: value.[[ArrayBufferByteLength]], [[AgentCluster]]: 周围 代理的代理集群 }。

    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 }。

  14. 否则，如果 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]] }。

  15. 否则，如果 value 具有 [[MapData]] 内部槽：

    1. 将 serialized 设置为 { [[Type]]: "Map", [[MapData]]: 一个新的空列表 }。

    2. 将 deep 设置为 true。

  16. 否则，如果 value 具有 [[SetData]] 内部槽：

    1. 将 serialized 设置为 { [[Type]]: "Set", [[SetData]]: 一个新的空列表 }。

    2. 将 deep 设置为 true。

  17. 否则，如果 value 具有 [[ErrorData]] 内部槽，并且 value 不是 平台 对象：

    1. 令 name 为 ? Get(value, "name")。

    2. 如果 name 不是 "Error"、"EvalError"、"RangeError"、"ReferenceError"、 "SyntaxError"、"TypeError" 或 "URIError" 之一，则将 name 设置为 "Error"。

    3. 令 valueMessageDesc 为 ? value.[[GetOwnProperty]]("message")。

    4. 如果 IsDataDescriptor(valueMessageDesc) 为 false，则令 message 为 undefined；否则为 ? ToString(valueMessageDesc.[[Value]])。

    5. 令 stack 为一个表示 value.[[Stack]] 的由实现定义的字符串。[JSERRORSTACKACCESSOR] [JSERRORSTACKS]

    6. 将 serialized 设置为 { [[Type]]: "Error", [[Name]]: name, [[Message]]: message, [[Stack]]: stack }。

    7. 用户代理应将尚未规定的任何值得关注的伴随数据的序列化表示 附加到 serialized。

  18. 否则，如果 value 是一个 Array 异常对象：

    1. 令 valueLenDescriptor 为 ? OrdinaryGetOwnProperty(value, "length")。

    2. 令 valueLen 为 valueLenDescriptor.[[Value]]。

    3. 将 serialized 设置为 { [[Type]]: "Array", [[Length]]: valueLen, [[Properties]]: 一个新的空列表 }。

    4. 将 deep 设置为 true。

  19. 否则，如果 value 是一个作为可序列化对象的平台 对象：

    1. 如果 value 具有值为 true 的 [[Detached]] 内部槽，则抛出 “DataCloneError” DOMException。

    2. 令 typeString 为 value 的主 接口的标识符。

    3. 将 serialized 设置为 { [[Type]]: typeString }。

    4. 将 deep 设置为 true。

  20. 否则，如果 value 是一个平台 对象，则抛出 “DataCloneError” DOMException。

  21. 否则，如果 IsCallable(value) 为 true，则抛出 “DataCloneError” DOMException。

  22. 否则，如果 value 具有 [[Prototype]]、[[Extensible]] 或 [[PrivateElements]] 以外的任何内部槽，则抛出 “DataCloneError” DOMException。

    例如，[[PromiseState]] 或 [[WeakMapData]] 内部槽。

  23. 否则，如果 value 是一个异常对象，并且 value 不是 与任何领域关联的 %Object.prototype% 内建对象，则 抛出 “DataCloneError” DOMException。

    例如，代理对象。

  24. 否则：

    1. 将 serialized 设置为 { [[Type]]: "Object", [[Properties]]: 一个新的空列表 }。

    2. 将 deep 设置为 true。

    %Object.prototype% 最终将通过此步骤及 后续步骤处理。最终结果是忽略其异常性，并且反序列化后 得到一个空对象（而不是不可变原型异常对象）。

  25. 将 memory[value]设置为 serialized。

  26. 如果 deep 为 true：

    1. 如果 value 具有 [[MapData]] 内部槽：

      1. 令 copiedList 为一个新的空列表。

      2. 对于 value.[[MapData]] 中的每个记录 { [[Key]], [[Value]] } entry：

        1. 令 copiedEntry 为一个新的记录 { [[Key]]: entry.[[Key]], [[Value]]: entry.[[Value]] }。

        2. 如果 copiedEntry.[[Key]] 不是特殊值 empty，则将 copiedEntry追加到 copiedList。

      3. 对于 copiedList 中的每个记录 { [[Key]], [[Value]] } entry：

        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. 对于 value.[[SetData]] 中的每个 entry：

        1. 如果 entry 不是特殊值 empty，则将 entry追加到 copiedList。

      3. 对于 copiedList 中的每个 entry：

        1. 令 serializedEntry 为 ? StructuredSerializeInternal(entry, forStorage, memory)。

        2. 将 serializedEntry追加到 serialized.[[SetData]]。

    3. 否则，如果 value 是一个作为可序列化对象的平台 对象，则给定 value、 serialized 和 forStorage，执行 value 的主 接口的序列化 步骤。

      序列化 步骤可能需要执行子序列化。该 操作接受一个值 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]]。

  27. 返回 serialized。

需要认识到，由 StructuredSerializeInternal 生成的记录 可能包含指向其他记录的“指针”，从而形成循环引用。例如，当我们将以下 JavaScript 对象传入 StructuredSerializeInternal 时： 

const o = {};
o.myself = o;

它会生成以下结果：

{
  [[Type]]: "Object",
  [[Properties]]: «
    {
      [[Key]]: "myself",
      [[Value]]: <指向整个结构的指针>
    }
  »
}

2.7.4 StructuredSerialize ( value )

  1. 返回 ? StructuredSerializeInternal(value, false)。

2.7.5 StructuredSerializeForStorage ( value )

  1. 返回 ? StructuredSerializeInternal(value, true)。

2.7.6 StructuredDeserialize ( serialized, targetRealm [ , memory ] )

StructuredDeserialize 抽象操作接受一个先前由 StructuredSerialize 或 StructuredSerializeForStorage 生成的记录 serialized 作为输入，并将其反序列化为 在 targetRealm 中创建的新 JavaScript 值。

此过程可能抛出异常，例如尝试为新对象 分配内存时（尤其是 ArrayBuffer 对象）。

  1. 如果未提供 memory，则令 memory 为一个空映射。

    memory 映射的目的是避免对对象进行 两次反序列化。最终这会保留图中的循环以及重复对象的同一性。

  2. 如果 memory[serialized]存在，则 返回 memory[serialized]。

  3. 令 deep 为 false。

  4. 令 value 为一个未初始化的值。

  5. 如果 serialized.[[Type]] 是 "primitive"，则将 value 设置为 serialized.[[Value]]。

  6. 否则，如果 serialized.[[Type]] 是 "Boolean"，则将 value 设置为 targetRealm 中一个新的 Boolean 对象，其 [[BooleanData]] 内部槽的值为 serialized.[[BooleanData]]。

  7. 否则，如果 serialized.[[Type]] 是 "Number"，则将 value 设置为 targetRealm 中一个新的 Number 对象，其 [[NumberData]] 内部槽的值为 serialized.[[NumberData]]。

  8. 否则，如果 serialized.[[Type]] 是 "BigInt"，则将 value 设置为 targetRealm 中一个新的 BigInt 对象，其 [[BigIntData]] 内部槽的值为 serialized.[[BigIntData]]。

  9. 否则，如果 serialized.[[Type]] 是 "String"，则将 value 设置为 targetRealm 中一个新的 String 对象，其 [[StringData]] 内部槽的值为 serialized.[[StringData]]。

  10. 否则，如果 serialized.[[Type]] 是 "Date"，则将 value 设置为 targetRealm 中一个新的 Date 对象，其 [[DateValue]] 内部槽的值为 serialized.[[DateValue]]。

  11. 否则，如果 serialized.[[Type]] 是 "RegExp"，则将 value 设置为 targetRealm 中一个新的 RegExp 对象，其 [[RegExpMatcher]] 内部槽的值为 serialized.[[RegExpMatcher]]，其 [[OriginalSource]] 内部槽的值为 serialized.[[OriginalSource]]，其 [[OriginalFlags]] 内部槽的值为 serialized.[[OriginalFlags]]。

  12. 否则，如果 serialized.[[Type]] 是 "SharedArrayBuffer"：

    1. 如果 targetRealm 对应的代理集群 不是 serialized.[[AgentCluster]]，则抛出 “DataCloneError” DOMException。

    2. 否则，将 value 设置为 targetRealm 中一个新的 SharedArrayBuffer 对象，其 [[ArrayBufferData]] 内部槽的值为 serialized.[[ArrayBufferData]]，其 [[ArrayBufferByteLength]] 内部槽的 值为 serialized.[[ArrayBufferByteLength]]。

  13. 否则，如果 serialized.[[Type]] 是 "GrowableSharedArrayBuffer"：

    1. 如果 targetRealm 对应的代理集群 不是 serialized.[[AgentCluster]]，则抛出 “DataCloneError” DOMException。

    2. 否则，将 value 设置为 targetRealm 中一个新的 SharedArrayBuffer 对象，其 [[ArrayBufferData]] 内部槽的值为 serialized.[[ArrayBufferData]]，其 [[ArrayBufferByteLengthData]] 内部槽的 值为 serialized.[[ArrayBufferByteLengthData]]，其 [[ArrayBufferMaxByteLength]] 内部槽的值为 serialized.[[ArrayBufferMaxByteLength]]。

  14. 否则，如果 serialized.[[Type]] 是 "ArrayBuffer"，则将 value 设置为 targetRealm 中一个新的 ArrayBuffer 对象，其 [[ArrayBufferData]] 内部槽的值 为 serialized.[[ArrayBufferData]]，其 [[ArrayBufferByteLength]] 内部槽的 值为 serialized.[[ArrayBufferByteLength]]。

    如果这抛出异常，则捕获该异常，然后抛出 “DataCloneError” DOMException。

    如果没有足够的可用内存来 创建此类 ArrayBuffer 对象，此步骤可能抛出异常。

  15. 否则，如果 serialized.[[Type]] 是 "ResizableArrayBuffer"，则将 value 设置为 targetRealm 中一个新的 ArrayBuffer 对象，其 [[ArrayBufferData]] 内部槽的值为 serialized.[[ArrayBufferData]]，其 [[ArrayBufferByteLength]] 内部槽的值为 serialized.[[ArrayBufferByteLength]]，其 [[ArrayBufferMaxByteLength]] 内部 槽的值为 serialized.[[ArrayBufferMaxByteLength]]。

    如果这抛出异常，则捕获该异常，然后抛出 “DataCloneError” DOMException。

    如果没有足够的可用内存来 创建此类 ArrayBuffer 对象，此步骤可能抛出异常。

  16. 否则，如果 serialized.[[Type]] 是 "ArrayBufferView"：

    1. 令 deserializedArrayBuffer 为 ? StructuredDeserialize(serialized.[[ArrayBufferSerialized]], targetRealm, memory)。

    2. 如果 serialized.[[Constructor]] 是 "DataView"，则将 value 设置为 targetRealm 中一个新的 DataView 对象，其 [[ViewedArrayBuffer]] 内部槽的值 为 deserializedArrayBuffer，其 [[ByteLength]] 内部槽的值为 serialized.[[ByteLength]]，其 [[ByteOffset]] 内部槽的值为 serialized.[[ByteOffset]]。

    3. 否则，使用 serialized.[[Constructor]] 给出的构造函数，在 targetRealm 中将 value 设置为一个新的类型化数组对象， 其 [[ViewedArrayBuffer]] 内部槽的值为 deserializedArrayBuffer，其 [[TypedArrayName]] 内部槽的值为 serialized.[[Constructor]]，其 [[ByteLength]] 内部槽的值为 serialized.[[ByteLength]]，其 [[ByteOffset]] 内部槽的值为 serialized.[[ByteOffset]]，其 [[ArrayLength]] 内部槽的值为 serialized.[[ArrayLength]]。

  17. 否则，如果 serialized.[[Type]] 是 "Map"：

    1. 将 value 设置为 targetRealm 中一个新的 Map 对象，其 [[MapData]] 内部槽的值为一个新的空列表。

    2. 将 deep 设置为 true。

  18. 否则，如果 serialized.[[Type]] 是 "Set"：

    1. 将 value 设置为 targetRealm 中一个新的 Set 对象，其 [[SetData]] 内部槽的值为一个新的空列表。

    2. 将 deep 设置为 true。

  19. 否则，如果 serialized.[[Type]] 是 "Array"：

    1. 令 outputProto 为 targetRealm.[[Intrinsics]].[[%Array.prototype%]]。

    2. 将 value 设置为 ! ArrayCreate(serialized.[[Length]], outputProto)。

    3. 将 deep 设置为 true。

  20. 否则，如果 serialized.[[Type]] 是 "Object"：

    1. 将 value 设置为 targetRealm 中一个新的 Object。

    2. 将 deep 设置为 true。

  21. 否则，如果 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 设置为 OrdinaryObjectCreate(prototype, « [[ErrorData]], [[Stack]] »)。

    10. 令 messageDesc 为 属性描述符 { [[Value]]: message, [[Writable]]: true, [[Enumerable]]: false, [[Configurable]]: true }。

    11. 如果 message 不是 undefined，则执行 ! OrdinaryDefineOwnProperty(value, "message", messageDesc)。

    12. 将 value.[[Stack]] 设置为 serialized.[[Stack]]。

    13. 应反序列化附加到 serialized 的任何值得关注的伴随数据，并将其 附加到 value。

  22. 否则：

    1. 令 interfaceName 为 serialized.[[Type]]。

    2. 如果由 interfaceName 标识的接口未在 targetRealm 中 暴露，则抛出 “DataCloneError” DOMException。

    3. 将在 targetRealm 中创建的、由 interfaceName 标识的接口的新实例设置为 value。

    4. 将 deep 设置为 true。

  23. 将 memory[serialized]设置为 value。

  24. 如果 deep 为 true：

    1. 如果 serialized.[[Type]] 是 "Map"：

      1. 对于 serialized.[[MapData]] 中的每个记录 { [[Key]], [[Value]] } entry：

        1. 令 deserializedKey 为 ? StructuredDeserialize(entry.[[Key]], targetRealm, memory)。

        2. 令 deserializedValue 为 ? StructuredDeserialize(entry.[[Value]], targetRealm, memory)。

        3. 将 { [[Key]]: deserializedKey, [[Value]]: deserializedValue }追加到 value.[[MapData]]。

    2. 否则，如果 serialized.[[Type]] 是 "Set"：

      1. 对于 serialized.[[SetData]] 中的每个 entry：

        1. 令 deserializedEntry 为 ? StructuredDeserialize(entry, targetRealm, memory)。

        2. 将 deserializedEntry追加到 value.[[SetData]]。

    3. 否则，如果 serialized.[[Type]] 是 "Array" 或 "Object"：

      1. 对于 serialized.[[Properties]] 中的每个记录 { [[Key]], [[Value]] } entry：

        1. 令 deserializedValue 为 ? StructuredDeserialize(entry.[[Value]], targetRealm, memory)。

        2. 令 result 为 ! CreateDataProperty(value, entry.[[Key]], deserializedValue)。

        3. 断言：result 为 true。

    4. 否则：

      1. 给定 serialized、value 和 targetRealm，执行由 serialized.[[Type]] 标识的接口相应的反序列化步骤。

        反序列化步骤可能需要执行 子反序列化。该操作接受一个 先前序列化的记录 subSerialized 作为输入，并返回 StructuredDeserialize(subSerialized, targetRealm, memory)。（换言之，子反序列化是 StructuredDeserialize 的一种专门化， 以在本次调用中保持一致。）

  25. 返回 value。

2.7.7 StructuredSerializeWithTransfer ( value, transferList )

  1. 令 memory 为一个空映射。

    除了 StructuredSerializeInternal 通常对其的使用方式之外，在此 算法中，memory 还用于 确保 StructuredSerializeInternal 忽略 transferList 中的项目， 并让我们改为自行处理。

  2. 对于每个 transferList 中的 transferable：

    1. 如果 transferable 既没有 [[ArrayBufferData]] 内部槽，也没有 [[Detached]] 内部槽，则 抛出一个 "DataCloneError" DOMException。

    2. 如果 transferable 具有 [[ArrayBufferData]] 内部槽，并且 IsSharedArrayBuffer(transferable) 为 true，则 抛出一个 "DataCloneError" DOMException。

    3. 如果 memory[transferable] 存在， 则抛出一个 "DataCloneError" DOMException。

    4. 将 memory[transferable] 设置为 { [[Type]]: 一个未初始化的值 }。

      transferable 尚未被转移，因为转移具有副 作用，而 StructuredSerializeInternal 需要 能够先抛出异常。

  3. 令 serialized 为 ? StructuredSerializeInternal(value, false, memory)。

  4. 令 transferDataHolders 为一个新的空列表。

  5. 对于每个 transferList 中的 transferable：

    1. 如果 transferable 具有 [[ArrayBufferData]] 内部槽，并且 IsDetachedBuffer(transferable) 为 true，则抛出一个 "DataCloneError" DOMException。

    2. 如果 transferable 具有 [[Detached]] 内部槽，并且 transferable.[[Detached]] 为 true，则抛出一个 "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. 将 dataHolder.[[ArrayBufferData]] 设置为 transferable.[[ArrayBufferData]]。

        3. 将 dataHolder.[[ArrayBufferByteLength]] 设置为 transferable.[[ArrayBufferByteLength]]。

      3. 执行 ? DetachArrayBuffer(transferable)。

        规范可以使用 [[ArrayBufferDetachKey]] 内部槽来防止 ArrayBuffer 被分离。例如， WebAssembly JavaScript 接口便使用了这种方式。[WASMJS]

    5. 否则：

      1. 断言：transferable 是一个平台对象，并且是 一个可转移对象。

      2. 令 interfaceName 为 transferable 的主接口 的标识符。

      3. 将 dataHolder.[[Type]] 设置为 interfaceName。

      4. 给定 transferable 和 dataHolder，执行由 interfaceName 标识的接口相应的转移步骤。

      5. 将 transferable.[[Detached]] 设置为 true。

    6. 将 dataHolder 追加到 transferDataHolders。

  6. 返回 { [[Serialized]]: serialized, [[TransferDataHolders]]: transferDataHolders }。

2.7.8 StructuredDeserializeWithTransfer ( serializeWithTransferResult, targetRealm )

  1. 令 memory 为一个空映射。

    与 StructuredSerializeWithTransfer 类似，除了 StructuredDeserialize 通常使用它的方式之外，在此算法中， memory 还 用于确保 StructuredDeserialize 忽略 serializeWithTransferResult.[[TransferDataHolders]] 中的项目，并让我们改为自行处理 它们。

  2. 令 transferredValues 为一个新的空列表。

  3. 对于每个 serializeWithTransferResult.[[TransferDataHolders]] 中的 transferDataHolder：

    1. 令 value 为一个未初始化的值。

    2. 如果 transferDataHolder.[[Type]] 是 "ArrayBuffer"，则将 value 设置为 targetRealm 中一个新的 ArrayBuffer 对象，其 [[ArrayBufferData]] 内部槽的值 为 transferDataHolder.[[ArrayBufferData]]，其 [[ArrayBufferByteLength]] 内部槽的值为 transferDataHolder.[[ArrayBufferByteLength]]。

      在反序列化期间可以访问 [[ArrayBufferData]] 原本占用的内存的 情况下，此步骤不太可能抛出异常，因为不需要分配新的 内存：而只是将 [[ArrayBufferData]] 占用的内存 转移到新的 ArrayBuffer 中。例如，当源 Realm 和目标 Realm 位于同一进程中时，便可能如此。

    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 设置为由 interfaceName 标识的接口在 targetRealm 中创建的新实例。

      4. 给定 transferDataHolder 和 value，执行由 interfaceName 标识的 接口相应的转移接收步骤。

    5. 将 memory[transferDataHolder] 设置为 value。

    6. 将 value 追加到 transferredValues。

  4. 令 deserialized 为 ? StructuredDeserialize(serializeWithTransferResult.[[Serialized]], targetRealm, memory)。

  5. 返回 { [[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 抽象操作，则在调用这些操作之前，必须注意正确地准备运行脚本并准备 运行回调。这是必要的，因为序列化过程可以在其最后的 深度序列化步骤中调用作者定义的访问器，而这些访问器可能调用依赖于入口和现任概念 已正确设置的操作。

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 Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

structuredClone(value, options) 方法的步骤如下：

  1. 令 serialized 为 ? StructuredSerializeWithTransfer(value, options["transfer"])。

  2. 令 deserializeRecord 为 ? StructuredDeserializeWithTransfer(serialized, this 的 相关 Realm)。

  3. 返回 deserializeRecord.[[Deserialized]]。

3 HTML 文档的语义、结构和 API

3.1 文档

HTML 用户代理中的每个 XML 和 HTML 文档都由一个 Document 对象表示。 [DOM]

Document 对象的 URL 定义 于 DOM 中。它最初在创建 Document 对象时设置，但可以 在 Document 对象的生命周期内发生变化； 例如，当用户 导航到页面上的一个片段 时，以及使用新的 URL 调用 pushState() 方法时，它都会改变。[DOM]

交互式用户代理通常会在其用户界面中公开 Document 对象的 URL。这是用户判断某个网站是否试图冒充另一个网站的主要 机制。

Document 对象的 源 定义 于 DOM 中。它最初在创建 Document 对象时设置，并且在 Document 的生命周期内，仅会在设置 document.domain 时发生变化。一个 Document 的源可能与其 URL 的源不同； 例如，当一个子可导航对象被创建时，其活动文档的源继承自其父级的活动文档的 源，即使其活动文档的 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, optional ParseHTMLUnsafeOptions options = {});
  static Document parseHTML(DOMString html, optional SetHTMLOptions options = {});

  // 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 都有一个策略容器（一个策略容器），最初是一个新的策略 容器，其中包含适用于该 Document 的策略。

每个 Document 都有一个权限策略，它 是一个权限 策略，最初 为空。

每个 Document 都有一个模块映射， 它是一个模块映射，最初为空。

每个 Document 都有一个打开者策略， 它是一个打开者 策略，最初是一个新的打开者策略。

每个 Document 都有一个是否为初始 about:blank，它是一个 布尔值，最初为 false。

每个 Document 都有一个用于 WebDriver BiDi 的加载期间 导航 ID，它是一个导航 ID 或 null，最初为 null。

顾名思义，它用于与 WebDriver BiDi 规范交互；该规范需要获知 Document 生命周期早期阶段发生的某些事件，并以 将这些事件与创建该 Document 的导航作为 正在进行的导航时使用的原始 导航 ID关联起来的方式进行通知。最终， 在 WebDriver BiDi 认为加载过程已完成后，它会被重新设置为 null。[BIDI]

每个 Document 都有一个about 基准 URL，它是一个 URL 或 null，最初为 null。

仅为使用 "about:" 方案的 Document 填充此项。

每个 Document 都有一个bfcache 阻止详情，它是一个由 未恢复原因详情组成的 集合，最初为空。

每个 Document 都有一个打开的对话框列表，它是一个由 dialog 元素组成的列表，最初为空。

3.1.2 DocumentOrShadowRoot 接口

DOM 定义了 DocumentOrShadowRoot 混入，本规范对其 进行了扩展。

partial interface mixin DocumentOrShadowRoot {
  readonly attribute Element? activeElement;
};

3.1.3 祖先源

一个 Document 对象具有一个关联的内部 祖先源对象 列表，最初为 null。

给定一个 Document 对象 document 和一个来源网址策略 referrerPolicy，内部祖先源对象列表创建 步骤如下：

  1. 令 output 为 « »。

  2. 令 parentDoc 为 document 的容器文档。

  3. 如果 parentDoc 为 null，则返回 output。

  4. 断言：parentDoc 是完全活动的。

  5. 令 ancestorOrigins 为 parentDoc 的内部祖先源 对象 列表。

  6. 令 container 为 document 的节点可导航对象的容器。

  7. 令 masked 为 false。

  8. 如果 referrerPolicy 是 "no-referrer"，则将 masked 设置为 true。

  9. 否则，如果 referrerPolicy 是 "same-origin"，并且 parentDoc 的源与 document 的源不是同 源，则将 masked 设置为 true。

    由于混合 内容检查会阻止安全上下文环境中的非安全 上下文环境，因此对于 "strict-origin"、"strict-origin-when-cross-origin" 和 "no-referrer-when-downgrade"，无需检查安全上下文。"origin" 和 "origin-when-cross-origin" 值也无需特殊处理，因为此处 最多只会公开一个源。

  10. 如果 masked 为 true，则向 output追加一个新的不透明源。

  11. 否则，将 parentDoc 的源追加到 output。

  12. 对于每个 ancestorOrigins 中的 ancestorOrigin：

    1. 如果 masked 为 true，并且 ancestorOrigin 与 parentDoc 的源同源，则向 output追加一个新的不透明 源，然后继续。

    2. 将 ancestorOrigin追加到 output，并 将 masked 设置为 false。

      在此处将 masked 设置为 false，并不意味着后续所有 祖先的源必然都会被公开。当某个祖先文档运行这些步骤时，它们可能已在此前被遮蔽， 并且创建子文档时会使用所得列表作为起点（参见上面的步骤 5）。

  13. 返回 output。

一个 Document 对象具有一个关联的祖先源列表， 最初为 null。

给定一个 Document 对象 document，祖先源列表创建步骤如下：

  1. 令 ancestorOrigins 为 document 的内部祖先源 对象 列表。

  2. 断言：ancestorOrigins 不为 null。

  3. 令 output 为 « »。

  4. 对于每个 ancestorOrigins 中的 origin：

    1. 将 origin 的序列化结果追加到 output。

  5. 返回一个新的 DOMStringList 对象，其关联列表为 output。

考虑一个 URL 为 https://a.example/top 的顶级 浏览上下文文档：

<!doctype html>
<title>top</title>
<iframe referrerpolicy="no-referrer" src="https://a.example/child"></iframe>

子文档：

<!doctype html>
<title>child</title>
<iframe src="https://b.example/grandchild"></iframe>
<script>
 console.log([...location.ancestorOrigins]);
</script>

孙文档：

<!doctype html>
<title>grandchild</title>
<script>
 console.log([...location.ancestorOrigins]);
</script>

创建子文档的 Document 对象时， 其父级的源会被遮蔽， 因为 iframe 元素的 referrerpolicy 属性值为 "no-referrer"，即使这些文档是同源的。记录的值 为 « "null" »。

创建孙文档的 Document 对象时， 会使用子文档的 Document 对象的内部祖先源对象 列表（其中包含一个不透明源） 作为起点，并将子文档的源 添加到该列表中。因此记录的值为 « "https://a.example", "null" »。

考虑上一个示例，但顶级 文档中的 iframe 元素 没有 referrerpolicy 属性，而子文档中的 iframe 元素具有 referrerpolicy="no-referrer"。

在这种情况下，顶级文档的源会被添加 到子文档的 Document 对象的内部祖先源对象 列表中。记录的值为 « "https://a.example" »。

对于孙文档，子文档的源会被遮蔽 为一个不透明源。由于 顶级文档的源与子 文档的源同源，它也会 被遮蔽。因此记录的值为 « "null", "null" »。

在此示例中，我们说明顶级文档的源不会被遮蔽，即使存在一个源被遮蔽的 同源后代文档，因为它们之间存在一个 跨源文档。

考虑上一个示例，但顶级文档的 iframe 也具有 referrerpolicy="no-referrer"，则每个文档所得的祖先源列表关联列表 将如下所示：

3.1.4 资源元数据管理

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 属性必须返回文档的来源网址。

document.cookie [ = value ]

返回适用于该 Document 的 HTTP Cookie。如果没有 Cookie，或者 Cookie 无法应用于此资源，则返回空字符串。

可以设置该属性，以向元素的 HTTP Cookie 集合中添加新的 Cookie。

如果内容被沙盒化为不透明源（例如，位于具有 sandbox 属性的 iframe 中）， 则在获取和设置时都会抛出 "SecurityError" DOMException。

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 标识的资源的 Cookie。

使用同步的 document.cookie API 可能导致性能问题。可以改用 Cookie Store API， 因为它提供了一种异步处理 Cookie 的方式，以避免性能问题。有关更多 信息，请参阅 Cookie Store API 简介。[COOKIESTORE]

满足以下任一条件的 Document 对象是一个 拒绝 Cookie 的 Document 对象：

(This is a tracking vector.) 获取时，如果文档是拒绝 Cookie 的 Document 对象， 则用户代理必须返回空字符串。否则，如果 Document 的源 是一个不透明 源，则用户代理必须抛出 "SecurityError" DOMException。 否则，用户代理必须返回用于文档 URL 的“非 HTTP”API 的Cookie 字符串，并使用不带 BOM 的 UTF-8 解码进行解码。[COOKIES]

设置时，如果文档是拒绝 Cookie 的 Document 对象，则 用户代理必须不执行任何操作。否则，如果 Document 的源 是一个不透明 源，则用户代理必须抛出 "SecurityError" DOMException。 否则，用户代理必须像通过“非 HTTP”API 接收设置 Cookie 字符串一样处理文档的 URL， 该字符串由新值 编码为 UTF-8组成。[COOKIES] [ENCODING]

由于 cookie 属性 可以跨框架访问，因此 Cookie 的路径限制只是一种帮助管理应将哪些 Cookie 发送到网站哪些部分的工具，绝不是安全功能。

cookie 属性的获取器和 设置器会同步访问共享状态。由于不存在锁定机制，多进程用户代理中的其他浏览 上下文可以在脚本运行时修改 Cookie。例如，网站可能尝试读取一个 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 属性在获取时，必须以用户的 本地时区，按以下格式返回 Document 源文件最后 修改的日期和时间：

  1. 日期的月份部分。

  2. 一个 U+002F SOLIDUS 字符（/）。

  3. 日期的日部分。

  4. 一个 U+002F SOLIDUS 字符（/）。

  5. 日期的年份部分。

  6. 一个 U+0020 SPACE 字符。

  7. 时间的小时部分。

  8. 一个 U+003A COLON 字符（:）。

  9. 时间的分钟部分。

  10. 一个 U+003A COLON 字符（:）。

  11. 时间的秒部分。

除年份外，上述所有数字组成部分必须使用两个ASCII 数字表示十进制数字，必要时用零填充。年份必须 使用由四个或更多ASCII 数字组成的尽可能短的字符串 表示十进制数字，必要时用零填充。

Document 源文件最后 修改的日期和时间必须从所使用网络协议的 相关功能中派生，例如从文档的 HTTP `Last-Modified` 标头的值，或本地文件的文件系统 元数据中派生。如果最后修改日期和时间未知，该属性 必须以上述格式返回当前日期和时间。

3.1.5 报告文档加载状态

document.readyState

当 Document 正在加载时返回 "loading"，完成解析但仍在加载子资源时返回 "interactive"，加载完成后返回 "complete"。

当此值发生变化时，会在 Document 对象上触发 readystatechange 事件。

DOMContentLoaded 事件会在转换为 "interactive" 之后、转换为 "complete" 之前，即除 async script 元素以外的所有子资源均已加载时触发。

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。

readyState 获取器步骤是返回 this 的当前文档就绪状态。

要将 Document document 的当前文档就绪状态更新为 readinessValue：

  1. 如果 document 的当前文档就绪状态等于 readinessValue，则返回。

  2. 将 document 的当前文档就绪状态设置为 readinessValue。

  3. 如果 document 与一个HTML 解析器关联：

    1. 令 now 为根据 document 的相关全局对象给出的当前高分辨率时间。

    2. 如果 readinessValue 是 "complete"，并且 document 的加载计时信息的DOM 完成时间 为 0，则 将 document 的加载计时信息的DOM 完成 时间设置为 now。

    3. 否则，如果 readinessValue 是 "interactive"，并且 document 的加载计时信息的DOM 交互 时间为 0， 则将 document 的加载计时信息的DOM 交互 时间设置为 now。

  4. 在 document 上触发一个 事件，其名称为 readystatechange。

如果一个 Document 与一个尚未被停止或中止的 HTML 解析器或XML 解析器关联， 则称其具有一个活动解析器。

一个 Document 具有一个 文档加载 计时信息加载计时信息。

一个 Document 具有一个 文档 卸载计时信息上一个 文档卸载计时。

一个 Document 具有一个布尔值 是否通过跨源重定向创建， 最初为 false。

文档加载计时信息结构体具有以下项目：

导航开始 时间（默认值为 0）
一个数字
DOM 交互 时间（默认值为 0）
DOM 内容加载事件开始时间 （默认值为 0）
DOM 内容 加载事件结束时间（默认值为 0）
DOM 完成时间 （默认值为 0）
load 事件开始 时间（默认值为 0）
load 事件结束时间 （默认值为 0）
DOMHighResTimeStamp 值

文档卸载计时信息结构体具有以下项目：

unload 事件开始 时间（默认值为 0）
unload 事件结束 时间（默认值为 0）
DOMHighResTimeStamp 值

3.1.6 渲染阻塞机制

每个 Document 都有一个 渲染阻塞元素集合，它是一个元素的集合，最初为空集合。

如果一个 Document document 的内容类型是 "text/html"，并且 document 的body 元素为 null，则该文档 允许添加渲染阻塞元素。

如果以下两项都为 true，则一个 Document document 是渲染受阻的：

如果元素 el 的节点文档 document 是渲染受阻的，并且 el 位于 document 的渲染阻塞元素集合中， 则 el 是渲染阻塞的。

要在元素 el 上阻塞渲染：

  1. 令 document 为 el 的节点文档。

  2. 如果 document允许添加渲染阻塞 元素，则将 el追加到 document 的 渲染阻塞元素集合。

要在元素 el 上解除渲染阻塞：

  1. 令 document 为 el 的节点文档。

  2. 从 document 的渲染阻塞元素集合中移除 el。

每当一个渲染阻塞元素 el 变为与浏览上下文断开连接， 或者 el 的blocking 属性的值 发生更改，使 el 不再是可能 阻塞渲染的元素时，则在 el 上解除 渲染阻塞。

3.1.7 DOM 树访问器

如果文档的文档元素是一个 html 元素，则它是该文档的 html 元素，否则为 null。

document.head

Document/head

所有当前引擎均支持。

Firefox4+Safari5+Chrome4+
Opera11+Edge79+
Edge（旧版）12+Internet Explorer9+
Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+

返回head 元素。

如果存在作为html 元素子元素的 head 元素，则文档的 head 元素是其中第一个，否则为 null。

head 属性 在获取时必须返回文档的head 元素（一个 head 元素或 null）。

document.title [ = value ]

返回文档的标题；对于 HTML，该标题由title 元素给出； 对于 SVG，则由 SVG title 元素给出。

可以设置该属性以更新文档标题。如果没有可供更新的适当元素，则忽略 新值。

如果文档中存在 title 元素， 则文档的title 元素是按树顺序排列的第一个此类元素，否则为 null。

Document/title

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge（旧版）12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

title 属性 在获取时必须运行以下 算法：

  1. 如果文档元素是一个SVG svg 元素，则 令 value 为该文档 元素的第一个 SVG title 子元素的子 文本内容。

  2. 否则，令 value 为子 文本内容；该内容来自title 元素，或者如果title 元素为 null，则为空字符串。

  3. 对 value 中的 ASCII 空白执行去除并折叠。

  4. 返回 value。

设置时，必须运行以下列表中第一个匹配条件所对应的步骤：

如果文档元素是一个SVG svg 元素

  1. 如果存在一个作为文档元素子元素的 SVG title 元素， 则令 element 为第一个这样的元素。

  2. 否则：

    1. 令 element 为创建元素的结果， 给定文档 元素的节点 文档、"title" 和 SVG 命名空间。

    2. 将 element 作为文档 元素的第一个 子节点插入。

  3. 在 element 中使用给定值执行字符串全部替换。

如果文档元素位于HTML 命名空间中

  1. 如果title 元素为 null，并且head 元素也为 null，则返回。

  2. 如果title 元素不为 null，则令 element 为 title 元素。

  3. 否则：

    1. 令 element 为创建元素的结果， 给定文档 元素的节点 文档、"title" 和 HTML 命名空间。

    2. 将 element追加到head 元素。

  4. 在 element 中使用给定值执行字符串全部替换。

否则

不执行任何操作。

document.body [ = value ]

Document/body

所有当前引擎均支持。

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）。 设置时，必须运行以下算法：

  1. 如果新值不是 body 或 frameset 元素，则抛出 "HierarchyRequestError" DOMException。
  2. 否则，如果新值与body 元素相同，则返回。
  3. 否则，如果body 元素 不为 null，则在body 元素的父节点中，使用新值替换body 元素 并返回。
  4. 否则，如果不存在文档元素， 则抛出 "HierarchyRequestError" DOMException。
  5. 否则，body 元素为 null，但存在一个文档元素。将新值追加到 文档元素。

body 获取器返回的值 并不总是传递给设置器的值。

在此示例中，设置器成功插入了一个 body 元素（尽管这是 不符合规范的，因为 SVG 不允许将 body 作为 SVG svg 的子元素）。但是，获取器会返回 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， 其中包含 Document 中的 img 元素。

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， 其中包含 Document 中的 embed 元素。

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， 其中包含 Document 中具有 href 属性的 a 和 area 元素。

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， 其中包含 Document 中的 form 元素。

document.scripts

Document/scripts

所有当前引擎均支持。

Firefox9+Safari3+Chrome1+
Opera12.1+Edge79+
Edge（旧版）12+Internet Explorer4+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回一个 HTMLCollection， 其中包含 Document 中的 script 元素。

images 属性必须返回一个以 Document 节点为根的 HTMLCollection， 其过滤器仅匹配 img 元素。

embeds 属性必须返回一个以 Document 节点为根的 HTMLCollection， 其过滤器仅匹配 embed 元素。

plugins 属性必须返回与 embeds 属性所返回对象相同的对象。

links 属性必须返回一个以 Document 节点为根的 HTMLCollection， 其过滤器仅匹配具有 href 属性的 a 元素，以及具有 href 属性的 area 元素。

forms 属性必须返回一个以 Document 节点为根的 HTMLCollection， 其过滤器仅匹配 form 元素。

scripts 属性必须返回一个以 Document 节点为根的 HTMLCollection， 其过滤器仅匹配 script 元素。

collection = document.getElementsByName(name)

Document/getElementsByName

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera5+Edge79+
Edge（旧版）12+Internet Explorer5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

返回一个 NodeList， 其中包含 Document 中 具有值为 name 的 name 属性的元素。

getElementsByName(elementName) 方法 的步骤是返回一个实时 NodeList， 其中包含该文档中所有 name 属性值与 elementName 参数完全相同的HTML 元素，并按树顺序排列。当再次使用相同参数在一个 Document 对象上调用该 方法时，用户代理可以返回与先前调用返回的对象相同的对象。在其他情况下，必须返回一个新的 NodeList 对象。

document.currentScript

Document/currentScript

所有当前引擎均支持。

Firefox4+Safari8+Chrome29+
Opera?Edge79+
Edge（旧版）12+Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回当前正在执行的 script 元素或 SVG script 元素， 前提是该元素表示一个经典脚本。在可重入脚本执行的情况下， 返回尚未执行完毕的脚本中最近开始执行的那个。

如果 Document 当前未 执行 script 或 SVG script 元素（例如，因为正在运行的脚本是事件 处理器或超时回调），或者当前正在执行的 script 或 SVG script 元素表示一个模块脚本，则返回 null。

currentScript 属性在获取时，必须返回 最近一次为其设置的值。创建 Document 时，必须将 currentScript 初始化为 null。

此 API 在实现者和标准社区中已不再受青睐，因为它会全局公开 script 或 SVG script 元素。因此， 它在较新的上下文中不可用，例如运行模块 脚本时，或在影子树中运行脚本时。 我们正在研究一种用于在这些上下文中识别正在运行的脚本的新解决方案，该解决方案不会使其 全局可用：参见 议题 #1013。

Document 接口支持命名 属性。一个 Document 对象 document 在任何时刻的受支持属性名称由以下内容组成，并根据提供这些名称的元素按 树顺序排列，忽略后续重复项； 当同一元素同时提供二者时，来自 id 属性的值位于来自 name 属性的值之前：

要为一个 Document确定命名属性 name 的值，用户 代理必须返回使用以下步骤获得的值：

  1. 令 elements 为名称为 name，并且位于以 Document 为根的文档 树中的命名 元素列表。

    至少会有一个这样的元素，否则该算法不会被 Web IDL 调用。

  2. 如果 elements 仅有一个元素，并且该元素是一个 iframe 元素，并且该 iframe 元素的内容可导航对象不为 null，则 返回该元素的内容可导航对象的活动 WindowProxy。

  3. 否则，如果 elements 仅有一个元素，则返回该元素。

  4. 否则，返回一个以 Document 节点为根的 HTMLCollection， 其过滤器仅匹配名称为 name 的命名元素。

就上述算法而言，名称为 name 的命名元素是以下任一种元素：

如果一个 embed 或 object 元素 没有已公开的 object 祖先， 并且对于 object 元素， 它还满足未显示其后备 内容，或者没有 object 或 embed 后代， 则称该元素是已公开的。

Document 接口上的 dir 属性与 dir 内容属性一同定义。

3.2 元素

3.2.1 语义

HTML 中的元素、属性和属性值由本规范定义为具有 特定含义（语义）。例如，ol 元素表示一个有序列表， 而 lang 属性表示内容的语言。

这些定义使 HTML 处理器（例如 Web 浏览器或搜索引擎）能够在作者可能没有 考虑过的各种上下文中呈现和使用文档与应用程序。

作为一个简单示例，考虑一个仅考虑桌面 计算机 Web 浏览器的作者编写的网页：

<!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" 属性，用户代理会更新渲染以显示 进度的变化。

3.2.2 DOM 中的元素

DOM 中表示HTML 元素的节点必须 实现并向脚本公开本规范相关章节中为其列出的接口。这包括 HTML 元素位于 XML 文档中的情况，即使 这些文档处于其他上下文中（例如位于 XSLT 转换中）。

DOM 中的元素表示事物；也就是说，它们具有 内在的含义，也称为语义。

例如，ol 元素表示一个有序 列表。

可以通过某种方式显式或隐式地引用元素。 显式引用 DOM 中元素的一种方式是为 元素提供一个 id 属性，然后创建一个 超链接，并将该 id 属性的值用作该 超链接的 href 属性值中的片段。 但是，引用并不一定需要超链接；任何能够指代相关元素的方式都可以。

考虑以下 figure 元素，该元素具有 一个 id 属性： 

<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 元素，例如：

所有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+

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+

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+

HTMLElement/inert

所有当前引擎均支持。

Firefox112+Safari15.5+Chrome102+
Opera?Edge102+
Edge（旧版）?Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLElement/accessKey

所有当前引擎均支持。

Firefox5+Safari6+Chrome17+
Opera12.1+Edge79+
Edge（旧版）12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.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, Reflect] attribute DOMString title;
  [CEReactions, Reflect] attribute DOMString lang;
  [CEReactions] attribute boolean translate;
  [CEReactions] attribute DOMString dir;

  // user interaction
  [CEReactions] attribute (boolean or unrestricted double or DOMString)? hidden;
  [CEReactions, Reflect] attribute boolean inert;
  undefined click();
  [CEReactions, Reflect] attribute DOMString accessKey;
  readonly attribute DOMString accessKeyLabel;
  [CEReactions] attribute boolean draggable;
  [CEReactions] attribute boolean spellcheck;
  [CEReactions, ReflectSetter] attribute DOMString writingSuggestions;
  [CEReactions, ReflectSetter] attribute DOMString autocapitalize;
  [CEReactions] attribute boolean autocorrect;

  [CEReactions] attribute [LegacyNullToEmptyString] DOMString innerText;
  [CEReactions] attribute [LegacyNullToEmptyString] DOMString outerText;

  ElementInternals attachInternals();

  // The popover API
  undefined showPopover(optional ShowPopoverOptions options = {});
  undefined hidePopover();
  boolean togglePopover(optional (TogglePopoverOptions or boolean) options = {});
  [CEReactions] attribute DOMString? popover;

  [CEReactions, Reflect, ReflectRange=(0, 8)] attribute unsigned long headingOffset;
  [CEReactions, Reflect] attribute boolean headingReset;
};

dictionary ShowPopoverOptions {
  HTMLElement source;
};

dictionary TogglePopoverOptions : ShowPopoverOptions {
  boolean force;
};

HTMLElement includes GlobalEventHandlers;
HTMLElement includes ElementContentEditable;
HTMLElement includes HTMLOrSVGOrMathMLElement;

[Exposed=Window]
interface HTMLUnknownElement : HTMLElement {
  // Note: intentionally no [HTMLConstructor]
};

HTMLElement 接口包含 与许多不同功能相关的方法和属性，因此该接口的成员在本规范的 各个不同章节中进行说明。

对于 HTML 命名空间中名称为 name 的元素，其元素接口按以下方式确定：

  1. 如果 name 是 applet、bgsound、blink、 isindex、keygen、multicol、nextid 或 spacer，则返回 HTMLUnknownElement。

  2. 如果 name 是 acronym、basefont、big、 center、nobr、noembed、noframes、 plaintext、rb、rtc、strike 或 tt，则返回 HTMLElement。

  3. 如果 name 是 listing 或 xmp，则返回 HTMLPreElement。

  4. 否则，如果本规范为与本地名称 name 对应的元素 类型定义了适当接口，则返回该接口。

  5. 如果其他 适用规范为 name 定义了适当接口， 则返回它们所定义的接口。

  6. 如果 name 是一个有效自定义元素名称，则返回 HTMLElement。

  7. 返回 HTMLUnknownElement。

对于有效自定义 元素名称，使用 HTMLElement 而不是 HTMLUnknownElement， 是为了确保未来任何可能的升级只会导致元素的原型链发生 线性转换，即从 HTMLElement 转换为其子类， 而不是发生横向转换，即从 HTMLUnknownElement 转换为 不相关的子类。

HTML、SVG 和 MathML 元素之间共享的功能使用 HTMLOrSVGOrMathMLElement 接口混入：[SVG] [MATHML]

Global_attributes/autofocus

仅一个引擎支持。

Firefox🔰 1+Safari🔰 4+Chrome79+
Opera66+Edge79+
Edge（旧版）否Internet Explorer🔰 10+
Firefox Android?Safari iOS?Chrome Android?WebView Android79+Samsung Internet?Opera Android57+ 
interface mixin HTMLOrSVGOrMathMLElement {
  [SameObject] readonly attribute DOMStringMap dataset;
  attribute DOMString nonce; // intentionally no [CEReactions]

  [CEReactions, Reflect] attribute boolean autofocus;
  [CEReactions, ReflectSetter] attribute long tabIndex;
  undefined focus(optional FocusOptions options = {});
  undefined blur();
};

既不是 HTML 元素、也不是 SVG 元素或 MathML 元素的一个元素示例，可以按 以下方式创建：

const el = document.createElementNS("some namespace", "example");
console.assert(el.constructor === Element);

3.2.3 HTML 元素构造函数

为了支持自定义元素功能，所有 HTML 元素都具有 特殊的构造函数行为。这通过 [HTMLConstructor] IDL 扩展属性表示。它表示给定接口的接口对象 在被调用时将具有特定行为，具体定义如下。

[HTMLConstructor] 扩展属性不得接受任何 参数，并且只能出现在构造函数 操作上。它在一个构造函数操作上只能出现一次，并且接口必须 仅包含这个带注解的构造函数操作，而不能包含其他构造函数操作。带注解的 构造函数操作必须声明为不接受任何参数。

声明了带有 [HTMLConstructor] 扩展属性注解的构造函数操作的接口，具有以下 重写构造函数步骤：

  1. 如果 NewTarget 等于活动函数 对象，则抛出一个 TypeError。

    当使用一个元素 接口作为自定义元素的构造函数来定义该元素时，可能会出现这种情况：

    customElements.define("bad-1", HTMLButtonElement);
new HTMLButtonElement();          // (1)
document.createElement("bad-1");  // (2)

    在这种情况下，在执行 HTMLButtonElement 时（无论是如 (1) 中那样 显式执行，还是如 (2) 中那样隐式执行），活动 函数对象和 NewTarget 都是 HTMLButtonElement。 如果不存在此项检查， 就可以创建一个局部名称为 bad-1 的 HTMLButtonElement 实例。

  2. 令 registry 为 null。

  3. 如果周围代理的活动自定义元素构造函数 映射[NewTarget] 存在，则将 registry 设置为周围 代理的活动自定义元素 构造函数映射[NewTarget]。

  4. 否则，将 registry 设置为当前全局对象的关联的 Document的自定义元素注册表。

  5. 令 definition 为 registry 的自定义元素 定义集中构造函数等于 NewTarget 的项。如果不存在这样的项，则抛出一个 TypeError。

    由于 registry 的自定义元素 定义集中不可能存在构造函数为 undefined 的项，因此 此 步骤还会阻止将 HTML 元素构造函数作为函数调用（因为在这种情况下 NewTarget 将为 undefined）。

  6. 令 isValue 为 null。

  7. 如果 definition 的局部 名称等于 definition 的名称（即 definition 用于 一个自主 自定义元素）：

    1. 如果活动 函数对象不是 HTMLElement，则抛出一个 TypeError。

      当自定义元素被定义为不扩展任何局部名称，但却 继承自一个非 HTMLElement 类时，可能会出现这种情况：

      customElements.define("bad-2", class Bad2 extends HTMLParagraphElement {});

      在这种情况下，在构造 Bad2 实例时发生的 （隐式）super() 调用期间，活动 函数 对象是 HTMLParagraphElement， 而不是 HTMLElement。

  8. 否则（即 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. 将 isValue 设置为 definition 的名称。

  9. 如果 definition 的构造栈 为空：

    1. 令 element 为在内部创建一个实现该接口的新 对象的结果， 该接口是活动 函数对象所对应的接口，并给定当前 realm和NewTarget。

    2. 将 element 的节点 文档设置为当前全局 对象的关联的 Document。

    3. 将 element 的命名空间设置为 HTML 命名空间。

    4. 将 element 的命名空间 前缀设置为 null。

    5. 将 element 的局部名称设置为 definition 的局部 名称。

    6. 将 element 的自定义元素 注册表设置为 registry。

    7. 将 element 的自定义元素状态设置为“custom”。

    8. 将 element 的自定义 元素定义设置为 definition。

    9. 将 element 的is 值设置为 isValue。

    10. 返回 element。

    当作者脚本直接构造一个新的自定义元素时会出现这种情况，例如 通过 new MyCustomElement()。

  10. 令 prototype 为 ? Get(NewTarget, "prototype")。

  11. 如果 prototype 不是对象：

    1. 令 realm 为 ? GetFunctionRealm(NewTarget)。

    2. 将 prototype 设置为 realm 的接口原型对象，其接口与活动 函数 对象的接口相同。

    活动 函数对象的 realm 可能不是 realm，因此这里使用跨 realm 的更一般概念“相同接口”； 我们并非在查找接口 对象是否相等。这种回退行为，包括使用 NewTarget 的 realm 并 在其中查找适当的原型，旨在匹配 JavaScript 内置对象和 Web IDL 的在内部创建一个实现 接口的新对象算法的类似行为。

  12. 令 element 为 definition 的构造 栈中的最后一个条目。

  13. 如果 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();
  }
}

  14. 执行 ? element.[[SetPrototypeOf]](prototype)。

  15. 将 definition 的构造栈中的最后一个条目 替换为一个 已构造 标记。

  16. 返回 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 role 和 aria-* 属性的一致性要求 在 HTML 中的 ARIA 中定义。[ARIA] [ARIAHTML]

对于实现者：实现无障碍 API 语义的用户代理要求 在 HTML 无障碍 API 映射 中定义。[HTMLAAM]

净化

每个元素的净化信息定义了其净化 类别，该类别会影响元素在净化期间的处理方式。它还可以将元素的一个或多个属性定义为 导航 URL 属性。

DOM 接口

此类元素必须实现的 DOM 接口的规范性定义。

随后是对该元素所表示内容的描述，以及 可能适用于作者和实现的任何其他规范性一致性标准。有时还会包含示例。

3.2.4.1 属性

属性值是一个字符串。除非另有规定， HTML 元素上的属性值可以是任何字符串 值，包括空字符串，并且对此类属性值中可以指定的文本没有任何限制。

3.2.5 内容模型

本规范中定义的每个元素都有一个内容模型：对该元素预期 内容的描述。一个HTML 元素必须具有符合该元素内容模型中所述要求的内容。 元素的内容是其在 DOM 中的子级。

元素之间始终允许存在ASCII 空白。用户代理将源标记中元素之间的这些 字符表示为 DOM 中的 Text 节点。空的 Text 节点以及 仅由这些字符序列组成的 Text 节点被视为 元素间空白。

在确定元素的内容是否符合该元素的内容模型时，必须忽略元素间空白、 注释节点和处理指令节点；在遵循定义文档和元素语义的算法时，也必须 忽略它们。

因此，如果元素 A 和 B 具有相同的父节点，并且它们之间不存在其他元素节点或 Text 节点（ 元素间空白除外）， 则称元素 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 “无”内容模型

当元素的内容模型为无时， 该元素不得包含任何 Text 节点（元素间空白除外） 或元素节点。

为方便起见，大多数内容模型为“无”的 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 短语内容

短语内容是文档中的文本，以及在 段落内部级别标记该文本的元素。连续的短语内容形成段落。

大多数被归类为短语内容的元素只能包含 本身也被归类为短语内容的元素，而不能包含任意流式内容。

在内容模型的上下文中，文本表示无内容， 或者 Text 节点。文本有时单独用作内容 模型，但它也属于短语 内容，并且可以是元素间 空白（如果 Text 节点为空或仅包含ASCII 空白）。

Text 节点和属性值必须由标量 值组成，但不包括非字符，以及除ASCII 空白之外的控制字符。 本规范根据 Text 节点和属性值所处的精确上下文，对其确切值施加了额外约束。

3.2.5.2.6 嵌入内容

嵌入内容是将 另一资源导入文档的内容，或将另一词汇表中的内容 插入文档的内容。

来自 HTML 命名空间以外的命名空间， 并且传达内容而非元数据的元素，就本规范中定义的内容模型而言，属于 嵌入内容。（例如 MathML 或 SVG。）

一些嵌入内容元素可以具有回退内容：当外部资源 无法使用时（例如因为其格式不受支持）所使用的内容。 元素定义会说明回退内容是什么（如果有）。

3.2.5.2.7 交互式内容

交互式内容是专门用于 用户交互的内容。

3.2.5.2.8 可感知内容

一般来说，内容模型允许任何流式内容或 短语内容的元素，应在其内容中至少具有一个属于可感知内容且 未指定 hidden 属性的节点。

可感知内容通过提供 非空的后代文本，或用户可以 听到的内容（audio 元素）、可以查看的内容 （video、img 或 canvas 元素），或 可以通过其他方式交互的内容（例如交互式表单 控件），使元素成为非空元素。

但是，此要求并非硬性要求，因为在许多情况下元素 可以合法地为空，例如，当它被用作稍后将由脚本填充的占位符时， 或当该元素是模板的一部分，并且在大多数页面上会被填充，但 在某些页面上并不相关时。

鼓励一致性检查器提供一种机制，帮助作者查找 未能满足此要求的元素，作为创作辅助。

以下元素属于可感知内容：

3.2.5.2.9 脚本支持元素

脚本支持元素是自身不表示任何内容（即不会被渲染），但用于 支持脚本的元素，例如为用户提供功能。

以下元素是脚本支持元素：

3.2.5.3 透明内容模型

一些元素被描述为透明的；其内容模型的描述中包含“透明”。 透明元素的内容模型 派生自其父元素的内容模型：内容模型中“透明”部分所要求的元素，与透明元素所在位置对应的 父元素内容模型部分所要求的元素相同。

例如，位于 ruby 元素内的 ins 元素不能包含 rt 元素，因为 ruby 元素内容模型中允许 ins 元素的部分， 是允许短语 内容的部分，而 rt 元素不属于短语内容。

在某些情况下，当透明元素彼此嵌套时，必须 迭代应用此过程。

考虑以下标记片段：

<p><object><ins><map><a href="/">Apples</a></map></ins></object></p>

要检查是否允许在 a 元素内放置“Apples”，需要检查 内容模型。a 元素的内容模型是透明的，map 元素也是如此，ins 元素也是如此， object 元素也是如此。 object 元素 位于 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>

其中有五个段落：

  1. 内容为“You can play with my cat simulator. object I'm quite proud of it.”的段落，其中 object 是 object 元素。
  2. 内容为“To see the cat simulator, use one of the following links:”的段落。
  3. 内容为“Download simulator file”的段落。
  4. 内容为“Use online simulator”的段落。
  5. 内容为“Alternatively, upgrade to the Mellblom Browser.”的段落。

第一个段落被其他四个段落重叠。支持“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 元素的属性。当本规范提到具有这些属性的元素时，不得将 未被定义为具有这些属性的其他命名空间中的元素视为 具有这些属性的元素。

例如，在以下 XML 片段中，尽管“bogus”元素 具有字面名称为“dir”的属性，但它并不具有本规范所定义的 dir 属性。因此，最内层 span 元素的方向性为“rtl”，它通过 “bogus”元素间接继承自 div 元素。 

<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

所有当前引擎均支持。

Firefox63+Safari10+Chrome53+
Opera?Edge79+
Edge（旧版）否Internet 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 属性的值中 推导出特定含义。

对于 slot 属性， 没有专门针对HTML 元素的一致性要求。

slot 属性用于为元素 分配 插槽：具有 slot 属性的元素会被 分配到由 slot 元素创建的插槽， 前提是该元素的 name 属性值与该 slot 属性值匹配——但只有当该 slot 元素位于一个影子树中，并且该影子树 根的宿主 具有相应的 slot 属性值时才是如此。

为了使辅助技术产品能够公开比仅使用 HTML 元素和属性时 更细粒度的接口，可以指定一组用于辅助技术产品的 注解（即 ARIA role 和 aria-* 属性）。 [ARIA]

以下事件处理器内容属性可以在 任何HTML 元素上指定：

标有星号的属性在 body 元素上指定时具有不同含义， 因为这些元素公开了 Window 对象中同名的事件处理器。

尽管这些属性适用于所有元素，但它们并非对所有元素都有用。 例如，只有媒体元素才会接收到 用户代理触发的 volumechange 事件。

自定义数据属性（例如 data-foldername 或 data-msgid）可以在任何 HTML 元素上指定， 以存储页面特有的自定义数据、状态、注解及类似信息。

在HTML 文档中，HTML 命名空间中的元素 可以指定一个 xmlns 属性，当且仅当其值恰好为 “http://www.w3.org/1999/xhtml”。这不适用于XML 文档。

在 HTML 中，xmlns 属性完全不起作用。 它基本上只是一个护身符。允许使用它，仅仅是为了让往返 XML 的迁移稍微容易一些。 当由HTML 解析器解析时，该属性最终 不属于任何命名空间。在 XML 中，该属性是命名空间声明机制的一部分，并且始终属于 “http://www.w3.org/2000/xmlns/”命名空间。

XML 还允许在XML 文档中的任何元素上，使用位于XML 命名空间中的 xml:space 属性。该属性对HTML 元素没有影响，因为 HTML 的默认 行为是保留空白。[XML]

无法在 text/html 语法中， 对HTML 元素上的 xml:space 属性进行序列化。

3.2.6.1 title 属性

Global_attributes/title

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

title 属性 表示元素的提示信息，例如适合在 工具提示中显示的信息。对于链接，这可以是目标资源的标题或描述；对于图像， 可以是图像署名或图像描述；对于段落，可以是脚注 或对文本的评论；对于引文，可以是有关来源的更多信息；对于 交互式内容，可以是 元素的标签或使用说明；等等。其值为文本。

目前不鼓励依赖 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 属性定义了上述语义之外的 其他语义。

元素的提示信息是以下算法 返回的值；一旦返回一个值，算法即中止。当算法返回 空字符串时，表示不存在提示信息。

  1. 如果元素具有 title 属性，则返回对其值运行规范化 换行符的结果。

  2. 如果元素具有父元素，则返回父元素的提示 信息。

  3. 返回空字符串。

当元素具有提示信息时，用户代理应告知用户， 否则这些信息将无法被发现。

3.2.6.2 lang 和 xml:lang 属性

Global_attributes/lang

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

lang 属性 （不在任何命名空间中）指定元素内容以及该元素包含文本的任何 属性的主要语言。其值必须是有效的 BCP 47 语言标签，或 空字符串。将该属性设置为空字符串表示主要语言 未知。[BCP47]

XML 命名空间中的 lang 属性在 XML 中定义。 [XML]

如果元素省略这些属性，则此元素的语言与其父元素的 语言相同（如果存在父元素），但影子树中的 slot 元素除外。

不在任何命名空间中的 lang 属性可以用于任何HTML 元素。

XML 命名空间中的lang 属性可以用于XML 文档中的HTML 元素， 如果相关规范允许，也可以用于其他命名空间中的元素（特别是， MathML 和 SVG 允许在其元素上指定XML 命名空间中的lang 属性）。 如果不在任何命名空间中的 lang 属性 和XML 命名空间中的lang 属性同时指定在同一 元素上，则在以ASCII 不区分大小写的方式进行比较时，它们必须具有完全相同的值。

作者不得在HTML 文档的HTML 元素上使用XML 命名空间中的lang 属性。 为了方便往返 XML 的迁移，作者可以在HTML 文档中的HTML 元素上指定一个不在任何 命名空间中、没有前缀且字面局部名称为“xml:lang”的属性， 但仅当同时指定了不在任何命名空间中的 lang 属性时，才可以指定此类属性，并且在以ASCII 不区分大小写的方式进行比较时，两个属性必须具有相同的值。

不在任何命名空间中、没有前缀且字面局部名称为“xml:lang”的属性 对语言处理没有影响。

为了确定节点的语言，用户代理必须 使用以下列表中第一个适用的步骤：

如果节点是一个设置了XML 命名空间中的lang 属性的元素

使用该属性的值。

如果节点是一个HTML 元素或SVG 命名空间中的元素，并且设置了一个不在任何命名空间中的 lang 属性

使用该属性的值。

如果节点的父级是一个影子根

使用该影子根的宿主的语言。

如果节点的父元素不为 null

使用该父元素的语言。

否则

如果设置了由 pragma 设置的默认语言，则 该语言就是节点的语言。如果未设置由 pragma 设置的默认语言， 则必须改用更高级别协议（例如 HTTP）提供的语言信息（如果有）作为最终回退 语言。在不存在任何此类语言信息以及更高级别协议 报告多种语言的情况下，节点的语言未知，相应的 语言标签为空字符串。

如果所得值不是可识别的语言标签，则必须将其视为一种具有给定语言标签的 未知语言，并且与所有其他语言不同。为了与其他需要语言标签的服务 进行往返传输或通信，用户代理应原样传递未知语言标签，并将其标记为 BCP 47 语言标签，以便后续服务不会将该数据解释为另一种语言描述。 [BCP47]

因此，例如，具有 lang="xyzzy" 的元素会被 选择器 :lang(xyzzy)（例如在 CSS 中）匹配，但不会被 :lang(abcde) 匹配，即使二者同样无效。类似地，如果 Web 浏览器和屏幕阅读器协同工作，并就元素的语言进行通信， 即使浏览器知道“xyzzy”无效，也会告知屏幕阅读器该语言是“xyzzy”， 以防屏幕阅读器实际上支持具有该标签的语言。 即使屏幕阅读器同时支持 BCP 47 和另一种对语言名称进行编码的语法， 并且在另一种语法中字符串“xyzzy”是表示白俄罗斯语的一种方式， 屏幕阅读器随后开始将文本视为白俄罗斯语也是不正确的，因为 BCP 47 代码并不使用“xyzzy”表示白俄罗斯语（BCP 47 使用代码“be” 表示白俄罗斯语）。

如果所得值为空字符串，则必须将其解释为节点的 语言明确未知。

用户代理可以使用元素的语言来确定适当的处理或渲染方式（例如， 选择适当的字体或发音、选择词典，或确定日期选择器等表单控件的 用户界面）。

3.2.6.3 translate 属性

Global_attributes/translate

所有当前引擎均支持。

Firefox111+Safari6+Chrome19+
Opera?Edge79+
Edge（旧版）?Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

translate 属性用于指定在页面本地化时，是否应翻译元素的属性值及其 Text 节点子级的值，或者是否应 保持它们不变。它是一个枚举属性，具有 以下关键字和状态：

关键字 状态 简要描述
yes 是 将翻译模式设置为启用翻译。
no 否 将翻译模式设置为不翻译。

该属性的缺失 值默认值和无效值默认值均为继承状态，其空值默认值为 是 状态。

每个元素（甚至非 HTML 元素）都有一个翻译模式，它处于 启用翻译状态或 不翻译状态。如果一个HTML 元素的 translate 属性处于是状态，则该元素的 翻译模式处于启用翻译状态； 否则，如果该元素的 translate 属性处于否 状态，则该元素的翻译 模式 处于不翻译状态。否则， 该元素的 translate 属性处于 继承 状态，或者该元素不是HTML 元素，因而没有 translate 属性；在 这两种情况下，如果该元素有父元素，则该元素的 翻译模式与父元素处于相同 状态；如果该元素的父元素为 null，则处于启用翻译 状态。

当元素处于启用翻译状态时，在 页面本地化时，应翻译元素的可翻译 属性及其 Text 节点子级的值。

当元素处于不翻译状态时，在页面本地化时，应保持元素的属性值及其 Text 节点子级的值不变，例如因为该元素包含某人的姓名或计算机程序的名称。

以下属性是可翻译属性：

其他规范可以定义同样属于可翻译 属性的其他属性。例如，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

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge（旧版）?Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

关键字 状态 简要描述
ltr LTR 元素的内容是显式进行方向隔离的从左到右文本。
rtl RTL 元素的内容是显式进行方向隔离的从右到左文本。
auto 自动 元素的内容是显式进行方向隔离的文本，但其方向 将以编程方式使用元素的内容来确定（如下文 所述）。

自动 状态所使用的启发式方法非常粗略 （它只是查找第一个具有强方向性的字符，其方式类似于 双向算法中的段落级别确定）。强烈建议作者仅在文本方向确实未知， 并且无法应用更好的服务器端启发式方法时，才将此值作为最后的手段。 [BIDI]

对于 textarea 和 pre 元素，该启发式方法 按段落级别应用。

该属性的缺失值 默认值和无效 值默认值均为未定义状态。

元素（任何元素，而不仅仅是 HTML 元素）的方向性为“ltr”或“rtl”。给定元素 element， 要计算其方向性，根据 element 的 dir 属性状态进行分支：

LTR

返回“ltr”。

RTL

返回“rtl”。

自动

  1. 令 result 为 element 的自动方向性。

  2. 如果 result 为 null，则返回“ltr”。

  3. 返回 result。

未定义
如果 element 是一个 bdi 元素

  1. 令 result 为 element 的自动方向性。

  2. 如果 result 为 null，则返回“ltr”。

  3. 返回 result。

如果 element 是一个 input 元素，且其 type 属性处于电话状态

返回“ltr”。

否则

返回 element 的父级 方向性。

由于 dir 属性仅为 HTML 元素定义，因此它不能出现在 其他命名空间中的元素上。因此，其他命名空间中的元素最终始终使用父级方向性。

自动方向性表单关联元素 是：

给定元素 element，要计算其自动方向性：

  1. 如果 element 是一个自动方向性表单关联 元素：

    1. 如果 element 的值包含 双向字符类型为 AL 或 R 的字符，并且在该字符之前的元素值中任何位置 都没有双向字符类型为 L 的字符，则返回“rtl”。 [BIDI]

    2. 如果 element 的值 不是空字符串，则返回“ltr”。

    3. 返回 null。

  2. 如果 element 是一个 slot 元素，其根是一个 影子根，并且 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。

  3. 返回 element 的所含文本自动方向性，并将 canExcludeRoot 设置为 false。

给定元素 element 和一个布尔值 canExcludeRoot，要计算该元素的所含文本自动方向性：

  1. 按照树 顺序，对 element 的后代中的每个节点 descendant：

    1. 如果以下任一项

      • descendant
      • descendant 的任何祖先元素，且该祖先元素是 element 的后代
      • 如果 canExcludeRoot 为 true，则为 element

      是以下任一项

      则继续。

    2. 如果 descendant 是一个 slot 元素，其根是一个 影子根，则返回该影子根的宿主的方向性。

    3. 如果 descendant 不是一个 Text 节点，则 继续。

    4. 令 result 为 descendant 的文本节点方向性。

    5. 如果 result 不为 null，则返回 result。

  2. 返回 null。

给定一个 Text 节点 text，要计算其文本节点方向性：

  1. 如果 text 的数据不包含双向字符类型 为 L、AL 或 R 的码位，则返回 null。 [BIDI]

  2. 令 codePoint 为 text 的数据中第一个双向字符类型为 L、AL 或 R 的码位。

  3. 如果 codePoint 的双向字符类型为 AL 或 R，则返回“rtl”。

  4. 如果 codePoint 的双向字符类型为 L，则返回“ltr”。

给定元素 element，要计算其父级方向性：

  1. 令 parentNode 为 element 的父节点。

  2. 如果 parentNode 是一个影子根，则 返回 parentNode 的宿主的方向性。

  3. 如果 parentNode 是一个元素，则返回 parentNode 的方向性。

  4. 返回“ltr”。

此属性具有涉及双向算法的 渲染要求。

当一个HTML 元素的属性文本将以某种方式包含在 渲染中时，该属性的方向性按照以下列表中 第一个适用的步骤集合确定：

如果该属性是支持方向性的属性，并且元素的 dir 属性处于自动 状态

按照逻辑顺序查找属性值中第一个双向字符类型为 L、AL 或 R 的字符。[BIDI]

如果找到这样的字符，并且其双向字符类型为 AL 或 R，则 属性的方向性为“rtl”。

否则，属性的方向性为“ltr”。

否则
属性的方向性与元素的方向性相同。

以下属性是支持方向性的属性：

document.dir [ = value ]

返回html 元素的 dir 属性值（如果有）。

可以设置为“ltr”、“rtl”或“auto”，以替换html 元素的 dir 属性值。

如果没有html 元素，则返回 空字符串并忽略新值。

HTMLElement/dir

所有当前引擎均支持。

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

所有当前引擎均支持。

Firefox1+Safari10.1+Chrome64+
Opera51+Edge79+
Edge（旧版）12+Internet Explorer5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+

Document 对象上的 dir IDL 属性必须反映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 元素的默认对齐样式， 即将文本与段落的起始边缘对齐，所得渲染结果可能 如下：

每个段落都渲染为单独的块。除第二个段落和最后一个段落右对齐外，其他段落均左对齐；用户名（本例中的“Student”和“Teacher”）靠右对齐，其左侧有一个冒号，而文本首先位于冒号左侧。

如前所述，auto 值 并非万能解决方案。本例中的 最后一个段落被错误地解释为从右到左的文本，因为它以 阿拉伯字符开头，这导致“right?”出现在阿拉伯文本的左侧。

3.2.6.5 style 属性

Global_attributes/style

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

所有HTML 元素都可以设置 style 内容属性。 这是一个由CSS 样式 属性定义的样式属性。 [CSSATTR]

在支持 CSS 的用户代理中，当添加该属性或更改其值时，必须根据为样式属性规定的规则， 解析该属性的值。 [CSSATTR]

但是，如果对该属性的元素、“style attribute”和该属性的值执行元素的内联行为是否应被内容安全策略 阻止？算法时返回“Blocked”，则不得将该属性值中定义的样式规则应用于 该元素。[CSP]

在其任何元素上使用 style 属性的 文档，即使移除这些属性，也仍必须可以理解和使用。

尤其是，使用 style 属性隐藏和显示 内容，或者传达文档中未以其他方式包含的含义，是不符合规范的。（要隐藏和显示内容，请使用 hidden 属性。）

element.style

返回一个表示元素的 style 属性的 CSSStyleDeclaration 对象。

style IDL 属性在 CSS 对象 模型中定义。[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 Explorer是
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

自定义数据属性是一个不在任何命名空间中的属性，其名称以字符串 “data-”开头，连字符之后至少有一个字符， 是一个有效属性局部名称，并且不包含任何ASCII 大写字母。

HTML 文档中的HTML 元素上的所有属性名称 都会自动转换为 ASCII 小写形式，因此，对 ASCII 大写字母的限制不会影响 此类文档。

自定义数据属性 旨在存储页面或应用程序专用的自定义 数据、状态、注解及类似信息，并且不存在更合适的属性或元素可用于这些信息。

这些属性并非旨在供使用这些属性的网站管理员所不知晓的软件使用。 对于将由多个独立工具使用的通用扩展，应扩展本规范以明确提供该功能， 或者应使用微数据之类的技术（配合 标准化词汇表）。

例如，一个音乐网站可以使用包含每首曲目时长的自定义数据属性， 对表示专辑中曲目的列表项进行注解。随后，网站本身可以使用这些信息， 允许用户按曲目时长对列表进行排序，或者筛选出具有特定时长的曲目。

<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 Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android41+

返回一个表示元素的 data-* 属性的 DOMStringMap 对象。

带连字符的名称会转换为驼峰式。例如，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 的名称-值 对，请运行以下算法：

  1. 令 list 为一个空的名称-值对列表。

  2. 按照属性在元素的属性 列表中列出的顺序，对 DOMStringMap 的关联 元素上的每个内容属性，如果其前五个字符是字符串“data-”，并且其余字符 （如果有）不包含任何ASCII 大写字母，则向 list 添加一个名称-值对，其名称是移除该属性名称的前五个字符后的结果， 其值为该属性的值。

  3. 对于 list 中的每个名称，对于该名称中后跟ASCII 小写字母的每个 U+002D 连字符-减号字符（-），移除该 U+002D 连字符-减号字符 （-），并将其后的字符替换为转换为 ASCII 大写形式的相同字符。

  4. 返回 list。

任意时刻，DOMStringMap 对象上的支持的属性名称，是该时刻通过获取 DOMStringMap 的名称-值对所返回的每个名称-值对的名称，并按返回顺序排列。

要为一个 DOMStringMap 确定具名属性的值 name，返回由获取 DOMStringMap 的名称-值 对所返回的列表中，名称分量为 name 的名称-值对的值分量。

给定属性名称 name 和新值 value，要为一个 DOMStringMap 设置新具名属性的值，或 设置现有具名属性的值， 请运行以下步骤：

  1. 如果 name 包含一个后跟ASCII 小写字母的 U+002D 连字符-减号字符（-），则抛出一个“SyntaxError” DOMException。

  2. 对于 name 中的每个ASCII 大写字母，在该字符之前插入一个 U+002D 连字符-减号字符（-），并将该字符替换为转换为 ASCII 小写形式的相同字符。

  3. 在 name 的开头插入字符串 data-。

  4. 如果 name 不是一个有效属性局部名称，则抛出一个 “InvalidCharacterError” DOMException。

  5. 使用 name 和 value，为 DOMStringMap 的关联 元素设置属性值。

要为一个 DOMStringMap 删除现有具名属性 name，请运行以下步骤：

  1. 对于 name 中的每个ASCII 大写字母，在该字符之前插入一个 U+002D 连字符-减号字符（-），并将该字符替换为转换为 ASCII 小写形式的相同字符。

  2. 在 name 的开头插入字符串 data-。

  3. 给定 name 和 DOMStringMap 的关联 元素，按名称移除属性。

对于此前用于获取 DOMStringMap 的名称-值对的算法所给出的名称，Web IDL 才会调用此算法。 [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，获取文本步骤为：

  1. 如果 element 未正在渲染，或者用户代理是非 CSS 用户代理，则返回 element 的后代文本内容。

    此步骤可能产生令人意外的结果，因为在未正在 渲染的元素上调用 innerText 获取器时， 会返回其文本内容；但在正在渲染的元素上访问时， 其所有未正在 渲染的子级的文本内容都会被忽略。

  2. 令 results 为一个新的空列表。

  3. 对于 element 的每个子节点 node：

    1. 令 current 为使用 node 运行已渲染 文本收集步骤所得的列表。results 中的每一项 都是一个字符串或一个正整数（所需换行数）。

      直观而言，所需换行数项意味着在该位置会出现一定数量的 换行符，但它们可以与相邻所需换行数项所引入的换行符 折叠，这类似于 CSS 外边距折叠。

    2. 对于 current 中的每一项 item，将 item 追加到 results。

  4. 从 results 中移除所有为空字符串的项。

  5. 移除 results 开头或结尾的任何连续所需换行 数项序列。

  6. 将每个剩余的连续所需换行 数项序列替换为一个字符串，其中包含的 U+000A LF 码位数量 等于这些所需换行数项中值的最大值。

  7. 返回 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 获取器 步骤是使用 this 运行获取文本步骤，并返回其结果。

给定一个节点 node，已渲染文本收集步骤如下：

  1. 令 items 为以下结果：按照树顺序， 对 node 的每个子节点运行已渲染文本收集 步骤，然后将各结果串联成单个列表。

  2. 如果 node 的 'visibility' 的计算 值不是 'visible'，则返回 items。

  3. 如果 node 未正在 渲染，则返回 items。就此步骤而言，如果 'display' 属性的计算 值不是 'none'，则以下元素必须按所述方式运行：

    • select 元素具有一个关联的非替换行内CSS 盒， 其子盒仅包括 optgroup 和 option 元素后代节点的盒；

    • optgroup 元素具有一个关联的非替换块级CSS 盒，其子盒仅包括 option 元素后代 节点的盒；以及

    • option 元素具有一个关联的非替换块级CSS 盒，其子盒与非替换块级CSS 盒通常具有的子盒相同。

    由于 'display:contents'，items 可以为非空。

  4. 如果 node 是一个 Text 节点，则对于 node 产生的每个 CSS 文本盒，按照内容顺序， 计算应用 CSS 'white-space' 处理规则和 'text-transform' 规则后的盒文本，将 items 设置为所得字符串组成的列表，然后返回 items。 CSS 'white-space' 处理规则略有修改：行末的可折叠空格 始终会被折叠，但只有当该行是块中的最后一行，或者该行以 br 元素结尾时， 才会移除这些空格。应保留软连字符。 [CSSTEXT]

  5. 如果 node 是一个 br 元素，则向 items 追加一个包含单个 U+000A LF 码位的字符串。

  6. 如果 node 的 'display' 的计算 值为 'table-cell'，并且 node 的CSS 盒不是其所包含的 'table-row' 盒中的最后一个 'table-cell' 盒，则向 items 追加一个包含 单个 U+0009 TAB 码位的字符串。

  7. 如果 node 的 'display' 的计算 值为 'table-row'，并且 node 的CSS 盒不是最近祖先 'table' 盒中的最后一个 'table-row' 盒，则向 items 追加一个包含 单个 U+000A LF 码位的字符串。

  8. 如果 node 是一个 p 元素，则在 items 的开头和结尾追加 2（一个所需换行数）。

  9. 如果 node 的 'display' 的使用值为 块级或 'table-caption'，则在 items 的开头和结尾追加 1（一个所需换行数）。 [CSSDISPLAY]

    浮动元素和绝对定位元素属于此类别。

  10. 返回 items。

请注意，严格来说，大多数替换元素（例如 textarea、 input 和 video——但不包括 button）的后代节点 不由 CSS 渲染，因此就此算法而言，它们没有CSS 盒。

此算法适合推广为作用于范围。这样，我们就可以将其用作 Selection 字符串转换器的基础，并且可能直接在范围上公开它。请参阅 Bugzilla 错误 10583。

给定一个 HTMLElement element 和一个字符串 value，设置内部文本步骤为：

  1. 令 fragment 为给定 element 的节点文档时， value 的已渲染文本片段。

  2. 在 element 中使用 fragment 全部替换。

innerText 设置器 步骤是使用 this 和给定值运行设置内部 文本步骤。

outerText 设置器 步骤为：

  1. 如果 this 的父级为 null，则抛出一个 “NoModificationAllowedError” DOMException。

  2. 令 next 为 this 的下一个 同胞。

  3. 令 previous 为 this 的上一个同胞。

  4. 令 fragment 为给定 this 的节点文档时， 给定值的已渲染文本片段。

  5. 如果 fragment 没有子级，则向 fragment 追加一个新的 Text 节点，其数据为空 字符串，其节点文档 为 this 的节点文档。

  6. 在 this 的父级中，使用 fragment 替换 this。

  7. 如果 next 不为 null，并且 next 的上一个同胞是一个 Text 节点，则给定 next 的上一个同胞，执行与下一个文本节点合并。

  8. 如果 previous 是一个 Text 节点，则给定 previous，执行与下一个文本 节点合并。

给定一个 Document document，字符串 input 的已渲染文本片段是运行以下步骤的结果：

  1. 令 fragment 为在给定 document 的情况下，创建 文档片段的结果。

  2. 令 position 为 input 的一个位置 变量， 最初指向 input 的开头。

  3. 令 text 为空字符串。

  4. 当 position 尚未越过 input 的末尾时：

    1. 在给定 position 的情况下，从 input 中收集一系列不是 U+000A LF 或 U+000D CR 的码点，并将 text 设置为结果。

    2. 如果 text 不是空字符串，则将一个新的 Text 节点追加 到 fragment，该节点的数据为 text，且其节点 文档为 document。

    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。

  5. 返回 fragment。

给定一个 Text 节点 node，要与下一个文本节点合并：

  1. 令 next 为 node 的下一个 同胞。

  2. 如果 next 不是一个 Text 节点，则返回。

  3. 使用 node、node 的数据的长度、0 和 next 的数据替换数据。

  4. 移除 next。

3.2.8 与双向算法相关的要求

3.2.8.1 双向算法格式化字符的创作一致性标准

文本 内容，即其内容中具有 Text 节点的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]

以下元素和属性具有由渲染一节定义的要求；根据本节中的要求， 这些要求适用于所有用户代理（而不仅仅是那些支持建议的 默认渲染的用户代理）：

3.2.9 与 ARIA 和平台无障碍 API 相关的要求

在HTML 元素上实现无障碍 API 语义的用户代理要求在 HTML 无障碍 API 映射中定义。除其中的 规则外，对于一个自定义元素 element， 默认 ARIA 角色语义 按如下方式确定：[HTMLAAM]

  1. 令 map 为 element 的内部内容属性 映射。

  2. 如果 map["role"] 存在， 则返回它。

  3. 返回无角色。

类似地，对于一个自定义元素 element， 名为 stateOrProperty 的状态或属性的默认 ARIA 状态和 属性语义按如下方式确定：

  1. 如果 element 的已附加内部对象 不为 null：

    1. 如果 element 的已附加 内部对象的获取 stateOrProperty 关联元素存在， 则返回运行它的结果。

    2. 如果 element 的已附加 内部对象的获取 stateOrProperty 关联元素列表存在， 则返回运行它的结果。

  2. 如果 element 的内部内容属性 映射[stateOrProperty] 存在，则返回 它。

  3. 返回 stateOrProperty 的默认值。

此处所指的“默认语义”在 ARIA 中有时也称为“原生”、 “隐式”或“宿主语言”语义。[ARIA]

这些定义的一个含义是，默认语义可以随时间而变化。 这使自定义元素具有与内置元素相同的表达能力；例如，可以比较 a 元素的默认 ARIA 角色语义如何随着 href 属性的添加或移除而变化。

有关其实际运作的示例，请参阅自定义元素 一节。

用于检查HTML 元素上 ARIA role 和 aria-* 属性用法的一致性检查器要求，在 HTML 中的 ARIA 中定义。 [ARIAHTML]

4 HTML 的元素

4.1 文档元素

4.1.1 html 元素

Element/html

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge（旧版）12+Internet Explorer是
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 元素的结束标签。
内容属性：
全局属性
无障碍注意事项：
针对作者。
针对实现者。
净化：
默认。
DOM 接口：
[Exposed=Window]
interface HTMLHtmlElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

html 元素表示 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 元素后面没有 紧跟ASCII 空白 或 注释，则可以省略 head 元素的结束标签。
内容属性：
全局属性
无障碍注意事项：
针对作者。
针对实现者。
净化：
默认。
DOM 接口：
[Exposed=Window]
interface HTMLHeadElement : HTMLElement {
  [HTMLConstructor] constructor();
};

head 元素表示 Document 的元数据集合。

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+
类别：
元数据内容。
可以使用此 元素的上下文：
在不包含其他 title 元素的 head 元素中。
内容模型：
文本，且不是元素间空白。
text/html 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
无障碍注意事项：
针对作者。
针对实现者。
净化：
默认。
DOM 接口：
[Exposed=Window]
interface HTMLTitleElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString text;
};

title 元素表示文档的标题或名称。作者 应使用即使在脱离上下文时也能识别其文档的标题，例如在用户的历史记录或书签中， 或在搜索结果中。文档标题通常 不同于其第一个标题，因为第一个标题在脱离上下文时不必能够独立表达含义。

每个文档中不得有超过一个 title 元素。

如果 Document 没有标题是合理的，则 可能不需要 title 元素。有关何时需要该元素的说明， 请参阅 head 元素的内容 模型。

title.text [ = value ]

返回元素的子级文本 内容。

可以设置，以给定值替换元素的子级。

text 属性的获取器必须返回此 title 元素的子级文本 内容。

text 属性的设置器 必须在此 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...

下一个页面可能是同一网站的一部分。请注意，标题如何明确无歧义地描述主题， 而第一个标题则假定读者知道上下文，因此 不会疑惑其中的舞蹈是萨尔萨舞还是华尔兹：

  <title>Dances used during bee mating rituals</title>
    ...
  <h1>The Dances</h1>

用作文档标题的字符串由 document.title IDL 属性给出。

用户代理在其用户界面中引用文档时应使用文档标题。当 title 元素的内容以这种 方式使用时，应使用该 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+
类别：
元数据内容。
可以使用此 元素的上下文：
在不包含其他 base 元素的 head 元素中。
内容模型：
无。
text/html 中的 标签省略：
没有结束标签。
内容属性：
全局属性
href — 文档基准 URL
target — 用于超链接导航和表单提交的默认可导航对象
无障碍注意事项：
针对作者。
针对实现者。
净化：
不安全。
DOM 接口：
[Exposed=Window]
interface HTMLBaseElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, ReflectSetter] attribute USVString href;
  [CEReactions, Reflect] attribute DOMString target;
};

base 元素允许 作者指定用于解析 URL 的文档基准 URL，以及用于跟随超链接的默认 可导航对象的名称。该元素不 表示这些信息之外的任何内容。

每个文档中不得有超过一个 base 元素。

base 元素必须具有 href 属性、target 属性， 或同时具有二者。

如果指定了 href 内容 属性，则其必须包含一个可能被空格包围的有效 URL。

如果 base 元素具有 href 属性， 则它必须位于树中所有具有被定义为接受 URL 的属性的其他元素之前。

如果存在多个具有 href 属性的 base 元素，则除第一个之外 其余均会被忽略。

如果指定了 target 属性， 则其必须包含一个有效的可导航对象目标名称或关键字，该名称或关键字指定 当 Document 中的超链接和表单导致导航时，应默认使用哪个可导航对象。

如果 base 元素具有 target 属性，则它必须位于树中所有表示超链接的元素之前。

如果存在多个具有 target 属性的 base 元素，则除第一个之外 其余均会被忽略。

给定一个 a、area 或 form 元素 element，以及一个可选的字符串或 null target （默认为 null），要获取元素的目标，请运行以下步骤：

  1. 如果 target 为 null：

    1. 如果 element 具有 target 属性，则将 target 设置为该属性的值。

    2. 否则，如果 element 的节点 文档包含一个具有 target 属性的 base 元素，则将 target 设置为第一个此类 base 元素的 target 属性 的值。

  2. 如果 target 不为 null，并且同时包含ASCII 制表符 或换行符和 U+003C（<），则将 target 设置为“_blank”。

  3. 返回 target。

在文档树中，第一个具有 href 内容属性的 base 元素，也就是第一个 base 元素，具有一个 冻结的基准 URL。每当发生以下任一 情况时，都必须为元素立即设置冻结的基准 URL：

要为元素 element 设置冻结的基准 URL：

  1. 令 document 为 element 的节点文档。

  2. 令 urlRecord 为以下结果：使用 document 的回退基准 URL和 document 的字符编码，对 element 的 href 内容属性值进行解析。（因此，base 元素不会受到自身影响。）

  3. 如果以下任一项为 true：

    则将 element 的冻结的基准 URL设置为 document 的回退基准 URL，然后返回。

  4. 将 element 的冻结的基准 URL设置为 urlRecord。

  5. 给定 document，响应基准 URL 更改。

href IDL 属性在获取时必须返回运行以下算法的结果：

  1. 令 document 为 element 的节点文档。

  2. 如果此元素具有 href 属性，则令 url 为该属性的值，否则为空字符串。

  3. 令 urlRecord 为以下结果：使用 document 的回退基准 URL和 document 的字符编码，解析 url。 （因此，base 元素 不会受到其他 base 元素或 自身的影响。）

  4. 如果 urlRecord 为失败，则返回 url。

  5. 返回 urlRecord 的序列化。

在此示例中，使用 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”。

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+

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+

HTMLLinkElement/relList

所有当前引擎均支持。

Firefox30+Safari9+Chrome50+
Opera?Edge79+
Edge（旧版）17+Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别：
元数据内容。
如果元素允许位于 body 中：流式内容。
如果元素允许位于 body 中：短语内容。
可以使用此 元素的上下文：
预期元数据内容的位置。
作为 head 元素子级的 noscript 元素中。
如果元素允许位于 body 中：预期短语内容的位置。
内容模型：
无。
text/html 中的 标签省略：
没有结束标签。
内容属性：
全局属性
href — 超链接的地址
crossorigin — 元素处理跨源请求的方式
rel — 包含超链接的文档与目标资源之间的关系
media — 适用的媒体
integrity — 子资源完整性检查中使用的完整性元数据 [SRI]
hreflang — 所链接资源的语言
type — 所引用资源类型的提示
referrerpolicy — 元素发起的获取所使用的来源策略
sizes — 图标的尺寸 （用于 rel="icon"）
imagesrcset — 在不同情况下使用的图像，例如高分辨率显示器、小型显示器等（用于 rel="preload"）
imagesizes — 不同页面布局下的图像尺寸（用于 rel="preload"）
as — 预加载请求的目标 （用于 rel="preload" 和 rel="modulepreload"）
blocking — 元素是否可能阻塞渲染
color — 自定义网站图标时使用的颜色（用于 rel="mask-icon"）
disabled — 链接是否被禁用
fetchpriority — 设置元素发起的获取的优先级
此外，title 属性在此元素上具有特殊语义：链接的标题；CSS 样式表集名称
无障碍注意事项：
针对作者。
针对实现者。
净化：
未分类。
DOM 接口：
[Exposed=Window]
interface HTMLLinkElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, ReflectURL] attribute USVString href;
  [CEReactions] attribute DOMString? crossOrigin;
  [CEReactions, Reflect] attribute DOMString rel;
  [CEReactions] attribute DOMString as;
  [SameObject, PutForwards=value, Reflect="rel"] readonly attribute DOMTokenList relList;
  [CEReactions, Reflect] attribute DOMString media;
  [CEReactions, Reflect] attribute DOMString integrity;
  [CEReactions, Reflect] attribute DOMString hreflang;
  [CEReactions, Reflect] attribute DOMString type;
  [SameObject, PutForwards=value, Reflect] readonly attribute DOMTokenList sizes;
  [CEReactions, Reflect] attribute USVString imageSrcset;
  [CEReactions, Reflect] attribute DOMString imageSizes;
  [CEReactions] attribute DOMString referrerPolicy;
  [SameObject, PutForwards=value, Reflect] readonly attribute DOMTokenList blocking;
  [CEReactions, Reflect] 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 的支持的 词元必须仅包括此列表中用户代理已实现其处理模型的词元。

理论上，如果用户代理是会执行 JavaScript 的搜索引擎，它可以支持 canonical 关键字的 处理模型。但在实践中，这种情况极不可能。因此在大多数情况下，不应将 canonical 包含在 rel 的支持的 词元中。

link 元素必须具有 rel 属性或 itemprop 属性之一，但不能同时具有二者。

如果 link 元素具有 itemprop 属性， 或者具有一个仅包含可用于 body的关键字的 rel 属性，则称该元素允许位于 body 中。这意味着 该元素可以用于预期短语内容的位置。

如果使用 rel 属性， 该元素只有在某些情况下 才能用于页面的 body 中。与 itemprop 属性一起使用时，在遵守 微数据模型约束的前提下，该元素既可以用于 head 元素，也可以用于页面的 body 中。

可以使用 link 元素创建两类链接：外部资源链接和超链接。链接类型 一节定义了特定链接类型是外部资源链接还是超链接。一个 link 元素可以创建多个链接（其中一些可能是外部资源链接，另一些可能是超链接）；具体创建哪些链接以及创建多少链接，取决于 rel 属性中给出的关键字。用户代理必须逐个链接进行处理，而不是逐个元素进行处理。

为 link 元素创建的每个链接都会被 分别处理。例如，如果有两个 link 元素具有 rel="stylesheet"， 则它们各自算作一个单独的外部资源，并且分别独立地受到自身属性的影响。类似地，如果单个 link 元素具有值为 next stylesheet 的 rel 属性， 则它会同时创建一个超链接（针对 next 关键字）和 一个外部资源链接（针对 stylesheet 关键字），并且它们会以不同方式受到其他属性（例如 media 或 title）的影响。

例如，以下 link 元素创建两个超链接（指向同一页面）：

<link rel="author license" href="/about">

此元素创建的两个链接中，一个的语义是目标页面包含有关当前页面作者的信息， 另一个的语义是目标页面包含有关当前页面所采用许可证的信息。

使用 link 元素及其 rel 属性创建的超链接适用于整个 文档。这与 a 和 area 元素的 rel 属性形成对比；后者所指示的 链接类型，其上下文由链接在文档中的位置给出。

与 a 和 area 元素创建的链接不同， 在支持建议的默认渲染的用户代理中，由 link 元素创建的超链接默认不会作为 文档的一部分显示。即使使用 CSS 强制显示它们，它们也没有激活行为。相反，它们主要提供语义 信息，页面或使用页面内容的其他软件可能会使用这些信息。此外，用户 代理可以提供 自身的用户界面以跟随此类超链接。

外部资源链接的确切行为 取决于确切的关系，如相关链接类型中所定义。

crossorigin 属性是一个CORS 设置 属性。它旨在与外部资源链接一起使用。

media 属性 指明资源适用于哪些媒体。其值必须是一个有效媒体查询 列表。

Subresource_Integrity

所有当前引擎均支持。

Firefox43+Safari11.1+Chrome45+
Opera?Edge79+
Edge（旧版）17+Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

integrity 属性表示此元素所负责请求的完整性 元数据。其值为文本。该属性只能指定在具有一个包含 stylesheet、preload 或 modulepreload 关键字的 rel 属性的 link 元素上。[SRI]

link 元素上的 hreflang 属性，与 a 元素上的 hreflang 属性具有相同语义。

type 属性 给出所链接资源的 MIME 类型。它仅作为提示。其值必须是 一个有效的 MIME 类型字符串。

对于外部资源链接， type 属性用作 给用户代理的提示，使其可以避免获取不支持的资源。

referrerpolicy 属性是一个来源策略 属性。它旨在与外部 资源链接一起使用，在获取并处理所链接资源时，有助于设置所使用的来源 策略。 [REFERRERPOLICY]

title 属性 给出链接的标题。除一种例外情况外，它仅作为提示。其值为文本。该例外适用于位于文档 树中的样式表链接；对于这类链接，title 属性定义 CSS 样式表集。

link 元素上的 title 属性与大多数其他 元素的全局 title 属性不同：没有标题的链接不会继承父元素的标题；它仅仅没有标题。

可以存在 imagesrcset 属性，它是一个 srcset 属性。

imagesrcset 和 href 属性（如果未使用宽度 描述符）共同为源集贡献图像 源。

如果存在 imagesrcset 属性，并且其中有任何使用宽度 描述符的图像候选字符串，则还必须存在 imagesizes 属性，并且它是一个 sizes 属性。imagesizes 属性 为源集贡献源尺寸。

imagesrcset 和 imagesizes 属性 只能指定在同时具有一个指定 preload 关键字的 rel 属性，以及 一个处于“image”状态的 as 属性的 link 元素上。

这些属性允许预加载适当的资源，该资源随后会由一个其 srcset 和 sizes 属性具有相应值的 img 元素使用： 

<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 数字 零（0）字符，并且必须由单个 U+0078 拉丁小写字母 X 或 U+0058 拉丁 大写字母 X 字符分隔。该属性只能指定在具有一个指定 icon 关键字或 apple-touch-icon 关键字的 rel 属性的 link 元素上。

apple-touch-icon 关键字是预定义链接类型集合的一个已注册扩展，但不要求用户 代理以任何方式支持它。

as 属性 为由 href 属性给出的资源的预加载请求，指定预加载目标或模块预加载 目标。 它是一个枚举 属性。预加载目标与模块预加载目标并集中的每一项都是此 属性的关键字，并映射到同名状态。该属性必须指定在具有一个包含 preload 关键字的 rel 属性的 link 元素上； 在这种情况下，其值必须是一个预加载目标。该属性可以指定在具有一个包含 modulepreload 关键字的 rel 属性的 link 元素上；在这种情况下，其值必须是一个模块预加载 目标。对于其他 link 元素，不得 指定该属性。

as 属性的使用方式处理模型，在各链接类型的获取并处理所链接资源 算法中给出。

该属性没有缺失值 默认值或无效值 默认值，这意味着该属性的无效值 或缺失值不会映射到任何状态。处理模型已对此作出规定。对于 preload 链接， 这两种情况都是错误；对于 modulepreload 链接，缺失值会被视为 “script”。

blocking 属性是一个阻塞属性。链接类型 stylesheet 和 expect 会使用该属性，并且 该属性只能指定在具有一个包含这些关键字的 rel 属性的 link 元素上。

color 属性 与 mask-icon 链接类型一起使用。该属性只能指定在具有一个包含 mask-icon 关键字的 rel 属性的 link 元素上。 其值必须是一个与 CSS <color> 产生式匹配的字符串，用于定义一种建议颜色，用户代理可以使用该颜色 自定义用户固定你的网站时所看到的图标显示。

本规范没有为 color 属性规定任何用户代理要求。

mask-icon 关键字是预定义链接类型集合的一个已注册扩展，但不要求用户 代理以任何方式支持它。

link 元素有一个关联的 显式启用布尔值。其 初始值为 false。

disabled 属性是一个与 stylesheet 链接类型一起 使用的布尔属性。该 属性只能指定在具有一个包含 stylesheet 关键字的 rel 属性的 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 属性是一个获取 优先级属性，旨在与外部资源链接一起使用；在获取并处理所链接 资源时，它用于设置所使用的优先级。

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 内容 属性，并仅限于 已知值。

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 属性 确定资源的实际类型。只有实际类型 （如下一段所定义）用于确定是否应用资源， 而不是上述假定类型。

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， 因此该样式表仍然会被应用。

给定一个 link 元素 el，默认获取并处理所链接资源的步骤如下：

  1. 令 options 为从 el 创建链接 选项的结果。

  2. 令 request 为给定 options 创建 链接请求的结果。

  3. 如果 request 为 null，则返回。

  4. 设置 request 的同步 标志。

  5. 给定 el 和 request，运行所链接 资源获取设置步骤。如果结果为 false，则返回。

  6. 如果 el 的 rel 属性包含关键字 stylesheet， 则将 request 的发起者 类型设置为“css”；否则设置为“link”。

  7. 获取 request，并将 processResponseConsumeBody 设置 为以下步骤；这些步骤接受一个响应 response，以及 null、失败或 一个字节序列 bodyBytes：

    1. 令 success 为 true。

    2. 如果以下任一项为 true：

      则将 success 设置为 false。

      请注意，特定于内容的错误，例如 CSS 解析错误或 PNG 解码 错误，不会影响 success。

    3. 否则，等待链接 资源的关键 子资源完成加载。

      定义链接类型的关键 子资源 的规范（例如 CSS）应描述如何获取并处理这些子资源。但是， 由于目前并未明确说明，本规范描述了等待链接资源的 关键 子资源 被获取并处理，并期望该过程能够正确完成。

    4. 给定 el、success、 response 和 bodyBytes，处理所链接 资源。

给定一个链接处理选项 options，要创建链接请求：

  1. 断言：options 的href不是 空字符串。

  2. 令 url 为以下结果：给定 options 的href，相对于 options 的基准 URL编码解析 URL。

    传递基准 URL 而不是文档或环境的问题由 议题 #9715跟踪。

  3. 如果 url 为失败，则返回 null。

  4. 令 request 为以下结果：给定 url、options 的 目标和 options 的crossorigin，创建 潜在 CORS 请求。

  5. 将 request 的策略 容器设置为 options 的策略 容器。

  6. 将 request 的完整性 元数据设置为 options 的完整性。

  7. 将 request 的加密 nonce 元数据设置为 options 的加密 nonce 元数据。

  8. 将 request 的来源 策略设置为 options 的来源 策略。

  9. 将 request 的客户端设置为 options 的环境。

  10. 将 request 的优先级设置为 options 的获取优先级。

  11. 返回 request。

用户代理可以选择仅在需要此类资源时才尝试获取 并处理它们，而不是主动获取所有未被应用的 外部资源。

与获取并 处理所链接资源算法类似，所有外部资源链接 都有一个处理所链接 资源算法，该算法接受一个 link 元素 el、一个布尔值 success、一个响应 response，以及一个 字节序列 bodyBytes。各个链接类型可以提供自身的 处理所链接 资源算法，但除非明确说明，否则该算法 不执行任何操作。

除非为给定的 rel 关键字另有规定，否则该 元素必须延迟加载事件，直到该 元素的节点文档中 所有获取并 处理所链接资源及其关键 子资源的尝试完成为止。（用户代理尚未尝试获取 和处理的资源，例如因为它正在等待需要该资源时才获取，不会延迟 加载事件。）

所有可以作为外部资源 链接的链接类型都定义了一个处理链接标头算法，该算法接受一个链接 处理选项。该算法定义了这些链接类型在 HTTP `Link` 响应标头中出现时，是否以及如何作出反应。

对于大多数链接类型，此算法不执行任何操作。汇总 表是快速了解某个链接 类型是否定义了处理链接 标头步骤的良好参考。

链接处理选项是一个结构。它具有以下 项：

href（默认为空 字符串）
initiator（默认为 “link”）
integrity（默认为 空字符串）
type（默认为空 字符串）
加密 nonce 元数据（默认为空字符串）
一个字符串
destination （默认为空字符串）
一个目标类型。
crossorigin （默认为无 CORS）
一个CORS 设置 属性状态
来源 策略（默认为空字符串）
一个来源策略
源集（默认为 null）
Null 或一个源集
基准 URL
一个 URL
源
一个源
环境
一个环境
策略 容器
一个策略容器
文档（默认为 null）
Null 或一个 Document
文档就绪时 执行（默认为 null）
Null 或一个接受 Document 的算法
获取优先级 （默认为 自动）
一个获取优先级 属性状态

一个链接 处理选项具有基准 URL和href， 而不是已解析的 URL，因为该 URL 可能是选项的源集所得的结果。

给定一个 link 元素 el，要从元素创建链接选项：

  1. 令 document 为 el 的节点文档。

  2. 令 options 为一个新的链接处理选项，其各项如下：

    crossorigin
    el 的 crossorigin 内容属性的状态
    来源 策略
    el 的 referrerpolicy 内容属性的状态
    源集
    el 的源集
    基准 URL
    document 的文档 基准 URL
    源
    document 的源
    环境
    document 的相关设置对象
    策略 容器
    document 的策略容器
    文档
    document
    加密 nonce 元数据
    el 的 [[CryptographicNonce]] 内部槽的当前值
    获取 优先级
    el 的 fetchpriority 内容属性的状态

  3. 如果 el 具有 href 属性，则将 options 的 href 设置为 el 的 href 属性的值。

  4. 如果 el 具有 integrity 属性， 则将 options 的integrity 设置为 el 的 integrity 内容 属性的值。

  5. 如果 el 具有 type 属性，则将 options 的 type 设置为 el 的 type 属性的值。

  6. 断言：options 的 href不是 空字符串，或者 options 的源 集不为 null。

    既没有 href 也没有 imagesrcset 的 link 元素 不表示链接。

  7. 返回 options。

给定一个标头 列表 headers，要从标头中提取链接：

  1. 令 links 为一个新的列表。

  2. 令 rawLinkHeaders 为以下结果：从 headers 中对 `Link` 进行获取、解码和拆分。

  3. 对于 rawLinkHeaders 中的每个 linkHeader：

    1. 令 linkObject 为解析 linkHeader 的结果。[WEBLINK]

    2. 如果 linkObject["target_uri"] 不 存在，则继续。

    3. 将 linkObject 追加到 links。

  4. 返回 links。

给定一个 Document doc、 一个响应 response，以及一个 “pre-media”或“media”phase，要处理链接标头：

  1. 令 links 为从 response 的标头列表中提取链接的结果。

  2. 对于 links 中的每个 linkObject：

    1. 令 rel 为 linkObject["relation_type"]。

    2. 令 attribs 为 linkObject["target_attributes"]。

    3. 如果 attribs 中存在“srcset”、 “imagesrcset” 或“media”中的任一项，则令 expectedPhase 为“media”；否则为“pre-media”。

    4. 如果 expectedPhase 不等于 phase，则 继续。

    5. 如果 attribs["media"] 存在，并且 attribs["media"] 不与 环境匹配，则 继续。

    6. 令 options 为一个新的链接处理选项，其各项如下：

      href
      linkObject["target_uri"]
      基准 URL
      doc 的文档基准 URL
      源
      doc 的源
      环境
      doc 的相关设置对象
      策略容器
      doc 的策略 容器
      文档
      doc

    7. 给定 attribs 和 rel，对 options 应用来自 已解析标头属性的链接选项。如果该操作返回 false，则返回。

    8. 如果 attribs["imagesrcset"] 存在，并且 attribs["imagesizes"] 存在， 则将 options 的源集设置为以下结果：给定 linkObject["target_uri"]、attribs["imagesrcset"]、 attribs["imagesizes"] 和 null，创建 源集。

    9. 给定 options，运行 rel 的处理 链接标头步骤。

给定 attribs 和一个字符串 rel，要对一个链接处理 选项 options 应用来自已解析标头 属性的链接选项：

  1. 如果 rel 是“preload”：

    1. 如果 attribs["as"] 不存在，则返回 false。

    2. 令 destination 为转换 attribs["as"] 的结果。

    3. 如果 destination 为 null，则返回 false。

    4. 将 options 的目标设置为 destination。

  2. 如果 attribs["crossorigin"] 存在，并且以ASCII 不区分大小写的方式匹配某个 CORS 设置 属性的关键字， 则将 options 的crossorigin设置为与该关键字对应的 CORS 设置 属性状态。

  3. 如果 attribs["integrity"] 存在，则将 options 的integrity设置为 attribs["integrity"]。

  4. 如果 attribs["referrerpolicy"] 存在，并且以ASCII 不区分大小写的方式匹配某个来源策略，则将 options 的来源 策略设置为该来源策略。

  5. 如果 attribs["nonce"] 存在，则将 options 的nonce设置为 attribs["nonce"]。

  6. 如果 attribs["type"] 存在，则将 options 的type设置为 attribs["type"]。

  7. 如果 attribs["fetchpriority"] 存在，并且以ASCII 不区分大小写的方式匹配某个 获取优先级 属性关键字，则将 options 的获取优先级设置为该获取优先级 属性关键字。

  8. 返回 true。

4.2.4.5 早期提示

Status/103

Firefox预览版+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 元素开头。

  1. 令 earlyPolicyContainer 为以下结果：给定 response 和 reservedEnvironment，从获取响应创建策略容器。

    这允许早期提示响应 包含一个内容安全策略，在获取早期提示请求时会执行该策略。

  2. 令 links 为从 response 的标头 列表中提取链接的结果。

  3. 令 earlyHints 为一个空列表。

  4. 对于 links 中的每个 linkObject：

    收到早期提示链接标头时，我们立即开始获取 earlyRequest。如果获取结果在 Document 创建之前返回，则将 earlyResponse 设置为该次获取的响应，并在 Document 创建后提交它（方法是使其可用于预加载资源 映射，如同它是一个 link 元素）。如果 Document 先创建，则响应会在可用后立即 提交。

    1. 令 rel 为 linkObject["relation_type"]。

    2. 令 options 为一个新的链接处理选项，其各项如下：

      href
      linkObject["target_uri"]
      initiator
      “early-hint”
      基准 URL
      response 的 URL
      源
      response 的 URL 的源
      环境
      reservedEnvironment
      策略 容器
      earlyPolicyContainer

    3. 令 attribs 为 linkObject["target_attributes"]。

      早期提示处理只处理 as、crossorigin、integrity 和 type 属性。其他属性，特别是 blocking、imagesrcset、imagesizes 和 media，只有在 Document 创建后才适用。

    4. 给定 attribs 和 rel，对 options 应用来自已解析标头 属性的链接选项。如果该操作返回 false，则返回。

    5. 给定 options，运行 rel 的处理链接标头 步骤。

    6. 将 options 追加到 earlyHints。

  5. 返回以下接受 Document doc 的子步骤：对于 earlyHints 中的每个 options：

    1. 如果 options 的文档就绪时执行为 null，则将 options 的文档设置为 doc。

    2. 否则，使用 doc 调用 options 的文档就绪时执行。

交互式用户代理可以在其用户界面的某处，为用户提供一种方法来跟随 超链接，这些超链接是使用 link 元素创建的。此类对跟随 超链接算法的调用，必须将 userInvolvement 参数设置为“浏览器 UI”。 本规范没有定义确切的界面，但对于文档中每个 link 元素创建的每个超链接， 该界面可以以某种形式（可能经过简化）包含以下信息 （这些信息从元素的属性中获得，具体同样按下文定义）：

用户代理还可以包含其他信息，例如资源的类型（由 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 — Pragma 指令
content — 元素的值
charset — 字符编码 声明
media — 适用的媒体
无障碍注意事项：
针对作者。
针对实现者。
净化：
未分类。
DOM 接口：
[Exposed=Window]
interface HTMLMetaElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute DOMString name;
  [CEReactions, Reflect="http-equiv"] attribute DOMString httpEquiv;
  [CEReactions, Reflect] attribute DOMString content;
  [CEReactions, Reflect] attribute DOMString media;

  // also has obsolete members
};

meta 元素表示无法使用 title、base、link、style 和 script 元素表达的 各种元数据。

meta 元素可以使用 name 属性表示文档级元数据， 使用 http-equiv 属性表示 Pragma 指令，并在 HTML 文档被序列化为字符串形式（例如通过 网络传输或存储在磁盘上）时，使用 charset 属性表示文件的字符编码 声明。

name、http-equiv、charset 和 itemprop 属性中必须恰好指定一个。

如果指定了 name、http-equiv 或 itemprop 中的任一个，则还必须指定 content 属性。否则，必须省略该属性。

charset 属性指定文档使用的字符编码。 这是一个字符 编码声明。如果存在该属性，则其值必须以ASCII 不区分大小写的方式匹配字符串“utf-8”。

meta 元素上的 charset 属性在 XML 文档中不起作用，但为了便于与 XML 之间进行迁移，允许在 XML 文档中使用。

每个文档中不得有超过一个具有 charset 属性的 meta 元素。

content 属性在元素用于这些目的时，给出文档元数据或 Pragma 指令的值。 允许的值取决于确切上下文，如本规范后续各节所述。

如果 meta 元素具有 name 属性， 则它会设置文档元数据。文档元数据以名称-值对的形式表达，meta 元素上的 name 属性 给出名称，而同一元素上的 content 属性给出值。名称指定要设置元数据的哪个方面；有效名称及其值的含义 在以下各节中描述。如果 meta 元素没有 content 属性，则元数据 名称-值对的值部分为空字符串。

media 属性 指明元数据适用于哪些媒体。其值必须是一个有效媒体查询列表。 除非 name 为 theme-color，否则 media 属性不会影响处理模型，并且作者不得使用它。

4.2.5.1 标准元数据名称

Element/meta/name

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera12.1+Edge79+
Edge（旧版）12+Internet Explorer6+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

本规范为 meta 元素的 name 属性定义了若干名称。

名称不区分大小写，并且必须以ASCII 不区分大小写的方式进行比较。

application-name

其值必须是一个简短的自由格式字符串，用于给出页面所表示的 Web 应用程序的名称。 如果该页面不是 Web 应用程序，则不得使用 application-name 元数据名称。 可以提供 Web 应用程序名称的翻译，并使用 lang 属性指定每个名称的语言。

每个文档中，对于给定的语言，不得有超过一个 meta 元素， 且该元素的 name 属性值以ASCII 不区分大小写的方式匹配 application-name。

用户代理可以在 UI 中优先使用应用程序名称，而不是页面的 title， 因为标题可能包含与页面在特定时刻的状态相关的状态消息等内容， 而不仅仅是应用程序的名称。

给定一个有序语言列表（例如英式英语、美式英语和英语），要查找应使用的应用程序名称， 用户代理必须运行以下步骤：

  1. 令 languages 为该语言列表。

  2. 如果 Document 具有 文档元素，且该元素的语言不是未知语言，则令 default language 为该语言。

  3. 如果存在 default language，并且它与 languages 中的任何语言 都不相同，则将其追加到 languages。

  4. 令 winning language 为 languages 中满足以下条件的第一个语言： Document 中存在一个 meta 元素， 其 name 属性值以ASCII 不区分大小写的方式匹配 application-name， 并且该元素的语言是相关语言。

    如果这些语言中没有任何语言具有这样的 meta 元素， 则返回；没有给定应用程序名称。

  5. 返回 Document 中， 按树顺序排列的第一个满足以下条件的 meta 元素的 content 属性值： 其 name 属性值以ASCII 不区分大小写的方式匹配 application-name， 并且其语言为 winning language。

浏览器在需要页面名称时会使用此算法，例如为书签添加标签。 浏览器提供给该算法的语言将是用户的首选语言。

author

其值必须是一个自由格式字符串，用于给出页面某位作者的名称。

description

其值必须是一个描述页面的自由格式字符串。该值必须适合在页面目录中使用， 例如用于搜索引擎。每个文档中不得有超过一个 meta 元素， 其 name 属性值以ASCII 不区分大小写的方式匹配 description。

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>
  ...

许多搜索引擎不会考虑此类关键字，因为此功能过去经常以不可靠甚至 具有误导性的方式被用于向搜索引擎结果中塞入垃圾信息，而这对用户没有帮助。

要获取作者指定为适用于页面的关键字列表，用户代理必须运行以下步骤：

  1. 令 keywords 为空列表。

  2. 对于每个同时具有 name 属性和 content 属性，并且其 name 属性值 以ASCII 不区分大小写的方式 匹配 keywords 的 meta 元素：

    1. 按逗号拆分元素的 content 属性值。

    2. 将所得词元（如果有）添加到 keywords。

  3. 从 keywords 中移除所有重复项。

  4. 返回 keywords。这是作者指定为适用于页面的关键字列表。

当对值的可靠性没有足够信心时，用户代理不应使用此信息。

例如，内容管理系统使用系统内页面的关键字信息来填充 站点专用搜索引擎的索引是合理的；但大规模内容聚合器如果使用此信息， 很可能会发现某些用户试图通过使用不适当的关键字来操纵其排名机制。

referrer

其值必须是一个来源策略，用于定义 Document 的默认来源 策略。[REFERRERPOLICY]

如果任何 meta 元素 element 被插入文档，或者其 name 或 content 属性发生更改，则用户代理必须运行以下算法：

  1. 如果 element 不位于文档树中，则返回。

  2. 如果 element 没有一个值以ASCII 不区分大小写的方式匹配“referrer”的 name 属性，则返回。

  3. 如果 element 没有 content 属性，或者该属性的值为空字符串，则返回。

  4. 令 value 为 element 的 content 属性值，并将其转换为 ASCII 小写形式。

  5. 如果 value 是下表第一列给出的值之一，则将 value 设置为第二列给出的值：

    旧值 来源策略
    never no-referrer
    default 默认来源策略
    always unsafe-url
    origin-when-crossorigin origin-when-cross-origin

  6. 如果 value 是一个来源策略，则将 element 的 节点文档的策略 容器的来源策略设置为 policy。

由于历史原因，与其他标准元数据名称不同，referrer 的处理 模型不会响应元素的移除，也不使用树顺序。只有最近插入或 最近修改且处于此状态的 meta 元素才会产生作用。

theme-color

Element/meta/name/theme-color

Firefox否Safari15+Chrome🔰 73+
Opera否Edge🔰 79+
Edge（旧版）?Internet Explorer否
Firefox Android?Safari iOS?Chrome Android80+WebView Android否Samsung Internet6.2+Opera Android否

其值必须是一个匹配 CSS <color> 产生式的 字符串，用于定义一种建议颜色，用户代理应使用该颜色来自定义页面或周围用户界面的显示。 例如，浏览器可以使用指定值为页面的标题栏着色，或者将其用作标签栏或任务切换器中的 高亮颜色。

在 HTML 文档中，所有将其 name 属性值设置为 以ASCII 不区分大小写的方式匹配 theme-color 的 meta 元素之间， media 属性值 必须是唯一的。

本标准本身使用“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)">
...

要获取页面的主题颜色，用户代理必须运行以下步骤：

  1. 令 candidate elements 为按树顺序排列的所有满足以下条件的 meta 元素的列表：

  2. 对于 candidate elements 中的每个 element：

    1. 如果 element 具有 media 属性， 并且 element 的 media 属性值不与环境匹配，则 继续。

    2. 令 value 为以下结果：从 element 的 content 属性值中去除前导和尾随 ASCII 空白。

    3. 令 color 为解析 value 的结果。

    4. 如果 color 不是失败，则返回 color。

  3. 不返回任何内容（页面没有主题颜色）。

如果任何 meta 元素被插入文档或被从文档中移除，或者现有 meta 元素的 name、content 或 media 属性 发生更改，或者环境发生更改，使得任何 meta 元素的 media 属性值现在可能或可能不再与环境 匹配，则用户代理必须重新运行上述算法，并将结果应用于任何 受影响的 UI。

在 UI 中使用主题颜色时，用户代理可以采用实现特定的方式对其进行调整， 使其更适合相关 UI。例如，如果用户代理打算将主题颜色用作背景并在其上显示白色文本， 则可以在 UI 的该部分使用主题颜色的较深变体，以确保足够的对比度。

color-scheme

为了帮助用户代理立即使用所需的颜色方案渲染页面背景 （而不是等待页面中的所有 CSS 加载完毕），可以在 meta 元素中提供 一个 'color-scheme' 值。

其值必须是一个与 CSS 'color-scheme' 属性值语法匹配的字符串。它确定页面支持的颜色方案。

每个文档中不得有超过一个 meta 元素， 其 name 属性值 被设置为以ASCII 不区分大小写的方式匹配 color-scheme。

以下声明表明页面能够识别并处理一种使用深色背景和浅色前景的颜色方案：

<meta name="color-scheme" content="dark">

要获取页面支持的颜色方案，用户代理必须运行 以下步骤：

  1. 令 candidate elements 为按树顺序排列的所有满足以下条件的 meta 元素的列表：

  2. 对于 candidate elements 中的每个 element：

    1. 令 parsed 为以下结果：给定 element 的 content 属性值，解析组件值列表。
    2. 如果 parsed 是一个有效的 CSS 'color-scheme' 属性值，则 返回 parsed。

  3. 返回 null。

如果任何 meta 元素被插入文档或被从文档中移除，或者现有 meta 元素的 name 或 content 属性发生更改，则用户代理必须重新运行上述算法。

由于这些规则会依次检查元素，直到找到匹配项，因此作者可以提供多个此类值， 以便为旧版用户代理提供回退。与 CSS 属性的回退方式相反，多个 meta 元素需要将 旧版值排列在较新值之后。

4.2.5.2 其他元数据名称

任何人都可以创建并使用自己对预定义元数据名称集合的 扩展。无需注册此类扩展。

但是，在以下任何情况下都不应创建新的元数据名称：

此外，在创建并使用新的元数据名称之前，鼓励查阅 WHATWG Wiki MetaExtensions 页面—— 以避免选择已被使用的元数据名称，避免与任何已被使用的元数据名称的用途重复， 并避免新的标准化名称与所选名称发生冲突。[WHATWGWIKI]

任何人都可以随时编辑 WHATWG Wiki MetaExtensions 页面以添加元数据名称。 新元数据名称可以使用以下信息进行说明：

关键字

实际定义的名称。该名称不应与任何其他已定义名称相似到容易混淆 （例如仅大小写不同）。

简要描述

对元数据名称含义的简短非规范性描述，包括要求其值采用的格式。

规范
指向元数据名称的语义和要求的更详细描述的链接。 它可以是 Wiki 上的另一个页面，也可以是指向外部页面的链接。
同义词

具有完全相同处理要求的其他名称列表。作者不应使用被定义为同义词的名称 （它们仅用于允许用户代理支持旧版内容）。任何人都可以移除实践中未使用的同义词； 只有为了兼容旧版内容而需要作为同义词处理的名称，才应以这种方式注册。

状态

以下状态之一：

提议
该名称尚未经过广泛的同行评审和批准。有人已经提出该名称，并且正在使用或很快会使用它。
批准
该名称已经过广泛的同行评审和批准。它具有一份规范，该规范明确无歧义地定义了如何处理 使用该名称的页面，包括页面以错误方式使用该名称的情况。
停用
该元数据名称已经过广泛的同行评审，并被认为存在缺陷。现有页面正在使用此元数据名称， 但新页面应避免使用它。“简要描述”和“规范”条目将详细说明作者应改用什么（如果有）。

如果发现某个元数据名称与现有值重复，则应将其移除，并将其列为现有值的同义词。

如果一个元数据名称以“提议”状态添加后持续一个月或更长时间， 但未被使用或说明，则可以将其从 WHATWG Wiki MetaExtensions 页面中移除。

如果一个元数据名称以“提议”状态添加后被发现与现有值重复，则应将其移除， 并将其列为现有值的同义词。如果一个元数据名称以“提议”状态添加后被发现有害， 则应将其状态更改为“停用”。

任何人都可以随时更改状态，但只能按照上述定义进行更改。

4.2.5.3 Pragma 指令

当在 meta 元素上指定 http-equiv 属性时，该元素是一个 Pragma 指令。

尽管名称为 http-equiv，但 Pragma 指令几乎与 HTTP 标头完全无关。实现者和 Web 开发者最好将它们视为完全独立的事物， 并将该名称视为历史遗留问题。

更具体地说，尽管 refresh 关键字与对应的 `Refresh` 标头具有相同的处理模型，但其他 每个标准化 Pragma 指令的行为都至少与名称相似的标头略有不同。 （而且通常有显著差异。）

考虑添加新的文档级 Pragma 或由 HTTP 标头控制的开关的实现者或规范编写者， 应谨慎对待这种不匹配，并避免通过同时向 HTTP 标头和 http-equiv Pragma 添加相同或相似行为而延续现有的混乱。相反，应考虑只提供 HTTP 标头；或者，如果需要文档内 Pragma，则考虑按照 charset 属性所使用的模型，为 meta 添加一个新属性。 （请注意，避免文档内 Pragma 通常是更好的选择，因为 DOM 是可变的。因此，即使在 开发者不添加、移除或更改 meta 元素的简单情况下， 策略也会在解析期间从未应用变为已应用，这可能产生复杂的影响。）

http-equiv 属性是一个具有以下关键字和状态的枚举属性：

关键字 符合规范 状态 简要描述
content-language 否 内容语言 设置由 Pragma 设置的默认语言。
content-type 编码声明 设置 charset 的另一种形式。
default-style 默认样式 设置默认 CSS 样式表集的名称。
refresh 刷新 充当定时重定向。
set-cookie 否 Set-Cookie 没有作用。
x-ua-compatible X-UA-Compatible 在实践中，促使 Internet Explorer 更严格地遵循规范。
content-security-policy 内容安全策略 对 Document 执行一个内容安全 策略。

当一个 meta 元素被插入 文档时，如果存在其 http-equiv 属性， 并且该属性表示上述状态之一，则用户代理必须运行适用于该状态的算法， 如以下列表所述：

内容语言状态 (http-equiv="content-language")

此功能不符合规范。鼓励作者改用 lang 属性。

此 Pragma 设置由 Pragma 设置的默认语言。在成功处理 此类 Pragma 之前，不存在由 Pragma 设置的默认语言。

  1. 如果 meta 元素没有 content 属性，则返回。

  2. 如果元素的 content 属性包含 U+002C 逗号字符（,），则返回。

  3. 令 input 为元素的 content 属性值。

  4. 令 position 指向 input 的第一个字符。

  5. 给定 position，在 input 中跳过 ASCII 空白。

  6. 给定 position，从 input 中收集一系列不是ASCII 空白的码点。

  7. 令 candidate 为上一步所得的字符串。

  8. 如果 candidate 为空字符串，则返回。

  9. 将由 Pragma 设置的默认语言设置为 candidate。

    如果该值由多个以空格分隔的词元组成，则会忽略第一个词元之后的词元。

此 Pragma 与同名 HTTP `Content-Language` 标头几乎相同，但并非完全相同。 [HTTP]

编码声明状态 (http-equiv="content-type")

编码声明状态只是设置 charset 属性的另一种形式：它是一个字符编码声明。此状态的所有用户代理要求 均由本规范的解析一节处理。

对于其 http-equiv 属性处于编码声明 状态的 meta 元素，content 属性必须具有 一个以ASCII 不区分大小写的方式匹配由以下部分组成的字符串的值： “text/html;”，其后可以跟任意数量的ASCII 空白，再跟“charset=utf-8”。

文档不得同时包含一个其 http-equiv 属性处于编码声明状态的 meta 元素，以及一个具有 charset 属性的 meta 元素。

编码声明状态可以在HTML 文档中使用，但其 http-equiv 属性处于该状态的元素不得用于 XML 文档。

默认样式状态 (http-equiv="default-style")

Alternative_style_sheets

仅一个引擎支持。

Firefox3+Safari?Chrome1–48
Opera是Edge否
Edge（旧版）?Internet Explorer8+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

此 Pragma 设置默认 CSS 样式表集的名称。

  1. 如果 meta 元素没有 content 属性，或者该属性的值为空字符串，则返回。

  2. 以元素的 content 属性值作为 名称，更改首选 CSS 样式表集名称。 [CSSOM]

刷新状态 (http-equiv="refresh")

此 Pragma 充当定时重定向。

一个 Document 对象具有一个关联的 将进行声明式 刷新（一个布尔值）。其初始值为 false。

  1. 如果 meta 元素没有 content 属性，或者该属性的值为空字符串，则返回。

  2. 令 input 为元素的 content 属性值。

  3. 使用 meta 元素的节点文档、input 和 meta 元素，运行共享声明式刷新步骤。

给定一个 Document 对象 document、字符串 input，以及可选的 meta 元素 meta，共享声明式刷新步骤如下：

  1. 如果 document 的将进行声明式刷新为 true，则返回。

  2. 令 position 指向 input 的第一个码点。

  3. 给定 position，在 input 中跳过 ASCII 空白。

  4. 令 time 为 0。

  5. 给定 position，从 input 中收集一系列ASCII 数字码点，并令 timeString 为结果。

  6. 如果 timeString 为空字符串：

    1. 如果 input 中 position 所指向的码点不是 U+002E（.），则返回。

  7. 否则，使用解析非负整数的规则解析 timeString，并将 time 设置为所得结果。

  8. 给定 position，从 input 中收集一系列ASCII 数字和 U+002E 句点字符（.）码点。忽略所有收集到的字符。

  9. 令 urlRecord 为 document 的 URL。

  10. 如果 position 尚未超过 input 的末尾：

    1. 如果 input 中 position 所指向的码点不是 U+003B（;）、U+002C（,）或ASCII 空白，则返回。

    2. 给定 position，在 input 中跳过 ASCII 空白。

    3. 如果 input 中 position 所指向的码点是 U+003B（;）或 U+002C（,），则将 position 前移到下一个码点。

    4. 给定 position，在 input 中跳过 ASCII 空白。

  11. 如果 position 尚未超过 input 的末尾：

    1. 令 urlString 为 input 中从 position 所在码点到字符串末尾的子字符串。

    2. 如果 input 中 position 所指向的码点是 U+0055（U）或 U+0075（u），则将 position 前移到下一个码点。否则，跳转到标记为跳过引号的步骤。

    3. 如果 input 中 position 所指向的码点是 U+0052（R）或 U+0072（r），则将 position 前移到下一个码点。否则，跳转到标记为解析的步骤。

    4. 如果 input 中 position 所指向的码点是 U+004C（L）或 U+006C（l），则将 position 前移到下一个码点。否则，跳转到标记为解析的步骤。

    5. 给定 position，在 input 中跳过 ASCII 空白。

    6. 如果 input 中 position 所指向的码点是 U+003D（=），则将 position 前移到下一个码点。 否则，跳转到标记为解析的步骤。

    7. 给定 position，在 input 中跳过 ASCII 空白。

    8. 跳过引号：如果 input 中 position 所指向的码点是 U+0027（'）或 U+0022（"），则令 quote 为该码点，并将 position 前移到下一个码点。 否则，令 quote 为空字符串。

    9. 将 urlString 设置为 input 中从 position 所在码点到字符串末尾的子字符串。

    10. 如果 quote 不是空字符串，并且 urlString 中存在一个等于 quote 的码点， 则在该码点处截断 urlString，以移除该码点及其后的所有码点。

    11. 解析：给定 urlString，相对于 document 编码解析 URL，并将 urlRecord 设置为所得结果。

    12. 如果 urlRecord 为失败，则返回。

    13. 如果 urlRecord 的方案为“javascript”， 则返回。

  12. 将 document 的将进行声明式刷新设置为 true。

  13. 执行以下一个或多个步骤：

    • 刷新到期后（定义见下文），如果用户未取消重定向，并且如果给定了 meta，document 的活动沙盒标志集未设置沙盒化自动功能浏览上下文 标志，则使用 document 将 document 的节点 可导航对象导航到 urlRecord，并将 historyHandling 设置为“replace”。

      就上一段而言，一旦以下两个条件中较晚发生的条件成立，就称刷新已到期：

      • 从 document 的完全加载时间开始，至少经过了 time 秒，并根据用户或用户代理偏好进行了调整。
      • 如果给定了 meta，则从 meta 被插入文档 document 开始，至少经过了 time 秒，并根据用户或用户代理偏好进行了调整。

      此处使用 document 而不是 meta 的节点文档非常重要，因为从初始步骤集到刷新到期之间， 后者可能已经发生更改，并且并不总是会给出 meta（例如使用 HTTP `Refresh` 标头时）。

    • 向用户提供一个界面，当该界面被选中时，使用 document 将 document 的节点 可导航对象导航到 urlRecord。

    • 不执行任何操作。

    此外，与其他任何情况一样，用户代理可以向用户告知其操作的任何和所有方面， 包括任何计时器的状态、任何定时重定向的目标等。

对于其 http-equiv 属性处于刷新状态的 meta 元素，content 属性必须具有 由以下任一形式组成的值：

在前一种情况下，该整数表示页面重新加载前的秒数；在后一种情况下，该整数表示 页面被给定 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 更严格地遵循规范。

对于其 http-equiv 属性处于X-UA-Compatible 状态的 meta 元素，content 属性必须具有 一个以ASCII 不区分大小写的方式匹配字符串“IE=edge”的值。

要求用户代理忽略此 Pragma。

内容安全策略状态 (http-equiv="content-security-policy")

此 Pragma 对 Document 执行一个内容安全 策略。[CSP]

  1. 如果 meta 元素不是 head 元素的子级， 则返回。

  2. 如果 meta 元素没有 content 属性，或者该属性的值为空字符串，则返回。

  3. 令 policy 为以下结果：对 meta 元素的 content 属性值执行内容安全策略的解析序列化内容安全策略算法， 其中源为“meta”，处置为“enforce”。

  4. 从 policy 中移除所有出现的 report-uri、 frame-ancestors 和 sandbox 指令。

  5. 执行策略 policy。

对于其 http-equiv 属性处于内容安全 策略状态的 meta 元素，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”编码标签 标识它。这些要求使得文档的字符编码 声明（如果存在）必须指定一个以ASCII 不区分大小写的方式匹配“utf-8”的编码标签。无论是否存在字符编码 声明，用于编码文档的实际字符编码 都必须是 UTF-8。[ENCODING]

为了执行上述规则，创作工具必须默认对新建文档使用 UTF-8。

此外还适用以下限制：

此外，由于对 meta 元素存在多项限制，每个文档只能有 一个基于 meta 的字符编码声明。

如果一个HTML 文档不是以 BOM 开头，并且其编码未由Content-Type 元数据明确给出，并且该文档不是一个 iframe srcdoc 文档， 则必须使用一个具有 charset 属性的 meta 元素，或者一个其 http-equiv 属性处于编码声明 状态的 meta 元素来指定编码。

即使所有字符都位于 ASCII 范围内，也需要字符编码声明（位于Content-Type 元数据中或在文件中明确给出），因为处理用户在表单中 输入的非 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+

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+
类别：
元数据内容。
可以使用此 元素的上下文：
预期元数据内容的位置。
作为 head 元素子级的 noscript 元素中。
内容模型：
给出一个符合规范的样式表的文本。
text/html 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
media — 适用的媒体
blocking — 元素是否 可能阻塞渲染
此外，title 属性 在此元素上具有特殊语义： CSS 样式表集名称
无障碍注意事项：
针对作者。
针对实现者。
净化：
未分类。
DOM 接口：
[Exposed=Window]
interface HTMLStyleElement : HTMLElement {
  [HTMLConstructor] constructor();

  attribute boolean disabled;
  [CEReactions, Reflect] attribute DOMString media;
  [SameObject, PutForwards=value, Reflect] 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 的获取器步骤如下：

  1. 如果 this 没有关联的 CSS 样式表，则返回 false。

  2. 如果 this 的关联的 CSS 样式表的禁用标志已设置，则返回 true。

  3. 返回 false。

disabled 的设置器 步骤如下：

  1. 如果 this 没有关联的 CSS 样式表， 则返回。

  2. 如果给定值为 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
Opera是Edge否
Edge（旧版）?Internet Explorer8+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

style 元素上的 title 属性定义 CSS 样式表集。如果 style 元素 没有 title 属性， 则它没有标题；祖先元素的 title 属性不适用于 style 元素。如果 style 元素不位于文档树中，则会忽略 title 属性。[CSSOM]

style 元素上的 title 属性与 link 元素上的 title 属性一样，与全局 title 属性的不同之处在于， 没有标题的 style 块不会继承父元素的标题： 它只是没有标题。

style 元素的子级文本内容必须是一个 符合规范的样式表的内容。

如果一个 style 元素是由其节点文档的解析器创建的，则该元素隐式可能阻塞渲染。

每当发生以下任何条件时，用户代理都必须运行更新 style 块算法：

更新 style 块算法如下：

  1. 令 element 为 style 元素。

  2. 如果 element 具有关联的 CSS 样式表，则移除相关 CSS 样式表。

  3. 如果 element 未连接，则返回。

  4. 如果存在 element 的 type 属性，并且其值 既不是空字符串，也不以ASCII 不区分大小写的方式匹配 “text/css”，则返回。

    特别是，带有参数的 type 值， 例如“text/css; charset=utf-8”，将导致此算法提前返回。

  5. 如果对 style 元素、 “style”和 style 元素的子级文本内容执行元素的内联行为是否应被内容安全策略 阻止？算法时返回“Blocked”，则返回。[CSP]

  6. 使用以下属性创建 CSS 样式表：

    类型

    text/css

    所有者节点

    element

    媒体

    element 的 media 属性。

    这是对该属性（此时可能不存在）的引用，而不是该属性当前值的副本。 CSSOM 定义了动态设置、更改或移除该属性时发生的情况。

    标题

    如果 element 位于文档树中，则为 element 的 title 属性，否则为空字符串。

    同样，这是对该属性的引用。

    替代标志

    未设置。

    源干净标志

    已设置。

    位置
    父 CSS 样式表
    所有者 CSS 规则

    null

    禁用标志

    保留其默认值。

    CSS 规则

    保持未初始化。

    这似乎不正确。大概应该使用元素的子级文本内容？在议题 #2997中跟踪。

  7. 如果 element 提供阻塞脚本的样式表，则将 element 追加到其节点文档的阻塞脚本的样式表集。

  8. 如果 element 的 media 属性值与环境 匹配，并且 element 可能阻塞渲染，则在 element 上阻塞渲染。

一旦获取样式表的关键子资源（如果有）的尝试完成，或者如果样式表没有关键子资源，则在样式表解析并处理完成后， 用户代理必须运行以下步骤：

获取关键 子资源的过程没有得到明确定义；议题 #968可能是解决该问题的最佳方案。 在此期间，任何关键 子资源的请求都应根据 style 元素当前是否阻塞渲染，设置其阻塞渲染。

  1. 令 element 为与相关样式表关联的 style 元素。

  2. 令 success 为 true。

  3. 如果由于任何原因（例如 DNS 错误、HTTP 404 响应、连接过早关闭、 不受支持的 Content-Type）导致获取样式表的任何关键子资源的尝试失败，则将 success 设置为 false。

    请注意，特定于内容的错误（例如 CSS 解析错误或 PNG 解码错误） 不会影响 success。

  4. 给定 element 和以下步骤，在网络任务源上排入元素任务：

    1. 如果 success 为 true，则在 element 上触发一个名为 load 的事件。

    2. 否则，在 element 上触发一个名为 error 的事件。

    3. 如果 element 提供阻塞脚本的样式表：

      1. 断言：element 的节点文档的阻塞脚本的样式表集包含 element。

      2. 从 element 的节点文档的阻塞脚本的样式表集中移除 element。

    4. 在 element 上取消阻塞渲染。

该元素必须延迟该元素的 加载事件，直到该元素的节点文档中 所有获取样式表的关键子资源（如果有）的 尝试完成为止。

本规范没有指定样式系统，但预计大多数 Web 浏览器都会支持 CSS。 [CSS]

此元素还实现 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 元素给出的内部样式表），则样式规则必须立即对脚本可用；否则，只有当事件 循环到达其更新 渲染步骤时，样式规则才必须对脚本可用。

在 HTML 解析器或 XML 解析器的 Document 上下文中，如果 以下所有条件均为真，则元素 el 提供阻塞脚本的 样式表：

预计上述规则的对应规则也适用于 <?xml-stylesheet?> 处理指令。但是，这一点尚未得到彻底 调查。

一个 Document 具有一个 阻塞脚本的样式表集，它是一个有序集合，初始为空。

如果以下步骤返回 true，则 Document document 具有阻塞 脚本的样式表：

  1. 如果 document 的阻塞脚本的样式表 集不为空，则 返回 true。

  2. 如果 document 的节点可导航对象为 null，则返回 false。

  3. 令 containerDocument 为 document 的节点可导航对象的 容器文档。

  4. 如果 containerDocument 不为 null，并且 containerDocument 的 阻塞脚本的样式表 集不为空， 则返回 true。

  5. 返回 false。

如果一个 Document 不 具有阻塞 脚本的样式表，则它没有阻塞脚本的样式表。

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 Explorer是
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 元素为空， 或者 body 元素内的第一项不是 ASCII 空白或注释，则可以省略该元素的开始标签；但如果 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
无障碍注意事项：
针对作者。
针对实现者。
净化：
默认。
DOM 接口：
[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 元素将 Window 对象的若干事件处理器公开为事件处理器 内容属性。它还镜像这些处理器的事件处理器 IDL 属性。

由Window 反映 body 元素的 事件处理器集合命名、并在 body 元素上公开的 Window 对象事件处理器，会替换HTML 元素通常支持的同名通用事件处理器。

因此，例如，在一个 Document 的body 元素的子级上分派的冒泡 error 事件，会首先 触发该元素的 onerror 事件处理器 内容 属性，然后触发根 html 元素上的该属性，只有 随后才会触发 body 元素上的 onerror 事件处理器 内容属性。这是因为 事件会从目标冒泡到 body，再到 html，再到 Document，再到 Window，并且 body 上的事件处理器监听的是 Window 而不是 body。但是，使用 addEventListener() 附加到 body 的常规事件监听器， 会在事件冒泡通过 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 元素

Element/article

所有当前引擎均支持。

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。

article 元素表示文档、页面、应用程序或站点中的一个完整或独立的 组成部分，并且原则上可以独立分发或复用，例如用于联合发布。这可以是论坛帖子、杂志或 报纸文章、博客条目、用户提交的评论、交互式挂件或小工具，或者任何 其他独立的内容项。

当 article 元素嵌套时，内部的 article 元素 表示原则上与外部文章内容相关的文章。例如，接受用户评论的网站上的博客条目， 可以将评论表示为嵌套在该博客条目的 article 元素中的 article 元素。

与一个 article 元素关联的作者信息 （参见 address 元素） 不适用于嵌套的 article 元素。

当专门用于要通过联合发布重新分发的内容时， article 元素 在用途上与 Atom 中的 entry 元素相似。[ATOM]

schema.org 微数据词汇表可用于使用 CreativeWork 的某个子类型， 为 article 元素提供发布日期。

当页面的主要内容（即不包括页脚、页眉、导航块和侧栏）全部是一个独立完整的组成部分时， 可以使用 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+
类别：
流式内容。
分节内容。
可感知内容。
可以使用此 元素的上下文：
预期分节内容的位置。
内容 模型：
流式内容。
text/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 元素

Element/Heading_Elements

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/Heading_Elements

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/Heading_Elements

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/Heading_Elements

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/Heading_Elements

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/Heading_Elements

所有当前引擎均支持。

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 元素的子级。
预期标题 内容的位置。
内容模型：
短语 内容。
text/html 中的标签省略：
两个标签均不可省略。
内容属性：
全局 属性
无障碍 注意事项：
针对作者。
针对实现者。
净化：
默认。
DOM 接口：
[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" -->
 ...

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 元素表示其最近祖先 分节内容元素的页脚，或者 如果不存在此类 祖先，则表示body 元素的页脚。 页脚通常包含有关其章节的信息，例如作者、相关文档的链接、 版权数据等。

当 footer 元素 包含完整章节时，这些章节表示附录、 索引、较长的出版说明、冗长的许可 协议及其他此类内容。

章节作者或编辑者的联系信息应放在 address 元素中， 该元素本身也可能位于 footer 内。署名及其他 同时适合放在 header 或 footer 中的信息，可以 放在任意一个元素中（也可以都不放）。这些元素的主要目的仅仅是帮助作者 编写易于维护和设置样式、语义清晰的标记；它们并非旨在向作者强制规定 特定结构。

页脚不一定必须出现在章节的末尾，尽管它们通常 位于末尾。

当不存在祖先分节 内容元素时，它适用于整个 页面。

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 元素

Element/address

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
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 元素 构成，这些元素不得具有另一个作为 node 后代的 body 或 article 元素 祖先。

如果 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 标题级别和偏移量

headingoffset 内容属性允许作者偏移后代的标题级别。

如果指定了 headingoffset 属性，则它必须 具有一个介于 0 和 8 之间（含两端）的有效非负整数值。

headingreset 内容属性是一个布尔 属性。它允许作者阻止标题 偏移量计算遍历到具有该属性的元素之外。

要获取元素的计算标题级别，给定一个 元素 element：

  1. 令 level 为 0。

  2. 如果 element 的局部名称是 h1， 则将 level 设置为 1。

  3. 如果 element 的局部名称是 h2， 则将 level 设置为 2。

  4. 如果 element 的局部名称是 h3， 则将 level 设置为 3。

  5. 如果 element 的局部名称是 h4， 则将 level 设置为 4。

  6. 如果 element 的局部名称是 h5， 则将 level 设置为 5。

  7. 如果 element 的局部名称是 h6， 则将 level 设置为 6。

  8. 断言：level 不为 0。

  9. 将 level 增加以下结果：给定 element，获取元素的计算 标题 偏移量。

  10. 如果 level 大于 9，则返回 9。

  11. 返回 level。

要获取元素的计算标题偏移量，给定一个 元素 element， 执行以下步骤。这些步骤返回一个非负整数。

  1. 令 offset 为 0。

  2. 令 inclusiveAncestor 为 element。

  3. 当 inclusiveAncestor 不为 null 时：

    1. 令 nextOffset 为 0。

    2. 如果 inclusiveAncestor 是一个HTML 元素并且 具有 headingoffset 属性，则使用解析非负 整数的规则解析其值。

      如果解析该值的结果不是错误，则将 nextOffset 设置为该 值。

    3. 将 offset 增加 nextOffset。

    4. 如果 inclusiveAncestor 是一个HTML 元素 并且具有 headingreset 属性，则返回 offset。

    5. 如果 inclusiveAncestor 的父级是一个影子根， 则将 inclusiveAncestor 设置为该影子根的 宿主并继续。

    6. 将 inclusiveAncestor 设置为 inclusiveAncestor 的父 元素。

  4. 返回 offset。

此示例展示了 headingoffset、 headingreset 和 aria-level 属性的组合，并通过注释演示各自的 标题级别。此示例说明各种组合，而不是最佳实践 示例。 

<body>
  <main>
   <h1>This is a heading level 1</h1>
   <article headingoffset="1">
    <h1>This is a heading level 2</h1>
    <section headingoffset="1">
     <h1>This is a heading level 3</h1>
     <dialog headingreset>
      <h1>This is a heading level 1</h1>
     </dialog>
    </section>
   </article>
   <h1 aria-level="2">This is a heading level 2</h1>
  </main>
</body>
4.3.11.2 大纲示例

以下标记片段：

<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 个文档标题：

  1. <h1>HTML: Living Standard</h1>

  2. <h2>Table of contents</h2>。

  3. <h2>First section</h2>。

大纲的渲染视图可能如下所示：

标题为“HTML：现行标准”的顶级章节，以及两个子章节：“目录”和“第一节”。

首先，以下是一个文档，它是一本章节和子章节都很短的书：

<!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>

其大纲可以如下呈现：

  1. 税务之书
    1. 赚钱
      1. 找工作
    2. 花钱
      1. 便宜的东西
      2. 昂贵的东西
    3. 投资
    4. 亏钱
      1. 判断失误

请注意，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>

该文档的大纲可以如下呈现：

  1. 苹果
  2. 香蕉
  3. 杨桃

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>

该文档的大纲可以如下呈现：

  1. Ray 的博客
    1. 我们要领养一个孩子了！

以下示例符合规范，但不鼓励使用，因为它没有标题的标题级别为 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. 苹果
    2. 香蕉
    3. 杨桃

以下示例符合规范，但不鼓励使用，因为第一个标题的标题级别不是 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. 来自维护人员的求助
  2. 羽毛
4.3.11.3 向用户公开大纲

鼓励用户代理向用户公开页面大纲， 以帮助导航。这对于非视觉媒体尤其如此，例如屏幕阅读器。

例如，用户代理可以按如下方式映射方向键：

Shift + ← 左
转到上一个标题
Shift + → 右
转到下一个标题
Shift + ↑ 上
转到下一个级别比 当前标题级别小一的标题
Shift + ↓ 下
转到下一个级别与 当前标题级别相同的标题

4.3.12 用法摘要

本节为非规范性内容。

元素 用途
示例
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>
 <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 文档或应用程序中的通用章节。 在此上下文中，章节是内容的主题分组，通常带有 标题。 
<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>
 <p><a href="/">Home</a>
 <p><a href="/biog.html">Bio</a>
 <p><a href="/discog.html">Discog</a>
</nav>
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>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>
 <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 一组介绍性或导航 辅助内容。 
<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 元素的页脚。 页脚通常包含有关其章节的信息，例如作者、相关文档的链接、 版权数据等。 
<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 本身是一个独立事物。 但如何知道哪个是哪个？多数情况下，真正的答案是“这取决于作者的意图”。

例如，可以设想一本书具有一个“Granny Smith”章节，其中只写着“These juicy, green apples make a great filling for apple pies.”；这将是一个 section， 因为其中还会有许多关于（也许）其他苹果种类的章节。

另一方面，可以设想一条推文、reddit 评论、tumblr 帖子或报纸 分类广告，其中只写着“Granny Smith. These juicy, green apples make a great filling for apple pies.”；那么它们将是 article， 因为那就是全部内容。

对文章的评论不属于它所评论的 article， 因此它本身就是一个 article。

4.4 分组内容

4.4.1 p 元素

Element/p

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
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+
类别：
流式内容。
可感知内容。
可以使用此元素的 上下文：
预期流式内容的位置。
作为 hgroup 元素的子级。
内容模型：
短语内容。
text/html 中的 标签省略：
如果 p 元素后面紧跟 一个 p 元素，并且该元素后面紧跟 一个 address、article、 aside、blockquote、details、dialog、 div、dl、fieldset、figcaption、 figure、footer、form、h1、 h2、 h3、 h4、 h5、 h6、 header、 hgroup、hr、main、menu、nav、 ol、p、pre、search、section、 table 或 ul 元素，则可以省略其结束标签；或者，如果父 元素中没有更多内容，并且父元素是一个HTML 元素， 且不是 一个 a、audio、del、ins、map、 noscript 或 video 元素，也不是一个自主自定义 元素。
内容属性：
全局属性
无障碍注意事项：
针对作者。
针对实现者。
净化：
默认。
DOM 接口：
[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 元素的子级。因此，当一个句子 包含项目符号列表时，人们可能会想知道 应当如何标记它。

例如，这个奇妙的句子包含与以下内容有关的项目符号：

并将在下文进一步讨论。

解决办法是认识到，在 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 中的 标签省略：
无结束标签。
内容属性：
全局属性
无障碍考虑：
面向作者。
面向实现者。
清理：
默认。
DOM 接口：
[Exposed=Window]
interface HTMLHRElement : HTMLElement {
  [HTMLConstructor] constructor();

  // 还具有已废弃成员
};

hr 元素表示一个段落级主题 分隔，例如故事中的场景变化，或参考书某一节内向另一个主题的过渡；或者，它表示 select 元素的一组选项之间的分隔符。

以下虚构的项目手册摘录展示了两个使用 hr 元素分隔节内主题的章节。 

<section>
 <h1>通信</h1>
 <p>通信方式多种多样。本节介绍项目所使用的若干
 重要通信方式。</p>
 <hr>
 <p>通信石似乎总是成对出现，并具有神秘的
 特性：</p>
 <ul>
  <li>单独使用时，一旦激活，它们可以双向传递
  思想。</li>
  <li>与另一台设备配合使用时，它们可以将一个人的
  意识转移到另一个身体中。</li>
  <li>如果两块石头都与另一台设备配合使用，
  两人的意识将交换身体。</li>
 </ul>
 <hr>
 <p>无线电使用米级以及更长波长范围内的
 电磁频谱。</p>
 <hr>
 <p>信号弹使用纳米级范围内的
 电磁频谱。</p>
</section>
<section>
 <h1>食物</h1>
 <p>项目中的所有食物均实行配给：</p>
 <dl>
  <dt>土豆</dt>
  <dd>每天两个</dd>
  <dt>汤</dt>
  <dd>每天一碗</dd>
 </dl>
 <hr>
 <p>烹饪工作由厨师按照固定轮班表完成。</p>
</section>

各章节本身之间不需要使用 hr 元素，因为 section 元素和 h1 元素本身隐含了主题变化。

以下摘自彼得·F·汉密尔顿所著的《潘多拉之星》，展示了场景转换之前的两个 段落以及其后的段落。在印刷书籍中，场景转换表现为第二个 与第三个段落之间的一块空白区域，其中有一颗孤立居中的星；此处使用 hr 元素表示。

<p>达德利九十二岁，正处于他的第二次生命中，并且很快就要
再次接受返老还童。尽管他的身体拥有标准五十岁者的生理
年龄，但在学术界进行一场漫长而令人屈辱的
斗争，仍是他恐惧面对的事情。对于一个
号称先进的文明而言，星际联邦有时却
落后得骇人，更不用说残酷了。</p>
<p><i>也许事情不会那么糟</i>，他对自己说。这个谎言
带来的安慰足以让他熬过当晚余下的
值班时间。</p>
<hr>
<p>黎明刚过，卡尔顿全地形车便载着达德利回家。和这位
天文学家一样，这辆车又旧又破，但仍完全能够
完成自己的工作。它装有廉价的柴油发动机，在
格拉蒙德这样的半边疆世界十分常见，不过它的驱动阵列却是
完全现代化的光神经处理器。凭借高悬架和
深纹轮胎，它能在各种天气和季节中沿着通往
天文台的土路前行，包括格拉蒙德冬季深达一米的
积雪。</p>

hr 元素不会 影响文档的 大纲。

4.4.3 pre 元素

Element/pre

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
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 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
无障碍考虑：
面向作者。
面向实现者。
清理：
默认。
DOM 接口：
[Exposed=Window]
interface HTMLPreElement : HTMLElement {
  [HTMLConstructor] constructor();

  // 还具有已废弃成员
};

pre 元素表示一个预格式化文本块，其中的 结构通过排版约定而不是元素来表示。

在HTML 语法中，紧跟在 pre 元素开始标签之后的 起始换行符会被移除。

可以使用 pre 元素的一些情况示例：

建议作者考虑当格式丢失时用户会如何体验预格式化文本， 语音合成器、盲文显示器等设备的用户便会遇到这种情况。对于 ASCII 艺术之类的情况， 替代呈现形式（例如文本描述）可能更便于文档的 所有读者访问。

若要表示计算机代码块，可以将 pre 元素与 code 元素结合使用；若要表示 计算机输出块，可以将 pre 元素 与 samp 元素结合使用。 类似地，可以在 pre 元素 内使用 kbd 元素，以指示 用户需要输入的文本。

此元素具有涉及双向文本算法的 渲染要求。

以下代码片段展示了一个计算机代码示例。

<p>这是 <code>Panel</code> 构造函数：</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 元素的内容中，以 展示一次《魔域 I》游戏过程。 

<pre><samp>你身处一片开阔的田野，西边是一座前门被木板封住的
白色大房子。
这里有一个小邮箱。

></samp> <kbd>打开邮箱</kbd>

<samp>打开邮箱后发现：
一张传单。

></samp></pre>

以下展示了一首当代诗歌，它使用 pre 元素保留其 不寻常的格式，而这种格式本身就是该诗不可分割的一部分。

<pre>                maxling

我怀着一颗          沉重的
               心

承认失去了一只猫
        如此         深爱

一位朋友消失在
        未知之中
                                （夜）

~cdr 11dec07</pre>

4.4.4 blockquote 元素

Element/blockquote

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
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 — 指向 引用来源或有关编辑的更多信息的链接
无障碍考虑：
面向作者。
面向实现者。
清理：
默认，带有 cite 属性。
DOM 接口：
[Exposed=Window]
interface HTMLQuoteElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, ReflectURL] 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>[简]随后说她喜欢……鱼。</p>
</blockquote>

引用的署名信息（如有）必须放在 blockquote 元素之外。

例如，此处的署名信息位于引用之后的一个段落中：

<blockquote>
 <p>我认为我们都是无神论者。只不过我比你少相信
 一个神。当你理解自己为何否定所有其他
 可能存在的神时，你也会理解我为何否定你所信的神。</p>
</blockquote>
<p>— 斯蒂芬·罗伯茨</p>

下面的其他示例展示了其他署名方式。

此处将 blockquote 元素与 figure 元素及其 figcaption 结合使用，以 明确关联引用及其署名信息（署名信息 不属于引用内容，因此不应放在 blockquote 本身内部）：

<figure>
 <blockquote>
  <p>真相可能令人困惑。理解它可能需要付出一些努力。
  它可能违反直觉，可能与根深蒂固的
  偏见相冲突，也可能与我们迫切希望
  成真的事物并不一致。但我们的偏好并不能决定何为真相。我们有一种
  方法，而这种方法帮助我们抵达的并非绝对真理，而只是
  渐近地接近真理——永远无法真正抵达，只会越来越
  接近，同时不断发现大片尚未探索的
  可能性海洋。精心设计的实验是关键。</p>
 </blockquote>
 <figcaption>卡尔·萨根，摘自《<cite>惊奇与怀疑主义</cite>》，刊载于
 《<cite>怀疑论调查者</cite>》第 19 卷第 1 期（1995 年
 1—2 月）</figcaption>
</figure>

下一个示例展示了将 cite 与 blockquote 配合使用： 

<p>他的下一首作品有一个恰如其分的名称——<cite>十四行诗第 130 首</cite>：</p>
<blockquote cite="https://quotes.example.org/s/sonnet130.html">
  <p>我情人的眼睛一点也不像太阳，<br>
  珊瑚远比她双唇的红色更红，<br>
  ……

此示例展示了论坛帖子如何使用 blockquote 来显示用户 正在回复的帖子。每个帖子都使用 article 元素， 以标记帖子之间的 线程关系。

<article>
 <h1><a href="https://bacon.example.com/?blog=109431">撬棍上的培根</a></h1>
 <article>
  <header><strong>t3yw</strong> 12 分，1 小时前</header>
  <p>我敢说独角鲸肯定会喜欢那个。</p>
  <footer><a href="?pid=29578">永久链接</a></footer>
  <article>
   <header><strong>greg</strong> 8 分，1 小时前</header>
   <blockquote><p>我敢说独角鲸肯定会喜欢那个。</p></blockquote>
   <p>老兄，独角鲸不吃培根。</p>
   <footer><a href="?pid=29579">永久链接</a></footer>
   <article>
    <header><strong>t3yw</strong> 15 分，1 小时前</header>
    <blockquote>
     <blockquote><p>我敢说独角鲸肯定会喜欢那个。</p></blockquote>
     <p>老兄，独角鲸不吃培根。</p>
    </blockquote>
    <p>接下来你是不是还要说它们也没有斗篷和巫师
    帽！</p>
    <footer><a href="?pid=29580">永久链接</a></footer>
    <article>
     <article>
      <header><strong>boing</strong> -5 分，1 小时前</header>
      <p>独角鲸比天花板猫还糟糕</p>
      <footer><a href="?pid=29581">永久链接</a></footer>
     </article>
    </article>
   </article>
  </article>
  <article>
   <header><strong>fred</strong> 1 分，23 分钟前</header>
   <blockquote><p>我敢说独角鲸肯定会喜欢那个。</p></blockquote>
   <p>我敢说它们也会喜欢剥香蕉。</p>
   <footer><a href="?pid=29582">永久链接</a></footer>
  </article>
 </article>
</article>

此示例展示了将 blockquote 用于 短片段，说明 不一定要在 blockquote 元素内使用 p 元素：

<p>他的“经验教训”列表以下列内容开头：</p>
<blockquote>绝不能想当然地认为自己对
问题的看法会得到认可，更不能认为其
优点会得到承认。</blockquote>
<p>他继续列举了一些类似的观点，最后写道：</p>
<blockquote>最后，应当随时做好谈判
破裂的准备，而不能因这种可能性
而退缩。</blockquote>
<p>下面我们将讨论这些观点……

后面的章节展示了如何表示对话的示例； 不应为此目的使用 cite 和 blockquote 元素。

4.4.5 ol 元素

Element/ol

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLOListElement

所有当前引擎均支持。

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 — 列表标记的类型
无障碍考虑：
面向作者。
面向实现者。
清理：
默认，带有 reversed、start、type 属性。
DOM 接口：
[Exposed=Window]
interface HTMLOListElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute boolean reversed;
  [CEReactions, Reflect, ReflectDefault=1] attribute long start;
  [CEReactions, Reflect] attribute DOMString type;

  // 还具有已废弃成员
};

ol 元素表示一个项目列表，其中的项目经过 有意排序，以致更改其顺序将改变文档的含义。

列表的项目是 li 元素的子节点，这些子节点属于 ol 元素，并按树顺序排列。

Element/ol#attr-reversed

所有当前引擎均支持。

Firefox18+Safari6+Chrome18+
Opera?Edge79+
Edge（旧版）≤79+Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

reversed 属性 是一个布尔属性。如果存在，则 表示该列表是降序列表 （……、3、2、1）。如果省略该属性，则列表为升序列表（1、2、3、……）。

如果存在 start 属性， 则其必须是一个有效整数。它用于 确定列表的起始值。

ol 元素具有一个起始值，它是 按如下方式确定的整数：

  1. 如果 ol 元素具有 start 属性：

    1. 令 parsed 为将 属性值解析为整数的结果。

    2. 如果 parsed 不是错误，则返回 parsed。

  2. 如果 ol 元素具有 reversed 属性，则返回其拥有的 li 元素数量。

  3. 返回 1。

type 属性可用于 在标记类型有意义的情况下，指定列表中使用的标记类型（例如， 因为项目将通过其编号或字母被引用）。 如果指定了该属性， 则其值必须与下表某一行 第一个单元格中给出的字符之一相同。type 属性表示其属性值与第一列 单元格匹配的那一行第二 列单元格中给出的状态；如果没有任何单元格匹配，或者 省略了该属性，则该属性表示十进制状态。

关键字 状态 描述 值为 1—3 和 3999—4001 时的示例
1 (U+0031) decimal 十进制数字 1. 2. 3. …… 3999. 4000. 4001. ……
a (U+0061) lower-alpha 小写拉丁字母 a. b. c. …… ewu. ewv. eww. ……
A (U+0041) upper-alpha 大写拉丁字母 A. B. C. …… EWU. EWV. EWW. ……
i (U+0069) lower-roman 小写罗马数字 i. ii. iii. …… mmmcmxcix. i̅v̅. i̅v̅i. ……
I (U+0049) upper-roman 大写罗马数字 I. II. III. …… MMMCMXCIX. I̅V̅. I̅V̅I. ……

用户代理应以与 ol 元素的 type 属性状态一致的方式渲染列表项目。小于 或等于零的数字应始终使用十进制系统，而不考虑 type 属性。

对于 CSS 用户代理，本属性到 'list-style-type' CSS 属性的映射在渲染 章节中给出（该映射很直接：上述状态与其 对应的 CSS 值具有相同的名称）。

可以重新定义 CSS 用户代理用于实现本属性的默认 CSS 列表样式； 这样做将影响列表项目的渲染方式。

由于 [ReflectDefault]， 在省略 start 内容 属性并指定 reversed 内容属性的情况下， start IDL 属性不一定 与列表的起始值一致。

以下标记展示了一个顺序很重要的列表，因此使用 ol 元素是合适的。将此列表与 ul 章节中的等效列表进行比较，可查看使用 ul 元素表示相同项目的示例。 

<p>我曾在以下国家生活过（按照我
首次在那里生活的时间排序）：</p>
<ol>
 <li>瑞士
 <li>英国
 <li>美国
 <li>挪威
</ol>

请注意，更改列表顺序会改变文档的含义。在以下 示例中，更改前两个项目的相对顺序改变了 作者的出生地：

<p>我曾在以下国家生活过（按照我
首次在那里生活的时间排序）：</p>
<ol>
 <li>英国
 <li>瑞士
 <li>美国
 <li>挪威
</ol>

4.4.6 ul 元素

Element/ul

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
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 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
无障碍考虑：
面向作者。
面向实现者。
清理：
默认。
DOM 接口：
[Exposed=Window]
interface HTMLUListElement : HTMLElement {
  [HTMLConstructor] constructor();

  // 还具有已废弃成员
};

ul 元素表示一个项目列表，其中项目的 顺序并不重要——也就是说，更改顺序不会实质性地改变 文档的含义。

列表的项目是 li 元素的子节点，这些子节点属于 ul 元素。

以下标记展示了一个顺序无关紧要的列表，因此 使用 ul 元素是 合适的。将此列表与 ol 章节中的等效列表比较，可查看 使用 ol 元素表示相同项目的示例。 

<p>我曾在以下国家生活过：</p>
<ul>
 <li>挪威
 <li>瑞士
 <li>英国
 <li>美国
</ul>

请注意，更改列表顺序不会改变文档的含义。上面 代码片段中的项目按字母顺序给出，而下面的代码片段则 按照它们在 2007 年的当前账户余额大小排列，但这完全没有改变 文档的含义：

<p>我曾在以下国家生活过：</p>
<ul>
 <li>瑞士
 <li>挪威
 <li>英国
 <li>美国
</ul>

4.4.7 menu 元素

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+
类别：
流式内容。
如果元素的子项中至少包含一个 li 元素：可感知内容。
可以使用此 元素的上下文：
预期流式内容之处。
内容模型：
零个或多个 li 元素和脚本支持 元素。
text/html 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
无障碍考虑：
面向作者。
面向实现者。
清理：
默认。
DOM 接口：
[Exposed=Window]
interface HTMLMenuElement : HTMLElement {
  [HTMLConstructor] constructor();

  // 还具有已废弃成员
};

menu 元素表示一个由其内容组成的工具栏，其形式为 项目的无序列表（由 li 元素表示），其中每个项目 表示用户可以执行或激活的命令。

menu 元素 只是 ul 的语义替代方案，用于表示命令的无序列表（“工具栏”）。

在此示例中，文本编辑应用程序使用 menu 元素提供一 系列编辑命令：

<menu>
 <li><button onclick="copy()"><img src="copy.svg" alt="复制"></button></li>
 <li><button onclick="cut()"><img src="cut.svg" alt="剪切"></button></li>
 <li><button onclick="paste()"><img src="paste.svg" alt="粘贴"></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 元素内。
位于 menu 元素内。
内容模型：
流式内容。
text/html 中的 标签省略：
如果 li 元素后紧跟着 另一个 li 元素，或者 父元素中已无更多内容，则可以省略该 li 元素的结束标签。
内容属性：
全局属性
如果该元素不是 ul 或 menu 元素的子项：value — 列表项目的序数值
无障碍考虑：
面向作者。
面向实现者。
清理：
默认，带有 value 属性。
DOM 接口：
[Exposed=Window]
interface HTMLLIElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute long value;

  // 还具有已废弃成员
};

li 元素表示一个列表项目。如果其父元素是 ol、ul 或 menu 元素，则按照这些元素的 定义，该元素是父元素列表中的一个 项目。否则，该列表项目与任何其他 li 元素之间没有已定义的 列表相关关系。

如果存在 value 属性， 则其必须是一个有效整数。当 li 的列表所有者是 ol 元素时，它用于 确定列表项目的序数 值。

任何其 'display' 的计算值 为 'list-item' 的元素都具有一个 列表所有者，其按如下方式确定：

  1. 如果元素未正在渲染，则返回 null；该元素没有 列表所有者。

  2. 令 ancestor 为元素的父元素。

  3. 如果元素具有 ol、 ul 或 menu 祖先，则将 ancestor 设置为距离最近的此类祖先元素。

  4. 返回 ancestor 的最近包含性祖先中生成 CSS 盒的那个元素。

    此类元素始终存在，因为至少文档 元素始终会生成一个 CSS 盒。

要确定给定列表 所有者 owner 所拥有的每个元素的序数值，请执行以下步骤：

  1. 令 i 为 1。

  2. 如果 owner 是 ol 元素，则令 numbering 为 owner 的起始值。 否则，令 numbering 为 1。

  3. 循环：如果 i 大于owner 所拥有的列表项目数量，则返回；owner 所拥有的所有列表项目都已被 分配序数值。

  4. 令 item 为 owner 所拥有的列表项目中按树顺序排列的第 i 个。

  5. 如果 item 是具有 value 属性的 li 元素：

    1. 令 parsed 为将 属性值解析为整数的结果。

    2. 如果 parsed 不是错误，则将 numbering 设置为 parsed。

  6. item 的序数值为 numbering。

  7. 如果 owner 是 ol 元素，并且 owner 具有 reversed 属性，则将 numbering 减 1； 否则，将 numbering 加 1。

  8. 将 i 加 1。

  9. 转到标记为循环的步骤。

元素的 value IDL 属性并不 直接对应于其序数值；它只是反映 内容属性。例如，给定以下列表： 

<ol>
 <li>项目 1
 <li value="3">项目 3
 <li>项目 4
</ol>

序数值为 1、3 和 4，而 value IDL 属性在 获取时返回 0、3、0。

以下示例按倒序列出了排名前十的电影。请注意如何通过使用 figure 元素及其 figcaption 元素为列表添加标题。

<figure>
 <figcaption>史上十大电影</figcaption>
 <ol>
  <li value="10"><cite>《乔茜与小猫乐队》</cite>，2001</li>
  <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>，1998</li>
  <li value="8"><cite>《虫虫危机》</cite>，1998</li>
  <li value="7"><cite>《玩具总动员》</cite>，1995</li>
  <li value="6"><cite>《怪兽电力公司》</cite>，2001</li>
  <li value="5"><cite>《赛车总动员》</cite>，2006</li>
  <li value="4"><cite>《玩具总动员 2》</cite>，1999</li>
  <li value="3"><cite>《海底总动员》</cite>，2003</li>
  <li value="2"><cite>《超人总动员》</cite>，2004</li>
  <li value="1"><cite>《料理鼠王》</cite>，2007</li>
 </ol>
</figure>

也可以按如下方式编写标记，在 ol 元素上使用 reversed 属性：

<figure>
 <figcaption>史上十大电影</figcaption>
 <ol reversed>
  <li><cite>《乔茜与小猫乐队》</cite>，2001</li>
  <li><cite lang="sh">Црна мачка, бели мачор</cite>，1998</li>
  <li><cite>《虫虫危机》</cite>，1998</li>
  <li><cite>《玩具总动员》</cite>，1995</li>
  <li><cite>《怪兽电力公司》</cite>，2001</li>
  <li><cite>《赛车总动员》</cite>，2006</li>
  <li><cite>《玩具总动员 2》</cite>，1999</li>
  <li><cite>《海底总动员》</cite>，2003</li>
  <li><cite>《超人总动员》</cite>，2004</li>
  <li><cite>《料理鼠王》</cite>，2007</li>
 </ol>
</figure>

虽然在 li 元素内包含标题元素（例如 h1） 是符合要求的，但这很可能无法 传达作者所意图的语义。标题会开始一个新章节，因此列表中的标题会隐式地将列表拆分为 横跨多个章节的内容。

4.4.9 dl 元素

Element/dl

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
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 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
无障碍考虑：
面向作者。
面向实现者。
清理：
默认。
DOM 接口：
[Exposed=Window]
interface HTMLDListElement : HTMLElement {
  [HTMLConstructor] constructor();

  // 还具有已废弃成员
};

dl 元素表示一个由零个或 多个名称-值组组成的关联列表（描述列表）。名称-值组由一个或多个名称 （dt 元素，可能作为 div 元素子项的子项）后跟 一个或多个值（dd 元素， 可能作为 div 元素子项的子项）组成；确定时忽略除 dt 和 dd 元素子项，以及作为 div 元素 子项之子项的 dt 和 dd 元素之外的任何节点。在单个 dl 元素内，每个名称不应有多个 dt 元素。

名称-值组可以是术语与定义、元数据主题与值、问题与 答案，或任何其他名称-值数据组。

组内的值是可选方案；构成同一个值的多个段落 必须全部放在同一个 dd 元素内。

组列表的顺序，以及每个组中名称和值的顺序，都可能 具有重要意义。

为了使用微数据属性为组添加注释，或者应用 适用于整个组的其他全局 属性，又或者仅出于样式目的，可以将 dl 元素中的每个组包装在 div 元素中。这不会改变 dl 元素的语义。

dl 元素 dl 的名称-值组使用 以下算法确定。名称-值组具有一个名称（dt 元素列表，初始 为空）和一个值（dd 元素列表，初始为空）。

  1. 令 groups 为空的名称-值组列表。

  2. 令 current 为一个新的名称-值组。

  3. 令 seenDd 为 false。

  4. 令 child 为 dl 的第一个 子节点。

  5. 令 grandchild 为 null。

  6. 当 child 不为 null 时：

    1. 如果 child 是 div 元素：

      1. 令 grandchild 为 child 的第一个 子节点。

      2. 当 grandchild 不为 null 时：

        1. 为 grandchild 处理 dt 或 dd。

        2. 将 grandchild 设置为 grandchild 的下一个 兄弟节点。

    2. 否则，为 child 处理 dt 或 dd。

    3. 将 child 设置为 child 的下一个 兄弟节点。

  7. 如果 current 不为空，则将 current 追加到 groups。

  8. 返回 groups。

为节点 node 处理 dt 或 dd 意味着 遵循以下步骤：

  1. 令 groups、current 和 seenDd 为 调用这些步骤的算法中同名的变量。

  2. 如果 node 是 dt 元素：

    1. 如果 seenDd 为 true，则将 current 追加到 groups，将 current 设置为一个新的名称-值组，并将 seenDd 设置为 false。

    2. 将 node 追加到 current 的名称中。

  3. 否则，如果 node 是 dd 元素，则将 node 追加到 current 的值中，并将 seenDd 设置为 true。

当名称-值组的名称或值为空列表时，通常是由于 错误地用 dd 元素代替 dt 元素，或反之。 一致性检查器可以发现此类错误，并且可能能够建议作者如何 正确使用标记。

在以下示例中，一个条目（“作者”）关联到两个值（“John”和 “Luke”）。

<dl>
 <dt> 作者
 <dd> John
 <dd> Luke
 <dt> 编辑
 <dd> Frank
</dl>

在以下示例中，一个定义关联到两个术语。

<dl>
 <dt lang="en-US"> <dfn>color</dfn> </dt>
 <dt lang="en-GB"> <dfn>colour</dfn> </dt>
 <dd>一种感觉，它（在人类中）源自
 眼睛的精细结构区分同一视图的三种不同
 滤波分析结果的能力。</dd>
</dl>

以下示例说明如何使用 dl 元素标记某种 元数据。在示例末尾，一个组具有两个元数据标签（“作者”和“编辑”） 以及两个值（“Robert Rothman”和“Daniel Jackson”）。此示例还在 dt 和 dd 元素的组外使用 div 元素，以便 设置样式。 

<dl>
 <div>
  <dt> 最后修改时间 </dt>
  <dd> 2004-12-23T23:33Z </dd>
 </div>
 <div>
  <dt> 建议更新间隔 </dt>
  <dd> 60s </dd>
 </div>
 <div>
  <dt> 作者 </dt>
  <dt> 编辑 </dt>
  <dd> Robert Rothman </dd>
  <dd> Daniel Jackson </dd>
 </div>
</dl>

以下示例展示了使用 dl 元素给出一组 指令。 此处指令的顺序很重要（在其他示例中，各块的顺序 并不重要）。

<p>按如下方式确定胜利点数（使用
第一个匹配的情况）：</p>
<dl>
 <dt> 如果你恰好有五枚金币 </dt>
 <dd> 你获得五个胜利点 </dd>
 <dt> 如果你有一枚或多枚金币，并且有一枚或多枚银币 </dt>
 <dd> 你获得两个胜利点 </dd>
 <dt> 如果你有一枚或多枚银币 </dt>
 <dd> 你获得一个胜利点 </dd>
 <dt> 否则 </dt>
 <dd> 你不会获得胜利点 </dd>
</dl>

以下代码片段展示了将 dl 元素用作术语表。请注意使用 dfn 来指示正在 定义的词。 

<dl>
 <dt><dfn>Apartment</dfn>，名词</dt>
 <dd>将一个或多个线程与一个或
 多个 COM 对象分组的执行上下文。</dd>
 <dt><dfn>Flat</dfn>，名词</dt>
 <dd>漏气的轮胎。</dd>
 <dt><dfn>Home</dfn>，名词</dt>
 <dd>用户的登录目录。</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 Explorer是
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 元素，则可以省略该 dt 元素的结束标签。
内容属性：
全局属性
无障碍考虑：
面向作者。
面向实现者。
清理：
默认。
DOM 接口：
使用 HTMLElement。

dt 元素表示描述列表（dl 元素）中 术语-描述组的术语或名称部分。

dt 元素本身 在 dl 元素中使用时， 并不表示其内容是正在定义的术语，但可以使用 dfn 元素表明这一点。

此示例展示了使用 dt 元素标记问题，并使用 dd 元素标记答案的 常见问题列表（FAQ）。 

<article>
 <h1>常见问题</h1>
 <dl>
  <dt>我们想要什么？</dt>
  <dd>我们的数据。</dd>
  <dt>我们什么时候要？</dt>
  <dd>现在。</dd>
  <dt>数据在哪里？</dt>
  <dd>我们不确定。</dd>
 </dl>
</article>

4.4.11 dd 元素

Element/dd

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别：
无。
可以使用此元素的 上下文：
位于 dl 元素内的 dt 或 dd 元素之后。
位于作为 dl 元素子项的 div 元素内的 dt 或 dd 元素之后。
内容模型：
流式内容。
text/html 中的 标签省略：
如果 dd 元素后紧跟着 另一个 dd 元素或一个 dt 元素，或者父元素中 已无更多内容，则可以省略该 dd 元素的结束标签。
内容属性：
全局属性
无障碍考虑：
面向作者。
面向实现者。
清理：
默认。
DOM 接口：
使用 HTMLElement。

dd 元素表示描述列表（dl 元素）中 术语-描述组的描述、定义或值部分。

dl 可用于定义类似字典的 词汇表。在以下示例中，每个由包含 dfn 的 dt 给出的条目都有多个 dd，用于展示定义的 各个部分。 

<dl>
 <dt><dfn>幸福</dfn></dt>
 <dd class="pronunciation">/ˈhæpinəs/</dd>
 <dd class="part-of-speech"><i><abbr>名词</abbr></i></dd>
 <dd>感到幸福的状态。</dd>
 <dd>好运；成功。<q>啊，真<b>幸福</b>！成功了！</q></dd>
 <dt><dfn>欣喜</dfn></dt>
 <dd class="pronunciation">/rɪˈdʒɔɪs/</dd>
 <dd><i class="part-of-speech"><abbr>不及物动词</abbr></i> 自己感到高兴。</dd>
 <dd><i class="part-of-speech"><abbr>及物动词</abbr></i> 使某人感到高兴。</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>在 <a href="#l4">清单 4</a> 中，我们可以看到主要核心接口的
API 声明。</p>
<figure id="l4">
 <figcaption>清单 4。主要核心接口的 API 声明。</figcaption>
 <pre><code>interface PrimaryCore {
 boolean verifyDataLine();
 undefined sendData(sequence&lt;byte> data);
 undefined initSelfDestruct();
}</code></pre>
</figure>
<p>该 API 被设计为使用 UTF-8。</p>

这里我们看到使用 figure 元素标记作为页面主要内容的照片（如画廊中所示）。

<!DOCTYPE HTML>
<html lang="en">
<title>工作中的 Bubbles — 我的画廊™</title>
<figure>
 <img src="bubbles-work.jpeg"
      alt="Bubbles 坐在办公室椅子上，专注地处理他的
           最新项目。">
 <figcaption>工作中的 Bubbles</figcaption>
</figure>
<nav><a href="19414.html">上一张</a> — <a href="19416.html">下一张</a></nav>

在此示例中，我们可以看到一个不是图的图像，以及另一个图像和一个 视频，它们都是图。第一个图像实际上是示例第二句话的一部分，因此它不是 独立单元，所以不适合使用 figure。 

<h2>Malinko 的漫画</h2>

<p>此案围绕某种与漫画有关的“知识产权”
侵权展开（见证物 A）。诉讼是在一则以以下文字结尾的
预告片播出后开始的：

<blockquote>
 <img src="promblem-packed-action.png" alt="粗糙副本！充满问题的动作场面！">
</blockquote>

<p>……播出了。一名带着更大笔记本的律师使用雪球
发动了先发制人的攻击。预告片的完整副本
随证物 B 一并提供。

<figure>
 <img src="ex-a.png" alt="一张脏纸上的两条曲线。">
 <figcaption>证物 A。被指控的《<cite>粗糙副本</cite>》漫画。</figcaption>
</figure>

<figure>
 <video src="ex-b.mov"></video>
 <figcaption>证物 B。《<cite>粗糙副本</cite>》预告片。</figcaption>
</figure>

<p>该案件在庭外和解。

此处使用 figure 标记诗歌的一部分。

<figure>
 <p>正值暮色，滑溜的托夫兽<br>
 在草地上旋转穿梭；<br>
 波罗哥夫鸟全都虚弱不堪，<br>
 而莫姆拉斯兽发出哀嚎。</p>
 <figcaption><cite>《炸脖龙》</cite>（第一节）。刘易斯·卡罗尔，1832—1898</figcaption>
</figure>

在此示例中，它可以是讨论一座城堡的更大型作品的一部分，嵌套的 figure 元素 用于为组提供整体说明文字，并为组中的每个图提供单独的说明文字： 

<figure>
 <figcaption>不同年代的城堡：依次为 1423 年、1858 年和 1999 年。</figcaption>
 <figure>
  <figcaption>蚀刻画。作者不详，约 1423 年。</figcaption>
  <img src="castle1423.jpeg" alt="城堡有一座塔楼，周围环绕着一堵高墙。">
 </figure>
 <figure>
  <figcaption>布面油画。Maria Towle，1858 年。</figcaption>
  <img src="castle1858.jpeg" alt="城堡现在有两座塔楼和两堵墙。">
 </figure>
 <figure>
  <figcaption>胶片照片。Peter Jankle，1999 年。</figcaption>
  <img src="castle1999.jpeg" alt="城堡已成废墟，只有原来的塔楼仍完整保留。">
 </figure>
</figure>

前一个示例也可以更简洁地写成如下形式（使用 title 属性代替嵌套的 figure/figcaption 对）： 

<figure>
 <img src="castle1423.jpeg" title="蚀刻画。作者不详，约 1423 年。"
      alt="城堡有一座塔楼，周围环绕着一堵高墙。">
 <img src="castle1858.jpeg" title="布面油画。Maria Towle，1858 年。"
      alt="城堡现在有两座塔楼和两堵墙。">
 <img src="castle1999.jpeg" title="胶片照片。Peter Jankle，1999 年。"
      alt="城堡已成废墟，只有原来的塔楼仍完整保留。">
 <figcaption>不同年代的城堡：依次为 1423 年、1858 年和 1999 年。</figcaption>
</figure>

有时内容只会隐式地引用图：

<article>
 <h1>期限临近，国会财政谈判陷入僵局</h1>
 <figure>
  <img src="obama-reid.jpeg" alt="奥巴马和里德面带微笑，一同坐在椭圆形办公室中。">
  <figcaption>巴拉克·奥巴马和哈里·里德。白宫新闻照片。</figcaption>
 </figure>
 <p>周二，国会为结束财政僵局而进行的谈判断断续续，使参众两院都在寻找
 重新开放政府并提高国家举债权限的方法，而周四的最后期限正在临近。</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 元素以外其余内容的说明文字或图例。

该元素可以包含有关来源的附加信息：

<figcaption>
 <p>一只鸭子。</p>
 <p><small>照片由 🌟 新闻提供。</small></p>
</figcaption>
<figcaption>
 <p>三居室公寓的平均租金，不包括非营利公寓</p>
 <p>苏黎世统计局 — <time datetime=2017-11-14>2017 年 11 月 14 日</time></p>
</figcaption>

4.4.14 main 元素

Element/main

所有当前引擎均支持。

Firefox21+Safari7+Chrome26+
Opera16+Edge79+
Edge（旧版）12+Internet Explorer否
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 系统 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>系统十八</h1>
</header>
<nav>
 <a href="../16/">← 系统 17</a>
 <a href="../18/">RPXIX →</a>
</nav>
<aside>
 <p>这个系统没有生命值机制，因此也没有治疗。
</aside>
<main>
 <h2>创建角色</h2>
 <p>属性（魔法、力量、敏捷）按每级一点的成本购买。</p>
 <h2>掷骰</h2>
 <p>每次遭遇时，为你的所有技能掷骰。如果你的点数高于对手，你便获胜。</p>
</main>
<footer>
 <p>版权所有 © 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=/>首页</a>
 <a href=/about>关于</a>
 <a href=/contact>联系</a>
</nav>
<main>
 <h1>首页</h1>
 …
</main>
<main hidden>
 <h1>关于</h1>
 …
</main>
<main hidden>
 <h1>联系</h1>
 …
</main>
<footer>由 <a href=https://example.com/>Example 👻</a> 用 ❤️ 制作。</footer>

4.4.15 search 元素

Element/search

当前引擎均不支持。

Firefox否Safari否Chrome否
Opera否Edge否
Edge（旧版）否Internet Explorer否
Firefox Android?Safari iOS?Chrome Android否WebView Android?Samsung Internet?Opera Android?
类别：
流式内容。
可感知内容。
可以使用此 元素的上下文：
预期流式内容之处。
内容 模型：
流式内容。
text/html 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
无障碍考虑：
面向作者。
面向实现者。
清理：
默认。
DOM 接口：
使用 HTMLElement。

search 元素表示文档或应用程序中包含一组表单控件或其他 与执行搜索或筛选操作有关的内容的部分。这可以是搜索网站或应用程序；在当前网页上搜索或筛选 搜索结果的方式；或者全局或互联网范围的搜索功能。

不宜仅使用 search 元素来呈现 搜索结果，不过作为“快速搜索”结果一部分的建议和链接可以包含在搜索功能中。相反，返回的 搜索结果网页通常应作为该网页主要内容的一部分呈现。

在以下示例中，作者在网页的 header 中包含 一个搜索表单： 

<header>
  <h1><a href="/">我的精美博客</a></h1>
  ...
  <search>
    <form action="search.php">
      <label for="query">查找文章</label>
      <input id="query" name="q" type="search">
      <button type="submit">搜索！</button>
    </form>
  </search>
</header>

在此示例中，作者完全使用 JavaScript 实现了其 Web 应用程序的搜索功能。没有使用 form 元素执行服务器端提交， 但包含它的 search 元素在语义上 将后代内容的用途标识为表示搜索功能。

<search>
  <label>
    查找并筛选你的查询
    <input type="search" id="query">
  </label>
  <label>
    <input type="checkbox" id="exact-only">
    仅精确匹配
  </label>

  <section>
    <h3>找到的结果：</h3>
    <ul id="results">
      <li>
        <p><a href="services/consulting">咨询服务</a></p>
        <p>
          了解我们的综合顾问 Bob 和 Bob 如何帮助你改善业务。
        </p>
      </li>
      ...
    </ul>
    <!--
      当查询未返回任何结果或筛选掉所有结果时
      在此处渲染无结果消息
    -->
    <output id="no-results"></output>
  </section>
</search>

在以下示例中，页面具有两个搜索功能。第一个位于网页的 header 中，作为 搜索网站内容的全局机制。其用途由指定的 title 属性表明。第二个 作为页面主要内容的一部分，因为它表示搜索和筛选当前页面内容的机制。它包含 一个用于表明其用途的标题。 

<body>
  <header>
    ...
    <search title="网站">
      ...
    </search>
  </header>
  <main>
    <h1>你所在位置附近的酒店</h1>
     <search>
       <h2>筛选结果</h2>
       ...
     </search>
     <article>
      <!-- 搜索结果内容 -->
    </article>
  </main>
</body>

4.4.16 div 元素

Element/div

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
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 元素的子项。
作为 option 元素、optgroup 元素或 select 元素的后代。
内容模型：
如果该元素是 dl 元素的子项：一个或多个 dt 元素，后跟一个或多个 dd 元素，并可选择与脚本支持 元素混合。
否则，如果该元素是 option 元素、optgroup 元素或 select 元素的后代： 透明。
否则：流式内容。
text/html 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
无障碍考虑：
面向作者。
面向实现者。
清理：
默认。
DOM 接口：
[Exposed=Window]
interface HTMLDivElement : HTMLElement {
  [HTMLConstructor] constructor();

  // 还具有已废弃成员
};

div 元素完全没有特殊含义。 它表示其子项。它可以与 class、lang 和 title 属性配合使用，以标记 一组连续元素所共有的语义。它也可以在 dl 元素中使用，用于包装 dt 和 dd 元素组。

强烈建议作者将 div 元素视为 没有其他合适元素时才使用的最后手段。使用更合适的元素代替 div 元素，可以为 读者提供更好的无障碍体验，也使作者更容易维护内容。

例如，博客文章应使用 article 标记，章节使用 section，页面的 导航辅助内容使用 nav，而 一组表单控件使用 fieldset。

另一方面，div 元素可用于样式目的，或用于包装章节中需要以相同方式添加注释的多个段落。在以下 示例中，我们可以看到使用 div 元素一次性设置两个段落的语言，而不是分别在两个段落元素上设置语言：

<article lang="en-US">
 <h1>我的语言用法和我的猫</h1>
 <p>自从她离开后，我的猫的行为并没有太大变化，只不过
 她经常在邻居面前展示自己的新体形，试图让人
 抚摸她。</p>
 <div lang="en-GB">
  <p>我的另一只猫是黑白相间的，非常可爱。他今天跟着
  我们去了游泳池，和我们一起沿着人行道走。昨天
  他似乎拜访了我们的邻居。我想知道他是否意识到
  他们的公寓是我们公寓的镜像。</p>
  <p>嗯，我刚刚注意到，我在上一段中使用了英式
  英语。但我本应使用美式英语。因此我
  不该说“pavement”“flat”或“colour”……</p>
 </div>
 <p>我应该说“sidewalk”“apartment”和“color”！</p>
</article>

4.5 文本级语义

4.5.1 a 元素

Element/a

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
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+

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 Android12.1+

HTMLAnchorElement/relList

所有当前引擎均支持。

Firefox30+Safari9+Chrome65+
Opera?Edge79+
Edge（旧版）18Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别：
流式内容。
短语内容。
如果元素具有 href 属性：交互式内容。
可感知内容。
可以使用此元素的 上下文：
预期短语内容之处。
内容模型：
透明，但不得有交互式内容后代、 a 元素后代，或指定了 tabindex 属性的后代。
text/html 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
href — 超链接的地址
target — 用于 超链接导航的可导航对象
download — 是否下载资源而不是导航到该资源，以及在下载时使用的文件名
ping — 要 ping 的 URL
rel — 文档中包含 超链接的位置与目标资源之间的关系
hreflang — 链接资源的语言
type — 被引用资源 类型的提示
referrerpolicy — 由该元素发起的获取所使用的来源策略
无障碍考虑：
如果元素具有 href 属性：面向作者；面向实现者。
否则：面向作者；面向实现者。
清理：
默认，带有 href、hreflang 和 type 属性，以及 导航 URL 属性 href。
DOM 接口：
[Exposed=Window]
interface HTMLAnchorElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute DOMString download;
  [CEReactions, Reflect] attribute USVString ping;
  [CEReactions, Reflect] attribute DOMString rel;
  [SameObject, PutForwards=value, Reflect="rel"] readonly attribute DOMTokenList relList;

  [CEReactions] attribute DOMString text;

  [CEReactions] attribute DOMString referrerPolicy;

  // 还具有已废弃成员
};
HTMLAnchorElement includes HyperlinkElementUtils;
HTMLAnchorElement includes HTMLHyperlinkElementUtils;

如果 a 元素具有 href 属性， 则它表示一个由其内容标记的超链接（超文本锚点）。

如果 a 元素没有 href 属性， 则该元素表示一个占位符，用于表示在相关情况下 原本可能放置链接的位置，并且仅由该元素的内容组成。

如果不存在 href 属性，则必须省略 target、download、ping、rel、hreflang、type 和 referrerpolicy 属性。

如果在 a 元素上指定了 itemprop 属性，则还必须指定 href 属性。

如果某个站点在每个页面上使用一致的导航工具栏，那么通常会链接到页面自身的链接可以 使用不带链接地址的 a 元素进行标记：

<nav>
 <ul>
  <li> <a href="/">首页</a> </li>
  <li> <a href="/news">新闻</a> </li>
  <li> <a>示例</a> </li>
  <li> <a href="/legal">法律信息</a> </li>
 </ul>
</nav>

href、target、download、ping 和 referrerpolicy 属性会影响用户跟随超链接或 下载超链接时发生的情况， 这些超链接由 a 元素创建。rel、hreflang 和 type 属性可用于在用户跟随链接之前，向用户表明目标资源可能具有的性质。

a.text

与 textContent 相同。

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 属性的获取器必须返回此元素的后代文本内容。

text 属性的设置器必须使用给定值在 此元素中替换所有字符串。

a 元素可以包装整个段落、 列表、表格等，甚至整个章节，只要其中没有交互式内容（例如按钮或其他链接）。此示例展示了 如何利用这一点将整个广告块变成链接：

<aside class="advertising">
 <h1>广告</h1>
 <a href="https://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
   <h1>Mellblomatic 9000！</h1>
   <p>将你的所有小部件变成 mellblom！</p>
   <p>仅售 9.99 美元，另加运费和手续费。</p>
  </section>
 </a>
 <a href="https://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
   <h1>Mellblom 浏览器</h1>
   <p>以光速浏览 Web。</p>
   <p>没有其他浏览器速度更快！</p>
  </section>
 </a>
</aside>

以下示例展示了如何使用少量脚本，有效地将职位列表表格中的整行变成超链接：

<table>
 <tr>
  <th>职位
  <th>团队
  <th>地点
 <tr>
  <td><a href="/jobs/manager">经理</a>
  <td>远程团队
  <td>远程
 <tr>
  <td><a href="/jobs/director">总监</a>
  <td>远程团队
  <td>远程
 <tr>
  <td><a href="/jobs/astronaut">宇航员</a>
  <td>架构团队
  <td>远程
</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 Explorer是
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别：
流式内容。
短语内容。
可感知内容。
可以使用此元素的 上下文：
预期短语内容之处。
内容模型：
短语内容。
text/html 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
无障碍考虑：
面向作者。
面向实现者。
清理：
默认。
DOM 接口：
使用 HTMLElement。

em 元素表示对其内容的着重强调。

特定内容的强调程度由其祖先 em 元素的数量决定。

着重强调的位置会改变句子的含义。因此，该元素构成内容不可分割的一部分。 以这种方式使用强调的确切方法取决于语言。

以下示例展示了改变着重强调如何改变含义。首先是一项没有强调的一般事实陈述：

<p>猫是可爱的动物。</p>

强调第一个词后，该陈述暗示正在讨论的动物种类存在争议 （也许有人声称狗才是可爱的）：

<p><em>猫</em>是可爱的动物。</p>

将强调移到动词上，则突出整个句子的真实性存在争议 （也许有人说猫并不可爱）：

<p>猫<em>是</em>可爱的动物。</p>

将强调移到形容词上，则再次断言猫的确切性质 （也许有人认为猫是凶恶的动物）：

<p>猫是<em>可爱的</em>动物。</p>

同样，如果有人声称猫是蔬菜，纠正这一说法的人可能会强调最后一个词：

<p>猫是可爱的<em>动物</em>。</p>

通过强调整个句子，可以明确说话者正在竭力表达这一观点。这种着重强调通常也会 影响标点，因此此处使用感叹号。

<p><em>猫是可爱的动物！</em></p>

愤怒情绪与对“可爱”的强调相结合时，可能产生如下标记：

<p><em>猫是<em>可爱的</em>动物！</em></p>

em 元素不是通用的 “斜体”元素。有时，文本旨在从段落的其余部分中凸显出来，仿佛采用了不同的语气或声音。 对于这种情况，i 元素 更合适。

em 元素也不用于 表达重要性；为此，strong 元素更合适。

4.5.3 strong 元素

Element/strong

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别：
流式内容。
短语内容。
可感知内容。
可以使用此 元素的上下文：
预期短语内容之处。
内容 模型：
短语内容。
text/html 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
无障碍考虑：
面向作者。
面向实现者。
清理：
默认。
DOM 接口：
使用 HTMLElement。

strong 元素表示其内容具有高度重要性、严肃性或 紧迫性。

重要性：strong 元素可用于 标题、说明文字或段落中，以区分真正重要的部分与其他可能更详细、更轻松或仅为样板文字的部分。 （这不同于标记副标题，副标题适合使用 hgroup 元素。）

例如，上一段的第一个词使用 strong 标记， 以将其与段落其余部分中更详细的文本区分开来。

严肃性：strong 元素可用于 标记警告或注意事项。

紧迫性：strong 元素可用于 表示用户需要比文档其他部分更早看到的内容。

某段内容的相对重要程度由其祖先 strong 元素的 数量决定；每个 strong 元素都会提高 其内容的重要性。

使用 strong 元素改变一段 文本的重要性不会改变句子的含义。

此处，“章”一词和实际章节编号只是样板文字，而章节的实际名称使用 strong 标记：

<h1>第 1 章：<strong>实践</strong></h1>

在以下示例中，说明文字中的图表名称使用 strong 标记， 以将其与前面的样板文字和后面的描述区分开来： 

<figcaption>图 1。<strong>蚁群动态</strong>。该蚁群中的蚂蚁
受到热源（左上）和食物源（右下）的影响。</figcaption>

在此示例中，标题实际为“花、蜜蜂和蜂蜜”，但作者为标题添加了一段轻松诙谐的内容。 因此使用 strong 元素标记 第一部分，以将其与后一部分区分开来。

<h1><strong>花、蜜蜂和蜂蜜</strong>，以及其他我不理解的事物</h1>

以下是游戏中警告通知的示例，其中各部分按照其重要程度进行标记：

<p><strong>警告。</strong>这个地牢很危险。
<strong>避开鸭子。</strong>拿走你发现的所有金币。
<strong><strong>不要拿走任何钻石</strong>，
它们具有爆炸性，并且<strong>会摧毁十米范围内的
一切。</strong></strong>你已经收到警告。</p>

在此示例中，strong 元素用于 表示希望用户首先阅读的文本部分。

<p>欢迎使用提醒系统 Remy。</p>
<p>你今天的任务：</p>
<ul>
 <li><p><strong>关闭烤箱。</strong></p></li>
 <li><p>倒垃圾。</p></li>
 <li><p>洗衣服。</p></li>
</ul>

4.5.4 small 元素

Element/small

所有当前引擎均支持。

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。

small 元素表示小字等旁注。

小字通常包括免责声明、附加条件、法律限制或版权信息。小字有时也用于 署名，或满足许可要求。

small 元素不会“减弱强调”，也不会降低由 em 元素强调或由 strong 元素标记为重要的 文本的重要性。若要将文本标记为不强调或不重要，只需分别不使用 em 或 strong 元素标记即可。

small 元素不应 用于较长的文本范围，例如多个段落、列表或文本章节。它仅适用于短文本。例如，列出使用条款的 页面文本不适合使用 small 元素：在这种 情况下，该文本不是旁注，而是页面的主要内容。

small 元素不得 用于副标题；为此，应使用 hgroup 元素。

在此示例中，small 元素用于 表明酒店房间的价格中不包括增值税：

<dl>
 <dt>单人间
 <dd>199 欧元 <small>含早餐，不含增值税</small>
 <dt>双人间
 <dd>239 欧元 <small>含早餐，不含增值税</small>
</dl>

在第二个示例中，small 元素用于文章中的 旁注。

<p>Example Corp 今日宣布第二季度利润创下纪录
<small>（完整披露：Foo News 是
Example Corp 的子公司）</small>，由此引发了有关第三季度
与 Demo Group 合并的猜测。</p>

这不同于侧边栏，后者可能包含多个段落，并从文本的主要流中移出。在以下示例中， 我们可以看到同一篇文章中的侧边栏。该侧边栏也包含小字，用于表明侧边栏中信息的来源。

<aside>
 <h1>Example Corp</h1>
 <p>该公司主要创建小型软件和 Web
 站点。</p>
 <p>Example Corp 的公司使命是“以示例方式提供娱乐
 和新闻”。</p>
 <p><small>信息获取自 <a
 href="https://example.com/about.html">example.com</a> 首页。</small></p>
</aside>

在最后一个示例中，small 元素被标记为 重要小字。 

<p><strong><small>继续使用此服务将会得到一个吻。</small></strong></p>

4.5.5 s 元素

Element/s

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别：
流式内容。
短语内容。
可感知内容。
可以使用此元素的 上下文：
预期短语内容之处。
内容模型：
短语内容。
text/html 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
无障碍考虑：
面向作者。
面向实现者。
清理：
默认。
DOM 接口：
使用 HTMLElement。

s 元素表示不再准确或不再相关的内容。

s 元素不适合 用于表示文档编辑；若要标记已从文档中删除的一段文本，请使用 del 元素。

在此示例中，由于相关产品有了新的促销价，建议零售价被标记为不再相关。

<p>购买我们的冰茶和柠檬水！</p>
<p><s>建议零售价：每瓶 3.99 美元</s></p>
<p><strong>现仅售每瓶 2.99 美元！</strong></p>

4.5.6 cite 元素

Element/cite

所有当前引擎均支持。

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。

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>

当作品标题按惯例用 标点符号括起来时——例如，英语文章标题周围使用的引号，或日语书名周围使用的方头括号（『』）——这些标点符号并不是标题的一部分，应放在 cite 元素之外。

这是正确用法：

<p>My review of 『<cite lang="ja">阪急電車</cite>』 was titled “<cite>A cute series of short stories</cite>”.</p>

4.5.7 q 元素

Element/q

所有当前引擎均支持。

Firefox1+Safari3+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
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>那个人说：<q>不可能的事情只是需要
更长时间</q>。我不同意他的看法。</p>

以下示例既在 q 元素中包含明确的引用链接， 也在其外部包含明确的引用来源：

<p>W3C 页面<cite>《关于 W3C》</cite>称，W3C 的
使命是<q cite="https://www.w3.org/Consortium/">通过制定确保 Web
长期发展的协议和指南，充分发挥万维网的潜力</q>。我
不同意这一使命。</p>

在以下示例中，引文本身包含另一个引文：

<p>在<cite>《示例一》</cite>中，他写道：<q>那个人
说：<q>不可能的事情只是需要更长时间</q>。我
不同意他的看法</q>。嗯，我更不同意！</p>

在以下示例中，使用引号代替 q 元素：

<p>他最有力的论点是❝我不同意❞，而我
认为这很可笑。</p>

在以下示例中，没有引文——引号用于指称一个词。在这种情况下使用 q 元素是不合适的。

<p>“难以言喻”一词本可以用来描述因竞选活动管理不善
而造成的灾难。</p>

4.5.8 dfn 元素

Element/dfn

所有当前引擎均支持。

Firefox1+Safari6+Chrome15+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别：
流式内容。
短语内容。
可感知内容。
可以使用此元素的 上下文：
预期短语内容之处。
内容模型：
短语内容，但不得有 dfn 元素后代。
text/html 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
此外，title 属性在此元素上 具有特殊语义：完整术语或缩写的展开形式
无障碍考虑：
面向作者。
面向实现者。
清理：
默认。
DOM 接口：
使用 HTMLElement。

dfn 元素表示术语的定义实例。作为 dfn 元素最近祖先的段落、描述列表组或章节，还必须包含由 dfn 元素给出的术语的定义。

正在定义的术语：如果 dfn 元素具有 title 属性，则该属性的 确切值就是正在定义的术语。否则，如果它恰好包含一个元素子节点且不包含子 Text 节点，并且该子元素是具有 title 属性的 abbr 元素，则该属性的 确切值就是正在定义的术语。否则，由 dfn 元素的后代文本内容给出正在定义的术语。

如果存在 dfn 元素的 title 属性，则它必须仅包含 正在定义的术语。

祖先元素的 title 属性不会 影响 dfn 元素。

链接到 dfn 元素的 a 元素，表示由该 dfn 元素定义的术语的一个实例。

在以下片段中，术语“Garage Door Opener”首先在第一个段落中定义，然后在第二个段落中使用。 在这两种情况下，实际显示的都是其缩写。

<p><dfn><abbr title="Garage Door Opener">GDO</abbr></dfn>
是一种允许外星任务小组开启虹膜装置的设备。</p>
<!-- ……稍后在文档中： -->
<p>Teal'c 启动了他的 <abbr title="Garage Door Opener">GDO</abbr>，
于是 Hammond 下令开启虹膜装置。</p>

添加一个 a 元素后，可以明确 表示该引用：

<p><dfn id=gdo><abbr title="Garage Door Opener">GDO</abbr></dfn>
是一种允许外星任务小组开启虹膜装置的设备。</p>
<!-- ……稍后在文档中： -->
<p>Teal'c 启动了他的 <a href=#gdo><abbr title="Garage Door Opener">GDO</abbr></a>，
于是 Hammond 下令开启虹膜装置。</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><dfn id=whatwg><abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr></dfn>
是由 Web 浏览器制造商和相关各方组成的松散、非正式协作组织，
这些参与者希望开发新技术，使作者能够在万维网上编写和部署
应用程序。</p>

另一种写法如下：

<p><dfn id=whatwg>Web Hypertext Application Technology
Working Group</dfn>（<abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr>）
是由 Web 浏览器制造商和相关各方组成的松散、非正式协作组织，
这些参与者希望开发新技术，使作者能够在万维网上编写和部署
应用程序。</p>

此段落包含两个缩写。请注意，只有一个缩写得到定义；另一个缩写没有关联的展开形式， 因此未使用 abbr 元素。

<p>
<abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>
于 2004 年开始研究 HTML5。</p>

此段落将一个缩写链接到其定义。

<p><a href="#whatwg"><abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>
社区在亚洲的代表性不高。</p>

此段落标记了一个没有给出展开形式的缩写，可能是为了提供一个应用缩写样式 （例如小型大写字母）的挂钩。

<p>Philip` 和 Dashiva 都否认他们打算从规范的旧修订版中
获取议题数量，以回填 <abbr>WHATWG</abbr> 议题图表。</p>

如果缩写采用复数形式，则展开形式的语法数（复数或单数）必须与元素内容的语法数相匹配。

此处复数形式位于元素外部，因此展开形式使用单数：

<p>两个 <abbr title="Working Group">WG</abbr>s 参与了
此规范的制定：<abbr>WHATWG</abbr> 和
<abbr>HTMLWG</abbr>。</p>

此处复数形式位于元素内部，因此展开形式使用复数：

<p>两个 <abbr title="Working Groups">WGs</abbr> 参与了
此规范的制定：<abbr>WHATWG</abbr> 和
<abbr>HTMLWG</abbr>。</p>

缩写不一定必须使用此元素进行标记。预计它在以下情况下会很有用：

在某个 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 元素的内容模型 由一个或多个以下序列组成：

  1. 以下二者之一：

  2. 以下二者之一：

ruby 和 rt 元素可用于多种类型的注释， 尤其包括（但绝不限于）下述类型。有关日语 Ruby 的更多详细信息，以及如何渲染日语 Ruby，请参阅 日文排版需求。[JLREQ]

在撰写本文时，CSS 尚未提供完全控制 HTML ruby 元素渲染的方式。 希望 CSS 以后能够扩展，以支持下述样式。

日语中用于单个基准字符的单字符 Ruby

在每个表意字符（基准文本）旁放置一个或多个平假名或片假名字符（ruby 注释）。 这用于提供汉字的读音。 

<ruby>B<rt>注释</ruby>

在此示例中，请注意每个注释如何对应单个基准字符。 

<ruby>君<rt>くん</ruby><ruby>子<rt>し</ruby>は<ruby>和<rt>わ</ruby>して<ruby>同<rt>どう</ruby>ぜず。

君くん子しは和わして同どう ぜず。

此示例也可以按如下方式编写：使用一个 ruby 元素，其中包含 两个基准文本片段和两个注释（每个片段一个），而不是使用两个首尾相连的 ruby 元素， 每个元素各有一个基准文本片段和一个注释（如上面的标记所示）： 

<ruby>君<rt>くん</rt>子<rt>し</ruby>は<ruby>和<rt>わ</ruby>して<ruby>同<rt>どう</ruby>ぜず。
用于复合词（熟语）的单字符 Ruby

这与前一种情况类似：复合词中的每个表意字符（基准文本）都通过平假名或片假名字符 （ruby 注释）给出读音。不同之处在于，这些基准文本片段构成一个复合词，而不是彼此分离。 

<ruby>B<rt>注释</rt>B<rt>注释</ruby>

在此示例中，请再次注意每个注释如何对应单个基准字符。在此示例中， 每个复合词（熟语）对应一个 ruby 元素。

预期的渲染方式是：每个注释放置在相应基准字符的上方（或在竖排文本中放置在其旁边）， 并且注释不会延伸到任何相邻字符之上。

<ruby>鬼<rt>き</rt>門<rt>もん</rt></ruby>の<ruby>方<rt>ほう</rt>角<rt>がく</rt></ruby>を<ruby>凝<rt>ぎょう</rt>視<rt>し</rt></ruby>する

鬼き門もんの方ほう角がくを凝ぎょう視 しする

熟语 Ruby

在语义上，这与前一种情况完全相同（基准复合词中的每个单独表意字符，都通过平假名或片假名 字符组成的注释给出其读音），但渲染采用更复杂的熟语 Ruby 渲染方式。

这与上面的复合词单字符 Ruby 示例相同。预期通过不同样式（例如 CSS）实现不同的渲染， 此处未予展示。

<ruby>鬼<rt>き</rt>門<rt>もん</rt></ruby>の<ruby>方<rt>ほう</rt>角<rt>がく</rt></ruby>を<ruby>凝<rt>ぎょう</rt>視<rt>し</rt></ruby>する

有关熟语 Ruby 渲染的更多详细信息，请参阅日文排版需求附录 F。[JLREQ]

用于描述含义的组 Ruby

注释描述的是基准文本的含义，而不是（或不仅是）读音。因此，基准文本和注释都可以由多个字符组成。 

<ruby>基准文本<rt>注释</ruby>

此处，一个复合表意词具有作为注释给出的相应片假名。 

<ruby>境界面<rt>インターフェース</ruby>

境界面インターフェース

此处，一个复合表意词具有作为注释提供的英文翻译。 

<ruby lang="ja">編集者<rt lang="en">editor</ruby>

編集者editor

用于熟字训读音的组 Ruby

一种对应多个基准字符的语音读法，因为一一对应会很困难。（在英语中，“Colonel”和 “Lieutenant”是这类词的示例；在某些方言中，其发音与各个字母之间的直接对应关系相当不明确。）

在此示例中，某种花卉名称使用组 Ruby 提供语音读法： 

<ruby>紫陽花<rt>あじさい</ruby>

紫陽花あじさい

同时具有语音和语义注释的文本（双面 Ruby）

有时会组合使用上述 Ruby 样式。

如果这会导致两个注释覆盖同一个基准片段，则只需将这些注释首尾相连地放置。 

<ruby>基准文本<rt>注释 1<rt>注释 2</ruby>
<ruby>B<rt>a<rt>a</ruby><ruby>A<rt>a<rt>a</ruby><ruby>S<rt>a<rt>a</ruby><ruby>E<rt>a<rt>a</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>注释</ruby>

此处，语音读法和含义都通过 Ruby 注释给出。嵌套 ruby 元素上的注释， 为每个基准字符提供单字符 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 的旧式用户代理）。基准文本片段可以重叠（在 DOM 中任一位置最多可有两个片段重叠；任何开始点早于 与其重叠片段的片段，也必须具有等于或晚于该重叠片段的结束点；任何结束点晚于与其重叠片段的片段， 也必须具有等于或早于该重叠片段的开始点）。注释片段对应于 rt 元素。每个注释片段可以与 一个基准文本片段关联，每个基准文本片段也可以有与其关联的注释片段。（在符合规范的文档中， 每个基准文本片段至少与一个注释片段关联，每个注释片段与一个基准文本片段关联。）ruby 元素表示其包含的基准文本片段的并集，以及这些 基准文本片段到注释片段的映射。片段使用 DOM 范围描述；注释片段范围始终恰好由一个元素组成。 [DOM]

在任意给定时刻，ruby 元素内容的 分段和分类，是运行以下算法所得到的结果：

  1. 令 base text segments 为基准文本片段的空列表，每个片段都可能带有一个 基准文本子片段列表。

  2. 令 annotation segments 为注释片段的空列表，每个片段都可能与一个基准文本 片段或子片段关联。

  3. 令 root 为正在对其运行该算法的 ruby 元素。

  4. 如果 root 具有 ruby 元素祖先， 则跳转到标记为end的步骤。

  5. 令 current parent 为 root。

  6. 令 index 为 0。

  7. 令 start index 为 null。

  8. 令 saved start index 为 null。

  9. 令 current base text 为 null。

  10. Start mode：如果 index 大于或等于 current parent 中子节点的数量， 则跳转到标记为end mode的步骤。

  11. 如果 current parent 中第 index 个节点是 rt 或 rp 元素，则跳转到标记为 annotation mode 的步骤。

  12. 将 start index 设置为 index 的值。

  13. Base mode：如果 current parent 中第 index 个节点是 ruby 元素，并且 current parent 与 root 是同一个元素，则压入一个 Ruby 层级，然后跳转到标记为 start mode 的步骤。

  14. 如果 current parent 中第 index 个节点是 rt 或 rp 元素，则设置当前基准 文本，然后跳转到标记为annotation mode的步骤。

  15. 将 index 增加一。

  16. Base mode post-increment：如果 index 大于或等于 current parent 中子节点的数量，则跳转到标记为end mode的步骤。

  17. 跳回标记为base mode的步骤。

  18. Annotation mode：如果 current parent 中第 index 个节点是 rt 元素，则压入一个 Ruby 注释，并跳转到标记为annotation mode increment的步骤。

  19. 如果 current parent 中第 index 个节点是 rp 元素，则跳转到标记为 annotation mode increment 的步骤。

  20. 如果 current parent 中第 index 个节点不是 Text 节点，或者是一个并非元素间空白的 Text 节点，则跳转到标记为base mode的步骤。

  21. Annotation mode increment：令 lookahead index 为 index 加一。

  22. Annotation mode white-space skipper：如果 lookahead index 等于 current parent 中子节点的数量，则跳转到标记为end mode的步骤。

  23. 如果 current parent 中第 lookahead index 个节点是 rt 元素或 rp 元素，则将 index 设置为 lookahead index，并跳转到标记为 annotation mode 的步骤。

  24. 如果 current parent 中第 lookahead index 个节点不是 Text 节点，或者是一个并非元素间空白的 Text 节点，则跳转到标记为base mode的步骤（不再进一步增加 index，这样目前所见的 元素间空白就会成为下一个基准文本片段的一部分）。

  25. 将 lookahead index 增加一。

  26. 跳转到标记为annotation mode white-space skipper的步骤。

  27. End mode：如果 current parent 与 root 不是同一个元素，则弹出一个 Ruby 层级， 并跳转到标记为base mode post-increment的步骤。

  28. End：返回 base text segments 和 annotation segments。ruby 元素中未由 这两个列表中的片段描述的任何内容，都隐式地位于一个忽略片段中。

当上述步骤要求设置当前基准文本时，表示在算法中的该处运行 以下步骤：

  1. 令 text range 为一个 DOM 范围，其起点是边界点（current parent，start index）， 其终点是边界点 （current parent，index）。

  2. 令 new text segment 为由范围 text range 描述的基准文本片段。

  3. 将 new text segment 添加到 base text segments。

  4. 令 current base text 为 new text segment。

  5. 令 start index 为 null。

当上述步骤要求压入一个 Ruby 层级时，表示在算法中的该处运行 以下步骤：

  1. 令 current parent 为 current parent 中第 index 个节点。

  2. 令 index 为 0。

  3. 将 saved start index 设置为 start index 的值。

  4. 令 start index 为 null。

当上述步骤要求弹出一个 Ruby 层级时，表示在算法中的该处运行 以下步骤：

  1. 令 index 为 current parent 在 root 中的位置。

  2. 令 current parent 为 root。

  3. 将 index 增加一。

  4. 将 start index 设置为 saved start index 的值。

  5. 令 saved start index 为 null。

当上述步骤要求压入一个 Ruby 注释时，表示在算法中的该处运行 以下步骤：

  1. 令 rt 为 current parent 中第 index 个节点所对应的 rt 元素。

  2. 令 annotation range 为一个 DOM 范围，其起点是边界点（current parent，index），其终点是边界点 （current parent，index 加一）（即该范围仅包含 rt）。

  3. 令 new annotation segment 为由范围 annotation range 描述的注释片段。

  4. 如果 current base text 不为 null，则将 new annotation segment 与 current base text 关联。

  5. 将 new annotation segment 添加到 annotation segments。

在此示例中，日文文本 漢字 中的每个表意字符都使用其平假名读音进行注释。

...
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
...

其渲染效果可能如下：

两个主要表意字符，每个字符上方都以较小字体渲染其平假名注释。

在此示例中，繁体中文文本 漢字 中的每个表意字符都使用其注音符号读音进行注释。

<ruby>漢<rt>ㄏㄢˋ</rt>字<rt>ㄗˋ</rt></ruby>

其渲染效果可能如下：

两个主要表意字符，每个字符旁边都以较小字体渲染其注音符号注释。

在此示例中，简体中文文本 汉字 中的每个表意字符都使用其拼音读音进行注释。

...<ruby>汉<rt>hàn</rt>字<rt>zì</rt></ruby>...

其渲染效果可能如下：

两个主要表意字符，每个字符上方都以较小字体渲染其拼音注释。

在这个较为刻意构造的示例中，首字母缩略词“HTML”具有四个注释：一个针对整个缩略词， 简要说明它是什么；一个针对字母“HT”，将其展开为“Hypertext”；一个针对字母“M”， 将其展开为“Markup”；另一个针对字母“L”，将其展开为“Language”。

<ruby>
 <ruby>HT<rt>Hypertext</rt>M<rt>Markup</rt>L<rt>Language</rt></ruby>
 <rt>一种用于描述文档和应用程序的抽象语言
</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 或 rp 元素， 或者父元素中已无更多内容，则可以省略该 rt 元素的结束标签。
内容属性：
全局属性
无障碍考虑：
面向作者。
面向实现者。
清理：
默认。
DOM 接口：
使用 HTMLElement。

rt 元素标记 Ruby 注释的 Ruby 文本组件。当它是 ruby 元素的子项时， 它本身不表示任何内容，但 ruby 元素会将其作为 确定自身表示内容的一部分。

不是 ruby 元素子项的 rt 元素， 表示与其子项相同的内容。

4.5.12 rp 元素

Element/rp

所有当前引擎均支持。

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 元素后紧跟着 一个 rt 或 rp 元素， 或者父元素中已无更多内容，则可以省略该 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?

HTMLDataElement/value

所有当前引擎均支持。

Firefox22+Safari10+Chrome62+
Opera?Edge79+
Edge（旧版）14+Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别：
流式内容。
短语内容。
可感知内容。
可以使用此 元素的上下文：
预期短语内容之处。
内容模型：
短语内容。
text/html 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
value — 机器可读值
无障碍考虑：
面向作者。
面向实现者。
清理：
默认，带有 value 属性。
DOM 接口：
[Exposed=Window]
interface HTMLDataElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute DOMString value;
};

data 元素表示其内容，以及在 value 属性中给出的 该内容的机器可读形式。

必须存在 value 属性。其值必须以机器可读格式表示该元素的内容。

当值与日期或时间有关时，可以改用更具体的 time 元素。

该元素可用于多种用途。

与微格式或本规范中定义的微数据属性结合使用时，该元素既可为数据处理器 提供机器可读值，也可为 Web 浏览器中的渲染提供人类可读值。在这种情况下，value 属性所使用的格式 由正在使用的微格式或微数据词汇表确定。

不过，该元素也可以与页面中的脚本结合使用，以便脚本在一个人类可读值旁存储一个字面值。 在这种情况下，使用何种格式只取决于脚本的需要。（data-* 属性在此类情况下也可能有用。）

此处，一个小型表格使用 data 元素编码其数值， 因此即使一列中的数字以文本形式呈现，而另一列中的数字以分解形式呈现，表格排序 JavaScript 库仍可为每一列提供排序机制。

<script src="sortable.js"></script>
<table class="sortable">
 <thead> <tr> <th> 游戏 <th> 公司 <th> 地图大小
 <tbody>
  <tr> <td> 1830 <td> <data value="8">八</data> <td> <data value="93">19+74 个六边形格（共 93 个）</data>
  <tr> <td> 1856 <td> <data value="11">十一</data> <td> <data value="99">12+87 个六边形格（共 99 个）</data>
  <tr> <td> 1870 <td> <data value="10">十</data> <td> <data value="149">4+145 个六边形格（共 149 个）</data>
</table>

4.5.14 time 元素

Element/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+

HTMLTimeElement/dateTime

所有当前引擎均支持。

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 — 机器可读值
无障碍考虑：
面向作者。
面向实现者。
清理：
默认，带有 datetime 属性。
DOM 接口：
[Exposed=Window]
interface HTMLTimeElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute DOMString dateTime;
};

time 元素表示其内容，以及在 datetime 属性中给出的 该内容的机器可读形式。内容类型仅限于下文所述的各种日期、时间、时区偏移量和持续时间。

可以存在 datetime 属性。如果存在，其值必须以机器可读格式 表示该元素的内容。

没有 datetime 内容属性的 time 元素 不得有任何元素后代。

time 元素的 日期时间值，如果该元素具有 datetime 内容属性， 则为该属性的值；否则为 time 元素的子文本内容。

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>

带有日期和时区偏移量的时间，适用于指定特定事件，或者时间不锚定到特定 地理位置的重复虚拟事件。例如，小行星撞击的精确时刻，或无论世界上任何特定地区是否采用 夏令时，每天都在 UTC 14:00 举行的一系列会议中的某次会议。对于精确时间会随特定地理位置的 本地时区偏移量而变化的事件，结合该地理位置使用有效本地日期和时间 字符串可能更有用。

一个有效星期字符串
<time>2011-W47</time>
四个或更多 ASCII 数字，其中至少一个不是 U+0030 DIGIT ZERO (0)
<time>2011</time>
<time>0001</time>
一个有效持续时间字符串
<time>PT4H18M3S</time>
<time>4h 18m 3s</time>

必须使用以下算法，从该元素的日期时间值中获取元素内容的机器可读等价值：

  1. 如果从元素的日期时间值中解析月份字符串返回一个月份，则该月份就是机器可读等价值；返回。

  2. 如果从元素的日期时间值中解析日期字符串返回一个日期，则该日期就是机器可读等价值；返回。

  3. 如果从元素的日期时间值中解析无年份日期 字符串返回一个无年份日期，则该日期就是机器可读等价值；返回。

  4. 如果从元素的日期时间值中解析时间字符串返回一个时间，则该时间就是机器可读等价值；返回。

  5. 如果从元素的日期时间值中解析本地日期和时间 字符串返回一个本地日期和时间，则它就是机器可读等价值；返回。

  6. 如果从元素的日期时间值中解析时区偏移量字符串返回一个时区偏移量，则该偏移量就是 机器可读等价值；返回。

  7. 如果从元素的日期时间值中解析全局日期和时间 字符串返回一个全局日期和 时间，则它就是机器可读等价值；返回。

  8. 如果从元素的日期时间值中解析星期字符串返回一个星期，则该星期就是机器可读等价值；返回。

  9. 如果元素的日期时间值仅由ASCII 数字组成，并且其中至少一个不是 U+0030 DIGIT ZERO (0)， 则机器可读等价值是这些数字的十进制解释，表示一个年份；返回。

  10. 如果从元素的日期时间值中解析持续时间 字符串返回一个持续时间， 则该持续时间就是机器可读等价值；返回。

  11. 不存在机器可读等价值。

上述算法的设计意图是：对于任意字符串 s，只有一个算法会返回 值。更高效的方法可能是创建一个算法，在一次遍历中解析所有这些数据类型；此算法的开发留作 读者练习。

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 大会</span>：
 <time class="dtstart" datetime="2005-10-05">10 月 5 日</time>至
 <time class="dtend" datetime="2005-10-07">7 日</time>，
 地点：<span class="location">加利福尼亚州旧金山 Argent 酒店</span>
</div>

此处，一个基于 Atom 词汇表的虚构微数据词汇表与 time 元素一起使用， 以标记博客文章的发布日期。 

<article itemscope itemtype="https://n.example.org/rfc4287">
 <h1 itemprop="title">大型任务</h1>
 <footer>发布于 <time itemprop="published" datetime="2009-08-29">两天前</time>。</footer>
 <p itemprop="content">今天，我出门给孩子买了一辆自行车。</p>
</article>

在此示例中，另一篇文章的发布日期使用 time 标记， 这次使用 schema.org 微数据词汇表：

<article itemscope itemtype="http://schema.org/BlogPosting">
 <h1 itemprop="headline">小型任务</h1>
 <footer>发布于 <time itemprop="datePublished" datetime="2009-08-30">昨天</time>。</footer>
 <p itemprop="articleBody">我在她的自行车上装了一个车铃。</p>
</article>

在以下片段中，time 元素用于以 ISO8601 格式编码日期，以供脚本稍后处理：

<p>我们的第一次约会是在 <time datetime="2006-09-23">一个星期六</time>。</p>

在第二个片段中，该值还包含时间：

<p>我们一直聊到<time datetime="2006-09-24T05:00-07:00">第二天早上 5 点</time>才停下来。</p>

页面加载的脚本（因此了解页面使用 time 元素标记日期和 时间的内部约定）可以扫描整个页面，并查看其中所有 time 元素， 以创建日期和时间索引。

例如，此元素传达字符串“星期五”，并附加“2011 年 11 月 18 日是与‘星期五’对应的含义”这一语义：

今天是 <time datetime="2011-11-18">星期五</time>。

在此示例中，指定了太平洋标准时区中的一个特定时间：

你的下一次会议是在 <time datetime="2011-11-18T15:00-08:00">下午 3 点</time>。

4.5.15 code 元素

Element/code

所有当前引擎均支持。

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。

code 元素表示一段计算机代码。它可以是 XML 元素名称、 文件名、计算机程序，或计算机能够识别的任何其他字符串。

没有正式方式可表明所标记计算机代码的语言。希望使用所用语言标记 code 元素的作者， 例如为了让语法高亮脚本使用正确的规则，可以使用 class 属性，例如向该元素添加一个以 “language-”为前缀的类。

以下示例展示了如何在段落中使用该元素标记元素名称和计算机代码，包括标点符号。

<p><code>code</code> 元素表示一段计算机
代码。</p>

<p>当你在 <code>robotSnowman</code> 对象上调用
<code>activate()</code> 方法时，它的眼睛会发光。</p>

<p>下面的示例使用 <code>begin</code> 关键字表示
语句块的开始。它与 <code>end</code>
关键字配对，后者之后跟着 <code>.</code> 标点符号
（句点），表示程序结束。</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>如果有 <var>n</var> 根管道通往冰淇淋
工厂，那么我预计至少会有 <var>n</var> 种冰淇淋口味
<em>至少</em>可供购买！</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>
  使用勾股定理求具有边长 <var>b</var> 和 <var>c</var> 的三角形的
  斜边 <var>a</var>
 </figcaption>
</figure>

此处，在句子中使用了描述质能等价关系的方程，并使用 var 元素标记该方程中的 变量和常量： 

<p>随后她转向黑板，拿起粉笔。思考片刻后，
她写下了 <var>E</var> = <var>m</var> <var>c</var><sup>2</sup>。老师
看起来很满意。</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>计算机显示<samp>第二个托盘中的奶酪
太多</samp>，但我不知道这是什么意思。</p>

第二个示例展示了控制台程序的一块示例输出。嵌套的 samp 和 kbd 元素允许使用样式表 对示例输出的特定元素进行样式化。samp 中还有一些部分 使用了更详细的标记进行注释，以便实现非常精确的样式化。为此使用了 span 元素。 

<pre><samp><span class="prompt">jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>
上次登录：2005 年 4 月 12 日星期二 09:10:17，来自 mowmow.example.com，终端为 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 Explorer是
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>要让 George 吃苹果，请按 <kbd><kbd>Shift</kbd> + <kbd>F3</kbd></kbd></p>

在第二个示例中，用户被告知选择一个特定菜单项。外层 kbd 元素标记一块输入， 内层 kbd 元素表示输入的各个单独步骤，而其中的 samp 元素 表明这些步骤是基于系统显示内容的输入，在此例中即菜单标签： 

<p>要让 George 吃苹果，请选择
    <kbd><kbd><samp>文件</samp></kbd>|<kbd><samp>吃苹果……</samp></kbd></kbd>
</p>

无需如此精确；以下写法同样正确：

<p>要让 George 吃苹果，请选择 <kbd>文件 | 吃苹果……</kbd></p>

4.5.19 sub 和 sup 元素

Element/sub

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Element/sup

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别：
流式内容。
短语内容。
可感知内容。
可以使用此 元素的上下文：
预期短语内容之处。
内容 模型：
短语内容。
text/html 中的 标签省略：
两个标签均不可省略。
内容 属性：
全局属性
无障碍考虑：
sub 元素：面向作者；面向实现者。
sup 元素：面向作者；面向实现者。
清理：
默认。
DOM 接口：
使用 HTMLElement。

sup 元素表示上标，而 sub 元素表示下标。

这些元素必须仅用于标记具有特定含义的排版惯例，而不能仅仅为了排版呈现而使用。例如， 在 LaTeX 文档准备系统的名称中使用 sub 和 sup 元素是不合适的。一般而言，只有在缺少这些元素会改变内容含义时，作者才应使用它们。

在某些语言中，上标是部分缩写的排版惯例之一。

<p>她们的名字是
<span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span> 和
<span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>。</p>

sub 元素可在 var 元素内使用， 以表示具有下标的变量。

此处，sub 元素用于表示标识一系列变量中某个变量的下标：

<p>第 <var>i</var> 个点的坐标为
(<var>x<sub><var>i</var></sub></var>, <var>y<sub><var>i</var></sub></var>)。
例如，第 10 个点的坐标为
(<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 元素

Element/i

所有当前引擎均支持。

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。

i 元素表示以不同语气或情绪呈现的一段文本，或以表示不同文本性质的方式 与普通散文区分开来的文本，例如分类学名称、技术术语、来自另一种语言的惯用短语、 音译、思想，或西方文本中的船名。

与主要文本语言不同的术语应使用 lang 属性进行注释（或者在 XML 中使用 XML 命名空间中的 lang 属性）。

以下示例展示了 i 元素的用法：

<p><i class="taxonomy">Felis silvestris catus</i> 很可爱。</p>
<p>术语 <i>散文内容</i> 已在上文定义。</p>
<p>空气中有一种难以言喻的 <i lang="fr">je ne sais quoi</i>。</p>

在以下示例中，使用 i 元素标记梦境片段。 

<p>Raymond 试图入睡。</p>
<p><i>船在星期四驶离了</i>，他
梦见。<i>船上有许多人，其中包括一位名叫 Carey 的美丽
公主。他日复一日地注视着她，希望她能注意到自己，但她从未如此。</i></p>
<p><i>终于有一天晚上，他鼓起勇气与
她交谈——</i></p>
<p>火警响起时，Raymond 猛然惊醒。</p>

作者可以在 i 元素上使用 class 属性来标识使用该元素的 原因，这样，如果以后需要更改某种特定用法的样式（例如梦境片段，而不是分类学术语），作者就不必 遍历整个文档（或一系列相关文档）并为每处用法添加注释。

建议作者考虑是否有其他元素比 i 元素更适用，例如使用 em 元素标记着重强调， 或使用 dfn 元素标记术语的 定义实例。

样式表可用于格式化 i 元素，就像可以重新设置任何其他 元素的样式一样。因此，i 元素中的内容不一定会以斜体显示。

4.5.21 b 元素

Element/b

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别：
流式内容。
短语内容。
可感知内容。
可以使用此元素的 上下文：
预期短语内容之处。
内容模型：
短语内容。
text/html 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
无障碍考虑：
面向作者。
面向实现者。
清理：
默认。
DOM 接口：
使用 HTMLElement。

b 元素表示出于实用目的而吸引注意力的一段文本，但不传达任何额外重要性， 也不暗示不同的语气或情绪，例如文档摘要中的关键字、评论中的产品名称、 文本驱动型交互式软件中的可操作词语，或文章导语。

以下示例展示了如何使用 b 元素突出显示关键字， 但不将其标记为重要内容：

<p><b>frobonitor</b> 和 <b>barbinator</b> 组件烧坏了。</p>

在以下示例中，文本冒险游戏中的对象使用 b 元素突出显示为特殊对象。 

<p>你进入一个小房间。你的<b>剑</b>发出的光
变得更亮。一只<b>老鼠</b>从墙角飞快跑过。</p>

b 元素的另一个适用场景是 标记导语句或导语段落。以下示例展示了如何标记一篇有关小猫被宠物兔子 当作自己孩子收养的 BBC 文章：

<article>
 <h2>小猫被宠物兔子“收养”</h2>
 <p><b class="lede">六只被遗弃的小猫找到了一个
 意想不到的新母亲形象——一只宠物兔子。</b></p>
 <p>兽医护士 Melanie Humble 将这些三周大的
 小猫带回了她位于阿伯丁的家中。</p>
[...]

与 i 元素一样，作者可以在 b 元素上使用 class 属性来标识使用该元素的原因， 这样，如果以后要更改某种特定用法的样式，作者就不必遍历并为每处用法添加注释。

只有在没有其他更合适元素时，才应将 b 元素作为最后手段使用。 特别是，标题应使用 h1 至 h6 元素，着重强调应使用 em 元素，重要性应使用 strong 元素表示， 而标记或突出显示的文本应使用 mark 元素。

以下是不正确的用法：

<p><b>警告！</b> 不要 frob 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?
类别：
流式内容。
短语内容。
可感知内容。
可以使用此元素的 上下文：
预期短语内容之处。
内容模型：
短语内容。
text/html 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
无障碍考虑：
面向作者。
面向实现者。
清理：
默认。
DOM 接口：
使用 HTMLElement。

u 元素表示一段带有未明确表达但显式呈现的非文本注释的文本，例如在中文文本中 将文本标记为专有名称（中文专名号），或将文本标记为拼写错误。

在大多数情况下，其他元素可能更合适：标记着重强调时，应使用 em 元素；标记关键字或短语时， 应根据上下文使用 b 元素或 mark 元素； 标记书名时，应使用 cite 元素；使用明确的文本注释 标记文本时，应使用 ruby 元素；对于技术术语、 分类学名称、音译、思想，或西方文本中的船名，应使用 i 元素。

u 元素在视觉呈现中的默认渲染方式 与超链接的惯常渲染方式（下划线）冲突。建议作者避免在可能被误认为超链接的地方使用 u 元素。

在此示例中，使用 u 元素 将一个单词标记为拼写错误：

<p><u>see</u> 里有很多鱼。</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?
类别：
流式内容。
短语内容。
可感知内容。
可以使用此 元素的上下文：
预期短语内容之处。
内容模型：
短语内容。
text/html 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
无障碍考虑：
面向作者。
面向实现者。
清理：
默认。
DOM 接口：
使用 HTMLElement。

mark 元素表示由于与另一上下文相关，而在某个文档中出于 引用目的被标记或突出显示的一段文本。 当用于引文或散文中所提及的其他文本块时，它表示原文中并不存在的突出显示，该突出显示是为了将读者 的注意力引向文本中的某一部分；原作者在最初撰写该文本块时可能并未认为该部分重要，但该部分现在正受到 先前未曾预料的审视。当用于文档的主要散文中时，它表示文档中由于可能与用户当前活动相关而被突出显示 的部分。

此示例展示了如何使用 mark 元素将注意力引向 引文的特定部分：

<p lang="en-US">请考虑以下引文：</p>
<blockquote lang="en-GB">
 <p>环顾四周，你会发现，没有人真正是
 <mark>colour</mark> blind。</p>
</blockquote>
<p lang="en-US">从该词的<em>拼写</em>可以看出，
撰写这段引文的人显然不是美国人。</p>

（但是，如果目的是将该元素标记为拼写错误，那么使用 u 元素，并可能添加一个类， 会更合适。）

mark 元素的另一个 示例是突出显示文档中与某个搜索字符串匹配的部分。如果有人查看某个文档，而服务器知道用户正在 搜索单词“kitten”，则服务器可能返回该文档，并将其中一个段落修改如下：

<p>这些天还有一些<mark>小猫</mark>来拜访我。
它们真的很可爱。我想它们喜欢我的花园！也许我应该收养一只
<mark>小猫</mark>。</p>

在以下片段中，一段文本引用了代码片段的特定部分。

<p>下面突出显示的部分就是错误所在：</p>
<pre><code>var i: Integer;
begin
   i := <mark>1.1</mark>;
end.</code></pre>

这与语法高亮不同，后者更适合使用 span。 将二者结合，会得到：

<p>下面突出显示的部分就是错误所在：</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>她知道</h1>
 <p>你注意到第 4 格笑话中的那个微妙笑点了吗？</p>
 <blockquote>
  <p class="bubble">我并不<em>想要</em>相信。<mark>当然，
  在某种程度上，我意识到这是一种已知明文攻击。</mark>但在我
  亲眼看到之前，我无法承认这一点。</p>
 </blockquote>
 <p>（强调为我所加。）我觉得这很棒。它非常拘泥细节，却又
 把一切解释得清清楚楚。</p>
</article>

顺便注意此示例中 em 元素与 mark 元素之间的区别： 前者是所引用原文的一部分，后者则突出显示某一部分以供评论。

以下示例展示了表示一段文本的重要性（strong） 与表示一段文本的相关性（mark）之间的区别。 这是教科书中的一段摘录，其中与考试相关的部分已被突出显示。安全警告尽管可能很重要， 但显然与考试无关。

<h3>虫洞物理学简介</h3>

<p><mark>在正常条件下，虫洞最多只能保持开启
略少于 39 分钟。</mark>可延长该时间的条件包括：
将强大能源连接到与虫洞相连的一个或两个星门，以及一个大型引力井
（例如黑洞）。</p>

<p><mark>动量在穿过虫洞时保持不变。电磁
辐射可以双向穿过虫洞，
但物质不能。</mark></p>

<p>创建虫洞时，通常会形成一个涡流。
<strong>警告：虫洞开启所产生的涡流会
湮灭路径上的一切。</strong>使用足够先进的拨号技术时，
可以避免涡流。</p>

<p><mark>星门中的障碍物会阻止其接受
虫洞连接。</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”放到单词“用户”旁边， 而不是放到单词“帖子”旁边）。 

<ul>
 <li>用户 <bdi>jcranmer</bdi>：12 篇帖子。
 <li>用户 <bdi>hober</bdi>：5 篇帖子。
 <li>用户 <bdi>إيان</bdi>：3 篇帖子。
</ul>
使用 bdi 元素时，用户名会按预期工作。
如果将 bdi 元素 替换为 b 元素， 用户名会扰乱双向文本算法，第三个列表项最终会显示“用户 3：”， 后跟阿拉伯语姓名（从右到左），再后跟“帖子”和句号。

4.5.25 bdo 元素

Element/bdo

所有当前引擎均支持。

Firefox10+Safari4+Chrome15+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
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 元素

Element/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 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
无障碍考虑：
面向作者。
面向实现者。
清理：
默认。
DOM 接口：
[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 Explorer是
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 中的 标签省略：
无结束标签。
内容属性：
全局属性
无障碍考虑：
面向作者。
面向实现者。
清理：
默认。
DOM 接口：
[Exposed=Window]
interface HTMLBRElement : HTMLElement {
  [HTMLConstructor] constructor();

  // 还有废弃成员
};

br 元素表示换行。

虽然在视觉媒体中，换行通常通过将后续文本实际移至新行来表示，但样式表或用户代理 同样可以合理地使换行以不同方式渲染，例如呈现为绿色圆点或额外间距。

br 元素必须仅用于 确实属于内容一部分的换行，例如诗歌或地址中的换行。

以下示例是 br 元素的正确用法：

<p>P. Sherman<br>
42 Wallaby Way<br>
悉尼</p>

br 元素不得用于 分隔段落中的主题组。

以下示例滥用了 br 元素，因此不符合规范：

<p><a ...>34 条评论。</a><br>
<a ...>添加评论。</a></p>
<p><label>姓名：<input name="name"></label><br>
<label>地址：<input name="address"></label></p>

以下是上述内容的正确替代方案：

<p><a ...>34 条评论。</a></p>
<p><a ...>添加评论。</a></p>
<p><label>姓名：<input name="name"></label></p>
<p><label>地址：<input name="address"></label></p>

如果一个段落仅由单个 br 元素组成，则它 表示占位空行（例如模板中的空行）。不得将此类空行用于呈现目的。

br 元素内的任何内容 均不得被视为周围文本的一部分。

此元素具有涉及双向文本算法的渲染要求。

4.5.28 wbr 元素

Element/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>于是她指着老虎尖叫道：
“你<wbr>绝<wbr>对<wbr>不<wbr>可<wbr>能<wbr>抓<wbr>到<wbr>我”！</p>

wbr 元素内的任何内容 均不得被视为周围文本的一部分。

var wbr = document.createElement("wbr");
wbr.textContent = "This is wrong";
document.body.appendChild(wbr);

此元素具有涉及双向文本算法的渲染要求。

4.5.29 用法摘要

本节为非规范性内容。

元素 用途 示例
a 超链接 
访问我的<a href="drinks.html">饮料</a>页面。
em 着重强调 
我必须说，我<em>非常喜欢</em>柠檬水。
strong 重要性 
这杯茶<strong>非常烫</strong>。
small 附注 
这些葡萄用于酿酒。<small>酒精具有成瘾性。</small>
s 不准确的文本 
价格：<s>£4.50</s> £2.00！
cite 作品标题 
案件<cite>Hugo 诉 Danielle 案</cite>与此有关。
q 引文 
法官说<q>你可以饮用鱼缸里的水</q>，但建议不要这样做。
dfn 定义实例 
术语<dfn>有机食品</dfn>指不使用合成化学品生产的食品。
abbr 缩写 
爱尔兰的有机食品由<abbr title="Irish Organic Farmers and Growers Association">IOFGA</abbr>认证。
ruby、rt、rp Ruby 注释 
<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>Citrus limon</i>制成。
b 关键字 
拿一个<b>柠檬</b>，用<b>榨汁机</b>榨汁。
u 注释 
苹果汁和<u class="spelling">eldeflower</u>汁的混合物非常可口。
mark 突出显示 
接骨木花糖浆按一<mark>份</mark>糖浆兑十<mark>份</mark>水调制，在其他饮料中格外出<mark>众</mark>。
bdi 文本方向隔离 
推荐的餐厅是<bdi lang="">My Juice Café (At The Beach)</bdi>。
bdo 文本方向格式化 
提议是以相反顺序书写英语。“Juice”将变成“<bdo dir=rtl>Juice</bdo>”>
span 其他 
在法语中，我们称之为<span lang="fr">sirop de sureau</span>。
br 换行 
Simply Orange Juice Company<br>Apopka, FL 32703<br>U.S.A.
wbr 换行机会 
www.simply<wbr>orange<wbr>juice.com

4.6.1 简介

链接是一种概念性构造，由 a、area、 form 和 link 元素创建，用于表示 两个资源之间的连接，其中一个资源是当前 Document。HTML 中有三种链接：

指向 外部资源的链接

这些链接指向用于增强当前文档的资源，通常由用户代理自动处理。所有外部资源链接都有一个获取 并处理所链接资源的算法，用于描述如何获取该资源。

超链接

这些链接指向其他资源，用户代理通常会将其呈现给用户，使用户能够让用户代理导航到这些资源，例如在浏览器中访问或下载它们。

内部资源链接

这些链接指向当前文档中的资源，用于赋予这些资源特殊含义或行为。

对于同时具有 href 属性和 rel 属性的 link 元素，必须按照 链接类型一节中对这些关键字的定义，为 rel 属性中的关键字创建链接。

类似地，对于同时具有 href 属性和 rel 属性的 a 和 area 元素，必须按照 链接类型一节中对这些关键字的定义，为 rel 属性中的关键字 创建链接。不过，与 link 元素不同，具有 href 属性的 a 和 area 元素，如果没有 rel 属性，或者其 rel 属性中没有 被定义为指定超链接的关键字，也必须创建一个超链接。 除了将该元素的节点文档 链接到该元素的 href 属性所给出的资源 之外，此隐式超链接没有特殊含义（它没有链接类型）。

类似地，对于具有 rel 属性的 form 元素， 必须按照链接类型一节中对这些关键字的定义，为 rel 属性中的关键字创建链接。没有 rel 属性，或者其 rel 属性中没有被定义为指定 超链接的关键字的 form 元素，也必须创建一个超链接。

一个超链接可以具有一个或多个超链接 注释，用于修改该超链接的处理语义。

a 和 area 元素上的 href 属性的值必须是一个可能被空格包围的有效 URL。

a 和 area 元素上的 href 属性不是必需的；当这些元素没有 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) 方案。用户代理将该值用于超链接 审计。

a 和 area 元素上的 rel 属性控制这些元素创建何种链接。该属性的值必须是一个无序且唯一的 以空格分隔的令牌集合。下文定义了允许的关键字及其含义。

rel 的 受支持令牌，是在 HTML 链接类型中定义的关键字；这些关键字允许用于 a 和 area 元素，会影响处理模型，并受用户代理支持。可能的受支持令牌包括 noreferrer、 noopener 和 opener。 rel 的 受支持令牌只能包含此列表中用户代理已实现其处理模型的令牌。

rel 属性没有默认值。如果省略该属性，或者用户代理无法识别该属性中的任何值， 则除了两者之间存在超链接之外，文档与目标资源之间没有特定关系。

referrerpolicy 属性是一个来源网址政策属性。 其用途是设置来源网址政策，以供跟随 超链接时使用。[REFERRERPOLICY]

当调用 a 或 area 元素的激活行为时，用户代理可以允许用户表明偏好： 是将该超链接用于导航，还是下载其指定的资源。

如果用户没有表明偏好，则当元素没有 download 属性时，默认行为应为导航；如果具有该属性，则默认行为应为下载指定资源。

给定事件 event 时，a 或 area 元素 element 的激活行为如下：

  1. 如果 element 没有 href 属性，则返回。

  2. 令 hyperlinkSuffix 为 null。

  3. 如果 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 (?)、使用 ASCII 数字表示为十进制整数的 x 值、 U+002C (,)，以及使用 ASCII 数字表示为十进制整数的 y 值。

  4. 令 userInvolvement 为 event 的用户 导航参与程度。

  5. 如果用户已表明希望下载该超链接，则将 userInvolvement 设置为“浏览器 UI”。

    也就是说，如果用户明确表明了下载偏好，则这不再仅仅算作“激活”。

  6. 如果 element 具有 download 属性，或者用户已表明希望下载该超链接，则下载 由 element 创建的超链接，并将 hyperlinkSuffix 设置为 hyperlinkSuffix， 将 userInvolvement 设置为 userInvolvement。

  7. 否则，跟随由 element 创建的超链接，并将 hyperlinkSuffix 设置为 hyperlinkSuffix，将 userInvolvement 设置为 userInvolvement。 

interface mixin HyperlinkElementUtils {
  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;

  [CEReactions, Reflect] attribute DOMString hreflang;
  [CEReactions, Reflect] attribute DOMString type;
};
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 的方案。

可以设置，以更改 URL 的方案。

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 的主机和端口（如果端口不同于该方案的默认端口）。

可以设置，以更改 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 的片段（忽略开头的“#”）。

实现 HyperlinkElementUtils 混入的元素是超链接 元素。

一个超链接元素具有一个 关联的 URL（null 或一个 URL）。其初始值为 null。

一个超链接元素具有以下 提取源步骤：

  1. 如果 this 的 URL 为 null，则 返回 null。

  2. 返回 this 的 URL 的 源。

一个超链接元素必须具有 一个关联的设置 URL算法。

创建超链接元素时， 用户代理必须设置 URL。

一个超链接元素具有一个 关联的重新初始化 URL算法，该算法运行以下 步骤：

  1. 如果该元素的 URL 非 null，其方案为“blob”，并且其具有 不透明路径，则终止这些步骤。

  2. 设置 URL。

一个超链接元素必须具有 一个关联的更新 href 算法。

创建超链接的超链接元素上的 hreflang 属性（如果存在）给出所链接资源的语言。它纯粹是建议性的。其值必须是有效的 BCP 47 语言标签。 [BCP47] 用户代理不得将此属性视为权威信息——获取资源后，用户代理必须仅使用 与资源关联的语言信息来确定其语言，而不能使用资源链接中包含的元数据。

超链接 元素上的 type 属性（如果存在）给出所链接资源的 MIME 类型。它纯粹是建议性的。其值必须是一个 有效的 MIME 类型字符串。用户代理不得将 type 属性 视为权威信息——获取资源后，用户代理不得使用资源链接中包含的元数据来确定其 类型。

origin 获取器步骤如下：

  1. 重新初始化 URL。

  2. 如果 this 的 URL 为 null，则返回 空字符串。

  3. 返回 this 的 URL 的源的序列化。

protocol 获取器步骤如下：

  1. 重新初始化 URL。

  2. 如果 this 的 URL 为 null，则返回 “:”。

  3. 返回 this 的 URL 的方案，后跟“:”。

protocol 设置器步骤如下：

  1. 重新初始化 URL。

  2. 如果 this 的 URL 为 null，则 返回。

  3. 对给定值后接“:”执行基本 URL 解析， 其中将 this 的 URL 作为 url， 并将方案起始 状态作为 状态覆盖。

    由于 URL 解析器会忽略多个连续的冒号，因此提供值 “https:”（甚至“https::::”）与 提供值“https”相同。

  4. 更新 href。

username 获取器步骤如下：

  1. 重新初始化 URL。

  2. 如果 this 的 URL 为 null，则返回 空字符串。

  3. 返回 this 的 URL 的用户名。

username 设置器步骤如下：

  1. 重新初始化 URL。

  2. 令 url 为 this 的 URL。

  3. 如果 url 为 null，或者 url 不能具有用户名/密码/端口，则 返回。

  4. 给定 url 和给定值，设置用户名。

  5. 更新 href。

password 获取器步骤如下：

  1. 重新初始化 URL。

  2. 令 url 为 this 的 URL。

  3. 如果 url 为 null，则返回空字符串。

  4. 返回 url 的密码。

password 设置器步骤如下：

  1. 重新初始化 URL。

  2. 令 url 为 this 的 URL。

  3. 如果 url 为 null，或者 url 不能具有用户名/密码/端口，则 返回。

  4. 给定 url 和给定值，设置密码。

  5. 更新 href。

host 获取器步骤如下：

  1. 重新初始化 URL。

  2. 令 url 为 this 的 URL。

  3. 如果 url 或 url 的主机为 null， 则返回空字符串。

  4. 如果 url 的端口为 null，则返回 url 的主机的序列化。

  5. 返回 url 的主机的序列化，后跟 “:”和 url 的端口的序列化。

host 设置器步骤如下：

  1. 重新初始化 URL。

  2. 令 url 为 this 的 URL。

  3. 如果 url 为 null，或者 url 具有不透明路径，则 返回。

  4. 对给定值执行基本 URL 解析， 其中将 url 作为 url， 并将主机 状态作为 状态 覆盖。

  5. 更新 href。

hostname 获取器步骤如下：

  1. 重新初始化 URL。

  2. 令 url 为 this 的 URL。

  3. 如果 url 或 url 的主机为 null， 则返回空字符串。

  4. 返回 url 的主机的序列化。

hostname 设置器步骤如下：

  1. 重新初始化 URL。

  2. 令 url 为 this 的 URL。

  3. 如果 url 为 null，或者 url 具有不透明路径，则 返回。

  4. 对给定值执行基本 URL 解析， 其中将 url 作为 url， 并将主机名 状态作为 状态 覆盖。

  5. 更新 href。

port 获取器步骤如下：

  1. 重新初始化 URL。

  2. 令 url 为 this 的 URL。

  3. 如果 url 或 url 的端口为 null， 则返回空字符串。

  4. 返回 url 的端口的序列化。

port 设置器步骤如下：

  1. 重新初始化 URL。

  2. 令 url 为 this 的 URL。

  3. 如果 url 为 null，或者 url 不能具有用户名/密码/端口，则 返回。

  4. 如果给定值为空字符串，则将 url 的端口设置为 null。

  5. 否则，对给定值执行基本 URL 解析， 其中将 url 作为 url， 并将端口 状态作为 状态 覆盖。

  6. 更新 href。

pathname 获取器步骤如下：

  1. 重新初始化 URL。

  2. 令 url 为 this 的 URL。

  3. 如果 url 为 null，则返回空字符串。

  4. 返回序列化 URL 路径 url 的结果。

pathname 设置器步骤如下：

  1. 重新初始化 URL。

  2. 令 url 为 this 的 URL。

  3. 如果 url 为 null，或者 url 具有不透明路径，则 返回。

  4. 将 url 的路径设置为空 列表。

  5. 对给定值执行基本 URL 解析， 其中将 url 作为 url， 并将路径起始 状态作为 状态 覆盖。

  6. 更新 href。

search 获取器步骤如下：

  1. 重新初始化 URL。

  2. 令 url 为 this 的 URL。

  3. 如果 url 为 null，或者 url 的查询为 null 或空字符串，则返回空 字符串。

  4. 返回“?”，后跟 url 的查询。

search 设置器 步骤如下：

  1. 重新初始化 URL。

  2. 令 url 为 this 的 URL。

  3. 如果 url 为 null，则终止这些步骤。

  4. 如果给定值为空字符串，则将 url 的查询设置为 null。

  5. 否则：

    1. 令 input 为给定值移除单个开头的“?” 后的结果（如果存在）。

    2. 将 url 的查询设置为 空 字符串。

    3. 对 input 执行基本 URL 解析，其中将 url 作为 url，并将查询 状态作为 状态 覆盖。

  6. 更新 href。

hash 获取器步骤如下：

  1. 重新初始化 URL。

  2. 令 url 为 this 的 URL。

  3. 如果 url 为 null，或者 url 的片段为 null 或空字符串，则返回 空字符串。

  4. 返回“#”，后跟 url 的片段。

hash 设置器步骤如下：

  1. 重新初始化 URL。

  2. 令 url 为 this 的 URL。

  3. 如果 url 为 null，则返回。

  4. 如果给定值为空字符串，则将 url 的片段 设置为 null。

  5. 否则：

    1. 令 input 为给定值移除单个开头的“#” 后的结果（如果存在）。

    2. 将 url 的片段设置为空 字符串。

    3. 对 input 执行基本 URL 解析，其中将 url 作为 url，并将片段 状态作为 状态 覆盖。

  6. 更新 href。

4.6.4 a 和 area 元素的 API

interface mixin HTMLHyperlinkElementUtils {
  [CEReactions, ReflectSetter] stringifier attribute USVString href;
  [CEReactions, Reflect] attribute DOMString target;
};
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。

href 获取器步骤如下：

  1. 重新初始化 URL。

  2. 令 url 为 this 的 URL。

  3. 如果 url 为 null，且 this 没有 href 内容 属性，则返回空字符串。

  4. 否则，如果 url 为 null，则返回 this 的 href 内容属性的值。

  5. 返回 url 的序列化。

给定 insertedNode，a 和 area 元素的 HTML 元素插入步骤如下：

  1. 如果 insertedNode 未连接，则返回。

  2. 给定 insertedNode 的节点 文档，考虑推测性加载。

给定 removedNode、isSubtreeRoot 和 oldAncestor，a 和 area 元素的 HTML 元素移除步骤如下：

  1. 如果 oldAncestor 未连接，则返回。

  2. 给定 oldAncestor 的节点 文档，考虑推测性加载。

给定 movedNode，a 和 area 元素的 HTML 元素 移动步骤如下：

  1. 给定 movedNode 的节点 文档，考虑推测性加载。

给定 element、localName、oldValue、 value 和 namespace，以下属性更改 步骤用于所有 a 和 area 元素：

  1. 如果 namespace 不为 null，则返回。

  2. 如果 oldValue 等于 value，则返回。

  3. 如果 localName 为 href，则 给定 element，设置 URL。

    这仅对 blob: URL 可观察，因为对它们进行解析涉及一次 Blob URL 存储 查找。

  4. 如果 localName 为 href、referrerpolicy 或 rel， 则给定 element 的节点文档，考虑推测性加载。

要为 HTMLAnchorElement 或 HTMLAreaElement 元素更新 href，请将该元素的 href 内容属性的值设置为该元素的 URL 的序列化。

HTMLAnchorElement 和 HTMLAreaElement 元素的设置 URL算法如下：

  1. 将此元素的 URL 设置为 null。

  2. 如果此元素的 href 内容属性不存在，则返回。

  3. 令 url 为给定此元素的 href 内容属性的值，并相对于此元素的节点文档，执行 编码解析 URL所得的结果。

  4. 如果 url 不是失败，则将此元素的 URL 设置为 url。

如果以下任一条件为真，则元素 element 无法导航：

这也由 form 元素的表单 提交使用。对 a 元素的例外是为了 与 Web 内容兼容。

要获取元素的 noopener，给定 a、area 或 form 元素 element、一个 URL 记录 url 和一个 字符串 target，执行以下步骤。它们返回一个布尔值。

  1. 如果 element 的链接类型包含 noopener 或 noreferrer 关键字，则返回 true。

  2. 如果 element 的链接类型 不包含 opener 关键字，且 target 与“_blank”ASCII 不区分大小写匹配，则返回 true。

  3. 如果 url 的 blob URL 条目 不为 null：

    1. 令 blobOrigin 为 url 的 blob URL 条目的环境的源。

    2. 令 topLevelOrigin 为 element 的相关设置 对象的顶层源。

    3. 如果 blobOrigin 与 topLevelOrigin 不同站点， 则返回 true。

  4. 返回 false。

要跟随由元素 subject 创建的超链接，给定一个可选的 hyperlinkSuffix （默认为 null）和一个可选的 userInvolvement（默认为“none”）：

  1. 如果 subject 无法 导航，则返回。

  2. 令 targetAttributeValue 为空字符串。

  3. 如果 subject 是 a 或 area 元素，则将 targetAttributeValue 设置为给定 subject，获取 元素的目标所得的结果。

  4. 令 urlRecord 为给定 subject 的 href 属性 值，并相对于 subject 的节点文档，执行 编码解析 URL所得的结果。

  5. 如果 urlRecord 为失败，则返回。

  6. 令 noopener 为使用 subject、urlRecord 和 targetAttributeValue，获取 元素的 noopener所得的结果。

  7. 令 targetNavigable 为给定 targetAttributeValue、subject 的 节点可导航对象和 noopener，应用选择 可导航对象的规则所得的第一个返回值。

  8. 如果 targetNavigable 为 null，则返回。

  9. 令 urlString 为将 URL 序列化器应用于 urlRecord 所得的结果。

  10. 如果 hyperlinkSuffix 非 null，则将其附加到 urlString。

  11. 使用 subject 的节点文档，将 targetNavigable 导航到 urlString，并将 referrerPolicy 设置为 subject 的 超链接来源 策略，将 userInvolvement 设置为 userInvolvement，并将 sourceElement 设置为 subject。

    与许多其他类型的导航不同，当文档尚未完全 加载时，跟随超链接没有特殊的“replace” 行为。这既适用于用户发起的跟随超链接，也适用于例如通过 aElement.click() 由脚本触发的跟随超链接。

元素 subject 的超链接来源策略是由以下步骤 返回的值：

  1. 如果 subject 的链接 类型包含 noreferrer 关键字，则返回 “no-referrer”。

  2. 返回 subject 的 referrerpolicy 内容属性的当前状态。

4.6.6 下载资源

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”）：

  1. 如果 subject 无法 导航，则返回。

  2. 如果 subject 的节点 文档的活动 沙盒标志集合设置了沙盒化下载浏览上下文 标志，则返回。

  3. 令 urlString 为给定 subject 的 href 属性 值，并相对于 subject 的节点文档，执行 编码解析并序列化 URL所得的结果。

  4. 如果 urlString 为失败，则返回。

  5. 如果 hyperlinkSuffix 非 null，则将其附加到 urlString。

  6. 如果 userInvolvement 不是“浏览器 UI”：

    1. 断言：subject 具有 download 属性。

    2. 令 navigation 为 subject 的相关全局对象的 导航 API。

    3. 令 filename 为 subject 的 download 属性的值。

    4. 令 continue 为在 navigation 上触发下载请求 navigate 事件所得的结果，并将 destinationURL 设置为 urlString，将 userInvolvement 设置为 userInvolvement，将 sourceElement 设置为 subject，并将 filename 设置为 filename。

    5. 如果 continue 为 false，则返回。

    6. 给定 subject 的节点可导航对象，通知导航 API 导航中止。

  7. 并行运行以下步骤：

    1. 可选地，如果用户代理认为中止这些步骤可以保护用户免受潜在恶意下载的侵害， 则可以中止这些步骤。

    2. 令 request 为一个新的请求，其 URL 为 urlString，客户端为 入口设置 对象，发起者为“download”，目标为空字符串，并设置其 同步标志和使用 URL 凭据标志。

    3. 令 response 为获取 request 所得的结果。

    4. 使用 subject 的节点 可导航对象和 null，将 response 作为下载处理。

要使用一个可导航对象 navigable 和一个导航 ID或 null navigationId，将一个响应 response 作为下载处理：

  1. 令 suggestedFilename 为针对 response 获取建议 文件名所得的结果。

  2. 令 download behavior 为使用 navigable 和一个新的 WebDriver BiDi 导航状态执行WebDriver BiDi 下载即将 开始所得的结果，其中该状态的 id 为 navigationId，status 为“pending”， url 为 response 的 URL，且 suggestedFilename 为 suggestedFilename。

  3. 如果 download behavior 不为 null，且 download behavior 的 allowed 为 false：

    1. 使用 navigable 和一个新的 WebDriver BiDi 导航状态调用WebDriver BiDi 下载结束，其中该状态的 id 为 navigationId，status 为“canceled”， url 为 response 的 URL。

    2. 返回。

  4. 如果 download behavior 不为 null，则令 destinationFolder 为 download behavior 的destinationFolder。

  5. 并行运行以下步骤：

    1. 运行由实现定义的步骤，以保存 response 供以后使用。 如果 destinationFolder 不为 null，则用户代理应将文件保存到该路径。 如果用户代理需要文件名，则用户代理应使用 suggestedFilename。

    2. 如果以下任一条件为真：

      • 用户取消下载；

      • 用户代理取消下载；

      • 发生错误（例如网络错误、存储空间不足、目标文件夹不可用）；

      则：

      1. 使用 navigable 和一个新的 WebDriver BiDi 导航状态调用WebDriver BiDi 下载结束，其中该状态的 id 为 navigationId，status 为“canceled”， url 为 response 的 URL。

      2. 返回。

    3. 下载成功完成时，使用 navigable 和一个新的 WebDriver BiDi 导航状态调用WebDriver BiDi 下载 结束，其中该状态的 id 为 navigationId，status 为“complete”， downloadedFilepath 在可用时为已下载文件的 绝对路径，否则为 null，url 为 response 的 URL。

要为响应 response 获取建议文件名：

此算法旨在减轻从不受信任的网站下载文件所涉及的安全风险，强烈建议用户代理遵循该算法。

  1. 令 filename 为 undefined 值。

  2. 如果 response 具有 `Content-Disposition` 标头，该标头指定 attachment 处置类型，并且该标头包含文件名信息， 则令 filename 具有该标头指定的值，并跳转到下面标记为 清理的步骤。[RFC6266]

  3. 令 interface origin 为发起导致下载的下载或导航操作所在的 Document 的源（如果有）。

  4. 令 response origin 为 response 的 URL 的源，除非该 URL 的方案组件 为 data；在这种情况下，如果存在 interface origin，则令 response origin 与 interface origin 相同。

  5. 如果不存在 interface origin，则令 trusted operation 为 true。 否则，如果 response origin 与 interface origin 同源，则令 trusted operation 为 true，否则为 false。

  6. 如果 trusted operation 为 true，且 response 具有 `Content-Disposition` 标头，并且该标头包含文件名信息，则令 filename 具有该标头指定的值，并 跳转到下面标记为 清理 的步骤。[RFC6266]

  7. 如果下载不是从由 a 或 area 元素创建的超链接发起的，或者发起下载的超链接元素在发起下载时没有 download 属性，或者存在该属性但其在发起下载时的值为空字符串，则跳转到标记为无建议 文件名的步骤。

  8. 令 proposed filename 具有发起下载的 超链接元素在发起下载时的 download 属性的值。

  9. 如果 trusted operation 为 true，则令 filename 具有 proposed filename 的值，并跳转到下面标记为 清理 的步骤。

  10. 如果 response 具有 `Content-Disposition` 标头，且该标头指定 attachment 处置类型，则令 filename 具有 proposed filename 的值，并跳转到下面标记为 清理 的步骤。 [RFC6266]

  11. 无建议文件名：如果 trusted operation 为 true，或者用户 表明了希望下载相关响应的偏好，则令 filename 以由实现定义的方式具有一个从 response 的 URL 派生的值，并跳转到下面标记为 清理 的步骤。

  12. 将 filename 设置为用户偏好的文件名或用户代理选择的文件名，并跳转到下面标记为 清理 的步骤。

    如果算法到达此步骤，则下载是从与 response 不同的源开始的， 而该源没有将文件标记为适合下载，并且下载也不是由用户发起的。这可能是因为使用了 download 属性触发下载，或者 因为 response 的类型不受用户代理支持。

    这可能很危险，因为例如恶意服务器可能试图诱使用户在不知情的情况下下载私人信息， 然后再将其上传回恶意服务器，方法是欺骗用户，使其认为数据来自恶意服务器。

    因此，为了用户的利益，应以某种方式通知用户 response 来自完全不同的来源；为防止混淆，应忽略潜在恶意 interface origin 建议的任何文件名。

  13. 清理：可选地，允许用户影响 filename。例如， 用户代理可以提示用户输入文件名，并可能将上面确定的 filename 值作为默认值。

  14. 调整 filename，使其适合本地文件系统。

    例如，这可能包括移除文件名中不合法的字符，或者修剪开头和结尾的空白。

  15. 如果平台惯例完全不使用扩展名来确定文件系统中文件的类型， 则将 filename 作为文件名返回。

  16. 如果已知，则令 claimed type 为 response 的 Content-Type 元数据给出的类型。如果已知，则令 named type 为 filename 的扩展名给出的类型。 就此步骤而言，类型是从一个MIME 类型 到一个扩展名的映射。

  17. 如果 named type 与用户的偏好一致（例如因为 filename 的值是通过提示用户确定的），则将 filename 作为文件名返回。

  18. 如果 claimed type 和 named type 是相同类型（即 response 的 Content-Type 元数据给出的类型与 filename 的扩展名给出的类型一致），则将 filename 作为文件名返回。

  19. 如果 claimed type 已知，则修改 filename，为其添加与 claimed type 对应的扩展名。

    否则，如果已知 named type 可能存在危险（例如平台惯例会将其视为本机可执行文件、 shell 脚本、HTML 应用程序或支持可执行宏的文档），则可以选择修改 filename，添加一个已知安全的扩展名 （例如“.txt”）。

    最后这一步会使下载可执行文件变得不可能，而这可能并不理想。 与往常一样，实现者不得不在此问题上平衡安全性和可用性。

  20. 将 filename 作为文件名返回。

就此算法而言，文件的扩展名 由平台惯例规定将用于识别文件类型的文件名任何部分组成。例如，许多操作系统使用文件名中 最后一个点号（“.”）之后的部分来确定文件类型，并据此确定打开或执行该文件的 方式。

用户代理在决定将生成的文件存储到用户文件系统中的何处时，应忽略响应本身、 其 URL 以及任何 download 属性提供的任何目录或路径信息。

如果由 a 或 area 元素创建的超链接具有 ping 属性，并且用户跟随该超链接， 且相对于元素的节点 文档，元素的 href 属性值可以被解析而不失败，则用户代理必须取得 ping 属性的值，在 ASCII 空白处分割该字符串，相对于元素的节点文档解析每个所得令牌，然后对每个所得的 URL ping URL 运行以下步骤， 忽略解析返回失败的情况：

  1. 如果 ping URL 的方案不是 HTTP(S) 方案，则返回。

  2. 可选地，返回。（例如，用户代理可能希望根据用户表达的偏好忽略任意或 所有 ping URL。）

  3. 令 settingsObject 为元素的节点 文档的 相关设置 对象。

  4. 令 request 为一个新的请求，其URL 为 ping URL，方法为 `POST`，标头 列表为 « (`Content-Type`, `text/ping`) »，主体为 `PING`，客户端为 settingsObject，目标为空 字符串，凭据模式为“include”，来源网址为 “no-referrer”，并设置其使用 URL 凭据标志，且其 发起者类型为“ping”。

  5. 令 target URL 为给定元素的 href 属性的值， 并相对于元素的节点文档，执行编码解析并序列化 URL所得的结果，然后：

    如果包含被审计超链接的 Document 对象的 URL 与 ping URL 同源
    如果源不同，但包含被审计超链接的 Document 的 URL 的方案不是 “https”
    request 必须包含一个 `Ping-From` 标头，其值为包含该超链接的文档的 URL，以及一个 `Ping-To` HTTP 标头，其值为 target URL。
    否则
    request 必须包含一个 `Ping-To` HTTP 标头，其值为 target URL。request 不包含 `Ping-From` 标头。

  6. 获取 request。

这可以与主要获取并行完成， 并且独立于该获取的结果。

用户代理应允许用户调整此行为，例如与禁用发送 HTTP `Referer` （原文如此） 标头的设置结合使用。根据用户的偏好，用户代理可以完全忽略 ping 属性，或者选择性地忽略列表中的 URL（例如忽略任何第三方 URL）；上述步骤已明确考虑到这一点。

用户代理必须忽略响应中返回的任何实体主体。用户代理开始接收响应主体后，可以提前关闭 连接。

（这是一个跟踪途径。） 如果存在一个创建超链接并具有 ping 属性的 a 或 area 元素，用户代理可以向用户表明， 跟随该超链接还会导致在后台发送辅助请求，并且可能包括列出实际的目标 URL。

例如，视觉用户代理可以在状态栏或工具提示中，将目标 ping URL 的主机名与超链接的实际 URL 一起显示。

ping 属性与 HTTP 重定向和 JavaScript 等既有技术功能重复，因为这些技术也允许网页跟踪哪些站外链接最受欢迎，或允许广告商跟踪点击率。

不过，与这些替代方案相比，ping 属性为用户提供了 以下优势：

4.6.7.1 `Ping-From` 和 `Ping-To` 标头

`Ping-From` 和 `Ping-To` HTTP 请求标头包含在超链接 审计请求中。它们的值是一个经过序列化的URL。

4.6.8 链接类型

Link_types

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera9+Edge79+
Edge（旧版）12+Internet Explorer是
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 中。body-ok 关键字为 dns-prefetch、 modulepreload、 pingback、 preconnect、 prefetch、 preload 和 stylesheet。

要由 Web 浏览器实现的新链接类型应添加到本标准中。其余链接类型可注册为扩展。

4.6.8.1 链接类型“alternate”

Alternative_style_sheets

仅一个引擎支持。

Firefox3+Safari?Chrome1–48
Opera是Edge否
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 元素提供了一些样式表：

<!-- 持久样式表 -->
<link rel="stylesheet" href="default.css">

<!-- 首选替代样式表 -->
<link rel="stylesheet" href="green.css" title="绿色样式">

<!-- 一些替代样式表 -->
<link rel="alternate stylesheet" href="contrast.css" title="高对比度">
<link rel="alternate stylesheet" href="big.css" title="大字体">
<link rel="alternate stylesheet" href="wide.css" title="宽屏">
如果 alternate 关键字与 type 属性一起使用，并且该属性设置为 application/rss+xml 或 application/atom+xml

该关键字创建一个引用聚合 源的超链接（尽管该源不一定聚合与当前页面完全相同的内容）。

出于源自动发现的目的，用户代理应考虑文档中所有使用了 alternate 关键字，并且其 type 属性设置为 application/rss+xml 或 application/atom+xml 的 link 元素。如果用户代理具有默认聚合源的概念，则应使用第一个此类元素（按树顺序）作为 默认源。

以下 link 元素为一个博客提供聚合源：

<link rel="alternate" type="application/atom+xml" href="posts.xml" title="Cool Stuff 博客">
<link rel="alternate" type="application/atom+xml" href="posts.xml?category=robots" title="Cool Stuff 博客：robots 类别">
<link rel="alternate" type="application/atom+xml" href="comments.xml" title="Cool Stuff 博客：评论">

此类 link 元素会被 参与源自动发现的用户代理使用，并将第一个元素作为默认值（如适用）。

以下示例使用 a 元素， 向用户提供多个不同的聚合源： 

<p>你可以使用 Atom 源访问行星数据库：</p>
<ul>
 <li><a href="recently-visited-planets.xml" rel="alternate" type="application/atom+xml">最近访问的行星</a></li>
 <li><a href="known-bad-planets.xml" rel="alternate" type="application/atom+xml">已知的危险行星</a></li>
 <li><a href="unexplored-planets.xml" rel="alternate" type="application/atom+xml">未探索的行星</a></li>
</ul>

这些链接不会用于源自动发现。

否则

该关键字创建一个引用当前文档替代表示的超链接。

被引用文档的性质由 hreflang 和 type 属性给出。

如果 alternate 关键字与 hreflang 属性一起使用， 且该属性的值与文档元素的语言不同，则表示被引用文档是一个翻译版本。

如果 alternate 关键字与 type 属性一起使用，则表示被引用文档是当前文档按指定格式重新表述的版本。

hreflang 和 type 属性可以在与 alternate 关键字一起指定时组合使用。

以下示例展示了如何指定使用替代格式、面向其他语言以及适用于其他媒体的页面版本：

<link rel=alternate href="/en/html" hreflang=en type=text/html title="英语 HTML">
<link rel=alternate href="/fr/html" hreflang=fr type=text/html title="法语 HTML">
<link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print title="英语 HTML（用于打印）">
<link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="法语 HTML（用于打印）">
<link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="英语 PDF">
<link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="法语 PDF">

此关系具有传递性——也就是说，如果一个文档使用链接类型“alternate”链接到另外两个文档， 那么除了表示这两个文档是第一个文档的替代表示之外，还表示 这两个文档彼此也是替代表示。

author 关键字可以与 link、 a 和 area 元素一起使用。此关键字创建 一个超链接。

对于 a 和 area 元素，author 关键字表示被引用文档提供有关定义该超链接的元素最近的 article 元素祖先的作者的更多信息（如果存在），否则提供有关整个页面作者的更多信息。

对于 link 元素，author 关键字表示 被引用文档提供有关整个页面作者的更多信息。

“被引用文档”可以是，而且通常是一个给出作者电子邮件地址的 mailto: URL。[MAILTO]

同义词：由于历史原因，用户代理还必须将具有值为“made”的 rev 属性的 link、a 和 area 元素视为将 author 关键字指定为链接关系。

bookmark 关键字可以 与 a 和 area 元素一起使用。此关键字 创建一个超链接。

bookmark 关键字 为相关链接元素最近的祖先 article 元素提供永久链接；如果 没有祖先 article 元素，则为 与该链接元素关联最密切的章节提供永久链接。

以下代码片段具有三个永久链接。用户代理可以通过查看永久链接所在的位置， 确定每个永久链接适用于规范的哪个部分。

 ...
 <body>
  <h1>永久链接示例</h1>
  <div id="a">
   <h2>第一个示例</h2>
   <p><a href="a.html" rel="bookmark">此永久链接仅适用于
   从第一个 H2 到第二个 H2 的内容</a>。DIV 并不
   精确对应于该章节，但大致与其相符。</p>
  </div>
  <h2>第二个示例</h2>
  <article id="b">
   <p><a href="b.html" rel="bookmark">此永久链接适用于
   外层 ARTICLE 元素</a>（例如，它可以是一篇博客文章）。</p>
   <article id="c">
    <p><a href="c.html" rel="bookmark">此永久链接适用于
    内层 ARTICLE 元素</a>（例如，它可以是一条博客评论）。</p>
   </article>
  </article>
 </body>
 ...

canonical 关键字 可以与 link 元素一起使用。此关键字创建一个超链接。

canonical 关键字表示 href 属性给出的 URL 是当前文档的首选 URL。 这有助于搜索引擎减少重复内容，详见 The Canonical Link Relation。[RFC6596]

Link_types/dns-prefetch

Firefox3+Safari?Chrome46+
Opera?Edge79+
Edge（旧版）否Internet Explorer?
Firefox Android?Safari iOS?Chrome Android是WebView Android46+Samsung Internet?Opera Android?

dns-prefetch 关键字可以与 link 元素一起使用。此 关键字创建一个外部 资源链接。此关键字是 body-ok。

dns-prefetch 关键字表示，抢先对指定资源的源执行 DNS 解析可能有益，因为用户很可能需要位于该 源的资源，并且抢先消除 与 DNS 解析相关的延迟成本会改善用户体验。

由 dns-prefetch 关键字给出的资源没有默认类型。

获取并 处理此类链接的适当时机为：

给定一个 link 元素 el，此类所链接资源的获取并处理所链接资源步骤如下：

  1. 令 url 为给定 el 的 href 属性值，并相对于 el 的节点文档，执行编码解析 URL所得的结果。

  2. 如果 url 为失败，则返回。

  3. 令 partitionKey 为给定 el 的节点文档的相关设置对象，确定网络分区键所得的结果。

  4. 用户代理应给定 partitionKey 和 url 的源，解析源。

    由于此算法的结果可以缓存，未来的获取可能会更快。

expect 关键字可以与 link 元素一起使用。此关键字创建一个内部资源 链接。

由 expect 关键字创建的内部资源链接可用于阻塞渲染，直到其指示的元素连接到文档并被完全解析。

由 expect 关键字给出的资源没有默认类型。

每当 link 元素 el 发生以下任一情况时：

则处理 el。

要给定一个 link 元素 el 处理内部资源链接，运行以下步骤：

  1. 令 doc 为 el 的节点文档。

  2. 令 url 为给定 el 的 href 属性值，并相对于 doc，执行编码解析 URL所得的结果。

  3. 如果此操作失败，或者在将 排除片段设置为 true 时， url 不与 doc 的 URL 相等，则对 el 解除渲染阻塞并返回。

  4. 令 indicatedElement 为给定 doc 和 url，选择指示部分所得的结果。

  5. 如果以下所有条件均为真：

    则对 el 阻塞渲染。

  6. 否则，对 el 解除渲染阻塞。

要给定一个 Document doc 处理内部资源链接：

  1. 对于 doc 的渲染阻塞元素集合中的每个 expect link 元素 link，处理 link。

给定 element、localName、oldValue、 value 和 namespace，以下属性更改 步骤用于确保 expect link 元素响应动态 id 和 name 更改：

  1. 如果 namespace 不为 null，则返回。

  2. 如果 element 位于某个 HTML 解析器的开放元素栈中，则返回。

  3. 如果以下任一条件为真：

    • localName 为 id；或者

    • localName 为 name 且 element 是 a 元素，

    则给定 element 的节点文档，处理 内部资源链接。

external 关键字可以 与 a、 area 和 form 元素一起使用。此关键字不会 创建超链接，但会注释该元素创建的任何其他 超链接（如果没有其他关键字创建超链接，则为隐含超链接）。

external 关键字 表示该链接指向一个不属于当前文档所在站点的文档。

help 关键字可以与 link、 a、area 和 form 元素一起使用。此关键字创建一个 超链接。

对于 a、area 和 form 元素，help 关键字表示被引用文档为 定义该超链接的元素的父元素及其子元素提供更多帮助信息。

在以下示例中，表单控件关联了上下文相关帮助。例如，如果用户按下“Help”或“F1”键， 用户代理可以使用此信息显示被引用文档。

 <p><label> 主题：<input name=topic> <a href="help/topic.html" rel="help">（帮助）</a></label></p>

对于 link 元素，help 关键字表示 被引用文档为整个页面提供帮助。

对于 a 和 area 元素，在某些浏览器中， help 关键字会使链接使用 不同的光标。

4.6.8.9 链接类型“icon”

Link_types#icon

所有当前引擎均支持。

Firefox2+Safari3.1+Chrome4+
Opera9+Edge79+
Edge（旧版）12+Internet Explorer11
Firefox Android4+Safari iOS否Chrome Android18+WebView Android38+Samsung Internet4.0+Opera Android否
caniuse.com 表格

icon 关键字可以与 link 元素一起使用。 此关键字创建一个外部资源 链接。

指定的资源是表示页面或站点的图标，用户代理在用户界面中表示页面时应使用该图标。

图标可以是听觉图标、视觉图标或其他类型的图标。如果 提供了多个图标，用户代理必须根据 type、media 和 sizes 属性选择最合适的图标。如果有多个 同样合适的图标，用户代理必须使用其收集图标列表时按树顺序最后声明的图标。 如果用户代理尝试使用某个图标，但在进一步检查后发现该图标实际上不合适 （例如因为其使用不受支持的格式），则用户代理必须按照属性所确定的顺序尝试 下一个最合适的图标。

图标列表发生变化时，不要求用户代理更新图标，但鼓励这样做。

由 icon 关键字给出的资源没有默认类型。 不过，出于确定资源类型的目的，用户代理必须预期该资源为图像。

sizes 关键字以原始像素表示图标尺寸 （而不是 CSS 像素）。

一个宽度为 50 CSS 像素、用于设备像素密度为每个 CSS 像素两个设备像素 （2x，192dpi）的显示器的图标，宽度将为 100 个原始像素。此功能不支持指明小型高分辨率图标与 大型低分辨率图标应使用不同资源 （例如 50×50 2x 与 100×100 1x）。

要解析和处理该属性的值，用户代理必须首先在 ASCII 空白处分割属性值，然后必须解析每个所得关键字， 以确定其表示的内容。

any 关键字表示该资源包含可缩放图标， 例如 SVG 图像提供的图标。

其他关键字必须按如下方式进一步解析，以确定它们表示的内容：

  1. 如果关键字不恰好包含一个 U+0078 LATIN SMALL LETTER X 或 U+0058 LATIN CAPITAL LETTER X 字符，则此关键字不表示任何内容。对该关键字返回。

  2. 令 width string 为“x”或 “X”之前的字符串。

  3. 令 height string 为“x”或 “X”之后的字符串。

  4. 如果 width string 或 height string 中任一个以 U+0030 DIGIT ZERO (0) 字符开头，或者包含ASCII 数字以外的任何字符， 则此关键字不表示任何内容。对该关键字返回。

  5. 对 width string 应用解析非负整数的规则，以获得 width。

  6. 对 height string 应用解析非负整数的规则，以获得 height。

  7. 该关键字表示资源包含一个宽度为 width 设备像素、高度为 height 设备 像素的位图图标。

在 sizes 属性上指定的关键字不得表示所链接资源中实际上不可用的图标尺寸。

给定一个 link 元素 el 和请求 request，此类所链接资源的所链接资源获取设置步骤如下：

  1. 将 request 的目标设置为 “image”。

  2. 返回 true。

此类所链接资源的处理 Link 标头步骤是什么也不做。

在不存在具有 icon 关键字的 link 的情况下，对于其 URL 的方案为 HTTP(S) 方案的 Document 对象，用户代理可以改为并行运行以下步骤：

  1. 令 request 为一个新的请求，其 URL 为通过相对于 Document 对象的 URL 解析 URL“/favicon.ico”所得的 URL 记录，客户端为 Document 对象的 相关设置对象，目标为 “image”， 设置同步标志，凭据 模式为“include”，并设置其使用 URL 凭据标志。

  2. 令 response 为获取 request 所得的结果。

  3. 将 response 的不安全响应作为图标使用，就像它是使用 icon 关键字声明的一样。

以下代码片段展示了一个具有多个图标的应用程序顶部部分。

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>lsForums — 收件箱</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”ASCII 不区分大小写匹配（令牌之间恰好有一个 U+0020 SPACE 字符，且没有其他ASCII 空白）。

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="../">返回照片索引</a>
  </nav>
  <figure>
   <img src="/pix/39627052_fd8dcd98b5.jpg">
   <figcaption>Kissat</figcaption>
  </figure>
  <p>其中一只长了六个脚趾！</p>
  <p><small><a rel="license" href="http://www.opensource.org/licenses/mit-license.php">采用 MIT 许可证</a></small></p>
  <footer>
   <a href="/">首页</a> | <a href="../">照片索引</a>
   <p><small>© 版权所有 2009 Exampl Pictures。保留所有权利。</small></p>
  </footer>
 </body>
</html>

在这种情况下，license 仅适用于照片（文档的主要 内容），而不是整个文档。尤其不适用于页面本身的设计，该设计受文档底部给出的著作权声明约束。 可以通过样式更清楚地表达这一点（例如，将许可证链接显著地放置在照片附近， 同时将页面著作权声明以浅色小字显示在页面底部）。

同义词：由于历史原因，用户代理还必须将关键字 “copyright”视同 license 关键字。

Link_types/manifest

仅一个引擎支持。

Firefox?Safari?Chrome否
Opera?Edge否
Edge（旧版）?Internet Explorer?
Firefox Android?Safari iOS?Chrome Android39+WebView Android?Samsung Internet?Opera Android?

manifest 关键字可以 与 link 元素一起使用。 此关键字创建一个外部 资源链接。

manifest 关键字 表示提供与当前文档关联的元数据的清单文件。

由 manifest 关键字给出的资源没有默认类型。

当 Web 应用尚未安装时， 用户代理认为必要时，就是此链接类型获取并处理所链接资源的适当时机。例如， 当用户选择安装 Web 应用时。

对于一个已安装的 Web 应用，此链接类型获取并处理所链接资源的适当时机 为：

无论如何，只有按树顺序第一个其 rel 属性包含令牌 manifest 的 link 元素可以使用。

用户代理不得为此链接类型延迟 load 事件。

给定一个 link 元素 el 和请求 request，此类所链接资源的所链接 资源获取设置步骤如下：

  1. 令 navigable 为 el 的节点 文档的节点 可导航对象。

  2. 如果 navigable 为 null，则返回 false。

  3. 如果 navigable 不是顶层可遍历对象，则返回 false。

  4. 将 request 的发起者设置为 “manifest”。

  5. 将 request 的目标设置为 “manifest”。

  6. 将 request 的模式设置为 “cors”。

  7. 将 request 的凭据 模式设置为 el 的 crossorigin 内容属性的CORS 设置属性凭据 模式。

  8. 返回 true。

给定一个 link 元素 el、布尔值 success、响应 response 和字节序列 bodyBytes，要处理此类 所链接资源：

  1. 如果 response 的 Content-Type 元数据不是 JSON MIME 类型，则将 success 设置为 false。

  2. 如果 success 为 true：

    1. 令 document URL 为 el 的节点 文档的 URL。

    2. 令 manifest URL 为 response 的 URL。

    3. 令 client 为 el 的节点 文档的相关 设置对象。

    4. 给定 document URL、manifest URL、bodyBytes 和 client，处理清单。[MANIFEST]

此类所链接资源的处理 Link 标头 步骤是什么也不做。

Link_types/modulepreload

Firefox115+Safari?Chrome66+
Opera?Edge79+
Edge（旧版）否Internet Explorer?
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

modulepreload 关键字可以与 link 元素一起使用。此 关键字创建一个外部 资源链接。此 关键字是 body-ok。

modulepreload 关键字是 preload 关键字的一种专用替代方案，其处理模型面向 预加载模块脚本。具体而言，它 使用模块脚本特定的 获取行为（包括例如对 crossorigin 属性的不同解释），并将结果放入 适当的模块 映射中以供稍后求值。相比之下，使用 preload 关键字的类似外部 资源链接会将结果放入预加载缓存，而不会 影响文档的模块映射。

此外，实现可以利用模块脚本声明其依赖项这一事实，同时获取指定模块的 依赖项。这旨在提供优化机会，因为用户代理知道 这些依赖项很可能稍后也会需要。若不使用服务工作线程等技术，或不在服务器端进行监控， 通常无法观察到这一点。 值得注意的是，适当的 load 或 error 事件会在 指定模块获取后发生，并且 不会等待任何依赖项。

用户代理不得为此链接类型延迟 load 事件。

模块预加载目标是“json”、 “style”、“text”或类脚本目标。

此类链接获取并处理所链接资源的适当时机 为：

与某些其他链接关系不同，更改此类 link 的相关属性（例如 as、crossorigin 和 referrerpolicy） 不会触发新的获取。这是因为文档的模块映射已经由先前的 获取填充，因此重新获取毫无意义。

给定一个 link 元素 el，modulepreload 链接的获取并处理所链接资源 算法如下：

  1. 如果 el 的 href 属性值为 空字符串，则返回。

  2. 令 destination 为 el 的 as 属性的当前状态（一个目标），如果 它不处于任何状态，则为“script”。

  3. 如果 destination 不是模块预加载目标，则 给定 el，在网络任务 源上排入元素任务，以在 el 上触发名为 error 的事件，然后 返回。

  4. 令 url 为给定 el 的 href 属性值，并相对于 el 的节点文档，执行编码解析 URL所得的结果。

  5. 如果 url 为失败，则返回。

  6. 令 settings object 为 el 的节点 文档的 相关设置 对象。

  7. 令 credentials mode 为 el 的 crossorigin 属性的CORS 设置属性凭据 模式。

  8. 令 cryptographic nonce 为 el.[[CryptographicNonce]]。

  9. 如果指定了 el 的 integrity 属性，则令 integrity metadata 为该属性的值，否则为 空字符串。

  10. 如果 el 没有 integrity 属性，则将 integrity metadata 设置为使用 url 和 settings object 解析模块 完整性元数据所得的结果。

  11. 令 referrer policy 为 el 的 referrerpolicy 属性的当前状态。

  12. 令 fetch priority 为 el 的 fetchpriority 属性的当前状态。

  13. 令 options 为一个脚本获取选项，其加密 nonce 为 cryptographic nonce，完整性元数据为 integrity metadata，解析器 元数据为“not-parser-inserted”，凭据模式为 credentials mode，来源策略为 referrer policy，并且获取优先级为 fetch priority。

  14. 给定 url、 destination、settings object 和 options，并给定 result 运行以下步骤，获取 modulepreload 模块脚本 图：

    1. 如果 result 为 null，则在 el 上触发名为 error 的事件，然后返回。

    2. 在 el 上触发名为 load 的事件。

此类所链接资源的处理 Link 标头 步骤是什么也不做。

以下代码片段展示了一个预加载了多个模块的应用程序顶部部分：

<!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">
...

假设该应用程序的模块图如下：

模块图以 app.mjs 为根，它依赖 irc.mjs 和 fog-machine.mjs。随后，irc.mjs 依赖 helpers.mjs。

此处可以看到，应用程序开发者使用了 modulepreload 来声明其模块图中的所有模块， 从而确保用户代理为它们全部发起获取。如果没有这种预加载，并且 HTTP/2 Server Push 等技术未参与其中，则用户 代理可能需要经过多次网络往返才能发现 helpers.mjs。通过 这种方式，modulepreload link 元素可以 用作应用程序模块的一种“清单”。

以下代码展示了如何将 modulepreload 链接与 import() 结合使用，以确保网络获取提前 完成，从而在调用 import() 时，模块已经在模块映射中准备就绪（但尚未 求值）：

<link rel="modulepreload" href="awesome-viewer.mjs">

<button onclick="import('./awesome-viewer.mjs').then(m => m.view())">
  查看精彩内容
</button>

nofollow 关键字可以 与 a、 area 和 form 元素一起使用。此关键字 不会创建 超链接，但会注释该元素创建的任何其他 超链接（如果没有其他关键字创建超链接，则为隐含超链接）。

nofollow 关键字 表示该链接未得到页面原作者或发布者的认可，或者指向被引用文档的链接 主要是由于与两个页面关联的人员之间存在商业关系而包含的。

Link_types/noopener

所有当前引擎均支持。

Firefox52+Safari10.1+Chrome49+
Opera?Edge79+
Edge（旧版）?Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Link_types/noopener

所有当前引擎均支持。

Firefox52+Safari10.1+Chrome49+
Opera?Edge79+
Edge（旧版）?Internet Explorer否
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>帮助！</a>

这会创建一个具有非辅助浏览 上下文的顶层 可遍历对象（假设情况相同）：

<a href=help.html target=example rel=noopener>帮助！</a>

以下两者等效，并且只导航父 可导航对象：

<a href=index.html target=_parent>首页</a>
<a href=index.html target=_parent rel=noopener>首页</a>

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"> 具有相同的行为。

opener 关键字可以与 a、 area 和 form 元素一起使用。此关键字不会 创建 超链接，但会注释该元素创建的任何其他 超链接（如果没有其他关键字创建超链接，则为隐含超链接）。

该关键字表示，跟随超链接所产生的任何新创建的顶层可遍历对象都将包含辅助浏览 上下文。

另请参阅处理模型。

在以下示例中，使用 opener 允许帮助 页面弹出窗口导航其开启者，例如，当用户寻找的内容可能在其他位置找到时。另一种方法可能是使用命名目标， 而不是 _blank，但这可能会与现有名称发生冲突。

<a href="..." rel=opener target=_blank>帮助！</a>

pingback 关键字可以 与 link 元素一起使用。此关键字创建一个外部资源 链接。此关键字是 body-ok。

有关 pingback 关键字的语义，请参阅 Pingback 1.0。[PINGBACK]

Link_types/preconnect

所有当前引擎均支持。

Firefox39+Safari11.1+Chrome46+
Opera?Edge79+
Edge（旧版）?Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet4.0+Opera Android?

preconnect 关键字可以与 link 元素一起使用。此关键字创建一个外部资源 链接。此关键字是 body-ok。

preconnect 关键字表示，抢先发起与指定资源的源的连接可能 有益，因为用户很可能需要位于该 源的资源，并且抢先消除 与建立连接相关的延迟成本会改善用户体验。

由 preconnect 关键字给出的资源没有默认类型。

用户代理不得为此链接类型延迟 load 事件。

获取并 处理此类链接的适当时机为：

给定一个 link 元素 el，此类所链接资源的获取并处理所链接资源 步骤是从 el 创建链接选项，并给定其结果进行预连接。

给定一个链接处理选项 options，此类所链接资源的处理 Link 标头 步骤是给定 options 进行预连接。

要给定一个链接处理选项 options 进行预连接：

  1. 如果 options 的 href 是空字符串，则返回。

  2. 令 url 为给定 options 的 href，并相对于 options 的 基准 URL，执行编码解析 URL所得的结果。

    传递基准 URL 而不是文档或环境的问题由 issue #9715 跟踪。

  3. 如果 url 为失败，则返回。

  4. 如果 url 的方案不是 HTTP(S) 方案，则返回。

  5. 令 partitionKey 为给定 options 的环境，确定网络分区键所得的结果。

  6. 令 useCredentials 为 true。

  7. 如果 options 的 crossorigin 为 Anonymous，并且 options 的 源与 url 的 源不同源，则将 useCredentials 设置为 false。

  8. 用户代理应给定 partitionKey、 url 的源和 useCredentials，获取 连接。

    此连接会被获取，但不会直接使用。它将保留在 连接池中以供后续使用。

    用户代理应尽可能尝试发起预连接并执行完整的连接 握手（对于 HTTP 为 DNS+TCP，对于 HTTPS 源为 DNS+TCP+TLS），但由于资源限制或其他原因， 允许选择执行部分握手（对于 HTTP 仅 DNS，对于 HTTPS 源为 DNS 或 DNS+TCP），或者完全跳过握手。

    每个源的最佳连接数量取决于协商的协议、用户 当前的连接配置文件、可用设备资源、全局连接限制以及其他 上下文特定变量。因此，应打开多少连接的决定 由用户代理作出。

Link_types/prefetch

Firefox2+Safari否Chrome8+
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 元素 el，prefetch 链接的获取并处理所链接资源 算法如下：

  1. 如果 el 的 href 属性值为 空字符串，则返回。

  2. 令 options 为从 el 创建链接选项所得的结果。

  3. 令 request 为给定 options 创建 链接请求所得的结果。

  4. 如果 request 为 null，则返回。

  5. 将 request 的发起者 设置为 “prefetch”。

  6. 令 processPrefetchResponse 为给定一个响应 response 以及 null、失败或一个字节序列 bytesOrNull 时的以下步骤：

    1. 如果 response 是网络 错误，则在 el 上触发名为 error 的事件。

    2. 否则，在 el 上触发名为 load 的事件。

  7. 用户代理应获取 request，并将 processResponseConsumeBody 设置为 processPrefetchResponse。用户代理可以延迟获取 request，以 优先处理当前文档所必需的其他请求。

此类所链接资源的处理 Link 标头 步骤是什么也不做。

Link_types/preload

仅一个引擎支持。

Firefox85+Safari?Chrome🔰 50+
Opera37+Edge🔰 79+
Edge（旧版）否Internet Explorer?
Firefox Android?Safari iOS?Chrome Android?WebView Android50+Samsung Internet5.0+Opera Android?

preload 关键字可以 与 link 元素一起使用。此关键字创建一个外部资源 链接。此关键字是 body-ok。

preload 关键字 表示用户代理将根据 as 属性给出的预加载目标，以及 fetchpriority 属性给出的优先级， 抢先获取并缓存指定资源，因为用户很可能在 当前导航中需要此资源。

用户代理在加载资源时可能会执行额外操作，例如 抢先解码图像或创建样式表。但是，这些额外 操作不能产生可观察的效果。

由 preload 关键字给出的资源没有默认类型。

用户代理不得为此链接类型延迟 load 事件。

此类链接获取并处理所链接资源的适当时机 为：

Document 具有一个预加载资源映射，它是一个 有序映射，初始为空。

预加载键是一个结构。它具有以下项：

URL
一个URL
destination
一个预加载目标
mode
一个请求模式，为 “same-origin”、“cors”或 “no-cors”
credentials mode
一个凭据模式

预加载条目是一个结构。它具有以下项：

integrity metadata
一个字符串
response
Null 或一个响应
on response available
Null，或一个接受响应或 null 的算法

要为 Window window 消费预加载资源，给定一个URL url、一个字符串 destination、一个字符串 mode、一个字符串 credentialsMode、一个字符串 integrityMetadata 和 onResponseAvailable，后者是一个接受响应的算法：

  1. 令 key 为一个预加载键，其URL 为 url，destination 为 destination，mode 为 mode，并且 credentials mode 为 credentialsMode。

  2. 令 preloads 为 window 的关联的 Document 的预加载 资源映射。

  3. 如果 key 不存在于 preloads 中， 则返回 false。

  4. 令 entry 为 preloads[key]。

  5. 令 consumerIntegrityMetadata 为 解析 integrityMetadata 所得的结果。

  6. 令 preloadIntegrityMetadata 为 解析 entry 的 integrity metadata所得的结果。

  7. 如果以下条件均不适用：

    • consumerIntegrityMetadata 为 no metadata；

    • consumerIntegrityMetadata 等于 preloadIntegrityMetadata； 或者

      此比较会忽略未知的完整性选项。请参阅 issue #116。

    则返回 false。

    预加载与消费者之间的完整性元数据不匹配，即使 两者都与数据匹配，也会导致从网络进行额外获取。

    将网络错误 添加到预加载缓存中很重要，这样，如果预加载请求导致错误，错误的 响应以后就不会再次从网络请求。这也具有安全影响； 考虑这样一种情况：开发者在预加载请求上指定了子资源完整性元数据， 但没有在后续资源请求上指定。如果预加载请求未通过子资源 完整性验证并被丢弃，则资源请求会从网络获取并消费一个 可能恶意的响应，而不验证其完整性。 [SRI]

  8. 移除 preloads[key]。

  9. 如果 entry 的 response 为 null，则将 entry 的 on response available 设置为 onResponseAvailable。

  10. 否则，使用 entry 的 response 调用 onResponseAvailable。

  11. 返回 true。

就本节而言，如果以下算法返回 true，则字符串 type 匹配一个预加载目标 destination：

  1. 如果 type 是空字符串，则返回 true。

  2. 如果 destination 为“fetch”，则返回 true。

  3. 令 mimeTypeRecord 为 解析 type 所得的结果。

  4. 如果 mimeTypeRecord 为失败，则返回 false。

  5. 如果 mimeTypeRecord 不受用户代理支持，则 返回 false。

  6. 如果以下任一条件为真：

    则返回 true。

  7. 返回 false。

要为一个请求 request 创建预加载键，返回一个新的预加载键，其 URL 为 request 的URL，destination 为 request 的目标，mode 为 request 的模式，并且 credentials mode 为 request 的凭据模式。

预加载目标是“fetch”、“font”、 “image”、“script”、“style”或“track”。

要给定一个字符串 destination 转换预加载目标：

  1. 如果 destination 不是预加载目标，则返回 null。

  2. 返回转换 destination 所得的结果。

要给定一个链接处理选项 options 和 一个可选的 processResponse（它是一个接受响应的算法）进行预加载：

  1. 如果 options 的 type 不匹配 options 的 destination，则 返回。

  2. 如果 options 的 destination 为 “image”，并且 options 的 源集不为 null，则将 options 的href 设置为从 options 的源集中选择图像源所得的结果。

  3. 令 request 为给定 options 创建 链接请求所得的结果。

  4. 如果 request 为 null，则返回。

  5. 令 unsafeEndTime 为 0。

  6. 令 entry 为一个新的预加载条目，其 integrity metadata 为 options 的 integrity。

  7. 令 key 为给定 request 创建 预加载键所得的结果。

  8. 如果 options 的 document 为 null，则 将 request 的发起者类型设置为 “early hint”。

  9. 令 controller 为 null。

  10. 令给定一个 Document document 时的 reportTiming 为：给定 document 的相关 全局对象，为 controller 报告计时。

  11. 将 controller 设置为获取 request 所得的结果，并将 processResponseConsumeBody 设置为给定一个响应 response 以及 null、失败 或一个字节序列 bodyBytes 时的以下步骤：

    1. 如果 bodyBytes 是字节序列， 则将 response 的 主体设置为 bodyBytes 作为 主体。

      通过使用 processResponseConsumeBody， 我们已经提取了完整的 主体。这是 确保预加载器从网络加载整个主体所必需的，无论该预加载是否会被消费（此时尚不确定）。 然后，此步骤将请求的主体重置为包含相同字节的新主体， 以便其他规范可以在实际消费时读取它，尽管我们已经这样做过一次。

    2. 否则，将 response 设置为网络 错误。

    3. 将 unsafeEndTime 设置为不安全的共享当前时间。

    4. 如果 options 的 document 不为 null，则给定 options 的 document 调用 reportTiming。

    5. 如果 entry 的 on response available 为 null，则将 entry 的 response 设置为 response；否则给定 response 调用 entry 的 on response available。

    6. 如果给出了 processResponse，则使用 response 调用 processResponse。

  12. 令 commit 为给定一个 Document document 时的以下步骤：

    1. 如果 entry 的 response 不为 null，则 给定 document 调用 reportTiming。

    2. 将 document 的预加载资源映射[key] 设置为 entry。

  13. 如果 options 的 document 为 null，则将 options 的on document ready 设置为 commit。 否则，使用 options 的 document 调用 commit。

给定一个 link 元素 el，此类所链接资源的获取并处理所链接资源步骤 如下：

  1. 为 el 更新源集。

  2. 令 options 为从 el 创建链接选项所得的结果。

  3. 令 destination 为转换表示 el 的 as 属性状态的关键字所得的结果。

  4. 如果 destination 为 null，则返回。

  5. 将 options 的 destination 设置为 destination。

  6. 预加载 options，并给定一个响应 response 运行以下步骤：

    1. 如果 response 是网络 错误，则在 el 上触发名为 error 的事件。 否则，在 el 上触发名为 load 的事件。

      实际浏览器的行为与此处的规范不同，并且 尚未研究更改该行为的可行性。请参阅 issue #1142。

给定一个链接处理 选项 options，此类链接的处理 Link 标头步骤 是预加载 options。

privacy-policy 关键字可以与 link、a 和 area 元素一起使用。此关键字 创建一个 超链接。

privacy-policy 关键字表示 被引用文档包含有关适用于当前文档的数据收集和使用惯例的信息，详见 Additional Link Relation Types。被引用文档可以是独立的隐私政策，也可以是 某个更通用文档的特定章节。[RFC6903]

search 关键字可以与 link、 a、area 和 form 元素一起使用。此关键字创建 一个 超链接。

search 关键字表示 被引用文档 提供专门用于搜索该文档及其相关资源的接口。

OpenSearch 描述文档可以与 link 元素和 search 链接类型一起使用，以使 用户代理能够自动发现搜索 接口。[OPENSEARCH]

stylesheet 关键字可以与 link 元素一起使用。此关键字创建一个参与样式处理模型的外部资源 链接。此关键字是 body-ok。

指定的资源是一个CSS 样式表，用于 描述如何呈现 文档。

Alternative_style_sheets

仅一个引擎支持。

Firefox3+Safari?Chrome1–48
Opera是Edge否
Edge（旧版）?Internet Explorer8+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

如果还在 link 元素上指定了 alternate 关键字，则该链接是 替代样式表；在这种情况下，必须在 link 元素上指定 title 属性，且其值 不得为空。

由 stylesheet 关键字给出的资源的默认类型是 text/css。

如果此类型的 link 元素是由其节点文档的 解析器创建的，则该元素隐式地可能阻塞渲染。

当具有 stylesheet 关键字的 link 元素的 disabled 属性被设置时，禁用其 关联的 CSS 样式表。

获取并 处理此类链接的适当时机为：

怪异行为：如果文档已被设置为怪异模式，与外部资源的 URL 同源， 并且外部资源的Content-Type 元数据不是 受支持的样式表类型，则用户代理必须改为假定其为 text/css。

给定一个 link 元素 el 和请求 request，此类所链接资源的所链接资源获取设置步骤 如下：

  1. 如果设置了 el 的 disabled 属性， 则返回 false。

  2. 如果 el 贡献脚本阻塞样式 表，则将 el 追加到其节点 文档的脚本阻塞 样式表集合中。

  3. 如果 el 的 media 属性值 与环境 匹配，并且 el 可能 阻塞渲染，则在 el 上阻塞 渲染。

  4. 如果 el 当前阻塞渲染，则将 request 的 渲染阻塞设置为 true。

  5. 返回 true。

有关使用 CSSOM 的获取 CSS 样式表算法替代默认获取并处理所链接 资源算法的计划，请参阅 issue #968。在此期间，任何关键 子资源请求的渲染阻塞应设置为 link 元素当前是否 阻塞渲染。

给定一个 link 元素 el、布尔值 success、响应 response 和字节序列 bodyBytes，要处理此类 所链接资源：

  1. 如果资源的Content-Type 元数据不是 text/css，则将 success 设置为 false。

  2. 如果 el 不再创建参与样式处理模型的外部资源链接，或者自相关资源被获取以来，重新获取它已变得适当：

    1. 从 el 的节点 文档的脚本阻塞样式表集合中移除 el。

    2. 返回。

  3. 如果 el 具有关联的 CSS 样式表，则移除该 CSS 样式表。

  4. 如果 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 的事件。

  5. 否则，在 el 上触发名为 error 的事件。

  6. 如果 el 贡献脚本阻塞样式 表：

    1. 断言：el 的节点 文档的脚本阻塞 样式表集合包含 el。

    2. 从其节点 文档的脚本阻塞样式表集合中移除 el。

  7. 在 el 上解除渲染阻塞。

此类所链接资源的处理 Link 标头 步骤是什么也不做。

tag 关键字可以与 a 和 area 元素一起使用。此关键字创建 一个超链接。

tag 关键字表示 被引用文档所表示的标签适用于当前文档。

由于它表示该标签适用于当前文档，因此在标签云的标记中使用此关键字是不合适的，因为标签云 列出一组页面中流行的标签。

此文档介绍一些宝石，因此使用 “https://en.wikipedia.org/wiki/Gemstone”为其添加标签，从而明确将其归类为 与“珠宝”意义上的宝石相关，而不是例如美国的城镇、Ruby 包格式或 瑞士机车类别：

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>我的宝贝</title>
 </head>
 <body>
  <header><h1>我的宝贝</h1> <p>2012 年夏季</p></header>
  <p>最近，我设法处理掉了一颗一直
  困扰我的红色宝石。现在我有一颗漂亮得多的蓝宝石。</p>
  <p>那颗红色宝石是在我挖掘
  办公层时从一块铝土矿石中发现的，但没人愿意把它运走。同一颗
  红色宝石就这样在那里待了很多年。</p>
  <footer>
   标签：<a rel=tag href="https://en.wikipedia.org/wiki/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>编号 801 的 Gem 4/4 电力-柴油机车带有一只野山羊图案，并于 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="802 号机车为红色，带有受电弓，侧面有高大的通风口。">
    <figcaption>20 世纪 80 年代位于 Lago Bianco 上方的 802 号机车。</figcaption>
   </figure>
   <p>编号 802 的 Gem 4/4 电力-柴油机车带有一只旱獭图案，并于 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>

terms-of-service 关键字可以与 link、a 和 area 元素一起使用。此 关键字创建一个 超链接。

terms-of-service 关键字表示 被引用文档包含有关当前文档提供者与希望使用当前文档的用户之间协议的信息，详见 Additional Link Relation Types。[RFC6903]

某些文档构成文档序列的一部分。

文档序列是指其中每个文档都可以具有一个上一个兄弟文档和一个 下一个兄弟文档。没有上一个兄弟文档的文档是其序列的起点， 没有下一个兄弟文档的文档是其序列的终点。

一个文档可以属于多个序列。

next 关键字可以与 link、 a、area 和 form 元素一起使用。此关键字创建一个 超链接。

next 关键字表示 当前文档是某个 序列的一部分，并且该链接指向该序列中逻辑上的下一个文档。

当 next 关键字与 link 元素一起使用时，用户代理应处理此类链接，就像它们使用了 dns-prefetch、preconnect 或 prefetch 关键字之一。 用户代理希望使用哪个 关键字取决于实现；例如，用户代理在尝试节省数据、电池 电量或处理能力时，可能希望使用成本较低的 preconnect 处理模型， 或者可能希望根据对类似场景中过往 用户行为的启发式分析来选择关键字。

prev 关键字可以与 link、 a、area 和 form 元素一起使用。此关键字创建一个 超链接。

prev 关键字表示 当前文档是某个 序列的一部分，并且该链接指向该序列中逻辑上的上一个文档。

同义词：由于历史原因，用户代理还必须将关键字 “previous”视同 prev 关键字。

预定义链接类型集合的扩展可以 注册在现有 rel 值的 microformats 页面上。[MFREL]

任何人都可以随时编辑现有 rel 值的 microformats 页面以 添加一种类型。扩展类型必须使用以下信息进行说明：

关键字

正在定义的实际值。该值不应与任何其他 已定义值混淆性地相似（例如仅大小写不同）。

如果该值包含 U+003A COLON 字符（:），则它还必须是一个绝对 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 页面中定义为扩展且状态为“提议”或“批准”的类型，可以按照 “对以下内容的影响...”字段，在 link、a 和 area 元素的 rel 属性中使用。[MFREL]

4.7 编辑

ins 和 del 元素表示对文档的编辑。

4.7.1 ins 元素

Element/ins

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别：
流式内容。
短语内容。
可感知内容。
可以使用此元素的 上下文：
预期短语内容之处。
内容模型：
透明。
text/html 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
cite — 指向引文来源或 关于编辑的更多信息的链接
datetime — 更改的日期和 （可选）时间
无障碍考虑：
面向作者。
面向实现者。
清理：
默认，带有 cite、datetime 属性。
DOM 接口：
使用 HTMLModElement。

ins 元素表示对文档的添加。

以下表示添加一个段落：

<aside>
 <ins>
  <p> 我喜欢水果。 </p>
 </ins>
</aside>

以下示例也是如此，因为此处 aside 元素中的所有内容都算作 短语内容，因此 只有一个段落： 

<aside>
 <ins>
  苹果很<em>美味</em>。
 </ins>
 <ins>
  梨也一样。
 </ins>
</aside>

ins 元素不应跨越隐含段落 边界。

以下示例表示添加两个段落，其中第二个段落分成两部分 插入。因此，此示例中的第一个 ins 元素跨越了 段落边界，这被视为不良形式。

<aside>
 <!-- 不要这样做 -->
 <ins datetime="2005-03-16 00:00Z">
  <p> 我喜欢水果。 </p>
  苹果很<em>美味</em>。
 </ins>
 <ins datetime="2007-12-19 00:00Z">
  梨也一样。
 </ins>
</aside>

以下是更好的标记方式。它使用了更多元素，但没有任何元素跨越 隐含段落边界。

<aside>
 <ins datetime="2005-03-16 00:00Z">
  <p> 我喜欢水果。 </p>
 </ins>
 <ins datetime="2005-03-16 00:00Z">
  苹果很<em>美味</em>。
 </ins>
 <ins datetime="2007-12-19 00:00Z">
  梨也一样。
 </ins>
</aside>

4.7.2 del 元素

Element/del

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别：
流式内容。
短语内容。
可感知内容。
可以使用此元素的 上下文：
预期短语内容之处。
内容模型：
透明。
text/html 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
cite — 指向引文来源或 关于编辑的更多信息的链接
datetime — 更改的日期和 （可选）时间
无障碍考虑：
面向作者。
面向实现者。
清理：
默认，带有 cite、datetime 属性。
DOM 接口：
使用 HTMLModElement。

del 元素表示从文档中移除的内容。

del 元素不应跨越隐含段落 边界。

以下展示一个“待办事项”列表，其中已完成的项目会被划掉，并附有 完成日期和时间。

<h1>待办事项</h1>
<ul>
 <li>清空洗碗机</li>
 <li><del datetime="2009-10-11T01:25-07:00">观看 Walter Lewin 的讲座</del></li>
 <li><del datetime="2009-10-10T23:38-07:00">下载更多曲目</del></li>
 <li>购买打印机</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, ReflectURL] attribute USVString cite;
  [CEReactions, Reflect] attribute DOMString dateTime;
};

4.7.4 编辑和段落

本节为非规范性内容。

由于 ins 和 del 元素不会影响段落划分，因此在某些段落为隐含的情况（没有显式的 p 元素）下， ins 或 del 元素可以同时跨越 整个段落或其他 非短语内容元素，以及 另一个段落的一部分。例如： 

<section>
 <ins>
  <p>
   这是一个被插入的段落。
  </p>
  这是另一个段落，其第一句话与上面的段落
  同时被插入。
 </ins>
 这是第二句话，它一直都在那里。
</section>

通过仅用 p 元素包裹某些段落，甚至可以使一个 段落的结尾、完整的第二个段落和第三个段落的开头由同一个 ins 或 del 元素覆盖（尽管这非常 令人困惑，也不被视为 良好做法）： 

<section>
 这是第一个段落。<ins>这句话是
 插入的。
 <p>第二个段落是插入的。</p>
 这句话也是插入的。</ins> 这是本示例中的
 第三个段落。
 <!-- （不要这样做） -->
</section>

不过，由于隐含段落的定义方式， 无法使用同一个 ins 或 del 元素标记一个段落的结尾和 紧接着的下一个段落的开头。相反，必须使用一个（或两个）p 元素和两个 ins 或 del 元素，例如： 

<section>
 <p>这是第一个段落。<del>这句话被
 删除了。</del></p>
 <p><del>这句话也被删除了。</del> 那
 句话需要一个单独的 &lt;del&gt; 元素。</p>
</section>

部分由于上述混乱，强烈建议作者始终使用 p 元素标记所有段落，而不是让 ins 或 del 元素跨越隐含段落 边界。

4.7.5 编辑和列表

本节为非规范性内容。

ol 和 ul 元素的内容模型不允许 ins 和 del 元素作为子元素。列表始终 表示其所有 项目，包括原本会标记为已删除的项目。

要表示某个项目已插入或删除，可以在 li 元素的内容外包裹一个 ins 或 del 元素。要表示某个 项目已被另一个项目替换，一个 li 元素可以包含一个或多个 del 元素，后跟一个或 多个 ins 元素。

在以下示例中，一个最初为空的列表随着时间推移添加和移除了项目。 示例中被强调的部分显示列表的“当前” 状态。不过，列表项编号并未考虑这些编辑。

<h1>阻止发布的缺陷</h1>
<ol>
 <li><ins datetime="2008-02-12T15:20Z">缺陷 225：
 雨水探测器在雪中无法工作</ins></li>
 <li><del datetime="2008-03-01T20:22Z"><ins datetime="2008-02-14T12:02Z">缺陷 228：
 水缓冲区在四月溢出</ins></del></li>
 <li><ins datetime="2008-02-16T13:50Z">缺陷 230：
 热水器未使用可再生燃料</ins></li>
 <li><del datetime="2008-02-20T21:15Z"><ins datetime="2008-02-16T14:25Z">缺陷 232：
 启动后检测到二氧化碳排放</ins></del></li>
</ol>

在以下示例中，一个最初只包含水果的列表被替换为一个只包含 颜色的列表。

<h1><del>水果</del><ins>颜色</ins>列表</h1>
<ul>
 <li><del>青柠</del><ins>绿色</ins></li>
 <li><del>苹果</del></li>
 <li>橙色</li>
 <li><del>梨</del></li>
 <li><ins>蓝绿色</ins></li>
 <li><del>柠檬</del><ins>黄色</ins></li>
 <li>橄榄色</li>
 <li><ins>紫色</ins></li>
</ul>

4.7.6 编辑和表格

本节为非规范性内容。

构成表格模型一部分的元素具有复杂的内容模型要求， 不允许使用 ins 和 del 元素，因此表示对 表格的编辑可能很困难。

要表示添加或移除了整行或整列，可以将该行或列中 每个单元格的全部内容分别包裹在 ins 或 del 元素中。

此处向表格添加了一行：

<table>
 <thead>
  <tr> <th> 游戏名称           <th> 游戏发行商   <th> 评价
 <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> 游戏名称           <th> 游戏发行商   <th> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">评价</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 Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLPictureElement

所有当前引擎均支持。

Firefox38+Safari9.1+Chrome38+
Opera?Edge79+
Edge（旧版）13+Internet Explorer否
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 元素，但当 source 元素嵌套在 picture 元素中时，其 src 属性 没有意义，并且资源 选择算法也不同。此外，picture 元素本身 不显示 任何内容；它只是为所包含的 img 元素提供上下文，使其 能够从多个 URL 中进行选择。

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+Edge79+
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, ReflectURL] attribute USVString src;
  [CEReactions, Reflect] attribute DOMString type;
  [CEReactions, Reflect] attribute USVString srcset;
  [CEReactions, Reflect] attribute DOMString sizes;
  [CEReactions, Reflect] attribute DOMString media;
  [CEReactions, Reflect] attribute unsigned long width;
  [CEReactions, Reflect] attribute unsigned long height;
};

source 元素允许 作者为 img 元素指定多个替代 来源集，或为媒体 元素指定多个替代 媒体资源。它自身不表示任何内容。

可以存在 type 属性。如果存在，其值必须是有效的 MIME 类型 字符串。

也可以存在 media 属性。如果存在，其值必须包含有效的媒体查询 列表。如果该值 不与环境匹配， 用户代理将跳到下一个 source 元素。

media 属性仅在媒体元素的资源选择算法 期间求值一次。相比之下，使用 picture 元素时， 用户代理将响应 环境变化。

其余要求取决于父节点是 picture 元素还是媒体元素：

source 元素的 父节点是 picture 元素

必须存在 srcset 属性，并且它是一个 srcset 属性。

如果 source 元素被 选中，则 srcset 属性会将图像来源贡献给 来源集。

如果 srcset 属性具有任何使用宽度 描述符的图像 候选字符串，则也可以存在 sizes 属性。如果此外， 后续兄弟 img 元素不允许 自动尺寸，则必须存在 sizes 属性。 sizes 属性是一个 sizes 属性；如果 source 元素被 选中，它会将来源尺寸贡献给 来源集。

如果 img 元素允许自动尺寸，则可以在前面的兄弟 source 元素上省略 sizes 属性。在 这种情况下，它等同于指定 auto。

source 元素 支持尺寸属性。 img 元素可以使用某个 source 元素的 width 和 height 属性，而不是使用 img 元素自身的 属性，以确定其渲染尺寸和 宽高比，如“渲染”章节中所定义。

type 属性 给出来源集中图像的类型，以便在用户代理 不支持给定类型时跳到下一个 source 元素。

如果未 指定 type 属性，则用户代理在 获取图像后发现不支持该图像格式时，不会选择另一个 source 元素。

当 source 元素具有后续兄弟 source 元素或指定了 srcset 属性的 img 元素时， 它必须至少具有以下一项：

不得存在 src 属性。

source 元素的父节点是媒体元素

src 属性 给出媒体 资源的 URL。其值必须是可能由空格包围的有效 非空 URL。必须存在此属性。

type 属性 给出媒体 资源的类型，以帮助用户代理在获取该媒体 资源之前确定是否能够播放它。某些 MIME 类型定义的 codecs 参数可能是准确指定资源编码方式所必需的。 [RFC6381]

当 source 元素已经插入 video 或 audio 元素中时，动态修改其 src 或 type 属性 不会产生任何效果。要更改正在播放的内容，只需直接使用媒体元素上的 src 属性，并且可能使用 canPlayType() 方法从可用 资源中进行选择。通常，在文档 解析完成后手动操作 source 元素 是一种不必要地复杂的方法。

以下列表展示了如何在 type 属性中使用 codecs= MIME 参数的一些示例。

MP4 容器中的 H.264 受约束基线配置视频（与主配置和扩展配置视频兼容）级别 3，以及低复杂度 AAC 音频
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
MP4 容器中的 H.264 扩展配置视频（与基线配置兼容）级别 3，以及低复杂度 AAC 音频 
<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
MP4 容器中的 H.264 主配置视频级别 3，以及低复杂度 AAC 音频
<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
MP4 容器中的 H.264“高”配置视频（与主配置、基线配置或扩展配置不兼容）级别 3，以及 低复杂度 AAC 音频
<source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
MP4 容器中的 MPEG-4 Visual 简单配置级别 0 视频，以及低复杂度 AAC 音频
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>
MP4 容器中的 MPEG-4 高级简单配置级别 0 视频，以及低复杂度 AAC 音频
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
3GPP 容器中的 MPEG-4 Visual 简单配置级别 0 视频，以及 AMR 音频
<source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>
Ogg 容器中的 Theora 视频和 Vorbis 音频
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
Ogg 容器中的 Theora 视频和 Speex 音频
<source src='video.ogv' type='video/ogg; codecs="theora, speex"'>
Ogg 容器中的纯 Vorbis 音频
<source src='audio.ogg' type='audio/ogg; codecs=vorbis'>
Ogg 容器中的纯 Speex 音频
<source src='audio.spx' type='audio/ogg; codecs=speex'>
Ogg 容器中的纯 FLAC 音频
<source src='audio.oga' type='audio/ogg; codecs=flac'>
Ogg 容器中的 Dirac 视频和 Vorbis 音频
<source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>

不得存在 srcset 和 sizes 属性。

给定 insertedNode，source 的HTML 元素插入 步骤为：

  1. 令 parent 为 insertedNode 的父节点。

  2. 如果 parent 是一个没有 src 属性，且其 networkState 的值为 NETWORK_EMPTY 的 媒体元素， 则调用该媒体 元素的资源选择 算法。

  3. 如果 parent 是 picture 元素， 则对 parent 的子节点中的每个 child，如果 child 是 img 元素， 则将此计为 child 的一次相关 突变。

给定 movedNode、 isSubtreeRoot 和 oldAncestor，source 的HTML 元素移动 步骤为：

  1. 如果 isSubtreeRoot 为 true，并且 oldAncestor 是 picture 元素，则对 oldAncestor 的子节点中的每个 child：如果 child 是 img 元素，则 将此计为 child 的一次相关 突变。

给定 removedNode、isSubtreeRoot 和 oldAncestor，source 的HTML 元素移除 步骤为：

  1. 如果 isSubtreeRoot 为 true，并且 oldAncestor 是 picture 元素，则对 oldAncestor 的子节点中的每个 child：如果 child 是 img 元素，则 将此计为 child 的一次相关 突变。

如果作者不确定所有用户代理是否都能够渲染所提供的媒体资源， 则作者可以监听最后一个 source 元素上的 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+

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?

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+

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+
类别：
流式内容。
短语内容。
嵌入内容。
表单关联元素。
如果元素具有 usemap 或 controls 属性：交互式内容。
可感知内容。
可以使用此元素的 上下文：
预期嵌入内容 之处。
作为 picture 元素的子节点，位于所有 source 元素之后。
内容模型：
无。
text/html 中的 标签省略：
没有结束标签。
内容属性：
全局属性
alt — 图像不可用时使用的 替代文本
src — 资源地址
srcset — 在 不同情形下使用的图像，例如高分辨率显示器、小型显示器等
sizes — 用于不同 页面布局的图像尺寸
crossorigin — 元素如何处理跨源请求
usemap — 要使用的 图像映射名称
ismap — 图像是否为 服务器端图像映射
controls — 显示用户 代理控件
width — 水平尺寸
height — 垂直尺寸
referrerpolicy — 元素发起的获取所使用的来源策略
decoding — 处理此图像以进行呈现时 使用的解码提示
loading — 用于 确定是否延迟加载
fetchpriority — 设置元素发起的获取的优先级
无障碍考虑：
如果元素具有非空的 alt 属性：面向作者；面向实现者。
否则：面向作者；面向实现者。
清理：
未分类。
DOM 接口：
[Exposed=Window,
 LegacyFactoryFunction=Image(optional unsigned long width, optional unsigned long height)]
interface HTMLImageElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute DOMString alt;
  [CEReactions, ReflectURL] attribute USVString src;
  [CEReactions, Reflect] attribute USVString srcset;
  [CEReactions, Reflect] attribute DOMString sizes;
  [CEReactions] attribute DOMString? crossOrigin;
  [CEReactions, Reflect] attribute DOMString useMap;
  [CEReactions, Reflect] attribute boolean isMap;
  [CEReactions, Reflect] attribute boolean controls;
  [CEReactions, ReflectSetter] attribute unsigned long width;
  [CEReactions, ReflectSetter] 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 Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

由 src 和 srcset 属性给出的图像， 以及当父节点是 picture 元素时，任何前面的兄弟 source 元素的 srcset 属性所给出的图像，是 嵌入内容；alt 属性的值为 无法处理图像或已禁用图像加载的人提供等效内容（即， 它是 img 元素的回退内容）。

对 alt 属性值的要求 在单独的章节中说明。

src 和 srcset 属性中至少必须存在一个。

如果存在 src 属性，则它 必须包含一个引用非交互式、可以选择性地带有动画、既非分页也非脚本化图像资源的 可能由空格 包围的有效非空 URL。

上述要求意味着图像可以是静态位图（例如 PNG、GIF、 JPEG）、单页矢量文档（单页 PDF、具有 SVG 文档元素的 XML 文件）、 动画位图（APNG、动画 GIF）、动画矢量图形（使用声明式 SMIL 动画且具有 SVG 文档元素的 XML 文件）等等。 不过，这些 定义排除了带有脚本的 SVG 文件、多页 PDF 文件、交互式 MNG 文件、HTML 文档、纯文本文档等。[PNG] [GIF] [JPEG] [PDF] [XML] [APNG] [SVG] [MNG]

srcset 属性是一个 srcset 属性。

srcset 属性和 src 属性（如果未使用宽度 描述符）会将图像 来源 贡献给来源集（如果未选择任何 source 元素）。

如果存在 srcset 属性， 并且它具有任何使用宽度 描述符的图像候选 字符串，则还必须存在 sizes 属性。 如果未指定 srcset 属性，并且 loading 属性处于 延迟状态，则可以为 sizes 属性指定值 “auto”（ASCII 不区分大小写）。sizes 属性是一个 sizes 属性， 它会将来源尺寸贡献给来源集（如果未 选择任何 source 元素）。

如果满足以下条件，则 img 元素允许自动尺寸：

Attributes/crossorigin

所有当前引擎均支持。

Firefox8+Safari6+Chrome13+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

crossorigin 属性是一个CORS 设置 属性。其目的是允许来自 允许跨源访问的第三方站点的图像与 canvas 一起使用。

referrerpolicy 属性是一个来源 策略属性。其目的是设置获取图像时使用的来源 策略。[REFERRERPOLICY]

decoding 属性指示解码此 图像的首选方法。如果存在，该属性必须是一个图像解码提示。此属性的缺失值默认值和无效值默认值均为 自动状态。

HTMLImageElement/fetchPriority

Firefox否Safari🔰 预览版+Chrome102+
Opera?Edge102+
Edge（旧版）?Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

fetchpriority 属性是一个获取 优先级属性。其目的是设置获取图像时使用的优先级。

loading 属性 是一个延迟 加载属性。其目的是指示加载视口 之外图像的策略。

当 loading 属性的 状态更改为 立即状态时，用户代理 必须运行以下 步骤：

  1. 令 resumptionSteps 为 img 元素的延迟加载 恢复步骤。

  2. 如果 resumptionSteps 为 null，则返回。

  3. 将 img 的延迟加载恢复 步骤设置为 null。

  4. 调用 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> <!-- 此 div 之后的所有内容都位于视口下方 -->
<img src="4.jpeg" alt="4">
<img src="5.jpeg" loading=lazy alt="5">

在以上示例中，图像按如下方式加载：

1.jpeg、2.jpeg、 4.jpeg

这些图像立即加载，并延迟窗口的 load 事件。

3.jpeg

由于图像位于视口中，因此它会在布局已知时加载，但不会 延迟窗口的 load 事件。

5.jpeg

该图像仅在滚动进入视口后才加载，并且不会延迟窗口的 load 事件。

鼓励开发者在延迟加载的图像上通过 width 和 height 属性 指定首选宽高比，即使 CSS 设置了图像的宽度和高度属性也是如此，以防止 图像加载后页面布局发生偏移。

给定 insertedNode， img 的HTML 元素插入 步骤为：

  1. 如果 insertedNode 的父节点是 picture 元素，则 将此计为 insertedNode 的一次相关突变。

给定 movedNode、 isSubtreeRoot 和 oldAncestor，img 的HTML 元素移动步骤 为：

  1. 如果 isSubtreeRoot 为 true，并且 oldAncestor 是 picture 元素，则将此计为 movedNode 的一次相关 突变。

给定 removedNode、 oldAncestor 和 isSubtreeRoot，img 的HTML 元素移除 步骤为：

  1. 如果 isSubtreeRoot 为 true，并且 oldAncestor 是 picture 元素，则将此计为 removedNode 的一次相关 突变。

img 元素不得 用作布局工具。特别是，不应使用 img 元素显示透明图像，因为此类图像很少传达含义，也 很少为文档添加任何有用内容。

img 元素 表示什么，取决于 src 属性和 alt 属性。

如果设置了 src 属性，并且 alt 属性设置为空 字符串

图像要么是装饰性的，要么是对其余内容的补充，并与 文档中的某些其他信息重复。

如果图像可用，并且用户代理配置为 显示该图像，则元素表示 元素的图像数据。

否则，元素不表示任何内容，并且 可以从渲染中完全省略。用户代理可以向用户提供通知，说明存在图像，但 已从渲染中省略。

如果设置了 src 属性，并且 alt 属性设置为 非空值

图像是内容的关键部分；alt 属性 给出图像的文本等效内容或替代内容。

如果图像可用，并且用户 代理配置为 显示该图像，则元素表示 元素的图像数据。

否则，元素表示 alt 属性给出的文本。用户代理 可以向用户提供通知， 说明存在图像，但已从渲染中省略。

如果设置了 src 属性，但 未设置 alt 属性

图像可能是内容的关键部分，但没有可用的图像文本等效内容。

在符合要求的文档中，缺少 alt 属性表示该 图像是内容的关键部分， 但在生成图像时无法获得图像的文本替代内容。

如果图像可用，并且用户 代理配置为 显示该图像，则元素表示 元素的图像数据。

如果图像具有 src 属性， 且其值为 空字符串，则元素不表示任何内容。

否则，用户代理应显示某种指示，表明存在一幅 未被渲染的图像；并且在用户请求、进行了相应配置，或者在响应导航时需要 提供上下文信息的情况下，可以提供图像的说明文字信息， 其派生方式如下：

  1. 如果图像具有 title 属性， 且其值不是 空字符串，则返回该属性的值。

  2. 如果图像是 figure 元素的后代， 该元素具有一个子 figcaption 元素，并且忽略 figcaption 元素及其 后代后，figure 元素除 元素间 空白和 img 元素外，没有其他 流式内容后代，则返回第一个此类 figcaption 元素的内容。

  3. 不返回任何内容。（没有说明文字信息。）

如果未设置 src 属性， 并且 alt 属性 设置为空字符串，或者根本未设置 alt 属性

元素不表示任何内容。

否则

元素表示 alt 属性给出的文本。

alt 属性不表示 建议性信息。 用户代理不得以与 title 属性内容相同的方式呈现 alt 属性的内容。

用户代理始终可以为用户提供显示任何图像或阻止任何 图像显示的选项。当用户无法看到图像时，例如由于视觉障碍，或因为正在使用 不具备图形功能的文本终端，用户代理还可以应用启发式方法来帮助用户利用 图像。例如，此类启发式方法可以包括 对图像中发现的文本进行光学字符识别（OCR）。

虽然鼓励用户代理修复缺少 alt 属性的情况，但作者不得依赖 此类行为。提供用作图像替代内容的文本的要求将在 下文详细说明。

img 元素的内容（如果有）在 渲染时会被忽略。

如果存在 usemap 属性， 它可以指示图像具有关联的 图像映射。

当 ismap 属性 用于某个元素上，而该元素是具有 href 属性的 a 元素的后代时，该属性的 存在表示该元素 提供对服务器端图像映射的访问。这会影响相应 a 元素上事件的处理方式。

ismap 属性是一个 布尔属性。不得在 没有具有 href 属性的祖先 a 元素的元素上指定 该属性。

当与 picture 元素中指定了 media 属性的 source 元素一起使用时，usemap 和 ismap 属性可能导致 令人困惑的行为。

controls 属性是一个布尔属性。如果 存在，它表示用户代理可以 向用户公开用户界面。不得在没有 alt 属性，或其 alt 属性值为空 字符串的元素上指定该属性。

如果存在 controls 属性， 用户代理 可以公开图像控件（例如全屏查看控件）。所提供的具体 控件由实现定义，并且可以特定于平台或基于 用户的偏好。

如果用户代理通过在 img 元素上显示控件来公开用户界面，则用户代理在用户 与该界面交互时应抑制任何用户交互事件。

Issue #12318 跟踪 图像控件与动画图像之间的交互。在该问题解决之前，用户代理不应公开 图像的动画控件。

img 元素支持尺寸 属性。

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/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 属性会设置为 相应参数中传入的 值。

要确定 img 元素 image 的尺寸：

  1. 如果 image 正在渲染，则以 CSS 像素为单位返回其渲染宽度和 高度。[CSS]

  2. 如果 image 可用，并且具有 经过密度校正的自然宽度和 高度，则以 CSS 像素为单位返回其 经过密度校正的自然宽度和 高度。

  3. 返回宽度 0 和高度 0。

width 的获取器步骤是返回此对象的尺寸的宽度。

height 的获取器步骤是返回此对象的尺寸的高度。

naturalWidth 和 naturalHeight 的获取器 步骤如下：

  1. 如果图像不可用，则 返回 0。

  2. 以 CSS 像素为单位，返回图像经过密度校正的自然宽度和 高度中的相应分量。[CSS]

由于图像的经过密度校正的自然宽度和高度 会考虑其元数据中指定的任何方向，因此 naturalWidth 和 naturalHeight 所反映的是 应用正确确定图像方向所需的任何 旋转后的尺寸，而不考虑 'image-orientation' 属性的值。

complete 的获取器步骤如下：

  1. 如果以下任一项为 true：

    则返回 true。

  2. 返回 false。

currentSrc IDL 属性必须返回 img 元素的当前请求的当前 URL。

调用 decode() 方法时，必须执行以下步骤：

  1. 令 promise 为一个新的 promise。

  2. 排入一个微任务以执行 以下步骤：

    这样做是因为更新 图像数据 也发生在微任务中。因此，为了使如下代码

    img.src = "stars.jpg";
img.decode();

    正确解码 stars.jpg，需要将任何处理延迟一个 微任务。

    1. 令 global 为此对象的相关全局 对象。

    2. 如果以下任一项为 true：

      则以 “EncodingError” DOMException 拒绝 promise。

    3. 否则，并行地等待以下 情况之一发生，并 执行相应操作：

      此 img 元素的 节点文档不再是完全 活动的
      此 img 元素的 当前请求发生更改或 突变
      此 img 元素的 当前请求的状态变为损坏

      使用 global，在DOM 操作任务源上排入一个全局任务，以 “EncodingError” DOMException 拒绝 promise。

      此 img 元素的 当前请求的状态变为完全 可用

      解码图像。

      如果此图像不需要执行解码（例如，因为它是 矢量图形），或者解码过程成功完成，则使用 global，在DOM 操作任务源上排入一个全局 任务，以使用 undefined 兑现 promise。

      如果解码失败（例如由于图像数据无效），则使用 global，在DOM 操作任务源上排入一个全局 任务，以 “EncodingError” DOMException 拒绝 promise。

      用户代理应确保已解码的媒体数据至少在事件循环中下一次成功的更新渲染步骤结束前保持随时可用。 这是 API 合约的重要组成部分，如果可能，不应 破坏它。（通常，只有在内存不足而需要驱逐已解码图像数据， 或者图像太大而无法在这段时间内保持解码形式时，才会违反这一点。）

      动画图像只有在所有帧都加载后才会变为完全 可用。 因此，尽管实现可以在此之前解码 第一帧，但上述步骤不会这样做，而是等待所有 帧都可用。

  3. 返回 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));
});

除了 DOM 中的工厂方法（例如 createElement()）外， 还提供了一个用于创建 HTMLImageElement 对象的旧版工厂函数： Image(width, height)。调用时， 旧版工厂函数必须执行以下步骤：

  1. 令 document 为当前全局对象的关联 Document。

  2. 令 img 为给定 document、“img”和HTML 命名空间时创建 元素的结果。

  3. 如果给出了 width，则使用“width” 和 width 为 img 设置 属性值。

  4. 如果给出了 height，则使用“height”和 height 为 img 设置属性值。

  5. 返回 img。

同一幅图像可以根据上下文具有不同的适当替代文本。

在以下每种情况中，都使用了同一幅图像，但每次的 alt 文本都不同。该 图像是瑞士日内瓦州 Carouge 市镇的徽章。

这里将其用作补充图标：

<p>我曾住在 <img src="carouge.svg" alt=""> Carouge。</p>

这里将其用作表示该城镇的图标：

<p>家乡：<img src="carouge.svg" alt="Carouge"></p>

这里将其用作关于该城镇的文本的一部分：

<p>Carouge 有一个徽章。</p>
<p><img src="carouge.svg" alt="徽章描绘了一只坐在树前的狮子。"></p>
<p>它被用作城镇各处的装饰。</p>

这里将其用于支持类似的文本，其中描述与图像一同给出， 而不是作为图像的替代内容：

<p>Carouge 有一个徽章。</p>
<p><img src="carouge.svg" alt=""></p>
<p>徽章描绘了一只坐在树前的狮子。
它被用作城镇各处的装饰。</p>

这里将其用作故事的一部分：

<p>她拿起文件夹，一张纸掉了出来。</p>
<p><img src="carouge.svg" alt="这张纸形似盾牌，具有
红色背景、一棵绿树和一只伸着舌头的黄色狮子，
其尾巴呈 S 形。"></p>
<p>她盯着文件夹。S！她一直寻找的答案
原来只是字母 S！她以前怎么没有发现？现在一切都串联起来了。
Hector 在电话中提到狮子尾巴的那次，
Maria 吐舌头的那次……</p>

这里在发布时并不知道图像会是什么，只知道它将是某种 徽章，因此无法提供替代文本，而只能在 title 属性中提供图像的简短 说明文字：

<p>最后一位上传徽章的用户上传了这个：</p>
<p><img src="last-uploaded-coat-of-arms.cgi" title="用户上传的徽章。"></p>

理想情况下，即使在这种情况下，作者也应设法提供真正的替代文本，例如 询问上一位用户。不提供替代文本会使文档更难被 无法查看图像的人使用，例如盲人用户、使用极低带宽 连接或按字节付费的用户，或者被迫使用纯文本 Web 浏览器的用户。

下面还有一些示例，展示同一幅图像在不同上下文中使用， 并且每次具有不同的适当替代文本。

<article>
 <h1>我的猫</h1>
 <h2>Fluffy</h2>
 <p>Fluffy 是我最喜欢的。</p>
 <img src="fluffy.jpg" alt="她喜欢玩毛线球。">
 <p>她实在太可爱了。</p>
 <h2>Miles</h2>
 <p>我的另一只猫 Miles 只会吃饭和睡觉。</p>
</article>
<article>
 <h1>摄影</h1>
 <h2>在室内拍摄移动目标</h2>
 <p>这里的诀窍是懂得预判；要知道拍摄对象会以什么速度、
 从多远的距离经过。</p>
 <img src="fluffy.jpg" alt="使用这种技术，可以很好地拍摄一只
追逐毛线球、飞奔而过的猫。">
 <h2>夜间自然摄影</h2>
 <p>要做到这一点，需要极其敏感的胶片，
 或极强的闪光灯。</p>
</article>
<article>
 <h1>关于我</h1>
 <h2>我的宠物</h2>
 <p>我有一只名叫 Fluffy 的猫和一只名叫 Miles 的狗。</p>
 <img src="fluffy.jpg" alt="我的猫 Fluffy 总能让自己忙起来。">
 <p>我和我的狗 Miles 喜欢一起长距离散步。</p>
 <h2>音乐</h2>
 <p>散步后头脑放空时，我喜欢听 Bach。</p>
</article>
<article>
 <h1>Fluffy 和毛线</h1>
 <p>Fluffy 是一只喜欢玩毛线的猫。她也喜欢跳跃。</p>
 <aside><img src="fluffy.jpg" alt="" title="Fluffy"></aside>
 <p>她早上会玩，晚上也会玩。</p>
</article>

4.8.4 图像

4.8.4.1 简介

本节为非规范性内容。

要在 HTML 中嵌入图像，当只有一个图像资源时，请使用 img 元素及其 src 属性。

<h2>来自今日特色文章</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）
是一位英国<a href="/wiki/Music_hall">音乐厅</a>歌手，……

但是，在许多情况下，作者可能希望使用多个图像资源，并让用户代理从中选择：

上述情况并不相互排斥。例如，将用于不同设备像素比的不同资源与用于 艺术指导的不同资源结合使用是合理的。

虽然可以使用脚本解决这些问题，但这样做会引入一些其他问题：

鉴于此，本规范引入了许多功能，以声明方式解决上述问题。

图像渲染尺寸固定时，基于设备像素比的选择

img 元素上的 src 和 srcset 属性可以使用 x 描述符提供多个仅尺寸不同的图像（较小图像是较大图像的缩小版本）。

当图像的渲染尺寸取决于视口宽度 （基于视口的选择）时，x 描述符并不合适， 但可以与 艺术指导一起使用。 

<h2>来自今日特色文章</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）
是一位英国<a href="/wiki/Music_hall">音乐厅</a>歌手，……

用户代理可以根据用户屏幕的像素密度、缩放级别，以及可能存在的其他因素 （例如用户的网络状况），选择任何给定资源。

为了与尚不理解 srcset 属性的旧版用户代理 保持向后兼容，其中一个 URL 会在 img 元素的 src 属性中指定。这样即使在旧版用户代理中， 也会显示一些有用的内容（尽管分辨率可能低于用户期望）。对于新版用户代理，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="这只帅气的狼"></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 属性，无论用户设备有多大，用户代理都可以选择要下载的正确图像来源。

为了向后兼容，其中一个 URL 会在 img 元素的 src 属性中指定。在新版用户代理中， 当 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="壶铃摆动">

sizes 属性在 30em 和 50em 处设置布局断点，并声明这些断点之间的图像尺寸为 100vw、50vw 或 calc(33vw - 100px)。这些尺寸不一定必须与 CSS 中指定的实际图像宽度 完全匹配。

用户代理将从 sizes 属性中选择一个宽度：使用第一个包含求值为 true 的<media-condition>（括号中的部分）的项目， 如果所有项目均求值为 false，则使用最后一个项目（calc(33vw - 100px)）。

例如，如果视口宽度为 29em，则 (max-width: 30em) 求值为 true，并使用 100vw， 因此就资源选择而言，图像尺寸为 29em。如果 视口宽度改为 32em，则 (max-width: 30em) 求值为 false，但 (max-width: 50em) 求值为 true， 并使用 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="壶铃摆动">

为了与不支持 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="壶铃摆动">
基于艺术指导的选择

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="狼在雪中奔跑。">
</picture>

用户代理将选择第一个其 media 属性中的媒体查询 匹配的 source 元素， 然后从其 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="早餐套餐">
 </picture>
</h1>
基于图像格式的选择

source 元素上的 type 属性 可以用于提供不同格式的多个图像。 

<h2>来自今日特色文章</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）
是一位英国<a href="/wiki/Music_hall">音乐厅</a>歌手，……

在此示例中，用户代理将选择第一个其 type 属性包含受支持 MIME 类型的来源。如果用户代理支持 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 穿着西装并戴着眼镜。">
 </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 穿着西装并戴着眼镜。" id="a">
 </picture>
 <figcaption>Barney Frank，2011 年</figcaption>
</figure>

或者，可以在 source 和 img 元素上使用 width 和 height 属性来提供宽度和高度： 

<figure>
 <picture>
  <source srcset="a-square.png" media="(max-width: 600px)" width="100" height="100">
  <img src="a-rectangle.png" width="300" height="150"
  alt="Barney Frank 穿着西装并戴着眼镜。">
 </picture>
 <figcaption>Barney Frank，2011 年</figcaption>
</figure>

img 元素与 src 属性一起使用， 后者给出供不支持 picture 元素的旧版用户代理 使用的图像 URL。这就产生了一个问题：应在 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="这个梨汁水丰富。">
</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="这个梨汁水丰富。">
</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="这个梨汁水丰富。">
</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="这个梨汁水丰富。">
</picture>
4.8.4.2 source、 img 和 link 元素共有的属性
4.8.4.2.1 Srcset 属性

srcset 属性是具有本节所定义要求的属性。

如果存在，其值必须由一个或多个图像 候选字符串组成，每个字符串之间由 U+002C COMMA 字符（,）分隔。如果某个 图像候选字符串 不包含描述符，并且 URL 后没有ASCII 空白， 则后续的图像候选字符串（如果存在）必须以 一个或多个ASCII 空白开头。

图像候选字符串由以下组件按顺序组成， 并受此列表下方所述进一步限制：

  1. 零个或多个ASCII 空白。

  2. 一个不以 U+002C COMMA 字符（,）开头或结尾的有效非空 URL， 该 URL 引用非交互式、可以选择性地带有动画、既非分页也非脚本化的图像资源。

  3. 零个或多个ASCII 空白。

  4. 零个或以下之一：

    • 一个宽度描述符，由以下部分组成：ASCII 空白、一个 有效非负整数， 该整数给出一个大于零的数字，表示宽度描述符值， 以及一个 U+0077 LATIN SMALL LETTER W 字符。

    • 一个像素密度描述符，由以下部分组成：ASCII 空白、一个 有效浮点数， 该浮点数给出一个大于零的数字，表示像素密度描述符值， 以及一个 U+0078 LATIN SMALL LETTER X 字符。

  5. 零个或多个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

属于<length> 的<source-size-value>不得为负数， 并且不得使用数学函数以外的 CSS 函数。

关键字 auto 是在解析 sizes 属性中计算的宽度。 如果存在，它必须是第一个条目，并且整个<source-size-list> 值必须是字符串 "auto"（ASCII 不区分大小写），或以字符串 "auto,"（ASCII 不区分大小写）开头。

如果发起图像加载（通过更新图像数据或响应环境变化算法）的 img 元素允许自动尺寸并且正在渲染， 则 auto 为具体对象尺寸的宽度。 否则，auto 值会被忽略， 并改用下一个来源尺寸（如果存在）。

如果满足以下条件，可以在 source 元素的 sizes 属性和 img 元素的 sizes 属性中指定 auto 关键字。 否则，不得指定 auto。

此外，强烈建议使用 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 的经过密度校正的 自然宽度和高度：

  1. 令 density 为 img 的当前请求的当前像素密度。

  2. 令 dimensions 为 img 的当前请求的首选的经过密度校正的 尺寸。

    首选的经过密度校正的 尺寸会在准备图像以供呈现算法中， 根据图像中的元信息设置。

  3. 如果 dimensions 不为 null，则将 dimensions 的宽度设置为其宽度除以 density，将 dimensions 的高度设置为其高度除以 density，然后返回 dimensions。

  4. 令 intrinsicWidth、intrinsicHeight 和 intrinsicRatio 分别为 img 的固有宽度、固有高度和固有宽高比（如果有）。

  5. 如果 intrinsicWidth 不缺失，则将 intrinsicWidth 设置为 intrinsicWidth 除以 density。

  6. 如果 intrinsicHeight 不缺失，则将 intrinsicHeight 设置为 intrinsicHeight 除以 density。

  7. 返回使用 intrinsicWidth、intrinsicHeight 和 intrinsicRatio 应用默认尺寸算法的结果， 其中使用 300×150 的默认对象尺寸。

例如，如果当前像素密度为 3.125， 这意味着每 CSS 英寸有 300 个设备像素， 因此如果图像数据为 300x600，则其经过密度校正的自然宽度和 高度分别为 96 CSS 像素和 192 CSS 像素。

所有 img 和 link 元素都与一个来源集关联。

来源集是由零个或多个图像来源和一个来源尺寸组成的有序集合。

图像来源是一个URL， 并且可以选择性地带有像素密度描述符或宽度描述符。

来源尺寸是一个<source-size-value>。 当来源尺寸具有相对于视口的单位时，必须相对于 img 元素的节点文档的 视口解释该单位。其他单位必须与媒体查询中的解释方式相同。 [MQ]

本节算法中的解析错误 表示输入与要求之间存在非致命的不匹配。鼓励用户代理以某种方式公开解析错误。

在确定图像类型以及图像是否有效时，必须忽略图像是否成功获取 （例如响应状态是否为成功状态）。

这允许服务器在错误响应中返回图像，并使其仍然能够显示。

用户代理应应用图像嗅探规则来确定图像类型， 并将图像的关联 Content-Type 标头作为 official type。如果不应用这些规则，则图像类型必须为图像的关联 Content-Type 标头给出的类型。

用户代理不得通过 img 元素支持非图像资源 （例如其文档元素为 HTML 元素的 XML 文件）。 用户代理不得运行嵌入图像资源中的可执行代码（例如脚本）。 用户代理必须只显示多页资源（例如 PDF 文件）的第一页。 用户代理不得允许资源以交互方式运行，但应遵循资源中的任何动画。

本规范未规定必须支持哪些图像类型。

4.8.4.3.1 获取图像的时机

默认情况下，会立即获取图像。用户代理可以向用户提供改为按需获取图像的选项。 （例如，带宽受限的用户可能会使用按需选项。）

立即获取图像时，只要 img 元素被创建或经历了相关突变，用户代理就必须同步更新该元素的图像 数据；如果有相应说明，则设置重新启动动画标志。

按需获取图像时，用户代理每当需要图像数据（即按需）时，都必须更新 img 元素的图像数据，但仅当该 img 元素的当前请求的状态为不可用时才如此。当一个 img 元素经历了 相关变更时，如果用户代理仅 按需获取图像，则该 img 元素的当前请求的状态必须恢复为不可用。

4.8.4.3.2 响应 DOM 突变

img 元素的相关突变如下：

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 解码图像

图像数据通常会进行编码以减小文件大小。这意味着，为了让 用户代理将图像呈现在屏幕上，需要对数据进行解码。 解码是将图像的媒体 数据转换为适合呈现在屏幕上的位图形式的过程。请注意，相对于呈现内容所涉及的 其他过程，此过程可能较慢。因此，为了创造最佳用户体验，用户代理可以选择 何时执行解码。

如果图像解码会在完成之前阻止呈现其他内容，则称该解码为同步解码。 通常，这会使图像与任何其他内容同时以原子方式呈现。但是，这种呈现会因 执行解码所需的时间而延迟。

如果图像解码不会阻止呈现其他内容，则称该解码为异步解码。 这样可以更快地呈现非图像内容。但是，在解码完成之前，屏幕上不会显示 图像内容。解码完成后，屏幕会使用该图像进行更新。

在同步和异步解码模式下，最终内容都会在经过相同的时间后呈现在屏幕上。 主要区别在于，用户代理是否会在呈现最终内容之前先呈现非图像内容。

为了帮助用户代理决定执行同步解码还是异步解码，可以在 img 元素上设置 decoding 属性。 decoding 属性的 可能值是以下图像解码 提示关键字：

关键字 状态 描述
sync 同步 表示倾向于同步解码此图像， 以便与其他内容一起进行原子呈现。
async 异步 表示倾向于异步解码此图像， 以避免延迟其他内容的呈现。
auto 自动 表示对解码模式没有偏好（默认）。

在解码图像时，用户代理应 遵循 decoding 属性状态所表示的偏好。如果所表示的状态为自动，则用户代理可以自由选择任何 解码行为。

还可以使用 decode() 方法控制解码行为。由于 decode() 方法执行的解码独立于负责 将内容呈现在屏幕上的过程，因此不受 decoding 属性影响。

4.8.4.3.5 更新图像数据

不能从并行运行的步骤中调用此算法。如果 用户代理需要从并行运行的步骤中调用此算法，则需要 排入一个任务来执行。

当用户代理要更新一个 img 元素的图像数据时， 可以选择设置重新开始动画标志，也可以选择设置可能省略 事件标志；它必须运行以下步骤：

  1. 如果元素的节点文档不是完全活动的：

    1. 并行继续运行此算法。

    2. 等待元素的节点 文档变为完全 活动的。

    3. 如果在此实例之后启动了针对此 img 元素的 另一个此算法实例 （即使该实例已经中止且不再运行），则返回。

    4. 排入一个微任务以继续此算法。

  2. 如果用户代理不支持图像，或者其图像支持已被禁用，则 为当前 请求和待处理 请求中止图像 请求，将当前 请求的状态设置为 不可用，将待处理请求设置为 null，然后 返回。

  3. 令 previousURL 为当前请求的当前 URL。

  4. 令 selected source 为 null，令 selected pixel density 为 undefined。

  5. 如果元素不使用 srcset 或 picture，并且指定了值不是空字符串的 src 属性， 则将 selected source 设置为元素的 src 属性值，并将 selected pixel density 设置为 1.0。

  6. 将元素的最后 选择的来源设置为 selected source。

  7. 如果 selected source 不为 null：

    1. 令 urlString 为以元素的节点 文档为基准，对 selected source 执行编码解析并序列化 URL的结果。

    2. 如果 urlString 为失败，则中止此内部步骤集。

    3. 令 key 为一个元组，该元组由 urlString、img 元素的 crossorigin 属性的模式，以及当该 模式不是无 CORS时，节点 文档的源组成。

    4. 如果可用 图像列表包含 key 的条目：

      1. 为该条目设置忽略高层缓存标志。

      2. 为当前请求和 待处理请求中止图像请求。

      3. 将待处理请求设置为 null。

      4. 将当前请求设置为一个新的图像请求，其图像数据是该条目的图像数据，并且其状态为完全 可用。

      5. 给定 img 元素，准备当前 请求以供呈现。

      6. 将当前 请求的当前像素密度设置为 selected pixel density。

      7. 给定 img 元素， 在DOM 操作任务源上排入一个元素 任务，以执行以下步骤：

        1. 如果设置了重新启动动画，则重新启动 动画。

        2. 将当前 请求的当前 URL设置为 urlString。

        3. 如果未设置可能省略事件，或者 previousURL 不等于 urlString，则在 img 元素上触发一个名为 load 的事件。

      8. 中止更新 图像数据算法。

  8. 排入一个微任务以执行此算法的 其余部分，从而允许调用此算法的任务继续运行。

  9. 如果在此实例之后启动了针对此 img 元素的另一个 此算法实例（即使该实例已经中止且不再运行），则返回。

    只有最后一个实例会生效，以避免在例如依次设置 src、srcset 和 crossorigin 属性时发出多个请求。

  10. 令 selected source 和 selected pixel density 分别为选择图像来源所得的 URL 和像素 密度。

  11. 如果 selected source 为 null：

    1. 将当前请求的状态设置为 损坏，为 当前请求和待处理请求中止图像请求，并将 待处理 请求设置为 null。

    2. 给定 img 元素， 在DOM 操作任务源上排入一个元素 任务，以执行以下步骤：

      1. 将当前 请求的当前 URL更改为空字符串。

      2. 如果以下各项均为 true：

        • 元素具有 src 属性，或者 它使用 srcset 或 picture；并且

        • 未设置可能省略事件，或者 previousURL 不是空 字符串，

        则在 img 元素上触发一个名为 error 的事件。

    3. 返回。

  12. 令 urlString 为以元素的节点 文档为基准，对 selected source 执行编码解析并序列化 URL的结果。

  13. 如果 urlString 为失败：

    1. 为当前 请求和待处理请求中止图像 请求。

    2. 将当前请求的状态设置为 损坏。

    3. 将待处理请求设置为 null。

    4. 给定 img 元素， 在DOM 操作任务 源上排入一个元素 任务，以执行以下步骤：

      1. 将当前 请求的当前 URL更改为 selected source。

      2. 如果未设置可能省略事件，或者 previousURL 不等于 selected source，则在 img 元素上触发一个 名为 error 的事件。

    5. 返回。

  14. 如果待处理请求不为 null，并且 urlString 与 待处理请求的当前 URL相同，则 返回。

  15. 如果 urlString 与当前请求的当前 URL相同，并且当前请求的状态为部分可用：

    1. 为待处理 请求中止图像 请求。

    2. 如果设置了重新启动动画，则给定 img 元素， 在DOM 操作任务源上排入一个元素任务，以重新启动 动画。

    3. 返回。

  16. 为待处理 请求中止图像 请求。

  17. 将 image request 设置为一个新的图像请求，其当前 URL为 urlString。

  18. 如果当前请求的状态为不可用或损坏，则将 当前请求设置为 image request。否则，将待处理 请求设置为 image request。

  19. 令 request 为给定 urlString、"image" 和元素的 crossorigin 内容属性的当前状态时，创建潜在 CORS 请求的结果。

  20. 将 request 的客户端设置为 元素的节点 文档的相关设置对象。

  21. 如果元素使用 srcset 或 picture，则将 request 的发起者设置为 "imageset"。

  22. 将 request 的来源 策略设置为元素的 referrerpolicy 属性的当前状态。

  23. 将 request 的优先级设置为 元素的 fetchpriority 属性的当前状态。

  24. 如果 img 的延迟加载 属性处于立即状态，或者对于 img 脚本已禁用，则令 delay load event 为 true；否则为 false。

  25. 如果给定 img 时，将延迟加载元素步骤返回 true：

    1. 将 img 的延迟加载 恢复步骤设置为此算法从标记为获取图像的步骤开始的其余部分。

    2. 为 img 元素开始 对延迟加载元素进行交叉观察。

    3. 返回。

  26. 获取图像：获取 request。 从此算法 返回，并将其余步骤作为获取操作针对响应 response 的 processResponse 的一部分运行。

    以这种方式获得的资源（如果有）是 image request 的图像数据。它可以是 CORS 同源或 CORS 跨源；这 会影响图像与其他 API 的交互（例如， 在 canvas 上使用时）。

    当 delay load event 为 true 时，获取图像必须延迟加载 事件，即元素的节点文档的加载事件， 直到资源获取完成后由 网络任务 源排入队列的任务（定义如下）运行完毕。

    遗憾的是，这可以用于对用户的 本地网络执行初步的端口扫描（尤其是与脚本结合使用时，尽管实施这种攻击实际上 并不需要脚本）。用户代理可以实施比上述策略更严格的跨源访问控制策略，以缓解 这种 攻击，但遗憾的是，此类策略通常与现有 Web 内容 不兼容。

  27. 尽快跳转至以下列表中第一个适用的条目：

    如果资源类型为 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. 如果未设置 maybe omit events，或者 previousURL 不等于 urlString，则在DOM 操作任务源上，根据 img 元素将元素任务排入队列，以在该 img 元素上触发 事件， 该事件名为 load。

    如果资源类型和数据与受支持的图像格式相对应，如下 所述

    在获取图像期间，由网络任务 源排入队列的下一个任务 必须运行以下步骤：

    1. 如果用户代理能够确定 image request 的图像宽度和 高度，并且 image request 是待处理请求，则将 image request 的状态设置为 部分 可用。

    2. 否则，如果用户代理能够确定 image request 的图像 宽度和高度，并且 image request 是当前请求，则根据 img 元素准备 image request 用于 呈现， 并将 image request 的 状态设置为部分 可用。

    3. 否则，如果用户代理能够确定 image request 的图像 以某种致命方式损坏，以致无法获得图像尺寸，并且 image request 是待处理请求：

      1. 中止 图像请求，即针对当前请求和 待处理请求的图像请求。

      2. 将 待处理请求升级为当前请求。

      3. 将当前 请求的状态 设置 为损坏。

      4. 在 img 元素上触发 事件，该事件名为 error。

    4. 否则，如果用户代理能够确定 image request 的图像 以某种致命方式损坏，以致无法获得图像尺寸，并且 image request 是当前请求：

      1. 中止 图像请求，即针对 image request 的图像请求。

      2. 如果未设置 maybe omit events，或者 previousURL 不等于 urlString，则在 img 元素上触发 事件，该事件名为 error。

    如果 image request 是当前 请求，则该任务以及 在获取图像期间由 网络任务 源排入队列的每个后续任务都必须适当地更新图像的呈现 （例如，如果图像是渐进式 JPEG，则每个数据包都可以提高图像的 分辨率）。

    此外，资源获取完成后由网络任务 源排入队列的最后一个任务 还必须运行以下步骤：

    1. 如果 image request 是待处理请求， 则中止 图像请求，即针对当前请求的图像请求； 将 待处理请求升级为当前请求，并根据 img 元素准备 image request 用于 呈现。

    2. 将 image request 设置为完全 可用状态。

    3. 使用键 key 将图像添加到可用图像列表，并设置忽略更高层缓存标志。

    4. 如果未设置 maybe omit events，或者 previousURL 不等于 urlString，则在 img 元素上触发 事件，该事件名为 load。

    否则

    图像数据不是受支持的文件格式；用户代理必须将 image request 的状态设置为损坏，中止图像 请求，即针对当前 请求和待处理 请求的图像请求；如果 image request 是待处理请求，则将待处理 请求升级为 当前请求；并且 随后，如果未设置 maybe omit events，或者 previousURL 不等于 urlString，则在DOM 操作任务 源上，根据 img 元素将元素任务排入队列，以在该 img 元素上触发 事件，该事件名为 error。

当用户代理为元素 x 运行上述算法时，元素的节点文档必须对元素 x 保持一个 强引用，即使该元素未连接也是如此。

为一个图像请求或为 null 的 image request 中止图像请求，意味着运行以下步骤：

  1. 如果 image request 为 null，则返回。

  2. 忘记 image request 的图像 数据（如果有）。

  3. 中止针对 image request 的任何获取算法实例，并丢弃该算法生成的任何待处理任务。

为一个 img 元素将待处理请求升级为当前 请求，意味着运行以下步骤：

  1. 将 img 元素的当前请求设置为 待处理请求。

  2. 将 img 元素的待处理请求设置为 null。

4.8.4.3.6 准备图像以供 呈现

给定图像元素 img，要为图像请求 req 准备图像以供呈现，其中 req 是一个图像请求：

  1. 令 exifTagMap 为根据相关编解码器的定义，从 req 的图像数据中获得的 EXIF 标签。 [EXIF]

  2. 令 physicalWidth 和 physicalHeight 为根据相关编解码器的定义， 从 req 的图像数据中获得的宽度和高度。

  3. 令 dimX 为 exifTagMap 的标签 0xA002 （PixelXDimension）的值。

  4. 令 dimY 为 exifTagMap 的标签 0xA003 （PixelYDimension）的值。

  5. 令 resX 为 exifTagMap 的标签 0x011A （XResolution）的值。

  6. 令 resY 为 exifTagMap 的标签 0x011B （YResolution）的值。

  7. 令 resUnit 为 exifTagMap 的标签 0x0128 （ResolutionUnit）的值。

  8. 如果以下所有条件均为 true：

    • dimX 是正整数；

    • dimY 是正整数；

    • resX 是正浮点数；

    • resY 是正浮点数；

    • physicalWidth × 72 / resX 等于 dimX；

    • physicalHeight × 72 / resY 等于 dimY；

    • resUnit 为 2（Inch），

    则：

    1. 如果 req 的图像 数据是 CORS 跨源的，则将 img 的自然尺寸设置为 dimX 和 dimY，并相应缩放 img 的像素数据。

    2. 否则，将 req 的首选的 经过密度校正的尺寸设置为一个结构体， 其宽度设置为 dimX，高度设置为 dimY。

  9. 适当地更新 req 的 img 元素的 呈现。

EXIF 中的分辨率等同于每英寸的 CSS 点数，因此 72 是根据分辨率计算尺寸时所使用的基数。

目前尚未规定在图像已经呈现之后 EXIF 才到达时应如何处理。请参阅议题 #4929。

4.8.4.3.7 选择图像来源

给定一个 img 元素 el，要 选择图像来源：

  1. 为 el 更新来源集。

  2. 如果 el 的来源集为空，则返回 null 作为 URL，并返回 undefined 作为像素密度。

  3. 返回从 el 的来源集中选择图像的结果。

给定一个来源集 sourceSet，要 从来源集中选择图像来源：

  1. 如果 sourceSet 中的条目 b 具有与 sourceSet 中更早的条目 a 相同的相关联像素 密度描述符，则移除条目 b。重复此步骤，直到 sourceSet 中没有任何条目具有 与更早条目相同的相关联像素密度描述符。

  2. 以由实现定义的方式，从 sourceSet 中选择一个图像来源。 令 selectedSource 为此选择。

  3. 返回 selectedSource 及其相关联的像素密度。

4.8.4.3.8 从属性创建来源集

当要求在给定字符串 default source、字符串 srcset、字符串 sizes，以及元素或 null img 的情况下 创建来源集时：

  1. 令 source set 为一个空来源集。

  2. 如果 srcset 不是空字符串，则将 source set 设置为解析 srcset 的结果。

  3. 将 source set 的来源尺寸设置为使用 img 解析 sizes 的结果。

  4. 如果 default source 不是空字符串，并且 source set 不包含像素 密度描述符值为 1 的图像来源，且不包含具有宽度 描述符的图像来源，则将 default source 追加到 source set。

  5. 规范化来源密度 source set。

  6. 返回 source set。

4.8.4.3.9 更新来源集

当要求为给定的 img 或 link 元素 el 更新来源集时，用户代理必须执行以下操作：

  1. 将 el 的来源集设置为一个空 来源集。

  2. 令 elements 为 « el »。

  3. 如果 el 是一个 img 元素，且其 父节点是一个 picture 元素，则以 el 父节点的子元素替换 elements 的内容，并保留相对顺序。

  4. 如果 el 是一个 img 元素，则令 img 为 el，否则为 null。

  5. 对于 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 的来源集设置为在给定 default source、srcset、 sizes 和 img 的情况下创建 来源集的结果。

      11. 返回。

        如果 el 是一个 link 元素， 则 elements 仅包含 el，因此会立即到达此步骤，而算法的其余部分不会运行。

    2. 如果 child 不是一个 source 元素， 则 继续。

    3. 如果 child 没有 srcset 属性，则继续处理下一个子节点。

    4. 解析 child 的 srcset 属性，并令 source set 为返回的来源集。

    5. 如果 source set 具有零个图像 来源，则 继续处理下一个子节点。

    6. 如果 child 具有 media 属性， 且其值不匹配环境，则 继续处理下一个子节点。

    7. 使用 img 解析 child 的 sizes 属性，并令 source set 的来源尺寸为返回的值。

    8. 如果 child 具有 type 属性， 且其值是未知或不受支持的MIME 类型，则继续处理下一个子节点。

    9. 如果 child 具有 width 或 height 属性， 则将 el 的尺寸属性来源设置为 child。否则，将 el 的尺寸属性来源设置为 el。

    10. 规范化来源密度 source set。

    11. 将 el 的来源集设置为 source set。

    12. 返回。

每个 img 元素都会独立考虑其之前的兄弟 source 元素 以及该 img 元素本身，以选择一个图像 来源，并忽略任何其他（无效的）元素，包括同一 picture 元素中的其他 img 元素，或者作为相关 img 元素后续兄弟节点的 source 元素。

4.8.4.3.10 解析 srcset 属性

当要求从元素中解析 srcset 属性时，按如下方式解析 元素的srcset 属性的值：

  1. 令 input 为传递给此算法的值。

  2. 令 position 为指向 input 内部的指针， 最初指向字符串的开头。

  3. 令 candidates 为一个最初为空的来源集。

  4. 分割循环：给定 position，从 input 中收集由ASCII 空白或 U+002C COMMA 字符组成的代码点序列。如果收集到了任何 U+002C COMMA 字符，则这是一个解析错误。

  5. 如果 position 已超过 input 的末尾， 则返回 candidates。

  6. 给定 position，从 input 中收集不是ASCII 空白的代码点序列， 并令 url 为结果。

  7. 令 descriptors 为一个新的空列表。

  8. 如果 url 以 U+002C (,) 结尾：

    1. 从 url 中移除所有尾随的 U+002C COMMA 字符。 如果这移除了不止一个字符， 则这是一个解析错误。

    否则：

    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 COMMA (,)

      将 position 前进到 input 中的下一个字符。 如果 current descriptor 不为空， 则将 current descriptor 追加到 descriptors。 跳转到标记为描述符解析器的步骤。

      U+0028 LEFT PARENTHESIS (()

      将 c 追加到 current descriptor。 将 state 设置为括号中。

      EOF

      如果 current descriptor 不为空， 则将 current descriptor 追加到 descriptors。 跳转到标记为描述符解析器的步骤。

      其他任何情况

      将 c 追加到 current descriptor。

      括号中

      根据 c 的值执行以下操作：

      U+0029 RIGHT PARENTHESIS ())

      将 c 追加到 current descriptor。 将 state 设置为描述符中。

      EOF

      将 current descriptor 追加到 descriptors。 跳转到标记为描述符解析器的步骤。

      其他任何情况

      将 c 追加到 current descriptor。

      描述符之后

      根据 c 的值执行以下操作：

      ASCII 空白

      保持在此状态。

      EOF

      跳转到标记为描述符解析器的步骤。

      其他任何情况

      将 state 设置为描述符中。 将 position 设置为 input 中的前一个字符。

      将 position 前进到 input 中的下一个字符。重复此 步骤。

      为了与未来的扩展兼容， 此算法支持多个描述符和带括号的描述符。

  9. 描述符解析器：令 error 为否。

  10. 令 width 为缺失。

  11. 令 density 为缺失。

  12. 令 future-compat-h 为缺失。

  13. 对于 descriptors 中的每个描述符， 从以下列表中运行适当的步骤集：

    如果描述符由一个有效非负整数 后跟一个 U+0077 LATIN SMALL LETTER W 字符组成

    1. 如果用户代理不支持 sizes 属性， 则令 error 为是。

      符合要求的用户代理将支持 sizes 属性。 然而，在实践中，用户代理通常以渐进方式实现并发布功能。

    2. 如果 width 和 density 并非均为缺失， 则令 error 为是。

    3. 对描述符应用解析 非负整数的规则。如果结果为 0，则令 error 为是。 否则，令 width 为结果。

    如果描述符由一个有效浮点数 后跟一个 U+0078 LATIN SMALL LETTER X 字符组成

    1. 如果 width、density 和 future-compat-h 并非均为缺失， 则令 error 为是。

    2. 对描述符应用解析 浮点数值的规则。 如果结果小于 0，则令 error 为是。否则，令 density 为结果。

      如果 density 为 0，则自然尺寸将为 无穷大。用户代理应当 对图像可渲染的最大尺寸设置限制。

    如果描述符由一个有效非负整数 后跟一个 U+0068 LATIN SMALL LETTER H 字符组成

    这是一个解析错误。

    1. 如果 future-compat-h 和 density 并非均为缺失， 则令 error 为是。

    2. 对描述符应用解析 非负整数的规则。如果结果为 0，则令 error 为是。否则，令 future-compat-h 为结果。

    其他任何情况

    令 error 为是。

  14. 如果 future-compat-h 不是缺失，且 width 是缺失， 则令 error 为是。

  15. 如果 error 仍为否， 则向 candidates 追加一个新的图像来源， 其 URL 为 url， 如果 width 不是缺失，则关联宽度 width， 如果 density 不是缺失，则关联像素密度 density。 否则，存在一个解析错误。

  16. 返回标记为分割循环的步骤。

4.8.4.3.11 解析 sizes 属性

当要求从元素 element 中解析 sizes 属性时，并给定一个 img 元素或 null img：

  1. 令 unparsed sizes list 为从 element 的sizes 属性的值（如果该属性缺失，则为空字符串）中解析以逗号分隔的 组件值列表的结果。[CSSSYNTAX]

  2. 令 size 为 null。

  3. 对于 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。否则，继续。

  4. 返回 100vw。

在<source-size-list> 中，将一个裸露的、 属于<length> 的<source-size-value> （不带相应的<media-condition>） 用作非最后一个条目是无效的。 不过，解析算法允许它出现在<source-size-list> 中的任何位置， 并且如果列表中的前置条目均未被使用，则会立即接受它作为尺寸。 这是为了支持未来的扩展， 并防止简单的作者错误，例如末尾多余的逗号。 允许裸露的 auto 关键字 后面还有其他条目，以便为旧版用户代理提供回退。

4.8.4.3.12 规范化来源密度

一个图像来源的 URL 可以伴随一个像素密度 描述符、一个宽度 描述符，或者完全不带描述符。规范化一个来源 集会为每个图像来源提供一个像素密度 描述符。

当要求对源集 source set 的源 密度进行规范化时，用户代理必须执行 以下操作：

  1. 令 source size 为 source set 的来源尺寸。

  2. 对于 source set 中的每个图像来源：

    1. 如果该图像来源具有 一个像素密度描述符，则继续处理下一个 图像来源。

    2. 否则，如果该图像 来源具有宽度描述符，则用一个像素密度描述符替换该宽度 描述符，其值为宽度 描述符值除以 source size，单位为 x。

      如果来源 尺寸为 0，则密度将为无穷大， 从而导致自然尺寸为 0×0。

    3. 否则，为该图像 来源提供一个值为 1x 的像素密度描述符。

4.8.4.3.13 响应环境变化

用户代理可以随时运行以下算法，以更新 img 元素的图像，从而响应环境 变化。（用户代理不需要在任何时候运行此算法；例如， 如果用户不再查看该页面，用户代理可能希望等到用户返回页面后再确定要使用哪幅图像， 以防环境在此期间再次发生变化。）

特别鼓励用户代理在用户更改视口尺寸时（例如调整窗口大小或更改页面缩放），以及当 img 元素被插入 文档时运行此算法，以使经过密度校正的自然 宽度和高度与新的视口匹配，并在涉及艺术指导时选择正确的图像。

  1. 等待稳定状态。同步区段 由此算法的所有剩余步骤组成，直到算法说明同步 区段结束为止。（同步区段中的步骤以 ⌛ 标记。）

  2. ⌛ 如果 img 元素 不使用 srcset 或 picture，其节点文档 不是完全活动的，它具有资源类型为 multipart/x-mixed-replace 的图像数据， 或者其待处理 请求不为 null，则返回。

  3. ⌛ 令 selected source 和 selected pixel density 分别为选择图像来源所得的 URL 和像素密度。

  4. ⌛ 如果 selected source 为 null，则返回。

  5. ⌛ 如果 selected source 和 selected pixel density 与元素的最后选择的来源和当前 像素密度相同，则返回。

  6. ⌛ 令 urlString 为以元素的节点 文档为基准，对 selected source 执行编码解析并序列化 URL的结果。

  7. ⌛ 如果 urlString 为失败，则返回。

  8. ⌛ 令 corsAttributeState 为元素的 crossorigin 内容属性的状态。

  9. ⌛ 令 origin 为 img 元素的 节点 文档的源。

  10. ⌛ 令 client 为 img 元素的 节点 文档的相关设置对象。

  11. ⌛ 令 key 为一个元组，该元组由 urlString、 corsAttributeState，以及当 corsAttributeState 不是无 CORS时的 origin 组成。

  12. ⌛ 令 image request 为一个新的图像请求， 其当前 URL为 urlString。

  13. ⌛ 将元素的待处理 请求设置为 image request。

  14. 结束同步 区段，并并行继续剩余步骤。

  15. 如果可用 图像列表包含 key 的条目， 则将 image request 的图像数据设置为该条目的图像数据。 继续执行下一步骤。

    否则：

    1. 令 request 为在给定 urlString、"image" 和 corsAttributeState 时创建潜在 CORS 请求的结果。

    2. 将 request 的客户端设置为 client，将 request 的发起者设置为 "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 上使用时）。

  16. 给定 img 元素，在DOM 操作任务源上排入一个元素 任务，以执行以下步骤：

    1. 如果自此算法开始以来，img 元素 经历了相关突变， 则将待处理请求设置为 null，并中止这些 步骤。

    2. 将 img 元素的最后 选择的来源设置为 selected source，并将 img 元素的当前像素密度设置为 selected pixel density。

    3. 将 image request 的状态设置为完全可用。

    4. 使用键 key 将图像添加到可用图像列表， 并设置忽略高层缓存标志。

    5. 将待处理 请求升级为当前请求。

    6. 给定 img 元素，准备 image request 以供 呈现。

    7. 在 img 元素上触发一个 事件，其名称为 load。

4.8.4.4 提供用作图像替代内容的文本的要求
4.8.4.4.1 一般准则

除非另有规定，否则必须指定 alt 属性， 且其值不得为空；该值必须是图像的适当替代内容。alt 属性的具体要求取决于 图像所要表示的内容，如以下各节所述。

编写替代文本时需要考虑的最通用规则如下：其意图是，将每幅图像替换为其 alt 属性的文本后，不会改变页面的含义。

因此，一般而言，可以通过考虑在无法包含图像时原本会写些什么来编写替代文本。

由此可以推论，alt 属性的值绝不应包含可被视为图像说明文字、标题或 图例的文本。它应包含供用户代替图像使用的替代文本； 它并非用于补充图像。title 属性可用于补充信息。

另一个推论是，alt 属性的值不应重复图像旁边的正文中已经提供的信息。

理解替代文本的一种方式是，设想如何通过电话向某人朗读包含该图像的页面， 同时不提及页面中存在图像。你用来代替图像所说的内容，通常是编写替代文本的良好起点。

当创建超链接的 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 元素提供图像，但仍然必须提供较为简略的文本版本，以便无法查看图像的用户 （例如连接速度非常慢、使用纯文本浏览器、通过免提车载语音 Web 浏览器收听页面， 或仅仅因为失明）仍然能够理解所传达的信息。

该文本必须在 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 属性，或者用于包含此图像的 figure 中的 figcaption 元素）。

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 属性不得包含诸如 "logo" 一词之类的文本，因为要传达的不是它是徽标这一事实， 而是实体本身。

如果徽标位于其所代表实体的名称旁边，则该徽标属于补充内容，其 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!

如果字符能够达到相同目的，则不应使用图像。只有当文本无法直接使用字符表示时， 例如由于装饰效果或没有适当的字符（如外字），才适合使用图像。

如果作者因为其默认系统字体不支持某个给定字符而想使用图像， 那么 Web 字体是比图像更好的解决方案。

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>

该人物是 "sad" 还是 "happy" 会影响对段落其余部分的理解：她是在表示 对国家分裂感到不满，还是在表示国家分裂的前景有利于她的政治生涯？ 解释会因图像而异。

如果图像有说明文字，那么包含替代文本可以避免非视觉用户困惑于该说明文字所指的对象。

<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>

当一幅图片被切分为多个较小的图像文件，然后将它们一起显示以重新形成完整图片时， 其中一幅图像的 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>

通常，应使用图像 映射，而不是为了链接而切分图像。

但是，如果确实切分了图像，并且切分后图片的任何组成部分是链接的 唯一内容，则每个链接中的一幅图像必须在其 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%">

请注意，"sales graph" 对销售曲线图而言是不充分的替代文本。适合作为 说明文字的文本通常不适合作为替代文本。

无法完整描述的图像

在某些情况下，图像的性质可能使得提供全面的替代 文本并不切实际。例如，图像可能模糊不清，可能是复杂的分形， 也可能是详细的地形图。

在这些情况下，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>

在这种情况下，没有必要（实际上也不鼓励）在替代文本中提及 图像本身的存在，因为这种文本会与浏览器本身报告图像存在的内容重复。 例如，如果替代文本是 "A photo of Isaac Asimov"，则符合要求的用户代理可能会将其 朗读为 "(Image) A photo of Isaac Asimov"，而不是更有用的 "(Image) Isaac Asimov had dark hair, a tall forehead, and wore glasses..."。

内容未知的图像

在某些不幸的情况下，可能完全没有可用的替代文本，原因可能是 图像通过某种自动化方式获得，并且没有任何相关的替代文本 （例如网络摄像头）；或者页面由脚本使用用户提供的图像生成， 而用户没有提供合适或可用的替代文本（例如照片分享 网站）；或者作者本人不知道图像表示什么（例如盲人 摄影师在博客上分享图像）。

在这种情况下，可以省略 alt 属性，但还必须满足以下条件之一：

此类情况必须保持在绝对最低限度。如果作者哪怕只有极小的 可能性能够提供真正的替代文本，那么省略 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 属性中仍然包含了尽可能多的有用信息。

由于某些用户完全无法使用图像（例如，因为连接速度非常慢， 或使用纯文本浏览器，或通过免提车载语音 Web 浏览器收听 页面内容，或者仅仅因为失明），因此只有在没有替代文本可用且无法 提供任何替代文本时，才允许省略 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 属性， 并假定该图像是内容的关键部分。

标记生成器可以在无法获得替代文本、 因而省略了 alt 属性的 img 元素上指定 generator-unable-to-provide-required-alt 属性。该属性的值必须为空字符串。包含此类属性的文档不 符合要求，但一致性检查器将静默 忽略此错误。

这样做是为了避免标记生成器受到压力，将 省略 alt 属性的错误替换为更加 严重的提供虚假替代文本的错误，因为最先进的自动化 一致性检查器无法区分虚假替代文本和正确的替代文本。

标记生成器通常应避免使用图像自身的文件名作为替代 文本。同样，标记生成器应避免从任何同样可供呈现用户代理 （例如 Web 浏览器）使用的内容中生成替代文本。

这是因为页面生成后通常不会更新， 而以后读取该页面的浏览器可以由用户更新，因此浏览器 很可能具有比标记生成器生成页面时更为最新且经过精细调整的启发式规则。

4.8.4.4.15 面向一致性检查器的指南

除非满足下列条件之一，否则一致性检查器必须将缺少 alt 属性报告为错误：

4.8.5 iframe 元素

Element/iframe

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera15+Edge79+
Edge（旧版）12+Internet Explorer是
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+

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+

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+
类别：
流式内容。
短语内容。
嵌入式内容。
交互式内容。
可感知内容。
可以使用此 元素的上下文：
预期嵌入式 内容之处。
内容 模型：
无。
text/html 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
src — 资源的 地址
srcdoc — 要在 iframe 中渲染的文档
name — 内容可导航对象的名称
sandbox — 嵌套内容的安全 规则
allow — 应用于 iframe 内容的权限 策略
allowfullscreen — 是否允许 iframe 的内容使用 requestFullscreen()
width — 水平尺寸
height — 垂直尺寸
referrerpolicy — 由元素发起的获取所使用的来源策略
loading — 用于 确定是否推迟加载
无障碍考虑：
面向作者。
面向实现者。
清理：
不安全。
DOM 接口：
[Exposed=Window]
interface HTMLIFrameElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, ReflectURL] attribute USVString src;
  [CEReactions] attribute (TrustedHTML or DOMString) srcdoc;
  [CEReactions, Reflect] attribute DOMString name;
  [SameObject, PutForwards=value, Reflect] readonly attribute DOMTokenList sandbox;
  [CEReactions, Reflect] attribute DOMString allow;
  [CEReactions, Reflect] attribute boolean allowFullscreen;
  [CEReactions, Reflect] attribute DOMString width;
  [CEReactions, Reflect] 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。如果在 iframe 元素上指定了 itemprop 属性，则还必须指定 src 属性。

Element/iframe#attr-srcdoc

所有当前引擎均支持。

Firefox25+Safari6+Chrome20+
Opera?Edge79+
Edge（旧版）?Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android?

srcdoc 属性给出元素的内容可导航对象所要包含的页面内容。 该属性的值用于构造一个 iframe srcdoc 文档，它是一个 Document，其 URL 匹配 about:srcdoc。

如果存在，srcdoc 属性必须具有 使用HTML 语法的值，该值由以下 语法组成部分按照给定顺序组成：

  1. 任意数量的注释和ASCII 空白。
  2. 可选的 DOCTYPE。
  3. 任意数量的注释和ASCII 空白。
  4. 文档元素，采用 html 元素的形式。
  5. 任意数量的注释和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 属性时保留与号， 第二次是为了防止在解析沙盒化内容时 错误解释该与号。

此外，请注意，由于在iframe srcdoc 文档中，DOCTYPE 是可选的，并且 html、 head 和 body 元素具有可选的 开始标签和结束标签，而且 title 元素在iframe srcdoc 文档中也是可选的，所以即使 srcdoc 属性中的标记 表示整个文档，也可以相对简洁，因为语法中只需逐字出现 body 元素的内容。 其他元素仍然存在，但仅通过隐含方式存在。

在HTML 语法中，作者只需记住 使用 U+0022 QUOTATION MARK 字符 (") 包围属性内容，然后转义所有 U+0026 AMPERSAND (&) 和 U+0022 QUOTATION MARK (") 字符，并指定 sandbox 属性， 即可确保安全地嵌入内容。（并且 请记住先转义与号，再转义引号，以确保引号变为 &quot; 而不是 &amp;quot;。）

在 XML 中，U+003C LESS-THAN SIGN 字符 (<) 也需要转义。为了 防止属性值 规范化，XML 的某些空白字符——具体而言是 U+0009 CHARACTER TABULATION（制表符）、U+000A LINE FEED（LF）和 U+000D CARRIAGE RETURN（CR）——也需要 转义。[XML]

如果同时指定了 src 属性和 srcdoc 属性，则 srcdoc 属性优先。 这允许作者为不支持 srcdoc 属性的旧版用户代理 提供回退 URL。

给定 insertedNode，iframe 的HTML 元素连接后步骤如下：

  1. 如果 insertedNode 具有 sandbox 属性，则给定该属性的值和 insertedNode 的 iframe 沙盒标志集，解析沙盒 指令。

  2. 为 insertedNode 创建新的 子可导航对象。

  3. 为 insertedNode 处理 iframe 属性，并将 initialInsertion 设置为 true。

给定 removedNode，iframe 的HTML 元素移除 步骤是给定 removedNode 销毁子可导航对象。

此过程不会触发任何 unload 事件 （元素的内容 文档被销毁，而不是被卸载）。

虽然根据上述规定，iframe 会在 影子树中进行处理， 但其行为的其他若干方面与影子树之间的关系尚未得到明确定义。有关更多 详细信息，请参阅议题 #763。

只要具有非 null 内容 可导航对象的 iframe 元素的 srcdoc 属性被设置、 更改或移除，用户 代理就必须处理 iframe 属性。

类似地，只要具有非 null 内容 可导航对象、但未指定 srcdoc 属性的 iframe 元素的 src 属性被设置、 更改或移除，用户 代理就必须处理 iframe 属性。

要为元素 element 处理 iframe 属性， 并带有可选的布尔值 initialInsertion（默认为 false）：

  1. 如果指定了 element 的 srcdoc 属性：

    1. 将 element 的当前导航已延迟加载 布尔值设置为 false。

    2. 如果给定 element 的将 延迟加载元素步骤返回 true：

      1. 将 element 的延迟加载恢复步骤设置为此 算法从标记为导航到 srcdoc 资源的步骤开始的其余部分。

      2. 将 element 的当前导航已延迟加载 布尔值设置为 true。

      3. 为 element 开始 对延迟加载元素进行交叉观察。

      4. 返回。

    3. 导航到 srcdoc 资源：给定 element、about:srcdoc、空 字符串和 element 的 srcdoc 属性值，导航 iframe 或 frame。

      生成的 Document 必须被视为一个 iframe srcdoc 文档。

  2. 否则：

    1. 令 url 为给定 element 和 initialInsertion，运行iframe 和 frame 元素的共享属性 处理步骤所得的结果。

    2. 如果 url 为 null，则返回。

    3. 如果 url 匹配 about:blank，且 initialInsertion 为 true：

      1. 给定 element，运行iframe load 事件步骤。

      2. 返回。

    4. 令 referrerPolicy 为 element 的 referrerpolicy 内容属性的当前状态。

    5. 将 element 的当前导航已延迟加载 布尔值设置为 false。

    6. 如果给定 element 的将延迟加载元素步骤返回 true：

      1. 将 element 的延迟加载恢复步骤设置为此 算法从标记为导航的步骤开始的其余部分。

      2. 将 element 的当前导航已延迟加载 布尔值设置为 true。

      3. 为 element 开始 对延迟加载元素进行交叉观察。

      4. 返回。

    7. 导航：给定 element、url 和 referrerPolicy，导航 iframe 或 frame。

给定元素 element 和布尔值 initialInsertion，iframe 和 frame 元素的共享属性处理步骤如下：

  1. 令 url 为 URL 记录 about:blank。

  2. 如果 element 指定了 src 属性， 且其值不是空字符串：

    1. 令 maybeURL 为给定该属性的值，并以 element 的节点 文档为基准，执行编码解析 URL所得的结果。

    2. 如果 maybeURL 不是失败，则将 url 设置为 maybeURL。

  3. 如果 element 的节点 可导航对象的包含自身的祖先可导航对象中，包含一个 可导航对象，其活动 文档的URL在将排除片段设置为 true 时 等于 url， 则返回 null。

  4. 如果 url 匹配 about:blank，且 initialInsertion 为 true，则给定 element 的内容 可导航对象的活动 文档和 url，执行URL 和历史记录更新步骤。

    这是必要的，因为 url 可能是类似 about:blank?foo 的内容。如果 url 只是普通的 about:blank，则此操作不会产生任何效果。

  5. 返回 url。

给定元素 element、URL url、来源策略 referrerPolicy、可选的字符串或 null srcdocString（默认为 null），以及可选的布尔值 initialInsertion（默认为 false），要 导航 iframe 或 frame：

  1. 令 historyHandling 为 "auto"。

  2. 如果 element 的内容 可导航对象的活动文档尚未完全加载，则将 historyHandling 设置为 "replace"。

  3. 如果 element 是一个 iframe：

    1. 将 element 的待处理资源计时开始时间 设置为给定 element 的 节点文档的相关全局对象时的当前高分辨率时间。

    2. 将 element 的待处理资源计时 URL设置为 url。

  4. 使用 element 的节点文档，将 element 的内容 可导航对象导航到 url，并将 historyHandling 设置为 historyHandling，将referrerPolicy 设置为 referrerPolicy，将documentResource 设置为 srcdocString，并将initialInsertion 设置为 initialInsertion。

每个 Document 都有一个iframe load 正在进行标志和一个抑制 iframe load标志。当创建 Document 时，必须为该 Document 取消设置这些标志。

给定 iframe 元素 element，要运行iframe load 事件步骤：

  1. 断言：element 的内容可导航对象不是 null。

  2. 令 childDocument 为 element 的内容可导航对象的 活动文档。

  3. 如果设置了 childDocument 的抑制 iframe load标志，则 返回。

  4. 如果 element 的待处理资源计时开始时间 不是 null：

    1. 断言：element 的待处理资源计时 URL不是 null。

    2. 令 global 为 element 的节点 文档的 相关全局 对象。

    3. 令 fallbackTimingInfo 为一个新的获取计时信息，其开始时间是 element 的待处理资源计时开始 时间，其响应 结束时间是给定 global 时的 当前高分辨率时间。

    4. 给定 fallbackTimingInfo、解析 element 的待处理资源计时 URL所得的结果、 "iframe"、 global、空字符串、一个新的响应主体信息和 0，标记资源计时。

    5. 将 element 的待处理资源计时开始 时间 设置为 null。

    6. 将 element 的待处理资源计时 URL 设置为 null。

  5. 设置 childDocument 的iframe load 正在进行标志。

  6. 在 element 上触发一个名为 load 的事件。

  7. 取消设置 childDocument 的iframe load 正在进行标志。

结合脚本使用时，这可以用于探测 本地网络 HTTP 服务器的 URL 空间。用户代理可以实施比上述策略更严格的跨源 访问控制策略来缓解此攻击，但遗憾的是，此类策略通常与现有 Web 内容不兼容。

如果某种元素类型可能延迟加载事件，则对于该类型的每个元素 element，如果 element 的内容 可导航对象非空，并且以下任一条件为 true，则用户代理必须延迟加载事件，即 element 的节点文档的加载事件：

如果在处理 load 事件期间， element 的内容 可导航对象再次被导航，则会进一步 延迟 load 事件。

每个 iframe 元素 都有一个相关联的当前导航已延迟 加载布尔值，初始为 false。该值在处理 iframe 属性算法中设置和取消设置。

其当前导航已延迟加载布尔值为 false 的 iframe 元素 可能延迟 load 事件。

每个 iframe 元素 都有一个相关联的 null 或 DOMHighResTimeStamp 待处理资源计时开始时间， 初始设置为 null。

每个 iframe 元素 都有一个相关联的 null 或 URL 待处理资源计时 URL，初始设置为 null。

如果在创建元素时未设置 srcdoc 属性， 并且 src 属性 也未设置，或者已设置但其值无法被解析，则元素的内容 可导航对象将停留在初始 about:blank Document。

如果用户从此页面导航离开， iframe 的内容可导航对象的活动 WindowProxy 对象会为新的 Document 对象代理新的 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 不区分大小写。允许的值如下：

设置该属性后，内容将被视为来自唯一的不透明源，表单、脚本和各种可能 令人烦恼的 API 会被禁用，链接也无法以其他可导航对象为目标。allow-same-origin 关键字使内容 被视为来自其真实源，而不是强制将其置于不透明源中；allow-top-navigation 关键字允许内容 导航其可遍历可导航对象； allow-top-navigation-by-user-activation 关键字的行为类似，但仅当浏览上下文的活动窗口具有瞬态 激活时，才允许此类导航；allow-top-navigation-to-custom-protocols 会重新允许将面向非获取方案的导航移交给外部 软件；而 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 或 allow-popups， 则不得指定 allow-top-navigation-to-custom-protocols 关键字，因为这样做是 多余的。

要在沙盒化内容中允许 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 属性的保护。

当具有非 null 内容可导航对象的 iframe 元素的 sandbox 属性被设置或更改时，用户 代理必须给定该属性的值和 iframe 元素的iframe 沙盒标志集，解析 沙盒指令。

当具有非 null 内容可导航对象的 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 设置了所有沙盒标志。脚本被禁用，因为 A 中的 iframe 禁用了 脚本，并且这会覆盖 B 中 iframe 上设置的 allow-scripts 关键字。表单也被禁用，因为内部的 iframe（位于 B 中） 没有设置 allow-forms 关键字。

现在假设 A 中的脚本移除了 A 和 B 中的所有 sandbox 属性。 这不会立即改变任何内容。如果用户单击 C 中的链接，将页面 D 加载到 B 中的 iframe 中，则页面 D 现在的行为就像 B 中的 iframe 设置了 allow-same-origin 和 allow-forms 关键字一样，因为这就是页面 B 加载时，A 中 iframe 的内容可导航对象的状态。

一般而言，不建议动态移除或更改 sandbox 属性， 因为这会使判断允许什么以及不允许什么变得非常 困难。

指定 allow 属性时，该属性确定在初始化 iframe 的内容可导航对象中的 Document 的权限策略时使用的容器 策略。 其值必须是一个序列化的权限 策略。[PERMISSIONSPOLICY]

在此示例中，使用 iframe 嵌入来自在线导航 服务的地图。使用 allow 属性在嵌套上下文中启用 Geolocation API。

<iframe src="https://maps.example.com/" allow="geolocation"></iframe>

allowfullscreen 属性是一个布尔 属性。指定时，它表示 iframe 元素的内容可导航对象中的 Document 对象将使用一个允许从任何源使用 "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，运行以下 步骤：

  1. 如果 document 的浏览 上下文为 null，则返回 false。

  2. 如果 document 不是完全活动的， 则返回 false。

  3. 如果对 feature、document 和 document 的源运行文档中是否为源启用了 功能所得的结果是 "Enabled"，则返回 true。

  4. 返回 false。

由于 allow 和 allowfullscreen 属性只影响内容 可导航对象的活动文档的权限策略，因此这些属性仅在 iframe 的内容可导航对象被导航时生效。添加或移除这些属性对 已加载的文档没有任何影响。

对于嵌入内容具有特定尺寸的情况（例如广告单元具有明确定义的尺寸）， iframe 元素 支持尺寸属性。

iframe 元素 永远没有回退内容，因为无论指定的初始 内容是否成功使用，它始终都会创建新的子 可导航对象。

referrerpolicy 属性是一个 来源策略 属性。其目的是设置在处理 iframe 属性时使用的来源 策略，并允许在内部祖先源对象列表 创建步骤中屏蔽某些源。[REFERRERPOLICY]

loading 属性是一个延迟 加载属性。其目的是指示加载位于视口之外的 iframe 元素时所使用的策略。

当 loading 属性的状态更改为 立即状态时，用户 代理必须运行以下 步骤：

  1. 令 resumptionSteps 为 iframe 元素的延迟加载 恢复步骤。

  2. 如果 resumptionSteps 为 null，则返回。

  3. 将 iframe 的 延迟加载 恢复步骤设置为 null。

  4. 调用 resumptionSteps。

iframe 元素的后代不表示任何内容。（在不 支持 iframe 元素的旧版用户代理中，其内容会被解析为可作为 回退内容的标记。）

HTML 解析器会将 iframe 元素内部的标记视为 文本。

HTMLIFrameElement/srcdoc

所有当前引擎均支持。

Firefox25+Safari6+Chrome20+
Opera?Edge79+
Edge（旧版）?Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

srcdoc 的获取器步骤如下：

  1. 令 attribute 为给定 null、srcdoc 的本地 名称和this，执行按命名空间和本地 名称获取属性所得的结果。

  2. 如果 attribute 为 null，则返回空字符串。

  3. 返回 attribute 的值。

srcdoc 的设置器步骤 如下：

  1. 令 compliantString 为使用 TrustedHTML、 this 的相关全局 对象、给定值、"HTMLIFrameElement srcdoc" 和 "script" 调用获取符合可信类型要求的 字符串算法所得的结果。

  2. 给定 this、srcdoc 的本地 名称和 compliantString，设置属性值。

sandbox 的 DOMTokenList 的受支持令牌， 是 sandbox 属性中定义并且 用户代理支持的允许值。

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 的获取器步骤是返回 this 的内容 文档。

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 的获取器步骤是返回 this 的内容窗口。

以下是页面使用 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 Explorer是
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 — 垂直尺寸
任何其他不具有命名空间的属性（参见正文）。
无障碍考虑：
面向作者。
面向实现者。
清理：
不安全。
DOM 接口：
[Exposed=Window]
interface HTMLEmbedElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, ReflectURL] attribute USVString src;
  [CEReactions, Reflect] attribute DOMString type;
  [CEReactions, Reflect] attribute DOMString width;
  [CEReactions, Reflect] attribute DOMString height;
  Document? getSVGDocument();

  // also has obsolete members
};

embed 元素为 外部应用程序或交互式内容提供集成点。

src 属性 给出被嵌入资源的 URL。如果存在，该属性必须包含 一个可能被空格包围的有效非空 URL。

如果在 embed 元素上指定了 itemprop 属性，则还必须指定 src 属性。

如果存在，type 属性 给出用于选择要实例化的插件的 MIME 类型。该值必须是一个有效 MIME 类型 字符串。如果 type 属性和 src 属性都存在，则 type 属性必须指定 与由 src 属性给出的资源的显式 Content-Type 元数据相同的类型。

当出现以下任一条件时，必须移除为 该元素实例化的任何插件，并且 embed 元素不表示 任何内容：

当同时满足以下所有条件时，称 embed 元素 可能 处于活动状态：

只要一个原先并非可能 处于活动状态的 embed 元素变为可能 处于活动状态，或者只要一个保持可能处于活动状态的可能处于活动状态的 embed 元素的 src 属性被设置、 更改或移除，或者其 type 属性被设置、更改或 移除，用户代理就必须给定该元素，在 embed 任务源上排入一个元素任务， 以为该元素运行embed 元素设置步骤。

给定 embed 元素 element，embed 元素设置步骤如下：

  1. 如果此后已经排入另一个任务，以为 element 运行embed 元素设置步骤，则返回。

  2. 如果 element 设置了 src 属性：

    1. 令 url 为给定 element 的 src 属性值，并以 element 的节点 文档为基准，执行编码解析 URL所得的结果。

    2. 如果 url 为失败，则返回。

    3. 令 request 为一个新的请求，其 URL 为 url，客户端为 element 的节点 文档的相关设置对象，目标为 "embed"， 凭据模式为 "include"，模式为 "navigate"，发起者 类型为 "embed"，并设置其使用 URL 凭据标志。

    4. 获取 request，并将processResponse 设置为给定响应 response 时执行以下步骤：

      1. 如果此后已经排入另一个任务，以为 element 运行embed 元素设置步骤，则返回。

      2. 如果 response 是网络 错误，则在 element 上触发一个名为 load 的事件，然后返回。

      3. 令 type 为给定 element 和 response，确定内容类型所得的结果。

      4. 根据 type 切换：

        null

        1. 为 element 显示无插件。

        否则

        1. 如果 element 的内容可导航对象为 null，则 为 element 创建新的子可导航对象。

        2. 使用 element 的节点 文档，将 element 的内容 可导航对象导航到 response 的URL，并将response 设置为 response，将historyHandling 设置为 "replace"。

          如果内容可导航对象进一步导航到 其他位置，element 的 src 属性 不会更新。

        3. element 现在表示其内容 可导航对象。

      获取资源必须延迟加载事件，即 element 的 节点文档的加载事件。

  3. 否则，为 element 显示无插件。

给定 embed 元素 element 和响应 response，要确定内容的类型，运行以下步骤：

  1. 如果 element 具有 type 属性， 且该属性的值是插件支持的类型，则返回 type 属性的值。

  2. 如果 response 的 url 的路径组成部分匹配插件支持的模式， 则返回该插件能够处理的类型。

    例如，某个插件可能声明它可以处理路径组成部分以四字符字符串 ".swf" 结尾的 URL。

  3. 如果 response 具有显式 Content-Type 元数据，且该值是插件支持的类型，则返回该 值。

  4. 返回 null。

上述算法有意允许 response 具有非正常状态。这允许服务器即使通过错误 响应也为插件返回数据（例如，HTTP 500 Internal Server Error 代码仍然可以包含插件数据）。

要为 embed 元素 element 显示无插件：

  1. 给定 element，销毁子 可导航对象。

  2. 显示未能为 element 找到插件的提示，作为 element 的内容。

  3. element 现在不表示任何内容。

embed 元素没有回退内容；其 后代会被忽略。

只要一个原先可能 处于活动状态的 embed 元素不再可能 处于活动状态，就必须卸载曾为该元素实例化的任何 插件。

embed 元素可能 延迟 load 事件。

embed 元素 支持尺寸属性。

4.8.7 object 元素

Element/object

所有当前引擎均支持。

Firefox1+Safari3+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
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+

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+
类别：
流式内容。
短语内容。
嵌入内容。
已列出的表单关联元素。
可感知内容。
可以使用此 元素的上下文：
预期嵌入 内容之处。
内容 模型：
透明。
text/html 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
data — 资源的 地址
type — 嵌入 资源的类型
name — 内容可导航对象的名称
form — 将该元素 与 form 元素关联
width — 水平尺寸
height — 垂直尺寸
无障碍考虑：
面向作者。
面向实现者。
清理：
不安全。
DOM 接口：
[Exposed=Window]
interface HTMLObjectElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, ReflectURL] attribute USVString data;
  [CEReactions, Reflect] attribute DOMString type;
  [CEReactions, Reflect] attribute DOMString name;
  readonly attribute HTMLFormElement? form;
  [CEReactions, Reflect] attribute DOMString width;
  [CEReactions, Reflect] 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 属性必须是一个有效的可导航对象目标名称。如果适用，并且在元素的内容可导航对象被创建时该值存在，则给定值用于命名元素的内容 可导航对象。

只要出现以下任一条件：

……用户代理必须根据 object 元素，在DOM 操作任务 源上将元素 任务排入队列，以运行以下步骤，从而（重新）确定 object 元素表示什么。此任务 被排入队列或正在主动运行时，必须延迟加载 事件，即元素的节点文档的加载事件。

  1. 如果用户已表示更希望显示此 object 元素的回退 内容，而不是采用该元素的通常行为，则跳转到下方标记为 回退的步骤。

    例如，用户可能会要求显示该元素的回退内容， 因为该内容使用了用户认为更易于访问的格式。

  2. 如果该元素具有媒体 元素祖先，或者具有一个未显示其回退内容的祖先 object 元素， 或者该元素不位于一个浏览 上下文非 null 的文档中，或者该元素的节点文档 并非完全 活动，或者该元素仍位于 HTML 解析器或XML 解析器的开放元素栈中，或者该元素并非正在 渲染，则跳转到下方标记为回退的步骤。

  3. 如果 data 属性 存在且其值不是 空字符串：

    1. 如果 type 属性存在，并且其值 不是用户代理支持的类型，则用户代理可以不获取内容来检查其实际类型， 而直接跳转到下方标记为 回退的步骤。

    2. 令 url 为给定 data 属性的 值，并以该元素的节点 文档为基准，执行编码解析 URL所得的结果。

    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 元数据

        1. 令 binary 为 false。

        2. 如果该资源的 Content-Type 元数据中指定的类型为 "text/plain"， 并且对该资源应用区分资源是 文本还是二进制内容的规则所得的结果表明该资源并非 text/plain， 则将 binary 设置为 true。

        3. 如果该资源的 Content-Type 元数据中指定的类型为 "application/octet-stream"， 则将 binary 设置为 true。

        4. 如果 binary 为 false，则令 resource type 为该资源的 Content-Type 元数据中指定的类型，然后跳转到下方标记为 处理程序的步骤。

        5. 如果 object 元素上存在 type 属性，并且其值不是 application/octet-stream， 则运行以下步骤：

          1. 如果该属性的值是以 "image/" 开头的类型，并且 不是 XML MIME 类型，则令 resource type 为该 type 属性中指定的 类型。

          2. 跳转到下方标记为处理程序的步骤。

        否则，如果资源不具有关联的 Content-Type 元数据

        1. 如果 object 元素上存在 type 属性，则令 tentative type 为该 type 属性中指定的类型。

          否则，令 tentative type 为计算得出的资源类型。

        2. 如果 tentative type 不是 application/octet-stream， 则令 resource type 为 tentative type，并跳转到下方标记为 处理程序的步骤。

      4. 如果对指定资源在任何重定向后的 URL应用URL 解析器 算法，产生的URL 记录的路径组成部分匹配插件 支持的模式，则令 resource type 为该插件能够 处理的类型。

        例如，某个插件可能声明它可以处理路径组成部分以四字符字符串 ".swf" 结尾的资源。

      此步骤可能在 resource type 仍为未知的情况下结束， 或者上述某个子步骤可能在 resource type 仍为未知时直接跳转到下一步骤。 在这两种情况下，下一步骤都会触发回退。

    9. 处理程序：按照以下第一个匹配的情况处理内容：

      如果 resource type 是 XML MIME 类型，或者 resource type 不以 "image/" 开头

      如果 object 元素的内容 可导航对象为 null，则为该元素 创建 新的子可导航对象。

      令 response 为获取所得的响应。

      如果 response 的URL不 匹配 about:blank，则使用该元素的 节点文档，将该元素的内容可导航对象导航到 response 的URL，并将historyHandling 设置为 "replace"。

      如果内容可导航对象进一步导航到其他位置， object 元素的 data 属性 不会更新。

      object 元素表示其内容 可导航对象。

      如果 resource type 以 "image/" 开头，并且未禁用 图像支持

      给定 object 元素，销毁 子可导航对象。

      应用图像嗅探规则， 以确定图像的类型。

      object 元素表示指定的图像。

      如果无法渲染该图像，例如因为图像格式错误或采用不受支持的 格式，则跳转到下方标记为回退的步骤。

      否则

      给定的 resource type 不受支持。跳转到下方 标记为回退的步骤。

      如果前一步骤结束时 resource type 为未知，则会触发这种情况。

    10. 该元素的内容不属于 object 元素 所表示的内容。

    11. 如果 object 元素 不表示其内容 可导航对象， 则在资源完全加载后，给定该 object 元素， 在DOM 操作任务源上排入一个元素任务，以在该元素上触发一个名为 load 的事件。

      如果该元素确实表示其内容可导航对象， 则在创建的 Document 完全完成 加载时，会排入一个类似的任务。

    12. 返回。

  4. 回退：object 元素表示该元素的 子节点。这就是该元素的回退内容。给定该元素，销毁子 可导航对象。

由于上述算法，object 元素的内容充当回退 内容，仅在无法显示所引用的资源时使用（例如，因为该资源返回了 404 错误）。这允许多个 object 元素相互 嵌套，面向能力不同的多个用户代理，并由用户代理选择其支持的第一个 元素。

object 元素可能 延迟 load 事件。

form 属性用于 将 object 元素与其 表单所有者显式关联。

object 元素 支持尺寸属性。

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 的获取器步骤是返回 this 的内容文档。

HTMLObjectElement/contentWindow

所有当前引擎均支持。

Firefox22+Safari13+Chrome53+
Opera?Edge79+
Edge（旧版）17+Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

contentWindow 的获取器步骤是返回 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 属性：交互式内容。
可感知内容。
可以使用此 元素的上下文：
预期嵌入 内容之处。
内容模型：
如果该元素具有 src 属性： 零个或多个 track 元素，然后是 透明内容，但不得有媒体元素后代。
如果该元素没有 src 属性：零个或多个 source 元素，然后是 零个或多个 track 元素，然后是 透明内容，但不得有媒体元素后代。
text/html 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
src — 资源的地址
crossorigin — 元素如何处理跨源请求
poster — 视频播放前 显示的海报帧
preload — 提示 媒体资源可能需要 缓冲多少内容
autoplay — 提示 页面加载时可以自动启动 媒体资源
playsinline — 鼓励用户代理在元素的播放区域内显示视频内容
loop — 是否循环播放媒体资源
muted — 是否默认将 媒体资源静音
controls — 显示 用户代理控件
loading — 用于 确定是否延迟加载
width — 水平尺寸
height — 垂直尺寸
无障碍考虑：
面向作者。
面向实现者。
清理：
未分类。
DOM 接口：
[Exposed=Window]
interface HTMLVideoElement : HTMLMediaElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute unsigned long width;
  [CEReactions, Reflect] attribute unsigned long height;
  readonly attribute unsigned long videoWidth;
  readonly attribute unsigned long videoHeight;
  [CEReactions, ReflectURL] attribute USVString poster;
  [CEReactions, Reflect] attribute boolean playsInline;

};

video 元素用于 播放视频或影片，以及带 字幕的音频文件。

可以在 video 元素内提供内容。用户代理 不应向用户显示此内容；此内容面向不 支持 video 的旧版 Web 浏览器，以便向这些旧版浏览器的用户显示文本， 告知他们如何访问视频内容。

尤其需要注意的是，此内容并非用于解决无障碍问题。为了 使弱视者、盲人、听力障碍者、聋人 以及其他身体或认知障碍者能够访问视频内容，可以使用多种功能。 可以提供字幕，它们既可以嵌入视频流，也可以使用 track 元素作为外部文件提供。 可以在视频流中嵌入手语轨道。音频 描述可以嵌入视频流，也可以使用由 track 元素引用的 WebVTT 文件 以文本形式提供，并由用户代理合成为语音。 WebVTT 还可以用于提供章节标题。对于完全不愿使用媒体 元素的用户，可以直接在 video 元素附近的正文中链接 文本记录或其他文本替代内容。[WEBVTT]

video 元素是一个媒体元素，其媒体数据表面上是 视频数据，并且可能带有关联的音频数据。

video 元素具有一个 不含 slot 元素的内部影子树。

src、crossorigin、 preload、autoplay、 loop、muted 和 controls 属性是所有 媒体元素共有的属性。

poster 属性给出一个图像文件的 URL，当没有可用视频 数据时，用户代理可以显示该图像。如果存在，该属性必须包含一个可能被空格包围的有效非空 URL。

如果要使用指定资源，则在创建元素时，或者当 poster 属性被设置、 更改或移除时，用户代理必须 运行以下步骤来确定元素的海报帧（无论元素的显示海报标志为何值）：

  1. 如果此 video 元素已有此算法的实例正在运行，则中止该算法实例，且不更改海报 帧。

  2. 如果 poster 属性的值为空字符串， 或者该属性不存在：

    1. 将 video 元素的海报延迟加载恢复步骤设置为 null。

    2. 不存在海报帧；返回。

  3. 令 url 为给定 poster 属性的值， 并以元素的节点 文档为基准，执行编码解析 URL所得的结果。

  4. 如果 url 为失败，则返回。不存在海报 帧。

  5. 令 request 为一个新的请求，其URL 为 url，客户端为元素的节点文档的 相关设置 对象，目标为 "image"，发起者类型为 "video"， 凭据模式为 "include"，并设置其 使用 URL 凭据标志。

  6. 如果给定 video 后，元素是否将延迟 加载步骤返回 true：

    1. 令 posterResumptionSteps 为从标记为获取的步骤开始的此算法其余部分。

    2. 将 video 元素的海报延迟加载恢复步骤设置为 posterResumptionSteps。

    3. 返回。

  7. 获取 request。这必须 延迟 元素的节点文档的 load 事件。

  8. 如果由此获得图像，则海报 帧即为该图像。否则， 不存在海报帧。

由 poster 属性给出的图像， 即海报帧，旨在作为 视频的代表性帧（通常是最早的非空白帧之一），让用户了解视频 的大致内容。

playsinline 属性是一个布尔 属性。如果存在，它会向用户代理提示，默认应将视频 "内联"显示在文档中，限制在元素的播放区域内，而不是 全屏显示或显示在独立的可调整大小窗口中。

缺少 playsinline 属性并不意味着视频默认会全屏显示。事实上，大多数用户 代理都选择默认内联播放所有视频，在此类用户代理中，playsinline 属性 不起作用。

如果 poster 属性 存在，并且 loading 属性处于延迟 状态，则用户代理必须推迟加载海报 图像源数据，直到调用元素的延迟加载恢复步骤。 

<video src="1.mp4" poster="1.jpg" type="video/mp4">
<video src="2.mp4" type="video/mp4" loading="eager">
<video src="3.mp4" type="video/mp4" loading="lazy">
<video src="4.mp4" type="video/mp4" loading="lazy" autoplay>
<div id="very-large"></div> <!-- Everything after this div is below the viewport -->
<video src="5.mp4" type="video/mp4">
<video src="6.mp4" type="video/mp4" loading="lazy">
<video src="7.mp4" type="video/mp4" autoplay loading="lazy">
<video src="8.mp4" type="video/mp4" poster="8.jpg" loading="lazy">
<video src="9.mp4" type="video/mp4" preload="none" poster="9.jpg" loading="lazy">
<video src="10.mp4" type="video/mp4" preload="metadata" loading="lazy">
<video src="11.mp4" type="video/mp4" poster="11.jpg" preload="none" loading="eager">

在上述示例中，视频按如下方式加载：

1.mp4

视频和海报图像立即加载，并延迟窗口的 load 事件。

2.mp4, 5.mp4

视频立即加载，并延迟窗口的 load 事件。

3.mp4

由于视频位于视口中，因此在布局已知时加载，但它 不会延迟窗口的 load 事件。

4.mp4

由于视频位于视口中，因此在布局已知时加载视频并开始自动播放， 但它不会延迟窗口的 load 事件。

6.mp4

只有滚动到视口中时才会加载视频，并且不会延迟窗口的 load 事件。

7.mp4

只有滚动到视口中时才会加载视频并开始自动播放， 并且不会延迟窗口的 load 事件。

8.mp4

只有滚动到视口中时才会加载视频和海报图像，并且不会 延迟窗口的 load 事件。

9.mp4

视频在播放前不会加载。只有滚动到 视口中时才会加载海报图像，并且不会延迟窗口的 load 事件。

10.mp4

只有滚动到视口中时才会加载视频的元数据，并且不会延迟 窗口的 load 事件。

11.mp4

视频在播放前不会加载。海报图像立即加载，并延迟窗口的 load 事件。

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。

媒体资源的自然 宽度和自然高度是 在考虑资源的尺寸、宽高比、有效孔径、分辨率等因素后， 按资源所用格式的定义得出的资源尺寸，以CSS 像素表示。如果变形格式未定义如何将宽高 比应用于视频数据的尺寸以获得 "正确" 尺寸，则用户代理必须 通过增大一个尺寸并保持另一个尺寸不变来应用该比例。

videoWidth 的获取器步骤为：

  1. 如果 this 的 readyState 属性为 HAVE_NOTHING， 则返回 0。

  2. 返回以 CSS 像素表示的视频自然宽度。

videoHeight 的获取器步骤为：

  1. 如果 this 的 readyState 属性为 HAVE_NOTHING， 则返回 0。

  2. 返回以 CSS 像素表示的视频自然高度。

只要视频的自然宽度 或自然 高度发生变化 （例如，包括因为选定的视频 轨道发生变化），并且元素的 readyState 属性不是 HAVE_NOTHING， 用户代理就必须给定该媒体元素，排入一个媒体元素 任务，以在该媒体元素上触发一个名为 resize 的事件。

video 元素 支持尺寸属性。

在没有相反样式规则的情况下，视频内容应在 元素的播放区域内渲染，使视频内容以能够完全容纳在播放区域内的 最大尺寸居中显示，并保持视频内容的宽高比。 因此，如果播放区域的宽高比与 视频的宽高比不匹配，视频将以信箱模式或邮筒模式显示。元素播放区域内 不包含视频的区域不表示任何内容。

在实现 CSS 的用户代理中，可以通过 使用“渲染”章节中建议的样式规则实现上述要求。

video 元素播放 区域的自然宽度是 海报帧的自然宽度，前提是该宽度可用，并且 元素当前表示其海报帧； 否则，如果视频资源的自然宽度可用，则为该宽度； 否则自然宽度缺失。

video 元素播放 区域的自然高度是 海报帧的自然高度，前提是该高度可用，并且 元素当前表示其海报帧； 否则，如果视频资源的自然高度可用，则为该高度； 否则自然高度 缺失。

默认对象尺寸为宽 300 CSS 像素 、高 150 CSS 像素。[CSSIMAGES]

用户代理应提供控件，用于启用或禁用闭路字幕、音频 描述轨道以及与视频流关联的其他附加数据的显示，不过这些 功能同样不应干扰页面的正常渲染。

用户代理可以允许用户以更适合用户的方式查看视频内容， 例如全屏显示或在独立的可调整大小窗口中显示。用户代理甚至可以在播放视频时默认触发此类 查看模式，不过在指定 playsinline 属性 时不应这样做。与其他用户 界面功能一样，用于启用此功能的控件不应干扰页面的正常渲染， 除非用户代理正在向用户公开用户 界面。不过，在此类独立查看模式中，即使 缺少 controls 属性， 用户代理也可以显示完整的用户界面。

用户代理可以允许视频播放影响可能干扰 用户体验的系统功能；例如，用户代理可以在视频播放 过程中禁用屏幕保护程序。

此示例展示如何检测视频未能正确播放：

<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 — 显示 用户代理控件
loading — 用于 确定是否延迟加载
无障碍考虑：
面向作者。
面向实现者。
清理：
未分类。
DOM 接口：
[Exposed=Window,
 LegacyFactoryFunction=Audio(optional DOMString src)]
interface HTMLAudioElement : HTMLMediaElement {
  [HTMLConstructor] constructor();
};

audio 元素表示声音或音频流。

可以在 audio 元素内提供内容。用户代理 不应向用户显示此内容；此内容面向不 支持 audio 的旧版 Web 浏览器，以便向这些旧版浏览器的用户显示文本， 告知他们如何访问音频内容。

尤其需要注意的是，此内容并非用于解决无障碍问题。为了 使聋人或其他身体或认知 障碍者能够访问音频内容，可以使用多种功能。如果有字幕或手语视频 可用，可以使用 video 元素代替 audio 元素来 播放音频，从而允许用户启用视觉替代内容。可以使用 track 元素和 WebVTT 文件提供 章节标题，以帮助导航。当然，也可以直接在 audio 元素附近的正文中链接文本记录或其他文本替代内容。[WEBVTT]

audio 元素是一个媒体元素，其媒体数据表面上是 音频数据。

audio 元素具有一个 不含 slot 元素的内部影子树。

src、crossorigin、 preload、autoplay、 loop、muted、controls 和 loading 属性是所有 媒体元素共有的属性。

没有 controls 属性的 audio 元素不会由用户代理显示，从而阻止它们延迟加载。

<audio src="1.mp3" type="audio/mpeg" controls>
<audio src="2.mp3" type="audio/mpeg" controls loading="eager">
<audio src="3.mp3" type="audio/mpeg" controls loading="lazy">
<audio src="4.mp3" type="audio/mpeg" controls loading="lazy" autoplay>
<div id="very-large"></div> <!-- Everything after this div is below the viewport -->
<audio src="5.mp3" type="audio/mpeg" controls>
<audio src="6.mp3" type="audio/mpeg" controls loading="lazy">
<audio src="7.mp3" type="audio/mpeg" controls autoplay loading="lazy">
<audio src="8.mp3" type="audio/mpeg" controls preload="metadata" loading="lazy">

在上述示例中，音频文件按如下方式加载：

1.mp3, 2.mp3, 5.mp3

音频文件立即加载，并延迟窗口的 load 事件。

3.mp3

由于音频位于视口中，因此在布局已知时加载，但它 不会延迟窗口的 load 事件。

4.mp3

由于音频位于视口中，因此在布局已知时加载音频并开始自动播放， 但它不会延迟窗口的 load 事件。

6.mp3

只有滚动到视口中时才会加载音频，并且不会延迟窗口的 load 事件。

7.mp3

只有滚动到视口中时才会加载音频并开始自动播放， 并且不会延迟窗口的 load 事件。

8.mp3

只有滚动到视口中时才会加载音频的元数据，并且不会延迟 窗口的 load 事件。

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 属性设置为参数中传入的值。

除 DOM 中的工厂方法（例如 createElement()）外， 还提供了一个用于创建 HTMLAudioElement 对象的旧式工厂函数： Audio(src)。调用时，该旧式工厂函数 必须执行以下步骤：

  1. 令 document 为当前全局对象的关联 Document。

  2. 令 audio 为给定 document、"audio" 和 HTML 命名空间，执行创建元素所得的结果。

  3. 使用 "preload" 和 "auto"， 为 audio 设置属性值。

  4. 如果给出了 src，则使用 "src" 和 src 为 audio 设置 属性值。（这会在返回前使用户 代理调用该对象的资源选择 算法。）

  5. 返回 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+

HTMLTrackElement/src

所有当前引擎均支持。

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 — 如果没有 其他文本轨道更合适，则启用该 轨道
无障碍考虑：
面向作者。
面向实现者。
清理：
未分类。
DOM 接口：
[Exposed=Window]
interface HTMLTrackElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString kind;
  [CEReactions, ReflectURL] attribute USVString src;
  [CEReactions, Reflect] attribute DOMString srclang;
  [CEReactions, Reflect] attribute DOMString label;
  [CEReactions, Reflect] 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 属性时，运行以下步骤：

  1. 令 trackURL 为失败。

  2. 令 value 为元素的 src 属性 值。

  3. 如果 value 不是空字符串，则将 trackURL 设置为 给定 value，并以 元素的节点文档为基准，执行编码解析并序列化 URL所得的结果。

  4. 如果 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 属性。

对于 kind 属性处于元数据状态，并且指定了其 default 属性的 track 元素， 其数量没有限制。

track.readyState

返回文本轨道 就绪状态，该状态由以下 列表中的数字表示：

track.NONE (0)

文本轨道未加载 状态。

track.LOADING (1)

文本轨道正在加载状态。

track.LOADED (2)

文本轨道已加载状态。

track.ERROR (3)

文本轨道加载 失败状态。

track.track

返回 track 元素的文本轨道。

readyState 属性必须返回 与 track 元素的 文本轨道的文本轨道就绪状态相对应的数值， 如以下列表所定义：

NONE （数值 0）
文本轨道未加载 状态。
LOADING （数值 1）
文本轨道正在加载状态。
LOADED （数值 2）
文本轨道已加载状态。
ERROR （数值 3）
文本轨道加载 失败状态。

track 的获取器步骤是返回 this 的文本轨道。

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+

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+

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+

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+

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+

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+ 
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, ReflectURL] 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, Reflect] attribute boolean autoplay;
  [CEReactions, Reflect] attribute boolean loop;
  Promise<undefined> play();
  undefined pause();

  // controls
  [CEReactions, Reflect] attribute boolean controls;
  attribute double volume;
  attribute boolean muted;
  [CEReactions, Reflect="muted"] attribute boolean defaultMuted;
  [CEReactions] attribute DOMString loading;

  // 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 和 loading，适用于所有媒体元素。它们在本节中定义。

loading 属性是一个延迟加载 属性。其用途是指示 加载视口外媒体资源的策略。

当 loading 属性的状态变为 立即状态时，用户代理 必须运行以下 步骤：

  1. 令 resumptionSteps 为媒体 元素的延迟加载 恢复步骤。

  2. 令 posterResumptionSteps 为 null。

    如果媒体元素是 video 元素，则将 posterResumptionSteps 设置为该 video 元素的海报延迟 加载 恢复步骤。

  3. 如果 resumptionSteps 为 null 且 posterResumptionSteps 为 null，则 返回。

  4. 如果 resumptionSteps 不为 null：

    1. 将媒体元素的延迟加载恢复 步骤设置为 null。

    2. 调用 resumptionSteps。

  5. 如果 posterResumptionSteps 不为 null：

    1. 将 video 元素的海报延迟加载恢复步骤设置为 null。

    2. 调用 posterResumptionSteps。

loading IDL 属性必须反映 loading 内容属性，并仅限于已知值。

当 loading 属性 处于延迟状态时，它通过推迟数据获取 优先于 preload 属性。

如果 autoplay 属性 存在，并且 loading 属性处于延迟状态， 用户代理还必须推迟开始 播放（以及自动播放可能引入的任何关联网络请求），直到调用元素的 延迟加载恢复 步骤。

媒体元素用于向用户呈现音频数据，或者 视频和 音频数据。在本节中，这称为媒体数据， 因为本节同等适用于音频或视频的媒体 元素。 术语媒体资源用于指代完整的媒体数据集合，例如 完整的视频文件或完整的音频文件。

媒体资源具有关联的 源，其值为 "none"、"multiple"、 "rewritten" 或一个源。其初始值为 "none"。

媒体资源可以具有多个音频和 视频轨道。对于 媒体元素而言，媒体资源的视频数据仅为 事件循环上一次 到达步骤 1时，由元素的 videoTracks 属性给出的 当前选定轨道（如果有）的数据；而媒体资源的音频数据，是 事件循环上一次 到达步骤 1时，由元素的 audioTracks 属性给出的 所有当前启用轨道（如果有）混合所得的结果。

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/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 对象都是媒体提供者对象。

每个媒体元素都有一个 已分配的媒体提供者对象，它是一个 媒体提供者对象或 null， 初始值为 null。

media.srcObject [ = source ]

HTMLMediaElement/srcObject

仅一个引擎支持。

Firefox🔰 42+Safari11+Chrome🔰 108+
Opera?Edge🔰 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 获取器步骤为返回 this 的已分配的媒体提供者对象。

srcObject 设置器步骤为：

  1. 将 this 的已分配的媒体提供者对象设置为给定值。

  2. 调用 this 的媒体元素加载算法。

有三种方式可以指定媒体资源：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"。

如果 type 是用户代理已知无法渲染的类型，或者是 "application/octet-stream" 类型，则 canPlayType(type) 方法必须返回 空字符串；如果用户代理确信该类型表示一个在与此 audio 或 video 元素一起使用时能够渲染的 媒体资源，则必须返回 "probably"；否则必须返回 "maybe"。除非能够确信确定该类型受支持或不受支持， 否则鼓励实现者返回 "maybe"。 通常，对于允许使用 codecs 参数但未提供该参数的类型，用户代理绝不应返回 "probably"。

此脚本测试用户代理是否支持一种（虚构的）新格式，以动态决定是否使用 video 元素： 

<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>

source 元素的 type 属性允许用户代理避免下载 使用其无法渲染的格式的资源。

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() 方法时，用户代理必须运行以下步骤：

  1. 令 resumptionSteps 为该媒体元素的延迟加载恢复步骤。

  2. 如果 resumptionSteps 不为 null：

    1. 将该媒体元素的延迟加载恢复步骤 设置为 null。

    2. 调用 resumptionSteps。

  3. 运行媒体元素加载算法。

一个媒体元素有关联的布尔值 当前已停滞，其初始值为 false。

媒体元素加载算法由以下步骤组成：

  1. 将此元素的当前已停滞 设置为 false。

  2. 中止此元素任何已在运行的资源选择算法实例。

  3. 令 pending tasks 为某个任务队列中，来自该媒体元素的媒体元素事件任务源的所有任务的列表。

  4. 对于 pending tasks 中每个将会兑现待处理播放 promise或拒绝待处理播放 promise的任务， 按相应任务入队的顺序立即兑现或拒绝这些 promise。

  5. 从各自的任务队列中移除 pending tasks 中的每个任务。

    基本上，当媒体元素开始加载新资源时，待处理事件和回调会被丢弃，而正在等待兑现或拒绝的 promise 会被立即兑现或拒绝。

  6. 如果该媒体元素的 networkState 设置为 NETWORK_LOADING 或 NETWORK_IDLE， 则以该媒体元素为参数将媒体元素任务入队， 以在该媒体元素处触发一个名为 abort 的事件。

  7. 如果该媒体元素的 networkState 未设置为 NETWORK_EMPTY：

    1. 以该媒体元素为参数将媒体元素任务入队， 以在该媒体元素处触发一个事件， 其名称为 emptied。

    2. 如果该媒体元素正在进行获取过程，用户代理应停止该过程。

    3. 如果该媒体元素的已分配的媒体提供者对象是一个 MediaSource 对象，则将其分离。

    4. 忘记媒体元素的媒体资源专用轨道。

    5. 如果 readyState 未设置为 HAVE_NOTHING， 则将其设置为该状态。

    6. 如果 paused 属性为 false：

      1. 将 paused 属性设置为 true。

      2. 取出待处理播放 promise， 并使用该结果和一个 "AbortError" DOMException 来拒绝待处理播放 promise。

    7. 如果 seeking 为 true，则将其设置为 false。

    8. 将当前播放位置设置为 0。

      将正式播放位置设置为 0。

      如果这更改了正式播放位置，则以该媒体元素为参数将媒体元素任务入队， 以在该媒体元素处触发一个事件， 其名称为 timeupdate。

    9. 将时间线偏移设置为非数值 (NaN)。

    10. 将 duration 属性更新为非数值 (NaN)。

      对于 duration 的这一特定更改，用户代理不会触发 durationchange 事件。

  8. 将 playbackRate 属性设置为 defaultPlaybackRate 属性的值。

  9. 将 error 属性设置为 null，并将可自动播放标志设置为 true。

  10. 调用该媒体元素的资源选择算法。

  11. 此元素之前正在播放的任何媒体资源都会停止播放。

媒体元素的 资源选择算法如下。此算法始终作为一个任务的一部分被调用， 但该算法最初的几个步骤之一会返回，并继续并行运行其余步骤。此外，此算法与事件循环机制紧密交互； 特别是，它包含同步段（这些同步段作为事件循环算法的一部分触发）。 此类段中的步骤以 ⌛ 标记。

  1. 将元素的 networkState 属性设置为 NETWORK_NO_SOURCE 值。

  2. 将元素的显示海报标志 设置为 true。

  3. 如果该媒体元素的延迟加载属性处于 立即状态，或者脚本已禁用， 则将该媒体元素的延迟加载事件标志设置为 true （这会延迟加载事件）。

  4. 等待稳定状态， 允许调用此算法的任务继续运行。 同步段由此算法剩余的所有步骤组成， 直到算法说明同步段已经结束。 （同步段中的步骤以 ⌛ 标记。）

  5. ⌛ 如果该媒体元素的被解析器阻塞标志为 false， 则填充待处理文本轨道列表。

  6. ⌛ 令 mode 为 null。

  7. ⌛ 令 candidate 为 null。

  8. ⌛ 如果该媒体元素的已分配的媒体提供者对象 不为 null，则将 mode 设置为 object。

  9. ⌛ 否则，如果该媒体元素具有 src 属性， 则将 mode 设置为 attribute。

  10. ⌛ 否则，如果该媒体元素具有 source 元素子级， 则将 mode 设置为 children，并将 candidate 设置为树顺序中的第一个 source 元素子级。

  11. ⌛ 否则：

    1. ⌛ 将 networkState 设置为 NETWORK_EMPTY。

    2. ⌛ 将元素的延迟加载事件标志设置为 false。 这会停止延迟加载事件。

    3. 结束同步段并返回。

  12. ⌛ 将该媒体元素的 networkState 设置为 NETWORK_LOADING。

  13. ⌛ 以该媒体元素为参数将媒体元素任务入队， 以在该媒体元素处触发一个事件，其名称为 loadstart。

  14. 运行下列列表中的适当步骤：

    如果 mode 为 object

    1. ⌛ 将 currentSrc 属性设置为空字符串。

    2. 结束同步段，并继续并行运行其余步骤。

    3. 使用已分配的媒体提供者对象运行资源获取算法。 如果该算法在未中止此算法的情况下返回，则加载失败。

    4. 使用媒体提供者失败：到达此步骤表示媒体资源加载失败。取出待处理播放 promise， 并以该媒体元素为参数将媒体元素任务入队， 以使用该结果运行专用媒体源失败步骤。

    5. 等待上一步入队的任务执行完毕。

    6. 返回。在再次触发此算法之前，元素不会尝试加载其他资源。

    如果 mode 为 attribute

    1. ⌛ 如果 src 属性的值为空字符串，则结束同步段，并跳转到下方的 使用属性失败步骤。

    2. ⌛ 令 urlRecord 为以下操作的结果：以 src 属性的值为参数，并以该 src 属性 最后更改时该媒体元素的节点文档 为相对基准，进行编码解析 URL。

    3. ⌛ 如果 urlRecord 不是失败，则将 currentSrc 属性设置为对 urlRecord 应用 URL 序列化器的结果。

    4. 结束同步段，并继续并行运行其余步骤。

    5. 如果 urlRecord 不是失败，则使用 urlRecord 运行资源获取算法。 如果该算法在未中止此算法的情况下返回，则加载失败。

    6. 使用属性失败：到达此步骤表示媒体资源加载失败，或者 urlRecord 为失败。 取出待处理播放 promise， 并以该媒体元素为参数将媒体元素任务入队， 以使用该结果运行专用媒体源失败步骤。

    7. 等待上一步入队的任务执行完毕。

    8. 返回。在再次触发此算法之前，元素不会尝试加载其他资源。

    否则（mode 为 children）

    1. ⌛ 令 pointer 为该媒体元素子级列表中由两个相邻节点定义的位置， 并将列表开头（列表中第一个子级之前，如果有）和列表结尾（列表中最后一个子级之后，如果有） 也视为各自独立的节点。一个节点是 pointer 之前的节点，另一个节点是 pointer 之后的节点。最初，如果 candidate 节点之后存在节点， 则令 pointer 为 candidate 节点与下一个节点之间的位置； 如果它是最后一个节点，则令其为列表末尾。

      当节点被插入、移除或移动到该媒体元素中时， 必须按以下方式更新 pointer：

      如果在定义 pointer 的两个节点之间插入或移动了一个新节点
      令 pointer 为 pointer 之前的节点与新节点之间的位置。 换句话说，在 pointer 处的插入会发生在 pointer 之后。
      如果移除了 pointer 之前的节点
      令 pointer 为 pointer 之后的节点与该节点之前的节点之间的位置。 换句话说，pointer 相对于剩余节点不会移动。
      如果移除了 pointer 之后的节点
      令 pointer 为 pointer 之前的节点与该节点之后的节点之间的位置。 与上一种情况一样，pointer 相对于剩余节点不会移动。

      其他更改不会影响 pointer。

    2. ⌛ 处理候选项：如果 candidate 没有 src 属性，或者其 src 属性的值为空字符串，则结束同步段，并跳转到下方的 使用元素失败步骤。

    3. ⌛ 如果 candidate 具有 media 属性，并且其值与环境不匹配， 则结束同步段，并跳转到下方的 使用元素失败步骤。

    4. ⌛ 令 urlRecord 为以下操作的结果：以 candidate 的 src 属性的值为参数，并以该 src 属性 最后更改时 candidate 的节点文档 为相对基准，进行编码解析 URL。

    5. ⌛ 如果 urlRecord 为失败，则结束同步段，并跳转到下方的 使用元素失败步骤。

    6. ⌛ 如果 candidate 具有 type 属性，并且其值在解析为 MIME 类型时（对于定义了 codecs 参数的类型，包括该参数所描述的所有编解码器）， 表示用户代理已知无法渲染的类型， 则结束同步段，并跳转到下方的 使用元素失败步骤。

    7. ⌛ 将 currentSrc 属性设置为对 urlRecord 应用URL 序列化器的结果。

    8. 结束同步段，并继续并行运行其余步骤。

    9. 使用 urlRecord 运行资源获取算法。 如果该算法在未中止此算法的情况下返回，则加载失败。

    10. 使用元素失败：以该媒体元素为参数将媒体元素任务入队， 以在 candidate 处触发一个事件， 其名称为 error。

    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. ⌛ 跳回上方的查找下一个候选项步骤。

    使用 promise 列表 promises 的 专用媒体源失败步骤如下：

    1. 将 error 属性 设置为以下操作的结果：使用 MEDIA_ERR_SRC_NOT_SUPPORTED 创建一个 MediaError。

    2. 忘记媒体元素的媒体资源专用轨道。

    3. 将元素的 networkState 属性设置为 NETWORK_NO_SOURCE 值。

    4. 将元素的显示海报标志 设置为 true。

    5. 在该媒体元素处触发一个事件， 其名称为 error。

    6. 使用 promises 和一个 "NotSupportedError" DOMException 来拒绝待处理播放 promise。

    7. 将元素的延迟加载事件标志设置为 false。 这会停止延迟加载事件。

要在给定一个响应 response、一个媒体资源 resource， 以及 "entire resource" 或一个 （数字、数字或 "until end"）元组 byteRange 时 验证媒体响应：

  1. 如果 response 是一个网络错误， 则返回 false。

  2. 如果 byteRange 为 "entire resource"，则返回 true。

  3. 令 internalResponse 为 response 的不安全响应。

  4. 如果 internalResponse 的状态 为 200，则返回 true。

  5. 如果 internalResponse 的状态不是 206，则返回 false。

  6. 如果从 internalResponse 中提取 content-range 值的结果为失败，则返回 false。

    请注意，提取出的值不会被使用，尤其不会与 byteRange 进行比较。 因此，此步骤用于对 `Content-Range` 标头进行语法验证；但如果响应上的 `Content-Range` 值与请求上的 `Range` 值不匹配，则不会将其视为失败。

  7. 如果 internalResponse 的 URL 为 null，则令 origin 为 "rewritten"；否则令其为 internalResponse 的 URL 的 源。

  8. 令 previousOrigin 为 resource 的源。

  9. 如果以下任一项为 true：

    • previousOrigin 为 "none"；

    • origin 和 previousOrigin 都是 "rewritten"；或者

    • origin 和 previousOrigin 都是源，并且 origin 与 previousOrigin 同源，

    则将 resource 的源设置为 origin。

    否则，如果 response 是CORS 跨源的，则返回 false。

    否则，将 resource 的源设置为 "multiple"。

    这可确保带有范围标头的不透明响应不会因与来自不同源的其他响应拼接在一起而泄露信息。

  10. 返回 true。

用于媒体元素以及给定 URL 记录或媒体提供者对象的 资源获取算法如下：

  1. 如果以该媒体元素为参数的 将延迟加载元素步骤返回 true：

    1. 令 resumptionSteps 为从标有令 mode 为 remote的步骤开始的本算法其余部分。

    2. 将该媒体元素的延迟加载恢复步骤 设置为 resumptionSteps。

    3. 为该媒体元素开始交叉观察延迟加载元素。

    4. 返回。

  2. 令 mode 为 remote。

  3. 如果调用该算法时传入的是媒体提供者对象，则将 mode 设置为 local。

    否则：

    1. 令 isTopLevelSelfFetch 为 false。

    2. 令 settingsObject 为该媒体元素的节点文档的相关设置对象。

    3. 令 global 为该媒体元素的节点文档的相关全局对象。

    4. 如果以下所有条件均为 true：

      则将 isTopLevelSelfFetch 设置为 true。

    5. 如果 isTopLevelSelfFetch 为 true，则令 stringOrEnvironment 为 "top-level-self-fetch"；否则令其为 settingsObject。

    6. 令 object 为以下操作的结果：使用该URL 记录的blob URL 条目和 stringOrEnvironment，获取 blob 对象。

    7. 如果 object 是一个媒体提供者对象，则将 mode 设置为 local。

  4. 如果 mode 为 remote，则令当前媒体资源为传递给此算法的 URL 记录所给出的资源； 否则，令当前媒体资源为媒体提供者对象所给出的资源。 无论哪种情况，当前媒体资源现在都是元素的媒体资源。

  5. 从该媒体元素的待处理文本轨道列表中移除所有媒体资源专用文本轨道（如果有）。

  6. 运行下列列表中的适当步骤：

    如果 mode 为 remote

    1. 可以选择运行以下子步骤。如果用户代理打算在用户明确请求资源之前不尝试获取该资源 （例如，作为实现 preload 属性的 none 关键字的一种方式），则这是预期行为。

      1. 将 networkState 设置为 NETWORK_IDLE。

      2. 以该媒体元素为参数将媒体元素任务入队， 以在该元素处触发一个事件， 其名称为 suspend。

      3. 以该媒体元素为参数将媒体元素任务入队， 以将元素的延迟加载事件标志设置为 false。 这会停止延迟加载事件。

      4. 等待该任务运行。

      5. 等待一个由实现定义的事件 （例如，用户请求媒体元素开始播放）。

      6. 将元素的延迟加载事件标志重新设置为 true （这会再次延迟加载事件，以防该事件尚未触发）。

      7. 将 networkState 设置为 NETWORK_LOADING。

    2. 如果该媒体元素是一个 audio 元素，则令 destination 为 "audio"；否则令其为 "video"。

    3. 令 request 为以下操作的结果：以当前媒体资源的URL 记录、 destination 以及该媒体元素的 crossorigin 内容属性的当前状态为参数，创建潜在 CORS 请求。

    4. 将 request 的客户端设置为该媒体元素的节点文档的相关设置对象。

    5. 将 request 的发起者类型设置为 destination。

    6. 令 byteRange 为满足媒体数据中缺失数据所需的字节范围， 它是 "entire resource" 或一个 （数字、数字或 "until end"）元组。此值是由实现定义的， 并且可能依赖编解码器、网络条件或其他启发式规则。用户代理可以决定完整获取该资源， 在这种情况下 byteRange 为 "entire resource"； 可以决定从某个字节偏移处获取到末尾，在这种情况下 byteRange 为 （数字、"until end"）；或者可以决定获取两个字节偏移之间的范围， 在这种情况下 byteRange 为表示这两个偏移量的（数字、数字）元组。

    7. 如果 byteRange 不是 "entire resource"：

      1. 如果 byteRange[1] 为 "until end"，则以 byteRange[0] 为参数，向 request添加范围标头。

      2. 否则，以 byteRange[0] 和 byteRange[1] 为参数， 向 request添加范围标头。

    8. 获取 request，并将 processResponse 设置为以下步骤，给定一个响应 response：

      1. 令 global 为该媒体元素的节点文档的相关全局对象。

      2. 令 updateMedia 为以下操作：以该媒体元素为参数将媒体元素任务入队， 以运行下方媒体数据处理步骤列表中的 第一个适当步骤。（此处使用新任务，以便下文描述的工作相对于适当的媒体元素事件任务源发生， 而不是使用网络任务源。）

      3. 令 processEndOfMedia 为以下步骤：如果获取过程已完成且没有错误， 包括媒体数据的解码，并且所有数据无需网络访问即可供用户代理使用， 则用户代理必须继续执行下方的最终步骤。这可能永远不会发生， 例如在流式传输网络广播等无限资源时，或者资源长度超过用户代理缓存数据的能力时。

      4. 如果在给定当前媒体资源和 byteRange 时验证 response 的结果为 false，则中止这些步骤。

      5. 否则，给定 updateMedia、processEndOfMedia、一个空算法和 global，增量读取 response 的主体。

      6. 使用以这种方式获得的 response 的不安全响应内容更新媒体数据。 response 可以是CORS 同源或CORS 跨源的； 这会影响媒体数据中引用的字幕是否在 API 中暴露， 并且对于 video 元素，还会影响在将视频绘制到 canvas 上时该 canvas 是否被污染。

      媒体元素停滞超时是一个由实现定义的时长，应约为三秒。 当一个正在主动尝试获取媒体数据的媒体元素在等同于媒体元素停滞超时的时长内未能接收到任何数据时， 用户代理必须以该媒体元素为参数将媒体元素任务入队，以执行：

      1. 将元素的当前已停滞设置为 true。

      2. 在该元素处触发一个事件， 其名称为 stalled。

      用户代理可以允许用户选择性地阻止或减慢媒体数据下载。 当媒体元素的下载被完全阻止时， 用户代理必须表现得像下载已停滞，而不是表现得像连接已关闭。用户代理还可以自动限制下载速率， 例如，为了在共享相同带宽的其他连接之间平衡下载。

      用户代理可以随时决定不再下载更多内容，例如，在一个一小时的媒体资源已缓冲 五分钟之后，在等待用户决定是否播放该资源时，在交互式资源中等待用户输入时， 或者在用户导航离开页面时。当媒体元素的下载已暂停时， 用户代理必须以该媒体元素为参数将媒体元素任务入队， 以将 networkState 设置为 NETWORK_IDLE， 并在该元素处触发一个事件， 其名称为 suspend。 如果资源的下载恢复，用户代理必须以该媒体元素为参数将媒体元素任务入队， 以将 networkState 设置为 NETWORK_LOADING。 在这些任务入队期间，加载处于暂停状态（因此，如上所述，不会触发 progress 事件）。

      preload 属性提供了有关作者认为适宜进行多少缓冲的提示，即使不存在 autoplay 属性也是如此。

      当用户代理决定完全暂停下载时，例如，如果它在用户开始播放之前等待而不下载更多内容， 用户代理必须以该媒体元素为参数将媒体元素任务入队， 以将元素的延迟加载事件标志设置为 false。 这会停止延迟加载事件。

      虽然上述步骤给出了发出请求的算法，但用户代理可以使用这些确切方式之外的其他方式， 尤其是在遇到错误条件时。例如，用户代理可以重新连接到服务器，或者切换到流式传输协议。 只有在用户代理已经放弃尝试获取资源时，才必须将该资源视为错误资源，并进入上述步骤的错误分支。

      为了确定媒体资源的格式，用户代理必须使用专门嗅探音频和视频的规则。

      当加载未暂停时（见下文），每 350ms（±200ms）或每接收一个字节，以频率较低者为准， 以该媒体元素为参数将媒体元素任务入队，以执行：

      1. 将元素的当前已停滞设置为 false。

      2. 在该元素处触发一个事件， 其名称为 progress。

      只要用户代理仍可能需要网络访问才能获取媒体资源的某些部分， 用户代理就必须停留在此步骤。

      例如，如果用户代理已丢弃视频的前半部分，那么即使播放已经结束， 用户代理仍会停留在此步骤，因为用户始终有可能回退到开头。实际上，在这种情况下， 一旦播放结束， 用户代理最终会触发一个 suspend 事件，如前文所述。

    否则（mode 为 local）

    由当前媒体资源描述的资源（如果有）包含媒体数据。它是CORS 同源的。

    如果当前媒体资源是原始数据流（例如来自 File 对象），则为了确定媒体资源的格式， 用户代理必须使用专门嗅探音频和视频的规则。 否则，如果数据流已预先解码，则格式为相关规范所给出的格式。

    每当当前媒体资源的新数据可用时，以该媒体元素为参数将媒体元素任务入队， 以运行下方媒体数据处理步骤列表中的第一个适当步骤。

    当当前媒体资源被永久耗尽时（例如，一个 Blob 的所有字节都已处理），如果没有解码错误，则用户代理必须继续执行下方的最终步骤。 这可能永远不会发生，例如，如果当前媒体资源是一个 MediaStream。

    媒体数据处理步骤列表如下：

    如果由于网络错误根本无法获取媒体数据，导致用户代理放弃尝试获取资源
    如果可以获取媒体数据，但经检查发现其格式不受支持， 或者由于其他原因完全无法渲染

    DNS 错误、HTTP 4xx 和 5xx 错误（以及其他协议中的等效错误），以及用户代理在确定 当前媒体资源是否可用之前发生的其他致命网络错误，还有文件使用不受支持的 容器格式，或者其所有数据都使用不受支持的编解码器，都必须使用户代理执行以下步骤：

    1. 用户代理应取消获取过程。

    2. 中止此子算法，并返回资源选择算法。

    如果发现媒体资源具有音频轨道

    1. 创建一个 AudioTrack 对象 来表示该音频轨道。

    2. 使用新的 AudioTrack 对象 更新该媒体元素的 audioTracks 属性的 AudioTrackList 对象。

    3. 令 enable 为 unknown。

    4. 如果媒体资源或 当前媒体资源的 URL 指示了要启用的特定音频轨道集合，或者用户代理拥有可帮助选择特定音频轨道以改善用户体验的信息： 如果此音频轨道是要启用的轨道之一，则将 enable 设置为 true， 否则将 enable 设置为 false。

      这可以由媒体片段语法触发， 也可以由其他情况触发，例如，用户代理选择 5.1 环绕声音频轨道而非立体声音频轨道。

    5. 如果 enable 仍为 unknown，那么，如果该媒体元素还没有已启用的音频轨道， 则将 enable 设置为 true；否则，将 enable 设置为 false。

    6. 如果 enable 为 true，则启用此音频轨道； 否则，不启用此音频轨道。

    7. 在此 AudioTrackList 对象处触发一个事件， 其名称为 addtrack； 使用 TrackEvent， 并将 track 属性初始化为新的 AudioTrack 对象。

    如果发现媒体资源具有视频轨道

    1. 创建一个 VideoTrack 对象来表示该视频轨道。

    2. 使用新的 VideoTrack 对象 更新该媒体元素的 videoTracks 属性的 VideoTrackList 对象。

    3. 令 enable 为 unknown。

    4. 如果媒体资源或 当前媒体资源的 URL 指示了要启用的特定视频轨道集合，或者用户代理拥有可帮助选择特定视频轨道以改善用户体验的信息： 如果此视频轨道是这类视频轨道中的第一条，则将 enable 设置为 true； 否则，将 enable 设置为 false。

      这同样可以由媒体片段语法触发。

    5. 如果 enable 仍为 unknown，那么，如果该媒体元素还没有已选中的视频轨道， 则将 enable 设置为 true；否则，将 enable 设置为 false。

    6. 如果 enable 为 true，则选中此轨道，并取消选中任何之前已选中的视频轨道； 否则，不选中此视频轨道。如果取消选中了其他轨道，则会触发一个 change 事件。

    7. 在此 VideoTrackList 对象处触发一个事件， 其名称为 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. 如果该媒体元素的默认播放起始位置大于零， 则定位到该时间，并令 jumped 为 true。

    9. 将该媒体元素的默认播放起始位置设置为零。

    10. 令初始播放位置为 0。

    11. 如果媒体资源或 当前媒体资源的 URL 指示了特定的开始时间，则将初始播放位置设置为该时间； 如果 jumped 仍为 false，则定位到该时间。

      例如，对于支持媒体片段语法的媒体格式， 可以使用 片段来指示起始位置。

    12. 如果不存在已启用的音频轨道， 则启用一个音频轨道。这将导致触发一个 change 事件。

    13. 如果不存在已选中的视频轨道， 则选中一个视频轨道。这将导致触发一个 change 事件。

    一旦 readyState 属性达到 HAVE_CURRENT_DATA， 就在loadeddata 事件触发之后， 将元素的延迟加载事件标志设置为 false。 这会停止延迟加载事件。

    试图在仍获取每个媒体资源的元数据时减少网络使用量的用户代理， 也会在此时停止缓冲，并遵循前述规则； 这些规则涉及将 networkState 属性切换为 NETWORK_IDLE 值，并触发一个 suspend 事件。

    用户代理必须确定媒体资源的时长，并在播放之前完成此步骤。

    一旦整个媒体资源 均已获取（但可能在其中任何部分解码之前）

    在该媒体元素处触发一个事件， 其名称为 progress。

    将 networkState 设置为 NETWORK_IDLE， 并在该媒体元素处触发一个事件， 其名称为 suspend。

    如果用户代理曾丢弃任何媒体数据，之后又需要恢复网络活动以重新获取这些数据， 则必须以该媒体元素为参数将媒体元素任务入队， 以将 networkState 设置为 NETWORK_LOADING。

    如果用户代理可以使媒体资源保持已加载状态， 则算法将继续执行下方的最终步骤，该步骤会中止算法。

    如果在接收到一些媒体数据后连接中断， 导致用户代理放弃尝试获取资源

    在用户代理确定当前媒体资源是否可用之后（即一旦该媒体元素的 readyState 属性不再是 HAVE_NOTHING） 发生的致命网络错误，必须使用户代理执行以下步骤：

    1. 用户代理应取消获取过程。

    2. 将 error 属性设置为以下操作的结果：使用 MEDIA_ERR_NETWORK 创建一个 MediaError。

    3. 将元素的 networkState 属性设置为 NETWORK_IDLE 值。

    4. 将元素的延迟加载事件标志设置为 false。 这会停止延迟加载事件。

    5. 在该媒体元素处触发一个事件， 其名称为 error。

    6. 中止整个资源选择算法。

    如果媒体数据已损坏

    在用户代理确定当前媒体资源是否可用之后（即一旦该媒体元素的 readyState 属性不再是 HAVE_NOTHING） 发生的媒体数据解码致命错误， 必须使用户代理执行以下步骤：

    1. 用户代理应取消获取过程。

    2. 将 error 属性设置为以下操作的结果：使用 MEDIA_ERR_DECODE 创建一个 MediaError。

    3. 将元素的 networkState 属性设置为 NETWORK_IDLE 值。

    4. 将元素的延迟加载事件标志设置为 false。 这会停止延迟加载事件。

    5. 在该媒体元素处触发一个事件， 其名称为 error。

    6. 中止整个资源选择算法。

    如果媒体数据获取过程被用户中止

    如果获取过程被用户中止，例如因为用户按下了“停止”按钮， 用户代理必须执行以下步骤。如果在这些步骤运行期间调用了 load() 方法本身， 则不遵循这些步骤，因为上述步骤会处理这种特定类型的中止。

    1. 用户代理应取消获取过程。

    2. 将 error 属性设置为以下操作的结果：使用 MEDIA_ERR_ABORTED 创建一个 MediaError。

    3. 在该媒体元素处触发一个事件， 其名称为 abort。

    4. 如果该媒体元素的 readyState 属性的值等于 HAVE_NOTHING， 则将元素的 networkState 属性设置为 NETWORK_EMPTY 值，将元素的显示海报标志设置为 true， 并在该元素处触发一个事件， 其名称为 emptied。

      否则，将元素的 networkState 属性设置为 NETWORK_IDLE 值。

    5. 将元素的延迟加载事件标志设置为 false。 这会停止延迟加载事件。

    6. 中止整个资源选择算法。

    如果可以获取媒体数据，但其中包含非致命错误， 或者部分使用不受支持的编解码器，从而阻止用户代理完全正确地渲染内容，但并未完全阻止播放

    服务器返回的数据部分可用但无法以最佳方式渲染时，必须使用户代理仅渲染其能够处理的部分， 并忽略其余部分。

    如果发现媒体资源声明了用户代理支持的媒体资源专用文本轨道

    如果媒体数据是CORS 同源的， 则使用相关数据运行暴露媒体资源专用文本轨道的步骤。

    跨源视频不会暴露其字幕，因为这样做会允许恶意网站读取用户内联网中机密视频的字幕等攻击。

  7. 最终步骤：如果用户代理曾到达此步骤（这只有在整个资源都已加载并保持可用时才可能发生）： 中止整个资源选择算法。

当媒体元素要 忘记媒体元素的媒体资源专用轨道时， 用户代理必须从该媒体元素的文本轨道列表中移除所有媒体资源专用文本轨道， 然后清空该媒体元素的 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 属性 给出了什么提示，它自然都必须先缓冲）。但是，同时包含这两个属性并不是错误。

在 audio 和 video 元素中， 如果脚本已启用，则 loading 属性 可以推迟 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 对象，该对象表示用户代理已经缓冲的 this 的媒体资源范围（如果有）。 即使对于只能通过繁琐检查才能确定可用范围的媒体流，用户代理也必须准确确定这些范围。

通常，这将是一个锚定在零点的单一范围；但例如，如果用户代理为了响应定位而使用 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 推送格式（包含 JPEG 帧的 multipart/x-mixed-replace， 通常用作 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 秒开始并延伸至 3,600 秒（一小时）的媒体时间线公开该内容。 假设流式传输服务器在第二个剪辑结束时断开连接，则 duration 属性随后将返回 3,600。getStartDate() 方法将返回一个时间对应于 2010-03-20 23:15:00 UTC 的 Date 对象。但是，如果另一个用户代理在五分钟后连接，它将（大概）接收到时间戳范围分别为 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 秒开始、延伸至 3,300 秒（五十五分钟）的媒体时间线公开该内容。 在这种情况下，getStartDate() 方法将返回一个时间对应于 2010-03-20 23:20:00 UTC 的 Date 对象。

在这两个示例中，seekable 属性都会提供控制器实际希望在其 UI 中显示的范围；通常，如果服务器不支持定位到任意时间， 这将是从用户代理连接到流的时刻起，到用户代理已获取的最新帧为止的时间范围； 但是，如果用户代理开始丢弃较早的信息，则实际范围可能更短。

无论如何，用户代理必须确保使用所建立的媒体时间线计算出的最早可能位置（定义见下文） 大于或等于零。

媒体时间线还具有一个 关联时钟。使用哪个时钟由用户代理定义，并且可能取决于媒体资源，但该时钟应近似于用户的挂钟时间。

媒体元素具有一个 当前播放位置，其初始值（即没有媒体数据时）必须为零秒。当前播放位置 是媒体时间线上的一个时间。

媒体元素还具有一个 正式播放位置，其初始值必须设置为零秒。正式播放位置是当前播放位置的近似值， 并在脚本运行期间保持稳定。

媒体元素还具有一个 默认播放起始位置，其初始值必须设置为零秒。 此时间用于允许在媒体加载之前定位元素。

每个媒体元素都有一个 显示海报标志。创建媒体元素时，必须将此标志设置为 true。 此标志用于控制用户代理何时应为 video 元素 显示海报帧，而不是显示视频内容。

currentTime 属性在获取时，必须返回媒体元素的默认播放起始位置， 除非该值为零，在这种情况下必须返回元素的正式播放位置。 返回值必须以秒表示。设置时，如果媒体元素的 readyState 为 HAVE_NOTHING， 则必须将媒体元素的默认播放起始位置设置为新值； 否则，必须将正式播放位置设置为新值， 然后定位到新值。 新值必须解释为以秒为单位。

如果媒体资源是流式资源， 则某些资源部分从用户代理的缓冲区过期之后，用户代理可能无法再次获取这些部分。类似地，某些媒体资源可能具有一条 不从零开始的媒体时间线。最早可能位置是流或资源中用户代理能够再次获取的最早位置。 它也是媒体时间线上的一个时间。

最早可能位置不会在 API 中显式公开； 如果 seekable 属性的 TimeRanges 对象具有范围，则它对应于第一个范围的开始时间；否则对应于当前播放位置。

当最早可能位置发生变化时： 如果当前播放位置位于最早可能位置之前， 则用户代理必须定位到最早可能位置； 否则，如果用户代理在过去 15 至 250ms 内尚未在该元素处触发 timeupdate 事件，并且当前也未在运行此类事件的事件处理程序，则用户代理必须以该媒体元素为参数将媒体元素任务入队， 以在该元素处触发一个事件， 其名称为 timeupdate。

由于上述要求，以及资源获取算法中在剪辑的元数据变为已知时生效的要求，当前播放位置绝不可能小于最早可能位置。

如果用户代理在任何时候获知某条音频或视频轨道已经结束，并且与该轨道相关的所有媒体数据都对应于媒体时间线中位于最早可能位置之前的部分， 则用户代理可以以该媒体元素为参数将媒体元素任务入队， 以运行以下步骤：

  1. 根据需要，从 audioTracks 属性的 AudioTrackList 对象，或 videoTracks 属性的 VideoTrackList 对象中移除该轨道。

  2. 在该媒体元素的 上述 AudioTrackList 或 VideoTrackList 对象处触发一个事件， 其名称为 removetrack； 使用 TrackEvent， 并将 track 属性初始化为表示该轨道的 AudioTrack 或 VideoTrack 对象。

duration 属性必须返回媒体时间线上媒体资源结束时的时间， 以秒为单位。如果没有可用的媒体数据，则该属性必须返回非数值 (NaN)。 如果尚不确定媒体资源是否有界 （例如流式广播或没有公布结束时间的直播事件），则该属性必须返回正无穷大。

用户代理必须在播放媒体数据的任何部分之前，以及将 readyState 设置为大于或等于 HAVE_METADATA 的值之前，确定媒体资源的时长， 即使这样做需要获取资源的多个部分。

当媒体资源的长度变为某个已知值时 （例如从未知变为已知，或从先前确定的长度变为新的长度），用户代理必须以该媒体元素为参数将媒体元素任务入队， 以在该媒体元素处触发一个事件， 其名称为 durationchange。 （当时长在加载新媒体资源的过程中重置时，不会触发该事件。）如果时长发生变化，导致当前播放位置最终大于媒体资源结束时的时间， 则用户代理还必须定位到媒体资源结束时的时间。

如果一个“无限”流由于某种原因结束，则时长将从正无穷大变为流中最后一帧或样本的时间， 并将触发 durationchange 事件。类似地，如果用户代理最初估算了媒体资源的时长，而不是精确确定它， 并在之后根据新信息修正该估算，则时长将发生变化，并将触发 durationchange 事件。

某些视频文件还具有与媒体时间线中的零时间相对应的明确日期和时间， 称为时间线偏移。最初，时间线偏移必须设置为非数值 (NaN)。

getStartDate() 方法必须返回一个新的 Date 对象，表示当前的时间线偏移。

loop 属性是一个布尔属性；如果指定了该属性， 则表示媒体元素在到达媒体资源末尾时， 应定位回资源开头。

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）

已获取足够的资源数据，因此资源的时长可用。对于 video 元素， 视频的尺寸也可用。没有可用于紧接着的当前播放位置的媒体数据。

HAVE_CURRENT_DATA（数值 2）

紧接着的当前播放位置的数据可用， 但要么没有足够的数据供用户代理沿播放方向哪怕稍微推进当前播放位置而不立即恢复到 HAVE_METADATA 状态， 要么沿播放方向已没有更多数据可获取。 例如，在视频中，这对应于当前播放位置位于当前帧末尾时，用户代理具有当前帧的数据但没有下一帧的数据； 也对应于播放已经结束的情况。

HAVE_FUTURE_DATA（数值 3）

紧接着的当前播放位置的数据可用， 并且具有足够的数据供用户代理沿播放方向至少稍微推进当前播放位置，而不会立即恢复到 HAVE_METADATA 状态， 并且文本轨道已就绪。 例如，在视频中，这对应于当前播放位置处于两帧之间的瞬间时，用户代理至少拥有当前帧和下一帧的数据； 或者当前播放位置位于一帧中间时，用户代理拥有当前帧的视频数据，以及足以继续播放一小段时间的音频数据。 如果播放已经结束， 用户代理不能处于此状态，因为在这种情况下当前播放位置绝不可能继续推进。

HAVE_ENOUGH_DATA（数值 4）

满足针对 HAVE_FUTURE_DATA 状态描述的所有条件，并且还满足以下任一条件：

实际上，HAVE_METADATA 与 HAVE_CURRENT_DATA 之间的区别可以忽略不计。真正相关的唯一情况是在将 video 元素绘制到 canvas 上时； 它用于区分会绘制某些内容的情况（HAVE_CURRENT_DATA 或更高）和不会绘制任何内容的情况（HAVE_METADATA 或更低）。类似地，HAVE_CURRENT_DATA （仅当前帧）与 HAVE_FUTURE_DATA （至少当前帧和下一帧）之间的区别也可以忽略不计（在极端情况下，仅相差一帧）。 这种区别真正重要的唯一情况，是页面提供“逐帧”导航界面时。

当 networkState 不为 NETWORK_EMPTY 的媒体元素的就绪状态发生变化时， 用户代理必须遵循以下步骤：

  1. 应用以下列表中第一个适用的子步骤集：

    如果先前的就绪状态为 HAVE_NOTHING， 而新的就绪状态为 HAVE_METADATA

    以该媒体元素为参数将媒体元素任务入队， 以在该元素处触发一个事件， 其名称为 loadedmetadata。

    在此任务运行之前，作为事件循环机制的一部分，渲染将已经更新， 以在适当时调整 video 元素的大小。

    如果先前的就绪状态为 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. 为该元素通知正在播放。

    或者，如果元素是一个 video 元素， 用户代理可以开始观察该元素是否与视口相交。 当该元素开始与视口相交时， 如果该元素仍然符合自动播放条件，则运行上述子步骤。 可选地，当该元素停止与视口相交时， 如果可自动播放标志仍为 true， 并且仍指定了 autoplay 属性， 则运行以下子步骤：

    1. 运行内部暂停步骤，并将可自动播放标志设置为 true。
    2. 以该元素为参数将媒体元素任务入队， 以在该元素处触发一个事件， 其名称为 pause。

    只要可自动播放标志为 true， 播放和暂停子步骤就可以随着元素开始或停止与视口相交而运行多次。

    用户代理不需要支持自动播放，并建议用户代理尊重用户在此方面的偏好。 建议作者使用 autoplay 属性， 而不是使用脚本强制播放视频，以便用户可以根据需要覆盖该行为。

媒体元素的就绪状态可能在这些状态之间不连续地跳转。 例如，媒体元素的状态可以直接从 HAVE_METADATA 跳转到 HAVE_ENOUGH_DATA， 而不经过 HAVE_CURRENT_DATA 和 HAVE_FUTURE_DATA 状态。

readyState IDL 属性在获取时， 必须返回上述用于描述媒体元素当前就绪状态的值。

autoplay 属性是一个布尔属性。 如果存在该属性，用户代理（按照此处描述的算法）将在无需停止即可播放时， 自动开始播放媒体资源。

建议作者使用 autoplay 属性，而不是使用脚本触发自动播放，因为这样可以允许用户在不希望自动播放时覆盖该行为， 例如在使用屏幕阅读器时。还鼓励作者考虑完全不使用自动播放行为， 而是让用户代理等待用户明确开始播放。

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， 该元素尚未结束播放， 播放尚未因错误而停止， 并且该元素不是被阻塞的媒体元素时， 称该元素可能正在播放。

当一个可能正在播放的元素因其 readyState 属性变为低于 HAVE_FUTURE_DATA 的值而停止播放时，可能会触发一个 waiting DOM 事件。

当以下所有条件均为 true 时，称媒体元素 符合自动播放条件：

如果用户代理和系统允许在当前上下文中播放媒体，则称媒体元素 被允许播放。

例如，用户代理可以仅在媒体元素的 Window 对象具有瞬态激活时才允许播放， 但可以为静音播放设立例外。

当以下条件成立时，称媒体元素已经 结束播放：

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 文件中的音频描述， 并且为某个提示生成的合成语音长于文本轨道提示开始时间与文本轨道提示结束时间之间的时长时， 媒体元素就会因带内内容而暂停。

当播放方向为向前， 且当前播放位置到达媒体资源末尾时， 用户代理必须遵循以下步骤：

  1. 如果媒体元素指定了 loop 属性， 则定位到媒体资源的最早可能位置，然后返回。

  2. 如上文定义，一旦事件循环返回步骤 1， ended IDL 属性 就开始返回 true。

  3. 以该媒体元素和以下步骤为参数将媒体元素任务入队：

    1. 在该媒体元素处触发一个事件， 其名称为 timeupdate。

    2. 如果媒体元素已结束播放，播放方向为向前， 并且 paused 为 false：

      1. 将 paused 属性设置为 true。

      2. 在该媒体元素处触发一个事件， 其名称为 pause。

      3. 取出待处理播放 promise， 并使用该结果和一个 "AbortError" DOMException 来拒绝待处理播放 promise。

    3. 在该媒体元素处触发一个事件， 其名称为 ended。

当播放方向为向后， 且当前播放位置到达媒体资源的最早可能位置时， 用户代理只能以该媒体元素为参数将媒体元素任务入队， 以在该元素处触发一个事件， 其名称为 timeupdate。

此处的“到达”一词并不意味着当前播放位置必须在正常播放期间发生变化； 例如，它也可能通过定位而到达。

defaultPlaybackRate 属性给出媒体资源所需的播放速度， 表示为其固有速度的倍数。该属性是可变的：获取时，必须返回上次设置的值； 如果尚未设置，则返回 1.0；设置时，必须将该属性设置为新值。

用户代理在向用户公开用户界面时， 会使用 defaultPlaybackRate。

playbackRate 属性给出有效播放速率， 即媒体资源的播放速度， 表示为其固有速度的倍数。如果该值不等于 defaultPlaybackRate， 则意味着用户正在使用快进或慢动作播放等功能。该属性是可变的： 获取时，必须返回上次设置的值；如果尚未设置，则返回 1.0； 设置时，用户代理必须遵循以下步骤：

  1. 如果用户代理不支持给定值，则抛出一个 "NotSupportedError" DOMException。

  2. 将 playbackRate 设置为新值；如果元素可能正在播放，则更改播放速度。

当 defaultPlaybackRate 或 playbackRate 属性的值发生变化时（无论是由脚本设置，还是由用户代理直接更改，例如响应用户控件）， 用户代理必须以该媒体元素为参数将媒体元素任务入队， 以在该媒体元素处触发一个事件， 其名称为 ratechange。 用户代理必须平滑地处理属性变化，并且不得因此引入任何可感知的播放间隙或静音。

preservesPitch 获取器步骤为： 如果播放期间正在使用保持音高的算法，则返回 true。设置器步骤为相应地启用或禁用保持音高的算法， 且不得引入任何可感知的播放间隙或静音。默认情况下，必须使用这种保持音高的算法 （即获取器最初将返回 true）。

played 获取器步骤为返回一个新的规范化的 TimeRanges 对象，该对象表示在正常播放期间，通过 this 的当前播放位置通常的单调递增， 到达的 this 的媒体资源的媒体时间线上的位置范围（如果有）。

每次都返回新对象对于属性获取器而言是一种不良模式， 这里只是因为更改这一行为的成本很高而将其保留下来。新的 API 不应复制这种模式。

每个媒体元素都有一个 待处理播放 promise 列表，其初始值必须为空。

要为一个媒体元素 取出待处理播放 promise， 用户代理必须运行以下步骤：

  1. 令 promises 为一个空的 promise 列表。

  2. 将该媒体元素的待处理播放 promise 列表 复制到 promises。

  3. 清空该媒体元素的待处理播放 promise 列表。

  4. 返回 promises。

要使用 promise 列表 promises 为一个媒体元素 兑现待处理播放 promise， 用户代理必须使用 undefined 兑现 promises 中的每个 promise。

要使用 promise 列表 promises 和异常名称 error 为一个媒体元素 拒绝待处理播放 promise， 用户代理必须使用 error 拒绝 promises 中的每个 promise。

要为一个媒体元素 通知正在播放，用户代理必须运行以下步骤：

  1. 取出待处理播放 promise， 并令 promises 为结果。

  2. 以该元素和以下步骤为参数将媒体元素任务入队：

    1. 在该元素处触发一个事件， 其名称为 playing。

    2. 使用 promises兑现待处理播放 promise。

当调用媒体元素上的 play() 方法时，用户代理必须运行以下步骤：

  1. 如果该媒体元素未被允许播放， 则返回一个使用 "NotAllowedError" DOMException 拒绝的 promise。

  2. 如果该媒体元素的 error 属性 不为 null，并且其代码为 MEDIA_ERR_SRC_NOT_SUPPORTED， 则返回一个使用 "NotSupportedError" DOMException 拒绝的 promise。

    这意味着专用媒体源失败步骤已经运行。 在媒体元素加载算法清除 error 属性之前， 无法播放。

  3. 令 resumptionSteps 为该媒体元素的延迟加载恢复步骤。

  4. 如果 resumptionSteps 不为 null：

    1. 将该媒体元素的延迟加载恢复步骤设置为 null。

    2. 调用 resumptionSteps。

  5. 令 promise 为一个新的 promise，并将 promise 追加到待处理播放 promise 列表。

  6. 为该媒体元素运行内部播放步骤。

  7. 返回 promise。

一个媒体元素的 内部播放步骤如下：

  1. 如果该媒体元素的 networkState 属性值为 NETWORK_EMPTY， 则调用该媒体元素的资源选择算法。

  2. 如果播放已经结束，并且播放方向为向前， 则定位到媒体资源的最早可能位置。

    这将导致用户代理以该媒体元素为参数将媒体元素任务入队， 以在该媒体元素处触发一个事件， 其名称为 timeupdate。

  3. 如果该媒体元素的 paused 属性 为 true：

    1. 将 paused 的值更改为 false。

    2. 如果显示海报标志为 true， 则将元素的显示海报标志设置为 false， 并运行时间继续推进步骤。

    3. 以该媒体元素为参数将媒体元素任务入队， 以在该元素处触发一个事件， 其名称为 play。

    4. 如果该媒体元素的 readyState 属性值为 HAVE_NOTHING、 HAVE_METADATA 或 HAVE_CURRENT_DATA， 则以该媒体元素为参数将媒体元素任务入队， 以在该元素处触发一个事件， 其名称为 waiting。

      否则，该媒体元素的 readyState 属性值为 HAVE_FUTURE_DATA 或 HAVE_ENOUGH_DATA： 为该元素通知正在播放。

  4. 否则，如果该媒体元素的 readyState 属性值为 HAVE_FUTURE_DATA 或 HAVE_ENOUGH_DATA， 则取出待处理播放 promise， 并以该媒体元素为参数将媒体元素任务入队， 以使用结果兑现待处理播放 promise。

    媒体元素已经在播放。但是，promise 仍可能在入队任务运行之前被拒绝。

  5. 将该媒体元素的可自动播放标志设置为 false。

当调用 pause() 方法时，以及当要求用户代理暂停媒体元素时， 用户代理必须运行以下步骤：

  1. 如果该媒体元素的 networkState 属性值为 NETWORK_EMPTY， 则调用该媒体元素的资源选择算法。

  2. 为该媒体元素运行内部暂停步骤。

一个媒体元素的 内部暂停步骤如下：

  1. 将该媒体元素的可自动播放标志设置为 false。

  2. 如果该媒体元素的 paused 属性 为 false，则运行以下步骤：

    1. 将 paused 的值更改为 true。

    2. 取出待处理播放 promise， 并令 promises 为结果。

    3. 以该媒体元素和以下步骤为参数将媒体元素任务入队：

      1. 在该元素处触发一个事件， 其名称为 timeupdate。

      2. 在该元素处触发一个事件， 其名称为 pause。

      3. 使用 promises 和一个 "AbortError" DOMException 来拒绝待处理播放 promise。

    4. 将正式播放位置设置为当前播放位置。

如果元素的 playbackRate 为正数或零，则播放方向为向前。否则为向后。

当一个媒体元素可能正在播放， 且其 Document 是一个完全活动的 Document 时， 其当前播放位置必须按照元素的 playbackRate 个媒体时间单位每媒体时间线时钟单位时间的速率单调增加。 （本规范始终将此称为增加，但如果元素的 playbackRate 为负数，这种增加实际上可能是减少。）

元素的 playbackRate 可以为 0.0；在这种情况下，尽管播放并未暂停，当前播放位置也不会移动 （paused 不会变为 true，并且不会触发 pause 事件）。

本规范不定义用户代理如何实现适当的播放速率——根据可用的协议和媒体， 用户代理可能会与服务器协商，让服务器以适当的速率提供媒体数据， 从而使客户端实际上不需要丢弃或插值任何帧 （速率发生变化到服务器更新流的播放速率之间的时间段除外）。

每当用户代理提供稳定状态时， 必须将正式播放位置设置为当前播放位置。

如果元素的 playbackRate 不为 1.0，并且 preservesPitch 为 true，则用户代理必须应用音高调整，以保持音频的原始音高。 否则，用户代理必须在不进行任何音高调整的情况下加快或减慢音频。

当一个媒体元素可能正在播放时， 其播放的音频数据必须与当前播放位置同步， 并以元素的有效媒体音量播放。 用户代理必须播放在事件循环上一次到达步骤 1时已启用的音频轨道中的音频。

当一个媒体元素不可能正在播放时， 不得为该元素播放音频。

不在文档中但可能正在播放的媒体元素不得播放任何视频， 但应播放任何音频组件。媒体元素不得仅仅因为所有对它的引用都已被移除而停止播放； 只有当媒体元素处于一种再也不可能播放任何音频的状态时，才可以对其进行垃圾回收。

不存在任何显式引用的元素仍可能播放音频，即使该元素当前不再主动播放： 例如，它可能未暂停但由于等待内容缓冲而停滞，或者它可能仍在缓冲， 但具有一个会开始播放的 suspend 事件监听器。即使一个媒体元素的媒体资源不包含任何音频轨道， 如果它具有会更改媒体资源的事件监听器， 它最终仍可能再次播放音频。

每个媒体元素都有一个 新引入提示列表，其初始值必须为空。 每当一个文本轨道提示被添加到某个文本轨道的提示列表中， 并且该文本轨道位于某个媒体元素的文本轨道列表中时， 必须将该提示添加到该媒体元素的新引入提示列表中。 每当一个文本轨道被添加到某个媒体元素的文本轨道列表中时， 必须将该文本轨道的提示列表中的所有提示添加到该媒体元素的新引入提示列表中。 当一个媒体元素的新引入提示列表中添加了新提示， 且该媒体元素的显示海报标志未设置时， 用户代理必须运行时间继续推进步骤。

当一个文本轨道提示从某个文本轨道的提示列表中移除， 并且该文本轨道位于某个媒体元素的文本轨道列表中时， 以及每当一个文本轨道从某个媒体元素的文本轨道列表中移除时， 如果该媒体元素的显示海报标志未设置， 则用户代理必须运行时间继续推进步骤。

当媒体元素的当前播放位置发生变化时 （例如由于播放或定位），用户代理必须运行时间继续推进步骤。 为支持依赖提示事件触发时间准确性的使用场景，例如将字幕与视频中的镜头切换同步， 用户代理应尽可能接近提示在媒体时间线上的位置触发提示事件，理想情况下应在 20 毫秒以内。 如果当前播放位置在这些步骤运行期间发生变化， 则用户代理必须等待这些步骤完成，然后立即重新运行这些步骤。 因此，这些步骤应尽可能频繁地运行，或按需要运行。

如果某次迭代耗时很长，则用户代理为了“赶上”进度而向前推进时， 可能会跳过持续时间很短的提示， 因此这些提示不会出现在 activeCues 列表中。

时间继续推进步骤如下：

  1. 令 current cues 为一个提示列表， 初始化为包含该媒体元素所有隐藏或显示的文本轨道 （不包括禁用的文本轨道）中的所有提示； 这些提示的开始时间小于或等于当前播放位置， 并且其结束时间大于当前播放位置。

  2. 令 other cues 为一个提示列表， 初始化为包含该媒体元素所有隐藏和显示的文本轨道中， 不存在于 current cues 中的所有提示。

  3. 如果这不是该算法第一次为此媒体元素运行， 则令 last time 为该算法上一次运行时的当前播放位置。

  4. 如果自该算法上一次运行以来，当前播放位置仅通过正常播放期间 通常的单调递增而发生变化，则令 missed cues 为 other cues 中这样的提示列表： 其开始时间大于或等于 last time，并且其结束时间小于或等于当前播放位置。 否则，令 missed cues 为空列表。

  5. 从 missed cues 中移除同时存在于该媒体元素的新引入提示列表中的所有提示， 然后清空该元素的新引入提示列表。

  6. 如果该时间是通过正常播放期间当前播放位置通常的单调递增而到达的， 并且用户代理在过去 15 至 250ms 内尚未在该元素处触发 timeupdate 事件，并且当前也未在运行此类事件的事件处理程序， 则用户代理必须以该媒体元素为参数将媒体元素任务入队， 以在该元素处触发一个事件， 其名称为 timeupdate。 （在其他情况下，例如显式定位，相关事件会作为更改当前播放位置的整个过程的一部分触发。）

    因此，该事件的触发频率不应快于约 66Hz，也不应慢于 4Hz （假设事件处理程序的运行时间不超过 250ms）。鼓励用户代理根据系统负载和每次处理事件的平均成本 调整事件频率，使 UI 更新频率不会超过用户代理在解码视频时能够轻松处理的程度。

  7. 如果 current cues 中的所有提示均已设置其文本轨道提示活动标志， other cues 中没有任何提示设置其文本轨道提示活动标志， 并且 missed cues 为空，则返回。

  8. 如果该时间是通过正常播放期间当前播放位置通常的单调递增而到达的， 并且 other cues 中存在这样的提示： 其文本轨道提示退出时暂停标志已设置， 并且其文本轨道提示活动标志已设置， 或者它也存在于 missed cues 中，则立即暂停该媒体元素。

    在其他情况下，例如显式定位，即使某个提示设置了文本轨道提示退出时暂停标志， 播放也不会因为越过该提示的结束时间而暂停。

  9. 令 events 为一个初始为空的任务列表。 此列表中的每个任务都将与一个文本轨道、 一个文本轨道提示和一个时间相关联， 在这些任务入队之前， 将使用这些信息对列表进行排序。

    令 affected tracks 为一个初始为空的文本轨道列表。

    当下方步骤要求为一个文本轨道提示 target 和时间 time 准备一个事件 event 时， 用户代理必须运行以下步骤：

    1. 令 track 为与文本轨道提示 target 相关联的文本轨道。

    2. 创建一个任务， 以在 target 处触发一个事件， 其名称为 event。

    3. 将新创建的任务添加到 events， 并将其与时间 time、文本轨道 track 和文本轨道提示 target 相关联。

    4. 将 track 添加到 affected tracks。

  10. 对于 missed cues 中的每个文本轨道提示， 使用文本轨道提示开始时间， 为该 TextTrackCue 对象准备一个事件， 其名称为 enter。

  11. 对于 other cues 中每个已设置其文本轨道提示活动标志， 或存在于 missed cues 中的文本轨道提示， 使用文本轨道提示结束时间与文本轨道提示开始时间中较晚的时间， 为该 TextTrackCue 对象准备一个事件， 其名称为 exit。

  12. 对于 current cues 中每个尚未设置其文本轨道提示活动标志的文本轨道提示， 使用文本轨道提示开始时间， 为该 TextTrackCue 对象准备一个事件， 其名称为 enter。

  13. 按照时间升序排列 events 中的任务 （时间较早的任务在前）。

    对于 events 中时间相同的任务， 再按照与这些任务相关联的文本轨道提示的相对文本轨道提示顺序进行排序。

    最后，对于 events 中时间和文本轨道提示顺序均相同的任务， 将触发 enter 事件的任务排在触发 exit 事件的任务之前。

  14. 按照列表顺序，对于 events 中的每个任务， 以该媒体元素为参数将媒体元素任务入队。

  15. 按照文本轨道在该媒体元素的文本轨道列表中的顺序， 对 affected tracks 进行排序，并移除重复项。

  16. 按照列表顺序，对于 affected tracks 中的每个文本轨道， 以该媒体元素为参数将媒体元素任务入队， 以在该 TextTrack 对象处触发一个事件， 其名称为 cuechange； 如果该文本轨道具有对应的 track 元素， 则随后还要在该 track 元素处触发一个事件， 其名称同样为 cuechange。

  17. 设置 current cues 中所有提示的文本轨道提示活动标志， 并取消设置 other cues 中所有提示的文本轨道提示活动标志。

  18. 对于 affected tracks 中每个处于显示状态的文本轨道， 运行其更新文本轨道渲染的规则； 如果该文本轨道的文本轨道语言不是空字符串， 则将其作为后备语言。例如，对于基于 WebVTT 的文本轨道， 使用更新 WebVTT 文本轨道显示的规则。 [WEBVTT]

就上述算法而言，只有当一个文本轨道提示列在文本轨道提示列表中时， 才被视为某个文本轨道的一部分； 仅仅与该文本轨道相关联并不足够。

如果媒体元素的节点文档不再是一个完全活动的文档， 则播放将停止，直到该文档再次变为活动状态。

当一个媒体元素从 Document 中移除时，用户代理必须运行以下步骤：

  1. 等待稳定状态， 允许将该媒体元素从 Document 中移除的任务继续运行。 同步段由此算法剩余的所有步骤组成。 （同步段中的步骤以 ⌛ 标记。）

  2. ⌛ 如果该媒体元素在文档中，则返回。

  3. ⌛ 为该媒体元素运行内部暂停步骤。

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 给出的时间。

当要求用户代理在媒体资源中 定位到特定的新播放位置时， 可以选择设置为速度近似标志，这意味着用户代理必须运行以下步骤。 此算法与事件循环机制密切交互； 特别是，它包含一个同步段（作为事件循环算法的一部分触发）。该段中的步骤以 ⌛ 标记。

  1. 将媒体元素的显示海报标志设置为 false。

  2. 如果媒体元素的 readyState 为 HAVE_NOTHING， 则返回。

  3. 如果元素的 seeking IDL 属性为 true，则此算法的另一个实例已经在运行。中止该算法的另一个实例， 无需等待其当前正在运行的步骤完成。

  4. 将 seeking IDL 属性 设置为 true。

  5. 如果定位是为了响应 DOM 方法调用或 IDL 属性设置，则继续执行脚本。 这些步骤的其余部分必须并行运行。除标有 ⌛ 的步骤外， 它们随时可能因调用此算法的另一个实例而中止。

  6. 如果新播放位置晚于媒体资源的末尾，则改为令其等于媒体资源的末尾。

  7. 如果新播放位置小于最早可能位置，则改为令其等于该位置。

  8. 如果（现在可能已更改的）新播放位置不在 seekable 属性给出的任一范围中， 则令其等于 seekable 属性给出的范围中 最接近新播放位置的位置。如果有两个位置都满足此约束 （即新播放位置恰好处于 seekable 属性中的两个范围 之间的正中位置），则使用最接近当前播放位置的位置。如果 seekable 属性未给出任何范围， 则将 seeking IDL 属性 设置为 false，然后返回。

  9. 如果设置了为速度近似标志，则将新播放位置调整为能够让播放及时恢复的值。 如果此步骤之前的新播放位置位于当前播放位置之前， 则调整后的新播放位置也必须位于当前播放位置之前。类似地， 如果此步骤之前的新播放位置位于当前播放位置之后， 则调整后的新播放位置也必须位于当前播放位置之后。

    例如，用户代理可以对齐到附近的关键帧， 从而无需在恢复播放之前花费时间解码并丢弃中间帧。

  10. 以该媒体元素为参数将媒体元素任务入队， 以在该元素处触发一个事件， 其名称为 seeking。

  11. 将当前播放位置设置为新播放位置。

    如果媒体元素在开始定位之前 可能正在播放， 但定位导致其 readyState 属性 变为低于 HAVE_FUTURE_DATA 的值，则会在该元素处触发一个 waiting 事件。

    此步骤设置当前播放位置，因此可以立即触发其他条件， 例如关于播放何时“到达媒体资源末尾”的规则 （处理循环逻辑的一部分），甚至在用户代理实际能够渲染该位置的媒体数据之前 （这将在下一步中确定）。

    currentTime 属性返回 正式播放位置， 而不是当前播放位置， 因此它会在脚本执行之前更新，并且与此算法分开。

  12. 等待用户代理确定新播放位置处的媒体数据是否可用；如果可用， 则继续等待，直到其解码了足够的数据以播放该位置。

  13. 等待稳定状态。 同步段由此算法剩余的所有步骤组成。 （同步段中的步骤以 ⌛ 标记。）

  14. ⌛ 将 seeking IDL 属性设置为 false。

  15. ⌛ 运行时间继续推进步骤。

  16. ⌛ 以该媒体元素为参数将媒体元素任务入队， 以在该元素处触发一个事件， 其名称为 timeupdate。

  17. ⌛ 以该媒体元素为参数将媒体元素任务入队， 以在该元素处触发一个事件， 其名称为 seeked。

seekable 获取器步骤为返回一个新的规范化的 TimeRanges 对象，该对象表示用户代理能够定位到的 this 的媒体资源范围（如果有）。

如果用户代理能够定位到媒体资源中的任何位置，例如因为它是一个简单的电影文件， 并且用户代理和服务器支持 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（旧版）否Internet 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（旧版）否Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回一个 VideoTrackList 对象，表示媒体资源中可用的视频轨道。

媒体元素的 audioTracks 属性必须返回一个实时 AudioTrackList 对象，表示该媒体元素的媒体资源中可用的音频轨道。

媒体元素的 videoTracks 属性必须返回一个实时 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。如果格式支持媒体片段语法， 则这是可以与片段一起使用的 ID， 也可以与 getTrackById() 方法一起使用。

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 对象不表示任何轨道，则它没有支持的属性索引。

要为 AudioTrackList 或 VideoTrackList 对象 list 中的给定索引 index确定索引属性的值， 用户代理必须返回表示 list 中第 index 条轨道的 AudioTrack 或 VideoTrack 对象。

AudioTrackList 的 getTrackById(id) 方法和 VideoTrackList 的 getTrackById(id) 方法， 必须分别返回相应 AudioTrackList 或 VideoTrackList 对象中标识符等于 id 参数值的第一个 AudioTrack 或 VideoTrack 对象（按照上文定义的列表自然顺序）。如果没有轨道与给定参数匹配，则方法必须返回 null。

AudioTrack 和 VideoTrack 对象表示媒体资源的特定轨道。 每条轨道都可以具有标识符、类别、标签和语言。在轨道的整个生命周期内， 轨道的这些方面都是永久不变的；即使从媒体资源的 AudioTrackList 或 VideoTrackList 对象中移除某条轨道，这些方面也不会改变。

此外，每个 AudioTrack 对象 都可以被启用或禁用；这称为音频轨道的启用状态。创建 AudioTrack 时， 必须将其启用状态设置为 false（已禁用）。资源获取算法可以覆盖此设置。

类似地，每个 VideoTrackList 对象中可以选中一个 VideoTrack 对象； 这称为视频轨道的选择状态。创建 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 中一条先前已禁用的音频轨道被启用时，以及一条先前已启用的音频轨道被禁用时， 用户代理必须以该媒体元素为参数将媒体元素任务入队， 以在该 AudioTrackList 对象处触发一个事件， 其名称为 change。

对于媒体时间线上的特定位置， 如果音频轨道没有数据，或者在该位置不存在，则必须将其解释为在时间线上的该位置静音。

VideoTrackList 的 selectedIndex 属性必须返回当前选中轨道的索引（如果有）。 如果 VideoTrackList 对象当前不表示任何轨道，或者没有选中任何轨道，则必须改为返回 −1。

VideoTrack 的 selected 属性在获取时， 如果轨道当前已选中，则必须返回 true；否则返回 false。设置时，如果新值为 true， 则必须选中轨道；否则取消选中。如果轨道位于一个 VideoTrackList 中，则必须取消选中该列表中的所有其他 VideoTrack 对象。（如果轨道已不再位于 VideoTrackList 对象中，则选中或取消选中轨道除了更改 VideoTrack 对象上该属性的值之外，不会产生任何影响。）

每当 VideoTrackList 中一条先前未选中的轨道被选中时，以及 VideoTrackList 中已选中的轨道被取消选中、且没有新轨道取代它被选中时， 用户代理必须以该媒体元素为参数将媒体元素任务入队， 以在该 VideoTrackList 对象处触发一个事件， 其名称为 change。 如果存在触发 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+Safari7+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 Explorer否
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 文本轨道模型

一个媒体元素可以具有一组关联的 文本轨道，称为该媒体元素的文本轨道列表。这些文本轨道按以下方式排序：

  1. 与作为媒体元素子元素的 track 元素相对应的文本轨道，按树顺序排列。

  2. 使用 addTextTrack() 方法添加的所有文本轨道， 按添加顺序排列，最早添加的在前。

  3. 所有媒体资源专用文本轨道 （与媒体资源中的数据相对应的 文本轨道）， 按媒体资源格式规范所定义的顺序排列。

一个文本轨道是一个 TextTrack 对象，并由以下部分组成：

文本轨道种类

这决定用户代理如何处理该轨道。种类由字符串表示。可能的字符串为：

对于与 track 元素相对应的 文本轨道， 其轨道种类可以动态变化。

标签

这是一个用于向用户标识轨道的人类可读字符串。

对于与 track 元素相对应的 文本轨道， 其轨道标签可以动态变化。

当文本轨道标签为空字符串时， 用户代理应根据文本轨道的其他属性（例如文本轨道种类和文本轨道语言）， 自动生成适合在其用户界面中使用的标签。这个自动生成的标签不会在 API 中公开。

带内元数据轨道分派类型

这是一个专门为带内元数据轨道从媒体资源中提取的字符串， 用于使这类轨道能够分派给文档中的不同脚本。

例如，通过 Web 串流并增加了 Web 专用交互功能的传统电视台广播， 可以包含带有广告定向元数据、游戏节目期间的知识问答游戏数据、体育比赛期间的选手状态、 美食节目期间的食谱信息等内容的文本轨道。随着各个节目开始和结束， 可能会向流中添加新轨道或从中移除轨道；每当添加一条轨道时， 用户代理可以使用此属性的值将其绑定到专用脚本模块。

除带内元数据文本轨道外，带内元数据轨道分派类型 为空字符串。对于不同的媒体格式，如何填充此值在公开媒体资源专用文本轨道的步骤 中进行了说明。

语言

这是一个表示文本轨道提示语言的字符串（BCP 47 语言标签）。 [BCP47]

对于与 track 元素相对应的文本轨道，其文本轨道语言可以动态变化。

标识符

一个字符串。

就绪状态

以下状态之一：

未加载

表示尚未获取文本轨道的提示。

正在加载

表示文本轨道正在加载，并且到目前为止尚未遇到致命错误。 解析器仍可能继续向轨道中添加提示。

已加载

表示文本轨道已加载，并且没有出现致命错误。

加载失败

表示文本轨道已启用，但用户代理尝试获取它时以某种方式失败 （例如，URL 无法被解析、出现网络错误或文本轨道格式未知）。 部分或全部提示可能缺失，并且不会被获取。

随着轨道被获取，文本轨道的就绪状态会动态变化。

模式

以下模式之一：

已禁用

表示文本轨道未处于活动状态。除了在 DOM 中公开该轨道之外， 用户代理会忽略该文本轨道。没有任何提示处于活动状态，不会触发任何事件， 并且用户代理不会尝试获取该轨道的提示。

隐藏

表示文本轨道处于活动状态，但用户代理没有主动显示提示。 如果尚未尝试获取该轨道的提示，用户代理会立即进行此类尝试。 用户代理会维护哪些提示处于活动状态的列表，并相应地触发事件。

显示

表示文本轨道处于活动状态。如果尚未尝试获取该轨道的提示， 用户代理会立即进行此类尝试。用户代理会维护哪些提示处于活动状态的列表， 并相应地触发事件。此外，对于种类为 subtitles 或 captions 的文本轨道，会按适当方式将提示叠加在视频上；对于种类为 descriptions 的文本轨道，用户代理会以非视觉方式向用户提供提示；对于种类为 chapters 的文本轨道，用户代理会向用户提供一种机制，使用户能够通过选择提示导航到媒体资源中的任意位置。

包含零个或多个提示的列表

一个文本轨道提示列表， 以及更新文本轨道渲染的规则。 例如，对于 WebVTT，是更新 WebVTT 文本轨道显示的规则。 [WEBVTT]

文本轨道的提示列表可以动态变化， 原因可能是该文本轨道尚未加载或仍在加载， 也可能是由于 DOM 操作。

每个媒体元素都有一个 待处理文本轨道列表，其初始值必须为空； 一个被解析器阻塞标志，其初始值必须为 false； 以及一个已执行自动轨道选择标志， 其初始值也必须为 false。

当要求用户代理填充待处理文本轨道列表时， 用户代理必须将该媒体元素的 文本轨道列表中， 所有文本轨道模式不是已禁用，并且其 文本轨道就绪状态为正在加载的 文本轨道，添加到该元素的 待处理文本轨道列表中。

每当 track 元素的父节点发生变化时，用户代理必须从该轨道所在的所有待处理文本轨道列表中， 移除相应的文本轨道。

每当文本轨道的 文本轨道就绪状态变为已加载或加载失败时， 用户代理必须从该轨道所在的所有待处理文本轨道列表中将其移除。

当媒体元素由 HTML 解析器或XML 解析器创建时，用户代理必须将该元素的被解析器阻塞标志设置为 true。 当媒体元素从 HTML 解析器或XML 解析器的开放元素栈中弹出时，用户代理必须遵循用户的自动文本轨道选择偏好、 填充待处理文本轨道列表， 并将该元素的被解析器阻塞标志设置为 false。

当媒体元素的 待处理文本轨道列表为空， 并且该元素的被解析器阻塞标志为 false 时， 该媒体元素的文本轨道 已就绪。

每个媒体元素都有一个 待处理文本轨道更改通知标志， 其初始状态必须为未设置。

每当位于媒体元素的 文本轨道列表中的 文本轨道的 文本轨道模式值发生变化时， 用户代理必须为该媒体元素运行以下步骤：

  1. 如果该媒体元素的 待处理文本轨道更改通知标志 已设置，则返回。

  2. 设置该媒体元素的 待处理文本轨道更改通知标志。

  3. 以该媒体元素为参数将媒体元素任务入队，以运行以下步骤：

    1. 取消设置该媒体元素的 待处理文本轨道更改通知标志。

    2. 在该媒体元素的 textTracks 属性的 TextTrackList 对象处触发一个事件， 其名称为 change。

  4. 如果该媒体元素的 显示海报标志未设置， 则运行时间继续推进步骤。

本节中列出的任务的 任务源是DOM 操作任务源。

文本轨道提示是文本轨道中时间敏感数据的单位， 例如对于字幕和说明字幕，它对应于在某一时刻出现并在另一时刻消失的文本。

每个文本轨道提示由以下部分组成：

标识符

任意字符串。

开始时间

以秒和秒的小数表示的时间，用于描述该提示所适用的媒体数据范围的开始位置。

结束时间

以秒和秒的小数表示的时间，用于描述该提示所适用的媒体数据范围的结束位置； 对于无界文本轨道提示，则为正无穷大。

退出时暂停标志

一个布尔值，表示当到达该提示所适用范围的末尾时，是否暂停媒体资源的播放。

一些其他格式专用数据

该格式所需的其他字段，包括提示的实际数据。例如，WebVTT 具有文本轨道提示书写方向等。 [WEBVTT]

无界文本轨道提示是 文本轨道提示结束时间设置为正无穷大的文本轨道提示。 在正常播放期间，活动的无界文本轨道提示不能仅通过 当前播放位置通常的单调递增而变为非活动状态 （例如，直播活动中没有公布结束时间的章节元数据提示）。

文本轨道提示开始时间和文本轨道提示结束时间可以为负数。 （不过，当前播放位置永远不能为负数， 因此完全位于时间零之前的提示不能处于活动状态。）

每个文本轨道提示都有一个对应的 TextTrackCue 对象 （更准确地说，是一个继承自 TextTrackCue 的对象—— 例如，WebVTT 提示使用 VTTCue 接口）。 可以通过此 TextTrackCue API 动态更改文本轨道提示的内存表示。 [WEBVTT]

文本轨道提示与 更新文本轨道渲染的规则相关联， 这些规则由特定类型的文本轨道提示的规范定义。 当使用 addCue() 方法将表示该提示的对象添加到 TextTrack 对象时， 会专门使用这些规则。

此外，每个文本轨道提示 都具有两项动态信息：

活动标志

此标志的初始状态必须为未设置。该标志用于确保在提示变为活动或非活动状态时 适当地触发事件，并确保渲染正确的提示。

每当文本轨道提示从其 文本轨道的 文本轨道提示列表中移除时； 每当该文本轨道本身从其 媒体元素的 文本轨道列表中移除， 或者其文本轨道模式 变为已禁用时； 以及每当媒体元素的 readyState 变回 HAVE_NOTHING 时， 用户代理都必须同步取消设置此标志。当通过这种方式为相关事件发生之前处于显示状态的 文本轨道中的一个或多个提示 取消设置该标志时，用户代理必须在为所有受影响提示取消设置该标志之后， 应用这些文本轨道的 更新文本轨道渲染的规则。 例如，对于基于 WebVTT 的文本轨道，应用更新 WebVTT 文本轨道显示的规则。 [WEBVTT]

显示状态

它作为渲染模型的一部分使用，以使提示保持在一致的位置。其初始值必须为空。 每当文本轨道提示活动标志被取消设置时， 用户代理必须清空文本轨道提示显示状态。

媒体元素的 文本轨道中的 文本轨道提示， 按照文本轨道提示顺序相互排序，确定方式如下： 首先按提示所属的文本轨道对 提示进行分组， 各组的排序顺序与其文本轨道在 媒体元素的 文本轨道列表中出现的顺序相同； 然后，在每组内，必须按开始时间对 提示排序，最早的在前； 然后，开始时间相同的所有提示必须按其结束时间排序，最晚的在前； 最后，结束时间相同的所有提示，必须按它们最后被添加到各自 文本轨道提示列表中的顺序排序， 最早添加的在前（例如，对于来自 WebVTT 文件的提示，其初始顺序就是提示在文件中列出的顺序）。 [WEBVTT]

4.8.11.11.2 获取带内文本轨道

媒体资源专用文本轨道是与 媒体资源中发现的数据 相对应的文本轨道。

处理和渲染这类数据的规则由相关规范定义，例如，如果媒体资源是视频， 则由视频格式规范定义。一些旧格式的详细信息可在 将媒体容器中的带内媒体资源轨道引入 HTML中找到。 [INBAND]

当媒体资源包含 用户代理识别并支持为等同于文本轨道的数据时， 用户代理使用相关数据运行 公开媒体资源专用文本轨道的步骤， 如下所示。

  1. 将相关数据与一个新的文本轨道关联。 该文本轨道是 媒体资源专用文本轨道。

  2. 根据相关规范所定义的相关数据语义，设置新文本轨道的种类、 标签、 语言和 标识符。 如果该数据中没有标签，则必须将标签设置为空字符串。

    如果媒体资源采用支持媒体片段语法的格式， 则该标识符必须与以下标识符相同： 当该标识符用作这种片段的轨道维度中的轨道名称时， 能够启用该轨道的标识符。

  3. 将文本轨道提示列表与适用于相关格式的 更新文本轨道渲染的规则 关联。

  4. 如果新文本轨道的 种类为 chapters 或 metadata， 则根据媒体资源的类型， 按以下方式设置文本轨道带内元数据轨道分派类型：

    如果媒体资源是 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 大写十六进制数字表示为十六进制。 [MPEG2]
    如果媒体资源是 MPEG-4 文件
    令stsd box为文件第一个 moov box 中， 该文本轨道的 trak box 的第一个 mdia box 的第一个 minf box 的 第一个 stbl box 的第一个 stsd box； 如果不存在这样的 stsd box，则为 null。 如果stsd box为 null，或者stsd box既没有 mett box， 也没有 metx box，则必须将文本轨道 带内元数据轨道分派类型设置为空字符串。 否则，如果stsd box具有 mett box，则必须将文本轨道 带内元数据轨道分派类型设置为字符串 "mett"、一个 U+0020 SPACE 字符和 stsd box 的第一个 mett box 的第一个 mime_format 字段值的串联；如果该 box 中不存在该字段，则设置为空字符串。 否则，如果stsd box没有 mett box，但具有 metx box， 则必须将文本轨道带内元数据轨道分派类型 设置为字符串 "metx"、一个 U+0020 SPACE 字符和stsd box 的 第一个 metx box 的第一个 namespace 字段值的串联； 如果该 box 中不存在该字段，则设置为空字符串。 [MPEG4]

  5. 按照公开 提示的指南，使用目前已解析的提示填充新文本轨道的提示列表， 并开始根据需要动态更新该列表。

  6. 将新文本轨道的 就绪状态设置为已加载。

  7. 将新文本轨道的 模式 设置为与用户偏好和相关数据规范要求相符的模式。

    例如，如果没有其他活动字幕，并且这是强制字幕轨道 （一种使用音频轨道主要语言提供字幕，但仅为实际采用另一种语言的音频提供字幕的轨道）， 则可以在此处启用这些字幕。

  8. 将新文本轨道添加到 媒体元素的 文本轨道列表中。

  9. 使用 TrackEvent， 在媒体元素的 textTracks 属性的 TextTrackList 对象处触发一个事件， 其名称为 addtrack， 并将 track 属性初始化为该文本轨道。

4.8.11.11.3 获取带外文本轨道

创建 track 元素时， 必须将其与一个新的文本轨道相关联 （其值按下文定义进行设置）。

文本轨道种类根据元素的 kind 属性的状态，按照下表确定；对于第一列单元格中给出的状态， 种类是第二列中给出的字符串：

状态 字符串
字幕 subtitles
说明字幕 captions
描述 descriptions
章节元数据 chapters
元数据 metadata

文本轨道标签是该元素的 轨道标签。

文本轨道语言是该元素的 轨道语言（如果有）； 否则为空字符串。

文本轨道标识符是该元素的 id 属性值（如果有）；否则为空字符串。

随着 kind、label、 srclang 和 id 属性被设置、更改或移除，文本轨道必须按照上述定义相应更新。

对轨道 URL的更改由下方算法处理。

文本轨道就绪状态的初始值为未加载， 文本轨道模式的初始值为已禁用。

文本轨道提示列表的初始值为空。 解析所引用的文件时，会动态修改该列表。与该列表关联的是适用于相关格式的 更新文本轨道渲染的规则； 对于 WebVTT，这是更新 WebVTT 文本轨道显示的规则。 [WEBVTT]

当 track 元素的父元素发生变化，并且新的父元素是媒体元素时， 用户代理必须将该 track 元素对应的文本轨道添加到该 媒体元素的 文本轨道列表中， 然后以该媒体元素为参数将媒体元素任务入队， 以使用 TrackEvent， 在该媒体元素的 textTracks 属性的 TextTrackList 对象处触发一个事件， 其名称为 addtrack， 并将 track 属性初始化为该文本轨道。

当 track 元素的父元素发生变化，并且旧的父元素是媒体元素时， 用户代理必须从该媒体元素的 文本轨道列表中移除该 track 元素对应的文本轨道， 然后以该媒体元素为参数将媒体元素任务入队， 以使用 TrackEvent， 在该媒体元素的 textTracks 属性的 TextTrackList 对象处触发一个事件， 其名称为 removetrack， 并将 track 属性初始化为该文本轨道。

当与 track 元素相对应的文本轨道被添加到 媒体元素的 文本轨道列表中时， 用户代理必须以该媒体元素为参数将媒体元素任务入队， 以为该媒体元素运行以下步骤：

  1. 如果该元素的被解析器阻塞标志为 true，则返回。

  2. 如果该元素的已执行自动轨道选择 标志为 true，则返回。

  3. 为此元素遵循用户的 自动文本轨道选择偏好。

当要求用户代理为一个媒体元素遵循用户的自动文本轨道选择偏好时， 用户代理必须运行以下步骤：

  1. 为 subtitles 和 captions 执行自动文本轨道选择。

  2. 为 descriptions 执行自动文本轨道选择。

  3. 如果媒体元素的 文本轨道列表中存在 文本轨道， 其文本轨道种类为 chapters 或 metadata， 且这些轨道对应于设置了 default 属性的 track 元素，并且其文本轨道模式被设置为已禁用， 则将所有这些轨道的文本轨道模式设置为隐藏。

  4. 将该元素的已执行自动轨道选择 标志设置为 true。

当上述步骤要求为一个或多个文本轨道种类 执行自动文本轨道选择时， 意味着运行以下步骤：

  1. 令candidates为一个列表，其中包含媒体元素的 文本轨道列表中， 文本轨道种类为传递给算法的种类之一的 文本轨道（如果有）， 并按照文本轨道列表中给出的顺序排列。

  2. 如果candidates为空，则返回。

  3. 如果candidates中的任何文本轨道的 文本轨道模式被设置为显示，则返回。

  4. 如果用户根据candidates中某条轨道的文本轨道种类、 文本轨道语言和 文本轨道标签， 表达了启用该轨道的意愿，则将其文本轨道模式设置为显示。

    例如，用户可以设置如下浏览器偏好：“尽可能使用法语说明字幕”， 或“如果存在标题中包含‘Commentary’的字幕轨道，则启用它”， 或“如果存在音频描述轨道，则启用一条，最好使用瑞士德语， 如果没有，则使用标准瑞士德语或标准德语”。

    否则，如果candidates中存在文本轨道， 其对应于设置了 default 属性的 track 元素，并且其文本轨道模式被设置为已禁用， 则将第一条此类轨道的文本轨道模式设置为显示。

当与 track 元素相对应的文本轨道遇到以下任一情况时， 用户代理必须为该文本轨道及其 track 元素启动 track 处理模型：

当用户代理要为一个文本轨道及其 track 元素启动 track 处理模型时， 必须运行以下算法。此算法与事件循环机制密切交互； 特别是，它包含一个同步段 （作为事件循环算法的一部分触发）。 该段中的步骤以 ⌛ 标记。

  1. 如果此算法的另一个实例已在为该文本轨道及其 track 元素运行，则返回，并让另一个算法处理此元素。

  2. 如果该文本轨道的 文本轨道模式既未设置为隐藏，也未设置为显示，则返回。

  3. 如果该文本轨道的 track 元素的父元素不是媒体元素，则返回。

  4. 并行运行这些步骤的其余部分， 允许导致这些步骤运行的操作继续执行。

  5. 顶部：等待稳定状态。 同步段由以下步骤组成。 （同步段中的步骤以 ⌛ 标记。）

  6. ⌛ 将文本轨道就绪状态设置为正在加载。

  7. ⌛ 令URL为 track 元素的轨道 URL。

  8. ⌛ 如果 track 元素的父元素是媒体元素， 则令corsAttributeState为父媒体元素的 crossorigin 内容属性的状态。否则，令corsAttributeState为无 CORS。

  9. 结束同步段， 继续并行运行剩余步骤。

  10. 如果URL不是空字符串：

    1. 令request为使用URL、"track" 和 corsAttributeState，并设置同源回退标志后创建潜在 CORS 请求的结果。

    2. 将request的客户端设置为 track 元素的节点文档的相关设置对象。

    3. 将request的发起者类型设置为 "track"。

    4. 获取request。

    获取算法在网络任务源上入队， 用于在获取数据时处理数据的任务，必须确定资源类型。 如果资源类型不是受支持的文本轨道格式，则加载将按下文所述失败。 否则，资源数据在接收时必须传递给适当的解析器 （例如，WebVTT 解析器），并使用文本轨道提示列表 作为该解析器的输出。[WEBVTT]

    当这些网络任务源的 任务逐个使用 从网络接收到的数据运行时，适当的解析器会递增更新文本轨道提示列表。

    本规范目前没有说明是否或如何检查文本轨道的 MIME 类型， 也没有说明是否或如何使用实际文件数据执行文件类型嗅探。 实现者对此问题的意图存在差异，因此尚不清楚正确的解决方案是什么。 在此处没有任何要求的情况下，HTTP 规范关于遵循 Content-Type 标头的严格要求优先 （“Content-Type 指定底层数据的媒体类型。”……“当且仅当 Content-Type 字段没有给出媒体类型时， 接收方可以尝试通过检查其内容和／或用于标识资源的 URI 的名称扩展名来猜测媒体类型。”）。

    如果获取由于任何原因失败（网络错误、服务器返回错误代码、CORS 失败等）， 或者URL为空字符串，则在DOM 操作任务源上， 以该媒体元素为参数将元素任务入队， 首先将文本轨道就绪状态更改为加载失败， 然后在 track 元素处触发一个事件， 其名称为 error。

    如果获取没有失败，但资源类型不是受支持的文本轨道格式， 或者文件未被成功处理（例如，相关格式是 XML 格式，而文件包含 XML 要求检测并向应用程序报告的良构性错误）， 则发现上述问题的、在网络任务源上入队的 任务， 必须将文本轨道就绪状态更改为加载失败， 并在 track 元素处触发一个事件， 其名称为 error。

    如果获取没有失败，并且文件已成功处理，则在完成数据解析后， 由网络任务源入队的最后一个 任务， 必须将文本轨道就绪状态更改为已加载， 并在 track 元素处触发一个事件， 其名称为 load。

    如果在获取进行期间发生以下任一情况：

    ……则用户代理必须中止获取， 丢弃该算法生成的所有待处理任务 （特别是，在 URL 发生变化之后，不再向文本轨道提示列表添加任何提示）， 然后在DOM 操作任务源上， 以该 track 元素为参数将元素任务入队， 首先将文本轨道就绪状态更改为加载失败， 然后在 track 元素处触发一个事件， 其名称为 error。

  11. 等待，直到文本轨道就绪状态 不再被设置为正在加载。

  12. 等待，直到轨道 URL不再等于URL， 并且同时文本轨道模式被设置为隐藏或显示。

  13. 跳转到标记为顶部的步骤。

每当 track 元素的 src 属性被设置、更改或移除时，用户代理必须立即清空该元素的文本轨道的 文本轨道提示列表。 （如果存在使用先前给定 URL 获取的资源，这也会导致上述算法停止从该资源添加提示。）

4.8.11.11.4 将各种格式中的提示公开指南为文本轨道提示

如何为 HTML 用户代理处理的目的解释特定格式的文本轨道提示，由该格式定义。 如果不存在这样的规范，本节提供一些约束，实现可以在这些约束内尝试以一致方式公开此类格式。

为了支持 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 = 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 对象， 该对象表示媒体元素的 文本轨道列表中的 文本轨道，其顺序与 文本轨道列表中的顺序相同。

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+

TextTrackList 对象的 length 属性必须返回该 TextTrackList 对象所表示的列表中的文本轨道数量。

在任何时刻，TextTrackList 对象的 支持的属性索引， 如果存在，则为从零到该 TextTrackList 对象所表示的列表中的 文本轨道数量减一之间的数字。 如果列表中没有文本轨道，则没有 支持的属性索引。

要为 TextTrackList 对象的给定索引 index确定索引属性的值， 用户代理必须返回该 TextTrackList 对象所表示列表中的第 index 条文本轨道。

getTrackById(id) 方法必须返回 TextTrackList 对象中， 其 id IDL 属性将返回 与 id 参数值相等的值的第一个 TextTrack。 当没有轨道与给定参数匹配时，该方法必须返回 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() 方法一起使用。

对于与 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 Android31+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) 方法在调用时必须运行以下步骤：

  1. 创建一个新的文本轨道， 并将其文本轨道种类设置为 kind，将其文本轨道标签设置为 label， 将其文本轨道语言设置为 language， 将其文本轨道就绪状态设置为 文本轨道已加载状态， 将其文本轨道模式设置为 文本轨道隐藏模式， 并将其文本轨道提示列表设置为空列表。

    最初，文本轨道提示列表不与任何 更新文本轨道渲染的规则相关联。 当向其中添加文本轨道提示时， 该文本轨道提示列表的规则会相应地永久设置。

  2. 将新的文本轨道添加到 媒体元素的 文本轨道列表中。

  3. 以该媒体元素为参数将媒体元素任务入队， 以使用 TrackEvent， 在该媒体元素的 textTracks 属性的 TextTrackList 对象处触发一个事件，其名称为 addtrack， 并将 track 属性初始化为新的文本轨道。

  4. 返回新的文本轨道。

kind 获取器步骤为返回 this 的种类。

label 获取器步骤为返回 this 的标签。

language 获取器步骤为返回 this 的语言。

id 获取器步骤为返回 this 的标识符。

inBandMetadataTrackDispatchType 获取器步骤为返回 this 的带内元数据轨道分派类型。

mode 获取器步骤为根据 this 的 模式进行分支并返回字符串：

文本轨道已禁用模式
"disabled"
文本轨道隐藏模式
"hidden"
文本轨道显示模式
"showing"

mode 设置器步骤为根据给定值进行分支，将 this 的 模式设置为相应模式：

"disabled"
文本轨道已禁用模式。
"hidden"
文本轨道隐藏模式。
"showing"
文本轨道显示模式。

cues 获取器步骤为：

  1. 如果 this 的模式是文本轨道已禁用模式，则返回 null。

  2. 返回一个实时 TextTrackCueList 对象， 该对象表示 this 的文本轨道提示列表中， 其结束时间位于脚本开始时的最早可能位置 或其后的子集，并按文本轨道提示顺序排列。

对于每个 TextTrack 对象， 当返回对象时，每次都必须返回同一个 TextTrackCueList 对象。

脚本开始时的最早可能位置， 是事件循环上一次到达步骤 1 时的 最早可能位置。

activeCues 获取器步骤为：

  1. 如果 this 的模式是文本轨道已禁用模式，则返回 null。

  2. 返回一个实时 TextTrackCueList 对象， 该对象表示 this 的文本轨道提示列表中， 脚本开始时活动标志已设置的子集， 并按文本轨道提示顺序排列。

对于每个 TextTrack 对象， 当返回对象时，每次都必须返回同一个 TextTrackCueList 对象。

如果事件循环上一次到达 步骤 1时，某个文本轨道提示的文本轨道提示活动标志已设置， 则该文本轨道提示的脚本开始时活动标志已设置。

addCue(cue) 方法步骤为：

  1. 令list为 this 的文本轨道提示列表。

  2. 如果list尚未与任何更新文本轨道渲染的规则相关联， 则将list与适用于cue的更新文本轨道渲染的规则相关联。

  3. 如果与list关联的更新文本轨道渲染的规则 与适用于cue的更新文本轨道渲染的规则不同， 则抛出一个 "InvalidStateError" DOMException。

  4. 如果给定的cue位于某个文本轨道提示列表中， 则从该文本轨道提示列表中移除 cue。

  5. 将cue添加到list。

removeCue(cue) 方法步骤为：

  1. 如果给定的cue不在 this 的 文本轨道提示列表中， 则抛出一个 "NotFoundError" DOMException。

  2. 从 this 的文本轨道提示列表中移除 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

所有当前引擎均支持。

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。

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+

length 属性必须返回 TextTrackCueList 对象所表示列表中的提示数量。

在任何时刻，TextTrackCueList 对象的 支持的属性索引， 如果存在，则为从零到该 TextTrackCueList 对象所表示列表中的提示数量减一之间的数字。 如果列表中没有提示，则没有 支持的属性索引。

要为给定索引 index确定索引属性的值， 用户代理必须返回 TextTrackCueList 对象所表示列表中的第 index 个文本轨道提示。

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+

getCueById(id) 方法， 使用非空字符串参数调用时，必须返回 TextTrackCueList 对象所表示列表中，文本轨道提示标识符为 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 获取器步骤为返回 this 的 文本轨道提示 所在的文本轨道， 即该提示位于其提示列表中的文本轨道（如果有）； 否则返回 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 属性在获取时， 如果该 TextTrackCue 对象所表示的 文本轨道提示的 文本轨道提示退出时暂停标志已设置， 则必须返回 true；否则返回 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 的 kind 或 VideoTrack 的 kind IDL 属性返回值，或者标识文本轨道种类的其他规范或格式， 必须使用 about:html-kind URL。

4.8.11.13 用户界面

controls 属性是一个布尔属性。 如果存在，则表示作者没有提供脚本化控制器，并希望用户代理提供自己的一组控件。

如果该属性存在，或者对于该媒体元素禁用了脚本，则用户代理应向用户公开用户界面。 此用户界面应包含开始播放、暂停播放、定位到内容中的任意位置 （如果内容支持任意定位）、更改音量、更改隐藏式字幕或嵌入式手语轨道的显示、 选择不同的音频轨道或启用音频描述，以及以更适合用户的方式显示媒体内容 （例如全屏视频或在独立的可调整大小窗口中显示）等功能。还可以提供其他控件。

不过，即使该属性不存在，用户代理也可以提供影响媒体资源播放的控件 （例如播放、暂停、定位、轨道选择和音量控件），但这些功能不应干扰页面的正常渲染。 例如，可以在媒体元素的上下文菜单、平台媒体键或遥控器中公开这些功能。 用户代理可以简单地按照上述方式向用户公开用户界面 （就像存在 controls 属性一样）来实现。

如果用户代理通过在媒体元素上方显示控件来向用户公开用户界面， 则当用户代理与此界面交互时，应抑制所有用户交互事件。 （例如，如果用户点击视频的播放控件，则不会同时在页面元素处触发 mousedown 事件等。）

在可能的情况下（具体而言，包括开始、停止、暂停和恢复播放；定位； 更改播放速率；快进或倒退；列出、启用和禁用文本轨道；以及静音或更改音量）， 用户代理公开的用户界面功能必须通过上述 DOM API 实现，从而例如触发所有相同的事件。

快进或倒退等功能必须仅通过更改 playbackRate 属性来实现（不得更改 defaultPlaybackRate 属性）。

定位必须通过定位到 媒体元素的 媒体时间线中的请求位置来实现。 对于定位到任意位置会很慢的媒体资源，鼓励用户代理在响应用户操作定位条等近似位置界面进行定位时， 使用为速度近似标志。

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 Android37+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+

如果音频已静音，从而覆盖 volume 属性，则返回 true；如果正在采用 volume 属性，则返回 false。

可以设置，以更改音频是否静音。

媒体元素具有一个 播放音量，它是 0.0（静音）到 1.0（最响亮）范围内的数值。 音量初始值应为 1.0，但用户代理可以按站点或以其他方式跨会话记住最后设置的值， 因此音量可能以其他值开始。

要将媒体元素 element 的 播放音量设置为数字 value：

  1. 如果 element 的播放音量等于 value，则返回。

  2. 将 element 的播放音量设置为 value。

  3. 如果 element 不被允许播放， 则为 element 运行内部暂停步骤。

  4. 以 element 为参数将媒体元素任务入队， 以在 element 处触发一个事件， 其名称为 volumechange。

volume 获取器步骤为返回 this 的播放音量。

volume 设置器步骤为：

  1. 如果给定值不在包含端点的 0.0 到 1.0 范围内，则抛出一个 "IndexSizeError" DOMException。

  2. 将 this 的播放音量设置为给定值。

如果以下任一条件为 true，则媒体元素处于静音状态：

每个媒体元素都有一个 静音状态，其值为 true、false 或 "default"；其初始值为 "default"。 用户代理可以将媒体元素的静音状态设置为 true 或 false （例如，按站点或以其他方式跨会话记住最后设置的值）。

要将媒体元素 element 的 静音状态设置为布尔值 value：

  1. 如果 element 的静音状态等于 value，则返回。

  2. 将 element 的静音状态设置为 value。

  3. 如果 element 不被允许播放， 则为 element 运行内部暂停步骤。

  4. 以 element 为参数将媒体元素任务入队， 以在 element 处触发一个事件， 其名称为 volumechange。

muted 获取器步骤为：如果 this 处于静音状态，则返回 true；否则返回 false。

muted 设置器步骤为将 this 的静音状态设置为给定值。

用户代理具有一个关联的音量锁定状态（布尔值）。 其值由实现定义，并决定播放音量是否生效。

元素的有效媒体音量按以下方式确定：

  1. 如果用户指示用户代理覆盖该元素的音量，则返回用户所需的音量。

  2. 如果用户代理的音量锁定为 true，则返回系统音量。

  3. 如果元素处于静音状态，则返回 0。

  4. 令volume为媒体元素音频部分的播放音量， 其范围为 0.0（静音）到 1.0（最响亮）。

  5. 返回volume，将其相对于 0.0 到 1.0 的范围进行解释， 其中 0.0 表示静音，1.0 表示最响亮的设置，中间值的响度依次增加。 该范围不必是线性的。最响亮的设置可以低于系统可实现的最大音量； 例如，用户可以设置最大音量。

媒体元素上的 muted 内容属性是一个 布尔属性，用于给出静音的默认值。

一旦调用了 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。

TimeRanges 对象具有 范围，即由零个或多个时间范围组成的 列表。

时间范围是一个结构，具有以下 项：

length 获取器步骤为返回 this 的范围的 大小。

start(index) 方法步骤为：

  1. 如果 index 大于或等于 this 的 范围的 大小，则抛出一个 "IndexSizeError" DOMException。

  2. 返回 this 的范围[index]的 开始。

end(index) 方法步骤为：

  1. 如果 index 大于或等于 this 的 范围的 大小，则抛出一个 "IndexSizeError" DOMException。

  2. 返回 this 的范围[index]的 结束。

如果对于 TimeRanges 对象的 范围中的每个 时间范围，以下条件均为 true， 则该对象是一个规范化的 TimeRanges 对象：

换句话说，这种对象中的时间范围是有序的、互不重叠且互不接触的 （相邻的范围会合并为一个更大的时间范围）。一个时间范围可以为空（仅引用某个时间点）， 例如，当媒体元素暂停时， 如果用户代理除当前帧外已丢弃整个媒体资源，则可以用它表示当前仅缓冲了一帧。

时间范围的 开始和 结束均为包含端点。

因此，一个时间范围的结束，将等于其后相邻 （接触但不重叠）的时间范围的开始。类似地，一个覆盖以零为起点的整个时间线的 时间范围， 其开始将等于零，而其 结束 将等于时间线的持续时间。

媒体元素的 buffered、 seekable 和 played IDL 属性所返回对象 使用的时间线，必须是该元素的媒体时间线。

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 一个此前其 networkState 不处于 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 属性已更改。 在相关属性的设置器返回后触发。

以下事件会在 source 元素上触发：

事件名称 接口 触发时机……
error Event 获取媒体数据时发生错误， 或者资源类型不是受支持的媒体格式。

以下事件会在 AudioTrackList、VideoTrackList 和 TextTrackList 对象上触发：

事件名称 接口 触发时机……
change

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?
Event 轨道列表中的一个或多个轨道已启用或禁用。
addtrack

AudioTrackList/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?

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?
TrackEvent 一个轨道已添加到轨道列表中。
removetrack

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 Explorer否
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?
TrackEvent 一个轨道已从轨道列表中移除。

以下事件会在 TextTrack 对象和 track 元素上触发：

事件名称 接口 触发时机……
cuechange

HTMLTrackElement/cuechange_event

所有当前引擎均支持。

Firefox68+Safari10+Chrome32+
Opera19+Edge79+
Edge（旧版）14+Internet Explorer否
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 媒体元素作者的 最佳实践

本节是非规范性的。

在机顶盒或移动电话等小型设备上播放音频和视频资源时， 通常会受到设备中有限硬件资源的制约。例如，一台设备可能只 支持同时播放三个视频。因此，在播放完毕后释放 媒体 元素所占用的资源是一种良好实践，具体做法可以是 非常谨慎地移除对该元素的所有引用并允许对其进行垃圾 回收，或者更好的做法是将该元素的 src 属性设置为空字符串。如果设置了 srcObject， 则应改为将 srcObject 设置为 null。

同样，当播放速率不恰好为 1.0 时，硬件、软件或格式限制 可能会导致视频丢帧，以及音频断续或静音。

4.8.11.19 媒体元素实现者的 最佳实践

本节是非规范性的。

媒体元素 API 各方面的实现精确程度 被视为实现质量问题。

例如，在实现 buffered 属性时， 实现报告已缓冲范围的精确程度取决于 用户代理检查数据的细致程度。由于 API 以时间形式报告范围，而数据是 以字节流形式获得的，接收可变比特率流的用户代理可能只有实际解码 全部数据才能确定精确时间。不过，并不要求用户代理 这样做；它们可以返回估算值（例如基于目前观察到的平均比特率），并在 获得更多信息时对其进行修订。

一般而言，建议用户代理采取保守而非乐观的方式。例如， 在并非所有内容都已缓冲时报告所有内容均已缓冲会很糟糕。

另一个实现质量问题是在编解码器 仅为正向播放而设计时反向播放视频（例如关键帧很少且彼此相距很远， 中间帧仅包含相对于上一帧的差异）。用户代理可能实现得很差， 例如只显示关键帧；不过，更好的实现会完成更多工作，从而获得 更好的效果，例如实际正向解码部分视频、存储完整帧，然后 反向播放这些帧。

同样，尽管允许实现在任何时候丢弃已缓冲的数据（并不 要求用户代理在媒体 元素的整个生命周期内保留所获得的全部媒体数据），这仍然是实现质量问题：建议拥有足够资源 保留所有数据的用户代理这样做，因为这可以提供更好的用户体验。例如， 如果用户正在观看直播流，用户代理可以只允许用户查看 实时视频；不过，更好的用户代理会缓冲所有内容，并允许用户在 较早的内容中跳转、暂停以及正向和反向播放等。

当一个已暂停的媒体 元素被从 文档中移除，并且在事件 循环下一次到达步骤 1之前未重新插入时，建议资源受限的实现利用 该机会释放媒体元素使用的所有硬件资源（例如视频平面、网络资源和 数据缓冲区）。（不过，用户代理仍然必须记录 播放位置等信息，以防稍后重新开始播放。）

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 属性引用的图像映射名称
无障碍注意事项：
对于作者。
对于实现者。
净化：
未分类。
DOM 接口：
[Exposed=Window]
interface HTMLMapElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute DOMString name;
  [SameObject] readonly attribute HTMLCollection areas;
};

map 元素与 img 元素以及作为其后代的任意 area 元素结合使用时，定义一个图像映射。该元素 表示其子级。

name 属性为 映射提供一个名称，以便可以引用它。该 属性必须存在，并且必须 具有不包含任何 ASCII 空白的非空值。 name 属性的值不得 等于同一 树中另一个 map 元素的 name 属性值。如果还指定了 id 属性，则两个 属性必须具有相同的值。

map.areas

返回一个 HTMLCollection， 其中包含 map 中的 area 元素。

areas 属性必须返回一个以 map 元素为根的 HTMLCollection， 其 过滤器仅匹配 area 元素。

图像映射可以与页面上的其他内容结合定义，以便于维护。 此示例展示了一个页面，其顶部具有图像映射，底部具有一组对应的 文本链接。

<!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+

HTMLAreaElement/rel

所有当前引擎均支持。

Firefox30+Safari9+Chrome54+
Opera?Edge79+
Edge（旧版）12+Internet Explorer11
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLAreaElement/relList

所有当前引擎均支持。

Firefox30+Safari9+Chrome65+
Opera41+Edge79+
Edge（旧版）18Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android41+
类别：
流式内容。
短语内容。
可以使用此 元素的上下文：
需要短语内容的地方， 但仅当存在一个祖先 map 元素时。
内容模型：
无。
text/html 中的 标签省略：
没有结束标签。
内容属性：
全局属性
alt — 图像不可用时使用的 替代文本
coords — 要在图像映射中创建的形状的坐标
shape — 要在图像映射中创建的形状类型
href — 超链接的地址
target — 用于超链接导航的可导航对象
download — 是否下载资源而不是导航到该资源，以及在下载时使用的文件名
ping — 要 ping 的 URL
rel — 文档中包含超链接的位置与目标资源之间的关系
referrerpolicy — 元素发起的获取所使用的引用来源策略
hreflang — 链接资源的语言
type — 被引用资源 类型的提示
无障碍注意事项：
如果元素具有 href 属性：对于作者；对于实现者。
否则：对于作者；对于实现者。
净化：
未分类，并具有导航 URL 属性 href。
DOM 接口：
[Exposed=Window]
interface HTMLAreaElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute DOMString alt;
  [CEReactions, Reflect] attribute DOMString coords;
  [CEReactions, Reflect] attribute DOMString shape;
  [CEReactions, Reflect] attribute DOMString download;
  [CEReactions, Reflect] attribute USVString ping;
  [CEReactions, Reflect] attribute DOMString rel;
  [SameObject, PutForwards=value, Reflect="rel"] readonly attribute DOMTokenList relList;
  [CEReactions] attribute DOMString referrerPolicy;

  // also has obsolete members
};
HTMLAreaElement includes HyperlinkElementUtils;
HTMLAreaElement includes HTMLHyperlinkElementUtils;

area 元素表示带有一些文本并在图像映射上具有对应区域的超链接，或者图像映射上的无效区域。

具有父节点的 area 元素 必须具有一个祖先 map 元素。

如果 area 元素具有 href 属性，则 area 元素表示一个超链接。在这种情况下， alt 属性必须 存在。它指定超链接的文本。其值必须是这样一段文本：当它与图像 映射中其他超链接所指定的文本以及 图像的替代文本一起呈现，但不呈现图像本身时，能够向用户提供与该超链接 在不使用其文本但将其形状应用于图像时所提供的相同类型的选择。如果同一图像映射中存在另一个 area 元素指向相同资源，并且 具有非空白的 alt 属性，则 alt 属性可以留空。

如果 area 元素没有 href 属性，则无法选择该元素所表示的区域，并且必须省略 alt 属性。

在这两种情况下，shape 和 coords 属性指定该 区域。

shape 属性 是一个具有以下关键字和状态的枚举属性：

关键字 符合要求 状态 简要说明
circle 圆形状态 指定一个圆，在 coords 属性中恰好使用三个整数。
circ 否
default 默认状态 该区域是整个图像。（不使用 coords 属性。）
poly 多边形状态 指定一个多边形，在 coords 属性中使用至少六个整数。
polygon 否
rect 矩形状态 指定一个矩形，在 coords 属性中恰好使用四个整数。
rectangle 否

该属性的缺失值 默认值和无效 值默认值均为矩形状态。

如果指定了 coords 属性，则它必须包含一个有效浮点数列表。该 属性 为 shape 属性描述的形状提供坐标。此属性的处理作为图像 映射处理模型的一部分进行描述。

在圆形状态下， area 元素必须具有 包含三个整数的 coords 属性， 最后一个整数必须为非负数。第一个整数必须是从图像左边缘到 圆心的距离，以 CSS 像素为单位；第二个整数必须是从图像上边缘到圆心的距离，以 CSS 像素为单位；第三个整数 必须是圆的半径，同样以 CSS 像素为单位。

在默认状态下， area 元素不得具有 coords 属性。（该区域是整个图像。）

在多边形状态下， area 元素必须具有 至少包含六个整数的 coords 属性， 并且整数数量必须为偶数。每对整数必须 分别表示一个坐标，即以 CSS 像素 为单位、相对于图像左边缘和上边缘的距离，并且所有坐标必须按顺序表示 多边形的各个点。

在矩形状态下， area 元素必须具有 恰好包含四个整数的 coords 属性， 其中第一个整数必须小于第三个整数，第二个 整数必须小于第四个整数。这四个点必须分别表示 从图像左边缘到矩形左侧的距离、从图像上边缘 到矩形上侧的距离、从图像左边缘到矩形右侧的距离，以及从图像上 边缘到矩形下侧的距离，均以 CSS 像素为单位。

当用户代理允许用户跟随超链接或 下载超链接，而这些超链接是使用 该 area 元素创建的时，href、target、download 和 ping 属性决定如何跟随该链接。rel 属性可用于 在用户跟随链接之前向用户指示目标资源可能的 性质。

如果不存在 href 属性，则必须省略 target、download、ping、 rel、referrerpolicy、 hreflang 和 type 属性。

如果在 area 元素上指定了 itemprop 属性，则还必须指定 href 属性。

HTMLAreaElement/referrerPolicy

所有当前引擎均支持。

Firefox50+Safari14.1+Chrome52+
Opera?Edge79+
Edge（旧版）?Internet Explorer否
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

IDL 属性 referrerPolicy 必须反映 referrerpolicy 内容属性，并仅限于 已知值。

4.8.14 图像映射

4.8.14.1 创作

图像映射允许将图像上的几何区域与超链接关联。

可以通过在 img 元素上指定 usemap 属性，将以 img 元素形式存在的图像 与以 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 属性，则用户代理必须按如下方式处理它：

  1. 以该元素作为上下文节点，使用解析哈希名称 引用的规则，将属性值解析为对 map 元素的引用。 这将返回一个 元素（map）或 null。

  2. 如果返回 null，则返回。该图像最终并未与图像 映射关联。

  3. 否则，用户代理必须收集作为 map 后代的所有 area 元素。 令 areas 为该列表。

获得构成图像映射的 area 元素列表 （areas）后，交互式用户代理必须以两种方式之一处理该列表。

如果用户代理打算显示 img 元素所表示的文本， 则 必须使用以下步骤：

  1. 从 areas 中移除所有没有 href 属性的 area 元素。

  2. 如果 areas 中存在另一个 area 元素， 其 href 属性具有相同的值，并且具有非空的 alt 属性，则从 areas 中移除所有没有 alt 属性，或者其 alt 属性值为空字符串的 area 元素。

  3. areas 中剩余的每个 area 元素表示一个 超链接。应以与 img 的文本 相关联的方式向用户提供所有这些超链接。

    在此上下文中，对于未指定 alt 属性，或者其 alt 属性为空字符串或其他不可见文本的 area 和 img 元素， 用户代理可以采用一种旨在表明缺少合适的 作者提供文本的由实现定义的方式来表示。

如果用户代理打算显示图像，并允许通过与图像交互来选择 超链接，则图像必须与一组分层形状关联，这些形状取自 areas 中的 area 元素，并按照树顺序的逆序排列 （因此，map 中最后指定的 area 元素是最底层形状，而 map 中按树顺序排列的 第一个元素是最顶层形状）。

必须按如下方式处理 areas 中的每个 area 元素，以获得要分层放置在图像上的形状：

  1. 查找该元素的 shape 属性 所表示的状态。

  2. 如果元素的 coords 属性存在，则使用解析浮点数列表的 规则解析该属性，并令 coords 列表为结果。如果该属性不存在，则令 coords 列表 为空列表。

  3. 如果 coords 列表中的项目数少于下表中针对 area 元素 当前状态给出的最小数量，则 该形状为空；返回。

    状态 最小项目数
    圆形 状态 3
    默认 状态 0
    多边形状态 6
    矩形 状态 4

  4. 根据以下列表中与 shape 属性 状态对应的条目，检查 coords 列表中是否存在多余项目：

    圆形 状态
    丢弃列表中第三项之后的所有项目。
    默认 状态
    丢弃列表中的所有项目。
    多边形状态
    如果项目数为奇数，则丢弃最后一项。
    矩形状态
    丢弃列表中第四项之后的所有项目。

  5. 如果 shape 属性表示矩形状态，并且列表中的第一个数 在数值上大于列表中的第三个数，则交换这两个数。

  6. 如果 shape 属性表示矩形状态，并且列表中的第二个数 在数值上大于列表中的第四个数，则交换这两个数。

  7. 如果 shape 属性表示圆形状态，并且列表中的第三个数 小于或等于零，则形状为空；返回。

  8. 现在，元素所表示的形状是以下列表中与 shape 属性 状态对应的条目所描述的形状：

    圆形 状态

    令 x 为 coords 中的第一个数，y 为第二个数，并令 r 为第三个数。

    该形状是一个圆，其圆心距图像左边缘 x CSS 像素， 距图像上边缘 y CSS 像素，其 半径为 r CSS 像素。

    默认 状态

    该形状是一个恰好覆盖整个图像的矩形。

    多边形状态

    令 xi 为 coords 中的第 (2i) 项，并令 yi 为 coords 中的第 (2i+1) 项 （coords 中第一项的索引为 0）。

    令 the coordinates 为 (xi， yi)， 将其解释为从图像左上角测量的 CSS 像素，其中 i 取从 0 到 (N/2)-1 的所有整数值， N 是 coords 中的项目数。

    该形状是一个顶点由 the coordinates 给出的多边形，其 内部使用奇偶规则确定。[GRAPHICS]

    矩形状态

    令 x1 为 coords 中的第一个数，y1 为 第二个数，x2 为第三个数，并令 y2 为第四个 数。

    该形状是一个矩形，其左上角由坐标 (x1， y1) 给出，其 右下角由坐标 (x2， y2) 给出，这些坐标被解释为距图像左上角的 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 内容模型、布局和渲染而言，假装该文本实际上被包装在一个 MathML mtext 元素中。（不过，此类文本并不符合要求。）

对于内容不匹配元素内容模型的任何 MathML 元素，用户代理必须表现得如同： 为了 MathML 布局和渲染，该元素已被一个包含适当错误消息的 MathML merror 元素替换。

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()

当 iframe、 embed 或 object 元素用于嵌入 SVG 时， 返回 Document 对象。

getSVGDocument() 方法步骤为：

  1. 令 document 为 this 的内容文档。

  2. 如果 document 非空，并且它由XML 文件的 页面加载处理模型一节创建，因为在导航算法中，资源的计算类型为 image/svg+xml，则返回 document。

  3. 返回 null。

4.8.17 尺寸属性

作者要求：可以在 img、iframe、 embed、object、video、父元素为 picture 元素时的 source 元素，以及当其 type 属性处于图像按钮状态时的 input 元素上指定 width 和 height 属性，以 CSS 像素为单位给出元素视觉内容的尺寸 （分别为相对于输出介质标称方向的宽度和高度）。如果指定了这些属性，则其值 必须是有效 非负整数。

给出的指定尺寸可能与资源本身指定的尺寸不同， 因为资源的分辨率可能与 CSS 像素分辨率不同。（在屏幕上， CSS 像素的分辨率为 96ppi，但通常 CSS 像素 分辨率取决于观看距离。）如果两个属性都已指定，则以下 语句之一必须为 true：

target ratio 是资源中自然宽度与 自然高度之比。specified width 和 specified height 分别是 width 和 height 属性的值。

如果相关资源不同时具有自然宽度和自然高度， 则必须省略这两个属性。

如果两个属性均为 0，则表示该元素并非面向用户 （例如，它可能是页面浏览量统计服务的一部分）。

尺寸属性并非用于拉伸图像。

用户代理要求：用户代理应使用这些属性作为渲染提示。

对于 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 中的 标签省略：
两个标签均不可省略。
内容属性：
全局属性
无障碍注意事项：
对于作者。
对于实现者。
净化：
默认。
DOM 接口：
[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 元素参与 表格 模型。表格具有由其后代给出的行、列和单元格。行和 列形成网格；表格的单元格必须完整覆盖该网格，且不得重叠。

用于确定是否满足此一致性要求的精确规则 在表格模型的说明中描述。

建议作者提供描述如何解读复杂表格的信息。 有关如何提供此类信息的指导见 下文。

不得将表格用作布局辅助工具。过去，一些 Web 作者曾在 HTML 中滥用表格来控制页面布局。这种用法不符合要求，因为尝试 从此类文档中提取表格数据的工具会得到非常令人困惑的结果。尤其是， 屏幕阅读器等无障碍工具的用户可能会发现很难浏览 使用表格进行布局的页面。

除使用 HTML 表格进行布局外，还有多种替代方案，例如 CSS 网格布局、CSS 弹性盒布局（“flexbox”）、CSS 多列布局、CSS 定位以及 CSS 表格模型。[CSS]

表格可能很难理解和浏览。为了帮助用户，除非用户代理已将 表格归类为（不符合要求的）布局表格，否则用户代理 应清晰地区分表格中的各个单元格。

建议作者和实现者考虑 使用下文所述的一些表格设计技术， 以使用户更容易浏览表格。

建议用户代理，尤其是对任意内容执行表格分析的用户代理， 寻找启发式方法，以确定哪些表格实际包含数据，哪些表格仅用于 布局。本规范未定义精确的启发式方法，但建议将以下内容 作为可能的指示因素：

特征 指示
使用值为 presentation 的 role 属性 可能是布局表格
使用值为不符合要求的 0 的不符合要求的 border 属性 可能是布局表格
使用值为 0 的不符合要求的 cellspacing 和 cellpadding 属性 可能是布局表格
使用 caption、thead 或 th 元素 可能不是布局表格
使用 headers 和 scope 属性 可能不是布局表格
使用值不为 0 的不符合要求的 border 属性 可能不是布局表格
使用 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+

返回一个由表格的 tbody 元素组成的 HTMLCollection。

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+

返回一个由表格的 tr 元素组成的 HTMLCollection。

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 元素 tableElement 和一个字符串 localName，要创建表格元素，返回在给定 tableElement 的节点 文档、localName 和 HTML 命名空间的情况下创建元素的结果。

caption 获取器步骤是：如果存在，则返回 this 的第一个 caption 元素子级； 否则返回 null。

caption 设置器步骤 是：

  1. 如果存在，则移除 this 的第一个 caption 元素子级。

  2. 如果给定值不为 null，则将其作为 this 的第一个节点插入。

createCaption() 方法步骤为：

  1. 如果 this 具有一个 caption 元素 子级，则返回第一个这样的 元素。

  2. 令 caption 为给定 this 和 "caption" 时创建 表格元素的结果。

  3. 将 caption 作为 this 的第一个节点插入。

  4. 返回 caption。

deleteCaption() 方法步骤是：如果存在，则移除 this 的第一个 caption 元素子级。

tHead 获取器步骤是：如果存在，则返回 this 的第一个 thead 元素子级； 否则返回 null。

tHead 设置器步骤为：

  1. 如果给定值既不是 null，也不是 thead 元素，则抛出 一个 "HierarchyRequestError" DOMException。

  2. 如果存在，则移除 this 的第一个 thead 元素子级。

  3. 如果给定值不为 null，则将其紧接在 this 的第一个既不是 caption 元素，也不是 colgroup 元素的元素子级之前插入（如果存在）；否则将其插入到 this 的末尾。

createTHead() 方法步骤为：

  1. 如果 this 具有一个 thead 元素子级， 则返回第一个这样的 元素。

  2. 令 thead 为给定 this 和 "thead" 时创建 表格元素的结果。

  3. 将 thead 紧接在 this 的第一个既不是 caption 元素，也不是 colgroup 元素的元素子级之前插入（如果存在）； 否则，将 thead 插入到 this 的末尾。

  4. 返回 thead。

deleteTHead() 方法步骤是：如果存在，则移除 this 的第一个 thead 元素子级。

tFoot 获取器步骤是：如果存在，则返回 this 的第一个 tfoot 元素子级； 否则返回 null。

tFoot 设置器步骤为：

  1. 如果给定值既不是 null，也不是 tfoot 元素，则抛出 一个 "HierarchyRequestError" DOMException。

  2. 如果存在，则移除 this 的第一个 tfoot 元素子级。

  3. 如果给定值不为 null，则将其插入到 this 的末尾。

createTFoot() 方法步骤为：

  1. 如果 this 具有一个 tfoot 元素子级， 则返回第一个这样的 元素。

  2. 令 tfoot 为给定 this 和 "tfoot" 时创建 表格元素的结果。

  3. 将 tfoot 插入到 this 的末尾。

  4. 返回 tfoot。

deleteTFoot() 方法步骤是：如果存在，则移除 this 的第一个 tfoot 元素子级。

tBodies 获取器步骤是返回一个以 this 为根的 HTMLCollection， 其 过滤器仅匹配作为 this 子级的 tbody 元素。

createTBody() 方法步骤为：

  1. 令 tbody 为给定 this 和 "tbody" 时创建 表格元素的结果。

  2. 如果存在，则将 tbody 紧接在 this 的最后一个 tbody 元素子级之后插入； 否则将 tbody 插入到 this 的末尾。

  3. 返回 tbody。

rows 获取器步骤是返回一个以 this 为根的 HTMLCollection， 其 过滤器仅匹配如下 tr 元素： 它们要么是 this 的子级，要么是本身作为 this 子级的 thead、tbody 或 tfoot 元素的子级。 集合中的元素必须按如下方式排序： 首先包含父级为 thead 的元素，并按 树 顺序排列；随后是父级为 this 或 tbody 元素的元素，同样按 树顺序排列；最后是父级为 tfoot 元素的元素，仍按 树顺序排列。

insertRow(index) 方法步骤为：

  1. 如果 index 小于 −1，或大于 rows 集合中的元素数， 则抛出一个 "IndexSizeError" DOMException。

  2. 令 tr 为给定 this 和 "tr" 时创建表格 元素的结果。

  3. 如果 rows 集合中 没有元素，并且 this 中没有 tbody 元素：

    1. 令 tbody 为给定 this 和 "tbody" 时创建 表格元素的结果。

    2. 将 tr 追加到 tbody。

    3. 将 tbody 追加到 this。

  4. 否则，如果 rows 集合中没有元素， 则将 tr 追加到 this 中最后一个 tbody 元素。

  5. 否则，如果 index 为 −1，或等于 rows 集合中的项目数， 则将 tr 追加到 rows 集合中最后一个 tr 元素的父级。

  6. 否则，在同一 父级中，将 tr 紧接在 rows 集合中第 index 个 tr 元素之前插入。

  7. 返回 tr。

deleteRow(index) 方法步骤为：

  1. 如果 index 小于 −1，或大于或等于 rows 集合中的元素数，则抛出一个 "IndexSizeError" DOMException。

  2. 如果 index 为 −1，则从其 父级中移除 rows 集合中的最后一个元素；如果 rows 集合为空，则不执行任何操作。

  3. 否则，从其父级中移除 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

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge（旧版）12+Internet Explorer是
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLTableCaptionElement

所有当前引擎均支持。

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 元素。
text/html 中的 标签省略：
如果 caption 元素 后面没有紧跟 ASCII 空白 或 注释，则可以省略该 caption 元素的 结束标签。
内容 属性：
全局属性
无障碍注意事项：
对于作者。
对于实现者。
净化：
默认。
DOM 接口：
[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 元素的开始标签。（如果元素 为空，则不可省略。）
如果 colgroup 元素后面没有紧跟 ASCII 空白 或注释，则可以省略该 colgroup 元素的结束标签。
内容 属性：
全局属性
span — 元素跨越的 列数
无障碍注意事项：
对于作者。
对于实现者。
净化：
默认，并具有 属性 span。
DOM 接口：
[Exposed=Window]
interface HTMLTableColElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect, ReflectDefault=1, ReflectRange=(1, 1000)] attribute unsigned long span;

  // also has obsolete members
};

如果 colgroup 元素具有父元素，并且该父元素是 table 元素，则它 表示作为其父元素的 table 中一个或多个列的组。

如果 colgroup 元素不包含任何 col 元素，则可以为该元素指定一个 span 内容属性，其值必须是大于零且小于或等于 1000 的有效非负整数。

colgroup 元素及其 span 属性参与表格模型。

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?
类别：
无。
可以使用此元素的 上下文：
作为不具有 span 属性的 colgroup 元素的子级。
内容模型：
无。
text/html 中的 标签省略：
没有结束标签。
内容属性：
全局属性
span — 元素跨越的列数
无障碍注意事项：
对于作者。
对于实现者。
净化：
默认，并具有 属性 span。
DOM 接口：
使用为 colgroup 元素定义的 HTMLTableColElement。

如果一个 col 元素具有父元素， 且该父元素是一个 colgroup 元素，而该元素本身的父元素又是一个 table 元素，则该 col 元素 表示由该 colgroup 表示的列组中的一个或多个列。

可以为该元素指定一个 span 内容属性，其值必须是 大于零且小于或等于 1000 的有效非负整数。

col 元素及其 span 属性 参与表格模型。

4.9.5 tbody 元素

Element/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 元素之后，但仅当 不存在作为该 table 元素子级的 tr 元素时。
内容模型：
零个或多个 tr 元素和脚本支持 元素。
text/html 中的 标签省略：
如果 tbody 元素内的第一个内容是 tr 元素，并且该 元素前面没有紧邻一个省略了结束标签的 tbody、thead 或 tfoot 元素，则可以省略该 tbody 元素的开始标签。（如果元素为空， 则不可省略。）
如果 tbody 元素 后面紧跟一个 tbody 或 tfoot 元素，或者 父元素中不再有其他内容，则可以省略该 tbody 元素的结束标签。
内容属性：
全局属性
无障碍注意事项：
对于作者。
对于实现者。
净化：
默认。
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

返回一个由表格节中的 tr 元素组成的 HTMLCollection。

tr = tbody.insertRow([ index ])

创建一个 tr 元素， 将其插入表格节中由 参数给出的位置，并返回该 tr。

该位置相对于表格节中的行。索引 −1 是 省略参数时的默认值，等同于在表格 节的末尾插入。

如果给定位置小于 −1 或大于行数，则抛出 "IndexSizeError" DOMException。

tbody.deleteRow(index)

移除表格节中给定位置的 tr 元素。

该位置相对于表格节中的行。索引 −1 等同于 删除表格节的最后一行。

如果给定位置小于 −1 或大于最后一行的索引，或者 不存在任何行，则抛出 "IndexSizeError" DOMException。

rows 属性必须返回一个以此元素为根的 HTMLCollection， 其过滤器仅匹配作为 此元素子级的 tr 元素。

insertRow(index) 方法必须按 如下方式执行：

  1. 如果 index 小于 −1，或大于 rows 集合中的元素数，则抛出 "IndexSizeError" DOMException。

  2. 令 table row 为在给定此元素的节点文档、 "tr" 和 HTML 命名空间的情况下创建 元素的结果。

  3. 如果 index 为 −1，或等于 rows 集合中的项目数，则将 table row追加到此元素。

  4. 否则，将 table row 作为此元素的子级插入， 紧接在 rows 集合中 第 index 个 tr 元素之前。

  5. 返回 table row。

调用 deleteRow(index) 方法时，必须 按如下方式执行：

  1. 如果 index 小于 −1，或大于或等于 rows 集合中的元素数，则抛出 "IndexSizeError" DOMException。

  2. 如果 index 为 −1，则从此元素中移除 rows 集合中的最后一个元素； 如果 rows 集合 为空，则不执行任何操作。

  3. 否则，从此元素中移除 rows 集合中的第 index 个元素。

4.9.6 thead 元素

Element/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 元素之前，但仅当 不存在其他作为该 table 元素子级的 thead 元素时。
内容模型：
零个或多个 tr 元素和脚本支持 元素。
text/html 中的 标签省略：
如果 thead 元素 后面紧跟一个 tbody 或 tfoot 元素，则可以省略该 thead 元素的结束标签。
内容属性：
全局属性
无障碍注意事项：
对于作者。
对于实现者。
净化：
默认。
DOM 接口：
使用为 tbody 元素定义的 HTMLTableSectionElement。

如果 thead 元素具有父元素，并且该父元素是一个 table，则该 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 元素

Element/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 元素之后，但仅当不存在 其他作为该 table 元素子级的 tfoot 元素时。
内容模型：
零个或多个 tr 元素和脚本支持 元素。
text/html 中的 标签省略：
如果父元素中不再有其他内容，则可以省略 tfoot 元素的结束标签。
内容属性：
全局属性
无障碍注意事项：
对于作者。
对于实现者。
净化：
默认。
DOM 接口：
使用为 tbody 元素定义的 HTMLTableSectionElement。

如果 tfoot 元素具有父元素， 并且该父元素是一个 table， 则该 tfoot 元素表示由父 table 元素的列汇总 （表尾）组成的行块。

tfoot 元素 参与表格 模型。

4.9.8 tr 元素

Element/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 元素之后，但仅当不存在作为该 table 元素子级的 tbody 元素时。
内容模型：
零个或多个 td、th 和脚本支持 元素。
text/html 中的 标签省略：
如果 tr 元素后面紧跟 另一个 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

返回一个由该行的 td 和 th 元素组成的 HTMLCollection。

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。

如果此元素的父元素是 table 元素，或者 此元素的父元素是 tbody、thead 或 tfoot 元素，并且其 祖父元素是 table 元素，则 rowIndex 属性必须返回此 tr 元素在该 table 元素的 rows 集合中的索引。如果不存在这样的 table 元素， 则该属性必须返回 −1。

如果此元素的父元素是 table、tbody、thead 或 tfoot 元素，则 sectionRowIndex 属性必须返回该 tr 元素在父元素的 rows 集合中的索引（对于表格，它是 HTMLTableElement 的 rows 集合；对于表格节，它是 HTMLTableSectionElement 的 rows 集合）。如果不存在这样的父元素，则该属性必须返回 −1。

cells 属性必须返回一个以此 tr 元素为根的 HTMLCollection， 其过滤器仅匹配作为该 tr 元素子级的 td 和 th 元素。

insertCell(index) 方法必须按 如下方式执行：

  1. 如果 index 小于 −1，或大于 cells 集合中的元素数，则抛出 "IndexSizeError" DOMException。

  2. 令 table cell 为在给定此 tr 元素的节点文档、"td" 和 HTML 命名空间的情况下创建 元素的结果。

  3. 如果 index 等于 −1，或等于 cells 集合中的项目数，则将 table cell追加到此 tr 元素。

  4. 否则，将 table cell 作为此 tr 元素的子级插入， 紧接在 cells 集合中第 index 个 td 或 th 元素之前。

  5. 返回 table cell。

deleteCell(index) 方法必须按 如下方式执行：

  1. 如果 index 小于 −1，或大于或等于 cells 集合中的元素数， 则抛出 "IndexSizeError" DOMException。

  2. 如果 index 为 −1，则从其 父级中移除 cells 集合中的最后一个元素；如果 cells 集合为空，则不执行任何操作。

  3. 否则，从其父级中移除 cells 集合中的第 index 个元素。

4.9.9 td 元素

Element/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 元素，或者父元素中不再有任何内容， 则可以省略该 td 元素的 结束标签。
内容属性：
全局属性
colspan — 单元格要跨越的列数
rowspan — 单元格要跨越的行数
headers — 此单元格的标题单元格
无障碍注意事项：
对于作者。
对于实现者。
净化：
采用带有属性 colspan、headers、rowspan 的 默认类别。
DOM 接口：
[Exposed=Window]
interface HTMLTableCellElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect, ReflectDefault=1, ReflectRange=(1, 1000)] attribute unsigned long colSpan;
  [CEReactions, Reflect, ReflectDefault=1, ReflectRange=(0, 65534)] attribute unsigned long rowSpan;
  [CEReactions, Reflect] attribute DOMString headers;
  readonly attribute long cellIndex;

  [CEReactions] attribute DOMString scope; // only conforming for th elements
  [CEReactions, Reflect] attribute DOMString abbr;  // only conforming for th elements

  // also has obsolete members
};

HTMLTableCellElement 接口也用于 th 元素。

td 元素表示表格中的数据单元格。

td 元素及其 colspan、rowspan 和 headers 属性参与表格模型。

用户代理，尤其是在非可视环境中或无法切实将表格显示为二维网格时，可以在渲染单元格的内容时向用户提供该单元格的上下文； 例如，给出它在表格模型中的位置，或者列出该单元格的标题单元格 （由分配标题单元格的算法确定）。当列出一个单元格的标题 单元格时，用户代理可以使用这些标题单元格上 abbr 属性的值（如果存在），而不是标题单元格自身的内容。

在此示例中，我们看到一个由可编辑单元格网格组成的 Web 应用程序片段 （本质上是一个简单的电子表格）。其中一个单元格已配置为显示其上方各单元格的总和。 三个单元格被标记为标题，它们使用 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 元素

Element/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 元素后面紧接着 th 元素或 td 元素，或者父元素中不再有任何内容， 则可以省略该 th 元素的 结束标签。
内容属性：
全局属性
colspan — 单元格要跨越的列数
rowspan — 单元格要跨越的行数
headers — 此单元格的标题单元格
scope — 指定标题单元格适用于哪些单元格
abbr — 在其他上下文中引用该单元格时， 用于标题单元格的替代标签
无障碍注意事项：
对于作者。
对于实现者。
净化：
采用带有属性 abbr、colspan、headers、rowspan、scope 的 默认类别。
DOM 接口：
使用为 td 元素定义的 HTMLTableCellElement。

th 元素表示表格中的标题单元格。

th 元素可以指定 scope 内容属性。

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

关键字 状态 简要说明
row 行 标题单元格适用于同一行中的部分后续单元格。
col 列 标题单元格适用于同一列中的部分后续单元格。
rowgroup 行组 标题单元格适用于该行组中所有剩余的单元格。
colgroup 列组 标题单元格适用于该列组中所有剩余的单元格。

该属性的缺失值 默认值和无效值 默认值均为自动状态。（在此状态下， 标题单元格适用于根据上下文选定的一组单元格。）

如果 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 测量项 平均值 最大值
猫
93 腿 3.5 4
10 尾巴 1 1
英语使用者
32 腿 2.67 4
35 尾巴 0.33 1

第一行中的所有标题均直接向下适用于其所在列中的各行。

具有处于行组状态的 scope 属性的标题， 适用于其行组中除第一列单元格之外的所有单元格。

其余标题仅适用于它们右侧的单元格。

4.9.11 td 和 th 元素的通用属性

td 和 th 元素 可以指定 colspan 内容属性，其值必须是大于零且小于或等于 1000 的 有效 非负整数。

td 和 th 元素 还可以指定 rowspan 内容属性， 其值必须是小于或等于 65534 的有效非负整数。对于 此属性，值为零意味着单元格要跨越行组中所有剩余的行。

这些属性分别给出单元格要跨越的列数和行数。 不得使用这些属性使单元格重叠，如表格模型的说明中所述。

td 和 th 元素 可以指定 headers 内容属性。如果指定，headers 属性必须包含一个由无序的唯一空格分隔 令牌集组成的字符串，其中任何令牌都不得与另一个令牌相同，并且每个令牌的值都必须是与该 td 或 th 元素处于 同一表格中的某个 th 元素的 ID（由表格模型定义）。

对于 ID 为 id 的 th 元素，如果同一表格中的某个 td 或 th 元素的 headers 属性值包含值为 id 的 ID 令牌，则称前者被后者 直接指向。如果 th 元素 A 被 th 或 td 元素 B 直接指向，或者存在一个元素 C，该元素自身被元素 B 指向，且 A 被 C 直接指向，则称 A 被 B 指向。

th 元素不得被自身指向。

colspan、 rowspan 和 headers 属性参与表格 模型。

cell.cellIndex

返回该单元格在行的 cells 列表中的位置。 这不一定与该单元格在表格中的 x 位置相对应， 因为前面的单元格可能跨越多行或多列。

如果该元素不在任何行中，则返回 −1。

如果元素具有一个父 tr 元素，则 cellIndex IDL 属性必须返回该单元格元素在父元素的 cells 集合中的索引。 如果不存在这样的父元素，则该属性必须返回 −1。

scope IDL 属性必须反映同名内容属性，并仅限于 已知值。

4.9.12 处理 模型

各种表格元素及其内容属性共同定义表格模型。

一个表格由对齐在二维槽位网格上的单元格组成， 槽位坐标为（x, y）。该网格是有限的，并且要么为空，要么具有一个或多个槽位。如果网格 具有一个或多个槽位，则 x 坐标始终处于 0 ≤ x < xwidth 范围内，而 y 坐标始终处于 0 ≤ y < yheight 范围内。如果 xwidth 和 yheight 中的一个或两者为零，则 表格为空（没有槽位）。表格对应于 table 元素。

一个单元格是锚定在槽位（cellx, celly）上的一组槽位，并具有特定的 width 和 height，使该单元格覆盖 坐标为（x, y）且满足 cellx ≤ x < cellx+width 和 celly ≤ y < celly+height 的所有槽位。单元格可以是数据单元格或标题单元格。数据单元格对应于 td 元素，标题单元格 对应于 th 元素。 两种类型的单元格都可以有零个或多个关联的标题单元格。

在某些错误情况下，两个单元格可能占据同一个槽位。

一行是对于某个特定的 y 值，从 x=0 到 x=xwidth-1 的一整套槽位。行通常 对应于 tr 元素， 但在某些涉及跨越多行的单元格的情况下， 一个行组 的末尾可能具有一些隐含的行。

一列是对于某个特定的 x 值，从 y=0 到 y=yheight-1 的一整套槽位。列可以 对应于 col 元素。在没有 col 元素时，列是隐含的。

一个行组是一组行，锚定在槽位（0, groupy）上， 并具有特定的 height，使行组覆盖坐标为（x, y）且满足 0 ≤ x < xwidth 和 groupy ≤ y < groupy+height 的所有槽位。行组对应于 tbody、thead 和 tfoot 元素。并非每一行都 必然处于某个行组中。

一个列组是一组列，锚定在槽位（groupx, 0）上， 并具有特定的 width，使列组覆盖坐标为（x, y）且满足 groupx ≤ x < groupx+width 和 0 ≤ y < yheight 的所有槽位。列组 对应于 colgroup 元素。 并非每一列都必然处于某个列组中。

行组之间不能相互重叠。 同样，列组之间也不能相互重叠。

一个单元格不能覆盖来自两个或更多 行组的槽位。但是，一个单元格 可以处于多个列组中。构成一个单元格的所有槽位 属于零个或一个行组 以及零个或多个列 组。

除单元格、列、行、行组和列组之外，表格还可以关联一个 caption 元素。 它为表格提供标题或图例。

表格模型错误是由 table 元素及其后代所表示的数据中的错误。文档不得存在表格模型错误。

4.9.12.1 构成表格

为了确定与 table 元素关联的表格中哪些元素对应于哪些槽位， 确定表格的尺寸（xwidth 和 yheight），并确定是否存在任何 表格模型错误，用户代理必须使用以下算法：

  1. 令 xwidth 为 0。

  2. 令 yheight 为 0。

  3. 令待处理的 tfoot 元素为一个由 tfoot 元素组成的列表，初始为空。

  4. 令该表格为由 table 元素表示的表格。 变量 xwidth 和 yheight 给出该表格的尺寸。 该表格初始为空。

  5. 如果 table 元素 没有子元素，则返回该表格（它将为空）。

  6. 将 table 元素的 第一个 caption 子元素与该表格关联。如果不存在这样的子元素，则该表格没有关联的 caption 元素。

  7. 令当前元素为 table 元素的第一个元素子元素。

    如果此算法中的某个步骤要求在没有下一个子元素时，将当前元素前进到 table 的下一个子元素，则用户代理必须跳转到此算法接近 末尾、标记为结束的步骤。

  8. 当当前元素不是以下元素之一时，将当前元素前进到 table 的下一个 子元素：

  9. 如果当前元素是 colgroup，则执行以下 子步骤：

    1. 列组：根据以下适当情况处理当前元素：

      如果当前元素具有任何 col 元素子元素

      执行以下步骤：

      1. 令 xstart 具有 xwidth 的值。

      2. 令当前列为 colgroup 元素的第一个 col 元素子元素。

      3. 列：如果当前列的 col 元素具有 span 属性， 则使用解析非负整数的规则解析其值。

        如果解析该值的结果既不是错误也不是零，则令 span 为该值。

        否则，如果 col 元素没有 span 属性，或者尝试解析该属性的值时产生错误或得到零，则令 span 为 1。

        如果 span 大于 1000，则改令其为 1000。

      4. 将 xwidth 增加 span。

      5. 令该表格中最后的 span 个列对应于当前列的 col 元素。

      6. 如果当前列不是 colgroup 元素的最后一个 col 元素子元素， 则令当前列为该 colgroup 元素的下一个 col 元素子元素，并返回标记为列的步骤。

      7. 令该表格中从 x=xstart 到 x=xwidth-1 的所有最后的列构成一个新的列组，锚定在槽位 （xstart, 0），宽度为 xwidth-xstart，并对应于 colgroup 元素。

      如果当前元素没有 col 元素子元素

      1. 如果 colgroup 元素具有 span 属性，则使用解析非负整数的规则解析其值。

        如果解析该值的结果既不是错误也不是零，则令 span 为该值。

        否则，如果 colgroup 元素没有 span 属性，或者尝试解析该属性的值时产生错误或得到零，则令 span 为 1。

        如果 span 大于 1000，则改令其为 1000。

      2. 将 xwidth 增加 span。

      3. 令该表格中最后的 span 个列构成一个新的列组，锚定在槽位 （xwidth-span, 0），宽度为 span，并对应于 colgroup 元素。

    2. 将当前元素前进到 table 的下一个子元素。

    3. 当当前元素不是以下元素之一时，将当前元素前进到 table 的下一个子元素：

    4. 如果当前元素是 colgroup 元素，则跳转到上面标记为列组的步骤。

  10. 令 ycurrent 为 0。

  11. 令向下增长的单元格列表为空列表。

  12. 行：当当前元素不是以下元素之一时，将当前元素前进到 table 的下一个子元素：

  13. 如果当前元素是 tr，则运行处理行的算法， 将当前元素前进到 table 的下一个子元素， 然后返回标记为行的步骤。

  14. 运行结束行组的算法。

  15. 如果当前元素是 tfoot，则将该元素添加到 待处理的 tfoot 元素列表中， 将当前元素前进到 table 的下一个子元素， 然后返回标记为行的步骤。

  16. 当前元素是 thead 或 tbody。

    运行处理行组的算法。

  17. 将当前元素前进到 table 的下一个子元素。

  18. 返回标记为行的步骤。

  19. 结束：对于待处理的 tfoot 元素列表中的每个 tfoot 元素，按照树顺序运行处理行组的算法。

  20. 如果该表格中存在某个行或列，其中仅包含没有单元格锚定于其上的槽位，则这是一个表格模型错误。

  21. 返回该表格。

处理行组的算法由上面用于处理 thead、tbody 和 tfoot 元素的步骤集调用， 如下：

  1. 令 ystart 具有 yheight 的值。

  2. 对于正在处理的元素的每个 tr 元素子元素，按照树 顺序运行处理行的算法。

  3. 如果 yheight > ystart，则令该表格中从 y=ystart 到 y=yheight-1 的所有最后 行构成一个新的行组，锚定在坐标为 （0, ystart）的槽位上，高度为 yheight-ystart，并对应于正在处理的元素。

  4. 运行结束行组的算法。

结束行组的算法由上面的步骤集在开始和结束一块行时调用， 如下：

  1. 当 ycurrent 小于 yheight 时，执行以下步骤：

    1. 运行增长向下增长单元格的算法。

    2. 将 ycurrent 增加 1。

  2. 清空向下增长的单元格列表。

处理行的算法由上面用于处理 tr 元素的步骤集调用，如下：

  1. 如果 yheight 等于 ycurrent，则将 yheight 增加 1。（ycurrent 永远不会大于 yheight。）

  2. 令 xcurrent 为 0。

  3. 运行增长向下增长单元格的算法。

  4. 如果正在处理的 tr 元素没有 td 或 th 元素子元素，则将 ycurrent 增加 1，中止此步骤集，并返回上面的算法。

  5. 令当前单元格为正在处理的 tr 元素中的第一个 td 或 th 元素子元素。

  6. 单元格：当 xcurrent 小于 xwidth，且坐标为 （xcurrent, ycurrent）的槽位已经分配有一个单元格时， 将 xcurrent 增加 1。

  7. 如果 xcurrent 等于 xwidth，则将 xwidth 增加 1。（xcurrent 永远不会大于 xwidth。）

  8. 如果当前单元格具有 colspan 属性，则解析该属性的值，并令 colspan 为结果。

    如果解析该值失败、返回零或该属性不存在，则改令 colspan 为 1。

    如果 colspan 大于 1000，则改令其为 1000。

  9. 如果当前单元格具有 rowspan 属性，则解析该属性的值，并令 rowspan 为结果。

    如果解析该值失败或该属性不存在，则改令 rowspan 为 1。

    如果 rowspan 大于 65534，则改令其为 65534。

  10. 令单元格向下增长为 false。

  11. 如果 rowspan 为零，则将单元格向下增长设置为 true，并将 rowspan 设置为 1。

  12. 如果 xwidth < xcurrent+colspan，则令 xwidth 为 xcurrent+colspan。

  13. 如果 yheight < ycurrent+rowspan，则令 yheight 为 ycurrent+rowspan。

  14. 令坐标为（x, y）且满足 xcurrent ≤ x < xcurrent+colspan 和 ycurrent ≤ y < ycurrent+rowspan 的槽位由一个新的单元格 c 覆盖， 该单元格锚定在（xcurrent, ycurrent）， 宽度为 colspan，高度为 rowspan，并对应于当前单元格元素。

    如果当前单元格元素是 th 元素，则令这个新 单元格 c 为标题单元格；否则，令其为数据单元格。

    为了确定哪些标题单元格适用于当前单元格元素，请使用下一节中所述的分配标题单元格的算法。

    如果涉及的任何槽位已由某个单元格覆盖，则这是一个表格模型错误。这些槽位现在有两个相互重叠的单元格。

  15. 如果单元格向下增长为 true，则将元组 {c, xcurrent, colspan} 添加到向下增长的单元格列表中。

  16. 将 xcurrent 增加 colspan。

  17. 如果当前单元格是正在处理的 tr 元素中的最后一个 td 或 th 元素子元素， 则将 ycurrent 增加 1，中止此步骤集，并返回上面的算法。

  18. 令当前单元格为正在处理的 tr 元素中的下一个 td 或 th 元素子元素。

  19. 返回标记为单元格的步骤。

当上述算法要求用户代理运行增长向下增长单元格的算法时，用户代理必须针对 向下增长的单元格列表中的每个 {cell, cellx, width} 元组（如果有），扩展单元格 cell，使其也覆盖坐标为 （x, ycurrent）且满足 cellx ≤ x < cellx+width 的槽位。

4.9.12.2 建立数据单元格 与标题单元格之间的关系

每个单元格可以分配零个或多个标题单元格。将标题单元格分配给单元格 principal cell 的 标题单元格 分配算法如下。

  1. 令 header list 为一个空的单元格列表。

  2. 令（principalx、principaly）为 principal cell 所锚定到的槽位的坐标。

  3. 如果 principal cell 指定了 headers 属性

    1. 获取 principal cell 的 headers 属性值，并按 ASCII 空白拆分该值，令 id list 为由此获得的记号列表。

    2. 对于 id list 中的每个记号，如果 Document 中ID 等于该记号的第一个元素，是同一表格中的单元格，并且该单元格不是 principal cell，则将该单元格添加到 header list。

    如果 principal cell 未指定 headers 属性

    1. 令 principalwidth 为 principal cell 的宽度。

    2. 令 principalheight 为 principal cell 的高度。

    3. 对于从 principaly 到 principaly+principalheight-1 的每个 y 值，运行扫描并 分配标题单元格的内部算法，并传入 principal cell、header list、初始坐标 （principalx、y），以及增量 Δx=−1 和 Δy=0。

    4. 对于从 principalx 到 principalx+principalwidth-1 的每个 x 值，运行扫描并 分配标题单元格的内部算法，并传入 principal cell、header list、初始坐标 （x、principaly），以及增量 Δx=0 和 Δy=−1。

    5. 如果 principal cell 锚定在一个行组中，则将所有属于行组标题、锚定在同一 行组中，并且 x 坐标小于或等于 principalx+principalwidth-1、y 坐标小于或 等于 principaly+principalheight-1 的标题单元格添加到 header list。

    6. 如果 principal cell 锚定在一个列组中，则将所有属于列组 标题、锚定在同一列组中，并且 x 坐标小于或等于 principalx+principalwidth-1、y 坐标小于或 等于 principaly+principalheight-1 的标题单元格添加到 header list。

  4. 从 header list 中移除所有空单元格。

  5. 从 header list 中移除所有重复项。

  6. 如果 principal cell 位于 header list 中，则将其移除。

  7. 将 header list 中的标题分配给 principal cell。

给定一个 principal cell、一个 header list、初始坐标 （initialx、initialy），以及 Δx 和 Δy 增量，扫描并 分配标题单元格的内部算法如下：

  1. 令 x 等于 initialx。

  2. 令 y 等于 initialy。

  3. 令 opaque headers 为一个空的单元格列表。

  4. 如果 principal cell 是标题单元格

    令 in header block 为 true，并令 headers from current header block 为仅包含 principal cell 的单元格列表。

    否则

    令 in header block 为 false，并令 headers from current header block 为一个空的单元格列表。

  5. 循环：将 x 增加 Δx；将 y 增加 Δy。

    每次调用此算法时，Δx 和 Δy 中的一个为 −1，另一个为 0。

  6. 如果 x 或 y 中任意一个小于 0，则中止此内部算法。

  7. 如果没有单元格覆盖槽位（x、y），或者有多个单元格覆盖槽位 （x、y），则返回标记为循环的子步骤。

  8. 令 current cell 为覆盖槽位（x、y）的单元格。

  9. 如果 current cell 是标题单元格

    1. 将 in header block 设置为 true。

    2. 将 current cell 添加到 headers from current header block。

    3. 令 blocked 为 false。

    4. 如果 Δx 为 0

      如果 opaque headers 列表中存在任何与 current cell 锚定于相同 x 坐标，并且宽度与 current cell 相同的单元格，则令 blocked 为 true。

      如果 current cell 不是列标题，则令 blocked 为 true。

      如果 Δy 为 0

      如果 opaque headers 列表中存在任何与 current cell 锚定于相同 y 坐标，并且高度与 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 列表。

  10. 返回标记为循环的步骤。

如果一个宽度为 width、高度为 height，并锚定于坐标为 （x、y）的槽位的标题单元格满足以下任一条件，则称其为列标题：

如果一个宽度为 width、高度为 height，并锚定于坐标为 （x、y）的槽位的标题单元格满足以下任一条件，则称其为行标题：

如果一个标题单元格的 scope 属性处于列组状态，则称其为列组标题。

如果一个标题单元格的 scope 属性处于行 组状态，则称其为行组标题。

如果一个单元格不包含任何元素，并且其子 文本内容（如果有）仅由ASCII 空白组成，则称其为空单元格。

4.9.13 示例

本节是非规范性的。

以下展示了如何标记《史密森尼物理表，第 71 卷》中表 45 的底部部分：

<table>
 <caption>规格值：<b>钢材</b>，<b>铸件</b>，
 Ann. A.S.T.M. A27-16，B 级；* P 最大值 0.06；S 最大值 0.05。</caption>
 <thead>
  <tr>
   <th rowspan=2>等级。</th>
   <th rowspan=2>屈服点。</th>
   <th colspan=2>极限抗拉强度</th>
   <th rowspan=2>伸长率百分比，50.8&nbsp;mm 或 2&nbsp;in。</th>
   <th rowspan=2>断面收缩率百分比。</th>
  </tr>
  <tr>
   <th>kg/mm<sup>2</sup></th>
   <th>lb/in<sup>2</sup></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>硬</td>
   <td>极限值的 0.45</td>
   <td>56.2</td>
   <td>80,000</td>
   <td>15</td>
   <td>20</td>
  </tr>
  <tr>
   <td>中等</td>
   <td>极限值的 0.45</td>
   <td>49.2</td>
   <td>70,000</td>
   <td>18</td>
   <td>25</td>
  </tr>
  <tr>
   <td>软</td>
   <td>极限值的 0.45</td>
   <td>42.2</td>
   <td>60,000</td>
   <td>22</td>
   <td>30</td>
  </tr>
 </tbody>
</table>

此表格可能如下所示：

规格值：钢材、铸件， Ann. A.S.T.M. A27-16，B 级；* P 最大值 0.06；S 最大值 0.05。
等级。 屈服点。 极限抗拉强度 伸长率百分比，50.8 mm 或 2 in。 断面收缩率百分比。
kg/mm2 lb/in2
硬 极限值的 0.45 56.2 80,000 15 20
中等 极限值的 0.45 49.2 70,000 18 25
软 极限值的 0.45 42.2 60,000 22 30

以下展示了如何标记苹果公司 2008 财年 10-K 申报文件第 46 页上的毛利表：

<table>
 <thead>
  <tr>
   <th>
   <th>2008
   <th>2007
   <th>2006
 <tbody>
  <tr>
   <th>净销售额
   <td>$ 32,479
   <td>$ 24,006
   <td>$ 19,315
  <tr>
   <th>销售成本
   <td>  21,334
   <td>  15,852
   <td>  13,717
 <tbody>
  <tr>
   <th>毛利
   <td>$ 11,145
   <td>$  8,154
   <td>$  5,598
 <tfoot>
  <tr>
   <th>毛利率
   <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> 研发
       <td> $ 1,109 <td> $ 782 <td> $ 712
  <tr> <th scope=row> 占净销售额的百分比
       <td> 3.4% <td> 3.3% <td> 3.7%
 <tbody>
  <tr> <th scope=rowgroup> 销售、一般及行政费用
       <td> $ 3,761 <td> $ 2,963 <td> $ 2,433
  <tr> <th scope=row> 占净销售额的百分比
       <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>顾客姓名：<input></label></p>
</form>

为了让用户选择披萨的尺寸，可以使用一组单选按钮。单选按钮也使用 input 元素， 但这次使用值为 radio 的 type 属性。 为了使这些单选按钮作为一个组工作，需要使用 name 属性为它们提供共同的名称。 要将一批控件组合在一起，例如本例中的单选按钮，可以使用 fieldset 元素。这种控件组的标题由 fieldset 中的第一个元素给出，该元素必须是 legend 元素。 

<form>
 <p><label>顾客姓名：<input></label></p>
 <fieldset>
  <legend> 披萨尺寸 </legend>
  <p><label> <input type=radio name=size> 小 </label></p>
  <p><label> <input type=radio name=size> 中 </label></p>
  <p><label> <input type=radio name=size> 大 </label></p>
 </fieldset>
</form>

相对于上一步的更改已突出显示。

为了选择配料，可以使用复选框。这些复选框使用 input 元素， 并带有值为 checkbox 的 type 属性： 

<form>
 <p><label>顾客姓名：<input></label></p>
 <fieldset>
  <legend> 披萨尺寸 </legend>
  <p><label> <input type=radio name=size> 小 </label></p>
  <p><label> <input type=radio name=size> 中 </label></p>
  <p><label> <input type=radio name=size> 大 </label></p>
 </fieldset>
 <fieldset>
  <legend> 披萨配料 </legend>
  <p><label> <input type=checkbox> 培根 </label></p>
  <p><label> <input type=checkbox> 额外奶酪 </label></p>
  <p><label> <input type=checkbox> 洋葱 </label></p>
  <p><label> <input type=checkbox> 蘑菇 </label></p>
 </fieldset>
</form>

编写此表单的披萨店总是出错，因此需要一种联系顾客的方式。为此，可以使用专门用于电话号码的表单控件 （input 元素，其 type 属性设置为 tel）和电子邮件地址控件 （input 元素，其 type 属性设置为 email）： 

<form>
 <p><label>顾客姓名：<input></label></p>
 <p><label>电话：<input type=tel></label></p>
 <p><label>电子邮件地址：<input type=email></label></p>
 <fieldset>
  <legend> 披萨尺寸 </legend>
  <p><label> <input type=radio name=size> 小 </label></p>
  <p><label> <input type=radio name=size> 中 </label></p>
  <p><label> <input type=radio name=size> 大 </label></p>
 </fieldset>
 <fieldset>
  <legend> 披萨配料 </legend>
  <p><label> <input type=checkbox> 培根 </label></p>
  <p><label> <input type=checkbox> 额外奶酪 </label></p>
  <p><label> <input type=checkbox> 洋葱 </label></p>
  <p><label> <input type=checkbox> 蘑菇 </label></p>
 </fieldset>
</form>

可以使用一个 input 元素， 并将其 type 属性设置为 time，以询问送达时间。许多此类表单控件都有用于精确控制可指定值的 属性；在本例中，三个特别值得关注的属性是 min、max 和 step。它们分别设置 最早时间、最晚时间以及允许值之间的间隔（以秒为单位）。这家披萨店只在上午 11 点至晚上 9 点之间送货， 并且不承诺精确到小于 15 分钟的增量，可以按如下方式进行标记：

<form>
 <p><label>顾客姓名：<input></label></p>
 <p><label>电话：<input type=tel></label></p>
 <p><label>电子邮件地址：<input type=email></label></p>
 <fieldset>
  <legend> 披萨尺寸 </legend>
  <p><label> <input type=radio name=size> 小 </label></p>
  <p><label> <input type=radio name=size> 中 </label></p>
  <p><label> <input type=radio name=size> 大 </label></p>
 </fieldset>
 <fieldset>
  <legend> 披萨配料 </legend>
  <p><label> <input type=checkbox> 培根 </label></p>
  <p><label> <input type=checkbox> 额外奶酪 </label></p>
  <p><label> <input type=checkbox> 洋葱 </label></p>
  <p><label> <input type=checkbox> 蘑菇 </label></p>
 </fieldset>
 <p><label>首选送达时间：<input type=time min="11:00" max="21:00" step="900"></label></p>
</form>

textarea 元素可用于提供多行文本控件。在本例中，我们将使用它为 顾客提供填写送货说明的空间：

<form>
 <p><label>顾客姓名：<input></label></p>
 <p><label>电话：<input type=tel></label></p>
 <p><label>电子邮件地址：<input type=email></label></p>
 <fieldset>
  <legend> 披萨尺寸 </legend>
  <p><label> <input type=radio name=size> 小 </label></p>
  <p><label> <input type=radio name=size> 中 </label></p>
  <p><label> <input type=radio name=size> 大 </label></p>
 </fieldset>
 <fieldset>
  <legend> 披萨配料 </legend>
  <p><label> <input type=checkbox> 培根 </label></p>
  <p><label> <input type=checkbox> 额外奶酪 </label></p>
  <p><label> <input type=checkbox> 洋葱 </label></p>
  <p><label> <input type=checkbox> 蘑菇 </label></p>
 </fieldset>
 <p><label>首选送达时间：<input type=time min="11:00" max="21:00" step="900"></label></p>
 <p><label>送货说明：<textarea></textarea></label></p>
</form>

最后，为了使表单可以提交，应使用 button 元素： 

<form>
 <p><label>顾客姓名：<input></label></p>
 <p><label>电话：<input type=tel></label></p>
 <p><label>电子邮件地址：<input type=email></label></p>
 <fieldset>
  <legend> 披萨尺寸 </legend>
  <p><label> <input type=radio name=size> 小 </label></p>
  <p><label> <input type=radio name=size> 中 </label></p>
  <p><label> <input type=radio name=size> 大 </label></p>
 </fieldset>
 <fieldset>
  <legend> 披萨配料 </legend>
  <p><label> <input type=checkbox> 培根 </label></p>
  <p><label> <input type=checkbox> 额外奶酪 </label></p>
  <p><label> <input type=checkbox> 洋葱 </label></p>
  <p><label> <input type=checkbox> 蘑菇 </label></p>
 </fieldset>
 <p><label>首选送达时间：<input type=time min="11:00" max="21:00" step="900"></label></p>
 <p><label>送货说明：<textarea></textarea></label></p>
 <p><button>提交订单</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 请求。要指定所使用的确切方法，应在 form 元素上指定 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>顾客姓名：<input name="custname"></label></p>
 <p><label>电话：<input type=tel name="custtel"></label></p>
 <p><label>电子邮件地址：<input type=email name="custemail"></label></p>
 <fieldset>
  <legend> 披萨尺寸 </legend>
  <p><label> <input type=radio name=size value="small"> 小 </label></p>
  <p><label> <input type=radio name=size value="medium"> 中 </label></p>
  <p><label> <input type=radio name=size value="large"> 大 </label></p>
 </fieldset>
 <fieldset>
  <legend> 披萨配料 </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> 培根 </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> 额外奶酪 </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> 洋葱 </label&g