目录

  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 workers
  11. 11 Worklets
  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 URLs
      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.3meta 元素中提取字符编码
      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 扩展属性使用 reflect
      3. 2.6.3 在规范中使用 reflect
      4. 2.6.4 集合
        1. 2.6.4.1 The HTMLAllCollection 接口
          1. 2.6.4.1.1 [[Call]] ( thisArgument, argumentsList )
        2. 2.6.4.2 The HTMLFormControlsCollection 接口
        3. 2.6.4.3 The HTMLOptionsCollection 接口
      5. 2.6.5 The 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 The Document 对象
      2. 3.1.2 The 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 “nothing”内容模型
        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 The title 属性
        2. 3.2.6.2 The langxml:lang 属性
        3. 3.2.6.3 The translate 属性
        4. 3.2.6.4 The dir 属性
        5. 3.2.6.5 The style 属性
        6. 3.2.6.6 嵌入自定义不可见数据 使用 data-* 属性
      7. 3.2.7 The innerTextouterText 属性
      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 The html 元素
    2. 4.2 文档元数据
      1. 4.2.1 The head 元素
      2. 4.2.2 The title 元素
      3. 4.2.3 The base 元素
      4. 4.2.4 The link 元素
        1. 4.2.4.1 处理 media 属性
        2. 4.2.4.2 处理 type 属性
        3. 4.2.4.3link 元素获取和处理资源
        4. 4.2.4.4 处理 `Link` 头部
        5. 4.2.4.5 早期提示
        6. 4.2.4.6 提供用户通过 link 元素创建的超链接进行访问的方式
      5. 4.2.5 The 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 The style 元素
      7. 4.2.7 样式和脚本的交互
    3. 4.3 区块
      1. 4.3.1 The body 元素
      2. 4.3.2 The article 元素
      3. 4.3.3 The section 元素
      4. 4.3.4 The nav 元素
      5. 4.3.5 The aside 元素
      6. 4.3.6 The h1h2h3h4h5h6 元素
      7. 4.3.7 The hgroup 元素
      8. 4.3.8 The header 元素
      9. 4.3.9 The footer 元素
      10. 4.3.10 The 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 The p 元素
      2. 4.4.2 The hr 元素
      3. 4.4.3 The pre 元素
      4. 4.4.4 The blockquote 元素
      5. 4.4.5 The ol 元素
      6. 4.4.6 The ul 元素
      7. 4.4.7 The menu 元素
      8. 4.4.8 The li 元素
      9. 4.4.9 The dl 元素
      10. 4.4.10 The dt 元素
      11. 4.4.11 The dd 元素
      12. 4.4.12 The figure 元素
      13. 4.4.13 The figcaption 元素
      14. 4.4.14 The main 元素
      15. 4.4.15 The search 元素
      16. 4.4.16 The div 元素
    5. 4.5 文本级语义
      1. 4.5.1 The a 元素
      2. 4.5.2 The em 元素
      3. 4.5.3 The strong 元素
      4. 4.5.4 The small 元素
      5. 4.5.5 The s 元素
      6. 4.5.6 The cite 元素
      7. 4.5.7 The q 元素
      8. 4.5.8 The dfn 元素
      9. 4.5.9 The abbr 元素
      10. 4.5.10 The ruby 元素
      11. 4.5.11 The rt 元素
      12. 4.5.12 The rp 元素
      13. 4.5.13 The data 元素
      14. 4.5.14 The time 元素
      15. 4.5.15 The code 元素
      16. 4.5.16 The var 元素
      17. 4.5.17 The samp 元素
      18. 4.5.18 The kbd 元素
      19. 4.5.19 The subsup 元素
      20. 4.5.20 The i 元素
      21. 4.5.21 The b 元素
      22. 4.5.22 The u 元素
      23. 4.5.23 The mark 元素
      24. 4.5.24 The bdi 元素
      25. 4.5.25 The bdo 元素
      26. 4.5.26 The span 元素
      27. 4.5.27 The br 元素
      28. 4.5.28 The wbr 元素
      29. 4.5.29 使用总结
    6. 4.6 链接
      1. 4.6.1 介绍
      2. 4.6.2aarea 元素创建的链接
      3. 4.6.3 超链接元素的API
      4. 4.6.4 API for aarea 元素的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 The ins 元素
      2. 4.7.2 The del 元素
      3. 4.7.3 Attributes common to insdel 元素的公共属性
      4. 4.7.4 编辑与段落
      5. 4.7.5 编辑与列表
      6. 4.7.6 编辑与表格
    8. 4.8 嵌入内容
      1. 4.8.1 The picture 元素
      2. 4.8.2 The source 元素
      3. 4.8.3 The img 元素
      4. 4.8.4 图像
        1. 4.8.4.1 介绍
          1. 4.8.4.1.1 自适应图像
        2. 4.8.4.2 Attributes common to sourceimglink 元素的共同属性
          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 从属性创建source set
          9. 4.8.4.3.9 更新source set
          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 The iframe 元素
      6. 4.8.6 The embed 元素
      7. 4.8.7 The object 元素
      8. 4.8.8 The video 元素
      9. 4.8.9 The audio 元素
      10. 4.8.10 The 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 AudioTrackListVideoTrackList 对象
          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 The 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 The map 元素
      13. 4.8.13 The 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 The table 元素
        1. 4.9.1.1 描述表格的技巧
        2. 4.9.1.2 表格设计技巧
      2. 4.9.2 The caption 元素
      3. 4.9.3 The colgroup 元素
      4. 4.9.4 The col 元素
      5. 4.9.5 The tbody 元素
      6. 4.9.6 The thead 元素
      7. 4.9.7 The tfoot 元素
      8. 4.9.8 The tr 元素
      9. 4.9.9 The td 元素
      10. 4.9.10 The th 元素
      11. 4.9.11 Attributes common to tdth 元素的共有属性
      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 The form 元素
      4. 4.10.4 The label 元素
      5. 4.10.5 The input 元素
        1. 4.10.5.1 States of the 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 The maxlengthminlength 属性
          2. 4.10.5.3.2 The size 属性
          3. 4.10.5.3.3 The readonly 属性
          4. 4.10.5.3.4 The required 属性
          5. 4.10.5.3.5 The multiple 属性
          6. 4.10.5.3.6 The pattern 属性
          7. 4.10.5.3.7 The minmax 属性
          8. 4.10.5.3.8 The step 属性
          9. 4.10.5.3.9 The list 属性
          10. 4.10.5.3.10 The placeholder 属性
        4. 4.10.5.4 通用 input 元素 API
        5. 4.10.5.5 常见事件行为
      6. 4.10.6 The button 元素
      7. 4.10.7 The select 元素
      8. 4.10.8 The datalist 元素
      9. 4.10.9 The optgroup 元素
      10. 4.10.10 The option 元素
      11. 4.10.11 The textarea 元素
      12. 4.10.12 The output 元素
      13. 4.10.13 The progress 元素
      14. 4.10.14 The meter 元素
      15. 4.10.15 The fieldset 元素
      16. 4.10.16 The legend 元素
      17. 4.10.17 The 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 The SubmitEvent 接口
        11. 4.10.22.11 The FormDataEvent 接口
      23. 4.10.23 重置表单
    11. 4.11 交互式元素
      1. 4.11.1 The details 元素
      2. 4.11.2 The 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 使用 accesskey 属性在 legend 元素上定义命令
        7. 4.11.3.7 使用 accesskey 属性在其他元素上定义命令
      4. 4.11.4 The dialog 元素
      5. 4.11.5 对话框轻量关闭
    12. 4.12 脚本
      1. 4.12.1 The script 元素
        1. 4.12.1.1 处理模型
        2. 4.12.1.2 脚本语言
        3. 4.12.1.3 Restrictions for contents of script 元素内容的限制
        4. 4.12.1.4 外部脚本的内联文档
        5. 4.12.1.5 Interaction of script 元素和XSLT的交互
      2. 4.12.2 The noscript 元素
      3. 4.12.3 The template 元素
        1. 4.12.3.1 Interaction of template 元素与 XSLT 和 XPath 的交互
      4. 4.12.4 The slot 元素
      5. 4.12.5 The 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 The ImageBitmap 渲染上下文
          1. 4.12.5.2.1 介绍
          2. 4.12.5.2.2 The ImageBitmapRenderingContext 接口
        3. 4.12.5.3 The 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 The CustomElementRegistry 接口
      5. 4.13.5 升级
      6. 4.13.6 自定义元素反应
      7. 4.13.7 元素内部
        1. 4.13.7.1 The 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 The hidden 属性
    2. 6.2 页面可见性
      1. 6.2.1 The VisibilityStateEntry 接口
    3. 6.3 惰性子树
      1. 6.3.1 模态对话框和惰性子树
      2. 6.3.2 The inert 属性
    4. 6.4 跟踪用户激活
      1. 6.4.1 数据模型
      2. 6.4.2 处理模型
      3. 6.4.3 受用户激活限制的API
      4. 6.4.4 The UserActivation 接口
      5. 6.4.5 用户代理自动化
    5. 6.5 元素的激活行为
      1. 6.5.1 The ToggleEvent 接口
      2. 6.5.2 The CommandEvent 接口
    6. 6.6 焦点
      1. 6.6.1 介绍
      2. 6.6.2 数据模型
      3. 6.6.3 The tabindex 属性
      4. 6.6.4 处理模型
      5. 6.6.5 顺序焦点导航
      6. 6.6.6 焦点管理 API
      7. 6.6.7 The autofocus 属性
    7. 6.7 分配键盘快捷键
      1. 6.7.1 介绍
      2. 6.7.2 The accesskey 属性
      3. 6.7.3 处理模型
    8. 6.8 编辑
      1. 6.8.1 使文档区域可编辑: contenteditable 内容属性
      2. 6.8.2 使整个文档可编辑: designMode getter 和 setter
      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.2detailshidden=until-found
      3. 6.9.3 与选择的交互
    10. 6.10 关闭请求和关闭监视器
      1. 6.10.1 关闭请求
      2. 6.10.2 关闭监视器基础设施
      3. 6.10.3 The CloseWatcher 接口
    11. 6.11 拖放
      1. 6.11.1 介绍
      2. 6.11.2 拖放数据存储
      3. 6.11.3 The DataTransfer 接口
        1. 6.11.3.1 The DataTransferItemList 接口
        2. 6.11.3.2 The DataTransferItem 接口
      4. 6.11.4 The DragEvent 接口
      5. 6.11.5 处理模型
      6. 6.11.6 事件总结
      7. 6.11.7 The draggable 属性
      8. 6.11.8 拖放模型中的安全风险
    12. 6.12 The popover 属性
      1. 6.12.1 Popover 目标属性
      2. 6.12.2 Popover 轻量关闭
  7. 7 加载网页
    1. 7.1 支持的概念
      1. 7.1.1 来源
        1. 7.1.1.1 站点
        2. 7.1.1.2 放宽同源限制
        3. 7.1.1.3 The 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 与导航和会话历史相关的 APIs
      1. 7.2.1 Security infrastructure for WindowWindowProxyLocation 对象的安全基础设施
        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 The Window 对象
        1. 7.2.2.1 打开和关闭窗口
        2. 7.2.2.2Window 对象上的索引访问
        3. 7.2.2.3Window 对象上的命名访问
        4. 7.2.2.4 访问相关窗口
        5. 7.2.2.5 历史浏览器界面元素 API
        6. 7.2.2.6 Script settings for Window 对象的脚本设置
      3. 7.2.3 The 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 The 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 The History 接口
      6. 7.2.6 导航 API
        1. 7.2.6.1 介绍
        2. 7.2.6.2 The Navigation 接口
        3. 7.2.6.3 核心基础设施
        4. 7.2.6.4 初始化和更新条目列表
        5. 7.2.6.5 The NavigationHistoryEntry 接口
        6. 7.2.6.6 历史条目列表
        7. 7.2.6.7 发起导航
        8. 7.2.6.8 正在进行的导航跟踪
        9. 7.2.6.9 The NavigationActivation 接口
        10. 7.2.6.10 The navigate 事件
          1. 7.2.6.10.1 The NavigateEvent 接口
          2. 7.2.6.10.2 The NavigationPrecommitController 接口
          3. 7.2.6.10.3 The NavigationDestination 接口
          4. 7.2.6.10.4 触发事件
          5. 7.2.6.10.5 滚动和焦点行为
      7. 7.2.7 事件接口
        1. 7.2.7.1 The NavigationCurrentEntryChangeEvent 接口
        2. 7.2.7.2 The PopStateEvent 接口
        3. 7.2.7.3 The HashChangeEvent 接口
        4. 7.2.7.4 The PageSwapEvent 接口
        5. 7.2.7.5 The PageRevealEvent 接口
        6. 7.2.7.6 The PageTransitionEvent 接口
        7. 7.2.7.7 The BeforeUnloadEvent 接口
      8. 7.2.8 The 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 相关的 navigable 集合
        6. 7.3.1.6 Navigable 销毁
        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 The javascript: URL 的特殊情况
          3. 7.4.2.3.3 片段导航
          4. 7.4.2.3.4 非 fetch 方案和外部软件
        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 Import map 解析结果
        9. 8.1.4.9 推测规则解析结果
      5. 8.1.5 模块说明符解析
        1. 8.1.5.1 解析算法
        2. 8.1.5.2 Import maps
        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 与 JavaScript 任务相关的宿主钩子
          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 与 JavaScript 模块系统相关的宿主钩子
          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 The 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 The DOMParser 接口
      2. 8.5.2 HTML 解析方法
      3. 8.5.3 HTML 序列化方法
      4. 8.5.4 The innerHTML 属性
      5. 8.5.5 The outerHTML 属性
      6. 8.5.6 The insertAdjacentHTML() 方法
      7. 8.5.7 The createContextualFragment() 方法
      8. 8.5.8 The XMLSerializer 接口
    6. 8.6 HTML 净化
      1. 8.6.1 简介
        1. 8.6.1.1 安全与不安全
      2. 8.6.2 The Sanitizer 接口
      3. 8.6.3 Sanitizer 配置
        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 clobbering
        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 The 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 The ImageData 接口
      2. 8.11.2 The ImageBitmap 接口
    12. 8.12 动画帧
  9. 9 通信
    1. 9.1 The MessageEvent 接口
    2. 9.2 服务器发送事件
      1. 9.2.1 简介
      2. 9.2.2 The 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 The MessageEventTarget 混入
      4. 9.4.4 消息端口
      5. 9.4.5 端口与垃圾回收
    5. 9.5 广播到其他浏览上下文
  10. 10 Web workers
    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 Shared workers 介绍
        4. 10.1.2.4 使用 shared 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 共享工作线程
    2. 10.2 基础设施
      1. 10.2.1 全局作用域
        1. 10.2.1.1 The WorkerGlobalScope 公共接口
        2. 10.2.1.2 专用 worker 和 DedicatedWorkerGlobalScope 接口
        3. 10.2.1.3 Shared workers 和 SharedWorkerGlobalScope 接口
      2. 10.2.2 事件循环
      3. 10.2.3 Worker的生命周期
      4. 10.2.4 处理模型
      5. 10.2.5 运行时脚本错误
      6. 10.2.6 创建 workers
        1. 10.2.6.1 The AbstractWorker 混合
        2. 10.2.6.2 Workers 的脚本设置
        3. 10.2.6.3 专用 Worker 与 Worker 接口
        4. 10.2.6.4 共享 worker 和 SharedWorker 接口
      7. 10.2.7 并发硬件能力
    3. 10.3 工作线程可用的 API
      1. 10.3.1 导入脚本和库
      2. 10.3.2 The WorkerNavigator 接口
      3. 10.3.3 The WorkerLocation 接口
  11. 11 Worklets
    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 Worklets 的脚本设置
      2. 11.3.2 The Worklet
      3. 11.3.3 Worklet 的生命周期
  12. 12 Web 存储
    1. 12.1 简介
    2. 12.2 API
      1. 12.2.1 The Storage 接口
      2. 12.2.2 The sessionStorage 获取器
      3. 12.2.3 The localStorage 获取器
      4. 12.2.4 The 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 纯文本状态
        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 和系统标识符之间状态
        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 十进制字符引用状态
        85. 13.2.5.85 数值字符引用结束状态
      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 “initial” 插入模式
          2. 13.2.6.4.2 “before html” 插入模式
          3. 13.2.6.4.3 “before head” 插入模式
          4. 13.2.6.4.4 “in head” 插入模式
          5. 13.2.6.4.5 “in head noscript” 插入模式
          6. 13.2.6.4.6 “after head” 插入模式
          7. 13.2.6.4.7 “in body” 插入模式
          8. 13.2.6.4.8 “文本” 插入模式
          9. 13.2.6.4.9 “在表格中” 插入模式
          10. 13.2.6.4.10 “表格文本中” 插入模式
          11. 13.2.6.4.11 “在标题中” 插入模式
          12. 13.2.6.4.12 “在列组中” 插入模式
          13. 13.2.6.4.13 “在表格主体中” 插入模式
          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 The hr 元素
      12. 15.3.12 The fieldsetlegend 元素
    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 The button 元素
      5. 15.5.5 The detailssummary 元素
      6. 15.5.6 The input 元素作为文本输入控件
      7. 15.5.7 The input 元素作为特定领域的控件
      8. 15.5.8 The input 元素作为范围控制
      9. 15.5.9 The input 元素作为颜色选择器
      10. 15.5.10 The input 元素作为复选框和单选按钮部件
      11. 15.5.11 The input 元素作为文件上传控件
      12. 15.5.12 The input 元素作为按钮
      13. 15.5.13 The marquee 元素
      14. 15.5.14 The meter 元素
      15. 15.5.15 The progress 元素
      16. 15.5.16 The select 元素
      17. 15.5.17 The textarea 元素
    6. 15.6 Frame 和 frameset
    7. 15.7 交互媒体
      1. 15.7.1 链接、表单和导航
      2. 15.7.2 The 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 The 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 本规范的适用范围

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

CSS SVG MathML Service Workers IDB Fetch CSP AV1 Opus PNG THIS SPECIFICATION HTTP TLS DOM Unicode Web IDL MIME URL XML JavaScript Encoding

1.2 这是 HTML5 吗?

本节为非规范性内容。

简而言之:是的。

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

1.3 背景

本节为非规范性内容。

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

1.4 读者

本节为非规范性内容。

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

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

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

1.5 范围

本节为非规范性内容。

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

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

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

1.6 历史

本节为非规范性内容。

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

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

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

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

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

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

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

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

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

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

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

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

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

1.7 设计说明

本节为非规范性内容。

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

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

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

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

1.7.1 脚本执行的可序列化

本节为非规范性内容。

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

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

1.7.2 扩展性

本节为非规范性内容。

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

1.8 HTML 与 XML 语法

本节为非规范性内容。

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

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

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

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

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

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

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

1.9 本规范的结构

本节为非规范性内容。

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

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

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

1.9.1 如何阅读本规范

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

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

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

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

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

1.9.2 排版约定

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

这是一个备注。

这是一个示例。

这是一个未解决的问题。

这是一个警告。

[Exposed=Window]
interface Example {
  // this is an IDL definition
};
variable = object.method([optionalArgument])

这是一个描述接口使用的注释。

/* this is a CSS fragment */

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

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

其他代码片段标记为 like this

变量标记为 这样

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

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

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

1.10 HTML简要介绍

本节非规范性。

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

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

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

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

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

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

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

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

属性 放在开始标签内,由一个 名称 和一个 组成,中间用"=" character. The attribute value can remain unquoted if it doesn't contain ASCII 空白字符 或任何 " ' ` = <>. Otherwise, it has to be quoted using either single or double quotes. The value, along with the "="字符。

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

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

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

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

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

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

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

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


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

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

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

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

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


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

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

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

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

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

本节为非规范性内容。

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

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

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

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

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

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

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

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

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

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

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

这被称为跨站脚本攻击。

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

跨站请求伪造(CSRF)

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

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

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

点击劫持

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

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

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

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

本节为非规范性内容。

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

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

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

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

Here, the author uses the onload handler on an img element to catch the load 事件:

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

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

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

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

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

1.10.3 如何捕捉编写 HTML 时的错误:验证器和一致性检查器

本节为非规范性内容。

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

1.11 对作者的合规要求

本节为非规范性内容。

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

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

1.11.1 表现性标记

本节为非规范性内容。

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

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

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

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

维护成本更高

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

文档大小更大

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

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

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

还值得注意的是,一些以前被认为是表现性的元素在本规范中被重新定义为与媒体无关: bihrssmallu

1.11.2 语法错误

本节为非规范性内容。

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

不直观的错误处理行为

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

例如,以下标记片段会导致 DOM 中的 hr element that is an earlier sibling of the corresponding table element:

<table><hr>...
具有可选错误恢复的错误

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

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

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

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

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

导致性能显著下降的错误

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

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

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

这个片段生成的 DOM 将是:

涉及脆弱语法构造的错误

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

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

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

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

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

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

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

因此,上述情况的正确表示方式如下:

<a href="?bill&ted">Bill and Ted</a> <!-- &ted is ok, since it's not a named character reference -->
<a href="?art&amp;copy">Art and Copy</a> <!-- the & has to be escaped, since &copy is a named character reference -->
涉及已知的旧版用户代理互操作性问题的错误

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

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

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

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

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

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

作者意图不明确的情况

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

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

<h1>Contact details</h2>
可能是打字错误的情况

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

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

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

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

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

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

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

本节是非规范性的。

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

涉及可疑语义的内容错误

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

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

涉及表达语义冲突的错误

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

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

<hr role="cell">
<input type=radio role=progressbar>

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

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

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

例如, div 元素作为 块盒显示,而 span 元素作为 行内盒显示。在一个 块盒 中放置一个 行内盒 是不必要的混淆;因为无论是仅嵌套 div 元素,还是仅嵌套 span elements, or nesting span elements inside div elements all serve the same purpose as nesting a div 元素嵌套在 span element, but only the latter involves a block box in an inline box, the latter combination is disallowed.

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

表明对规范误解的错误

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

例如,将 disabled 属性设置为false" is disallowed, because despite the appearance of meaning that the element is enabled, it in fact means that the element is disabled (what matters for implementations is the presence of the attribute, not its value).

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

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

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

涉及解析器特性的错误

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

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

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

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

<p>Welcome. </p><form><label>Name:</label> <input></form>
导致脚本难以调试的错误

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

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

浪费创作时间的错误

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

例如,一个 script 元素的 src attribute causes the element's contents to be ignored. However, this isn't obvious, especially if the element's contents appear to be executable script — which can lead to authors spending a lot of time trying to debug the inline script without realizing that it is not executing. To reduce this problem, this specification makes it non-conforming to have executable script in a script element when the src attribute is present. This means that authors who are validating their documents are less likely to waste time with this kind of mistake.

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

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

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

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

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

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

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

涉及误用其他规范的错误

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

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

1.12 建议阅读

本节是非规范性的。

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

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

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

Unicode 安全考虑 [UTR36]

由于Unicode包含了大量字符并结合了世界上各种书写系统,不正确的使用可能会使程序或系统面临潜在的安全攻击。这在越来越多的产品国际化时尤为重要。本文件描述了程序员、系统分析员、标准开发人员和用户应考虑的一些安全问题,并提供了具体的建议以降低问题的风险。

网页内容无障碍指南 (WCAG) [WCAG]

网页内容无障碍指南 (WCAG) 涵盖了一系列使网页内容更具可访问性的建议。遵循这些指南将使内容对更多有残疾的人更易访问,包括盲人和低视力者、聋人和听力损失者、学习障碍者、认知限制者、行动不便者、言语障碍者、光敏感者及其组合。遵循这些指南通常也会使您的网页内容对一般用户更易用。

创作工具无障碍指南 (ATAG) 2.0 [ATAG]

本规范提供了设计更易于残障人士使用的网页内容创作工具的指南。符合这些指南的创作工具将通过为残障作者提供可访问的用户界面以及通过启用、支持和促进所有作者创作可访问的网页内容来促进无障碍。

用户代理无障碍指南 (UAAG) 2.0 [UAAG]

本文件提供了设计用户代理的指南,以降低残障人士在网页无障碍方面的障碍。用户代理包括浏览器和其他类型的检索和呈现网页内容的软件。符合这些指南的用户代理将通过其自身的用户界面和其他内部功能(包括与其他技术(尤其是辅助技术)通信的能力)促进无障碍。此外,所有用户,不仅仅是残障用户,都会发现符合这些指南的用户代理更易用。

2 常见基础设施

本规范依赖于 Infra[INFRA]

2.1 术语

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

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

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

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

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


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

2.1.1 并行处理

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

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

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

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

A 并行队列 有一个 算法队列 (一个 队列),最初为空。

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

启动一个新的并行队列,请运行以下步骤:

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

  2. Run the following steps 并行运行以下步骤:

    1. 当为真时:

      1. steps be the result of dequeuing from parallelQueue算法队列.

      2. 如果 steps 不为空,则运行 steps

      3. 断言:运行 steps did not throw an exception, as steps running in parallel are not allowed to throw.

      实现不需要将此作为持续运行的循环来实现。标准中的算法应易于理解,不一定对电池寿命或性能有好处。

  3. 返回 parallelQueue

Steps running in parallel can themselves run other steps in in parallel. E.g., inside a 并行队列 内并行运行一系列步骤可能是有用的。

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

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

  1. p 为在 此对象相关领域.

  2. global此对象相关全局对象.

  3. Run the following steps 并行运行以下步骤:

    1. 如果 nameList 包含 name, 则 在全局任务队列中 ,基于 DOM 操作任务源global ,拒绝 p 并抛出 TypeError, and abort these steps.

    2. Do some potentially lengthy work.

    3. name 追加到 nameList.

    4. 在全局任务队列中 ,基于 DOM 操作任务源global ,以 undefined 解析 p with undefined.

  4. 返回 p.

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

并行队列解决了这个问题。标准会令 nameListQueue启动一个新的并行 队列 的结果,并将名称添加步骤定义如下:

  1. p 为在 此对象相关领域.

  2. global此对象相关全局对象.

  3. Enqueue the following steps to nameListQueue:

    1. 如果 nameList 包含 name, 则 在全局任务队列中 ,基于 DOM 操作任务源global ,拒绝 p 并抛出 TypeError, and abort these steps.

    2. Do some potentially lengthy work.

    3. name 追加到 nameList.

    4. 在全局任务队列中 ,基于 DOM 操作任务源global ,以 undefined 解析 p with undefined.

  4. 返回 p.

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

2.1.2 资源

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

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

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

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

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

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

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

2.1.3 XML兼容性

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

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

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

2.1.4 DOM树

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

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

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

一个 HTML 元素可以有特定的 HTML 元素插入步骤HTML 元素连接后步骤HTML 元素移除步骤HTML 元素移动步骤 ,这些都为其元素的 本地名称定义。

HTML标准的 插入步骤 ,给定 insertedNode,定义如下:

  1. 如果 insertedNode 是一个元素,并且其 命名空间HTML 命名空间, and this standard defines HTML element insertion steps for insertedNode本地名称, then run the corresponding HTML 元素插入步骤 ,给定 insertedNode

  2. 如果 insertedNode表单关联元素 或其祖先是 表单关联元素,则:

    1. 如果 表单关联元素解析器插入标志 已设置,则返回。

    2. 重置 of the 表单关联元素的表单所有者。

  3. 如果 insertedNode is an Element that is not on the 打开元素栈 中的 HTML解析器, then 处理内部资源链接 ,给定 insertedNode节点文档

HTML 标准的 连接后步骤 ,给定 insertedNode,定义如下:

  1. 如果 insertedNode 是一个元素,并且其 命名空间HTML 命名空间, and this standard defines HTML element post-connection steps for insertedNode本地名称定义了 HTML 元素连接后的步骤 ,则在给定 insertedNode.

HTML 标准中 移除步骤 ,给定 removedNodeisSubtreeRootoldAncestor,定义如下:

  1. documentremovedNode节点文档

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

    执行 失焦步骤聚焦步骤焦点更新步骤,因此不会触发 blurchange 事件。

  3. 如果 removedNode 是一个元素,其 命名空间HTML 命名空间, and this standard defines HTML element removing steps for removedNode本地名称, then run the corresponding 对应的 HTML 元素移除步骤 , 以 removedNodeisSubtreeRootoldAncestor作为参数运行。

  4. 如果 removedNode is a form-associated element with a non-null 表单所有者 and removedNode 及其 表单所有者 不再位于同一 中,则 reset the form owner of removedNode.

  5. 如果 removedNodepopover 属性不处于 无 Popover state, then run the hide popover algorithm given removedNode, false, false, false, and null.

The moving steps for the HTML Standard, given movedNodeisSubtreeRootoldAncestor, are defined as the following:

  1. 如果 movedNode 是一个元素,其 命名空间HTML 命名空间, and this standard defines HTML element moving steps for movedNode本地名称定义了 HTML 元素移动步骤 , 那么,给定 movedNodeisSubtreeRootoldAncestor.

  2. 如果 movedNode is a form-associated element with a non-null 表单所有者 and movedNode 与其 表单所有者 不再处于同一个 中,则 reset the form owner of movedNode.

A node is inserted into a document when the 插入步骤 以某个节点作为参数调用时,并且该节点现在在 文档树中,则称该 节点已插入文档 。类似地,当 移除步骤 以某个节点作为参数调用时,并且该节点现在不再在 文档树中.

A node becomes connected when the 插入步骤 以某个节点作为参数调用时,并且该节点现在 已连接,则该节点 变为连接状态 。类似地,当 移除步骤 以某个节点作为参数调用时,并且该节点现在不再 已连接.

A node is browsing-context connected when it is 已连接 且其 包含shadow root浏览上下文 非空时,该节点是 浏览上下文连接的 。当 插入步骤 以某个节点作为参数调用时,并且该节点现在 浏览上下文连接的,则该节点 变为浏览上下文连接的 。当 移除步骤 以某个节点作为参数调用时,并且该节点现在不再 浏览上下文连接的,或当其 包含shadow root浏览上下文 becomes null.

2.1.5 脚本

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

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

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

2.1.6 插件

术语 插件 是指由用户代理使用的一组 实现定义的 内容处理程序,这些处理程序可以参与用户代理对 Document object, but that neither act as child navigables of the Document nor introduce any Node objects to the Document's DOM.

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

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

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

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

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

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

2.1.7 字符编码

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

2.1.8 合规类

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

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

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

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

用户代理分为几类(重叠),具有不同的合规要求。

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

支持 XML语法 must process elements and attributes from the HTML namespace found in XML documents as described in this specification, so that users can interact with them, unless the semantics of those elements have been overridden by other specifications.

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

支持 HTML语法 must process documents labeled with an HTML MIME type as described in this specification, so that users can interact with them.

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

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

非交互式呈现用户代理

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

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

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

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

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

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

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

无脚本支持的用户代理

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

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

一致性检查器

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

一致性检查器必须检查输入文档在没有 浏览上下文 时解析的符合情况(即 不运行脚本,并且 解析器的 脚本模式已禁用),同时还应 检查输入文档在解析时有 浏览上下文 且 脚本执行的情况下是否符合,并且脚本不会导致出现非一致性状态,除非 在脚本执行期间短暂出现。(这仅仅是“建议”而不是“必须” 的要求,因为已经证实这是不可能实现的。 [COMPUTABLE]

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

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

换句话说,有三种类型的合规标准:

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

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

数据挖掘工具

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

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

创作工具和标记生成器

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

创作工具可以免于严格遵守“仅将元素用于其指定目的”的要求, 但仅限于创作工具尚无法确定作者意图的程度。不过,创作工具不得自动误用元素, 或鼓励其用户这样做。

例如,使用 address 元素表示 任意联系信息并不合规;该元素只能用于标记其最近的 articlebody 元素祖先的联系信息。 但是,由于 创作工具很可能无法判断这种差异,因此创作工具可免于该要求。不过,这并不意味着创作工具可以将 address 元素用于任何斜体文本块(例如);它只是意味着,当用户使用某个工具来插入某个 article 元素的联系信息时, 创作工具不必验证用户确实是在这样做,而不是在插入其他内容。

就合规性检查而言,编辑器必须输出与合规性检查器将要验证的程度相同的合规文档。

当创作工具用于编辑非合规文档时,它可以保留文档中在本次编辑会话期间未被编辑部分的 合规性错误(即,编辑工具允许往返处理有错误的内容)。但是,如果错误被这样保留下来, 创作工具不得声称其输出是合规的。

创作工具预计大致分为两类:基于结构 或语义数据工作的工具,以及基于特定媒体的所见即所得编辑 方式工作的工具(WYSIWYG)。

前者是创作 HTML 的工具的首选机制,因为 源信息中的结构可用于就哪些 HTML 元素和 属性最合适作出明智选择。

不过,WYSIWYG 工具是正当的。WYSIWYG 工具应该使用它们知道 合适的元素,并且不应该使用它们不知道是否合适的元素。在某些极端情况下, 这可能意味着将流元素的使用限制为少数几个元素,例如 divbispan ,并大量使用 style 属性。

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

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

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

2.1.9 依赖关系

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

基础结构(Infra)

以下术语在 基础结构(Infra)中定义: [INFRA]

Unicode and Encoding

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

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

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

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

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

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

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


The attribute with the name space in the XML namespace is defined by 可扩展标记语言 (XML)定义。 [XML]

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

This specification also references the <?xml-stylesheet?> processing instruction, defined in Associating Style Sheets with XML documents. [XMLSSPI]

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

URLs

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

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

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

URL Pattern

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

HTTP and related specifications

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

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

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

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

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

Fetch

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

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

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

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

The No-Vary-Search HTTP Response Header Field

以下术语在 No-Vary-Search HTTP Response Header Field中定义: [NOVARYSEARCH]

Paint Timing

The following terms are defined in Paint Timing中定义了以下术语: [PAINTTIMING]

Navigation Timing

The following terms are defined in Navigation Timing中定义了以下术语: [NAVIGATIONTIMING]

Resource Timing

The following terms are defined in Resource Timing中定义了以下术语: [RESOURCETIMING]

Performance Timeline

The following terms are defined in Performance Timeline中定义了以下术语: [PERFORMANCETIMELINE]

Long Animation Frames

The following terms are defined in Long Animation Frames中定义了以下术语: [LONGANIMATIONFRAMES]

Long Tasks

The following terms are defined in Long Tasks中定义了以下术语: [LONGTASKS]

Web IDL

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

以下术语在 Web IDL中定义:

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

本规范中术语 throw 的使用定义见 Web IDLDOMException 类型和以下异常名称由 Web IDL 定义,并由本规范使用:

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

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

JavaScript

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

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

以下术语在 JavaScript 规范中定义,并在本规范中使用:

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

支持 JavaScript 的用户代理还必须实现 Import Text 提案。 下列术语在该提案中定义,并在本规范中使用: [JSIMPORTTEXT]

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

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

WebAssembly

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

DOM

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

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

特别地,以下功能在 DOM中定义: [DOM]

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

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

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

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

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

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

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

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

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

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

File API

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

Indexed Database API

以下术语在 Indexed Database API中定义: [INDEXEDDB]

Media Source Extensions

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

Media Capture and Streams

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

Reporting

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

XMLHttpRequest

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

Battery Status

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

Media Queries

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

CSS 模块

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

When this specification requires that something be parsed according to a particular CSS grammar, the relevant algorithm in CSS Syntax 中相关的算法,包括错误处理规则。 [CSSSYNTAX]

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

以下术语和特性在 Cascading Style SheetsCSS)中定义: [CSS]

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

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

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

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

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

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

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

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

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

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

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

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

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

以下功能在 CSS Forms中定义: [CSSFORMS]

以下特性定义于 CSS 间隙[CSSGAPS]

以下特性定义于 CSS 网格布局[CSSGRID]

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

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

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

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

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

以下特性定义于 CSS 多列布局[CSSMULTICOL]

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

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

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

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

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

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

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

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

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

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

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

术语 style attributeCSS Style Attributes中定义。 [CSSATTR]

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

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

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

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

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

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

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

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

交叉观察器 (Intersection Observer)

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

Resize Observer

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

WebGL

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

WebGPU

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

WebVTT

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

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

ARIA

The role 属性在 Accessible Rich Internet ApplicationsARIA)中定义,如下角色也是: [ARIA]

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

最后,下列术语在 ARIA中定义: [ARIA]

Content Security Policy

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

Service Workers

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

Secure Contexts

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

Permissions Policy

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

Payment Request API

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

MathML

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

以下功能在 Mathematical Markup LanguageMathML)中定义:

SVG

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

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

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

Filter Effects

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

Compositing

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

Cooperative Scheduling of Background Tasks

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

Screen Orientation

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

Storage

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

Web App Manifest

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

WebAssembly JavaScript Interface: ESM Integration

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

WebCodecs

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

WebDriver

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

WebDriver BiDi

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

Web Cryptography API

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

WebSockets

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

WebTransport

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

Web Authentication: An API for accessing Public Key Credentials

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

Credential Management

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

Console

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

Web Locks API

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

Trusted Types

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

WebRTC API

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

Picture-in-Picture API

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

Idle Detection API

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

Web Speech API

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

WebOTP API

以下术语在 WebOTP API中定义:

Web Share API

以下术语在 Web 分享 API中定义:

Web Smart Card API

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

Web Background Synchronization

以下术语在 后台同步 API中定义:

Web Periodic Background Synchronization

以下术语在 周期性后台同步 API中定义:

Web Background Fetch

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

Keyboard Lock

以下术语在 键盘锁 API中定义:

Web MIDI API

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

Generic Sensor API

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

WebHID API

以下术语在 WebHID API中定义:

WebXR Device API

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


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

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

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

2.1.10 扩展性

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

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

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


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

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


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

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

2.1.11 与 XPath 和 XSLT 的交互

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

首先,删除以下段落:

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

然后,将其替换为以下内容:

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

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

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

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

此更改是对XPath 1.0规范的 故意违反 ,旨在在保持实现与遗留内容兼容的同时,支持本规范针对 HTML 元素所使用命名空间的更改。 [XPATH10]


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

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

此要求是对 XSLT 1.0 规范的 故意违反 , 因为本规范以一种方式更改了 HTML 的命名空间和大小写敏感规则, 否则将与基于 DOM 的 XSLT 转换不兼容。(对输出进行序列化的处理器不受影响。) [XSLT10]


本规范未明确说明 XSLT 处理如何与 HTML 解析器 基础结构交互(例如,XSLT 处理器是否表现为将任何元素放入 打开元素堆栈)。然而,XSLT 处理器在成功完成时必须 停止解析 if they successfully complete, and must update the current document readiness first to "interactive",然后更新为 "complete"。


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

in the script element section中以及在 in the template element section中,还对 XSLT 和 HTML 以及 XSLT、XPath 和 HTML 的交互进行了额外的非规范性注释。

2.2 策略控制的功能

Headers/Permissions-Policy/document-domain

仅在一个引擎中支持。

Firefox🔰 74+SafariNoChrome🔰 88+
Opera?Edge🔰 88+
Edge (旧版)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome AndroidNoWebView Android?Samsung Internet?Opera Android?

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

Headers/Feature-Policy/autoplay

Firefox🔰 74+SafariNoChrome64+
Opera?Edge79+
Edge (旧版)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Headers/Permissions-Policy/autoplay

仅在一个引擎中支持。

Firefox🔰 74+SafariNoChrome88+
Opera?Edge88+
Edge (旧版)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

2.3 通用微语法

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

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

2.3.1 通用解析器习惯用法

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

2.3.2 布尔属性

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

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

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

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

<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 有符号整数

A string is a valid integer if it consists of one or more ASCII数字, optionally prefixed with a U+002D HYPHEN-MINUS character (-).

没有U+002D连字符-前缀的 有效整数 表示由该数字字符串表示的十进制数。有U+002D连字符-前缀的 有效整数 with a U+002D HYPHEN-MINUS (-) prefix represents the number represented in base ten by the string of digits that follows the U+002D HYPHEN-MINUS, subtracted from zero.

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

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

  2. positioninput中的指针,最初指向字符串的开头。

  3. sign 的值为“positive”。

  4. 跳过ASCII空白字符input 中给定 position

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

  6. 如果 position 指示的字符(第一个字符)是U+002D连字符-字符(-):

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

    否则,如果 position 指示的字符(第一个字符)是U+002B加号字符(+):

    1. position 前进到下一个字符。(“+”被忽略,但它不符合规范。)
    2. 如果 position 超过 input的末尾,则返回错误。
  7. 如果 position 指示的字符不是 ASCII数字,则返回错误。

  8. 收集一系列代码点 that are ASCII digits from input 中给定 position, and interpret the resulting sequence as a base-ten integer. Let value 为该整数。

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

2.3.4.2 非负整数

A string is a valid non-negative integer if it consists of one or more ASCII数字.

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

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

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

  2. value be the result of parsing input using the 解析整数的规则.

  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拉丁小写字母E字符(e)或U+0045拉丁大写字母E字符(E)。

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

    3. 一系列一个或多个 ASCII数字

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

无穷大和非数字(NaN)值不是 有效浮点数

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

The best representation of the number n as a floating-point number 是运行 ToString(n)获得的字符串。抽象操作 ToString 不是唯一确定的。当存在多个可能的字符串可以从 ToString 获得特定值时,用户代理必须始终返回该值的相同字符串(尽管它可能与其他用户代理使用的值不同)。

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

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

  2. position 为指向 input的指针,最初指向字符串的开头。

  3. value 的值为1。

  4. divisor 的值为1。

  5. exponent 的值为1。

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

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

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

    1. valuedivisor 更改为-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 设为零并跳转到标记为 fraction的步骤。

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

  11. 收集一系列代码点 ,这些代码点是 ASCII数字 ,从 input 中给定 position,并将结果序列解释为十进制整数。将 value 乘以该整数。

  12. 如果 position 超过 input的末尾,则跳转到标记为 conversion的步骤。
  13. Fraction:如果 position 指示的字符是U+002E FULL STOP(.),请运行这些子步骤:

    1. position 前移到下一个字符。

    2. 如果 position 超过 input的末尾,或者 position 指示的字符不是 ASCII数字,U+0065拉丁小写字母E(e),或U+0045拉丁大写字母E(E),则跳转到标记为 conversion的步骤。

    3. 如果 position 指示的字符是U+0065拉丁小写字母E字符(e)或U+0045拉丁大写字母E字符(E),则跳过这些子步骤的其余部分。

    4. Fraction loop:将 divisor 乘以10。

    5. 将由 position指示的字符的值解释为十进制数字(0..9)并除以 divisor,然后加到 value
    6. position 前移到下一个字符。

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

    8. 如果 position 指示的字符是 ASCII数字,则跳回这些子步骤中标记为 fraction loop 的步骤。

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

    1. position 前移到下一个字符。

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

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

      1. exponent 更改为-1。
      2. position 前移到下一个字符。
      3. 如果 position 超过 input的末尾,则跳转到标记为 conversion的步骤。

      否则,如果 position 指示的字符是U+002B PLUS SIGN字符(+):

      1. position 前移到下一个字符。
      2. 如果 position 超过 input的末尾,则跳转到标记为 conversion的步骤。

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

    5. 收集一系列代码点 ,这些代码点是 ASCII数字 ,从 input 中给定 position,并将结果序列解释为十进制整数。将 exponent 乘以该整数。

    6. value 乘以10的 exponent次方。

  15. Conversion:令 S 为一组有限的IEEE 754双精度浮点值,除了-0,但增加了两个特殊值:21024 和-21024

  16. rounded-valueS 中最接近 value的数,如果有两个同样接近的值,则选择有效数字为偶数的数。(这两个特殊值21024 和-21024 被视为具有偶数有效数字)。

  17. 如果 rounded-value 是21024 或-21024,则返回错误。

  18. 返回 rounded-value

2.3.4.4 百分比和长度

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

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

  2. position be a position variable for input, initially pointing at the start of input的开头。

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

  4. 如果 position 超过 input 的末尾或 inputposition 处的代码点不是 ASCII数字,则返回失败。

  5. 收集一系列代码点 ,这些代码点是 ASCII数字 ,从 input 中给定 position,并将结果序列解释为十进制整数。令 value 为该数字。

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

  7. 如果 inputposition 处的代码点是U+002E (.),则:

    1. position 前移1。

    2. 如果 position 超过 input 的末尾或 inputposition 处的代码点不是 ASCII数字, then return the current dimension value with valueinputposition.

    3. divisor 的值为1。

    4. 一直循环:

      1. divisor 乘以10。

      2. inputposition处的代码点的值,解释为十进制数字(0..9)并除以 divisor,加到 value

      3. position 前移1。

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

      5. 如果 inputposition 处的代码点不是 ASCII数字,则 中止

  8. Return the current dimension value with valueinputposition.

The current dimension value, given valueinputposition, is determined as follows:

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

  2. 如果 inputposition 处的代码点是U+0025 (%),则返回 value 作为百分比。

  3. 返回 value 作为长度。

2.3.4.5 非零百分比和长度

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

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

  2. value be the result of parsing input using the 解析尺寸值的规则.

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

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

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

  6. 返回 value 作为长度。

2.3.4.6 浮点数列表

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

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

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

  2. positioninput中的一个指针,初始指向字符串的开始。

  3. numbers 为一个初始为空的浮点数列表。该列表将是此算法的结果。

  4. 收集一系列代码点 that are ASCII whitespace, U+002C COMMA, or U+003B SEMICOLON characters from input given position指示。此操作会跳过任何前导分隔符。

  5. position 未越过 input的末尾时:

    1. 收集一系列代码点 ,这些代码点不是 ASCII空白字符、U+002C逗号、U+003B分号、 ASCII数字、U+002E句号或U+002D连字符,位置由 position given position. This skips past leading garbage.

    2. 收集一系列代码点 ,这些代码点不是 ASCII空白字符、U+002C逗号或U+003B分号字符,位置由 position 指示,并将结果命名为 unparsed number, and let unparsed number be the result.

    3. Let unparsed number ,得到 number using the rules for parsing floating-point number values.

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

    5. number 附加到 numbers中。

    6. 收集一系列代码点 that are ASCII whitespace, U+002C COMMA, or U+003B SEMICOLON characters from input given position指示。这会跳过分隔符。

  6. 返回 numbers

2.3.4.7 维度列表

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

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

  2. 如果 raw input is a U+002C COMMA character (,), then remove that character from raw input.

  3. 按逗号分割字符串 raw input on commas。令 raw tokens 为结果的标记列表。

  4. result 为一个空的数字/单位对列表。

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

    1. input 为该标记。

    2. positioninput中的一个指针,初始指向字符串的开始。

    3. value 为数字0。

    4. unit绝对

    5. 如果 position 已超出 input的末尾,则将 unit 设为 相对 并跳至最后一个子步骤。

    6. 如果 position 处的字符是 ASCII数字,则 收集一系列代码点 that are ASCII digits from input given input, interpret the resulting sequence as an integer in base ten, and increment value 增加该整数。

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

      1. 收集一系列代码点 ,这些代码点由 ASCII空白 字符和 ASCII数字 组成,从 input 中给定 position。令 s 为结果序列。

      2. Remove all ASCII whitespace in s.

      3. 如果 s 不是空字符串,则:

        1. lengths 中的字符数(删除空格后)。

        2. fraction 为将 s 解释为一个十进制整数,然后将该数除以 10length的结果。

        3. fraction 加到 value中。

    8. 跳过ASCII空白 字符,在 input 中的 position

    9. 如果 position 处的字符是U+0025百分号字符(%),则将 unit 设为 百分比

      否则,如果 position 处的字符是U+002A星号字符(*),则将 unit 设为 相对

    10. 将一个由 value 给定的数字和 unit 给定的单位组成的条目添加到 result中。

  6. 返回列表 result

2.3.5 日期和时间

在以下算法中, 年份 year 的月份 month is: 31 if month 是1、3、5、7、8、10或12,则为 31 ;如果 month 是4、6、9或11,则为 30 ;如果 month 是2且 year 是能被400整除的数,或 year 是能被4整除但不能被100整除的数,则为 29 otherwise. This takes into account leap years in the Gregorian calendar. [GREGORIAN]

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

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

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

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

2.3.5.1 月份

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

A string is a valid month string representing a year year 和月份 month if it consists of the following components in the given order:

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

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

  1. input 为要解析的字符串。

  2. position 为指向 input的指针,最初指向字符串的开始。

  3. 解析月份组件 以获得 yearmonth。如果返回为空,则失败。

  4. 如果 position is not beyond the end of input的结尾之外,则失败。

  5. 返回 yearmonth

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

  1. 收集一系列码点 ,其为 ASCII 数字 ,自 input 的给定 position。如果收集的序列长度不足四个字符,则失败。否则,将结果序列解释为十进制整数。令 year 为该数字。

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

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

  4. 收集一系列码点 ,其为 ASCII 数字 ,自 input 的给定 position。如果收集的序列长度不完全是两个字符,则失败。否则,将结果序列解释为十进制整数。令 month 为该数字。

  5. 如果 month 不是范围在 1 ≤month≤ 12 之间的数字,则失败。

  6. 返回 yearmonth

2.3.5.2 日期

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

A string is a valid date string representing a year year、月份 month和日期 day if it consists of the following components in the given order:

  1. 一个 有效月份字符串,表示 yearmonth
  2. 一个U+002D HYPHEN-MINUS字符(-)
  3. 两个 ASCII数字,表示 day,范围为1 ≤daymaxday ,其中 maxdaynumber of days in the month month and year year

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

  1. input 为要解析的字符串。

  2. position 为指向 input的指针,最初指向字符串的开始。

  3. 解析日期组件 以获得 yearmonthday。如果返回为空,则失败。

  4. 如果 position is not beyond the end of input的结尾之外,则失败。

  5. date 为具有 yearmonthday的日期。

  6. 返回 date

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

  1. 解析月份组件 以获得 yearmonth。如果返回为空,则失败。

  2. maxday 为该年该月的 number of days in month month of year year

  3. 如果 position 超出 input 的结尾或 position 处的字符不是U+002D HYPHEN-MINUS字符,则失败。否则,将 position 前移一个字符。

  4. 收集一系列代码点 that are ASCII digits from input 中由 position. If the collected sequence is not exactly two characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let day 为该数值。

  5. 如果 day 不是范围在1 ≤daymaxday之间的数值,则失败。

  6. 返回 yearmonthday

2.3.5.3 无年份的日期

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

A string is a valid yearless date string representing a month month 和日期 day if it consists of the following components in the given order:

  1. 可选的两个U+002D HYPHEN-MINUS字符(-)
  2. 两个 ASCII数字,表示月份 month,范围为1 ≤month≤ 12
  3. 一个U+002D HYPHEN-MINUS字符(-)
  4. 两个 ASCII数字,表示日期 day,范围为1 ≤daymaxday ,其中 maxday 是该月份的 天数 in the month month and any arbitrary leap year (e.g. 4 or 2000)

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

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

  1. input 为要解析的字符串。

  2. position 为指向 input的指针,最初指向字符串的开始。

  3. 解析无年份日期组件 以获得 monthday。如果返回为空,则失败。

  4. 如果 position is not beyond the end of input的结尾之外,则失败。

  5. 返回 monthday

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

  1. 收集一系列代码点 ,这些代码点是 U+002D HYPHEN-MINUS 字符(-), 从 input 中给定 position. If the collected sequence is not exactly zero or two characters long, then fail.

  2. 收集一系列代码点 ,这些代码点是 ASCII 数字 , 从 input 中给定 position进行收集。如果收集的序列长度不是恰好为两个字符,则操作失败。 否则,将结果序列解释为一个以十进制表示的整数。令 month be that number.

  3. 如果 month 不是范围 1 ≤month ≤ 12, then fail.

  4. maxday be the number of days in month month of any arbitrary leap year (e.g. 4 or 2000).

  5. 如果 position 超出 input 的末尾,或者在 position 处的字符不是 U+002D HYPHEN-MINUS 字符,则操作失败。否则,将 position forwards one character.

  6. 收集一系列代码点 ,这些代码点是 ASCII 数字 , 从 input 中给定 position进行收集。如果收集的序列长度不是恰好为两个字符,则操作失败。 否则,将结果序列解释为一个以十进制表示的整数。令 day be that number.

  7. 如果 day 不是范围 1 ≤daymaxday, then fail.

  8. 返回 monthday.

2.3.5.4 时间

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

A string is a valid time string representing an hour hour、分钟 minute和秒 second if it consists of the following components in the given order:

  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. 解析时间组件 以获得 hourminutesecond。如果返回为空,则失败。

  4. 如果 position is not beyond the end of input的结尾之外,则失败。

  5. time 为具有小时 hour、分钟 minute和秒 second的时间。

  6. 返回 time

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

  1. 收集一系列代码点 ,这些代码点是 ASCII 数字 , 从 input 中给定 position进行收集。如果收集的序列长度不是恰好为两个字符,则操作失败。 否则,将结果序列解释为一个以十进制表示的整数。令 hour be that number.

  2. 如果 hour 不是范围 0 ≤hour ≤ 23, then fail.
  3. 如果 position 超出 input 的末尾,或者在 position 处的字符不是 U+003A COLON 字符,则操作失败。否则,将 position forwards one character.

  4. 收集一系列代码点 ,这些代码点是 ASCII 数字 , 从 input 中给定 position进行收集。如果收集的序列长度不是恰好为两个字符,则操作失败。 否则,将结果序列解释为一个以十进制表示的整数。令 minute be that number.

  5. 如果 minute 不是范围 0 ≤minute ≤ 59, then fail.
  6. second be 0.

  7. 如果 position 没有超出 input 的末尾,并且在 position 处的字符是 U+003A (:),则:

    1. position 前移至 input.

    2. 如果 position 超出 input的末尾,或位于 input, or if the next two characters in position 开始的 input 中的接下来两个字符不是 ASCII 数字, then fail.

    3. 收集一系列代码点 ,这些代码点可以是 ASCII 数字 或是 U+002E FULL STOP 字符,从 input 中给定 position进行收集。如果 收集的序列长度为三个字符,或者它的长度超过三个字符且第三个字符不是 U+002E FULL STOP 字符,或者它包含多个 U+002E FULL STOP 字符,则操作失败。否则,将结果序列解释为一个以十进制表示的数字(可能带有小数部分)。 将 second to that number.

    4. 如果 second 不是范围 0 ≤second < 60, then fail.

  8. 返回 hourminutesecond.

2.3.5.5 本地日期和时间

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

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

  1. A 有效日期字符串 ,表示日期
  2. 一个U+0054拉丁大写字母T字符(T)或一个U+0020空格字符
  3. A 有效时间字符串 ,表示时间

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

  1. A 有效日期字符串 ,表示日期
  2. 一个U+0054拉丁大写字母T字符(T)
  3. A 有效时间字符串 ,表示时间,以给定时间的最短可能字符串表示(例如,如果时间为整分钟,则省略秒组件)

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

  1. input 为要解析的字符串。

  2. position 为指向 input的指针,最初指向字符串的开始。

  3. 解析日期组件 以获得 yearmonthday。如果返回为空,则失败。

  4. 如果 position 超出 input 的结尾或 position 处的字符既不是U+0054拉丁大写字母T字符(T)也不是U+0020空格字符,则失败。否则,将 position 前移一个字符。

  5. 解析时间组件 以获得 hourminutesecond。如果返回为空,则失败。

  6. 如果 position is not beyond the end of input的结尾之外,则失败。

  7. date 为具有年份 year、月份 month和日期 day的日期。

  8. time 为具有小时 hour、分钟 minute和秒 second的时间。

  9. 返回 datetime

2.3.5.6 时区

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

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

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

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

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

  1. input 为要解析的字符串。

  2. position 为指向 input的指针,最初指向字符串的开始。

  3. 解析时区偏移组件 以获得 timezonehourstimezoneminutes。如果返回无,则失败。

  4. 如果 position is not beyond the end of input的结尾,则失败。

  5. 返回与UTC相差 timezonehours 小时和 timezoneminutes 分钟的时区偏移。

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

  1. 如果在 position 的字符是 U+005A LATIN CAPITAL LETTER Z 字符(Z),则:

    1. timezonehours be 0.

    2. timezoneminutes be 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 be "negative".

    2. position 前移至 input.

    3. 收集一系列代码点 ,这些代码点是 ASCII 数字 , 从 input 中给定 position进行收集。令 s be the collected sequence.

    4. 如果 s 的长度恰好为两个字符,则:

      1. s 解释为十进制整数。令 timezonehours be that number.

      2. 如果 position 超出 input 的末尾,或者在 position 的字符不是 U+003A COLON 字符,则操作失败。否则,将 position forwards one character.

      3. 收集一系列代码点 ,这些代码点是 ASCII 数字 , 从 input 中给定 position进行收集。如果收集的序列长度不是恰好为两个 字符,则操作失败。否则,将结果序列解释为十进制整数。令 timezoneminutes be that number.

      如果 s 的长度恰好为四个字符,则:

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

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

      否则,操作失败。

    5. 如果 timezonehours 不在范围 0 ≤timezonehours ≤ 23, then fail.
    6. 如果 sign 是 "negative",则将 timezonehours.
    7. 如果 timezoneminutes 不在范围 0 ≤timezoneminutes ≤ 59, then fail.
    8. 如果 sign 是 "negative",则将 timezoneminutes.

    否则,操作失败。

  2. 返回 timezonehourstimezoneminutes.

2.3.5.7 全球日期和时间

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

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

  1. 一个表示日期的 有效日期字符串 representing the date
  2. 一个U+0054拉丁大写字母T字符(T)或一个U+0020空格字符
  3. 一个表示时间的 有效时间字符串 representing the time
  4. 一个表示时区偏移量的 有效时区偏移字符串 representing the time-zone offset

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

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

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

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

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

  1. input 成为被解析的字符串。

  2. position 成为 input中的一个指针,最初指向字符串的开始。

  3. 解析日期组件 以获得 yearmonthday。如果没有返回值,则失败。

  4. 如果 position 超出 input 的末尾或 position 处的字符既不是U+0054拉丁大写字母T字符(T),也不是U+0020空格字符,则失败。否则,将 position 向前移动一个字符。

  5. 解析时间组件 以获得 hourminutesecond。如果没有返回值,则失败。

  6. 如果 position 超出 input的末尾,则失败。

  7. 解析时区偏移组件 以获得 timezonehourstimezoneminutes。如果没有返回值,则失败。

  8. 如果 position is not beyond the end of input的末尾,则失败。

  9. time 成为 year年、 month月、 day日、 hour时、 minute分、 second秒的时间,减去 timezonehours 小时和 timezoneminutes 分钟。这个时间点是UTC时区的时间点。

  10. timezone 成为比UTC快 timezonehours 小时和 timezoneminutes 分钟的时区偏移量。

  11. 返回 timetimezone

2.3.5.8

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

如果一个周年编号 year has 53 weeks if it corresponds to either a year year in the 前置格里高利日历 that has a Thursday as its first day (January 1st), or a year year in the 前置格里高利日历 中以星期三(1月1日)为第一天且 year is a number divisible by 400, or a number divisible by 4 but not by 100. All other week-years have 52 weeks.

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

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

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

A string is a valid week string representing a week-year year 和周 week if it consists of the following components in the given order:

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

The rules to parse a week string are as follows. This will return either a week-year number and week number, or nothing. If at any point the algorithm says that it "fails", this means that it is aborted at that point and returns nothing.

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

  2. position 为指向 input的指针,初始时指向字符串开头。

  3. 收集一系列代码点 that are ASCII digits from input 中由 position. If the collected sequence is not at least four characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let year 为该数值。

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

  5. 如果 position 超出 input 末尾,或当前位置的字符不是 U+002D 连字符(-),则失败;否则,将 position is not a U+002D HYPHEN-MINUS character, then fail. Otherwise, move position forwards one character.

  6. 如果 position 超出 input 末尾,或当前位置的字符不是 U+0057 大写字母 W,则失败;否则,将 position is not a U+0057 LATIN CAPITAL LETTER W character (W), then fail. Otherwise, move position forwards one character.

  7. 收集一系列代码点 that are ASCII digits from input 中由 position. If the collected sequence is not exactly two characters long, then fail. Otherwise, interpret the resulting sequence as a base-ten integer. Let week 为该数值。

  8. maxweek be the week number of the last day of year year.

  9. 如果 week 不在 1 ≤weekmaxweek范围内,则失败。

  10. 如果 position is not beyond the end of input末尾,则失败。

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

2.3.5.9 持续时间

A 持续时间 由若干秒组成。

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

A string is a valid duration string representing a duration t if it consists of either of the following:

The rules to parse a duration string are as follows. This will return either a 持续时间 或返回空值。如果在任何时候算法指示"失败",这意味着它在该点中止并返回空值。

  1. input 为被解析的字符串。

  2. positioninput中的指针,最初指向字符串的开头。

  3. monthssecondscomponent count 均为零。

  4. M-disambiguatorminutes

    此标志的另一个值为 months。它用于消除ISO8601持续时间中"M"单位的歧义,这些持续时间使用相同的单位表示月份和分钟。月份不允许,但解析为了未来的兼 容性,并避免误解在其他上下文中有效的ISO8601持续时间。

  5. 跳过ASCII空白字符input 中给定 position

  6. 如果 position 超出 input的末尾,则失败。

  7. 如果 inputposition 指向的字符是U+0050拉丁大写字母P字符,则将 position 前进到下一个字符,将 M-disambiguator 设置为 months,并 跳过ASCII空白字符input 中给定 position

  8. 当条件为真时,执行以下操作:

    1. units 未定义。它将被赋值为以下值之一: yearsmonthsweeksdayshoursminutesseconds

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

    3. 如果 position 超出 input的末尾,则中断。

    4. 如果 inputposition 指向的字符是U+0054拉丁大写字母T字符,则将 position 前进到下一个字符,将 M-disambiguator 设置为 minutes跳过ASCII空白字符input 中给定 position,并 继续

    5. next character 设置为 inputposition指向的字符。

    6. 如果 next character 是 U+002E FULL STOP 字符(.),则令 N 为 0。(不要推进 position,该操作将在下方处理。)

      否则,如果 next characterASCII数字,则 收集一系列代码点 ,这些代码点是 ASCII数字 ,从 position 处的 input中收集,将结果序列解释为十进制整数,并将 N 设置为该数。

      否则, next character 不是数字的一部分;失败。

    7. 如果 position 超出 input的末尾,则失败。

    8. next character 设置为 inputposition指向的字符,并将 position 前进到下一个字符。(如果 next character 之前是U+002E全停止符(.),这次仍将是该字符。)

    9. 如果 next character 是U+002E(.),则:

      1. 收集一系列代码点 ,这些代码点是 ASCII数字 ,从 position 处的 input中收集。令 s 为结果序列。

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

      3. lengths中的字符数。

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

      5. N 增加 fraction

      6. 跳过ASCII空白字符input 中给定 position

      7. 如果 position 超出 input的末尾,则失败。

      8. next character 设置为 inputposition指向的字符,并将 position 前进到下一个字符。

      9. 如果 next character 既不是U+0053拉丁大写字母S字符,也不是U+0073拉丁小写字母s字符,则失败。

      10. units 设置为 seconds

      否则:

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

      2. 如果 next character 是U+0059拉丁大写字母Y字符或U+0079拉丁小写字母y字符,将 units 设置为 years ,并将 M-disambiguator 设置为 months

        如果 next character 是U+004D拉丁大写字母M字符或U+006D拉丁 小写字母m字符,并且 M-disambiguatormonths,则将 units 设置为 months

        如果 next character 是U+0057拉丁大写字母W字符或U+0077拉丁小写字母w字符,将 units 设置为 weeks ,并将 M-disambiguator 设置为 minutes

        如果 next character 是U+0044拉丁大写字母D字符或U+0064拉丁小写字母d字符,将 units 设置为 days ,并将 M-disambiguator 设置为 minutes

        如果 next character 是U+0048拉丁大写字母H字符或U+0068拉丁小写字母h字符,将 units 设置为 hours ,并将 M-disambiguator 设置为 minutes

        如果 next character 是U+004D拉丁大写字母M字符或U+006D拉丁小写字母m字符,并且 M-disambiguatorminutes,则将 units 设置为 minutes

        如果 next character 是U+0053拉丁大写字母S字符或U+0073拉丁小写字母s字符,将 units 设置为 seconds ,并将 M-disambiguator 设置为 minutes

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

    10. 增加 component count

    11. multiplier 为1。

    12. 如果 unitsyears,则将 multiplier 乘以12,并将 units 设置为 months

    13. 如果 unitsmonths,则将 Nmultiplier 的乘积加到 months中。

      否则:

      1. 如果 unitsweeks,则将 multiplier 乘以7,并将 units 设置为 days

      2. 如果 unitsdays,则将 multiplier 乘以24,并将 units 设置为 hours

      3. 如果 unitshours,则将 multiplier 乘以60,并将 units 设置为 minutes

      4. 如果 unitsminutes,则将 multiplier 乘以60,并将 units 设置为 seconds

      5. 最终, units 现在是 seconds。将 Nmultiplier 的乘积加到 seconds中。

    14. 跳过ASCII空白字符input 中给定 position

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

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

  11. Return the duration consisting of seconds seconds.

2.3.5.10 更模糊的时间点

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


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

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

  2. positioninput中的指针,最初指向字符串的开头。

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

  4. date presenttime present 标志设置为true。

  5. 解析日期组件 以获取 yearmonthday。如果解析失败,则将 date present 标志设置为false。

  6. 如果 date present 为true,并且 position 没有超出 input的末尾,并且 position 处的字符是U+0054拉丁大写字母T字符(T)或U+0020空格字符,则将 position 前进到 input中的下一个字符。

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

    否则,如果 date present 为false,将 position 设置回与 start position相同的位置。

  7. 如果 time present 标志为true,则 解析时间组件 以获取 hourminutesecond。如果解析失败,则失败。

  8. 如果 date presenttime present 标志都为true,但 position 超出 input的末尾,则失败。

  9. 如果 date presenttime present 标志都为true, 解析时区偏移组件 以获取 timezonehourstimezoneminutes。如果解析失败,则失败。

  10. 如果 position is not beyond the end of input的末尾,则失败。

  11. 如果 date present 标志为true且 time present 标志为false,则令 date 为具有 yearmonthday的日期,并返回 date

    否则,如果 time present 标志为true且 date present 标志为false,则令 time 为具有 hourminutesecond的时间,并返回 time

    否则,令 time 为年 year、月 month、日 day、小时 hour、分钟 minute、秒 second的时间减去 timezonehours 小时和 timezoneminutes 分钟,该时间点为UTC时区的时间点;令 timezone 为距离UTC的 timezonehours 小时和 timezoneminutes 分钟;并返回 timetimezone

2.3.6 传统颜色

一些已废弃的传统属性使用 解析传统颜色值的规则解析颜色,给定一个字符串 input。 它们将返回一个 CSS 颜色或失败。

  1. 如果 input is the empty string, then return failure.

  2. Strip leading and trailing ASCII whitespace from input.

  3. 如果 inputASCII 大小写不敏感 匹配 "transparent", then return failure.

  4. 如果 inputASCII 大小写不敏感 匹配到 命名颜色之一,则返回与该关键字对应的 CSS 颜色。 [CSSCOLOR]

    CSS2 系统颜色 不被识别。

  5. 如果 input代码点长度 为四, 且 input is U+0023 (#), and the last three characters of input are all ASCII 十六进制数字,则:

    1. result 为一个 CSS 颜色。

    2. input 的第二个字符解释为十六进制数字;将 result 的红色分量设为该数字乘以 17 的结果。

    3. input 的第三个字符解释为十六进制数字;将 result 的绿色分量设为该数字乘以 17 的结果。

    4. input 的第四个字符解释为十六进制数字;将 result 的蓝色分量设为该数字乘以 17 的结果。

    5. 返回 result

  6. Replace any code points greater than U+FFFF in input (i.e., any characters that are not in the basic multilingual plane) with "00".

  7. 如果 input代码点长度 大于 128,则截断 input, leaving only the first 128 characters.

  8. 如果 input is U+0023 (#), then remove it.

  9. input 中的任何非 ASCII 十六进制数字 with U+0030 (0).

  10. input代码点长度 为零或不是三的倍数时,在 input.

  11. input into three strings of equal code point length, to obtain three components. Let length 为这些组件的 代码点长度 that all of those components have (one third the code point length of input).

  12. 如果 length 大于 8,则移除每个组件中的前 length-8 个字符,并令 length be 8.

  13. length 大于二且每个组件的第一个字符为 U+0030 (0) 时,移除该字符并将 length by one.

  14. 如果 length is 仍然 greater than two, truncate each component, leaving only the first two characters in each.

  15. result 为一个 CSS 颜色。

  16. 将第一个组件解释为十六进制数字;将 result 的红色分量设为该数字。

  17. 将第二个组件解释为十六进制数字;将 result 的绿色分量设为该数字。

  18. 将第三个组件解释为十六进制数字;将 result 的蓝色分量设为该数字。

  19. 返回 result

2.3.7 空格分隔的标记

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

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

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

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

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

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

2.3.8 逗号分隔的标记

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

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

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

2.3.9 引用

一个 有效的哈希名称引用 到一个类型为 type is a string consisting of a U+0023 NUMBER SIGN character (#) followed by a string which exactly matches the value of the name attribute of an element with type type in the same .

The rules for parsing a hash-name reference to an element of type scope,解析类型为 type, are as follows:

  1. 如果被解析的字符串不包含 U+0023 数字符号字符,或者如果字符串中的第一个这样的字符是字符串中的最后一个字符,则返回 null。

  2. s 成为从被解析字符串中第一个 U+0023 数字符号字符之后的字符到字符串末尾的字符串。

  3. 返回 scope in scope's 中按 树顺序, that has an idname 属性的值为 s的元素,如果没有这样的元素,则返回 null。

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

2.3.10 媒体查询

A string is a valid media query list if it matches the <media-query-list> production of Media Queries. [MQ]

A string matches the environment of the user if it is the empty string, a string consisting of only ASCII 空白字符,或是一个根据 Media Queries. [MQ]

2.3.11 唯一内部值

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

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

2.4 URLs

2.4.1 术语

A string is a valid non-empty URL if it is a 有效的 URL 字符串 but it is not the empty string.

A string is a valid URL potentially surrounded by spaces if, after ASCII 空白字符 后是一个 有效的 URL 字符串.

A string is a valid non-empty URL potentially surrounded by spaces if, after ASCII 空白字符 后是一个 有效的非空 URL.


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

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

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


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

这样的 URL 的 查询片段 can be non-null. For example, the URL record created by 解析 "about:blank?foo#bar" 匹配 about:blank

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

确保 匹配 about:srcdoc ensures that the URL's query is null is because it is not possible to create 一个 iframe srcdoc 文档URL 具有非空的 查询,而与 DocumentURL 匹配 about:blank不同。换句话说,所有 URLs that 匹配 about:srcdoc only vary in their fragment.

2.4.2 解析 URL

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

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

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

  1. baseURLenvironment基础 URL,如果 environment 是一个 Document 对象;否则为 environmentAPI 基础 URL

  2. Return the result of applying the URL parser to url, with baseURL

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

  1. encodingUTF-8

  2. 如果 environment 是一个 Document 对象,则将 encoding 设置为 environment字符编码

  3. 否则,如果 environment相关全局对象 是一个 Window 对象,将 encoding 设置为 environment相关全局对象关联 Document字符编码

  4. baseURLenvironment基础 URL,如果 environment 是一个 Document 对象;否则为 environmentAPI 基础 URL

  5. Return the result of applying the URL parser to url, with baseURLencoding

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

  1. url编码解析 URL 的结果,给定 url,相对于 environment

  2. 如果 url 失败,则返回失败。

  3. Return the result of applying the URL serializer to url.

2.4.3 文档基础 URL

The 文档基础 URL 是指 Document documentURL 记录 ,通过以下步骤获得:

  1. 如果 document 没有任何 后代 base 元素,并且该元素具有 href 属性,则返回 document回退基础 URL.

  2. Otherwise, return the frozen base URL of the first base element in document 中第一个具有 href attribute, in 树顺序.

The 回退基础 URL 是指 Document 对象 documentURL 记录 ,通过以下步骤获得:

  1. 如果 document一个 iframe srcdoc 文档

    1. 断言documentabout 基础 URL is non-null.

    2. 返回 documentabout 基础 URL.

  2. 如果 documentURL 匹配 about:blank , 并且 documentabout 基础 URL 不为 null,则返回 documentabout 基础 URL.

  3. 返回 documentURL.


To set the URL for a Document document 设置一个 URL 记录 url

  1. documentURL 设置为 url.

  2. Respond to base URL changes given document.

To respond to base URL changes for a Document document:

  1. 用户代理应当更新任何向用户展示受影响 URL 或由该 URL 派生的数据的用户界面元素。例如,展示 超链接url的状态栏, 或展示由 qblockquoteinsdel 元素的 cite attribute.

  2. 确保 CSS :link/:visited/ 等 伪类 are updated appropriately.

  3. 对每一个 descendant 属于 document包含 shadow 的所有后代

    1. 如果 descendant 是一个 script 元素,且其 result 是一个 推测规则解析结果, 那么:

      1. oldResultelementresult.

      2. newResult创建推测规则解析结果 的结果,参数为 element子文本内容element节点文档.

      3. 更新推测规则 ,参数为 element相关全局对象oldResultnewResult.

  4. 考虑推测性加载 ,参数为 document.

这意味着更改基础 URL 不会影响例如由 img 元素显示的图片。因此, 后续通过脚本访问 src IDL 属性时, 将返回一个新的 绝对 URL ,但可能不再对应于当前显示的图片。

2.5 获取资源

2.5.1 术语

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

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

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

创建一个潜在的 CORS 请求,给定一个 urldestinationcorsAttributeState和一个可选的 同源回退标志,执行以下步骤:

  1. mode 为 "no-cors",如果 corsAttributeState无 CORS,否则为 "cors" otherwise.

  2. 如果设置了 同源回退标志mode 为 "no-cors",则将 mode 设置为 "same-origin".

  3. credentialsMode 为 "include".

  4. 如果 corsAttributeState匿名,则将 credentialsMode 设置为 "same-origin".

  5. 返回一个新的 请求 ,其 URLurl目的地destination模式mode凭证模式credentialsMode,且其 use-URL-credentials 标志 is set.

2.5.2 确定资源类型

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

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

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

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

2.5.3meta 元素中提取字符编码

The algorithm for extracting a character encoding from a meta element, given a string s,如下所示。该算法返回一个字符编码或者不返回任何值。

  1. position 为指向 s的指针,初始时指向字符串的开始。

  2. 循环: 找到 position 之后的 s that are an ASCII case-insensitive match for the word "charset". If no such match is found, return nothing.

  3. Skip any ASCII whitespace that immediately follow the word "charset" (there might not be any).

  4. 如果下一个字符不是 U+003D 等号 (=),则将 position 移动到指向该下一个字符之前,并返回到标记为 循环的步骤。

  5. 跳过紧跟在等号之后的任何 ASCII 空白字符 (可能没有)。

  6. 处理下一个字符如下:

    如果它是一个 U+0022 引号字符 ("),并且在 s
    如果它是一个 U+0027 单引号字符 ('),并且在 s
    返回从该字符到下一个最早出现的相同字符的子字符串的 编码获取结果
    如果它是一个未配对的 U+0022 引号字符 (")
    如果它是一个未配对的 U+0027 单引号字符 (')
    如果没有下一个字符
    返回无结果。
    否则
    Return the result of getting an encoding from the substring that consists of this character up to but not including the first ASCII 空白字符 或 U+003B 分号字符 (;),或 s, whichever comes first.

该算法与 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?

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

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

该属性的 缺失值默认 状态为 无CORS 状态,其 无效值默认空值默认 状态均为 匿名 状态。

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

对于更现代的功能,其中请求的 模式 始终为 "cors",某些 CORS 设置属性 已被重新定义为具有略有不同的含义,其中它们仅影响 请求凭证模式。为了进行此转换,我们定义 CORS 设置属性凭证模式 for a given CORS settings attribute to be determined by switching on the attribute's state:

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

2.5.5 引荐政策属性

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

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

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

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

  1. 首先,存在一个 noreferrer 链接类型;

  2. 然后是 引荐政策属性的值;

  3. 然后是任何带有 meta 元素,并且 name 属性设置为 referrer

  4. 最后是 `Referrer-Policy` HTTP 头部。

2.5.6 Nonce 属性

Global_attributes/nonce

所有当前引擎都支持。

Firefox31+SafariChrome
Opera?Edge
Edge (旧版)?Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

具有 nonce 内容属性的元素 确保该加密 nonce 只暴露给脚本(而不会暴露给 CSS 属性选择器之类的侧信道), 其做法是从内容属性中取得值,将其移动到一个名为 [[CryptographicNonce]]的内部槽中,通过 HTMLOrSVGOrMathMLElement 接口混入将其暴露给脚本,并将内容属性设置为空字符串。除非另有规定, 该槽的值为空字符串。

element.nonce

返回为 element的加密 nonce 设置的值。如果未使用 setter, 则该值将是在 nonce 内容属性中最初找到的值。

element.nonce = value

更新 element的加密 nonce 值。

HTMLElement/nonce

Firefox75+Safari🔰 10+Chrome61+
Opera?Edge79+
Edge (旧版)?Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The nonce IDL 属性在获取时,必须 返回此元素的 [[CryptographicNonce]]的值;在设置时,将此 元素的 [[CryptographicNonce]] 设置为 给定值。

注意, nonce IDL attribute does not update the corresponding content attribute. This, as well as the below setting of the nonce content attribute to the empty string when an element becomes browsing-context connected, is meant to prevent exfiltration of the nonce value through mechanisms that can easily read content attributes, such as selectors. Learn more in issue #2369,该行为就是在其中 引入的。

以下 属性变更 步骤 用于 nonce 内容属性:

  1. 如果 elementinclude HTMLOrSVGOrMathMLElement, 则返回。

  2. 如果 localName 不是 nonce ,或 namespace 不为 null,则返回。

  3. 如果 value 为 null,则将 element[[CryptographicNonce]] 设置为 空字符串。

  4. 否则,将 element[[CryptographicNonce]] 设置为 value

每当一个 including HTMLOrSVGOrMathMLElement 变为 浏览上下文连接时,用户 代理必须对 element执行以下步骤:

  1. CSP listelementshadow-including rootpolicy containerCSP list

  2. 如果 CSP list 包含通过标头交付的 Content Security Policy,并且 element 具有一个 nonce 内容属性 且其值不是空字符串,则:

    1. nonceelement[[CryptographicNonce]]

    2. Set an attribute value for element using "nonce" and the empty string.

    3. element[[CryptographicNonce]] 设置为 nonce

    如果 element[[CryptographicNonce]] 未被恢复,那么它 此时将为空字符串。

The cloning steps for elements that include HTMLOrSVGOrMathMLElement 的元素,给定 nodecopysubtree are to set copy[[CryptographicNonce]] 设置为 node[[CryptographicNonce]]

2.5.7 延迟加载属性

延迟加载

所有当前引擎都支持。

Firefox75+Safari15.4+Chrome77+
Opera?Edge79+
Edge(旧版)?Internet Explorer不支持
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

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

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

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

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


The will lazy load element steps, given an element element, are as follows:

  1. 如果 脚本功能被禁用 for element, then return false.

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

  2. 如果 element延迟加载属性 处于 延迟 状态,则返回 true。

  3. 返回 false。

每个 imgaudiovideoiframe 元素都有 关联的 惰性加载恢复步骤,初始为 null。

每个 video 元素 还关联有 海报惰性加载恢复步骤, 初始为 null。

对于 imgaudiovideoiframe 元素 将要惰性加载时,这些步骤会在 惰性加载交叉观察器的回调中触发,或者当它们的 惰性加载 属性 被设置为 Eager 状态时运行。这会使元素继续加载。对于 video 元素,也会同时运行 海报惰性加载恢复步骤

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

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

  1. doc 设为 element节点文档

  2. 如果 doc延迟加载交叉观察器 为 null, 将其设置为一个新的 IntersectionObserver 实例,初始化如下:

    意图是使用 IntersectionObserver 构造函数的原始值。然而,我们被迫使用本规范中的 JavaScript 暴露构造函数,直到 Intersection Observer 为规范中的使用提供低级钩子。请参见跟踪此问题的 bug w3c/IntersectionObserver#464[INTERSECTIONOBSERVER]

  3. 调用 doc延迟加载交叉观察器observe 方法,以 element 作为参数。

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

停止交叉观察延迟加载元素 element,执行以下步骤:

  1. doc 设为 element节点文档

  2. 断言doc延迟加载交叉观察器 不为 null。

  3. 调用 doc延迟加载交叉观察器unobserve 方法,以 element 作为参数。

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

(这是一个跟踪向量。) The 延迟加载滚动边距 是一个 实现定义 的值,但有以下建议供参考:

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

2.5.8 阻塞属性

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

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

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

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

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

  1. valueel阻塞属性的值,如果不存在这样的属性,则为 空字符串。

  2. value to value, ASCII 小写

  3. rawTokens按 ASCII 空白字符分割 value on ASCII whitespace的结果。

  4. 返回一个包含 rawTokens 中所有 可能的阻塞令牌的集合。

An element is potentially render-blocking if its 阻塞令牌集 包含 "render", 或者如果它是 隐式潜在渲染阻塞的,这将在各个元素中定义。 默认情况下,元素不是 隐式潜在渲染阻塞的。

2.5.9 获取优先级属性

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

关键字 状态 简要描述
high High Signals a high-priority fetch relative to other resources with the same 目的地.
low Low Signals a low-priority fetch relative to other resources with the same 目的地.
auto Auto Signals automatic determination of fetch priority relative to other resources with the same 目的地.

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

2.6 常见 DOM 接口

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

反射的构建块如下:

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

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

对于一个 反射目标 ,如果它是一个元素 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 对象出现一些冗余的数据结构,因为其 目标元素内部内容属性映射 不能直接操作,因此反射只发生在单向。这种方法尽管如此,仍被选择以减少定义在 反射目标 之间共享的 IDL 属性的错误,并从通用 API 语义中受益。


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

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

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

如果 反射的IDL属性 的类型为 USVString,可选地 视为URL

如果 反射的IDL属性 的类型为 boolean

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

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

如果一个 反射的 IDL 属性 的类型是 unsigned long, 可选地 限制为仅正数限制为仅正数(带回退),或 夹紧到范围 [clampedMinclampedMax],并且可选地具有 默认值 defaultValue

如果一个 反射的 IDL 属性 的类型是 double, 可选地 限制为仅正数 ,并且可选地具有 默认值 defaultValue

值 Infinity 和 Not-a-Number (NaN) 在设置时会抛出异常,如 Web IDL中定义。 [WEBIDL]

如果一个 反射的IDL属性 的类型为 DOMTokenList, 那么它的getter步骤是返回一个 DOMTokenList 对象, 其关联的元素为 this ,关联的属性的本地名称为 反射内容属性名称。 规范作者不能在 ElementInternals上反射这种类型的IDL属性。

如果一个 反射的IDL属性 的类型为 T?, 其中 TElement 或继承自 Element的接口,那么以 attr 作为 反射内容属性名称

这种类型的反射IDL属性 强烈建议其标识符以"Element"结尾,以保持一致性。

如果一个 反射的IDL属性 的类型为 FrozenArray<T>?, 其中 TElement 或继承自 Element的接口, 那么以 attr 作为 反射内容属性名称

这种类型的反射IDL属性 强烈建议其标识符以"Elements"结尾,以保持一致性。

2.6.2 通过IDL扩展属性使用reflect

反射 可以通过IDL的 扩展属性来使用。 [Reflect][ReflectSetter][ReflectURL][ReflectNonNegative][ReflectPositive]以及 [ReflectPositiveWithFallback] 都会触发 反射。这些扩展属性必须要么不带参数,要么只带一个字符串参数;不能用于接口成员属性之外的任何东西;且同一时间只能使用其中一个。

对于上述主要的反射 扩展属性,其 反射内容属性名 就是它所带的字符串参数(如果有);否则就是IDL属性名 转换为ASCII小写的结果。

带有 [Reflect] 扩展属性 的IDL属性必须 反射 [Reflect]反射内容属性名

带有 [ReflectSetter] 扩展属性 的IDL属性在设置时必须 反射 [ReflectSetter]反射内容属性名

The [ReflectURL] 扩展属性 只能用于类型为 USVString的属性上。

带有 [ReflectURL] 扩展属性 的IDL属性必须 反射作为URL[ReflectURL]反射内容属性名

The [ReflectNonNegative] 扩展属性 只能用于类型为 long的属性上。

带有 [ReflectNonNegative] 扩展属性 的IDL属性必须 反射仅限非负数[ReflectNonNegative]反射内容属性名

The [ReflectPositive][ReflectPositiveWithFallback] 扩展属性 只能用于类型为 doubleunsigned long的属性上。

带有 [ReflectPositive] 扩展属性 的IDL属性必须 反射仅限正数[ReflectPositive]反射内容属性名

带有 [ReflectPositiveWithFallback] 扩展属性 的IDL属性必须 反射仅限正数并有回退[ReflectPositiveWithFallback]反射内容属性名


为了补充上述 扩展属性 ,我们还引入了 [ReflectRange][ReflectDefault]。这些属性用于增强 反射 的行为,并且也只能用于接口成员属性上。

The [ReflectRange] 扩展属性 必须接受一个仅限两个值的整数列表。只能用于类型为 unsigned long的属性上。 并且还只能与 [Reflect]一起使用。

带有 [ReflectRange] 扩展属性 的IDL属性会 限制在区间 [clampedMin, clampedMax]内,其中 clampedMin 是列表中第一个参数, clampedMax is the second argument to the list provided to [ReflectRange].

The [ReflectDefault] 扩展属性 只能用于类型为 doublelong、 或 unsigned long的属性上。 当用于类型为 double的属性时,必须接受一个小数;否则接受一个整数。同时只能与 [Reflect][ReflectNonNegative][ReflectPositive][ReflectPositiveWithFallback]一起使用。

带有 [ReflectDefault] 扩展属性 have a default value provided by the argument provided to [ReflectDefault].

2.6.3 在规范中使用 reflect

反射 主要是通过给开发者提供通过 反射的 IDL 属性类型访问内容属性,以改善开发者的使用体验。网页平台的最终事实来源是内容属性本身。也就是说,规范作者不能使用 反射的 IDL 属性 的 getter 或 setter 步骤,而应使用内容属性的存在和值。(或其上的抽象,如 枚举属性的状态。)

两个重要的例外是 反射的 IDL 属性 其类型是以下之一:

对于这些情况,规范作者必须使用 反射目标获取 attr-关联元素获取 attr-关联元素的步骤。内容属性的存在和值不应使用,因为它们不能完全与 反射的 IDL 属性同步。

A 反射目标显式设置的 attr-元素显式设置的 attr-元素缓存的 attr-关联元素缓存的 attr-关联元素对象 应被视为内部实现细节,而不应基于它们进行构建。

2.6.4 集合

The HTMLFormControlsCollectionHTMLOptionsCollection interfaces are collections derived from the HTMLCollection interface. The HTMLAllCollection 接口是一个 集合,但不是这样派生的。

2.6.4.1 The HTMLAllCollection 接口

The 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 对象相同。

The 支持的属性名称 由所有元素的 id 属性的非空值组成,这些元素 由集合表示, and the non-empty values of all the name attributes of all the “全部”命名元素 由集合表示,按 树顺序,忽略后续的重复项,如果一个元素同时提供 idname if it contributes both, they differ from each other, and neither is the duplicate of an earlier entry.

The length 的 getter 步骤是返回 由集合表示的节点数。

索引属性 getter 必须返回通过给定传递的索引 获取“全部”索引的元素 的结果 this

The namedItem(name) 方法步骤是返回 获取“全部”命名的元素 的结果 this 给定 name

The item(nameOrIndex) 方法步骤是:

  1. 如果未提供 nameOrIndex ,则返回 null。

  2. 返回 获取“全部”索引或命名的元素 的结果 this给定 nameOrIndex


以下元素是 “全部”命名元素abuttonembedformframeframesetiframeimginputmapmetaobjectselect,以及 textarea

To get the "all"-indexed element from an HTMLAllCollection collection given an index index,返回 collectionth element in index个元素,如果没有这样的 indexth element.

To get the "all"-named element(s) from an HTMLAllCollection collection given a name name,执行以下步骤:

  1. 如果 name 是空字符串,则返回 null。

  2. subCollection 成为一个 HTMLCollection object rooted at the same Document as collection, whose filter matches only elements that are either:

  3. 如果 subCollection中只有一个元素,则返回该元素。

  4. 否则,如果 subCollection 为空,则返回 null。

  5. 否则,返回 subCollection

To get the "all"-indexed or named element(s) from an HTMLAllCollection collection given nameOrIndex

  1. 如果 nameOrIndex转换 为 JavaScript 字符串值,是一个 数组索引属性名称, return the result of getting the "all"-indexed element from nameOrIndex 表示的数字从 collection.

  2. Return the result of getting the "all"-named element(s) from nameOrIndexcollection.

2.6.4.1.1 [[Call]] ( thisArgument, argumentsList )
  1. 如果 argumentsList大小 为零,或者 argumentsList[0] 是 undefined,则返回 null。

  2. argumentsList [0] 转换 argumentsList[0] to a DOMString.

  3. Let result be the result of getting the "all"-indexed or named element(s) from this HTMLAllCollection given nameOrIndex

  4. Return the result of converting result to an ECMAScript value.

忽略 thisArgument ,因此诸如 Function.prototype.call.call(document.all, null, "x") 的代码仍将搜索元素。(document.all.call 不存在,因为 document.all 不继承自 Function.prototype。)

2.6.4.2 The HTMLFormControlsCollection 接口

The HTMLFormControlsCollection 接口用于 集合 of listed elements in form elements.

HTMLFormControlsCollection

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet ExplorerNo
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

RadioNodeList

Support in all current engines.

Firefox33+Safari7+Chrome21+
Opera?Edge79+
Edge (旧版)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
[Exposed=Window]
interface HTMLFormControlsCollection : HTMLCollection {
  // inherits length and item()
  getter (RadioNodeList or Element)? namedItem(DOMString name); // shadows inherited namedItem()
};

[Exposed=Window]
interface RadioNodeList : NodeList {
  attribute DOMString value;
};
collection.length

返回 collection中的元素数量。

element = collection.item(index)
element = collection[index]

返回 collection 中索引为 index的项。项按 树顺序排序。

element = collection.namedItem(name)

HTMLFormControlsCollection/namedItem

Support in all current engines.

Firefox33+Safari4+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet ExplorerNo
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
radioNodeList = collection.namedItem(name)
element = collection[name]
radioNodeList = collection[name]

Returns the item with ID or name name from collection.

如果有多个匹配的项,则返回包含所有这些元素的 RadioNodeList 对象。

radioNodeList.value

返回 radioNodeList所代表的第一个选中的单选按钮的值。

radioNodeList.value = value

选择第一个值为 valueradioNodeList所代表的单选按钮。

このオブジェクトの 対応プロパティインデックス は、 HTMLCollection オブジェクトに定義されているものと同じである。

The 対応プロパティ名 consist of the non-empty values of all the id および name attributes of all the elements represented by the collection, in ツリー順で並べられ、 後の重複は無視される。また、要素が両方を持ち、それぞれが異なり、どちらも以前のエントリと重複しない場合は、 idname よりも先に来る。

The namedItem(name) メソッドは 次のアルゴリズムに従って動作しなければならない:

  1. If name が空文字列である場合、null を返してアルゴリズムを終了する。
  2. メソッドが呼び出された時点で、コレクション内に id 属性または name 属性が nameと等しいノードがちょうど 1 つだけ存在する場合、そのノードを返し、アルゴリズムを終了する。
  3. それ以外の場合、コレクション内に id 属性または name 属性が nameと等しいノードが存在しない場合、null を返してアルゴリズムを終了する。
  4. それ以外の場合、新しい RadioNodeList オブジェクトを作成する。このオブジェクトは ライブHTMLFormControlsCollection オブジェクトを表し、さらに RadioNodeList オブジェクト内のノードは id 属性または name 属性が nameと等しいものだけに絞り込まれている。 RadioNodeList オブジェクト内のノードは ツリー順で並べること。
  5. その RadioNodeList オブジェクトを返す。

Members of the RadioNodeList 接口的成员从 NodeList 接口继承,必须像在 NodeList 对象上一样表现。

RadioNodeList/value

Support in all current engines.

Firefox33+Safari7+Chrome21+
Opera?Edge79+
Edge (旧版)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The value IDL 属性在 RadioNodeList 对象上,获取时必须返回通过运行以下步骤返回的值:

  1. element be the first element in tree order represented by the RadioNodeList object that is an input 元素,其 type 属性处于 单选按钮 状态并且其 已选中 状态为真。否则,让其为 null。

  2. 如果 element 为 null,则返回空字符串。

  3. 如果 element 是一个没有 value 属性的元素,则返回字符串 "on"。

  4. 否则,返回 elementvalue 属性的值。

在设置时, value IDL 属性必须运行以下步骤:

  1. 如果新值为字符串 "on":让 element be the first element in tree order represented by the RadioNodeList object that is an input 元素,其 type 属性处于 单选按钮 状态并且其 value 内容属性不存在,或存在且等于新值,如果有。如果不存在这样的元素,则让 element 为 null。

    否则:让 element be the first element in tree order represented by the RadioNodeList object that is an input 元素,其 type 属性处于 单选按钮 状态并且其 value 内容属性存在并等于新值,如果有。如果不存在这样的元素,则让 element 为 null。

  2. 如果 element 不为 null,则将其 已选中 状态设置为真。

2.6.4.3 The 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+

The 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

When set to a smaller number than the existing length, truncates the number of option elements in the container corresponding to collection.

When set to a greater number than the existing length, if that number is less than or equal to 100000, adds new blank option elements to the container corresponding to collection.

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]

Returns the item with IDname name from collection.

如果有多个匹配项,则返回第一个匹配项。

collection.add(element[, before])

before 指定的节点前插入 element

The before 参数可以是一个数字,在这种情况下, element 插入到该编号的项之前;也可以是 collection中的一个元素,在这种情况下, element 插入到该元素之前。

如果 before 被省略、为空或为超出范围的数字 ,则 element 将添加到列表末尾。

Throws a "HierarchyRequestError" DOMException if element is an ancestor of the element into which it is to be inserted.

collection.remove(index)

collection 中移除索引为 index的项。

collection.selectedIndex

返回第一个被选中项的索引(如果有),否则返回 -1。

collection.selectedIndex = index

Changes the selection to the option element at index collection 中索引为 index.

对象的 支持的属性索引HTMLCollection 对象中定义。

The length 的获取步骤是返回 collection 表示的节点数

The length 的设置步骤为:

  1. currentcollection 表示的节点数

  2. 如果给定值大于 current,则:

    1. If the given value is greater than 100,000, then return.

    2. nvaluecurrent.

    3. 新的 option 元素追加select 元素;该元素是 this is rooted given n.

  3. 如果给定值小于 current,则:

    1. ncurrent - value

    2. 从其父节点中移除集合中的最后 n 个节点。

设置 length 永远不会移除或添加任何 optgroup 元素,也不会向现有的 optgroup 元素中添加新的子节点(尽管它可以从中移除子节点)。

The 支持的属性名称 由所有非空值组成 idname 属性的所有元素 由集合表示,按 树顺序,忽略后续的重复项,其中 id 的元素优先于其 name 如果它们同时贡献,它们彼此不同,并且都不是先前条目的重复项。

要将 新的 option 元素追加 to a select 元素 select given a non-negative integer count:

  1. fragment 为一个新的 DocumentFragment , 其 节点 文档select节点文档

  2. count 个新的 option 元素追加到 fragment

  3. Append fragment to select

To set the value of a new indexed property or set the value of an existing indexed property for an HTMLOptionsCollection collection,在给定属性索引 index 和新值 value:

  1. 如果 value is null, then remove an option from index ,从 collection and return.

  2. length be the number of nodes represented by collection.

  3. deltaindexlength

  4. 如果 delta is greater than 0, then 新的 option 元素追加 to the select element on which collection is rooted given delta.

  5. 如果 delta is greater than or equal to 0, then 追加 collection 所根植的 select 元素。 否则,用 value is rooted. Otherwise, 替换 the collection中的第 index by value.

The add(element, before) 方法步骤是:

  1. 如果 element is an ancestor of the select element on which this is rooted, then throw a "HierarchyRequestError" DOMException

  2. 如果 before is an element, but that element isn't a descendant of the select element on which this is rooted, then throw a "NotFoundError" DOMException

  3. 如果 elementbefore 是同一个元素,则返回。

  4. reference 为 null。

  5. 如果 before 是一个节点,则将 reference 设置为 before。 否则,如果 before is an integer and there is a beforeth node in this中存在第 before to that node.

  6. 如果 reference 不为 null,则令 parentreference is not null; otherwise the select element on which this is rooted.

  7. Pre-insert element into parent 节点中,位于 reference之前。

To remove an option from an HTMLOptionsCollection collection given an integer index:

  1. If the number of nodes represented by collection is 0, then return.

  2. 如果 index is not a number greater than or equal to 0 and less than the number of nodes represented by collection, then return.

  3. elementcollection中的第 index个元素。

  4. 从其父节点中移除 element

The remove(index) method steps are to remove an option from this given index.

The selectedIndex 获取器步骤是: 返回 this 所根植的 select 元素的 选中索引

The selectedIndex 设置器步骤 是:将 this 所根植的 select 元素的 选中 索引 设置为给定值。

2.6.5 The 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+

The 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 对象都有关联的 列表

The DOMStringList 接口 支持索引属性受支持的属性索引此对象 of this's associated list.

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+

The length 的 getter 步骤是返回 此对象关联列表的 大小

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+

The item(index) method steps are to return the indexth item in 此对象关联列表中第 index plus one is greater than 此对象关联列表的 大小,则返回 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+

The contains(string) 方法的步骤是: 如果 此对象的关联列表 包含 string,则返回 true,否则返回 false。

2.7 安全传递结构化数据

To support passing JavaScript objects, including platform objects, across realm boundaries, this specification defines the following infrastructure for serializing and deserializing objects, including in some cases transferring the underlying data instead of copying it. Collectively this serialization/deserialization process is known as "structured cloning", although most APIs perform separate serialization and deserialization steps. (With the notable exception being the structuredClone() 方法。)

本节使用了JavaScript规范中的术语和排版约定。 [JAVASCRIPT]

2.7.1 可序列化对象

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+SafariNoChrome77+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+SafariNoChrome77+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+SafariNoChrome77+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+SafariNoChrome77+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+SafariNoChrome77+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+SafariNoChrome77+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

/developer.mozilla.org/en-US/docs/Glossary/Serializable_object

Firefox103+SafariNoChrome77+
Opera?Edge79+
Edge (旧版)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

可序列化对象 支持以独立于任何特定 realm的方式进行序列化和稍后反序列化。这使得它们可以存储在磁盘上并稍后恢复,或跨 代理 甚至 代理集群 边界进行克隆。

并非所有对象都是 可序列化对象, and not all aspects of objects that are serializable objects are necessarily preserved when they are serialized.

平台对象 可以是 可序列化对象 ,如果它们的 主要接口 带有 [Serializable] IDL 扩展属性。这些接口还必须定义以下算法:

序列化步骤,接受一个 平台对象 value,一个 记录 serialized,以及一个布尔值 forStorage

一组步骤,将 value 中的数据序列化为 serialized的字段。序列化到 serialized 中的结果数据必须独立于任何 realm

如果序列化不可能,这些步骤可能会抛出异常。

这些步骤可能执行 子序列化 以序列化嵌套的数据结构。它们不应直接调用 StructuredSerialize ,因为这样做会遗漏重要的 memory 参数。

如果 forStorage 参数与算法无关,应在引入这些步骤时省略提及。

反序列化步骤,接受一个 记录 serialized,一个 平台对象 value,以及一个 realm targetRealm

一组步骤,将 serialized中的数据反序列化,适当设置 valuevalue will be a newly-created instance of the platform object type in question, with none of its internal data set up; setting that up is the job of these steps.

如果反序列化不可能,这些步骤可能会抛出异常。

这些步骤可能执行 子反序列化 以反序列化嵌套的数据结构。它们不应直接调用 StructuredDeserialize ,因为这样做会遗漏重要的 targetRealmmemory 参数。

定义单个平台对象的数据在这些步骤中如何被序列化和反序列化是个体平台对象定义的责任。通常这些步骤是非常对称的。

The [Serializable] 扩展属性不得带有任何参数,并且只能出现在接口上。在一个接口上不得出现超过一次。

对于给定的 平台对象,只有对象的 主要接口 在(反)序列化过程中被考虑。因此,如果在定义接口时涉及继承,每个继承链中的 [Serializable]注释接口需要定义独立的 序列化步骤反序列化步骤,包括考虑任何可能来自继承接口的重要数据。

假设我们定义了一个平台对象 Person,它关联了两部分数据:

然后我们可以通过将 Person instances to be serializable objects by annotating the Person interface with the [Serializable] 扩展属性, and defining the following accompanying algorithms:

它们的 序列化步骤,给定 valueserialized

  1. serialized.[[Name]] 设为 value关联的名称值。

  2. serializedBestFriend子序列化 of value关联的好朋友值的结果。

  3. serialized.[[BestFriend]] 设为 serializedBestFriend

它们的 反序列化步骤,给定 serializedvaluetargetRealm

  1. value关联的名称值设为 serialized.[[Name]]。

  2. deserializedBestFriend子反序列化 of serialized.[[BestFriend]] 的结果。

  3. value关联的好朋友值设为 deserializedBestFriend

JavaScript规范中定义的对象由 StructuredSerialize 抽象操作直接处理。

最初,本规范定义了“可克隆对象”的概念,可以从一个 realm 克隆到另一个realm。然而,为了更好地指定某些更复杂情况的行为,模型被更新为使序列化和反序列化显式化。

2.7.2 可转移对象

可转移对象 支持在 代理之间转移。转移实际上是重新创建对象,同时共享对底层数据的引用,然后分离被转移的对象。这对于转移昂贵资源的所有权非常有用。并非所有对象都是 可转移对象 and not all aspects of objects that are transferable objects are necessarily preserved when transferred.

转移是不可逆且非幂等的操作。一旦对象被转移,它不能再被转移,甚至不能再被使用。

平台对象 可以是 可转移对象 ,如果它们的 主要接口 带有 [Transferable] IDL 扩展属性。这些接口还必须定义以下算法:

转移步骤,接受一个 平台对象 value ,以及一个 记录 dataHolder

一组步骤,将 value 中的数据转移到 dataHolder的字段中。保存在 dataHolder 中的结果数据必须独立于任何 realm

如果转移不可能,这些步骤可能会抛出异常。

接收转移步骤,接受一个 记录 dataHolder ,以及一个 平台对象 value

一组步骤,接收 dataHolder中的数据,适当设置 valuevalue will be a newly-created instance of the platform object type in question, with none of its internal data set up; setting that up is the job of these steps.

如果无法接收转移,这些步骤可能会抛出异常。

定义单个平台对象的数据在这些步骤中如何被转移是个体平台对象定义的责任。通常这些步骤是非常对称的。

The [Transferable] 扩展属性不得带有任何参数,并且只能出现在接口上。在一个接口上不得出现超过一次。

对于给定的 平台对象,只有对象的 主要接口 在转移过程中被考虑。因此,如果在定义接口时涉及继承,每个继承链中的 [Transferable]注释接口需要定义独立的 转移步骤接收转移步骤,包括考虑任何可能来自继承接口的重要数据。

作为可转移对象的平台对象 that are transferable objects have a [[Detached]] 内部槽。这用于确保一旦平台对象被转移,它不能再次被转移。

JavaScript规范中定义的对象由 StructuredSerializeWithTransfer 抽象操作直接处理。

2.7.3 StructuredSerializeInternal ( value, forStorage [ , memory ] )

The StructuredSerializeInternal 抽象操作以一个 JavaScript 值 value 为输入,将其序列化为一个独立于 realm的形式,这里表示为一个 记录。这种序列化形式包含所有必要的信息,以便以后在不同的 realm 中反序列化为一个新的 JavaScript 值。

此过程可能会抛出异常,例如尝试序列化不可序列化的对象时。

  1. 如果未提供 memory ,则让 memory 成为空的 map

    The purpose of the memory map 的目的是避免对象被序列化两次。这最终保留了图中的循环和重复对象的身份。

  2. 如果 memory[value] 存在,则返回 memory[value]。

  3. deep 为 false。

  4. 如果 value 是 undefined、null、 布尔值数字大整数,或 字符串,则返回 { [[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 不能离开一个 agent 集群

      2. 如果 forStorage 为 true,则抛出 "DataCloneError" DOMException

      3. 如果 value 有 [[ArrayBufferMaxByteLength]] 内部槽,则将 serialized 设置为 { [[Type]]: "GrowableSharedArrayBuffer", [[ArrayBufferData]]: value.[[ArrayBufferData]], [[ArrayBufferByteLengthData]]: value.[[ArrayBufferByteLengthData]], [[ArrayBufferMaxByteLength]]: value.[[ArrayBufferMaxByteLength]], [[AgentCluster]]: 周围 agentagent 集群 }。

      4. 否则,将 serialized 设置为 { [[Type]]: "SharedArrayBuffer", [[ArrayBufferData]]: value.[[ArrayBufferData]], [[ArrayBufferByteLength]]: value.[[ArrayBufferByteLength]], [[AgentCluster]]: 周围 agentagent 集群 }。

    2. 否则:

      1. 如果 IsDetachedBuffer(value) 是 true,则抛出 "DataCloneError" DOMException

      2. sizevalue.[[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. message 为 undefined,如果 IsDataDescriptor(valueMessageDesc) 为 false;否则为 ? ToString(valueMessageDesc.[[Value]])。

    5. stack 为一个 实现定义的 字符串,表示 value.[[Stack]]。 [JSERRORSTACKACCESSOR] [JSERRORSTACKS]

    6. serialized 设置为 { [[Type]]: "Error", [[Name]]: name, [[Message]]: message, [[Stack]]: stack }。

    7. 用户代理应将任何尚未指定的有意义伴随数据的序列化表示附加到 serialized

  18. 否则,如果 value 是一个数组异类对象,则:

    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 成为 主接口 of 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 is not the %Object.prototype% intrinsic object associated with any realm, then throw a "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. 对于每个 记录 { [[Key]], [[Value]] } entryvalue.[[MapData]] 中:

        1. copiedEntry 成为一个新的 记录 { [[Key]]: entry.[[Key]], [[Value]]: entry.[[Value]] }。

        2. 如果 copiedEntry.[[Key]] 不是特殊值 , append copiedEntry to copiedList

      3. 对于每个 记录 { [[Key]], [[Value]] } entrycopiedList中:

        1. serializedKey 成为 ? StructuredSerializeInternal(entry.[[Key]], forStorage, memory)。

        2. serializedValue 成为 ? StructuredSerializeInternal(entry.[[Value]], forStorage, memory)。

        3. Append { [[Key]]: serializedKey, [[Value]]: serializedValue } to serialized.[[MapData]]。

    2. 否则,如果 value 有 [[SetData]] 内部槽,则:

      1. copiedList 成为一个新的空 列表

      2. 对于每个 entryvalue.[[SetData]] 中:

        1. 如果 entry 不是特殊值 , append entry to copiedList

      3. 对于每个 entrycopiedList中:

        1. serializedEntry 成为 ? StructuredSerializeInternal(entry, forStorage, memory)。

        2. Append serializedEntry to serialized.[[SetData]]。

    3. 否则,如果 value 是一个 平台对象 ,且是一个 可序列化对象, then perform the serialization steps for value主接口, given valueserializedforStorage

      The 序列化步骤 可能需要执行 子序列化。这是一个以值 subValue为输入的操作,并返回 StructuredSerializeInternal(subValue, forStorage, memory)。(换句话说,一个 子序列化StructuredSerializeInternal 在此次调用中的特化。)

    4. Otherwise, for each key in ! EnumerableOwnProperties(value, key):

      1. 如果 ! HasOwnProperty(value, key) 为 true,则:

        1. inputValue 成为 ? value.[[Get]](key, value)。

        2. outputValue 成为 ? StructuredSerializeInternal(inputValue, forStorage, memory)。

        3. Append { [[Key]]: key, [[Value]]: outputValue } to serialized.[[Properties]]。

  27. 返回 serialized

需要注意的是, 记录StructuredSerializeInternal 生成的可能包含指向其他记录的“指针”,这些指针会创建循环引用。例如,当我们将以下 JavaScript 对象传递给 StructuredSerializeInternal时:

const o = {};
o.myself = o;

它会生成以下结果:

{
  [[Type]]: "Object",
  [[Properties]]: «
    {
      [[Key]]: "myself",
      [[Value]]: <a pointer to this whole structure>
    }
  »
}

2.7.4 StructuredSerialize ( value )

  1. 返回 ? StructuredSerializeInternal(value, false)。

2.7.5 StructuredSerializeForStorage ( value )

  1. 返回 ? StructuredSerializeInternal(value, true)。

2.7.6 结构化反序列化 ( serialized, targetRealm [, memory ])

The 结构化反序列化 抽象操作接受一个 记录 serialized作为输入,该记录之前由 结构化序列化存储用结构化序列化生成,并将其反序列化为在 targetRealm中创建的新JavaScript值。

此过程可能会抛出异常,例如在尝试为新对象(尤其是 ArrayBuffer 对象)分配内存时。

  1. 如果未提供 memory ,则将 memory 设为空的 映射

    The purpose of the 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 为? 结构化反序列化(serialized.[[ArrayBufferSerialized]], targetRealm, memory)。

    2. 如果 serialized.[[Constructor]]是"DataView",则将 value 设为在 targetRealm 中新的DataView对象,其[[ViewedArrayBuffer]]内部槽值为 deserializedArrayBuffer,其[[ByteLength]]内部槽值为 serialized.[[ByteLength]],其[[ByteOffset]]内部槽值为 serialized.[[ByteOffset]]。

    3. 否则,将 value 设为在 targetRealm中新的类型数组对象,使用 serialized.[[Constructor]]给定的构造函数,其[[ViewedArrayBuffer]]内部槽值为 deserializedArrayBuffer,其[[TypedArrayName]]内部槽值为 serialized.[[Constructor]],其[[ByteLength]]内部槽值为 serialized.[[ByteLength]],其[[ByteOffset]]内部槽值为 serialized.[[ByteOffset]],其[[ArrayLength]]内部槽值为 serialized.[[ArrayLength]]。

  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. outputPrototargetRealm.[[Intrinsics]].[[%Array.prototype%]]。

    2. value 设为! 数组创建(serialized.[[Length]], outputProto)。

    3. deep 设为true。

  20. 否则,如果 serialized.[[Type]]是"Object",则:

    1. value 设为在 targetRealm中的新对象。

    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. messageserialized.[[Message]]。

    9. value 设为 OrdinaryObjectCreate(prototype, « [[ErrorData]], [[Stack]] »)。

    10. messageDesc属性描述符 { [[Value]]: message, [[Writable]]: true, [[Enumerable]]: false, [[Configurable]]: true}。

    11. 如果 message 不为undefined,则执行! 普通定义自有属性(value, "message", messageDesc)。

    12. value.[[Stack]] 设置为 serialized.[[Stack]]。

    13. 任何附加到 serialized 上的有趣的附加数据都应该被反序列化并附加到 value上。

  22. 否则:

    1. interfaceNameserialized.[[Type]]。

    2. 如果 interfaceName is not exposed in targetRealm, then throw a "DataCloneError" DOMException

    3. value 设为在 targetRealm中创建的由 interfaceName标识的接口的新实例。

    4. deep 设为true。

  23. 设置 memory[serialized]为 value

  24. 如果 deep 为true,则:

    1. 如果 serialized.[[Type]]是"Map",则:

      1. 对每个 记录 {[[Key]], [[Value]]} entryserialized.[[MapData]]进行:

        1. deserializedKey 为? 结构化反序列化(entry.[[Key]], targetRealm, memory)。

        2. deserializedValue 为? 结构化反序列化(entry.[[Value]], targetRealm, memory)。

        3. 附加 {[[Key]]: deserializedKey, [[Value]]: deserializedValue }到 value.[[MapData]]。

    2. 否则,如果 serialized.[[Type]]是"Set",则:

      1. 对每个 entryserialized.[[SetData]]进行:

        1. deserializedEntry 为? 结构化反序列化(entry, targetRealm, memory)。

        2. 附加 deserializedEntryvalue.[[SetData]]。

    3. 否则,如果 serialized.[[Type]]是"Array"或"Object",则:

      1. 对每个 记录 {[[Key]], [[Value]]} entryserialized.[[Properties]]进行:

        1. deserializedValue 为? 结构化反序列化(entry.[[Value]], targetRealm, memory)。

        2. result 为! 创建数据属性(value, entry.[[Key]], deserializedValue)。

        3. 断言result 为true。

    4. 否则:

      1. Perform the appropriate deserialization steps for the interface identified by serialized.[[Type]], given serializedvaluetargetRealm

        The 反序列化步骤 可能需要执行 子反序列化。这是一个操作,接受先前序列化的 记录 subSerialized作为输入,并返回 结构化反序列化(subSerializedtargetRealmmemory)。(换句话说, 子反序列化结构化反序列化 的特化,以在此调用中保持一致。)

  25. 返回 value

2.7.7 StructuredSerializeWithTransfer ( value, transferList )

  1. memory 为一个空的 map

    除了 StructuredSerializeInternal正常使用外,在这个算法中 memory 还用于确保 StructuredSerializeInternal 忽略 transferList中的项目,并让我们自己处理。

  2. 对于每个 transferabletransferList

    1. 如果 transferable 既没有 [[ArrayBufferData]] 内部槽也没有 [[Detached]] 内部槽,则抛出 "DataCloneError" DOMException

    2. 如果 transferable 具有 [[ArrayBufferData]] 内部槽且 IsSharedArrayBuffer(transferable) 为真,则抛出 "DataCloneError" DOMException

    3. 如果 memory[transferable] 存在,则抛出 "DataCloneError" DOMException

    4. 设置 memory[transferable] 为 {[[Type]]: 未初始化的值}。

      transferable 尚未传输,因为传输有副作用,并且 StructuredSerializeInternal 需要先能够抛出。

  3. serialized 为 ? StructuredSerializeInternal(value, false, memory)。

  4. transferDataHolders 为一个新的空的 List

  5. 对于每个 transferabletransferList

    1. 如果 transferable 具有 [[ArrayBufferData]] 内部槽且 IsDetachedBuffer(transferable) 为真,则抛出 "DataCloneError" DOMException

    2. 如果 transferable 具有 [[Detached]] 内部槽且 transferable.[[Detached]] 为真,则抛出 "DataCloneError" DOMException

    3. dataHoldermemory[transferable]。

    4. 如果 transferable 具有 [[ArrayBufferData]] 内部槽,则:

      1. 如果 transferable 具有 [[ArrayBufferMaxByteLength]] 内部槽,则:

        1. dataHolder.[[Type]] 设为 "ResizableArrayBuffer"。

        2. dataHolder.[[ArrayBufferData]] 设为 transferable.[[ArrayBufferData]]。

        3. dataHolder.[[ArrayBufferByteLength]] 设为 transferable.[[ArrayBufferByteLength]]。

        4. dataHolder.[[ArrayBufferMaxByteLength]] 设为 transferable.[[ArrayBufferMaxByteLength]]。

      2. 否则:

        1. dataHolder.[[Type]] 设为 "ArrayBuffer"。

        2. data Holder.[[ArrayBufferData]] 设为 transferable.[[ArrayBufferData]]。

        3. dataHolder.[[ArrayBufferByteLength]] 设为 transferable.[[ArrayBufferByteLength]]。

      3. 执行 ? DetachArrayBuffer(transferable)。

        规范可以使用 [[ArrayBufferDetachKey]] 内部槽来防止 ArrayBuffer被分离。例如,这在 WebAssembly JavaScript Interface中使用。 [WASMJS]

    5. 否则:

      1. 断言transferable 是一个 平台对象 ,并且是一个 可转移对象

      2. interfaceName主接口 的标识符。 transferable

      3. dataHolder.[[Type]] 设为 interfaceName

      4. 执行适当的 传输步骤 ,给定 transferabledataHolder ,由 interfaceName标识的接口。

      5. transferable.[[Detached]] 设为真。

    6. 追加 dataHoldertransferDataHolders

  6. 返回 { [[Serialized]]: serialized, [[TransferDataHolders]]: transferDataHolders }。

2.7.8 StructuredDeserializeWithTransfer ( serializeWithTransferResult, targetRealm )

  1. memory 为一个空的 map

    类似于 StructuredSerializeWithTransfer,除了正常被 StructuredDeserialize使用外,在这个算法中 memory 还用于确保 StructuredDeserialize 忽略 serializeWithTransferResult.[[TransferDataHolders]] 中的项目,让我们自己进行处理。

  2. transferredValues 为一个新的空的 List

  3. 对于每个 transferDataHolderserializeWithTransferResult.[[TransferDataHolders]]:

    1. value 为一个未初始化的值。

    2. 如果 transferDataHolder.[[Type]] 是 "ArrayBuffer",则将 value 设为在 targetRealm 中创建的新 ArrayBuffer 对象,其 [[ArrayBufferData]] 内部槽值为 transferDataHolder.[[ArrayBufferData]],且 [[ArrayBufferByteLength]] 内部槽值为 transferDataHolder.[[ArrayBufferByteLength]]。

      在原始内存仍可访问的情况下,这一步骤不太可能抛出异常,因为不需要分配新的内存:[[ArrayBufferData]] 占用的内存只是被转移到新的 ArrayBuffer 中。这可能在源和目标领域在同一进程中时为真。

    3. 否则,如果 transferDataHolder.[[Type]] 是 "ResizableArrayBuffer",则将 value 设为在 targetRealm 中创建的新 ArrayBuffer 对象,其 [[ArrayBufferData]] 内部槽值为 transferDataHolder.[[ArrayBufferData]],[[ArrayBufferByteLength]] 内部槽值为 transferDataHolder.[[ArrayBufferByteLength]],以及 [[ArrayBufferMaxByteLength]] 内部槽值为 transferDataHolder.[[ArrayBufferMaxByteLength]]。

      与前一步相同,这一步骤也不太可能抛出异常。

    4. 否则:

      1. interfaceNametransferDataHolder.[[Type]]。

      2. 如果由 interfaceName 标识的接口在 targetRealm中不可用,则抛出 "DataCloneError" DOMException

      3. value 设为在 targetRealm中创建的由 interfaceName标识的接口的新实例。

      4. 执行适当的 接收转移步骤 ,针对由 interfaceName 标识的接口,给定 transferDataHoldervalue

    5. 设置 memory[transferDataHolder] 为 value

    6. 追加 valuetransferredValues

  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 objects, since storing shared memory does not make sense. Similarly, it can throw or possibly have different behavior when given a platform object with custom 序列化步骤 when the forStorage 参数为true时,它可能抛出异常或具有不同的行为。

history.pushState()history.replaceState() 使用 StructuredSerializeForStorage 作用于作者提供的状态对象,将它们作为 序列化状态 存储在相应的 会话历史条目中。然后, StructuredDeserialize 被用来让 history.state 属性返回原始状态对象的克隆。

broadcastChannel.postMessage() 在其输入上使用 StructuredSerialize ,然后对结果多次使用 StructuredDeserialize ,以便为每个广播目的地产生一个新的克隆。请注意,在多目的地情况下,传输是不合适的。

任何用于将JavaScript值持久化到文件系统的API也会在其输入上使用 StructuredSerializeForStorage ,并在其输出上使用 StructuredDeserialize

一般来说,调用点可能会传递Web IDL值而不是JavaScript值;这应该理解为在调用这些算法之前执行隐式 转换 为JavaScript值。


Call sites that are not invoked as a result of author code synchronously calling into a user agent method must take care to properly prepare to run script and prepare to run a callback before invoking StructuredSerializeStructuredSerializeForStorageStructuredSerializeWithTransfer abstract operations, if they are being performed on arbitrary objects. This is necessary because the serialization process can invoke author-defined accessors as part of its final deep-serialization steps, and these accessors could call into operations that rely on the entryincumbent 概念的操作。

window.postMessage() 在其参数上执行 StructuredSerializeWithTransfer ,但要小心立即在其算法的同步部分内执行。因此,它可以使用这些算法,而不需要 准备运行脚本准备运行回调

相比之下,一个假设的API,使用 StructuredSerialize 来定期序列化一些作者提供的对象,直接从 任务事件循环上进行,将需要确保它事先执行适当的准备。截至目前,我们知道平台上没有这样的API;通常,提前进行序列化作为作者代码的同步结果会更简单。

2.7.10 结构化克隆 API

result = self.structuredClone(value[, { transfer }])

获取输入值并通过执行结构化克隆算法返回一个深拷贝。 可转移对象 列在 transfer 数组中,这些对象被转移而不仅仅是克隆,这意味着它们在输入值中不再可用。

Throws a "DataCloneError" DOMException if any part of the input value is not serializable.

structuredClone

所有当前引擎都支持。

Firefox94+Safari15.4+Chrome98+
Opera?Edge98+
Edge (旧版)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The structuredClone(value, options) 方法步骤如下:

  1. serialized 为 ? StructuredSerializeWithTransfer(value, options["transfer"])。

  2. deserializeRecord 为 ? StructuredDeserializeWithTransfer(serialized, this相关realm)。

  3. 返回 deserializeRecord.[[Deserialized]]。

3 HTML文档的语义、结构和API

3.1 文档

HTML UA中的每个XML和HTML文档都由一个 Document 对象表示。 [DOM]

Document 对象的 URLDOM中定义。它在创建 Document 对象时被初始化设置,但在该 Document 对象的生命周期内可以更改;例如,当用户 导航 到页面上的 片段 时,以及调用 pushState() 方法并传入新的 URL时,它会发生变化。 [DOM]

交互式用户代理通常在其用户界面中公开 Document 对象的 URL 。这是用户判断某个站点是否试图冒充另一个站点的主要机制。

Document 对象的 originDOM中定义。它在创建 Document object is created, and can change during the lifetime of the Document only upon setting document.domain. A Documentorigin 可以与其 URLorigin不同;例如,当创建一个 子可导航环境 is created, its 活动文档origin 会继承自其 父可导航环境活动文档origin,即使其 活动文档URLabout:blank[DOM]

当一个 Document脚本 使用 createDocument()createHTMLDocument() 方法创建时, Document 会立即 准备好进行加载后任务

文档的引用者 是一个字符串(表示 URL),可以在 Document 创建时设置。如果未显式设置,则其值为空字符串。

3.1.1 The 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 都有一个 opener 策略, 它是一个 opener 策略,初始为一个新的 opener 策略。

每个 Document 都有一个 是初始 about:blank,它是一个 布尔值,初始为 false。

每个 Document 都有一个 用于 WebDriver BiDi 的加载期间 导航 ID,它是一个 导航 ID 或 null,初始为 null。

顾名思义,这是用于与 WebDriver BiDi 规范交互的;该规范需要获知 Document生命周期早期 部分发生的某些情况,并且要以一种将它们关联到原始 导航 ID 的方式进行关联,该导航 ID 是在创建此 Document 的导航是 正在进行的导航时使用的。之后, 在 WebDriver BiDi 认为加载过程已完成后,这最终会被设置回 null。 [BIDI]

每个 Document 都有一个 about 基础 URL,它是一个 URL 或 null,初始为 null。

这只会为采用 "about:" 方案的 Document填充。

每个 Document 都有一个 bfcache 阻塞详细信息,它是 集合 , 其项为 未恢复原因详细信息, 初始为空。

每个 Document 都有一个 打开的对话框列表,它是一个 列表 ,其项为 dialog 元素, 初始为空。

3.1.2 The DocumentOrShadowRoot 接口

DOM 定义了 DocumentOrShadowRoot mixin,本规范对此进行了扩展。

partial interface mixin DocumentOrShadowRoot {
  readonly attribute Element? activeElement;
};

3.1.3 上级来源

一个 Document 对象有关联的 内部祖先来源对象列表,初始值为 null。

The internal ancestor origin objects list creation steps given a Document 对象 document推荐人策略 referrerPolicy are:

  1. output 为 « »。

  2. parentDocdocument容器文档

  3. 如果 parentDoc 为 null,则返回 output

  4. 断言parentDoc完全激活状态。

  5. ancestorOriginsparentDoc内部祖先来源对象列表

  6. containerdocument节点可导航容器

  7. masked 为 false。

  8. 如果 referrerPolicy 为 "no-referrer",则将 masked 设为 true。

  9. 否则,如果 referrerPolicy 为 "same-origin" 且 parentDoc来源相同来源 with document来源不同, 则将 masked 设为 true。

    由于 混合内容 检查会阻止 非安全上下文 environments in 安全上下文 环境, there's no need to check for secure contexts for "strict-origin"、 "strict-origin-when-cross-origin" 和 "no-referrer-when-downgrade" 检查安全上下文。 "origin" 和 "origin-when-cross-origin" 的值也不需特殊处理, 因为此处至多暴露一个 来源

  10. 如果 masked 为 true,则 追加 一个新的 不透明来源output

  11. 否则, 追加 parentDoc来源output

  12. 对于每个 ancestorOrigin 属于 ancestorOrigins

    1. 如果 masked 为 true 且 ancestorOrigin is same origin with parentDoc来源, then 追加 一个新的 不透明来源output , 并 继续

    2. 追加 ancestorOriginoutput , 并设置 masked 为 false。

      在此设置 masked 为 false 并不意味着所有后续祖先来源都必然暴露。 它们可能已经在先前祖先文档运行这些步骤时被遮蔽,且结果列表作为子文档创建时的起始点(见上方第5步)。

  13. 返回 output

A Document 对象有一个关联的 上级来源列表, 初始为 null。

The 上级来源列表创建步骤 给定一个 Document 对象 document 如下:

  1. ancestorOriginsdocument内部上级来源对象 列表

  2. 断言ancestorOrigins 不为 null。

  3. output 为 « »。

  4. 对于 ancestorOrigins 中的每个 origin

    1. the serialization of origin to 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" »。

对于孙子文档,子文档的 来源 被作为 不透明来源遮蔽。 由于顶层文档的 来源 is same origin with the child document's 来源同源,也被遮蔽。 日志值为 « "null", "null" »。

在此示例中,我们展示了顶层文档的来源不会被遮蔽,尽管 存在一个同源后代文档,其来源 确实 被遮蔽,因为其中夹着一个 跨源文档。

如果我们考虑前例,但顶层文档的 iframe 也包含 referrerpolicy="no-referrer",则每个文档关联的 祖先来源列表 将会是:

3.1.4 资源元数据管理

document.referrer

Document/referrer

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

Firefox1+Safari1+Chrome1+
Opera3+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

返回用户从中导航到此文档的 URL of the Document from which the user navigated to this one, unless it was blocked or there was no such document, in which case it returns the empty string.

可以使用 noreferrer 链接类型来阻止引用来源。

The referrer 属性在获取时必须返回 文档的 referrer


document.cookie [ = value ]

返回适用于该 Document的 HTTP cookies。如果没有 cookies 或 cookies 无法应用到该资源,则返回空字符串。

可以通过设置来向该元素的 HTTP cookies 集合添加新的 cookie。

如果内容被 沙箱化为不透明来源 (例如,在带有 iframe 且具有 sandbox 属性),则在获取和设置时会抛出一个 "SecurityError" DOMException

Document/cookie

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

Firefox1+Safari1+Chrome1+
Opera3+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

The cookie 属性表示文档的 URL所标识资源的 cookies。

使用同步的 document.cookie API 可能会导致性能问题。可以改用 Cookie Store API ,因为它提供了一种异步处理 cookie 的方式以避免性能问题。有关更多信息,请参阅 Cookie Store API 介绍[COOKIESTORE]

A Document 对象满足下列任一条件时, 为一个 回避 cookie 的 Document 对象

(This is a tracking vector.) 在获取时,如果文档是一个 回避 cookie 的 Document 对象, 则用户代理必须返回空字符串。否则,如果该 Documentorigin 是一个 不透明来源,用户代理必须抛出一个 "SecurityError" DOMException. Otherwise, the user agent must return the cookie-string for the document's URL for a "non-HTTP" API, decoded using 无 BOM 的 UTF-8 解码[COOKIES]

在设置时,如果文档是一个 回避 cookie 的 Document 对象,则用户代理不得执行任何操作。否则,如果该 Documentorigin 是一个 不透明来源,用户代理必须抛出一个 "SecurityError" DOMException。 否则,用户代理在接收到针对该文档的 set-cookie-string 时应当采取相同的行为,作为“非 HTTP”API 对该文档的 URL 的处理, 新值应当以 UTF-8 编码[COOKIES] [ENCODING]

由于 cookie 属性可跨帧访问, cookie 的路径限制仅是帮助管理哪些 cookie 被发送到站点的哪些部分的工具,并不构成任何安全特性。

The cookie 属性的 getter 和 setter 同步访问共享状态。由于没有锁机制,多进程的用户代理中的其他浏览上下文可能会在脚本运行时修改 cookie。例如,一个站点可能尝试读取一个 cookie,将其值递增,然后写回去,使用该新值作为会话的唯一标识;如果该站点在两个不同的浏览器窗口中同时这样做,可能会最终为两个会话使用相同的“唯一”标识,从而产生潜在的灾难性后果。


document.lastModified

Document/lastModified

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

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回由服务器报告的该文档最后修改日期,格式为 "MM/DD/YYYY hh:mm:ss",使用用户的本地时区。

如果最后修改日期未知,则返回当前时间。

The lastModified 属性在获取时,必须返回该 Document源文件的最后修改日期和时间, 使用用户的本地时区,并采用以下格式:

  1. 日期的月份部分。

  2. 一个 U+002F SOLIDUS 字符 (/)。

  3. 日期的日部分。

  4. 一个 U+002F SOLIDUS 字符 (/)。

  5. 日期的年部分。

  6. 一个 U+0020 空格字符。

  7. 时间的小时部分。

  8. 一个 U+003A COLON 字符 (:)。

  9. 时间的分钟部分。

  10. 一个 U+003A COLON 字符 (:)。

  11. 时间的秒部分。

上述所有数值部分(年以外)必须用两个 ASCII 数字 表示,按十进制,必要时用零填充。年必须以最短的四位或更多的 ASCII 数字 字符串表示,按十进制,必要时用零填充。

The Document的源文件的最后修改日期和时间必须从所用网络协议的相关特性推导,例如从文档的 HTTP `Last-Modified` header of the document, or from metadata in the file system for local files. If the last modification date and time are not known, the attribute must return the current date and time in the above format.

3.1.5 报告文档加载状态

document.readyState

Returns "loading" while the Document 加载时返回“interactive”,解析完成但仍在加载子资源时返回“complete" once it has loaded.

当此值发生变化时, readystatechange 事件会在 Document 对象上触发。

The DOMContentLoaded event fires after the transition to "interactive”过渡到“complete”之前,当除 async script elements have loaded.

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”。

For Document objects created via the 创建和初始化 Document 对象 算法创建的loading对象,这将在任何脚本观察到 document.readyState. This default applies to other cases such as 初始 about:blank Documents or Documents without a browsing context.

The readyState getter步骤是返回 this当前文档准备状态

To update the current document readiness for Document document 更新当前文档准备状态为 readinessValue

  1. 如果 document当前文档准备状态 等于 readinessValue,则返回。

  2. document当前文档准备状态 设置为 readinessValue

  3. 如果 documentHTML解析器相关联,则:

    1. now be the current high resolution time given document相关全局对象.

    2. 如果 readinessValue 是“complete”,并且 document加载时间信息DOM完成时间 为0,则将 document加载时间信息DOM完成时间 设置为 now

    3. 否则,如果 readinessValue 是“interactive”,并且 document加载时间信息DOM交互时间 为0,则将 document加载时间信息DOM交互时间 设置为 now

  4. 触发一个事件 ,名为 readystatechangedocument


如果一个 Document is said to have an active parser if it is associated with an HTML parser or an XML parser that has not yet been 停止中止.


A Document 有一个 文档加载时间信息 加载时间信息

A Document 有一个 文档卸载时间信息 以前的文档卸载时间

A Document 有一个布尔值 通过跨域重定向创建,最初为false。

The 文档加载时间信息 结构体 具有以下

导航开始时间 (默认0)
一个数字
DOM交互时间 (默认0)
DOM内容加载事件开始时间 (默认0)
DOM内容加载事件结束时间 (默认0)
DOM完成时间 (默认0)
加载事件开始时间 (默认0)
加载事件结束时间 (默认0)
DOMHighResTimeStamp

The 文档卸载时间信息 结构体 具有以下

卸载事件开始时间 (默认0)
卸载事件结束时间 (默认0)
DOMHighResTimeStamp

3.1.6 渲染阻塞机制

每个 Document 都有一个 渲染阻塞元素集合,这是一个 集合 ,初始为空集合。

如果 Document document allows adding render-blocking elements if document's 内容类型 是“text/html" and body元素 为null,则 document 允许添加渲染阻塞元素。

如果以下两个条件都为真,则 Document document 被认为是 渲染阻塞

如果元素 el is render-blocking if el's 节点文档 document is 渲染阻塞, and eldocument渲染阻塞元素集合.

阻止渲染 元素 el

  1. documentel节点文档

  2. 如果 document 允许添加渲染阻塞元素, then append el 附加到 document渲染阻塞元素集合中。

解除渲染阻塞 元素 el

  1. documentel节点文档

  2. Remove el from document渲染阻塞元素集合.

Whenever a 渲染阻塞 element el 变为浏览上下文断开,或者 el阻塞属性的值发生变化,使 el 不再 潜在地渲染阻塞时,则 解除渲染阻塞 on el

3.1.7 DOM 树访问器

文档的 html 元素 是它的 文档元素,如果它是一个 html 元素,否则为 null。


document.head

Document/head

Support in all current engines.

Firefox4+Safari5+Chrome4+
Opera11+Edge79+
Edge (旧版)12+Internet Explorer9+
Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+

返回 the head element

文档的 head 元素 是第一个作为 head element that is a child of the html element, if there is one, or null otherwise.

在获取时, head 属性必须返回文档的 the head element (一个 head 元素或 null)。


document.title [ = value ]

返回文档的标题,如由 HTML 中的 the title element 和 SVG 中的 SVG title 所给定的。

可以设置,以更新文档的标题。如果没有合适的元素可以更新,新值将被忽略。

文档的 title 元素 是文档中的第一个 title 元素(按 树顺序),如果存在,否则为 null。

Document/title

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

在获取时, title 属性必须运行以下算法:

  1. 如果 文档元素 是一个 SVG svg 元素,则 令 value be the child text content of the first SVG title element that is a child of the 文档 元素的子元素。

  2. 否则,令 value be the child text content of title 元素, or the empty string if title 元素 为 null,则为空字符串。

  3. Strip and collapse ASCII whitespace in value.

  4. 返回 value

设置时,必须运行以下列表中第一个匹配条件对应的步骤:

如果 文档元素 是一个 SVG svg 元素
  1. If there is an SVG title element that is a child of the document element, let element 为第一个这样的 元素。

  2. 否则:

    1. element be the result of creating an element given the 文档 元素节点 文档、"title" 和 SVG 命名空间.

    2. element as the first child of the 文档 元素.

  3. String replace all with the given value within element.

如果 文档元素 位于 HTML 命名空间
  1. 如果 title 元素 为 null,且 head 元素 为 null,则返回。

  2. 如果 title 元素 非 null,则令 elementtitle 元素

  3. 否则:

    1. element be the result of creating an element given the 文档 元素节点 文档、"title" 和 HTML 命名空间.

    2. Append element to head 元素

  4. String replace all with the given value within element.

否则

不执行任何操作。


document.body [ = value ]

Document/body

Support in all current engines.

Firefox60+Safari1+Chrome1+
Opera9.6+Edge79+
Edge (旧版)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

返回 body 元素

可以设置,以替换 body 元素

如果新值不是 bodyframeset 元素,这将抛出一个 "HierarchyRequestError" DOMException

文档的 body 元素 是第一个作为 the html element's children that is either a body element or a frameset element, or null if there is no such element.

在获取时, body 属性必须返回文档的 body 元素 (一个 body 元素,一个 frameset 元素,或 null)。在设置时,必须运行以下算法:

  1. 如果新值不是 bodyframeset 元素,则抛出一个 "HierarchyRequestError" DOMException
  2. 否则,如果新值与 body 元素相同,则返回。
  3. 否则,如果 body 元素 不是 null,则在 替换 body 元素 与新值的父节点内的 body 元素并返回。
  4. 否则,如果没有 文档元素,则抛出一个 "HierarchyRequestError" DOMException
  5. 否则, body 元素 为 null,但有一个 文档元素. Append the new value to the 文档元素

body 获取器返回的值不总是传递给设置器的值。

在这个例子中,setter 成功地插入了一个 body 元素(虽然这不符合规范,因为 SVG 不允许 body 作为 SVG svg的子元素)。然而,getter 将返回 null,因为文档元素不是 html

<svg xmlns="http://www.w3.org/2000/svg">
 <script>
  document.body = document.createElementNS("http://www.w3.org/1999/xhtml", "body");
  console.assert(document.body === null);
 </script>
</svg>

document.images

Document/images

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回一个 HTMLCollection ,其中包含 img 元素在 Document中。

document.embeds

Document/embeds

所有当前引擎都支持。

Firefox1+Safari10.1+Chrome64+
Opera51+Edge79+
Edge (旧版)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+
document.plugins

Document/plugins

所有当前引擎都支持。

Firefox1+Safari10.1+Chrome64+
Opera51+Edge79+
Edge (旧版)12+Internet Explorer4+
Firefox Android?Safari iOS10.3+Chrome Android?WebView Android?Samsung Internet?Opera Android47+

返回一个 HTMLCollection ,其中包含 embed 元素在 Document中。

document.links

Document/links

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回一个 HTMLCollection ,其中包含 aarea 元素在 Document 中具有 href 属性。

document.forms

Document/forms

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回一个 HTMLCollection ,包含在 form 元素的 Document中。

document.scripts

Document/scripts

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回一个 HTMLCollection ,包含 script 元素在 Document中。

The images 属性必须返回一个根植于 HTMLCollectionDocument 节点,过滤器仅匹配 img 元素。

The embeds 属性必须返回一个根植于 HTMLCollectionDocument 节点,过滤器仅匹配 embed 元素。

The plugins 属性必须返回与 embeds 属性返回的对象相同的对象。

The links 属性必须返回一个根植于 HTMLCollectionDocument 节点,过滤器仅匹配带有 a 元素的 href 属性和带有 area 元素的 href 属性。

The forms 属性必须返回一个 HTMLCollection 的根节点在 Document 节点,过滤器仅匹配 form 元素。

The scripts 属性必须返回一个 HTMLCollection 的根节点在 Document 节点,过滤器仅匹配 script 元素。


collection = document.getElementsByName(name)

Document/getElementsByName

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera5+Edge79+
Edge (旧版)12+Internet Explorer5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

返回一个 NodeList 的元素在 Document 中有 name 属性值为 name

The getElementsByName(elementName) 方法步骤是返回一个 实时 NodeList containing all the HTML elements in that document that have a name attribute whose value is identical to the elementName argument, in 树顺序。当该方法再次在 Document 对象上使用相同的参数调用时,用户代理可以返回与之前调用返回的对象相同的对象。在其他情况下,必须返回一个新的 NodeList 对象。


document.currentScript

Document/currentScript

Support in all current engines.

Firefox4+Safari8+Chrome29+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回当前正在执行的 script 元素,或 SVG script 元素, 前提是该元素表示一个 经典脚本。在 可重入脚本执行的情况下,返回那些尚未执行完成的元素中最近开始执行的那个。

如果 Document 当前没有 正在执行 scriptSVG script 元素(例如,因为正在运行的脚本是一个事件 处理器,或一个定时器),或者如果当前正在执行的 scriptSVG script 元素表示一个 模块脚本,则返回 null。

The currentScript 属性,在获取时,必须返回最近设置的值。当 Document 创建时, currentScript 必须初始化为 null。

此 API 在实现者和标准社区中已经失宠,因为它全局暴露 scriptSVG script 元素。因此,它在较新的上下文中不可用,例如运行 模块脚本 或在 影子树中运行脚本时。我们正在研究在这种上下文中识别运行脚本的新解决方案,这不会使其全局可用:请参见 问题#1013


接口 Document interface 支持命名属性支持的属性名称Document 对象 document 的任何时刻包括以下内容,按贡献它们的元素的 树顺序 ,忽略后面的重复项,值来自 id 属性在来自 name 属性的值之前贡献相同时:

为了 确定命名属性 name 的值对于 Document,用户代理必须返回使用以下步骤获得的值:

  1. elements be the list of named elements with the name name命名元素 的列表,这些元素在文档树中的 Document 作为其根

    会有至少一个这样的元素,因为该算法否则不会被 由 Web IDL 调用

  2. 如果 elements 只有一个元素,并且该元素是 iframe 元素,并且该 iframe 元素的 内容可导航 不为 null,则返回该元素的 活动 WindowProxy of the element's content navigable.

  3. 否则,如果 elements 只有一个元素,则返回该元素。

  4. 否则,返回一个 HTMLCollection 的根节点在 Document node, whose filter matches only named elements with the name name.

命名元素 带有名称 name,对于上述算法而言,是那些要么是:

An embedobject 元素被称为 暴露的 如果它没有 暴露的 object 祖先,并且对于 object 元素,此外,还没有显示其 回退内容 或没有 objectembed 后代。


The dir 属性在 Document 接口中与 dir 内容属性一起定义。

3.2 元素

3.2.1 语义

HTML中的元素、属性和属性值被定义为具有某些意义(语义)。例如, ol 元素表示一个有序列表, lang 属性表示内容的语言。

这些定义使HTML处理器(如网络浏览器或搜索引擎)能够在作者可能没有考虑到的各种环境中展示和使用文档和应用程序。

作为一个简单的例子,考虑一个仅考虑桌面计算机网络浏览器的作者编写的网页:

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>My Page</title>
 </head>
 <body>
  <h1>Welcome to my page</h1>
  <p>I like cars and lorries and have a big Jeep!</p>
  <h2>Where I live</h2>
  <p>I live in a small hut on a mountain!</p>
 </body>
</html>

因为HTML传达的是 意义,而不是展示,同样的页面也可以被移动电话上的小型浏览器使用,而无需对页面进行任何更改。例如,移动电话上的浏览器可能会使用整个页面相同大小的文本,而不是像在桌面上一样的大字体,但标题部分会使用加粗。

这不仅仅是屏幕尺寸的差异:同样的页面也可以被盲人使用,他们使用基于语音合成的浏览器,这种浏览器不是在屏幕上显示页面,而是通过耳机等方式将页面读给用户听。例如,语音浏览器可能会使用不同的音量或较慢的语速来代替大字体来处理标题。

不仅如此。因为浏览器知道页面的哪些部分是标题,它们可以创建一个文档大纲,用户可以使用“跳到下一个标题”或“跳到上一个标题”的键快速导航文档。这种功能在语音浏览器中特别常见,否则用户会发现快速导航页面相当困难。

甚至超越浏览器,软件也可以利用这些信息。搜索引擎可以使用标题更有效地索引页面,或在其结果中提供到页面各部分的快速链接。工具可以使用标题创建目录(实际上,这正是本规范的目录生成方式)。

这个例子主要关注标题,但相同的原理适用于HTML中的所有语义。

作者不得将元素、属性或属性值用于其预期语义目的以外的用途,因为这样会导致软件无法正确处理页面。

例如,以下代码片段,旨在表示企业网站的标题,是不符合规范的,因为第二行不是子部分的标题,而仅仅是副标题(同一部分的从属标题)。

<body>
 <h1>ACME Corporation</h1>
 <h2>The leaders in arbitrary fast delivery since 1920</h2>
 ...

The hgroup 元素可以用于这种情况:

<body>
 <hgroup>
  <h1>ACME Corporation</h1>
  <p>The leaders in arbitrary fast delivery since 1920</p>
 </hgroup>
 ...

下一个示例中的文档尽管在语法上是正确的,但在语义上是不符合规范的,因为单元格中的数据显然不是表格数据,并且错误使用了 cite 元素:

<!DOCTYPE HTML>
<html lang="en-GB">
 <head> <title> Demonstration </title> </head>
 <body>
  <table>
   <tr> <td> My favourite animal is the cat. </td> </tr>
   <tr>
    <td><a href="https://example.org/~ernest/"><cite>Ernest</cite></a>,
     in an essay from 1992
    </td>
   </tr>
  </table>
 </body>
</html>

这会导致依赖这些语义的软件出现故障:例如,允许盲人用户导航文档中的表格的语音浏览器会将上述引用报告为表格,从而使用户感到困惑;同样,提取页面标题的工具会将“Ernest”提取为作品的标题,尽管它实际上是一个人的名字,而不是标题。

该文档的更正版本可能如下:

<!DOCTYPE HTML>
<html lang="en-GB">
 <head> <title> Demonstration </title> </head>
 <body>
  <blockquote>
   <p> My favourite animal is the cat. </p>
  </blockquote>
  <p><a href="https://example.org/~ernest/">Ernest</a>,
   in an essay from 1992
  </p>
 </body>
</html>

作者不得使用本规范或 其他适用规范不允许的元素、属性或属性值,因为这样会使将来扩展语言变得非常困难。

在下一个例子中,有一个不符合规范的属性值(“carpet”)和一个不符合规范的属性(“texture”),它们不被本规范允许:

<label>Carpet: <input type="carpet" name="c" texture="deep pile"></label>

这是标记这种内容的另一种正确方式:

<label>Carpet: <input type="text" class="carpet" name="c" data-texture="deep pile"></label>

节点文档浏览上下文 为null的DOM节点不受所有文档一致性要求的约束,除了 HTML语法 要求和 XML语法 要求。

特别是, template 元素的 模板内容节点文档浏览上下文 为null。例如, 内容模型 要求和属性值微语法要求不适用于 template 元素的 模板内容。在这个示例中,一个 img 元素具有在 template 元素之外无效的占位符属性值。

<template>
 <article>
  <img src="{{src}}" alt="{{alt}}">
  <h1></h1>
 </article>
</template>

然而,如果上面的标记省略了 </h1> 结束标签,那将违反 HTML语法,并因此被一致性检查器标记为错误。

通过脚本和其他机制,属性值、文本,甚至整个文档的结构可以在用户代理处理时动态变化。某一时刻文档的语义是由该时刻文档的状态表示的,因此文档的语义可能随时间变化。用户代理必须在这种变化发生时更新其对文档的展示。

HTML有一个 progress 元素描述进度条。如果其“value”属性由脚本动态更新,UA将更新渲染以显示进度的变化。

3.2.2 DOM中的元素

DOM中表示 HTML元素 的节点必须实现并向脚本公开本规范相关部分列出的接口。这包括在 HTML元素XML文档中,即使这些文档在另一个上下文中(例如在XSLT转换内)。

DOM中的元素 代表 事物;也就是说,它们具有内在的 意义,也称为语义。

例如,一个 ol 元素代表一个有序列表。

元素可以通过某种方式显式或隐式地被 引用 。DOM中的元素可以通过给元素一个 id 属性,然后创建一个 超链接 ,使用该 id 属性的值作为 片段标识符 for the hyperlink's href attribute value. Hyperlinks are not necessary for a reference, however; any manner of referring to the element in question will suffice.

Consider the following figure element, which is given an id attribute:

<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>

可以使用 超链接-based reference could be created using the a element, like so:

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

Support in all current engines.

火狐1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer5.5+
火狐 Android?Safari iOS1+Chrome Android?WebView Android?三星浏览器 Android?Opera Android12.1+

HTMLElement/lang

Support in all current engines.

火狐1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer5.5+
火狐 Android?Safari iOS1+Chrome Android?WebView Android?三星浏览器 Android?Opera Android12.1+

HTMLElement/inert

Support in all current engines.

火狐112+Safari15.5+Chrome102+
Opera?Edge102+
Edge(旧版)?Internet Explorer不支持
火狐 Android?Safari iOS?Chrome Android?WebView Android?三星浏览器 Android?Opera Android?

HTMLElement/accessKey

Support in all current engines.

火狐5+Safari6+Chrome17+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer5.5+
火狐 Android?Safari iOS?Chrome Android?WebView Android?三星浏览器 Android?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]
};

The HTMLElement 接口包含与许多不同特性相关的方法和属性,因此该接口的成员在本规范的各个不同部分中进行了描述。


The HTML命名空间 中名称为 name 的元素的 元素接口 确定如下:

  1. 如果 nameappletbgsoundblinkisindexkeygenmulticolnextidspacer,则返回 HTMLUnknownElement

  2. 如果 nameacronymbasefontbigcenternobrnoembednoframesplaintextrbrtcstrikett,则返回 HTMLElement

  3. 如果 namelistingxmp,则返回 HTMLPreElement

  4. Otherwise, if this specification defines an interface appropriate for the element type corresponding to the local name name, then return that interface.

  5. 如果 其他适用规范 定义了 name的适当接口,则返回它们定义的接口。

  6. 如果 name有效的自定义元素名称,则返回 HTMLElement

  7. 返回 HTMLUnknownElement

The use of HTMLElement 而不是 HTMLUnknownElement in the case of valid custom element names is done to ensure that any potential future 升级 只会导致元素原型链的线性过渡,从 HTMLElement 到子类,而不是从 HTMLUnknownElement 到不相关的子类的横向过渡。

HTML、SVG 和 MathML 元素之间共享的特性使用 HTMLOrSVGOrMathMLElement 接口混入: [SVG] [MATHML]

Global_attributes/autofocus

Support in one engine only.

火狐🔰 1+Safari🔰 4+Chrome79+
Opera66+Edge79+
Edge(旧版)不支持Internet Explorer🔰 10+
火狐 Android?Safari iOS?Chrome Android?WebView Android79+三星浏览器 Android?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 扩展属性来表示的。它表明给定接口的接口对象在调用时将具有特定行为,详见以下定义。

The [HTMLConstructor] 扩展属性不得带有参数,并且只能出现在 构造函数操作上。它必须仅在构造函数操作上出现一次,并且接口必须仅包含单个带注释的构造函数操作,而没有其他的。带注释的构造函数操作必须声明为不带参数。

带有 [HTMLConstructor] 扩展属性的构造函数操作的接口具有以下 覆盖的构造函数步骤

  1. 如果 NewTarget 等于 活动函数对象,则抛出 TypeError

    这种情况可能发生在使用 元素接口 作为其构造函数定义自定义元素时:

    customElements.define("bad-1", HTMLButtonElement);
    new HTMLButtonElement();          // (1)
    document.createElement("bad-1");  // (2)

    在这种情况下,在执行 HTMLButtonElement (显式调用如(1),或隐式调用如(2))时, 活动函数对象NewTarget 都是 HTMLButtonElement. If this check was not present, it would be possible to create an instance of HTMLButtonElement whose local name was bad-1.

  2. registry 为 null。

  3. 如果 surrounding agentactive custom element constructor map[NewTarget] exists:

    1. registry 设置为 surrounding agentactive custom element constructor map[NewTarget]。

    2. 移除 the surrounding agentactive custom element constructor map[NewTarget]。

  4. 否则,将 registry 设置为 current global objectassociated Documentcustom element registry

  5. definitionregistrycustom element definition set with constructor 中构造函数等于 NewTarget的项目。如果没有这样的项目,则抛出 TypeError

    由于 registrycustom element definition set with a constructor 中不可能有构造函数为 undefined 的项目,此步骤也防止 HTML element constructors 被作为函数调用(因为在那种情况下 NewTarget 将为 undefined)。

  6. isValue 为 null。

  7. 如果 definitionlocal name 等于 definitionname (即 definition 用于 autonomous custom element):

    1. 如果 活动函数对象 不是 HTMLElement,则抛出 TypeError

      这种情况可能发生在定义不扩展任何本地名称但继承自非HTMLElement 类的自定义元素时:

      customElements.define("bad-2", class Bad2 extends HTMLParagraphElement {});

      在这种情况下,在构造 super() 实例时发生的(隐式) Bad2调用期间, 活动函数对象HTMLParagraphElement,而不是 HTMLElement

  8. 否则(即 definition定制内建元素),则:

    1. valid local names 为在本规范或 其他适用规范 中定义的使用 活动函数对象 作为其 元素接口的元素的本地名称列表。

    2. 如果 valid local names 不包含 definition本地名称,则抛出 TypeError

      这种情况可能发生在定义扩展给定本地名称但继承自错误类的自定义元素时:

      customElements.define("bad-3", class Bad3 extends HTMLQuoteElement {}, { extends: "p" });

      在这种情况下,在构造 super() 实例时发生的(隐式) Bad3调用期间, valid local names 是包含 qblockquote的列表,但 definition本地名称p,它不在该列表中。

    3. isValue 设置为 definition名称

  9. 如果 definition构造栈 为空,则:

    1. element内部创建一个实现接口的新对象 的结果,该接口与 活动函数对象 对应,给定 当前领域NewTarget

    2. element节点文档 设置为 当前全局对象关联的 Document

    3. element命名空间 设置为 HTML命名空间

    4. element命名空间前缀 设置为null。

    5. element本地名称 设置为 definition本地名称

    6. element自定义元素注册表(custom element registry) 设为 registry

    7. element自定义元素状态 设置为“custom”。

    8. element自定义元素定义 设置为 definition

    9. elementis 设置为 isValue

    10. 返回 element

    当作者脚本直接构造新的自定义元素时,例如通过 new MyCustomElement(),会发生这种情况。

  10. prototype 为? 获取(NewTarget,“prototype”)。

  11. 如果 prototype 不是一个对象,则:

    1. realm 为? 获取函数领域(NewTarget)。

    2. prototype to the interface prototype object of realm whose interface is the same as the interface of the 活动函数对象相同。

    活动 active function object 的领域可能不是 realm,因此我们使用跨领域的更通用概念“the same interface”;我们并不是在寻找 interface objects的相等性。此回退行为,包括使用 NewTarget 的领域并在其中查找相应的原型,旨在与 JavaScript 内置对象和 Web IDL 的 internally create a new object implementing the interface 算法的类似行为保持一致。

  12. elementdefinition构造栈中的最后一个条目。

  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

    此步骤通常在 升级 a custom element; the existing element is returned, so that the super() call inside the 自定义元素构造函数 assigns that existing element to this


除了 [HTMLConstructor]隐含的构造函数行为外,一些元素还具有 命名构造函数 (实际上是具有修改过的 prototype 属性的工厂函数)。

Named constructors for HTML elements can also be used in an extends clause when defining a custom element constructor:

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 元素定义

本规范中的每个元素都有一个定义,包含以下信息:

类别

A list of categories to which the element belongs. These are used when defining the content models for each element.

元素可以使用的上下文

A non-normative description of where the element can be used. This information is redundant with the content models of elements that allow this one as a child, and is provided only as a convenience.

为简洁起见,仅列出了最具体的期望。

For example, all phrasing content is flow content. Thus, elements that are phrasing content will only be listed as "where phrasing content is expected", since this is the more-specific expectation. Anywhere that expects flow content also expects phrasing content, and thus also meets this expectation.

内容模型

规范性描述了必须作为子元素和后代元素包含的内容。

在 text/html 中省略标签

A non-normative description of whether, in the text/html syntax, the start and end tags can be omitted. This information is redundant with the normative requirements given in the optional tags section, and is provided in the element definitions only as a convenience.

内容属性

规范性列出了可以在元素上指定的属性(除非另有禁止),以及这些属性的非规范性描述。(破折号左边的内容是规范性的,右边的内容则不是。)

无障碍考虑

For authors: Conformance requirements for use of ARIA role and aria-* attributes are defined in ARIA in HTML. [ARIA] [ARIAHTML]

For implementers: User agent requirements for implementing accessibility API semantics are defined in HTML Accessibility API Mappings. [HTMLAAM]

净化

每个元素的 净化 信息定义了它的 净化 类别,这会影响该元素在净化期间如何被 处理。它还可以将该元素的一个或多个属性定义为 导航 URL 属性

DOM 接口

元素必须实现的 DOM 接口的规范性定义。

This is then followed by a description of what the element represents, along with any additional normative conformance criteria that may apply to authors and implementations. Examples are sometimes also included.

3.2.4.1 属性

An attribute value is a string. Except where otherwise specified, attribute values on HTML elements may be any string value, including the empty string, and there is no restriction on what text can be specified in such attribute values.

3.2.5 内容模型

本规范中定义的每个元素都有一个内容模型:元素期望的 内容的描述。一个 HTML元素 必须具有符合其内容模型要求的内容。元素的 内容 是其在DOM中的子节点。

ASCII空白字符 始终允许出现在元素之间。用户代理会将这些字符在源标记中的元素之间表示为DOM中的 Text 节点。空的 Text 节点和仅由这些字符序列组成的 Text 节点被视为 元素间空白

元素间空白、注释节点和处理指令节点在判断元素内容是否符合内容模型时,必须被忽略,并且在遵循定义文档和元素语义的算法时也必须被忽略。

因此,当元素 A is said to be preceded or followed by a second element B if A and B 拥有相同的父节点,并且在它们之间没有其他元素节点或 Text 节点(除了 元素间空白) between them. Similarly, a node is the 唯一子节点 时,表示该元素除了 元素间空白、注释节点和处理指令节点外,没有其他节点。

作者不得在未明确允许的地方使用 HTML元素 ,具体允许位置由各元素定义,或由其他规范明确要求。对于XML复合文档,这些上下文可能在其他命名空间的元素内,如果那些元素被定义为提供相关上下文。

The Atom Syndication Format 定义了一个 content 元素。当其 type 属性为 xhtml值时, The Atom Syndication Format 要求其包含一个HTML div 元素。因此,在该上下文中允许 div 元素,即使本规范未明确规范此情况。 [ATOM]

此外, HTML元素 也可以是孤立节点(即没有父节点)。

例如,在脚本中创建一个 td 元素并将其存储在全局变量中是符合规范的,尽管 td 元素通常只应在 tr 元素内使用。

var data = {
  name: "Banana",
  cell: document.createElement('td'),
};
3.2.5.1 “nothing”内容模型

当一个元素的内容模型为 nothing时,该元素不得包含任何 Text 节点(除了 元素间空白)和任何元素节点。

大多数内容模型为“nothing”的HTML元素,为了方便起见,也是 空元素 (在 HTML语法 中没有 结束标签的元素)。然而,这些概念是完全独立的。

3.2.5.2 内容种类

HTML中的每个元素属于一个或多个 类别 ,这些类别将具有相似特征的元素分组在一起。本规范中使用了以下广泛类别:

一些元素也属于其他类别,这些类别在本规范的其他部分定义。

这些类别的关系如下:

分区内容、标题内容、短语内容、嵌入内容和交互内容都是流内容的一种。元数据有时是流内容。元数据和交互内容有时是短语内容。嵌入内容也是一种短语内容,有时是交互内容。

其他类别也用于特定目的,例如,表单控件使用多个类别来定义通用要求。一些元素具有独特的要求,不属于任何特定类别。

3.2.5.2.1 元数据内容

元数据内容 是设置其余内容的呈现或行为,或者设置文档与其他文档之间的关系,或者传递其他“带外”信息的内容。

来自其他命名空间的元素,其语义主要与元数据相关(例如RDF),也属于 元数据内容

因此,在XML序列化中,可以这样使用RDF:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:r="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xml:lang="en">
 <head>
  <title>Hedral's Home Page</title>
  <r:RDF>
   <Person xmlns="http://www.w3.org/2000/10/swap/pim/contact#"
           r:about="https://hedral.example.com/#">
    <fullName>Cat Hedral</fullName>
    <mailbox r:resource="mailto:hedral@damowmow.com"/>
    <personalTitle>Sir</personalTitle>
   </Person>
  </r:RDF>
 </head>
 <body>
  <h1>My home page</h1>
  <p>I like playing with string, I guess. Sister says squirrels are fun
  too so sometimes I follow her to play with them.</p>
 </body>
</html>

然而,在HTML序列化中,这是不可能的。

3.2.5.2.2 流内容

大多数在文档和应用程序主体中使用的元素被归类为 流内容

3.2.5.2.3 分节内容

分节内容 是定义 headerfooter 元素作用范围的内容。

3.2.5.2.4 标题内容

标题内容 定义了一个部分的标题(无论是显式标记为 分节内容 元素,还是由标题内容本身隐含)。

3.2.5.2.5 内联内容

内联内容 是文档的文本,以及在段内级别标记这些文本的元素。 内联内容 的连续部分形成 段落

大多数被归类为短语内容的元素只能包含本身也是短语内容的元素,而不能包含任何流内容。

文本在内容模型的上下文中,意味着要么没有内容,要么包含 Text 节点。 文本 有时被单独用作内容模型,但也属于 短语内容,并且可以是 元素间空白 (如果 Text 节点是空的或仅包含 ASCII空白)。

Text 节点和属性值必须由 标量值组成,不包括 非字符控制字符 ,除 ASCII空白. This specification includes extra constraints on the exact value of Text 节点和属性值的确切值提出了额外的约束。

3.2.5.2.6 嵌入内容

嵌入内容 是将其他资源导入文档,或将来自其他词汇的内容插入文档的内容。

来自 HTML命名空间 以外的命名空间且传递内容但不传递元数据的元素,在本规范定义的内容模型中被视为 嵌入内容 。(例如,MathML或SVG。)

一些嵌入内容元素可以有 后备内容:当外部资源无法使用时(例如,由于格式不支持),使用的内容。元素定义会说明后备内容的情况(如果有的话)。

3.2.5.2.7 交互内容

交互内容 是专为用户交互设计的内容。

3.2.5.2.8 可感知内容

作为一般规则,允许任何 流内容短语内容 should have at least one node in its contents that is 可感知内容 ,并且未指定 hidden 属性。

可感知内容 通过提供一些后代非空的 文本, or else something users can hear (audio elements) or view (video, img, or canvas elements) or otherwise interact with (for example, interactive form controls).

这一要求并不是硬性规定,因为在许多情况下,元素可以合法地为空,例如用作占位符,稍后会由脚本填充,或当元素是模板的一部分时,在某些页面上通常会填充,但在其他页面上可能不相关。

鼓励符合性检查器为作者提供一种机制,帮助他们查找未满足此要求的元素,作为一种创作辅助工具。

以下元素是可感知内容:

3.2.5.2.9 脚本支持元素

脚本支持元素 是那些本身不 表示 任何内容的元素(即它们不被渲染),而是用于支持脚本,例如为用户提供功能。

以下元素是脚本支持元素:

3.2.5.3 透明内容模型

有些元素被描述为 透明;它们的内容模型描述中包含“透明”一词。一个 透明 元素的内容模型源自其父元素的内容模型:在透明部分所需的元素与透明元素所在的父元素内容模型中所需的元素相同。

例如,一个 ins 元素在 ruby 元素内不能包含 rt 元素,因为 ruby 元素的内容模型允许 ins 元素的部分是允许 短语内容的部分,而 rt 元素不是 短语内容

在某些情况下,透明元素嵌套在彼此之中,需要迭代地应用此过程。

考虑以下标记片段:

<p><object><ins><map><a href="/">Apples</a></map></ins></object></p>

要检查“Apples”是否允许在 a 元素内部,需要检查内容模型。 a 元素的内容模型是透明的, map 元素的内容模型也是透明的, ins 元素的内容模型也是透明的, object 元素的内容模型也是透明的。 object 元素位于 p 元素中,其内容模型是 短语内容。因此,“Apples”是允许的,因为文本是短语内容。

当一个透明元素没有父元素时,其内容模型中“透明”的部分必须改为接受任何 流内容

3.2.5.4 段落

本节定义的 段落 术语不仅仅用于 p 元素的定义。这里定义的 段落 概念用于描述如何解释文档。 p 元素只是标记 段落的几种方式之一。

A 段落 通常是一段形成文本块的 短语内容 ,包含一个或多个讨论特定主题的句子,就像在排版中一样,但也可以用于更一般的主题分组。例如,一个地址也是一个段落,一个表单的一部分,一个署名,或诗的一节。

在以下示例中,有两段在一个部分中。还有一个标题,其中包含不是段落的短语内容。注意评论和 元素间空白 不构成段落。

<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>

流内容 中的段落相对于没有 ainsdelmap 元素的文档外观来定义,因为这些元素及其混合内容模型可以跨越段落边界,如下面的前两个示例所示。

通常,最好避免元素跨越段落边界。维护这样的标记可能很困难。

以下示例采用早期示例中的标记,并在一些标记周围放置 insdel 元素,显示文本已更改(尽管在这种情况下,这些更改确实没有多大意义)。请注意,本示例与前一个示例具有完全相同的段落,尽管存在 insdel 元素—— 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 be a view of the DOM that replaces all ainsdelmap elements in the document with their contents. Then, in view中,对于每个由其他类型内容不间断的兄弟 短语内容 节点组成的运行,在一个接受内容类型不仅限于 短语内容 以及 短语内容的元素中,令 first 为运行的第一个节点,令 last 为运行的最后一个节点。对于每个由至少一个既不是 嵌入内容 也不是 元素间空白的节点组成的运行,原始DOM中的一个段落存在于 first 之前到 last之后。(因此段落可以跨越 ainsdelmap 元素。)

符合性检查器可能会警告作者他们有段落相互重叠的情况(这种情况可能发生在 objectvideoaudiocanvas 元素中,及通过允许HTML进一步嵌入其中的其他命名空间中的元素间接发生,如 SVG svgMathML math)。

一个 段落 也可以通过 p 元素显式形成。

The 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. 段落说“你可以玩我的猫模拟器。 object 我对此非常自豪。”,其中 objectobject 元素。
  2. 段落说“要查看猫模拟器,请使用以下链接之一:”。
  3. 段落说“下载模拟器文件”。
  4. 段落说“使用在线模拟器”。
  5. 段落说“或者,升级到Mellblom浏览器。”。

第一个段落被其他四个段落重叠。支持“cats.sim”资源的用户代理只会显示第一个段落,但显示回退内容的用户代理将混淆地显示第一个段落的第一句话,好像它在第二段落中一样,并将显示最后一个段落,好像它在第一段落的第二句的开头一样。

为了避免这种混淆,可以使用显式的 p 元素。例如:

<section>
 <h2>My Cats</h2>
 <p>You can play with my cat simulator.</p>
 <object data="cats.sim">
  <p>To see the cat simulator, use one of the following links:</p>
  <ul>
   <li><a href="cats.sim">Download simulator file</a>
   <li><a href="https://sims.example.com/watch?v=LYds5xY4INU">Use online simulator</a>
  </ul>
  <p>Alternatively, upgrade to the Mellblom Browser.</p>
 </object>
 <p>I'm quite proud of it.</p>
</section>

3.2.6 全局属性

Global_attributes

以下属性是所有 HTML元素 (即使那些未在本规范中定义的元素)共有的,并且可以在所有HTML元素上指定:

这些属性仅在本规范中定义为 HTML元素的属性。当本规范提到元素具有这些属性时,不应将未定义为具有这些属性的命名空间中的元素视为具有这些属性的元素。

例如,在以下XML片段中,"bogus"元素没有一个 dir 属性,尽管它具有一个字面名称为"dir". Thus, the directionality of the inner-most span element is 'rtl',间接从 div 元素继承,通过"bogus"元素。

<div xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
 <bogus xmlns="https://example.net/ns" dir="ltr">
  <span xmlns="http://www.w3.org/1999/xhtml">
  </span>
 </bogus>
</div>

Global_attributes/slot

Support in all current engines.

Firefox63+Safari10+Chrome53+
Opera?Edge79+
Edge (旧版)NoInternet Explorer?
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

DOM 定义了用户代理对任何命名空间中的任何元素的 classidslot 属性的要求。 [DOM]

The classidslot 属性可以在所有 HTML元素上指定。

HTML元素上指定时, class 属性必须具有一个值,该值是 由空格分隔的标记集 ,表示元素所属的各种类。

为元素分配类会影响CSS选择器中的类匹配、DOM中的 getElementsByClassName() 方法等功能。

作者可以在 class 属性中使用的标记没有其他限制,但鼓励作者使用描述内容性质的值,而不是描述内容所需呈现的值。

HTML元素上指定时, id attribute value must be unique amongst all the IDs in the element's and must contain at least one character. The value must not contain any ASCII空白字符

The id 属性指定了其元素的 唯一标识符(ID)

ID可以采取任何形式;特别是,ID可以仅由数字组成,以数字开头,以下划线开头,仅由标点符号组成等。

元素的 唯一标识符 可以用于多种目的,最著名的是作为使用 片段链接到文档特定部分的方式,作为脚本定位元素的方式,以及从CSS样式化特定元素的方式。

标识符是不可解释的字符串。不应从 id 属性的值中推导出特定含义。

There are no conformance requirements for the slot attribute specific to HTML elements.

这个 slot 属性用于 分配插槽 给一个元素:具有 slot 属性的元素被 分配 to the slot created by the slot 元素创建的插槽,其 name 属性的值与该 slot 属性的值匹配——但前提是该 slot 元素在其 影子树 中的 宿主 具有相应的 slot 属性值。


为了使辅助技术产品能够提供比HTML元素和属性更细粒度的接口,可以指定一组 辅助技术产品的注释 (ARIA rolearia-* 属性)。 [ARIA]


以下 事件处理程序内容属性 可以在任何 HTML元素上指定:

带星号的属性在 body 元素上指定时有不同的含义,因为这些元素公开具有相同名称的 事件处理程序Window 对象。

虽然这些属性适用于所有元素,但并不是在所有元素上都有用。例如,只有 媒体元素 才会接收到由用户代理触发的 volumechange 事件。


自定义数据属性 (例如 data-foldernamedata-msgid)可以在任何 HTML元素上指定,用于存储自定义数据、状态、注释等与页面相关的内容。


HTML文档中, HTML命名空间 中的元素可以指定 xmlns 属性,但仅当且仅当其值为http://www.w3.org/1999/xhtml时才可以。这不适用于 XML文档

在 HTML 中, xmlns 属性完全没有任何作用。它基本上只是一个护身符。之所以允许它,仅仅是为了让与 XML 之间的迁移稍微容易一些。当由 HTML 解析器解析时,该属性最终不属于任何命名空间。在 XML 中,该属性是命名空间声明机制的一部分,并且始终位于 "http://www.w3.org/2000/xmlns/" 命名空间中。


XML also allows the use of the xml:space attribute in the XML namespace on any element in an XML文档。该属性对 HTML元素没有影响,因为HTML中的默认行为是保留空白。 [XML]

There is no way to serialize the xml:space attribute on HTML elements in the text/html syntax.

3.2.6.1 The title 属性

Global_attributes/title

在所有当前引擎中支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The title 属性 表示 元素的建议信息,例如适合作为工具提示的信息。在链接上,这可以是目标资源的标题或描述;在图像上,它可以是图像来源或描述;在段落上,它可以是文本的脚注或评论;在引文上,它可以是关于来源的进一步信息;在 交互内容上,它可以是该元素的标签或使用说明;等等。值为文本。

目前不建议依赖 title 属性,因为许多用户代理不按照本规范要求以可访问的方式展示该属性(例如,需要使用指针设备如鼠标才能使工具提示出现,这排除了仅使用键盘的用户和仅使用触摸的用户,如任何使用现代手机或平板电脑的人)。

If this attribute is omitted from an element, then it implies that the title attribute of the nearest ancestor HTML 元素title 属性也适用于该元素。设置这个属性会覆盖这种继承,明确声明任何祖先的建议信息对这个元素不适用。将该属性设置为空字符串表示该元素没有建议信息。

如果 title 属性的值包含U+000A换行符(LF)字符,内容会被分成多行。每个U+000A换行符(LF)字符代表一个换行。

title 属性中使用换行符时需要小心。

For instance, the following snippet actually defines an abbreviation's expansion with a line break in it:

<p>My logs show that there was some interest in <abbr title="Hypertext
Transport Protocol">HTTP</abbr> today.</p>

一些元素,如 linkabbr,和 input,对 title 属性定义了额外的语义。

元素的 建议信息 是以下算法返回的值,一旦返回值,算法将终止。当算法返回空字符串时,则表示没有建议信息。

  1. 如果元素有 title 属性,则返回对其值运行 规范化换行符 的结果。

  2. 如果元素有父元素,则返回父元素的 建议信息

  3. 返回空字符串。

用户代理应在元素有 建议信息时通知用户,否则这些信息将不可发现。


3.2.6.2 The langxml:lang 属性

Global_attributes/lang

在所有当前引擎中支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The lang 属性(不在任何命名空间中)指定元素内容的主要语言以及任何包含文本的元素属性。其值必须是有效的 BCP 47 语言标签,或为空字符串。将该属性设置为空字符串表示主要语言未知。 [BCP47]

The lang 属性在 XML 命名空间 中定义于 XML 中。 [XML]

如果这些属性在元素中省略,那么该元素的语言与其父元素的语言相同(如果有父元素)( slot 元素在 shadow tree中除外)。

没有命名空间的 lang 属性可以用于任何 HTML 元素

The lang 属性在 XML 命名空间 中可以用于 HTML 元素XML 文档中,以及其他命名空间中的元素,如果相关规范允许的话(特别是 MathML 和 SVG 允许在其元素上指定 lang 属性在 XML 命名空间 )。如果在同一元素上同时指定了没有命名空间的 lang 属性和 lang 属性在 XML 命名空间 are specified on the same element, they must have exactly the same value when compared in an ASCII case-insensitive manner.

Authors must not use the lang attribute in the XML namespace on HTML 元素HTML 文档. To ease migration to and from XML, authors may specify an attribute in no namespace with no prefix and with the literal localname "xml:lang" on HTML 元素HTML 文档, but such attributes must only be specified if a lang attribute in no namespace is also specified, and both attributes must have the same value when compared in an ASCII case-insensitive manner.

没有命名空间、没有前缀且具有字面局部名“xml:lang”的属性对语言处理没有影响。


为了确定节点的 语言 ,用户代理必须使用以下列表中的第一个适用步骤:

如果节点是一个具有 lang 属性在 XML 命名空间 的元素

使用该属性的值。

如果节点是一个 HTML 元素SVG 命名空间中的元素,并且它具有没有命名空间的 lang 属性

使用该属性的值。

如果节点的父节点是 shadow root

使用该 语言shadow root主机

如果节点的 父元素 不为空

使用该 语言父元素

否则

如果设置了 默认语言 set, then that is the language of the node. If there is no pragma-set default language set, then language information from a higher-level protocol (such as HTTP), if any, must be used as the final fallback language instead. In the absence of any such language information, and in cases where the higher-level protocol reports multiple languages, the language of the node is unknown, and the corresponding language tag is the empty string.

如果结果值不是识别的语言标签,则必须将其视为具有给定语言标签的未知语言,与所有其他语言不同。为了进行回绕或与期望语言标签的其他服务进行通信,用户代理应该将未知的语言标签不作修改地传递,并标记为 BCP 47 语言标签,以便后续服务不会将数据解释为另一种类型的语言描述。 [BCP47]

因此,例如,带有 lang="xyzzy" 的元素将被选择器 :lang(xyzzy) (例如在 CSS 中)匹配,但不会被 :lang(abcde), even though both are equally invalid. Similarly, if a web browser and screen reader working in unison communicated about the language of the element, the browser would tell the screen reader that the language was "xyzzy", even if it knew it was invalid, just in case the screen reader actually supported a language with that tag after all. Even if the screen reader supported both BCP 47 and another syntax for encoding language names, and in that other syntax the string "xyzzy" was a way to denote the Belarusian language, it would be incorrect for the screen reader to then start treating text as Belarusian, because "xyzzy" is not how Belarusian is described in BCP 47 codes (BCP 47 uses the code "be" for Belarusian).

如果结果值为空字符串,则必须将其解释为该节点的语言为 显式未知


用户代理可以使用元素的语言来确定适当的处理或渲染(例如在选择适当的字体或发音,字典选择,或表单控件如日期选择器的用户界面)。

3.2.6.3 The translate 属性

Global_attributes/translate

在所有当前引擎中支持。

Firefox111+Safari6+Chrome19+
Opera?Edge79+
Edge (旧版)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The translate 属性用于指定在页面本地化时,元素的属性值以及其 Text 节点子元素的值是否应被翻译,或者是否应保持不变。它是一个 枚举属性 ,包含以下关键字和状态:

Keyword State Brief description
yes 翻译模式 设置为 可翻译.
no 翻译模式 设置为 不可翻译.

该属性的 缺失值默认无效值默认 均为 继承 状态,其 空值默认 状态。

每个元素(即使是非 HTML 元素)都有一个 翻译模式,该模式要么处于 可翻译 状态,要么处于 不可翻译 状态。如果 HTML 元素translate 属性处于 状态,则该元素的 翻译模式 处于 可翻译 状态;否则,如果 该元素的 translate 属性处于 状态,则该元素的 翻译模式 处于 不可翻译 状态。否则,要么元素的 translate 属性处于 继承 状态,要么该元素不是 HTML 元素 ,因此没有 translate 属性;无论哪种情况,该元素的 翻译模式 与其 父元素's, if any, or in the translate-enabled state, if the element's 父元素 is null.

当元素处于 翻译启用 状态时,元素的 可翻译属性 and the values of its Text node children are to be translated when the page is localized.

当元素处于 不翻译 state, the element's attribute values and the values of its Text node children are to be left as-is when the page is localized, e.g. because the element contains a person's name or a name of a computer program.

以下属性是 可翻译属性

其他规范可以定义其他也是 可翻译属性的属性。例如, ARIA 将定义 aria-label 属性为可翻译属性。


The 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 The dir 属性

Global_attributes/dir

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The dir attribute 是一个 枚举属性 ,具有以下关键字和状态:

关键字 状态 简要描述
ltr LTR 元素内容是明确方向隔离的从左到右文本。
rtl RTL 元素内容是明确方向隔离的从右到左文本。
auto Auto 元素内容是明确方向隔离的文本,但方向应通过程序根据元素内容确定(如下所述)。

The heuristic used by the Auto 状态使用的启发式方法非常粗略(它只看具有强方向性的第一个字符,类似于双向算法中的段落级确定)。建议作者仅在文本方向确实未知且无法应用更好的服务器端启发式方法时才使用此值。 [BIDI]

对于 textareapre 元素,启发式方法是逐段应用的。

该属性的 缺省值无效值缺省 都是 未定义 状态。


The directionality of an element (any element, not just an HTML元素) is either 'ltr',要么是'rtl'. To compute the directionality given an element element, switch on element's dir attribute state:

LTR

返回'ltr'。

RTL

返回'rtl'。

Auto
  1. result be the auto directionality of element.

  2. 如果 result 为null,则返回'ltr'。

  3. 返回 result

Undefined
如果 elementbdi 元素
  1. result be the auto directionality of element.

  2. 如果 result 为null,则返回'ltr'。

  3. 返回 result

如果 element is an input element whose type attribute is in the 电话状态 state

返回'ltr'。

否则

Return the parent directionality of element.

由于 dir 属性仅对 HTML元素定义,它不能出现在其他命名空间的元素上。因此,其他命名空间的元素总是使用 父方向性

The 自动方向性表单关联元素 包括:

To compute the auto directionality given an element element:

  1. 如果 element 是一个 自动方向性关联表单元素:

    1. 如果 element 包含 一个双向字符类型为 AL 或 R 的字符,并且在元素的 中该字符之前没有任何双向字符类型为 L 的字符,则返回 'rtl'。 [BIDI]

    2. 如果 element 不是空字符串, 则返回 'ltr'.

    3. Return null.

  2. 如果 element 是一个 slot 元素,且其 是一个 shadow root 并且 element已分配节点 不为空:

    1. 对于每个 node element of element's 已分配节点:

      1. childDirection be null.

      2. 如果 child 是一个 Text 节点,则将 childDirection to the text node directionality of child.

      3. 否则:

        1. 断言child 是一个 Element node.

        2. childDirection to the contained text auto directionality of child with canExcludeRoot set to true.

      4. 如果 childDirection 不是 null,则返回 childDirection.

    2. Return null.

  3. Return the contained text auto directionality of element with canExcludeRoot set to false.

To compute the contained text auto directionality of an element element with a boolean canExcludeRoot

  1. 对于每个 node element of element's 后代节点,按 树顺序

    1. 如果以下任意条件成立

      • descendant
      • 作为 element that is a descendant of element
      • 如果 canExcludeRoot 为 true, element

      属于以下类型之一

      继续

    2. 如果 descendant 是一个 slot 元素,并且其 是一个 shadow root,则返回该 方向性 of that shadow root's host.

    3. 如果 descendant 不是一个 Text 节点,则 继续.

    4. result be the text node directionality of descendant.

    5. 如果 result 不是 null,则返回 result.

  2. Return null.

To compute the text node directionality given a Text 节点 text:

  1. 如果 text数据 不包含双向字符类型为 L、AL 或 R 的代码点,则返回 null。 [BIDI]

  2. codePointtext数据 whose bidirectional character type is L, AL, or R.

  3. 如果 codePoint 的双向字符类型为 AL 或 R,则返回 'rtl'.

  4. 如果 codePoint 的双向字符类型为 L,则返回 'ltr'.

To compute the parent directionality given an element element:

  1. parentNodeelement's parent node.

  2. 如果 parentNode 是一个 shadow root, then return the 方向性 ,即 parentNode宿主.

  3. 如果 parentNode is an element, then return the directionality of parentNode.

  4. 返回 'ltr'.

此属性 涉及使用双向算法进行渲染


The directionality of an attribute of an HTML元素, which is used when the text of that attribute is to be included in the rendering in some manner, is determined as per the first appropriate set of steps from the following list:

如果该属性是 支持方向性的属性 ,并且该元素的 dir 属性处于 Auto 状态

查找属性值的第一个双向字符类型为L、AL或R的字符(按逻辑顺序)。 [BIDI]

如果找到了这样的字符,并且它的双向字符类型为AL或R,则该属性的 方向性 为'rtl'。

否则,该属性的 方向性 为'ltr'。

否则
该属性的 方向性元素的方向性相同。

以下属性是 支持方向性的属性


document.dir [ = value ]

返回 the html 元素dir 属性的值(如果有)。

可以设置为"ltr"、"rtl"或"auto",以替换 the html 元素dir 属性的值。

如果没有 html 元素,则返回空字符串并忽略新值。

HTMLElement/dir

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

The dir IDL属性在元素上必须 反映 该元素的 dir 内容属性, 仅限于已知值

Document/dir

Support in all current engines.

Firefox1+Safari10.1+Chrome64+
Opera51+Edge79+
Edge (旧版)12+Internet Explorer5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+

The dir IDL属性在 Document 对象上必须 反映 the dir content attribute of the html 元素, if any, 仅限于已知值。如果没有这样的元素,则该属性必须返回空字符串并在设置时不执行任何操作。

作者强烈建议使用 dir 属性来指示文本方向,而不是使用CSS,因为这样即使在没有CSS的情况下(例如由搜索引擎解释),文档也会继续正确呈现。

此标记片段是即时消息对话的一部分。

<p dir=auto class="u1"><b><bdi>Student</bdi>:</b> How do you write "What's your name?" in Arabic?</p>
<p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> ما اسمك؟</p>
<p dir=auto class="u1"><b><bdi>Student</bdi>:</b> Thanks.</p>
<p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> That's written "شكرًا".</p>
<p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> Do you know how to write "Please"?</p>
<p dir=auto class="u1"><b><bdi>Student</bdi>:</b> "من فضلك", right?</p>

给定一个合适的样式表和 p 元素的默认对齐样式,即将文本对齐到段落的 起始边缘 ,则生成的渲染结果可能如下所示:

每个段落呈现为一个独立的块,段落左对齐,除了第二段和最后一段,它们会右对齐,用户名(此示例中的“学生”和“老师”)靠右,左边有一个冒号,文本首先在左边。

如前所述, auto 值不是灵丹妙药。此示例中的最后一个段落由于以阿拉伯字符开头而被误解为从右到左的文本,这导致“right?”出现在阿拉伯文本的左侧。

3.2.6.5 The style 属性

Global_attributes/style

支持所有当前引擎。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

所有 HTML元素 都可以设置 style 内容属性。这是一个 样式属性 ,定义在 CSS Style Attributes中。 [CSSATTR]

在支持CSS的用户代理中,当添加或更改属性值时,必须按照 样式属性的规则解析该属性的值。 [CSSATTR]

但是,如果在执行 应该通过内容安全政策阻止元素的内联行为吗? 算法时返回“Blocked”,并在属性的 元素、“style attribute”和属性的值上执行,那么属性值中定义的样式规则不得应用于 元素[CSP]

使用任何元素的 style 属性的文档,即使这些属性被删除,也必须能够理解和使用。

特别是,使用 style 属性来隐藏和显示内容,或传达文档中未包含的意义,是不符合规范的。(要隐藏和显示内容,请使用 hidden 属性。)


element.style

返回元素 CSSStyleDeclaration 对象的 style 属性。

The style IDL属性定义在 CSS Object Model中。 [CSSOM]

在以下示例中,表示颜色的单词使用 span 元素和 style 属性标记,以使这些单词在视觉媒体中显示为相关颜色。

<p>My sweat suit is <span style="color: green; background:
transparent">green</span> and my eyes are <span style="color: blue;
background: transparent">blue</span>.</p>
3.2.6.6 嵌入自定义不可见数据 使用 data-* 属性

Global_attributes/data-*

在所有当前引擎中支持。

Firefox6+Safari5.1+Chrome7+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

A 自定义数据属性(custom data attribute) 是一个无命名空间的属性,其名称以字符串 "data-" 开头,在连字符后至少有一个字符,是一个 有效属性本地名称(valid attribute local name), 并且不包含任何 ASCII 大写字母(ASCII upper alphas)

HTML 元素HTML 文档 中,所有属性名称都会自动转换为小写 ASCII 字母,因此对 ASCII 大写字母的限制不会影响这些文档。

自定义数据属性 旨在存储页面或应用程序专有的自定义数据、状态、注释等,而没有更合适的属性或元素。

这些属性不应由使用这些属性的网站管理员未知的软件使用。对于要由多个独立工具使用的通用扩展,应通过扩展此规范来明确提供该功能,或者应使用诸如 microdata 之类的技术(使用标准化的词汇表)。

例如,一个关于音乐的网站可以使用自定义数据属性来注释代表专辑中曲目的列表项,包含每首曲目的长度。然后,该信息可以由网站本身使用,以允许用户按曲目长度对列表进行排序,或根据特定长度过滤列表。

<ol>
 <li data-length="2m11s">Beyond The Sea</li>
 ...
</ol>

然而,用户不应使用与该音乐网站无关的通用软件通过查看这些数据来搜索特定长度的曲目。

这是因为这些属性旨在由网站自己的脚本使用,而不是一个公共可用的元数据的通用扩展机制。

同样,页面作者可以编写标记来为他们打算使用的翻译工具提供信息:

<p>The third <span data-mytrans-de="Anspruch">claim</span> covers the case of <span
translate="no">HTML</span> markup.</p>

在此示例中,"data-mytrans-de" 属性为 MyTrans 产品在将短语 "claim" 翻译为德语时提供特定文本。然而,标准的 translate 属性用于告诉它在所有语言中 "HTML" 应保持不变。当有标准属性可用时,就不需要使用 自定义数据属性

在此示例中,自定义数据属性用于存储 PaymentRequest功能检测的结果,可以在 CSS 中用于不同地设置结账页面的样式。

<script>
 if ('PaymentRequest' in window) {
   document.documentElement.dataset.hasPaymentRequest = '';
 }
</script>

在这里, data-has-payment-request 属性实际上被用作 布尔属性;检查属性的存在就足够了。然而,如果作者愿意,它以后可以被填充一些值,可能是为了指示该功能的有限功能。

每个 HTML 元素 可以指定任意数量的 自定义数据属性 ,并且可以是任何值。

作者应仔细设计此类扩展,以便在忽略这些属性并丢弃任何相关的 CSS 时,页面仍然可用。

用户代理不得从这些属性或值中派生任何实现行为。针对用户代理的规范不得定义这些属性具有任何有意义的值。

JavaScript 库可以使用 自定义数据属性,因为它们被视为使用它们的页面的一部分。鼓励被许多作者重复使用的库的作者在属性名称中包含他们的名字,以减少冲突的风险。如果合理的话,也鼓励库的作者使属性名称中的确切名称可定制,这样即使那些库的作者不知情地选择了相同的名称,也可以在同一页面上使用这些库,并且即使这些版本不相互兼容,也可以在同一页面上使用特定库的多个版本。

例如,一个名为 "DoQuery" 的库可以使用像 data-doquery-range这样的属性名称,而一个名为 "jJo" 的库可以使用像 data-jjo-range这样的属性名称。jJo 库还可以提供一个 API 来设置要使用的前缀(例如 J.setDataPrefix('j2'),使属性名称变为 data-j2-range)。


element.dataset

HTMLElement/dataset

在所有当前引擎中支持。

Firefox6+Safari5.1+Chrome7+
Opera11+Edge79+
Edge (旧版)12+Internet Explorer11
Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android11+

SVGElement/dataset

在所有当前引擎中支持。

Firefox51+Safari5.1+Chrome55+
Opera41+Edge79+
Edge (旧版)17+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android41+

返回一个 DOMStringMap 对象,用于元素的 data-* 属性。

连字符名称将变为驼峰形式。例如, data-foo-bar="" 变为 element.dataset.fooBar

The dataset IDL 属性为元素上的所有 data-* 属性提供了便捷的访问器。在获取时, dataset IDL 属性 必须返回一个 DOMStringMap , 其关联元素为此元素。

The 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的名称-值对 时返回的每对名称,在返回的顺序中。

确定命名属性的值 name ,对于 DOMStringMap,返回名称-值对列表中名称为 name in the list returned from getting the DOMStringMap's name-value pairs.

设置新命名属性的值设置现有命名属性的值 对于 DOMStringMap,给定属性名称 name 和新值 value,运行以下步骤:

  1. 如果 name 包含一个后跟 ASCII 小写字母的 U+002D 连字符,则抛出一个 "SyntaxError" DOMException

  2. For each ASCII upper alpha in name, insert a U+002D HYPHEN-MINUS character (-) before the character and replace the character with the same character 转换为 ASCII 小写字母

  3. Insert the string data- at the front of name.

  4. 如果 name 不是 有效属性本地名称(valid attribute local name), 则抛出 "InvalidCharacterError" DOMException

  5. Set an attribute value for the DOMStringMap关联元素 using name and value.

删除现有命名属性 name 对于 DOMStringMap,运行以下步骤:

  1. For each ASCII upper alpha in name, insert a U+002D HYPHEN-MINUS character (-) before the character and replace the character with the same character 转换为 ASCII 小写字母

  2. Insert the string data- at the front of name.

  3. 通过名称删除属性 给定 nameDOMStringMap关联元素

此算法只会由 Web IDL获取 DOMStringMap的名称-值对的早期算法给定的名称调用。 [WEBIDL]

如果一个网页希望一个元素代表一个飞船,例如作为游戏的一部分,它必须使用 class 属性以及 data-* 属性:

<div class="spaceship" data-ship-id="92432"
     data-weapons="laser 2" data-shields="50%"
     data-x="30" data-y="10" data-z="90">
 <button class="fire"
         onclick="spaceships[this.parentNode.dataset.shipId].fire()">
  Fire
 </button>
</div>

请注意,连字符的属性名称在 API 中变为驼峰形式。

给定以下片段和具有类似结构的元素:

<img class="tower" id="tower5" data-x="12" data-y="5"
     data-ai="robotarget" data-hp="46" data-ability="flames"
     src="towers/rocket.png" alt="Rocket Tower">

...可以想象一个函数 splashDamage() 需要一些参数,第一个是要处理的元素:

function splashDamage(node, x, y, damage) {
  if (node.classList.contains('tower') && // checking the 'class' attribute
      node.dataset.x == x && // reading the 'data-x' attribute
      node.dataset.y == y) { // reading the 'data-y' attribute
    var hp = parseInt(node.dataset.hp); // reading the 'data-hp' attribute
    hp = hp - damage;
    if (hp < 0) {
      hp = 0;
      node.dataset.ai = 'dead'; // setting the 'data-ai' attribute
      delete node.dataset.ability; // removing the 'data-ability' attribute
    }
    node.dataset.hp = hp; // setting the 'data-hp' attribute
  }
}

3.2.7 The innerTextouterText 属性

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 元素。

The 获取文本步骤,给定 HTMLElement element,如下:

  1. 如果 element被渲染 或用户代理是非 CSS 用户代理,则返回 element后代文本内容

    This step can produce surprising results, as when the innerText getter is invoked on an element not being rendered, its text contents are returned, but when accessed on an element that is 被渲染的元素访问时,其所有未 被渲染 的子元素的文本内容将被忽略。

  2. results 为一个新的空的 列表

  3. 对于 element 的每个子节点 node

    1. current 为运行 列表 resulting from running the rendered text collection steps with node. Each item in results 中的每一项要么是 字符串 (string),要么是正整数(即 需要换行的计数)。

      直观上,一个 需要的换行符计数 项表示在该点有一定数量的换行符,但它们可以与相邻的 需要的换行符计数 项的换行符合并,类似于 CSS 的边距折叠。

    2. current 中的每一项附加到 results, append item to results.

  4. 移除 any items from results 中所有空字符串项。

  5. 移除 any runs of consecutive required line break count items at the start or end of 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+

The innerTextouterText getter 步骤是运行 获取文本步骤 ,以 this为参数。

The 渲染文本收集步骤,给定 节点 node,如下:

  1. node be the result of running the rendered text collection steps with each child node of node in 树顺序, and then concatenating the results to a single 列表

  2. 如果 node计算值'visibility' 不是 'visible',则返回 items

  3. 如果 node被渲染,则返回 items。对于此步骤,如果 计算值'display' 属性不是 'none',则以下元素必须按如下描述行为:

    • select 元素有一个关联的非替换型行内 CSS box , 其子 box 只包括 optgroupoption element descendant nodes;

    • optgroup 元素有一个关联的非替换型块级 CSS box ,其子 box 只包括 option element descendant nodes; and

    • option 元素有一个关联的非替换型块级 CSS box ,其子 box 是普通的非替换型块级 CSS boxes.

    items 可能由于 'display:contents' 而非空。

  4. 如果 nodeText 节点,则对于由 node生成的每个 CSS 文本框,按内容顺序,计算应用 CSS 'white-space' 处理规则和 'text-transform' 规则后的文本,将 items 设置为结果字符串的 列表 ,并返回 items。CSS 'white-space' 处理规则稍有修改:行尾的可折叠空格总是会被折叠,但只有当行是块的最后一行,或以 br 元素结尾时,才会被移除。软连字符应保留。 [CSSTEXT]

  5. 如果 nodebr element, then append a string containing a single U+000A LF code point to items添加包含单个 U+000A LF 码点的字符串。

  6. 如果 node计算值'display''table-cell',且 nodeCSS 盒 is not the last 'table-cell' box of its enclosing 'table-row' 盒的最后一个 'table-cell' 盒,则向 items添加包含单个 U+0009 TAB 码点的字符串。

  7. 如果 node计算值'display''table-row',且 nodeCSS 盒 is not the last 'table-row' box of the nearest ancestor 'table' 盒的最后一个 'table-row' 盒,则向 items添加包含单个 U+000A LF 码点的字符串。

  8. 如果 nodep element, then append 2 (a required line break count) at the beginning and end of items.

  9. 如果 node使用值'display'块级'table-caption', then append 1 (a required line break count) at the beginning and end of items. [CSSDISPLAY]

    浮动和绝对定位的元素属于此类别。

  10. 返回 items

请注意,大多数替换元素(例如 textareainputvideo —— 但不包括 button)的后代节点严格来说不会被 CSS 渲染,因此在此算法中没有 CSS 盒

此算法可以概括为适用于 范围。然后我们可以将其用作 Selection的字符串化的基础,甚至可以直接在 范围上公开它。请参阅 Bugzilla bug 10583


The 设置内部文本步骤,给定 HTMLElement element和字符串 value ,如下:

  1. fragment be the rendered text fragment for value given element渲染文本片段

  2. 替换所有 with element 内的 fragment

The innerText 的 setter 步骤是用 设置 inner text 步骤 ,传递 此对象 和给定值。

The outerText 的 setter 步骤如下:

  1. 如果 此对象的父节点为 null,则抛出 "NoModificationAllowedError" DOMException

  2. next 等于 此对象下一个兄弟节点

  3. previous 等于 此对象上一个兄弟节点

  4. fragment be the rendered text fragment for the given value given 此对象节点文档.

  5. 如果 fragment 没有 子节点,则 追加 一个新的 Text 节点,其 数据 为空字符串, 节点文档此对象节点文档fragment

  6. 替换 此对象fragment ,在 此对象的父节点中。

  7. 如果 next 非空且 next上一个兄弟节点 是一个 Text 节点,则 合并到下一个文本节点 ,传递 next上一个兄弟节点

  8. 如果 previous 是一个 Text 节点,则 合并到下一个文本节点 ,传递 previous

The 渲染文本片段 ,给定字符串 inputDocument document ,运行以下步骤:

  1. fragment 为一个新的 DocumentFragment ,其 节点文档document

  2. position位置变量 ,最初指向 input, initially pointing at the start of input.

  3. text 为空字符串。

  4. position 未越过 input的末尾时:

    1. 收集input 给定 position开始的非 U+000A LF 或 U+000D CR 的一系列码点,并将 text 设置为结果。

    2. 如果 text 不是空字符串,则 追加 一个新的 Text 节点,其 数据text ,其 节点文档documentfragment

    3. position 未越过 input的末尾,且 position 处的码点为 U+000A LF 或 U+000D CR 时:

      1. 如果 position 处的码点为 U+000D CR 且下一个码点为 U+000A LF,则将 position 前移到 input的下一个码点。

      2. position 前移到 input的下一个码点。

      3. 追加 the result of creating an element given document、"br" 和 HTML 命名空间 创建的,追加到 fragment.

  5. 返回 fragment

To 与下一个文本节点合并 ,给定 Text 节点 node

  1. nextnode下一个兄弟节点.

  2. 如果 next 不是一个 Text node, then return.

  3. with nodenode数据长度、0 和 next数据.

  4. 移除 next.

3.2.8 与双向算法相关的要求

3.2.8.1 双向算法格式化字符的编写一致性标准

HTML元素 中的 文本内容 ,以及其内容中的 Text nodes in their contents, and text in attributes of 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 Accessibility API Mappings中定义。除了那里规定的规则外,对于一个 自定义元素 element,默认的 ARIA 角色语义按如下方式确定: [HTMLAAM]

  1. mapelement内部内容属性映射

  2. 如果 map["role"] 存在,则返回它。

  3. 返回无角色。

类似地,对于一个 自定义元素 element,默认的 ARIA 状态和属性语义,对于名为 stateOrProperty的状态或属性,按如下方式确定:

  1. 如果 element附加内部 不为空:

    1. 如果 element附加内部获取 stateOrProperty关联元素 存在,则返回运行结果。

    2. 如果 element附加内部获取 stateOrProperty关联元素 存在,则返回运行结果。

  2. 如果 element内部内容属性映射[stateOrProperty] 存在,则返回它。

  3. 返回 stateOrProperty的默认值。

此处提到的“默认语义”有时在 ARIA中也称为“本机”、“隐式”或“主机语言”语义。 [ARIA]

这些定义的一个含义是默认语义可以随时间变化。这允许自定义元素具有与内置元素相同的表达能力;例如,比较 a 元素的默认 ARIA 角色语义在 href 属性添加或移除时如何变化。

有关实际应用的示例,请参见 自定义元素部分


Conformance checker requirements for checking use of ARIA rolearia-* attributes on HTML elements are defined in ARIA in HTML中定义。 [ARIAHTML]

4 HTML元素

4.1 文档元素

4.1.1 The html 元素

元素/html

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLHtmlElement

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
无。
可以使用此元素的上下文:
作为文档的 文档元素
在复合文档中,只要允许子文档片段的地方。
内容模型:
一个 head 元素,后面跟着一个 body 元素。
在 text/html 中的标签省略:
如果 html 元素的 开始标签 可以省略, 如果 html 元素内的第一个内容不是 注释
如果 html 元素的 结束标签 可以省略,前提是 html 元素后面没有紧接着一个 注释
内容属性:
全局属性
无障碍考虑:
对于作者
对于实施者
净化
默认
DOM 接口:
[Exposed=Window]
interface HTMLHtmlElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

The html 元素 表示 HTML 文档的根。

建议作者在根 lang attribute on the root html element, giving the document's language. This aids speech synthesis tools to determine what pronunciations to use, translation tools to determine what rules to use, and so forth.

下面示例中的 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 The 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 中的标签省略
A head 元素的 开始标签 可以省略,如果该元素为空,或者如果 head 元素中的第一个元素是一个元素。
A head 元素的 结束标签 可以省略,如果 head 元素后面没有紧接着 ASCII 空白字符注释
内容属性
全局属性
可访问性考虑
针对作者
针对实施者
净化
默认
DOM 接口
[Exposed=Window]
interface HTMLHeadElement : HTMLElement {
  [HTMLConstructor] constructor();
};

The head 元素 表示 a collection of metadata for the Document.

The collection of metadata in a 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>
 ...

The title 元素在大多数情况下是必需的子元素,但当更高层协议提供标题信息时,例如在用作电子邮件编写格式的 HTML 的主题行中,可以省略 title 元素。

4.2.2 The title element

Element/title

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

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet Explorer1+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLTitleElement

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

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别
元数据内容
此元素可使用的上下文
在不包含其他 head 元素中包含的 title 元素。
内容模型
文本 ,不是 元素间的空白
文本/html 中的标签省略
两个标签都不能省略。
内容属性
全局属性
可访问性考虑
针对作者
针对实施者
净化
默认
DOM 接口
[Exposed=Window]
interface HTMLTitleElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute DOMString text;
};

The title 元素 表示 文档的标题或名称。作者 应该使用能够在脱离上下文时(例如在用户的历史记录或书签中,或在搜索结果中)识别他们的文档的标题。文档的标题通常与其第一个标题不同,因为第一个标题不 必在脱离上下文时独立存在。

每个文档中只能有一个 title 元素。

如果文档没有标题是合理的,那么 Document to have no title, then the title element is probably not required. See the head 元素的内容模型。

title.text [ = value ]

返回元素的 子文本内容

可以设置,以用给定值替换元素的子节点。

The text 属性的 getter 必须返回此 title 元素的 子文本内容

The text attribute's setter must string replace all with the given value within this title element.

以下是一些适当的标题示例,与可能在同一页面上使用的顶级标题进行对比。

  <title>Introduction to The Mating Rituals of Bees</title>
    ...
  <h1>Introduction</h1>
  <p>This companion guide to the highly successful
  <cite>Introduction to Medieval Bee-Keeping</cite> book is...

下一页可能是同一站点的一部分。请注意,标题如何清晰地描述主题,而第一个标题假设读者知道上下文,因此不会怀疑舞蹈是 Salsa 还是 Waltz:

  <title>Dances used during bee mating rituals</title>
    ...
  <h1>The Dances</h1>

用作文档标题的字符串由 document.title IDL 属性给出。

用户代理在用户界面中引用文档时,应使用文档的标题。当 title 元素的内容以这种方式使用时, 方向性 of that title element should be used to set the directionality of the document's title in the user interface.

4.2.3 The base element

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+
类别
元数据内容
可以使用此 元素的上下文
In a head element containing no other base elements.
内容模型
无内容
text/html 中的标签 省略
结束标签
内容属性
全局属性
href文档基础 URL
target — Default navigable for 超链接 导航表单提交
无障碍考量
面向作者
面向实现者
净化
Unsafe.
DOM 接口
[Exposed=Window]
interface HTMLBaseElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, ReflectSetter] attribute USVString href;
  [CEReactions, Reflect] attribute DOMString target;
};

The base element allows authors to specify the document base URL for the purposes of parsing URL文档基础 URL ,以及用于 跟随超链接. The element does not 表示 除此信息之外的任何内容。

每个文档不得有超过一个 base 元素。

A base 元素必须具有 href 属性、 target 属性, 或二者兼有。

The href 内容 属性,如果指定,则必须包含一个 可能被空格包围的有效 URL

A base 元素,如果它有 href 属性, 则必须位于树中任何其他具有被定义为接受 URL的属性的元素之前。

如果存在多个带有 base 元素且带有 href 属性,除第一个外其余都会被 忽略。

The target 属性, 如果指定,则必须包含一个 有效的可导航目标名称或关键字, which specifies which Document is to be used as the default when 超链接表单 in the Document cause 导航.

A base 元素,如果它有 target 属性,则必须位于树中任何表示 超链接的元素之前。

如果存在多个带有 base 元素且带有 target 属性,除 第一个外其余都会被忽略。

获取元素的目标,给定一个 aareaform 元素 element,以及一个可选的字符串或 null target (默认 null),运行以下步骤:

  1. 如果 target 为 null:

    1. 如果 element 具有 target 属性,则将 target 设置为该属性的值。

    2. 否则,如果 element节点 文档 contains a base element with a target attribute, set target to the value of the target attribute of the first such base element.

  2. 如果 target 不为 null,并且同时包含一个 ASCII 制表符 或换行符 和 U+003C (<),则将 target 设置为 "_blank"。

  3. 返回 target


A base 元素的 base element with an href content attribute in a document tree has a 冻结基础 URL. The frozen base URL must be 立即 设置 for an element whenever any of the following situations occur:

To set the frozen base URL for an element element:

  1. documentelement节点文档

  2. urlRecord be the result of parsing the value of document's href content attribute with documentfallback base URL, and element's href. (Thus, the base 元素不会受到它自身影响。)

  3. 如果以下任一项为真:

    则将 element冻结基础 URL 设置为 document回退基础 URL 并返回。

  4. element冻结基础 URL 设置为 urlRecord

  5. Respond to base URL changes given document.

The href IDL 属性在获取时,必须返回运行以下算法的结果:

  1. documentelement节点文档

  2. url 为此元素的 href 属性值(如果它有此属性),否则为空字符串。

  3. urlRecord be the result of parsing url with document回退基础 URLdocument字符编码. (Thus, the base 元素 不会受到其他 base 元素或 它自身影响。)

  4. 如果 urlRecord 为失败,则返回 url

  5. Return the serialization of 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

Support in all current engines.

火狐1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer5.5+
火狐 Android?Safari iOS?Chrome Android?WebView Android?三星浏览器 Android?Opera Android12.1+

HTMLLinkElement/relList

Support in all current engines.

火狐30+Safari9+Chrome50+
Opera?Edge79+
Edge(旧版)17+Internet Explorer不支持
火狐 Android?Safari iOS?Chrome Android?WebView Android?三星浏览器 Android?Opera Android?
类别:
元数据内容
如果元素是 允许出现在正文中的: 流内容
如果元素是 允许出现在正文中的: 短语内容
此元素可使用的上下文:
在需要 元数据内容 的地方。
在一个 noscript 元素中,该元素是 head 元素的子元素。
如果元素是 允许出现在正文中的: 在需要 短语内容 的地方。
内容模型:
无内容
在text/html中的标签省略:
没有 结束标签
内容属性:
全局属性
href超链接
crossorigin — 元素如何处理跨域请求
rel — Relationship between the document containing the hyperlink and the destination resource
media — 适用的媒体
integrity — 在 子资源完整性 检查中使用的完整性元数据 [SRI]
hreflang — 链接资源的语言
type — 引用资源的类型提示
referrerpolicy — 为元素发起的 fetch 操作设置的 引用者策略 initiated by the element
sizes — 图标的尺寸 (对于 rel="icon")
imagesrcset — 在不同情况下使用的图像,例如高分辨率显示器,小型监视器等(对于 rel="preload")
imagesizes — 针对不同页面布局的图像尺寸 (对于 rel="preload")
as — 预加载请求的目的地 (用于 rel="preload" 和 rel="modulepreload")
blocking — 元素是否为 潜在渲染阻塞
color — 在自定义站点图标时使用的颜色 (对于 rel="mask-icon")
disabled — 链接是否被禁用
fetchpriority — Sets the priority for fetch initiated by the element
另外, title attribute has special semantics on this element: Title of the link; 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;

The link 元素允许作者将文档链接到其他资源。

链接地址由 href 属性提供。如果 href 属性存在,则其值必须是 有效的非空 URL,可能被空格包围。必须存在 hrefimagesrcset 属性中的一个或两个。

如果 hrefimagesrcset 属性都不存在,则该元素不定义链接。

链接的类型(关系)由 rel 属性的值给出,该属性(如果存在)必须具有一个 唯一的用空格分隔的标记的无序集合允许的关键字及其含义 在后面的部分定义。如果 rel 属性缺失、没有关键字,或使用的关键字都不符合本规范中的定义,则该元素不会创建任何链接。

rel支持的标记 是在 HTML 链接类型 中定义的关键字,这些关键字在 link 元素上是被允许的,会影响处理模型,并且由用户代理支持。可能的 支持的标记 包括 alternatedns-prefetchexpecticonmanifestmodulepreloadnextpingbackpreconnectprefetchpreloadsearchstylesheetrel支持的标记 必须仅包括用户代理实现处理模型的标记。

理论上,用户代理可以支持 canonical 关键字的处理模型——如果它是执行 JavaScript 的搜索引擎。但实际上这非常不可能。因此,在大多数情况下, canonical 不应包含在 rel支持的标记中。

A link 元素必须具有 rel 属性或 itemprop 属性,但不能同时具有这两个属性。

如果 link 元素具有 itemprop attribute, or has a rel attribute that contains only keywords that are body-ok, then the element is said to be 允许在主体中使用。这意味着该元素可以在预期 短语内容 的位置使用。

如果使用了 rel 属性,则该元素仅在页面的 body 中有时可以使用。当与 itemprop 属性一起使用时,该元素可以在 head 元素和 body 中使用,前提是遵守微数据模型的约束。


使用 link 元素可以创建两类链接: 外部资源链接超链接链接类型部分 定义了特定链接类型是外部资源还是超链接。一个 link 元素可以创建多个链接(其中一些可能是 外部资源链接 ,一些可能是 超链接);具体创建哪些链接以及创建多少链接取决于 rel 属性中给出的关键字。用户代理必须逐个链接地处理这些链接,而不是逐个元素地处理。

每个为 link 元素创建的链接都是单独处理的。例如,如果有两个 link 元素,其 rel="stylesheet",它们每个都计为一个单独的外部资源,并且每个都受其自身属性的独立影响。同样,如果一个 link 元素的 rel 属性的值为 next stylesheet,它将同时创建一个 超链接 (对应 next 关键字)和一个 外部资源链接 (对应 stylesheet 关键字),并且它们会受到其他属性(如 mediatitle)的不同影响。

例如,下面的 link 元素创建了两个 超链接 (指向相同的页面):

<link rel="author license" href="/about">

这个元素创建的两个链接分别具有以下语义:一个是目标页面有关于当前页面作者的信息,另一个是目标页面有关于当前页面提供的许可证的信息。

Hyperlinks created with the link 元素及其 rel attribute apply to the whole document. This contrasts with the rel 属性在 aarea 元素中的作用不同,后者指示了链接的类型,其上下文由链接在文档中的位置决定。

aarea 元素创建的链接不同, 超链接link 元素创建时,默认情况下不会在文档中显示(在支持 建议默认渲染的用户代理中)。即使通过 CSS 强制显示,它们也没有 激活行为。它们主要提供语义信息,可能被页面或其他使用页面内容的软件利用。此外,用户代理可以 提供自己的用户界面以跟随这些超链接

The exact behavior for 外部资源链接 的确切行为取决于具体的关系,按相关 链接类型定义。


The crossorigin 属性是一个 CORS 设置属性。它旨在用于 外部资源链接

The media 属性指定资源适用于哪些媒体。其值必须是一个 有效的媒体查询列表

子资源完整性

支持所有当前的浏览器。

Firefox43+Safari11.1+Chrome45+
Opera?Edge79+
Edge(经典版)17+Internet Explorer不支持
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The integrity 属性表示此元素负责的请求的 完整性元数据 for requests which this element is responsible for. The value is text. The attribute must only be specified on link elements that have a rel 属性且包含 stylesheetpreloadmodulepreload keyword. [SRI]

The hreflang 属性在 link 元素上具有与 hreflang 属性在 a 元素上相同的语义。

The type 属性提供了链接资源的 MIME 类型 。它纯属建议。该值必须是 有效的 MIME 类型字符串

对于 外部资源链接type 属性作为提示提供给用户代理,以便它们可以避免获取不支持的资源。

The referrerpolicy 属性是一个 引荐策略属性。它用于 外部资源链接,帮助设置 引荐策略 ,该策略在 获取和处理链接资源时使用。 [REFERRERPOLICY]

The title 属性提供了链接的标题。除一个例外外,它纯属建议。该值为文本。唯一的例外是样式表链接,这些链接位于 文档树中,对于这些链接, title 属性定义了 CSS 样式表集合

The title 属性在 link 元素上的行为与大多数其他元素的全局 title 属性不同:没有标题的链接不会继承父元素的标题;它只是没有标题。


The imagesrcset 属性可以存在,并且是一个 srcset 属性

The imagesrcsethref 属性(如果没有使用 宽度描述符 )共同构成 图像源源集合

如果 imagesrcset attribute is present and has any image candidate strings using a 宽度描述符, the imagesizes 属性也必须存在,并且是一个 sizes 属性imagesizes 属性贡献了 源大小源集合

The imagesrcsetimagesizes 属性只能在 link 元素上指定,这些元素具有 rel 属性,该属性指定 preload keyword, as well as an as attribute in the "image" state.

这些属性允许预加载适当的资源,稍后由具有相应值的 img 元素使用,其 srcsetsizes 属性如下:

<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的浏览器中才相关,在那些情况下,它可能会导致错误的图像被预加载。

The 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>

The sizes 属性提供视觉媒体图标的大小。如果存在,其值仅为建议性。用户代理可以使用该值来决定在多个图标可用时使用哪个图标。如果指定,则属性值必须是一个 唯一的、以空格分隔的令牌的无序集合 ,并且是 ASCII 不区分大小写. Each value must be either an ASCII case-insensitive match for the string "any" 字符串的 ASCII 不区分大小写 that do not have a leading U+0030 DIGIT ZERO (0) character and that are separated by a single U+0078 LATIN SMALL LETTER X or U+0058 LATIN CAPITAL LETTER X character. The attribute must only be specified on link elements that have a rel 属性,并且该属性指定了 icon 关键字或 apple-touch-icon keyword.

` apple-touch-icon ` 关键字是一个注册的 预定义链接类型集合的扩展,但用户代理并不要求以任何方式支持它。


The as 属性用于指定 预加载目的地模块预加载目的地 ,以用于针对由 href 属性指定的资源进行预加载请求。它是一个 枚举型属性。所有 预加载目的地模块预加载目的地 is a keyword for this attribute, mapping to a state of the same name. The attribute must be specified on link elements that have a rel 属性,且该属性包含 preload keyword; in such cases it must have a value which is a preload destination. It may be specified on link elements that have a rel 属性,且该属性包含 modulepreload keyword; in such cases it must have a value which is a 模块预加载目的地。对于其他 link 元素,则不得指定该属性。

关于 as 属性如何使用的处理模型在每个链接类型的 获取和处理链接资源 算法中给出。

该属性没有 缺失值默认值无效值默认值,这意味着无效或缺失的属性值不会映射到任何状态。这在处理模型中已被考虑。对于 preload 链接,两种情况都是错误的;对于 modulepreload 链接,缺失值将被视为 "script"。


The blocking 属性是一个 阻塞属性。它用于链接类型 stylesheetexpect,并且只能在具有包含这些关键字的 rel 属性的链接元素上指定。


The color 属性用于 mask-icon 链接类型。该属性只能在具有包含 link 关键字的 rel 属性的 mask-icon 元素上指定。其值必须是一个符合 CSS <color> 生成规则的字符串,定义一个建议的颜色,用户代理可以使用它来定制用户在固定网站时看到的图标的显示。

本规范对 color 属性没有任何用户代理要求。

The mask-icon 关键字是对预定义链接类型集的一个注册 扩展,但用户代理并不要求以任何方式支持它。


link 元素具有一个关联的 显式启用 布尔值。初始值为 false。

The disabled 属性是一个 布尔属性 ,用于 stylesheet link type. The attribute must only be specified on link elements that have a rel 属性包含 stylesheet keyword.

每当 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?

The 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?

The as IDL 属性必须 反映 the as 内容属性, 仅限于已知值

The crossOrigin IDL 属性必须 反映 the crossorigin 内容属性, 仅限于已知值

HTMLLinkElement/referrerPolicy

所有当前引擎都支持。

Firefox50+Safari14.1+Chrome58+
Opera?Edge79+
Edge (旧版)?Internet Explorer不支持
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The referrerPolicy IDL 属性必须 反映 the referrerpolicy content attribute, limited to only known values.

The fetchPriority IDL 属性必须 反映 the fetchpriority content attribute, limited to only known values.

The 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 属性来确定其实际类型。只有实际类型(如下一段定义)用于确定是否 应用 资源,而不是上述假设的类型。

The 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,样式表 仍然会 被应用。

The default fetch and process the linked resource, given a link 元素 el, is as follows:

  1. options be the result of creating link options from el.

  2. request be the result of creating a link request given options.

  3. 如果 request 为 null,则返回。

  4. 设置 request同步标志

  5. 运行 链接资源获取设置步骤,给定 elrequest。如果结果为 false,则返回。

  6. 如果 el's initiator type to "css" if el's rel 属性包含关键字 stylesheet; "link"。

  7. 获取 request ,将 processResponseConsumeBody 设置为以下步骤,给定 响应 response 和 null、失败,或 字节序列 bodyBytes

    1. success 为 true。

    2. 如果以下任何一个为真:

      • bodyBytes 为 null 或失败;或者

      • response状态 不是一个 ok 状态

      则将 success 设置为 false。

      注意,特定内容的错误,例如 CSS 解析错误或 PNG 解码错误,不会影响 success

    3. 否则,等待 链接资源关键子资源 加载完成。

      定义链接类型的 关键子资源 (例如 CSS)的规范,预计会描述如何获取和处理这些子资源。然而,由于目前这尚不明确,本规范描述了等待 链接资源关键子资源 被获取和处理,期望这样能正确完成。

    4. Process the linked resource given elsuccessresponsebodyBytes.

To create a link request given a 链接处理选项 options:

  1. 断言: optionshref 不是空字符串。

  2. url be the result of encoding-parsing a URL given options编码解析 URL的结果,相对于 options基本 URL

    传递基本 URL 而不是文档或环境的问题由 issue #9715跟踪。

  3. 如果 url 失败,则返回 null。

  4. request be the result of creating a potential-CORS request given urloptions创建潜在 CORS 请求的结果,以及 options's crossorigin

  5. request策略容器 设置为 options策略容器

  6. request完整性元数据 设置为 options完整性

  7. request加密随机数元数据 设置为 options加密随机数元数据

  8. request引用政策 设置为 options引用政策

  9. request客户端 设置为 options环境

  10. request优先级 设置为 options获取优先级

  11. 返回 request

用户代理可以选择仅在需要时尝试 获取和处理 这些资源,而不是主动获取所有未应用的 外部资源

类似于 获取和处理链接资源 算法,所有 外部资源链接 都有一个 处理链接资源 算法,该算法接受一个 link 元素 el,一个布尔值 success,一个 响应 response,以及一个 字节序列 bodyBytes。各个链接类型可以提供自己的 处理链接资源 算法,但除非明确声明,否则该算法不执行任何操作。

除非对给定的 rel 关键字另有说明,否则元素必须 延迟元素的加载事件 of the element's node document until all the attempts to 获取和处理链接资源 及其 关键子资源 完成。(用户代理尚未尝试获取和处理的资源,例如因为等待资源被需要,这些资源不会 延迟加载事件。)

所有可以作为 外部资源链接 的链接类型都定义了一个 处理链接头部 算法,该算法接收 链接处理选项。这个算法定义了这些链接在 HTTP `Link` 响应头部中出现时的反应方式。

对于大多数链接类型,这个算法不会执行任何操作。 总结表 是快速了解某个链接类型是否定义了 处理链接头部 步骤的良好参考。

A 链接处理选项 是一个 结构。它具有以下

href (默认值为空字符串)
initiator (默认值为"link")
integrity (默认值为空字符串)
type (默认值为空字符串)
cryptographic nonce metadata (默认值为空字符串)
一个字符串
destination (默认值为空字符串)
一个 destination type
crossorigin (默认值为 No CORS
一个 CORS 设置属性 状态
referrer policy (默认值为空字符串)
一个 referrer policy
source set (默认值为 null)
null 或 source set
base URL
一个 URL
origin
一个 origin
environment
一个 environment
policy container
一个 policy container
document (默认值为 null)
null 或 Document
on document ready (默认值为 null)
null 或 接受一个 Document
fetch priority (默认值为 Auto
一个 fetch priority attribute 状态

一个 链接处理选项 具有一个 基本 URL 和一个 href ,而不是解析后的 URL,因为 URL 可能是选项的 source set的结果。

根据元素创建链接选项 ,给定一个 link 元素 el

  1. documentel节点文档

  2. options 为一个新的 链接处理选项 ,其值为:

    crossorigin
    the state of elcrossorigin 内容属性的状态
    referrer policy
    the state of elreferrerpolicy 内容属性的状态
    source set
    elsource set
    基本 URL
    document文档基本 URL
    origin
    documentorigin
    environment
    document相关设置对象
    policy container
    documentpolicy container
    document
    document
    加密随机数元数据
    当前值为 el[[CryptographicNonce]] 内部槽
    fetch priority
    the state of elfetchpriority 内容属性的状态
  3. 如果 el 有一个 href 属性,则将 optionshref 设置为 elhref 属性的值。

  4. 如果 el 有一个 integrity 属性,则将 optionsintegrity 设置为 elintegrity 内容属性的值。

  5. 如果 el 有一个 type 属性,则将 optionstype 设置为 eltype 属性的值。

  6. 断言optionshref 不能为空字符串,或者 optionssource set 不能为 null。

    A link element with neither an href 属性,也没有 imagesrcset does not represent a link.

  7. 返回 options

要从头部中 提取链接 ,给定一个 头部列表 headers

  1. links 为一个新的 列表

  2. rawLinkHeaders be the result of getting, decoding, and splitting `Link` from headers.

  3. 对于每个 linkHeaderrawLinkHeaders

    1. linkObject解析 linkHeader的结果。 [WEBLINK]

    2. 如果 linkObject["target_uri"] 不 存在,则 继续

    3. linkObject 添加到 links中。

  4. 返回 links

处理链接头部 ,给定一个 Document doc,一个 响应 response,以及一个 "pre-media" 或 "media" phase

  1. links be the result of extracting links from response头部列表.

  2. 对于每个 linkObjectlinks中:

    1. rellinkObject["relation_type"]。

    2. attribslinkObject["target_attributes"]。

    3. expectedPhase 为 "media" 如果 "srcset", "imagesrcset", 或 "media" 存在attribs中;否则为 "pre-media"。

    4. 如果 expectedPhase 不是 phase,则 继续

    5. 如果 attribs["media"] 存在attribs["media"] 不 匹配环境,则 继续

    6. options 为一个新的 链接处理选项 ,其具有:

      href
      linkObject["target_uri"]
      基本 URL
      doc文档基本 URL
      来源
      doc来源
      环境
      doc相关设置对象
      策略容器
      doc策略 容器
      文档
      doc
    7. 根据已解析的头属性应用链接选项options , 传入 attribsrel。如果返回值为 false,则直接返回。

    8. 如果 attribs["imagesrcset"] 存在attribs["imagesizes"] 存在,则将 options源集 设置为结果 创建源集 的结果,给定 linkObject["target_uri"]、 attribs["imagesrcset"]、 attribs["imagesizes"], 和 null。

    9. 运行 处理链接头部 步骤,以 reloptions进行。

根据已解析的头属性应用链接选项 到一个 链接处理选项 options ,给定 attribs 和字符串 rel

  1. 如果 rel 为"preload":

    1. 如果 attribs["as"]不存在 exist,则返回false。

    2. destination转换 attribs["as"]的结果。

    3. 如果 destination 为null,则返回false。

    4. 设置 optionsdestinationdestination

  2. 如果 attribs["crossorigin"] 存在 exists 且为 ASCII 不区分大小写 匹配任一 CORS 设置属性 关键字, 则将 optionscrossorigin 设置为 与该关键字对应的 CORS 设置属性 状态。

  3. 如果 attribs["integrity"]存在 exists,则将 optionsintegrity 设置为 attribs["integrity"]。

  4. 如果 attribs["referrerpolicy"] 存在 exists 且为 ASCII 不区分大小写 匹配某个 referrer policy,则将 optionsreferrer policy 设置为该 referrer policy

  5. 如果 attribs["nonce"] 存在 exists,则将 optionsnonce 设置为 attribs["nonce"]。

  6. 如果 attribs["type"]存在 exists,则将 optionstype 设置为 attribs["type"]。

  7. 如果 attribs["fetchpriority"] 存在 exists 且为 ASCII 不区分大小写 匹配某个 fetch priority attribute 关键字,则将 optionsfetch priority 设置为该 fetch priority attribute 关键字。

  8. 返回true。

4.2.4.5 早期提示

状态/103

Firefoxpreview+SafariChrome103+
OperaEdge103+
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 response 和一个 environment reservedEnvironment

早期提示的 `Link` headers are always processed before `Link` headers from the final response, followed by link 元素之前处理。这等价于将早期和最终的 `Link` 头部内容按顺序前置到 Documenthead 元素中。

  1. earlyPolicyContainer 成为 创建策略容器从 fetch 响应 的结果,给定 responsereservedEnvironment

    这允许早期提示 响应 包含一个 内容安全策略 which would be enforced when fetching the early hint 请求.

  2. links 成为 from response头部列表中提取链接的结果。

  3. earlyHints 成为空的 列表

  4. 对于每个 linkObjectlinks中:

    一旦我们收到早期提示链接头部,我们就开始 获取 earlyRequest。如果在 Document 创建之前返回,我们将 earlyResponse 设置为该 响应 of that fetch and once the Document 被创建,我们就提交它(通过将其在 预加载资源映射 中可用,仿佛它是一个 link 元素)。如果 Document 首先被创建,一旦 响应 可用时立即提交。

    1. rellinkObject["relation_type"]。

    2. options 成为一个新的 链接处理选项 ,包括

      href
      linkObject["target_uri"]
      initiator
      "early-hint"
      base URL
      responseURL
      origin
      responseURL
      环境
      reservedEnvironment
      策略容器
      earlyPolicyContainer
    3. attribslinkObject["target_attributes"]。

      只有 ascrossoriginintegrity,和 type 属性作为早期提示处理的一部分。其他属性,特别是 blockingimagesrcsetimagesizesmedia 只有在 Document 被创建后才适用。

    4. 根据已解析的头属性应用链接选项options , 传入 attribsrel。如果返回值为 false,则返回。

    5. 运行 处理链接头部 步骤给 rel 给定 options

    6. 附加 optionsearlyHints

  5. 根据 Document doc对于每个 optionsearlyHints中:

    1. 如果 optionson document ready 为 null,则将 optionsdocument 设置为 doc

    2. 否则,使用 doc's on document ready with options.

Interactive user agents may provide users with a means to follow the hyperlinks created using the link element, somewhere within their user interface. Such invocations of the 超链接访问 算法的调用必须将 userInvolvement 参数设置为"browser UI". The exact interface is not defined by this specification, but it could include the following information (obtained from the element's attributes, again as defined below), in some form or another (possibly simplified), for each hyperlink created with each link element in the document:

用户代理还可以包括其他信息,例如资源的类型(由 type 属性给出)。

4.2.5 The 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 属性但不在 编码声明状态: in a noscript element that is a child of a head element.
如果存在 name 属性: 在期望 元数据内容 的地方。
如果存在 itemprop 属性: 在期望 元数据内容 的地方。
如果存在 itemprop 属性: 在期望 短语内容 的地方 。
内容模型:
无内容
在 text/html 中省略标签:
结束标签
内容属性:
全局属性
name — 元数据名称
http-equiv — 指令
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
};

The meta 元素 表示 各种无法通过 titlebaselinkstylescript 元素表示的元数据。

The meta 元素可以通过 name 属性表示文档级元数据,通过 http-equiv 属性表示指令,通过 字符编码声明 表示 HTML 文档在序列化为字符串形式(例如用于网络传输或磁盘存储)时的文件编码,并使用 charset 属性表示。

必须指定 namehttp-equivcharsetitemprop 属性中的一个。

如果指定了 namehttp-equiv,或 itemprop ,则必须指定 content 属性。否则,必须省略它。

The charset 属性指定文档使用的 字符编码 。这是一个 字符编码声明. If the attribute is present, its value must be an ASCII case-insensitive match for the string "utf-8".

The charset 属性在 meta 元素在 XML 文档中没有作用,但允许在 XML 文档中使用,以便于向 XML 迁移和从 XML 迁移。

There must not be more than one meta element with a charset attribute per document.

The content 属性在元素用于文档元数据或指令时提供其值。允许的值取决于具体的上下文,如本规范后续部分所述。

如果 meta 元素具有 name 属性,则它设置文档元数据。文档元数据以名称-值对的形式表示, name 属性在 meta 元素上给出名称, content 属性在同一元素上给出值。名称指定设置元数据的哪个方面;有效名称及其值的含义在后续部分中描述。如果 meta 元素没有 content 属性,则元数据名称-值对的值部分为空字符串。

The media 属性说明元数据适用的媒体。其值必须是 有效的媒体查询列表。除非 nametheme-colormedia 属性对处理模型没有影响,作者不得使用。

4.2.5.1 标准元数据名称

Element/meta/name

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer6+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

本规范定义了一些用于 name 属性的 meta 元素名称。

名称不区分大小写,并且必须以 ASCII 不区分大小写 的方式进行比较

application-name

值必须是一个简短的自由格式字符串,表示页面所代表的 Web 应用程序的名称。如果页面不是 Web 应用程序,则 application-name 元数据名称不得使用。可以使用 lang 属性指定每个名称的语言,提供 Web 应用程序名称的翻译。

There must not be more than one meta element with a given 语言 并且 name attribute value is an ASCII case-insensitive match for application-name per document.

用户代理可能会在 UI 中优先使用应用程序名称,而不是页面的 title,因为标题可能包含与页面特定时间点相关的状态消息等信息,而不仅仅是应用程序的名称。

为了在给定语言列表(例如英国英语、美式英语和英语)中找到要使用的应用程序名称,用户代理必须执行以下步骤:

  1. languages 为语言列表。

  2. default language be the language of the Document文档元素, if any, and if that language is not unknown.

  3. 如果有 default language,并且该语言与 languages中的任何语言不同,则将其追加到 languages

  4. winning languagelanguages 中第一个有 meta element in the Document where the name attribute value is an ASCII case-insensitive match for application-name ASCII 不区分大小写匹配,并且其 语言 是相关语言。

    如果没有语言具有这样的 meta 元素,则返回;没有给定的应用程序名称。

  5. 返回 content attribute of the first meta element in the Document in meta where the name attribute value is an ASCII case-insensitive match for application-name ASCII 不区分大小写匹配,并且其 语言winning language

此算法将在浏览器需要页面名称时使用,例如用于标记书签。浏览器会将用户的首选语言提供给算法。

author

值必须是一个自由格式字符串,表示页面的某个作者的名字。

description

值必须是一个自由格式字符串,描述页面的内容。该值必须适合用于页面目录中,例如在搜索引擎中。每个文档中,不应有多个 meta 元素,其 name attribute value is an ASCII case-insensitive match for description ASCII 不区分大小写匹配。

generator

值必须是一个自由格式字符串,标识生成文档所使用的某个软件包。如果页面的标记不是由软件生成的,例如由用户在文本编辑器中编写的页面,则不应使用此值。

这是一个名为“Frontweaver”的工具在页面的 head 元素中包含的内容,以识别自己为生成页面的工具:

<meta name=generator content="Frontweaver 8.2">
keywords

值必须是一个 逗号分隔的令牌集,其中每个令牌都是与页面相关的关键字。

这个关于英国高速公路字体的页面使用一个 meta 元素来指定一些用户可能用来查找页面的关键字:

<!DOCTYPE HTML>
<html lang="en-GB">
 <head>
  <title>Typefaces on UK motorways</title>
  <meta name="keywords" content="british,type face,font,fonts,highway,highways">
 </head>
 <body>
  ...

许多搜索引擎不考虑此类关键字,因为这种功能历史上被不可靠甚至误导性地用于通过使用不适合用户的关键字来垃圾搜索引擎结果。

为了获取作者指定为页面适用的关键字列表,用户代理必须运行以下步骤:

  1. keywords 为一个空列表。

  2. For each meta element with a name 属性和 content attribute and where the name attribute value is an ASCII case-insensitive match for keywordsASCII 不区分大小写匹配:

    1. 将元素的 content 属性的值按逗号分割

    2. 将生成的令牌(如果有)添加到 keywords

  3. keywords中删除任何重复项。

  4. 返回 keywords。这是作者指定为页面适用的关键字列表。

当信息的可靠性不足时,用户代理不应使用此信息。

例如,内容管理系统在系统内页面中使用关键字信息来填充站点搜索引擎的索引是合理的,但大型内容聚合器使用此信息可能会发现某些用户会尝试通过使用不合适的关键字来操纵其排名机制。

referrer

值必须是一个 referrer policy, which defines the default referrer policy for the Document. [REFERRERPOLICY]

如果任何 meta 元素 element插入到文档中,或其 namecontent 属性发生变化,用户代理必须运行以下算法:

  1. 如果 element在文档树中,则返回。

  2. 如果 element 没有 name attribute whose value is an ASCII case-insensitive match for "referrer" ASCII 不区分大小写匹配,则返回。

  3. 如果 element 没有 content 属性,或者该属性的值为空字符串,则返回。

  4. valueelementcontent 属性的值, 转换为 ASCII 小写

  5. 如果 value 是以下表格第一列中的值之一,则将 value 设置为第二列中的值:

    旧值 引用政策
    never no-referrer
    default the default referrer policy
    always unsafe-url
    origin-when-crossorigin origin-when-cross-origin
  6. 如果 value引用政策,则将 element节点文档政策容器引用政策 设置为 policy

由于历史原因,与其他标准元数据名称不同, referrer 的处理模型对元素移除不敏感,并且不使用 树顺序。只有最新插入或最近修改的 meta 元素在此状态下有效。

theme-color

Element/meta/name/theme-color

FirefoxNoSafari15+Chrome🔰 73+
OperaNoEdge🔰 79+
Edge (旧版)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android80+WebView AndroidNoSamsung Internet6.2+Opera AndroidNo

值必须是与 CSS <color> 生产规则匹配的字符串,定义一个建议的颜色,用户代理应使用该颜色来自定义页面或周围用户界面的显示。例如,浏览器可能会使用指定的值来为页面的标题栏着色,或者在标签栏或任务切换器中使用它作为颜色高亮。

在 HTML 文档中, media 属性值必须在所有 meta 元素中唯一,这些元素的 name attribute value set to an ASCII case-insensitive match for theme-colorASCII 不区分大小写匹配。

本标准本身使用“WHATWG 绿色”作为其主题颜色:

<!DOCTYPE HTML>
<title>HTML Standard</title>
<meta name="theme-color" content="#3c790a">
...

The 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 属性,并且 elementmedia 属性的值不 与环境匹配,则 继续

    2. value去除前导和尾随 ASCII 空格 后的 elementcontent 属性的值。

    3. color解析 value的结果。

    4. 如果 color 不是失败,则返回 color

  3. 返回无(页面没有主题颜色)。

如果任何 meta 元素被 插入到文档中从文档中移除,或现有的 meta 元素的 namecontentmedia 属性发生变化,或者环境变化导致任何 meta 元素的 media attribute's value may now or may no longer match the environment, user agents must re-run the above algorithm and apply the result to any affected UI.

在 UI 中使用主题颜色时,用户代理可能会以实现特定的方式调整它,使其更适合相应的 UI。例如,如果用户代理打算使用主题颜色作为背景并在其上显示白色文本,则可能会在 UI 的该部分中使用较深的主题颜色变体,以确保足够的对比度。

color-scheme

为了帮助用户代理立即以所需的配色方案渲染页面背景(而不是等待页面中的所有CSS加载完成),可以在 ‘color-scheme’ 值中提供在 meta 元素中。

该值必须是符合CSS ‘color-scheme’ 属性值语法的字符串。它决定了 页面支持的配色方案

每个文档中不得有多个 meta 元素,其 name attribute value set to an ASCII case-insensitive match for color-scheme per document.

以下声明指示页面可以处理具有深色背景和浅色前景颜色的颜色方案:

<meta name="color-scheme" content="dark">

为了获取 页面支持的颜色方案,用户代理必须运行以下步骤:

  1. candidate elements 为满足以下条件的所有 meta 元素列表,按 树顺序排列:

  2. 对于 candidate elements 中的每个 element

    1. parsed解析组件值列表 的结果,给定 elementcontent 属性的值。
    2. 如果 parsed 是有效的 CSS 'color-scheme' 属性值,则返回 parsed
  3. 返回 null。

如果任何 meta 元素被 插入到文档中从文档中移除,或者现有的 meta 元素的 namecontent 属性发生变化,用户代理必须重新运行上述算法。

由于这些规则会检查连续的元素直到找到匹配项,因此作者可以提供多个这样的值以处理旧版用户代理的回退。与 CSS 属性的回退方式相反,多个 meta 元素需要按旧版值在新值之后的顺序排列。

4.2.5.2 其他元数据名称

任何人都可以创建并使用他们自己的 扩展预定义的元数据名称集合。没有要求必须注册这些扩展。

但是,在以下任何情况下都不应创建新的元数据名称:

此外,在创建和使用新的元数据名称之前,建议咨询 WHATWG Wiki MetaExtensions 页面 — 以避免选择已经在使用的元数据名称,避免重复已经在使用的元数据名称的目的,并避免新标准化名称与您选择的名称冲突。 [WHATWGWIKI]

任何人都可以随时编辑 WHATWG Wiki MetaExtensions 页面以添加元数据名称。新的元数据名称可以用以下信息来指定:

关键词

实际定义的名称。名称不应与任何其他定义的名称相似(例如,仅在大小写上不同)。

简短描述

元数据名称含义的简短非规范性描述,包括值所需的格式。

规范
链接到更详细描述元数据名称的语义和要求的链接。它可以是 wiki 上的另一页,或者是指向外部页面的链接。
同义词

具有完全相同处理要求的其他名称列表。作者不应使用定义为同义词的名称(它们仅用于允许用户代理支持旧内容)。任何人都可以删除实际上未使用的同义词;仅需要为了与旧内容兼容而处理为同义词的名称应以这种方式注册。

状态

以下之一:

已提议
该名称尚未经过广泛的同行审查和批准。有人提出了它并且正在或即将使用它。
已批准
该名称已通过广泛的同行审查和批准。它有一个规范,明确定义了如何处理使用该名称的页面,包括在错误使用该名称时的处理方式。
已停用
该元数据名称已通过广泛的同行审查,但被发现存在问题。现有页面使用此元数据名称,但新页面应避免使用。“简短描述”和“规范”条目将提供详细信息,说明作者应使用的替代项(如果有)。

如果发现元数据名称与现有值重复,则应将其删除并列为现有值的同义词。

如果元数据名称在“已提议”状态下添加一个月或更长时间而未使用或未规范,则可以将其从 WHATWG Wiki MetaExtensions 页面中删除。

如果元数据名称在“已提议”状态下添加,并被发现与现有值重复,则应将其删除并列为现有值的同义词。如果元数据名称在“已提议”状态下添加并被发现有害,则应将其更改为“已停用”状态。

任何人都可以随时更改状态,但应仅按照上述定义进行更改。

4.2.5.3 Pragma指令

http-equiv 属性在 meta 元素上指定时,该元素即为一个pragma指令。

尽管名称为 http-equiv,但 pragma 指令几乎与 HTTP 头部完全无关。实现者和 Web 开发者最好将它们视为完全独立的机制,这个名字只是历史上的一个偶然。

更详细地说,虽然 refresh 关键字与对应的 `Refresh` 头部具有相同的处理模型,但所有其他标准化的 pragma 指令与其名称相似的头部至少有一些不同的行为(通常是截然不同的行为)。

实现者或规范编写者在考虑添加新的文档级 pragma 或 HTTP 头部控制的开关时,应对这种差异保持警惕,避免在 HTTP 头部和 http-equiv pragma 中添加相同或类似的行为,从而加深现有的混淆。相反,可以只提供一个 HTTP 头部,或者如果需要文档内 pragma,可以考虑为 meta 元素添加一个类似于 charset 属性的新的属性。(注意,避免文档内 pragma 通常是更好的选择,因为 DOM 是可变的。因此,即使在开发者没有添加、移除或修改 meta 元素的情况下,策略也会在解析过程中从未应用变为已应用,这可能会带来复杂的影响。)

The http-equiv 属性是一个 枚举属性 ,包含以下关键字和状态:

关键字 符合 状态 简要描述
content-language 内容语言 设置 pragma-set默认语言
content-type 编码声明 设置 charset的另一种形式。
default-style 默认样式 Sets the name of the default CSS样式表集.
refresh 刷新 充当定时重定向。
set-cookie 设置Cookie 无效。
x-ua-compatible X-UA-Compatible 实际上,鼓励Internet Explorer更严格地遵循规范。
content-security-policy 内容安全策略 强制实施 a 内容安全策略Document

当一个 meta 元素被 插入到文档中时,如果其 http-equiv 属性存在并且表示上述某个状态,则用户代理必须运行与该状态相对应的算法,如下列表所述:

内容语言状态 (http-equiv="content-language")

此功能不符合规范。建议作者使用 lang 属性代替。

此pragma设置 pragma-set默认语言。在此类pragma成功处理之前,没有 pragma-set默认语言

  1. 如果 meta 元素没有 content 属性,则返回。

  2. 如果元素的 content 属性包含U+002C逗号字符(,),则返回。

  3. input 为元素的 content 属性的值。

  4. position 指向 input的第一个字符。

  5. 跳过ASCII空白 字符在 input 中给定 position

  6. 收集一系列码点 ,这些码点不是 ASCII 空白字符 ,从 input 给定的 position

  7. candidate 为前一步骤结果的字符串。

  8. 如果 candidate 为空字符串,则返回。

  9. pragma-set默认语言 设置为 candidate

    如果该值包含多个以空格分隔的标记,则忽略第一个之后的标记。

此pragma与同名的HTTPContent-Language标头几乎完全不同。 [HTTP]

编码声明状态 (http-equiv="content-type")

The 编码声明状态 只是设置 charset 属性的另一种形式:它是一个 字符编码声明。此状态的用户代理要求全部由规范的解析部分处理。

对于 meta 元素,其 http-equiv 属性处于 编码声明状态,其 content attribute must have a value that is an ASCII case-insensitive match for a string that consists of: "text/html;”,后面可以跟任意数量的 ASCII空白,然后是“charset=utf-8”。

一个文档不得同时包含 meta 元素,其 http-equiv 属性处于 编码声明状态 and a meta element with the charset attribute present.

The 编码声明状态 可以在 HTML文档中使用,但在 http-equiv 属性处于该状态的元素不得在 XML文档中使用。

默认样式状态 (http-equiv="default-style")

替代样式表

仅在一个引擎中支持。

Firefox3+Safari?Chrome1–48
OperaYesEdgeNo
Edge (旧版)?Internet Explorer8+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

此pragma设置默认 CSS样式表集名称

  1. 如果 meta 元素没有 content 属性,或该属性的值为空字符串,则返回。

  2. 更改首选CSS样式表集名称 ,名称为元素的 content 属性的值。 [CSSOM]

刷新状态 (http-equiv="refresh")

此pragma充当定时重定向。

一个 Document 对象具有一个关联的 将声明性刷新 (一个布尔值)。最初为false。

  1. 如果 meta 元素没有 content 属性,或该属性的值为空字符串,则返回。

  2. input 为元素的 content 属性的值。

  3. Run the shared declarative refresh steps with the meta 元素的 节点文档inputmeta element.

The shared declarative refresh steps, given a Document 对象 document、字符串 input和可选的 meta 元素 meta, are as follows:

  1. 如果 document将声明性刷新 为true,则返回。

  2. position point at the first code point of input.

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

  4. time 为0。

  5. 收集一系列代码点 that are ASCII digits from input 中、从位置 position, and let timeString

  6. 如果 timeString 为空字符串,则:

    1. If the code point in inputposition is not U+002E (.), then return.

  7. 否则,将 time to the result of parsing timeString using the 解析非负整数的规则.

  8. 收集一系列码点 ,这些码点是 ASCII数字 和U+002E全停止字符(.)从 input 中给定 position。忽略任何收集到的字符。

  9. urlRecorddocumentURL

  10. 如果 position 不在 input的末尾,则:

    1. If the code point in inputposition is not U+003B (;), U+002C (,), or ASCII空白,则返回。

    2. 跳过ASCII空白input 中给定 position

    3. If the code point in inputposition is U+003B (;) or U+002C (,), then advance position 前进到下一个 码点

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

  11. 如果 position 不在 input的末尾,则:

    1. urlStringinput from the code point at position to the end of the string.

    2. If the code point in inputposition is U+0055 (U) or U+0075 (u), then advance position 前进到下一个 码点。否则,跳到标签为 skip quotes的步骤。

    3. If the code point in inputposition is U+0052 (R) or U+0072 (r), then advance position 前进到下一个 码点。否则,跳到标签为 parse的步骤。

    4. If the code point in inputposition is U+004C (L) or U+006C (l), then advance position 前进到下一个 码点。否则,跳到标签为 parse的步骤。

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

    6. If the code point in inputposition is U+003D (=), then advance position 前进到下一个 码点。否则,跳到标签为 parse的步骤。

    7. 跳过ASCII空白input 中给定 position

    8. 跳过引号: If the code point in inputposition is U+0027 (') or U+0022 ("), then let quote 为该 码点,并将 position 前进到下一个 码点。否则,令 quote 为空字符串。

    9. urlString 设置为 input from the code point at position to the end of the string.

    10. 如果 quote is not the empty string, and there is a code point in urlString equal to urlString, then truncate quote ,则在该 码点, so that it and all subsequent 码点 移除。

    11. 解析:将 urlRecord 设置为 编码解析URL 的结果给定 urlString,相对于 document

    12. 如果 urlRecord 失败,则返回。

    13. 如果 urlRecordscheme(方案) 是 "javascript",则返回。

  12. document将声明性刷新 设置为true。

  13. 执行以下一个或多个步骤:

    • 在刷新到期后(定义如下),如果用户未取消重定向,并且如果给定 metadocument活动沙箱标志集 没有 沙箱自动功能浏览上下文标志 设置,则 导航 document节点可导航urlRecord 使用 document历史处理 设置为"replace"。

      为了上段的目的,刷新被认为是到期的,只要以下两个条件中的 较晚 一个发生:

      • 至少 time 秒已经过去了自 document完全加载时间,调整以考虑用户或用户代理偏好。
      • 如果给定 meta ,至少 time 秒已经过去了自 meta was 插入到文档 document,调整以考虑用户或用户代理偏好。

      此处使用 document 非常重要,而不是 meta节点文档,因为在初始步骤和刷新到期之间可能已更改,并且 meta 并不总是给定(在HTTPRefresh标头的情况下)。

    • 向用户提供一个界面,当选择时, 导航 document节点可导航urlRecord 使用 document

    • 什么都不做。

    此外,用户代理可以像任何操作一样,通知用户其操作的任何和所有方面,包括定时器的状态、任何定时重定向的目的地等。

对于 meta 元素,其 http-equiv 属性处于 刷新状态,其 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更紧密地遵循规范。

对于 meta 元素,其 http-equiv 属性处于 X-UA-Compatible 状态,其 content attribute must have a value that is an ASCII case-insensitive match for the string "IE=edge" ASCII不区分大小写的匹配。

用户代理必须忽略此pragma。

内容安全策略状态 (http-equiv="content-security-policy")

此pragma 强制执行 a 内容安全策略 在一个 Document上。 [CSP]

  1. 如果 meta 元素不是 head 元素的子元素,则返回。

  2. 如果 meta 元素没有 content 属性,或该属性的值为空字符串,则返回。

  3. policy 为执行内容安全策略的 解析序列化内容安全策略 算法的结果,针对 meta 元素的 content 属性的值,来源为"meta",并且处置为"enforce"。

  4. Remove all occurrences of the report-uriframe-ancestorssandbox 指令 from policy.

  5. 强制执行策略 policy

For meta elements with an http-equiv attribute in the Content security policy state, the content attribute must have a value consisting of a valid Content Security Policy, but must not contain any report-uri, frame-ancestors, or sandbox directives. The Content Security Policy given in the content attribute will be enforced 于当前文档。[ CSP

在将 meta element to the document, it is possible that some resources have already been fetched. For example, images might be stored in the http-equiv prior to dynamically inserting a meta element with an http-equiv attribute in the Content security policy state中。已经获取的资源不保证被 内容安全策略 阻止,这些策略 被强制执行 得较晚。

一个页面可能选择通过阻止内联JavaScript的执行以及阻止所有插件内容来降低跨站点脚本攻击的风险,使用如下策略:

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'">

文档中同一时间不应有多个 meta 元素处于任何特定状态。

4.2.5.4 指定文档的字符编码

A 字符编码声明 是一种用于指定存储或传输文档时所使用的 字符编码 的机制。

编码标准要求使用 UTF-8 字符编码 ,并要求使用“utf-8编码标签 来标识它。这些要求使得文档的 字符编码声明, if it exists, specifies an encoding label using an ASCII case-insensitive match for "utf-8". Regardless of whether a 字符编码声明 ,用于编码文档的实际 字符编码 必须是 UTF-8[ENCODING]

为了执行上述规则,创作工具必须默认使用 UTF-8 来创建新文档。

以下限制也适用:

此外,由于 meta 元素上的一些限制,每个文档只能有一个基于 meta的字符编码声明。

如果一个 HTML文档 没有以BOM开始,且其 编码 没有被 内容类型元数据显式给出,且该文档不是 an iframe srcdoc document, then the encoding must be specified using a meta element with a charset 属性的 meta 元素或带有 http-equiv attribute in the meta.

字符编码声明是必需的(无论是在 内容类型元数据 中还是在文件中显式声明),即使所有字符都在ASCII范围内,因为处理用户在表单中输入的非ASCII字符、脚本生成的URL等时需要字符编码。

使用非UTF-8编码在表单提交和URL编码上可能会产生意外结果,这些默认使用 文档的字符编码

如果文档是 an iframe srcdoc document,则文档不得有 字符编码声明。(在这种情况下,源代码已经解码,因为它是包含 iframe的文档的一部分。)

在XML中,如果需要内联字符编码信息,应使用XML声明。

在HTML中,要声明字符编码为 UTF-8,作者可以在文档顶部附近(在 head 元素中)包含以下标记:

<meta charset="utf-8">

在XML中,应该使用XML声明,位于标记的最顶部:

<?xml version="1.0" encoding="utf-8"?>

4.2.6 The 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

Support in all current engines.

火狐1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer5.5+
火狐 Android?Safari iOS?Chrome Android?WebView Android?三星浏览器 Android?Opera Android12.1+
类别
元数据内容
此元素可用于的上下文
在期望 元数据内容 的地方。
In a noscript element that is a child of a head element.
内容模型
文本 ,提供 符合标准的样式表
在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;

The 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+

The disabled 获取器步骤如下:

  1. 如果 this 没有 关联的CSS样式表,则返回false。

  2. 如果 this关联的CSS样式表禁用标志 已设置,则返回true。

  3. 返回false。

The disabled 设置器步骤如下:

  1. 如果 this 没有 关联的CSS样式表,则返回。

  2. 如果给定的值为true,则设置 this关联的CSS样式表禁用标志。否则,取消设置 this关联的CSS样式表禁用标志

Importantly, disabled attribute assignments only take effect when the style 元素具有 关联的CSS样式表:

const style = document.createElement('style');
style.disabled = true;
style.textContent = 'body { background-color: red; }';
document.body.append(style);
console.log(style.disabled); // false

The media 属性指示样式适用于哪些媒体。值必须是 有效的媒体查询列表。用户代理必须在 media 属性的值 与环境匹配 且其他相关条件适用时应用样式,否则不得应用。

样式可能在范围内进一步受限,例如在CSS中使用 @media 块。本规范不覆盖此类进一步的限制或要求。

默认情况下,如果省略 media 属性,则为"all",即默认样式适用于所有媒体。

The blocking 属性是一个 阻碍属性

Alternative_style_sheets

仅在一个引擎中支持。

Firefox3+Safari?Chrome1–48
OperaYesEdgeNo
Edge (旧版)?Internet Explorer8+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The title 属性在 style 元素上定义了 CSS样式表集。如果 style 元素没有 title 属性,则它没有标题;祖先的 title 属性不适用于 style 元素。如果 style 元素不在 文档树中,则忽略 title 属性。 [CSSOM]

The title 属性在 style 元素上,与 title 属性在 link 元素上不同,全局 title 属性不适用于没有标题的 style 块:它只是没有标题。

The child text content of a style element must be that of a 符合标准的样式表

A style element is implicitly potentially render-blocking if the element was created by its 节点文档's parser.


用户代理必须在发生以下任何情况时运行 更新 style 算法:

The 更新 style 算法如下:

  1. element 成为 style 元素。

  2. 如果 element关联的CSS样式表,则 移除CSS样式表

  3. 如果 element 不是 连接状态,则返回。

  4. 如果 elementtype attribute is present and its value is neither the empty string nor an ASCII case-insensitive match for "text/css", then return.

    特别是,具有参数的 type 值,如"text/css; charset=utf-8",将导致此算法提前返回。

  5. 如果 内容安全策略应阻止元素的内联行为吗? algorithm returns "Blocked" when executed upon the style 元素、"style"和 style 元素的 子文本内容, then return. [CSP]

  6. 创建一个CSS样式表 ,具有以下属性:

    类型

    text/css

    所有者节点

    element

    媒体

    The media attribute of element.

    这是对(可能在此时不存在的)属性的引用,而不是属性当前值的副本。 CSSOM 定义了当属性被动态设置、更改或删除时会发生什么。

    标题

    The title attribute of element, if element is title, or the empty string otherwise.

    Again, this is a reference to the attribute.

    替代标志

    未设置。

    源干净标志

    已设置。

    位置
    父CSS样式表
    所有者CSS规则

    null

    禁用标志

    保持默认值。

    CSS规则

    保持未初始化状态。

    这似乎不正确。大概我们应该使用元素的 子文本内容?作为 问题#2997进行跟踪。

  7. 如果 element 贡献了阻止脚本的样式表, append element to its 节点文档阻止脚本样式表集中。

  8. 如果 elementmedia 属性的值 与环境匹配 ,且 element is 可能阻碍渲染,则 阻碍渲染 on element.

一旦尝试获取样式表的 关键子资源(如果有)完成,或者,如果样式表没有 关键子资源,则一旦样式表已解析和处理,用户代理必须运行这些步骤:

获取 关键子资源 未明确定义;可能 问题#968 是对此的最佳解决方案。同时,任何 关键子资源 请求 should have its render-blocking set to whether or not the style 元素是否 阻碍渲染.

  1. element 成为 style 元素,与样式表关联。

  2. success 为true。

  3. 如果获取样式表的任何 关键子资源 的尝试因任何原因(例如,DNS错误、HTTP 404响应、连接过早关闭、不支持的Content-Type)失败,则将 success 设置为false。

    请注意,内容特定的错误,例如CSS解析错误或PNG解码错误,不会影响 success

  4. 将一个元素任务排队 ,在 网络任务源 上,给定 element 和以下步骤:

    1. 如果 success 为true,则 触发 名为 load 的事件,目标是 element

    2. 否则, 触发 名为 error 的事件,目标是 element

    3. 如果 element 贡献了阻止脚本的样式表

      1. 断言element节点文档阻止脚本样式表集 包含 element

      2. 从列表中移除 element ,从其 节点文档阻止脚本样式表集

    4. 解除渲染阻塞 on element.

该元素必须 延迟加载事件 of the element's node document until all the attempts to obtain the style sheet's 关键子资源(如果有)完成。

本规范未指定样式系统,但大多数网页浏览器预计会支持CSS。 [CSS]

The 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 样式和脚本的交互

If the style sheet referenced no other resources (e.g., it was an internal style sheet given by a style element with no @import rules), then the style rules must be 立即 提供给脚本;否则,样式规则必须在 事件循环 到达其 更新渲染 步骤时才提供给脚本。

An element el in the context of a Document of an HTML parser or XML parser 贡献了阻止脚本的样式表

预计上述规则的对应规则也适用于 <?xml-stylesheet?> 处理指令。但是,这尚未彻底调查。

A Document 有一个 阻止脚本的样式表集,这是一个 有序集,最初为空。

如果以下步骤返回true,则 Document document 有一个阻止脚本的样式表

  1. 如果 document阻止脚本的样式表集为空,则返回true。

  2. 如果 document节点可导航对象 为null,则返回false。

  3. containerDocumentdocument节点可导航对象容器文档

  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 The body 元素

Element/body

所有当前引擎支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLBodyElement

所有当前引擎支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer4+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
分类:
无。
该元素可用的上下文:
作为 html 元素中的第二个元素。
内容模型:
流内容
在 text/html 中标签的省略:
如果元素为空,或者 body 元素内的第一个内容不是 start tag ,则可以省略 body element is not ASCII whitespace or a comment, except if the first thing inside the body 元素内的第一个内容是 metanoscriptlinkscriptstyletemplate 元素。
如果 body 元素后面不是紧跟一个 注释 ,则可以省略 body element is not immediately followed by a comment.
内容属性:
全局属性
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;

The body 元素 代表 文档的内容。

在符合规范的文档中,只有一个 body 元素。 document.body IDL 属性为脚本提供了访问文档的 body 元素的便捷方法。

一些 DOM 操作(例如, 拖放 模型的某些部分)是根据“body 元素”定义的。这指的是 DOM 中的特定元素,而不是任意的 body 元素。

The body 元素将 事件处理程序内容属性 作为多个 事件处理程序 of the Window object. It also mirrors their 事件处理程序 IDL 属性

The event handlers of the Window object named by the Window-反射 body 元素事件处理程序集中命名的,由 body 元素公开,替换了普通 事件处理程序 的相同名称,通常由 HTML 元素支持。

因此,例如,在一个 error 事件冒泡到 body 元素 of a Document would first trigger the onerror 事件处理程序内容属性 ,然后触发根 html element, and only then would it trigger the onerror 事件处理程序内容属性body 元素上。这是因为事件会从目标冒泡到 body,再到 html,再到 Document,再到 Window,并且 事件处理程序body 上是监视 Window 而不是 body。然而,附加到 body 的常规事件监听器使用 addEventListener(),会在事件通过 body 冒泡时运行,而不是在它到达 Window 对象时运行。

此页面更新指示器以显示用户是否在线:

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>Online or offline?</title>
  <script>
   function update(online) {
     document.getElementById('status').textContent =
       online ? 'Online' : 'Offline';
   }
  </script>
 </head>
 <body ononline="update(true)"
       onoffline="update(false)"
       onload="update(navigator.onLine)">
  <p>You are: <span id="status">(Unknown)</span></p>
 </body>
</html>

4.3.2 The article 元素

元素/article

在所有当前引擎中支持。

Firefox4+Safari5+Chrome5+
Opera11.1+Edge79+
Edge(遗留版)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+
类别:
流内容.
分区内容.
可触及内容.
该元素可以使用的上下文:
分区内容 的地方。
内容模型:
流内容.
文本/html中的标签省略:
没有标签可以省略。
内容属性:
全局属性
无障碍考虑:
对于作者.
对于实现者.
净化
默认
DOM 接口:
使用 HTMLElement.

The article 元素 表示 文档、页面、应用程序或网站中的一个完整或自包含的组成部分,并且原则上可以独立分发或重用,例如,在联合发布中。这可以是论坛帖子、杂志或报纸文章、博客条目、用户提交的评论、互动小部件或设备,或任何其他独立的内容项。

article 元素嵌套时,内部的 article 元素表示与外部文章内容相关的文章。例如,一个允许用户提交评论的网站上的博客条目可以将评论表示为在该博客条目的 article 元素内嵌套的 article 元素。

article 元素关联的作者信息(见 address 元素)不适用于嵌套的 article 元素。

当特定用于要在联合发布中重新分发的内容时, article 元素的用途类似于 Atom 中的 entry 元素。 [ATOM]

可以使用 schema.org 微数据词汇提供 article 元素的出版日期,使用 CreativeWork 子类型之一。

当页面的主要内容(即不包括页脚、页眉、导航块和侧边栏)完全是一个自包含的组成部分时,可以使用 article标记这些内容,但在这种情况下,它在技术上是多余的(因为页面本身就是一个单一的文档,很明显它是一个单一的组成部分)。

此示例展示了一个使用 article 元素的博客帖子,并附有一些 schema.org 注释:

<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h2 itemprop="headline">The Very First Rule of Life</h2>
  <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <footer>
  <a itemprop="discussionUrl" href="?comments=1">Show comments...</a>
 </footer>
</article>

这是同一个博客帖子,但显示了一些评论:

<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h2 itemprop="headline">The Very First Rule of Life</h2>
  <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <section>
  <h1>Comments</h1>
  <article itemprop="comment" itemscope itemtype="http://schema.org/Comment" id="c1">
   <link itemprop="url" href="#c1">
   <footer>
    <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">George Washington</span>
    </span></p>
    <p><time itemprop="dateCreated" datetime="2009-10-10">15 minutes ago</time></p>
   </footer>
   <p>Yeah! Especially when talking about your lobbyist friends!</p>
  </article>
  <article itemprop="comment" itemscope itemtype="http://schema.org/Comment" id="c2">
   <link itemprop="url" href="#c2">
   <footer>
    <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">George Hammond</span>
    </span></p>
    <p><time itemprop="dateCreated" datetime="2009-10-10">5 minutes ago</time></p>
   </footer>
   <p>Hey, you have the same first name as me.</p>
  </article>
 </section>
</article>

注意使用了 footer 来提供每条评论的信息(例如,谁写的以及何时写的): footer 元素 可以 在其部分的开头出现,当情况合适时,例如在这种情况下。(在这种情况下使用 header 也不会错误;这主要是作者的个人偏好问题。)

在这个示例中, article 元素用于在门户页面上托管小部件。这些小部件被实现为 自定义内置元素 ,以获得特定的样式和脚本行为。

<!DOCTYPE HTML>
<html lang=en>
<title>eHome Portal</title>
<script src="/scripts/widgets.js"></script>
<link rel=stylesheet href="/styles/main.css">
<article is="stock-widget">
 <h2>Stocks</h2>
 <table>
  <thead> <tr> <th> Stock <th> Value <th> Delta
  <tbody> <template> <tr> <td> <td> <td> </template>
 </table>
 <p> <input type=button value="Refresh" onclick="this.parentElement.refresh()">
</article>
<article is="news-widget">
 <h2>News</h2>
 <ul>
  <template>
   <li>
    <p><img> <strong></strong>
    <p>
  </template>
 </ul>
 <p> <input type=button value="Refresh" onclick="this.parentElement.refresh()">
</article>

4.3.3 The section element

Element/section

所有当前浏览器均支持。

Firefox4+Safari5+Chrome5+
Opera11.1+Edge79+
Edge (旧版)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11.1+
类别:
流内容.
分区内容.
可感知内容.
可用上下文:
期望有 分区内容 的地方。
内容模型:
流内容.
文本/HTML中的标签省略:
没有标签是可以省略的。
内容属性:
全局属性
无障碍考虑:
针对作者.
针对实现者.
净化
默认
DOM接口:
使用 HTMLElement.

The section 元素 表示 文档或应用程序中的一个通用部分。在这种上下文中,一个部分是内容的主题分组,通常带有标题。

部分的示例包括章节、选项卡对话框中的各个选项卡页面,或论文的编号部分。一个网站的主页可以分成几个部分,如介绍、新闻项目和联系信息。

建议作者在可能进行内容转载的情况下使用 article 元素,而不是 section 元素。

The 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 The nav element

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.

The 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 The aside element

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.

The 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>

The following example shows how an aside is used to mark up a pull quote in a longer article.

...

<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 The h1, h2, h3, h4, h5, and h6 elements

元素/标题元素

支持所有当前的浏览器引擎。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (遗留版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

元素/标题元素

支持所有当前的浏览器引擎。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (遗留版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

元素/标题元素

支持所有当前的浏览器引擎。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (遗留版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

元素/标题元素

支持所有当前的浏览器引擎。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (遗留版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

元素/标题元素

支持所有当前的浏览器引擎。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (遗留版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

元素/标题元素

支持所有当前的浏览器引擎。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (遗留版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLHeadingElement

支持所有当前的浏览器引擎。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (遗留版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
流内容
标题内容
可感知内容
可以使用该元素的上下文:
作为 hgroup 元素的子元素。
标题内容 预期的位置。
内容模型:
短语内容
文本/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 The 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 元素,接着一个 h1h2h3h4h5h6 元素,之后跟零个或多个 p 元素,可能夹杂有 脚本支持元素
在 text/html 中的标签省略:
两个标签都不可省略。
内容属性:
全局属性
可访问性考虑:
供作者参考.
供实施者参考.
净化
默认
DOM 接口:
使用 HTMLElement.

The hgroup 元素 表示 一个标题和相关内容。该元素可用于将一个或多个 h1h6 元素与一个或多个包含子标题、替代标题或标语内容的 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 The 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+
类别:
流内容.
可感知内容.
此元素可以使用的上下文:
在期望有 流内容 的地方。
内容模型:
流内容,但没有 headerfooter 元素的后代。
在 text/html 中的标签省略:
没有标签可以省略。
内容属性:
全局属性
可访问性考虑:
如果存在祖先 分区内容 元素: 供作者参考; 供实现者参考.
否则: 供作者参考; 供实现者参考.
净化
默认
DOM 接口:
使用 HTMLElement.

The header 元素 表示 一组介绍性或导航辅助工具。

A header 元素通常旨在包含一个标题( h1h6 元素或 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>

The header element is not 分节内容;它不会引入一个新节。

In this example, the page has a page heading given by the h1 element, and two subsections whose headings are given by h2 elements. The content after the header element is still part of the last subsection started in the header element, because the header element doesn't take part in the 大纲 算法。

<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+
类别:
流内容
可触及内容
可以使用此元素的上下文:
在预期出现 流内容 的地方。
内容模型:
流内容,但没有 headerfooter 元素的后代。
在 text/html 中的标签省略:
两个标签都不能省略。
内容属性:
全局属性
可访问性考虑:
如果有祖先 分区内容 元素: 供作者参考; 供实现者参考
否则: 供作者参考; 供实现者参考
净化
默认
DOM 接口:
使用 HTMLElement

The footer 元素 表示 它最近的祖先 分区内容 元素的页脚,或者如果没有这样的祖先,则为 主体元素 。页脚通常包含有关其部分的信息,如撰写者、相关文档的链接、版权数据等。

footer 元素包含整个部分时,它们 表示 附录、索引、长篇后记、详细的许可协议以及其他类似内容。

部分的作者或编辑的联系信息应放在 address 元素中,该元素可能位于一个 footer元素内部。署名和其他可能适合于 headerfooter 的信息可以放在任意一个(或都不放)。这些元素的主要目的是帮助作者编写自解释的标记,易于维护和样式化;它们并不打算对作者强加特定的结构。

页脚不一定非得出现在部分的 末尾 ,尽管通常会这样。

当没有祖先 sectioning content 元素时,它适用于整个页面。

The footer 元素本身不是 sectioning content;它不会引入一个新部分。

这是一个页面,上面和下面都有两个 footer,内容相同:

<body>
 <footer><a href="../">Back to index...</a></footer>
 <hgroup>
  <h1>Lorem ipsum</h1>
  <p>The ipsum of all lorems</p>
 </hgroup>
 <p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
 ea commodo consequat. Duis aute irure dolor in reprehenderit in
 voluptate velit esse cillum dolore eu fugiat nulla
 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
 culpa qui officia deserunt mollit anim id est laborum.</p>
 <footer><a href="../">Back to index...</a></footer>
</body>

这是一个示例,展示了 footer 元素同时用于站点范围的页脚和部分页脚的用法。

<!DOCTYPE HTML>
<HTML LANG="en"><HEAD>
<TITLE>The Ramblings of a Scientist</TITLE>
<BODY>
<H1>The Ramblings of a Scientist</H1>
<ARTICLE>
 <H1>Episode 15</H1>
 <VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD>
  <P><A HREF="/fm/015.ogv">Download video</A>.</P>
 </VIDEO>
 <FOOTER> <!-- footer for article -->
  <P>Published <TIME DATETIME="2009-10-21T18:26-07:00">on 2009/10/21 at 6:26pm</TIME></P>
 </FOOTER>
</ARTICLE>
<ARTICLE>
 <H1>My Favorite Trains</H1>
 <P>I love my trains. My favorite train of all time is a Köf.</P>
 <P>It is fun to see them pull some coal cars because they look so
 dwarfed in comparison.</P>
 <FOOTER> <!-- footer for article -->
  <P>Published <TIME DATETIME="2009-09-15T14:54-07:00">on 2009/09/15 at 2:54pm</TIME></P>
 </FOOTER>
</ARTICLE>
<FOOTER> <!-- site wide footer -->
 <NAV>
  <P><A HREF="/credits.html">Credits</A><A HREF="/tos.html">Terms of Service</A><A HREF="/index.html">Blog Index</A></P>
 </NAV>
 <P>Copyright © 2009 Gordon Freeman</P>
</FOOTER>
</BODY>
</HTML>

一些网站设计有时被称为“肥大页脚”——包含大量内容的页脚,包括图片、指向其他文章的链接、反馈页面的链接、特别优惠……在某种程度上,页脚就像是整个“首页”。

这个片段展示了一个网站页面底部的“肥大页脚”:

...
 <footer>
  <nav>
   <section>
    <h1>Articles</h1>
    <p><img src="images/somersaults.jpeg" alt=""> Go to the gym with
    our somersaults class! Our teacher Jim takes you through the paces
    in this two-part article. <a href="articles/somersaults/1">Part
    1</a> · <a href="articles/somersaults/2">Part 2</a></p>
    <p><img src="images/kindplus.jpeg"> Tired of walking on the edge of
    a clif<!-- sic -->? Our guest writer Lara shows you how to bumble
    your way through the bars. <a href="articles/kindplus/1">Read
    more...</a></p>
    <p><img src="images/crisps.jpeg"> The chips are down, now all
    that's left is a potato. What can you do with it? <a
    href="articles/crisps/1">Read more...</a></p>
   </section>
   <ul>
    <li> <a href="/about">About us...</a>
    <li> <a href="/feedback">Send feedback!</a>
    <li> <a href="/sitemap">Sitemap</a>
   </ul>
  </nav>
  <p><small>Copyright © 2015 The Snacker —
  <a href="/tos">Terms of Service</a></small></p>
 </footer>
</body>

4.3.10 The address element

元素/address

所有当前浏览器都支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别:
流内容
可触及内容
可以使用此元素的上下文:
在期望有 流内容 的地方。
内容模型:
流内容,但没有 标题内容 后代,没有 分节内容 后代,并且没有 headerfooteraddress 元素的后代。
在 text/html 中的标签省略:
标签不可省略。
内容属性:
全局属性
可访问性考虑:
给作者
给实现者
净化
默认
DOM 接口:
使用 HTMLElement

The address 元素 表示 其最近的 articlebody 元素祖先的联系信息。如果该祖先是 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>

The address 元素不能用于表示任意地址(例如邮政地址),除非这些地址确实是相关的联系信息。( p 元素是标记邮政地址的合适元素。)

The address 元素不得包含除联系信息以外的其他信息。

例如,以下是 address 元素的非规范用法:

<ADDRESS>Last Modified: 1999/12/24 23:37:50</ADDRESS>

通常, address 元素会与其他信息一起包含在 footer 元素中。

节点 node 的联系信息是由以下列表中第一个适用条目定义的 address 元素的集合:

如果 nodearticle 元素
如果 nodebody 元素

The contact information consists of all the address elements that have node as an ancestor and do not have another bodyarticle 元素祖先是 node的后代。

如果 node 有一个祖先元素是 article 元素
如果 node 有一个祖先元素是 body 元素

The contact information of node 的联系信息与最近的 articlebody 元素祖先的联系信息相同,以最近者为准。

如果 node节点文档一个 body 元素

The contact information of node is the same as the contact information of the body element of the Document.

否则

There is no contact information for 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 标题和大纲

h1h6 元素具有 标题级别,其通过 获取元素的计算标题级别来确定。

这些元素 表示 标题。标题的 标题级别's heading level is, the fewer ancestor sections the heading has.

The 大纲 是文档中的所有 标题 ,按 树状顺序排列。

The 大纲 应用于生成文档大纲,例如生成目录时。当创建交互式目录时,条目应跳转到相关的 标题

如果文档中有一个或多个 标题, at least a single heading within the 大纲 中至少应有一个 标题 具有标题级别 1。

每个跟随另一个 标题 following another heading lead大纲 must have a heading level that is less than, equal to, or 1 greater than 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 标题级别与偏移量

The headingoffset 内容属性允许作者为其后代标题级别进行偏移。

如果指定了 headingoffset 属性,则其值必须是 0 到 8(含)之间的 有效非负整数

The 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. inclusiveAncestorelement

  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

此示例展示了 headingoffsetheadingreset, 以及 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>.

渲染后的 大纲 可能如下所示:

Top-level section with the heading "HTML: Living Standard" and two subsections; "Table of contents" and "First section".

首先,这里是一个文档,内容是一本章节非常短且包含子章节的书:

<!DOCTYPE HTML>
<html lang=en>
<title>The Tax Book (all in one page)</title>
<h1>The Tax Book</h1>
<h2>Earning money</h2>
<p>Earning money is good.</p>
<h3>Getting a job</h3>
<p>To earn money you typically need a job.</p>
<h2>Spending money</h2>
<p>Spending is what money is mainly used for.</p>
<h3>Cheap things</h3>
<p>Buying cheap things often not cost-effective.</p>
<h3>Expensive things</h3>
<p>The most expensive thing is often not the most cost-effective either.</p>
<h2>Investing money</h2>
<p>You can lend your money to other people.</p>
<h2>Losing money</h2>
<p>If you spend money or invest money, sooner or later you will lose money.
<h3>Poor judgement</h3>
<p>Usually if you lose money it's because you made a mistake.</p>

它的 大纲 可以如下所示:

  1. The Tax Book
    1. Earning money
      1. Getting a job
    2. Spending money
      1. Cheap things
      2. Expensive things
    3. Investing money
    4. Losing money
      1. Poor judgement

注意到, title 元素不是 标题

一个文档可以包含多个顶级标题:

<!DOCTYPE HTML>
<html lang=en>
<title>Alphabetic Fruit</title>
<h1>Apples</h1>
<p>Pomaceous.</p>
<h1>Bananas</h1>
<p>Edible.</p>
<h1>Carambola</h1>
<p>Star.</p>

文档的 大纲 可以呈现如下:

  1. Apples
  2. Bananas
  3. Carambola

header 元素不会影响文档的 大纲

<!DOCTYPE HTML>
<html lang="en">
<title>We're adopting a child! — Ray's blog</title>
<h1>Ray's blog</h1>
<article>
 <header>
  <nav>
   <a href="?t=-1d">Yesterday</a>;
   <a href="?t=-7d">Last week</a>;
   <a href="?t=-1m">Last month</a>
  </nav>
  <h2>We're adopting a child!</h2>
 </header>
 <p>As of today, Janine and I have signed the papers to become
 the proud parents of baby Diane! We've been looking forward to
 this day for weeks.</p>
</article>
</html>

文档的 大纲 可以呈现如下:

  1. Ray's blog
    1. We're adopting a child!

以下示例符合规范,但不推荐使用,因为它没有任何 标题 ,其 标题级别 为1:

<!DOCTYPE HTML>
<html lang=en>
<title>Alphabetic Fruit</title>
<section>
 <h2>Apples</h2>
 <p>Pomaceous.</p>
</section>
<section>
 <h2>Bananas</h2>
 <p>Edible.</p>
</section>
<section>
 <h2>Carambola</h2>
 <p>Star.</p>
</section>

该文档的 大纲 可以如下呈现:

    1. Apples
    2. Bananas
    3. Carambola

以下示例符合规范,但不推荐,因为第一个 标题标题级别 不是1:

<!DOCTYPE HTML>
<html lang=en>
<title>Feathers on The Site of Encyclopedic Knowledge</title>
 <h2>A plea from our caretakers</h2>
 <p>Please, we beg of you, send help! We're stuck in the server room!</p>
<h1>Feathers</h1>
<p>Epidermal growths.</p>

文档的 大纲 可以呈现如下:

    1. A plea from our caretakers
  1. Feathers
4.3.11.2 向用户暴露大纲

鼓励用户代理向用户暴露页面 大纲 ,以帮助导航。这对于非视觉媒体尤其重要,例如屏幕阅读器。

例如,用户代理可以将箭头键映射如下:

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>
h1h6 一个标题
<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 一个标题及相关内容。该元素可用于将一个或多个 h1h6 元素与一个或多个 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 文章还是区块?

本节为非规范性内容。

A section 是其他内容的一部分。 article 是一个独立的内容。但如何区分这两者呢?大多数情况下,真正的答案是“这取决于作者的意图”。

例如,可以想象一本书中有一章关于“格兰尼·史密斯”苹果,只提到“这些多汁的绿色苹果是制作苹果派的绝佳填料”;这将是一个 section ,因为还有很多其他章节(可能)讲述其他种类的苹果。

另一方面,可以想象一条推文或Reddit评论或Tumblr帖子或报纸分类广告只说了“格兰尼·史密斯。这些多汁的绿色苹果是制作苹果派的绝佳填料”;这将是 article,因为这就是全部内容。

对文章的评论不是其所在 article 的一部分,因此它是自己的 article

4.4 内容分组

4.4.1 The p 元素

Element/p

在所有当前引擎中都支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLParagraphElement

在所有当前引擎中都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
流内容
可触及内容
此元素可使用的上下文:
在期望出现 流内容 的地方。
作为 hgroup 元素的子元素。
内容模型:
措辞内容
在 text/html 中的标签省略:
A p 元素的 结束标签 可以省略,如果该 p 元素后面紧跟着一个 addressarticleasideblockquotedetails, dialog, divdlfieldsetfigcaptionfigurefooterformh1h2h3h4h5h6headerhgrouphrmainmenunavolppresearchsectiontable,或 ul 元素,或者如果父元素没有更多内容且父元素是一个 HTML 元素 (不是 aaudiodelinsmapnoscript,或 video 元素,或一个 自主自定义元素
内容属性:
全局属性
可访问性考虑:
对于作者
对于实现者
净化
默认
DOM 接口:
[Exposed=Window]
interface HTMLParagraphElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

The 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>

The 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>

列表元素(特别是 olul 元素)不能作为 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 The hr element

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();

  // also has obsolete members
};

The hr 元素 表示 一个 段落级别的主题分隔线,例如故事中的场景变换,或参考书中某部分主题的过渡;或者,它表示一个 select 元素中的选项集之间的分隔符。

以下是一个项目手册的虚构摘录,展示了两个使用 hr 元素来分隔部分中的主题的部分。

<section>
 <h1>Communication</h1>
 <p>There are various methods of communication. This section
 covers a few of the important ones used by the project.</p>
 <hr>
 <p>Communication stones seem to come in pairs and have mysterious
 properties:</p>
 <ul>
  <li>They can transfer thoughts in two directions once activated
  if used alone.</li>
  <li>If used with another device, they can transfer one's
  consciousness to another body.</li>
  <li>If both stones are used with another device, the
  consciousnesses switch bodies.</li>
 </ul>
 <hr>
 <p>Radios use the electromagnetic spectrum in the meter range and
 longer.</p>
 <hr>
 <p>Signal flares use the electromagnetic spectrum in the
 nanometer range.</p>
</section>
<section>
 <h1>Food</h1>
 <p>All food at the project is rationed:</p>
 <dl>
  <dt>Potatoes</dt>
  <dd>Two per day</dd>
  <dt>Soup</dt>
  <dd>One bowl per day</dd>
 </dl>
 <hr>
 <p>Cooking is done by the chefs on a set rotation.</p>
</section>

在部分之间不需要使用 hr 元素,因为 section 元素和 h1 元素本身就暗示了主题的变化。

The following extract from Pandora's Star by Peter F. Hamilton shows two paragraphs that precede a scene change and the paragraph that follows it. The scene change, represented in the printed book by a gap containing a solitary centered star between the second and third paragraphs, is here represented using the hr 元素来表示。

<p>Dudley was ninety-two, in his second life, and fast approaching
time for another rejuvenation. Despite his body having the physical
age of a standard fifty-year-old, the prospect of a long degrading
campaign within academia was one he regarded with dread. For a
supposedly advanced civilization, the Intersolar Commonwealth could be
appallingly backward at times, not to mention cruel.</p>
<p><i>Maybe it won't be that bad</i>, he told himself. The lie was
comforting enough to get him through the rest of the night's
shift.</p>
<hr>
<p>The Carlton AllLander drove Dudley home just after dawn. Like the
astronomer, the vehicle was old and worn, but perfectly capable of
doing its job. It had a cheap diesel engine, common enough on a
semi-frontier world like Gralmond, although its drive array was a
thoroughly modern photoneural processor. With its high suspension and
deep-tread tyres it could plough along the dirt track to the
observatory in all weather and seasons, including the metre-deep snow
of Gralmond's winters.</p>

` hr ` 元素不会影响文档的 大纲

4.4.3 The pre element

Element/pre

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLPreElement

所有当前引擎均支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer6+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
流内容.
可感知内容.
可以使用此元素的上下文:
期望出现 流内容 的地方。
内容模型:
短语内容.
在 text/html 中的标签省略:
没有标签可以省略。
内容属性:
全局属性
无障碍考虑:
针对作者.
针对实现者.
净化
默认
DOM 接口:
[Exposed=Window]
interface HTMLPreElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

The pre 元素 表示 一块预格式化文本,其中结构由排版约定而非元素表示。

HTML 语法中,紧跟在 pre 元素起始标签之后的前导换行符会被删除。

一些使用 pre 元素的示例:

建议作者考虑当格式丢失时预格式化文本的体验情况,例如对于语音合成器、盲文显示器等用户。对于像 ASCII 艺术这样的情况,可能更普遍可访问的替代展示方式,例如文本描述,会更适合读者。

要表示一块计算机代码,可以将 pre 元素与 code 元素一起使用;要表示一块计算机输出,可以将 pre 元素与 samp 元素一起使用。类似地, kbd 元素可以在 pre 元素内使用,以指示用户要输入的文本。

此元素 具有涉及双向算法的渲染要求

在以下片段中,展示了一段计算机代码。

<p>This is the <code>Panel</code> constructor:</p>
<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>

在以下片段中, sampkbd 元素混合在一个 pre 元素的内容中,以展示 Zork I 的会话。

<pre><samp>You are in an open field west of a big white house with a boarded
front door.
There is a small mailbox here.

></samp> <kbd>open mailbox</kbd>

<samp>Opening the mailbox reveals:
A leaflet.

></samp></pre>

以下展示了一首现代诗,使用了 pre 元素来保留其独特的格式,这些格式是诗歌本身的固有部分。

<pre>                maxling

it is with a          heart
               heavy

that i admit loss of a feline
        so           loved

a friend lost to the
        unknown
                                (night)

~cdr 11dec07</pre>

4.4.4 The blockquote element

Element/blockquote

支持所有当前的浏览器。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLQuoteElement

支持所有当前的浏览器。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer6+
Firefox Android?Safari iOS1+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+
类别:
流内容
可触及内容
可以使用此元素的上下文:
在期望 流内容 的地方。
内容模型:
流内容
在 text/html 中的标签省略:
两个标签都不可省略。
内容属性:
全局属性
cite — 链接到引用的来源或更多关于编辑的信息
无障碍考虑:
供作者参考
供实施者参考
净化
默认 ,且具有 属性 cite
DOM 接口:
[Exposed=Window]
interface HTMLQuoteElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, ReflectURL] attribute USVString cite;
};

The HTMLQuoteElement 接口也被 q 元素使用。

The blockquote 元素 表示 从 另一个来源引用的一个节。

Content inside a blockquote 内的内容必须 是从另一个来源引用的;该来源的地址,如果 有的话,可以在 cite 属性中引用。

如果存在 cite 属性,则它必须是一个 可能被空格包围的有效 URL. To obtain the corresponding citation link, the value of the attribute must be parsed relative to the element's 节点文档. User agents may allow users to follow such citation links, but they are primarily intended for private use (e.g., by server-side scripts collecting statistics about a site's use of quotations), not for readers.

The content of a blockquote 的内容可以被省略或按照文本语言的传统方式添加上下文。

例如,在英语中,这通常使用方括号来完成。考虑一个页面,其中包含句子“Jane ate the cracker. She then said she liked apples and fish.”;它可以被引用为:

<blockquote>
 <p>[Jane] then said she liked [...] fish.</p>
</blockquote>

如果有的话,引用的归属必须放置在 blockquote 元素之外。

例如,这里归属是在引用之后的段落中给出的:

<blockquote>
 <p>I contend that we are both atheists. I just believe in one fewer
 god than you do. When you understand why you dismiss all the other
 possible gods, you will understand why I dismiss yours.</p>
</blockquote>
<p>— Stephen Roberts</p>

下面的其他示例展示了其他几种表示归属的方式。

这里使用了一个 blockquote 元素与一个 figure 元素及其 figcaption 一起使用,以明确地将引用与其归属关系联系起来(归属不是引用的一部分,因此不应包含在 blockquote 内部):

<figure>
 <blockquote>
  <p>The truth may be puzzling. It may take some work to grapple with.
  It may be counterintuitive. It may contradict deeply held
  prejudices. It may not be consonant with what we desperately want to
  be true. But our preferences do not determine what's true. We have a
  method, and that method helps us to reach not absolute truth, only
  asymptotic approaches to the truth — never there, just closer
  and closer, always finding vast new oceans of undiscovered
  possibilities. Cleverly designed experiments are the key.</p>
 </blockquote>
 <figcaption>Carl Sagan, in "<cite>Wonder and Skepticism</cite>", from
 the <cite>Skeptical Inquirer</cite> Volume 19, Issue 1 (January-February
 1995)</figcaption>
</figure>

下一个示例展示了 citeblockquote一起使用的情况:

<p>His next piece was the aptly named <cite>Sonnet 130</cite>:</p>
<blockquote cite="https://quotes.example.org/s/sonnet130.html">
  <p>My mistress' eyes are nothing like the sun,<br>
  Coral is far more red, than her lips red,<br>
  ...

这个示例展示了一个论坛帖子如何使用 blockquote 来显示用户回复的帖子。每个帖子使用 article 元素来标记线程。

<article>
 <h1><a href="https://bacon.example.com/?blog=109431">Bacon on a crowbar</a></h1>
 <article>
  <header><strong>t3yw</strong> 12 points 1 hour ago</header>
  <p>I bet a narwhal would love that.</p>
  <footer><a href="?pid=29578">permalink</a></footer>
  <article>
   <header><strong>greg</strong> 8 points 1 hour ago</header>
   <blockquote><p>I bet a narwhal would love that.</p></blockquote>
   <p>Dude narwhals don't eat bacon.</p>
   <footer><a href="?pid=29579">permalink</a></footer>
   <article>
    <header><strong>t3yw</strong> 15 points 1 hour ago</header>
    <blockquote>
     <blockquote><p>I bet a narwhal would love that.</p></blockquote>
     <p>Dude narwhals don't eat bacon.</p>
    </blockquote>
    <p>Next thing you'll be saying they don't get capes and wizard
    hats either!</p>
    <footer><a href="?pid=29580">permalink</a></footer>
    <article>
     <article>
      <header><strong>boing</strong> -5 points 1 hour ago</header>
      <p>narwhals are worse than ceiling cat</p>
      <footer><a href="?pid=29581">permalink</a></footer>
     </article>
    </article>
   </article>
  </article>
  <article>
   <header><strong>fred</strong> 1 points 23 minutes ago</header>
   <blockquote><p>I bet a narwhal would love that.</p></blockquote>
   <p>I bet they'd love to peel a banana too.</p>
   <footer><a href="?pid=29582">permalink</a></footer>
  </article>
 </article>
</article>

这个示例展示了如何使用 blockquote for short snippets, demonstrating that one does not have to use p elements inside blockquote elements:

<p>He began his list of "lessons" with the following:</p>
<blockquote>One should never assume that his side of
the issue will be recognized, let alone that it will
be conceded to have merits.</blockquote>
<p>He continued with a number of similar points, ending with:</p>
<blockquote>Finally, one should be prepared for the threat
of breakdown in negotiations at any given moment and not
be cowed by the possibility.</blockquote>
<p>We shall now discuss these points...

如何表示对话的示例 会在后面的章节中展示;不适合使用 citeblockquote 元素来实现这一目的。

4.4.5 The ol element

Element/ol

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLOListElement

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
流内容
如果元素的子元素包括至少一个 li 元素: 可触及内容
此元素可用的上下文:
在期望 流内容 的地方。
内容模型:
零个或多个 li 元素和 支持脚本的 元素。
在 text/html 中的标签省略:
两个标签都不可省略。
内容属性:
全局属性
reversed — 反向编号列表
start — 列表的 起始值 of the list
type — 列表标记的类型
无障碍考虑:
对于作者
对于实现者
净化
默认 ,且具有属性 reversedstarttype
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;

  // also has obsolete members
};

The ol 元素 表示 一系列项目,其中项目经过刻意排序,改变顺序会改变文档的意义。

列表的项目是 li 元素的子节点, ol 元素按 树顺序排列。

Element/ol#attr-reversed

Support in all current engines.

Firefox18+Safari6+Chrome18+
Opera?Edge79+
Edge (旧版)≤79+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The reversed 属性是一个 布尔属性。如果存在,它表示列表是降序的(..., 3, 2, 1)。如果省略该属性,列表是升序的(1, 2, 3, ...)。

The start 属性如果存在,必须是一个 有效整数。它用于确定列表的 起始值

An ol 元素有一个 起始值,它是 按如下方式确定的整数:

  1. 如果 ol 元素有 start 属性:

    1. parsed将 属性值解析为整数的结果。

    2. 如果 parsed 不是错误,则返回 parsed

  2. 如果 ol 元素有 reversed 属性,则返回 拥有的 li 元素数量。

  3. 返回 1。

The type 属性可用于 指定列表中要使用的标记种类,在这有意义的情况下(例如, 因为项要通过其数字/字母被 引用 )。 该属性,如果 指定,必须具有一个与下表某一行第一个单元格中给出的字符之一 相同 的值。 type 属性表示其第一个单元格与该属性值匹配的行中 第二列单元格给出的状态;如果没有任何单元格匹配,或者 如果省略该属性,则该属性表示 decimal 状态。

关键字 状态 描述 值 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. ...

User agents should render the items of the list in a manner consistent with the state of the type attribute of the ol element. Numbers less than or equal to zero should always use the decimal system regardless of the type 属性如何。

对于 CSS 用户代理,此属性到 'list-style-type' CSS 属性的映射在 渲染 一节 中给出(该映射很直接:上述状态与其 对应 CSS 值具有相同的名称)。

可以重新定义 CSS 用户代理中用于实现此 属性的默认 CSS 列表样式;这样做会影响列表项的渲染方式。

由于 [ReflectDefault]start IDL 属性并不 一定匹配列表的 起始值, 这种情况发生在 start 内容 属性被省略而 reversed 内容属性被 指定时。

以下标记展示了一个顺序很重要的列表,因此 ol 元素是合适的。将此列表与 ul 一节中的等价列表进行比较,可看到使用 ul 元素表示相同项的示例。

<p>I have lived in the following countries (given in the order of when
I first lived there):</p>
<ol>
 <li>Switzerland
 <li>United Kingdom
 <li>United States
 <li>Norway
</ol>

注意,更改列表的顺序如何改变文档的含义。在下面的 示例中,更改前两项的相对顺序改变了 作者的出生地:

<p>I have lived in the following countries (given in the order of when
I first lived there):</p>
<ol>
 <li>United Kingdom
 <li>Switzerland
 <li>United States
 <li>Norway
</ol>

4.4.6 The ul 元素

Element/ul

支持所有当前引擎。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLUListElement

支持所有当前引擎。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
流内容
如果元素的子元素包含至少一个 li 元素: 可感知内容
此元素可使用的上下文:
期望 流内容 的地方。
内容模型:
零个或多个 li脚本支持 元素。
在text/html中的标签省略:
两个标签都不可省略。
内容属性:
全局属性
无障碍考虑:
给作者的建议
给实现者的建议
净化
默认
DOM接口:
[Exposed=Window]
interface HTMLUListElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

The ul 元素 表示 一系列项目,这些项目的顺序并不重要——也就是说,改变顺序不会实质性地改变文档的意义。

列表的项目是 li 元素的子节点,属于 ul 元素。

以下标记显示了一个顺序不重要的列表,因此 ul 元素是合适的。将此列表与 ol 部分中的等效列表进行比较,以查看使用 ol 元素的相同项目示例。

<p>I have lived in the following countries:</p>
<ul>
 <li>Norway
 <li>Switzerland
 <li>United Kingdom
 <li>United States
</ul>

请注意,改变列表的顺序不会改变文档的意义。上面的项目按字母顺序排列,但在下面的片段中,它们按2007年当前账户余额的大小排列,而不会改变文档的意义:

<p>I have lived in the following countries:</p>
<ul>
 <li>Switzerland
 <li>Norway
 <li>United Kingdom
 <li>United States
</ul>

4.4.7 The 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();

  // also has obsolete members
};

The menu 元素 表示 一个由其内容组成的工具栏,以无序项目列表的形式(由 li 元素表示),每个项目代表用户可以执行或激活的命令。

The menu 元素只是 ul 的语义替代,用于表示命令的无序列表("工具栏")。

在这个示例中,一个文本编辑应用程序使用 menu 元素提供一系列编辑命令:

<menu>
 <li><button onclick="copy()"><img src="copy.svg" alt="Copy"></button></li>
 <li><button onclick="cut()"><img src="cut.svg" alt="Cut"></button></li>
 <li><button onclick="paste()"><img src="paste.svg" alt="Paste"></button></li>
</menu>

请注意,将其样式化为传统工具栏菜单的样式取决于应用程序。

4.4.8 The 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 element's end tag can be omitted if the li element is immediately followed by another li element or if there is no more content in the parent element.
内容属性:
全局属性
如果该元素不是 ulmenu 元素的子元素: value — 列表项的 序数值 of the list item
可访问性注意事项:
给作者的建议
给实现者的建议
净化
默认 ,且具有属性 value
DOM 接口:
[Exposed=Window]
interface HTMLLIElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute long value;

  // also has obsolete members
};

The li 元素 代表 列表项。如果它的父元素是 olulmenu 元素,那么该元素就是父元素列表中的一项,如这些元素的定义所示。否则,该列表项与任何其他 li 元素没有定义的列表相关关系。

The value 属性(如果存在)必须是 有效整数. It is used to determine the ordinal value of the list item, when the li列表所有者ol element.


任何其 计算值'display' 为 'list-item' 的元素都有一个 列表所有者,其确定方式如下:

  1. 如果该元素没有 被渲染,则返回 null;该元素没有 列表所有者

  2. ancestor 成为该元素的父元素。

  3. 如果该元素有 olulmenu 祖先元素,则将 ancestor 设置为最近的此类祖先元素。

  4. 返回 ancestor 最近的包含祖先元素,该祖先元素生成一个 CSS 框

    这样的元素总是存在的,因为至少 文档元素 总是会生成一个 CSS 框

To determine the ordinal value of each element owned by a given 列表所有者 owner, perform the following steps:

  1. i 为 1。

  2. 如果 ownerol 元素,则将 numbering 设置为 owner起始值。否则,将 numbering 设置为 1。

  3. 循环:如果 i is greater than the number of list items that owner owns的数量,则返回;所有 owner已拥有列表项 已分配 序数值

  4. itemowner的第 i已拥有列表项,按 树顺序

  5. 如果 item is an li element that has a value attribute:

    1. parsed 设置为 解析该属性的值为整数的结果。

    2. 如果 parsed 没有错误,则将 numbering 设置为 parsed

  6. The ordinal value of item is numbering

  7. 如果 ownerol 元素,且 owner 具有 reversed 属性,则将 numbering 减 1;否则,将 numbering 加 1。

  8. i 加 1。

  9. 转到标记为 循环的步骤。


元素的 value IDL 属性并不直接对应于其 序数值;它仅仅 反射 the content attribute. For example, given this list:

<ol>
 <li>Item 1
 <li value="3">Item 3
 <li>Item 4
</ol>

The 序数值 分别为 1、3、4,而 value IDL 属性在获取时返回 0、3、0。

以下示例中列出了前十名电影(按逆序)。请注意,通过使用 figure 元素及其 figcaption 元素为列表提供标题的方式。

<figure>
 <figcaption>The top 10 movies of all time</figcaption>
 <ol>
  <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li>
  <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
  <li value="8"><cite>A Bug's Life</cite>, 1998</li>
  <li value="7"><cite>Toy Story</cite>, 1995</li>
  <li value="6"><cite>Monsters, Inc</cite>, 2001</li>
  <li value="5"><cite>Cars</cite>, 2006</li>
  <li value="4"><cite>Toy Story 2</cite>, 1999</li>
  <li value="3"><cite>Finding Nemo</cite>, 2003</li>
  <li value="2"><cite>The Incredibles</cite>, 2004</li>
  <li value="1"><cite>Ratatouille</cite>, 2007</li>
 </ol>
</figure>

此标记也可以如下编写,在 reversed 属性的 ol 元素上:

<figure>
 <figcaption>The top 10 movies of all time</figcaption>
 <ol reversed>
  <li><cite>Josie and the Pussycats</cite>, 2001</li>
  <li><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
  <li><cite>A Bug's Life</cite>, 1998</li>
  <li><cite>Toy Story</cite>, 1995</li>
  <li><cite>Monsters, Inc</cite>, 2001</li>
  <li><cite>Cars</cite>, 2006</li>
  <li><cite>Toy Story 2</cite>, 1999</li>
  <li><cite>Finding Nemo</cite>, 2003</li>
  <li><cite>The Incredibles</cite>, 2004</li>
  <li><cite>Ratatouille</cite>, 2007</li>
 </ol>
</figure>

While it is conforming to include heading elements (e.g. h1) inside li elements, it likely does not convey the semantics that the author intended. A heading starts a new section, so a heading in a list implicitly splits the list into spanning multiple sections.

4.4.9 The dl 元素

Element/dl

支持所有当前引擎。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLDListElement

支持所有当前引擎。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
流内容
如果元素的子元素包含至少一个名称-值组: 明显内容
此元素可使用的上下文:
预期 流内容 的地方。
内容模型:
可以是:一个或多个组,每个组由一个或多个 dt 元素组成,后跟一个或多个 dd 元素,可选地夹杂 脚本支持元素
或:一个或多个 div 元素,可选地夹杂 脚本支持元素
在 text/html 中的标签省略:
标签不可省略。
内容属性:
全局属性
可访问性注意事项:
给作者的建议
给实现者的建议
净化
默认
DOM 接口:
[Exposed=Window]
interface HTMLDListElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

The dl 元素 代表 一个关联列表,由零个或多个名称-值组(描述列表)组成。名称-值组由一个或多个名称(dt 元素,可能是 div 元素的子元素)后跟一个或多个值(dd 元素,可能是 div 元素的子元素),忽略除 dtdd element children, and dtdd elements that are children of div element children. Within a single dl 元素中,每个名称不应有多个 dt 元素。

名称-值组可以是术语和定义、元数据主题和值、问题和答案,或任何其他名称-值数据组。

组内的值是替代的;构成同一值的多个段落必须都包含在同一 dd 元素中。

组列表的顺序以及每个组内名称和值的顺序可能很重要。

为了用 微数据 属性或其他适用于整个组的 全局属性 注释组,或仅用于样式目的, dl 元素中的每个组都可以包含在 div 元素中。这不会改变 dl 元素的语义。

The name-value groups of a dl 元素 dl 的名称-值组是使用以下算法确定的。名称-值组有一个名称( dt 元素列表,最初为空)和一个值( dd 元素列表,最初为空)。

  1. groups 为一个空的名称-值组列表。

  2. current 为一个新的名称-值组。

  3. seenDd 为 false。

  4. childdl第一个子节点

  5. grandchild 为 null。

  6. child 不为 null 时:

    1. 如果 childdiv 元素,则:

      1. grandchildchild第一个子节点

      2. grandchild 不为 null 时:

        1. 处理 dtdd 以处理 grandchild

        2. grandchild 设置为 grandchild下一个兄弟节点

    2. 否则, 处理 dtdd 以处理 child

    3. child 设置为 child下一个兄弟节点

  7. 如果 current 不为空,则将 current 追加到 groups

  8. 返回 groups

处理 dtdd 节点 node ,需执行以下步骤:

  1. groupscurrentseenDd 为调用这些步骤的算法中同名的变量。

  2. 如果 nodedt 元素,则:

    1. 如果 seenDd 为 true,则将 current 追加到 groups,将 current 设置为一个新的名称-值组,并将 seenDd 设置为 false。

    2. node 追加到 current的名称中。

  3. 否则,如果 nodedd 元素,则将 node 追加到 current的值中,并将 seenDd 设置为 true。

当名称-值组的名称或值为空列表时,通常是因为错误地在 dd 元素的位置使用了 dt 元素,反之亦然。一致性检查器可以发现此类错误,并可能建议作者如何正确使用标记。

在以下示例中,一个条目(“作者”)链接到两个值(“约翰”和“卢克”)。

<dl>
 <dt> Authors
 <dd> John
 <dd> Luke
 <dt> Editor
 <dd> Frank
</dl>

在以下示例中,一个定义链接到两个术语。

<dl>
 <dt lang="en-US"> <dfn>color</dfn> </dt>
 <dt lang="en-GB"> <dfn>colour</dfn> </dt>
 <dd> A sensation which (in humans) derives from the ability of
 the fine structure of the eye to distinguish three differently
 filtered analyses of a view. </dd>
</dl>

以下示例展示了使用 dl 元素标记各种元数据。在示例的末尾,一个组有两个元数据标签(“作者”和“编辑”)和两个值(“Robert Rothman”和“Daniel Jackson”)。此示例还使用 div 元素将 dtdd 元素组围起来,以帮助样式化。

<dl>
 <div>
  <dt> Last modified time </dt>
  <dd> 2004-12-23T23:33Z </dd>
 </div>
 <div>
  <dt> Recommended update interval </dt>
  <dd> 60s </dd>
 </div>
 <div>
  <dt> Authors </dt>
  <dt> Editors </dt>
  <dd> Robert Rothman </dd>
  <dd> Daniel Jackson </dd>
 </div>
</dl>

以下示例显示了使用 dl 元素来提供一组指令。这里指令的顺序很重要(在其他示例中,区块的顺序并不重要)。

<p>Determine the victory points as follows (use the
first matching case):</p>
<dl>
 <dt> If you have exactly five gold coins </dt>
 <dd> You get five victory points </dd>
 <dt> If you have one or more gold coins, and you have one or more silver coins </dt>
 <dd> You get two victory points </dd>
 <dt> If you have one or more silver coins </dt>
 <dd> You get one victory point </dd>
 <dt> Otherwise </dt>
 <dd> You get no victory points </dd>
</dl>

以下代码片段显示了使用 dl 元素作为词汇表。请注意使用 dfn 来表示正在定义的词。

<dl>
 <dt><dfn>Apartment</dfn>, n.</dt>
 <dd>An execution context grouping one or more threads with one or
 more COM objects.</dd>
 <dt><dfn>Flat</dfn>, n.</dt>
 <dd>A deflated tire.</dd>
 <dt><dfn>Home</dfn>, n.</dt>
 <dd>The user's login directory.</dd>
</dl>

This example uses microdata attributes in a dl element, together with the 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>

The dl 元素不适合用于标记对话。请参阅一些 如何标记对话的示例

4.4.10 The dt 元素

Element/dt

支持所有当前引擎。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别:
无。
此元素可使用的上下文:
Before dddt elements inside dl elements.
Before dddt elements inside div elements that are children of a dl element.
内容模型:
流内容,但不能有 headerfooter分区内容标题内容 的后代。
在 text/html 中的标签省略:
如果 dt element's end tag can be omitted if the dt element is immediately followed by another dt 元素或 dd element.
内容属性:
全局属性
可访问性注意事项:
给作者的建议
给实现者的建议
净化
默认
DOM 接口:
使用 HTMLElement

The dt 元素 表示 描述列表(dl 元素)中术语-描述组的术语或名称部分。

The dt 元素本身在 dl 元素中使用时,并不表示其内容是被定义的术语,但可以使用 dfn 元素来表示这一点。

此示例展示了使用 dt 元素表示问题,使用 dd 元素表示答案的常见问题(FAQ)列表。

<article>
 <h1>FAQ</h1>
 <dl>
  <dt>What do we want?</dt>
  <dd>Our data.</dd>
  <dt>When do we want it?</dt>
  <dd>Now.</dd>
  <dt>Where is it?</dt>
  <dd>We are not sure.</dd>
 </dl>
</article>

4.4.11 The dd 元素

Element/dd

支持所有当前引擎。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别:
无。
此元素可使用的上下文:
After dtdd elements inside dl elements.
After dtdd elements inside div elements that are children of a dl element.
内容模型:
流内容
在 text/html 中的标签省略:
A dd element's end tag can be omitted if the dd 元素后面紧跟另一个 dd 元素或 dt element, or if there is no more content in the parent element.
内容属性:
全局属性
可访问性注意事项:
给作者的建议
给实现者的建议
净化
默认
DOM 接口:
使用 HTMLElement

The dd 元素 表示 描述列表(dl 元素)中术语-描述组的描述、定义或值部分。

A dl 可以用于定义词汇表,就像在字典中一样。在以下示例中,每个条目由带有 dtdfn给出,并有多个 dd,展示定义的各个部分。

<dl>
 <dt><dfn>happiness</dfn></dt>
 <dd class="pronunciation">/ˈhæpinəs/</dd>
 <dd class="part-of-speech"><i><abbr>n.</abbr></i></dd>
 <dd>The state of being happy.</dd>
 <dd>Good fortune; success. <q>Oh <b>happiness</b>! It worked!</q></dd>
 <dt><dfn>rejoice</dfn></dt>
 <dd class="pronunciation">/rɪˈdʒɔɪs/</dd>
 <dd><i class="part-of-speech"><abbr>v.intr.</abbr></i> To be delighted oneself.</dd>
 <dd><i class="part-of-speech"><abbr>v.tr.</abbr></i> To cause one to be delighted.</dd>
</dl>

4.4.12 The 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

The figure 元素 表示 一些独立的 流内容,可选地带有标题,通常作为单一单元从文档的主流中 引用

在此上下文中,“独立”并不一定意味着独立。例如,段落中的每个句子都是独立的;作为句子一部分的图像不适合使用 figure,但由图像构成的完整句子则是合适的。

因此,该元素可以用来注释插图、图表、照片、代码列表等。

figure 从文档的主要内容中通过标题(例如,通过图号)进行引用时,这样的内容可以很容易地从主内容中移开,例如,移到页面侧边、专用页面或附录,而不会影响文档的流。

如果 figure element is referenced by its relative position, e.g., "in the photograph above" or "as the next figure shows", then moving the figure would disrupt the page's meaning. Authors are encouraged to consider using labels to refer to figures, rather than using such relative references, so that the page can easily be restyled without affecting the page's meaning.

元素的第一个 figcaption 元素子元素(如果有),表示 figure 元素内容的标题。如果没有 figcaption 子元素,则没有标题。

A figure 元素的内容是周围流的一部分。如果页面的目的是显示图形,例如图片共享网站上的照片,则可以使用 figurefigcaption 元素明确提供该图形的标题。对于仅与周围流略有相关或具有不同目的的内容,应使用 aside 元素(它本身可以包含 figure)。例如,重复来自 article 内容的拉引引用会更适合放在 aside 中,而不是 figure中,因为它不是内容的一部分,而是为了吸引读者或突出关键主题而重复内容。

此示例展示了使用 figure 元素来标记代码列表。

<p>In <a href="#l4">listing 4</a> we see the primary core interface
API declaration.</p>
<figure id="l4">
 <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
 <pre><code>interface PrimaryCore {
 boolean verifyDataLine();
 undefined sendData(sequence&lt;byte> data);
 undefined initSelfDestruct();
}</code></pre>
</figure>
<p>The API is designed to use UTF-8.</p>

在这里,我们看到使用 figure 元素来标记作为页面主要内容的照片(如在画廊中)。

<!DOCTYPE HTML>
<html lang="en">
<title>Bubbles at work — My Gallery™</title>
<figure>
 <img src="bubbles-work.jpeg"
      alt="Bubbles, sitting in his office chair, works on his
           latest project intently.">
 <figcaption>Bubbles at work</figcaption>
</figure>
<nav><a href="19414.html">Prev</a><a href="19416.html">Next</a></nav>

在此示例中,我们看到一个 不是 figure 的图像,以及一个是 figure 的图像和视频。第一个图像实际上是示例第二句话的一部分,因此它不是一个独立的单元,因此使用 figure 是不合适的。

<h2>Malinko's comics</h2>

<p>This case centered on some sort of "intellectual property"
infringement related to a comic (see Exhibit A). The suit started
after a trailer ending with these words:

<blockquote>
 <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
</blockquote>

<p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
preemptive strike using snowballs. A complete copy of the trailer is
included with Exhibit B.

<figure>
 <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper.">
 <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption>
</figure>

<figure>
 <video src="ex-b.mov"></video>
 <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
</figure>

<p>The case was resolved out of court.

这里使用 figure元素标记了一部分诗。

<figure>
 <p>'Twas brillig, and the slithy toves<br>
 Did gyre and gimble in the wabe;<br>
 All mimsy were the borogoves,<br>
 And the mome raths outgrabe.</p>
 <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption>
</figure>

在此示例中,这可能是讨论城堡的一个更大作品的一部分,使用嵌套的 figure 元素为组中的每个图形提供了一个组标题和单独的标题:

<figure>
 <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
 <figure>
  <figcaption>Etching. Anonymous, ca. 1423.</figcaption>
  <img src="castle1423.jpeg" alt="The castle has one tower, and a tall wall around it.">
 </figure>
 <figure>
  <figcaption>Oil-based paint on canvas. Maria Towle, 1858.</figcaption>
  <img src="castle1858.jpeg" alt="The castle now has two towers and two walls.">
 </figure>
 <figure>
  <figcaption>Film photograph. Peter Jankle, 1999.</figcaption>
  <img src="castle1999.jpeg" alt="The castle lies in ruins, the original tower all that remains in one piece.">
 </figure>
</figure>

上一个示例也可以更简洁地写成如下形式(使用 title 属性代替嵌套的 figure/figcaption 对):

<figure>
 <img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
      alt="The castle has one tower, and a tall wall around it.">
 <img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
      alt="The castle now has two towers and two walls.">
 <img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
      alt="The castle lies in ruins, the original tower all that remains in one piece.">
 <figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure>

图形有时仅通过内容隐式地 引用

<article>
 <h1>Fiscal negotiations stumble in Congress as deadline nears</h1>
 <figure>
  <img src="obama-reid.jpeg" alt="Obama and Reid sit together smiling in the Oval Office.">
  <figcaption>Barack Obama and Harry Reid. White House press photograph.</figcaption>
 </figure>
 <p>Negotiations in Congress to end the fiscal impasse sputtered on Tuesday, leaving both chambers
 grasping for a way to reopen the government and raise the country's borrowing authority with a
 Thursday deadline drawing near.</p>
 ...
</article>

4.4.13 The 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

The figcaption 元素 表示 a caption or legend for the rest of the contents of the figcaption element's parent figure 元素内容的标题或说明(如果有)。

该元素可以包含有关来源的附加信息:

<figcaption>
 <p>A duck.</p>
 <p><small>Photograph courtesy of 🌟 News.</small></p>
</figcaption>
<figcaption>
 <p>Average rent for 3-room apartments, excluding non-profit apartments</p>
 <p>Zürich’s Statistics Office — <time datetime=2017-11-14>14 November 2017</time></p>
</figcaption>

4.4.14 The main 元素

Element/main

支持所有当前引擎。

Firefox21+Safari7+Chrome26+
Opera16+Edge79+
Edge (旧版)12+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别:
流内容
明显内容
此元素可使用的上下文:
预期 流内容 的地方,但仅当它是 层次结构正确的 main 元素
内容模型:
流内容
在 text/html 中的标签省略:
标签不可省略。
内容属性:
全局属性
可访问性注意事项:
给作者的建议
给实现者的建议
净化
默认
DOM 接口:
使用 HTMLElement

The main 元素 表示 文档的主要内容。

A document must not have more than one main element that does not have the hidden attribute specified.

A 层次结构正确的 main 元素 是指其祖先元素仅限于 htmlbodydiv, form without an accessible name, and 自主自定义元素。每个 main 元素都必须是 层次结构正确的 main 元素

在此示例中,作者使用了一种将页面的每个组件呈现在一个框中的布局。为了包装页面的主要内容(而不是页眉、页脚、导航栏和侧边栏),使用了 main 元素。

<!DOCTYPE html>
<html lang="en">
<title>RPG System 17</title>
<style>
 header, nav, aside, main, footer {
   margin: 0.5em; border: thin solid; padding: 0.5em;
   background: #EFF; color: black; box-shadow: 0 0 0.25em #033;
 }
 h1, h2, p { margin: 0; }
 nav, main { float: left; }
 aside { float: right; }
 footer { clear: both; }
</style>
<header>
 <h1>System Eighteen</h1>
</header>
<nav>
 <a href="../16/">← System 17</a>
 <a href="../18/">RPXIX →</a>
</nav>
<aside>
 <p>This system has no HP mechanic, so there's no healing.
</aside>
<main>
 <h2>Character creation</h2>
 <p>Attributes (magic, strength, agility) are purchased at the cost of one point per level.</p>
 <h2>Rolls</h2>
 <p>Each encounter, roll the dice for all your skills. If you roll more than the opponent, you win.</p>
</main>
<footer>
 <p>Copyright © 2013
</footer>
</html>

在以下示例中,使用了多个 main 元素,并使用脚本使导航在不进行服务器往返的情况下工作,并为非当前元素设置 hidden 属性:

<!doctype html>
<html lang=en-CA>
<meta charset=utf-8>
<title></title>
<link rel=stylesheet href=spa.css>
<script src=spa.js async></script>
<nav>
 <a href=/>Home</a>
 <a href=/about>About</a>
 <a href=/contact>Contact</a>
</nav>
<main>
 <h1>Home</h1></main>
<main hidden>
 <h1>About</h1></main>
<main hidden>
 <h1>Contact</h1></main>
<footer>Made with ❤️ by <a href=https://example.com/>Example 👻</a>.</footer>

4.4.15 The search 元素

Element/search

当前引擎不支持。

FirefoxNoSafariNoChromeNo
OperaNoEdgeNo
Edge (旧版)NoInternet ExplorerNo
Firefox Android?Safari iOS?Chrome AndroidNoWebView Android?Samsung Internet?Opera Android?
类别:
流内容
明显内容
此元素可使用的上下文:
预期 流内容 的地方。
内容模型:
流内容
在 text/html 中的标签省略:
标签不可省略。
内容属性:
全局属性
可访问性注意事项:
给作者的建议
给实现者的建议
净化
默认
DOM 接口:
使用 HTMLElement

The search 元素 表示 文档或应用程序中包含一组与执行搜索或过滤操作相关的表单控件或其他内容的部分。这可以是网站或应用程序的搜索;在当前网页上搜索或过滤搜索结果的方法;或全局或互联网范围的搜索功能。

It's not appropriate to use the search element just for presenting search results, though suggestions and links as part of "quick search" results can be included as part of a search feature. Rather, a returned web page of search results would instead be expected to be presented as part of the main content of that web page.

在以下示例中,作者在网页的 header 中包含了一个搜索表单:

<header>
  <h1><a href="/">My fancy blog</a></h1>
  ...
  <search>
    <form action="search.php">
      <label for="query">Find an article</label>
      <input id="query" name="q" type="search">
      <button type="submit">Go!</button>
    </form>
  </search>
</header>

在这个示例中,作者完全使用 JavaScript 实现了其网络应用程序的搜索功能。没有使用 form 元素来执行服务器端提交,但包含的 search 元素在语义上标识了其后代内容的目的是表示搜索功能。

<search>
  <label>
    Find and filter your query
    <input type="search" id="query">
  </label>
  <label>
    <input type="checkbox" id="exact-only">
    Exact matches only
  </label>

  <section>
    <h3>Results found:</h3>
    <ul id="results">
      <li>
        <p><a href="services/consulting">Consulting services</a></p>
        <p>
          Find out how can we help you improve your business with our integrated consultants, Bob and Bob.
        </p>
      </li>
      ...
    </ul>
    <!--
      when a query returns or filters out all results
      render the no results message here
    -->
    <output id="no-results"></output>
  </section>
</search>

在以下示例中,页面有两个搜索功能。第一个位于网页的 header 中,作为一个全局机制来搜索网站的内容。其目的通过指定的 title 属性来指示。第二个是页面主要内容的一部分,表示一个搜索和过滤当前页面内容的机制。它包含一个标题来指示其目的。

<body>
  <header>
    ...
    <search title="Website">
      ...
    </search>
  </header>
  <main>
    <h1>Hotels near your location</h1>
     <search>
       <h2>Filter results</h2>
       ...
     </search>
     <article>
      <!-- search result content -->
    </article>
  </main>
</body>

4.4.16 The div 元素

Element/div

支持所有当前引擎。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLDivElement

支持所有当前引擎。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
流内容
可感知内容
此元素可被使用的上下文:
在期望出现 流内容 的地方。
作为 dl 元素的子元素。
作为 option 元素、 optgroup 元素,或 select 元素的后代。
内容模型:
如果该元素是 dl 元素的子元素:一个或多个 dt 元素,后跟一个或多个 dd 元素,可选择性地混有 脚本支持 元素
否则,如果该元素是 option 元素、 optgroup 元素,或 select 元素的后代: 透明
否则: 流内容
text/html 中的标签省略:
两个标签均不可省略。
内容属性:
全局属性
无障碍考量:
面向作者
面向实现者
消毒处理:
默认
DOM 接口:
[Exposed=Window]
interface HTMLDivElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

The div 元素本身没有任何特殊含义。它 表示 其子元素。它可以与 classlangtitle 属性一起使用,以标记一组连续元素的语义。它还可以在 dl 元素中使用,包裹 dtdd 元素的组。

强烈建议作者将 div 元素视为最后的手段,当没有其他合适的元素时才使用。使用更合适的元素而不是 div 元素,可以提高读者的可访问性,并且更易于作者维护。

例如,一篇博客文章可以使用 article来标记,一个章节可以使用 section来标记,一个页面的导航可以使用 nav来标记,一组表单控件可以使用 fieldset来标记。

另一方面, div 元素可以用于样式目的,或者用于包裹章节中的多个段落,这些段落都需要以类似的方式进行注释。在下面的例子中,我们看到 div 元素被用来一次设置两个段落的语言,而不是分别设置两个段落元素的语言:

<article lang="en-US">
 <h1>My use of language and my cats</h1>
 <p>My cat's behavior hasn't changed much since her absence, except
 that she plays her new physique to the neighbors regularly, in an
 attempt to get pets.</p>
 <div lang="en-GB">
  <p>My other cat, coloured black and white, is a sweetie. He followed
  us to the pool today, walking down the pavement with us. Yesterday
  he apparently visited our neighbours. I wonder if he recognises that
  their flat is a mirror image of ours.</p>
  <p>Hm, I just noticed that in the last paragraph I used British
  English. But I'm supposed to write in American English. So I
  shouldn't say "pavement" or "flat" or "colour"...</p>
 </div>
 <p>I should say "sidewalk" and "apartment" and "color"!</p>
</article>

4.5 文本级语义

4.5.1 The a 元素

Element/a

所有当前引擎支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLAnchorElement

所有当前引擎支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

HTMLAnchorElement/download

Support in all current engines.

火狐20+Safari10.1+Chrome15+
Opera?Edge79+
Edge(旧版)13+Internet Explorer不支持
火狐 Android?Safari iOS?Chrome Android?WebView Android?三星浏览器 Android?Opera Android?

HTMLAnchorElement/rel

Support in all current engines.

火狐1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer5.5+
火狐 Android?Safari iOS?Chrome Android?WebView Android?三星浏览器 Android?Opera Android12.1+

HTMLAnchorElement/relList

Support in all current engines.

火狐30+Safari9+Chrome65+
Opera?Edge79+
Edge(旧版)18Internet Explorer不支持
火狐 Android?Safari iOS?Chrome Android?WebView Android?三星浏览器 Android?Opera Android?
分类:
流内容
短语内容
如果该元素有 href 属性: 交互内容
感知内容
此元素可用的上下文:
期望 短语内容 的地方。
内容模型:
透明,但不得有 交互内容 后代, a 元素后代,或具有 tabindex 属性的后代。
text/html 中的标签省略:
两端标签都不能省略。
内容属性:
全局属性
href超链接
target可导航对象 用于 超链接 导航
download — 是否下载资源而不是导航到它,以及如果是则下载的文件名
ping — 要 ping 的 URL to ping
rel — 包含 超链接 的文档位置与目标资源之间的关系
hreflang — 链接资源的语言
type — 被引用资源的类型提示
referrerpolicy — 元素发起的 引用策略fetches initiated by the element
可访问性考虑:
如果该元素有 href 属性: 作者; 实现者
否则: 作者; 实现者
净化
默认 ,且具有属性 hrefhreflangtype,以及 导航 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;

  // also has obsolete members
};
HTMLAnchorElement includes HyperlinkElementUtils;
HTMLAnchorElement includes HTMLHyperlinkElementUtils;

如果 a 元素有 href 属性, 则它 表示 一个由其 内容标记的 超链接 (超文本锚)。

如果 a 元素没有 href 属性, 则该元素 表示 一个占位符,用于在本来相关时 可能会放置链接的位置, 仅由该元素的内容构成。

The targetdownloadpingrelhreflangtypereferrerpolicy attributes must be omitted if the href attribute is not present.

If the itemprop attribute is specified on an a element, then the href 属性。

如果站点在每个页面上使用一致的导航工具栏,那么通常会 链接到页面自身的链接可以使用 a 元素来标记:

<nav>
 <ul>
  <li> <a href="/">Home</a> </li>
  <li> <a href="/news">News</a> </li>
  <li> <a>Examples</a> </li>
  <li> <a href="/legal">Legal</a> </li>
 </ul>
</nav>

The hreftargetdownloadpingreferrerpolicy 属性会影响当用户 跟随超链接下载 使用 a 元素创建的超链接时会发生什么。 relhreflangtype 属性可用于在用户跟随链接之前向用户指示目标资源的可能性质。

a.text

Same as 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 必须 反映 the referrerpolicy 内容属性, 仅限已知值

The text 属性的 getter 必须返回该元素的 后代文本内容

The text 属性的 setter 必须 用给定的值替换所有字符串

The a 元素可以包裹整个段落、列表、表格等,甚至整个部分,只要其中没有交互内容(例如按钮或其他链接)。此示例展示了如何将整个广告块变成一个链接:

<aside class="advertising">
 <h1>Advertising</h1>
 <a href="https://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
   <h1>Mellblomatic 9000!</h1>
   <p>Turn all your widgets into mellbloms!</p>
   <p>Only $9.99 plus shipping and handling.</p>
  </section>
 </a>
 <a href="https://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
   <h1>The Mellblom Browser</h1>
   <p>Web browsing at the speed of light.</p>
   <p>No other browser goes faster!</p>
  </section>
 </a>
</aside>

以下示例展示了如何使用一点脚本将职位列表表格中的整行有效地变成一个超链接:

<table>
 <tr>
  <th>Position
  <th>Team
  <th>Location
 <tr>
  <td><a href="/jobs/manager">Manager</a>
  <td>Remotees
  <td>Remote
 <tr>
  <td><a href="/jobs/director">Director</a>
  <td>Remotees
  <td>Remote
 <tr>
  <td><a href="/jobs/astronaut">Astronaut</a>
  <td>Architecture
  <td>Remote
</table>
<script>
document.querySelector("table").onclick = ({ target }) => {
  if (target.parentElement.localName === "tr") {
    const link = target.parentElement.querySelector("a");
    if (link) {
      link.click();
    }
  }
}
</script>

4.5.2 The em 元素

Element/em

支持所有当前引擎。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别
流内容
短语内容
显著内容
可以使用该元素的上下文
Where phrasing content is expected.
内容模型
短语内容
在 text/html 中省略标签
标签不可省略。
内容属性
全局属性
可访问性考虑
作者参考
实现者参考
净化
默认
DOM 接口
使用 HTMLElement

The em 元素 表示 其内容的强调。

特定内容的强调程度由其祖先 em 元素的数量决定。

强调位置的变化会改变句子的含义。因此,该元素是内容的一个组成部分。具体的强调使用方式取决于语言。

这些例子展示了如何通过改变强调来改变意思。首先,一个一般的事实陈述,没有任何强调:

<p>Cats are cute animals.</p>

通过强调第一个词,声明暗示讨论的动物种类有问题(也许有人在断言狗是可爱的):

<p><em>Cats</em> are cute animals.</p>

将重音移到动词上,突出的是整个句子的真实性受到质疑(也许有人在说猫不可爱):

<p>Cats <em>are</em> cute animals.</p>

通过将重音移到形容词上,猫的具体性质再次被强调(也许有人暗示猫是 凶猛的 动物):

<p>Cats are <em>cute</em> animals.</p>

同样地,如果有人断言猫是蔬菜,纠正这种说法的人可能会强调最后一个词:

<p>Cats are cute <em>animals</em>.</p>

通过强调整个句子,可以看出说话者在努力传达这个观点。这种强调通常也会影响标点符号,因此这里用了感叹号。

<p><em>Cats are cute animals!</em></p>

愤怒中带有对可爱程度的强调,可能会导致如下的标记:

<p><em>Cats are <em>cute</em> animals!</em></p>

The em 元素不是一个通用的“斜体”元素。有时,文本需要从段落的其余部分中脱颖而出,就像是以不同的情绪或语气书写的。对于这种情况, i 元素更合适。

The em 元素也不是用来表达重要性的;对于这个目的, strong 元素更合适。

4.5.3 The strong 元素

Element/strong

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
Categories:
流内容
短语内容
可感知内容
此元素可以使用的上下文:
在需要 短语内容 的地方。
内容模型:
短语内容
在 text/html 中的标签省略:
标签不能省略。
内容属性:
全局属性
可访问性考虑:
对作者
对实现者
净化
默认
DOM 接口:
使用 HTMLElement

The strong 元素 表示 其内容的重要性、严肃性或紧迫性。

重要性strong 元素可以用在标题、说明或段落中,以区分真正重要的部分与其他可能更详细、更幽默或只是例行公事的部分。(这与标记子标题不同,子标题适合使用 hgroup 元素。)

例如,前一段的第一个词用 strong 标记,以将其与段落中其他更详细的文字区分开来。

严肃性strong 元素可以用来标记警告或注意事项。

紧迫性strong 元素可以用来表示用户需要比文档其他部分更早看到的内容。

内容的相对重要级别由其祖先 strong 元素的数量决定;每个 strong 元素都会增加其内容的重要性。

strong 元素改变文本的重要性不会改变句子的含义。

在这里,“chapter”一词和实际的章节号只是例行公事,实际的章节名称用 strong标记:

<h1>Chapter 1: <strong>The Praxis</strong></h1>

在下面的例子中,说明中的图名用 strong标记,以将其与例行公事的文本(前)和描述(后)区分开来:

<figcaption>Figure 1. <strong>Ant colony dynamics</strong>. The ants in this colony are
affected by the heat source (upper left) and the food source (lower right).</figcaption>

在这个例子中,标题实际上是“Flowers, Bees, and Honey”,但是作者在标题中添加了轻松愉快的部分。使用 strong 元素标记第一部分,以将其与后面的部分区分开来。

<h1><strong>Flowers, Bees, and Honey</strong> and other things I don't understand</h1>

这是一个游戏中警告通知的示例,其中各个部分根据它们的重要性进行了标记:

<p><strong>Warning.</strong> This dungeon is dangerous.
<strong>Avoid the ducks.</strong> Take any gold you find.
<strong><strong>Do not take any of the diamonds</strong>,
they are explosive and <strong>will destroy anything within
ten meters.</strong></strong> You have been warned.</p>

在这个示例中,使用了 strong 元素来表示用户首先需要阅读的部分文本。

<p>Welcome to Remy, the reminder system.</p>
<p>Your tasks for today:</p>
<ul>
 <li><p><strong>Turn off the oven.</strong></p></li>
 <li><p>Put out the trash.</p></li>
 <li><p>Do the laundry.</p></li>
</ul>

4.5.4 The small 元素

Element/small

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别:
流内容.
短语内容.
可感知内容.
该元素可用的上下文:
Where phrasing content is expected.
内容模型:
Phrasing content.
在 text/html 中省略标签:
两个标签都不可省略。
内容属性:
全局属性
无障碍考虑:
对于作者.
对于实现者.
净化
默认
DOM 接口:
使用 HTMLElement.

The small 元素 表示 旁注,如小字打印。

小字打印通常包括免责声明、警告、法律限制或版权声明。小字打印有时也用于归属,或满足许可要求。

The small 元素并不会“降低”或减少通过 em 元素强调的文本或通过 strong 元素标记为重要的文本的重要性。要标记文本为不强调或不重要,只需不要使用 emstrong 元素即可。

The small 元素不应用于长时间的文本,例如多个段落、列表或文本部分。它仅适用于短文本。例如,列出使用条款的页面中的文本不适合使用 small 元素:在这种情况下,文本不是旁注,它是页面的主要内容。

The small 元素不得用于子标题;为此,使用 hgroup 元素。

在此示例中, small 元素用于指示酒店房间价格中不包含增值税:

<dl>
 <dt>Single room
 <dd>199 € <small>breakfast included, VAT not included</small>
 <dt>Double room
 <dd>239 € <small>breakfast included, VAT not included</small>
</dl>

在第二个示例中, small 元素用于文章中的附注。

<p>Example Corp today announced record profits for the
second quarter <small>(Full Disclosure: Foo News is a subsidiary of
Example Corp)</small>, leading to speculation about a third quarter
merger with Demo Group.</p>

这与侧边栏不同,侧边栏可能包含多个段落,并且与正文的主要流动分开。在以下示例中,我们看到同一篇文章中的侧边栏。该侧边栏也有小字,指明了侧边栏中信息的来源。

<aside>
 <h1>Example Corp</h1>
 <p>This company mostly creates small software and Web
 sites.</p>
 <p>The Example Corp company mission is "To provide entertainment
 and news on a sample basis".</p>
 <p><small>Information obtained from <a
 href="https://example.com/about.html">example.com</a> home
 page.</small></p>
</aside>

在最后一个示例中, small 元素被标记为 重要的 小字。

<p><strong><small>Continued use of this service will result in a kiss.</small></strong></p>

4.5.5 The s 元素

元素/s

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别:
流内容
短语内容
可触及内容
此元素可用的上下文:
短语内容 中。
内容模型:
短语内容
在 text/html 中的标签省略:
两个标签都不可省略。
内容属性:
全局属性
无障碍考虑:
面向作者
面向实现者
净化
默认
DOM 接口:
使用 HTMLElement

The s 元素 表示 不再准确或不再相关的内容。

The s 元素不适用于指示文档编辑;要标记一段文本为已从文档中删除,请使用 del 元素。

在这个示例中,建议零售价已被标记为不再相关,因为相关产品有了新的销售价格。

<p>Buy our Iced Tea and Lemonade!</p>
<p><s>Recommended retail price: $3.99 per bottle</s></p>
<p><strong>Now selling for just $2.99 a bottle!</strong></p>

4.5.6 The cite 元素

元素/cite

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别:
流内容
短语内容
可触及内容
此元素可用的上下文:
短语内容 中。
内容模型:
短语内容
在 text/html 中的标签省略:
两个标签都不可省略。
内容属性:
全局属性
无障碍考虑:
面向作者
面向实现者
净化
默认
DOM 接口:
使用 HTMLElement

The cite 元素 表示 一个作品的标题(例如: 一本书, 一篇论文, 一篇文章, 一首诗, 一份乐谱, 一首歌曲, 一部剧本, 一部电影, 一档电视节目, 一款游戏, 一件雕塑, 一幅画, 一场戏剧制作, 一部剧, 一部歌剧, 一部音乐剧, 一次展览, 一份法律案件报告, 一个计算机程序, 等等)。这可以是被引用或 详细引用 的作品(即,引用),也可以只是随意提到的作品。

一个人的名字不是作品的标题——即使人们称那个人人为“作品”——因此,该元素不应用于标记人名。(在某些情况下, b element might be appropriate for names; e.g. in a gossip article where the names of famous people are keywords rendered with a different style to draw attention to them. In other cases, if an element is really needed, the 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>

The cite 元素是参考文献中引用的关键部分,但仅用于标记标题:

<p><cite>Universal Declaration of Human Rights</cite>, United Nations,
December 1948. Adopted by General Assembly resolution 217 A (III).</p>

A 引用 不是 引述 (对于引述, q 元素更为合适)。

这是不正确的用法,因为 cite 不用于引述:

<p><cite>This is wrong!</cite>, said Ian.</p>

这也是不正确的用法,因为一个人不是一个作品:

<p><q>This is still wrong!</q>, said <cite>Ian</cite>.</p>

正确的用法不使用 cite 元素:

<p><q>This is correct</q>, said Ian.</p>

如上所述, b 元素可能适用于在某些类型的文档中标记名字作为关键词:

<p>And then <b>Ian</b> said <q>this might be right, in a
gossip column, maybe!</q>.</p>

4.5.7 The q element

元素/q

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

Firefox1+Safari3+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别:
流内容.
短语内容.
可感知内容.
此元素可以使用的上下文:
在需要 短语内容 的地方。
内容模型:
短语内容.
在 text/html 中的标签省略:
两个标签都不可省略。
内容属性:
全局属性
cite — 链接到引用的来源或有关编辑的更多信息
可访问性考虑:
给作者的建议.
给实现者的建议.
净化
默认
DOM 接口:
使用 HTMLQuoteElement.

The q 元素 表示 从其他来源引用的一些 短语内容

引用标点(如引号)不应立即出现在 q 元素之前、之后或内部;这些标点将由用户代理在渲染时插入。

Content inside a q 元素中的内容必须是从另一个来源引用的,其地址(如果有)可以在 cite 属性中引用。来源可以是虚构的,比如在小说或剧本中引用的角色。

如果存在 cite 属性,它必须是一个 有效的 URL,可能被空格包围。要获得相应的引用链接,属性的值必须 解析 相对于元素的 节点文档。用户代理可能允许用户跟随这些引用链接,但这些链接主要用于私人用途(例如,由收集站点引用统计的服务器端脚本),而不是供读者使用。

The q 元素不得用于代替不表示引用的引号;例如,使用 q 元素标记讽刺性陈述是不合适的。

使用 q 元素标记引用完全是可选的;仅使用明确的引用标点而不使用 q 元素同样是正确的。

这是 q 元素的一个简单示例:

<p>The man said <q>Things that are impossible just take
longer</q>. I disagreed with him.</p>

这是一个示例,其中 q 元素中包含了一个显式的引用链接,以及一个在外部的显式引用:

<p>The W3C page <cite>About W3C</cite> says the W3C's
mission is <q cite="https://www.w3.org/Consortium/">To lead the
World Wide Web to its full potential by developing protocols and
guidelines that ensure long-term growth for the Web</q>. I
disagree with this mission.</p>

在下面的示例中,引用本身包含了另一个引用:

<p>In <cite>Example One</cite>, he writes <q>The man
said <q>Things that are impossible just take longer</q>. I
disagreed with him</q>. Well, I disagree even more!</p>

在下面的示例中,使用了引号而不是 q 元素:

<p>His best argument was ❝I disagree❞, which
I thought was laughable.</p>

在下面的示例中,没有引号——引号用于命名一个词。在这种情况下使用 q 元素是不适当的。

<p>The word "ineffable" could have been used to describe the disaster
resulting from the campaign's mismanagement.</p>

4.5.8 The dfn 元素

Element/dfn

所有当前引擎均支持。

Firefox1+Safari6+Chrome15+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别:
流内容.
短语内容.
可感知内容.
该元素可以使用的上下文:
在预期的 短语内容 中。
内容模型:
短语内容,但其中不能有 dfn 元素的后代。
文本/html 中的标签省略:
两个标签都不能省略。
内容属性:
全局属性
此外, title 属性 在此元素上具有特殊语义 : 术语的完整形式或缩写的扩展。
无障碍考虑:
针对作者.
针对实现者.
净化
默认
DOM 接口:
使用 HTMLElement.

The dfn 元素 表示 术语的定义实例。最近的 段落描述列表组部分 ,即 dfn 元素的最近祖先,必须还包含 术语 的定义,该术语由 dfn 元素给出。

定义术语: 如果 dfn 元素有一个 title 属性,那么该属性的确切值就是正在定义的术语。否则,如果它包含恰好一个子元素节点且没有子 Text nodes, and that child element is an abbr element with a title attribute, then the exact value of 属性的确切值就是正在定义的术语。否则,就是 后代文本内容 ,即 dfn 元素给出的定义术语。

如果 title attribute of the dfn element is present, then it must contain only the term being defined.

祖先元素的 title 属性不会影响 dfn 元素。

An a element that links to a dfn element represents an instance of the term defined by the dfn 元素定义的术语的实例。

在下面的片段中,术语“Garage Door Opener”首先在第一段中被定义,然后在第二段中使用。在这两种情况下,它的缩写才是实际显示的内容。

<p>The <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>
<!-- ... later in the document: -->
<p>Teal'c activated his <abbr title="Garage Door Opener">GDO</abbr>
and so Hammond ordered the iris to be opened.</p>

通过添加一个 a 元素,可以使 引用 变得明确:

<p>The <dfn id=gdo><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>
<!-- ... later in the document: -->
<p>Teal'c activated his <a href=#gdo><abbr title="Garage Door Opener">GDO</abbr></a>
and so Hammond ordered the iris to be opened.</p>

4.5.9 The 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 element 表示 缩写或首字母缩略词,通常带有其扩展形式。 title 属性可用于提供缩写的扩展形式。该属性(如果指定)必须包含缩写的扩展形式,且仅此而已。

下面的段落包含了一个使用 abbr 元素标记的缩写。该段落 定义了术语 “Web Hypertext Application Technology Working Group”。

<p>The <dfn id=whatwg><abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr></dfn>
is a loose unofficial collaboration of web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.</p>

另一种写法是:

<p>The <dfn id=whatwg>Web Hypertext Application Technology
Working Group</dfn> (<abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr>)
is a loose unofficial collaboration of web browser manufacturers and
interested parties who wish to develop new technologies designed to
allow authors to write and deploy Applications over the World Wide
Web.</p>

这个段落中有两个缩写。请注意,只有一个被定义了;另一个没有相关的扩展,因此没有使用 abbr 元素。

<p>The
<abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>
started working on HTML5 in 2004.</p>

这个段落将一个缩写链接到它的定义。

<p>The <a href="#whatwg"><abbr
title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>
community does not have much representation from Asia.</p>

这个段落标记了一个缩写,但没有提供扩展,可能作为一个挂钩来应用缩写的样式(例如小型大写字母)。

<p>Philip` and Dashiva both denied that they were going to
get the issue counts from past revisions of the specification to
backfill the <abbr>WHATWG</abbr> issue graph.</p>

如果一个缩写是复数形式的,则扩展的语法数量(复数与单数)必须与元素内容的语法数量一致。

这里复数形式在元素外部,因此扩展使用的是单数形式:

<p>Two <abbr title="Working Group">WG</abbr>s worked on
this specification: the <abbr>WHATWG</abbr> and the
<abbr>HTMLWG</abbr>.</p>

这里复数形式在元素内部,因此扩展使用的是复数形式:

<p>Two <abbr title="Working Groups">WGs</abbr> worked on
this specification: the <abbr>WHATWG</abbr> and the
<abbr>HTMLWG</abbr>.</p>

不必使用此元素来标记缩写。它在以下情况下被认为是有用的:

title attribute once will not necessarily cause other abbr elements in the same document with the same contents but without a title attribute to behave as if they had the same expansion. Every abbr 元素都是独立的。

4.5.10 The ruby element

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

The ruby 元素允许一个或多个短语内容的片段被标记为 ruby 注释。Ruby 注释是与基础文本并排显示的短文本片段,主要用于东亚排版,作为发音指南或包含其他注释。在 日语中,这种排版形式也被称为 furigana

The content model of ruby 元素的内容模型由以下一种或多种 序列组成:

  1. 以下之一:

  2. 以下之一:

The rubyrt 元素可以用于多种类型的注释,尤其包括(但不限于)下述描述的那些。有关特别是日语 Ruby 的更多细节,以及如何为日语渲染 Ruby,请参见 日语文本布局要求[JLREQ]

在撰写时,CSS 还未提供完全控制 HTML ruby 元素渲染的方式。希望 CSS 能在适当的时候扩展以支持下述样式。

日语中单个基本字符的单字注音

一个或多个平假名或片假名字符(注音标注)与每个表意字符(基本文本)一起放置。这用于提供汉字字符的读音。

<ruby>B<rt>annotation</ruby>

在此示例中,请注意每个注音如何对应一个基本字符。

<ruby><rt>くん</ruby><ruby><rt></ruby><ruby><rt></ruby>して<ruby><rt>どう</ruby>ぜず。

くんしてどう ぜず。

在这个例子中,可以用一个 ruby 元素来书写,包含两个基本文本片段和两个注音(每个一个),而不是两个连续的 ruby 元素,每个包含一个基本文本片段和注音(如上面的标记所示):

<ruby><rt>くん</rt><rt></ruby><ruby><rt></ruby>して<ruby><rt>どう</ruby>ぜず。
复合词(熟语)的单字注音

这与前面的情况类似:复合词中的每个表意字符(基本文本)都用平假名或片假名字符(注音标注)给出其读音。不同之处在于,基本文本片段形成复合词,而不是彼此分离。

<ruby>B<rt>annotation</rt>B<rt>annotation</ruby>

在此示例中,再次注意每个注音如何对应一个基本字符。在这个例子中,每个复合词(熟语)对应一个 ruby 元素。

这里的渲染预计是每个注音放置在对应的基本字符上方(或在垂直文本中旁边),注音不会超出相邻字符的范围。

<ruby><rt></rt><rt>もん</rt></ruby><ruby><rt>ほう</rt><rt>がく</rt></ruby><ruby><rt>ぎょう</rt><rt></rt></ruby>する

もんほうがくぎょうする

熟语注音

这在语义上与前面的情况相同(基本复合词中的每个表意字符都有其读音注音,使用平假名或片假名字符),但渲染是更复杂的熟语注音渲染。

这是与前面单字注音复合词相同的示例。不同的渲染预计通过不同的样式(例如CSS)实现,此处不作展示。

<ruby><rt></rt><rt>もん</rt></ruby><ruby><rt>ほう</rt><rt>がく</rt></ruby><ruby><rt>ぎょう</rt><rt></rt></ruby>する

For more details on Jukugo Ruby rendering, see Appendix F in the Requirements for Japanese Text Layout. [JLREQ]

描述意义的组注音

注音描述基本文本的含义,而不是(或除了)发音。因此,基本文本和注音都可以是多个字符长。

<ruby>BASE<rt>annotation</ruby>

这里一个复合表意词有其对应的片假名作为注音。

<ruby>境界面<rt>インターフェース</ruby>

境界面インターフェース

这里一个复合表意词有其英文翻译作为注音。

<ruby lang="ja">編集者<rt lang="en">editor</ruby>

編集者editor

熟字注音的组注音

对应于多个基本字符的语音读音,因为一对一的映射将非常困难。(在英语中,“Colonel”和“Lieutenant”这两个词是单词的例子,在某些方言中,发音与单个字母的直接映射非常不明确。)

在这个例子中,一种花的名称用组注音提供了其读音:

<ruby>紫陽花<rt>あじさい</ruby>

紫陽花あじさい

具有语音和语义注音的文本(双面注音)

有时,上述注音样式会组合使用。

如果这导致两个注音覆盖同一个基本片段,则可以将注音放在一起。

<ruby>BASE<rt>annotation 1<rt>annotation 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>annotation</ruby>

在这里,语音读音和含义都用注音标注给出。嵌套 ruby 元素上的注音给出了每个基本字符的单字注音,而外部 rt element that is a child of the outer ruby element gives the meaning using hiragana.

<ruby><ruby><rt>とう</rt><rt>なん</rt></ruby><rt>たつみ</rt></ruby>の方角

とうなん たつみ の方角

这是相同的例子,但意义是用英语而不是日语给出的:

<ruby><ruby><rt>とう</rt><rt>なん</rt></ruby><rt lang=en>Southeast</rt></ruby>の方角

とうなん Southeast の方角


在没有 ruby 元素祖先的 ruby 元素中,内容被分段并分为三类:基本文本段、注释段和被忽略的段。被忽略的段不构成文档的语义(它们包含一些 元素间空白rp 元素,后者用于不支持ruby的遗留用户代理)。基本文本段可以重叠(每个位置最多两个段重叠,且任何段具有早于重叠段的开始点也必须具有相同或更晚的结束点,任何段具有晚于重叠段的结束点也必须具有相同或更早的开始点)。注释段对应于 rt 元素。每个注释段可以与一个基本文本段相关联,每个基本文本段也可以有注释段关联。(在符合规范的文档中,每个基本文本段都与至少一个注释段相关联,每个注释段都与一个基本文本段相关联。) ruby 元素 表示 它包含的基本文本段的并集,以及这些基本文本段与注释段的映射。段的描述基于DOM范围;注释段范围始终由一个元素组成。 [DOM]

在任何特定时间, ruby 元素内容的分段和分类结果是运行以下算法得到的结果:

  1. base text segments 成为一个空的基本文本段列表,每个段可能有一个基本文本子段列表。

  2. annotation segments 成为一个空的注释段列表,每个段可能与一个基本文本段或子段相关联。

  3. root 成为正在运行算法的 ruby 元素。

  4. 如果 root 有一个 ruby 元素祖先,则跳到标记为 结束的步骤。

  5. current parentroot

  6. index 为0。

  7. start index 为null。

  8. saved start index 为null。

  9. current base text 为null。

  10. 开始模式:如果 index 大于或等于 current parent中的子节点数量,则跳到标记为 结束模式的步骤。

  11. 如果 current parent中的第 index 个节点是 rtrp 元素,则跳到标记为 注释模式的步骤。

  12. start index 设置为 index的值。

  13. 基本模式:如果 current parent中的第 index 个节点是 ruby 元素,并且 current parent 是与 root相同的元素,则 推送一个ruby层级 ,然后跳到标记为 开始模式的步骤。

  14. 如果 current parent中的第 index 个节点是 rtrp 元素,则 设置当前基本文本 ,然后跳到标记为 注释模式的步骤。

  15. index 增加1。

  16. 基本模式后递增:如果 index 大于或等于 current parent中的子节点数量,则跳到标记为 结束模式的步骤。

  17. 跳回到标记为 基本模式的步骤。

  18. 注释模式:如果 current parent中的第 index 个节点是 rt 元素,则 推送一个ruby注释 ,然后跳到标记为 注释模式递增的步骤。

  19. 如果 current parent中的第 index 个节点是 rp 元素,则跳到标记为 注释模式递增的步骤。

  20. 如果 current parent中的第 index 个节点不是 Text node, or is a Text node that is not inter-element whitespace, then jump to the step labeled 基本模式的步骤。

  21. 注释模式递增:让 lookahead indexindex 加1。

  22. 注释模式空白跳过:如果 lookahead index 等于 current parent 中的子节点数量,则跳到标记为 结束模式的步骤。

  23. 如果 lookahead index中的第 lookahead index 个节点是 rt 元素或 rp 元素,则将 index 设置为 lookahead index ,并跳到标记为 注释模式的步骤。

  24. 如果 lookahead index中的第 lookahead index 个节点不是 Text node, or is a Text node that is not inter-element whitespace, then jump to the step labeled 基本模式 的步骤(不再增加 index,所以到目前为止看到的 元素间空白 成为下一个基本文本段的一部分)。

  25. lookahead index 增加1。

  26. 跳到标 记为 注释模式空白跳过的步骤。

  27. 结束模式:如果 current parent 不是与 root相同的元素,则 弹出一个ruby层级 ,并跳到标记为 基本模式后递增的步骤。

  28. 结束:返回 base text segmentsannotation segmentsruby 元素的任何内容如果没有被这两个列表中的段描述,则隐含在 被忽略的段中。

当上述步骤提到 设置当前基本文本时,意味着在算法中的那个点上执行以下步骤:

  1. text range 为一个 DOM 范围,其 起始 is the boundary point (current parent, start index),且其 结束 is the boundary point (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 be null.

当上述步骤提到 推送一个ruby层级时,意味着在算法中的那个点上执行以下步骤:

  1. current parentcurrent parent中的第 index个节点。

  2. index 为0。

  3. saved start index 设置为 start index的值。

  4. start index 为null。

当上述步骤提到 弹出一个ruby层级时,意味着在算法中的那个点上执行以下步骤:

  1. indexcurrent parentroot中的位置。

  2. current parentroot

  3. index 增加1。

  4. start index 设置为 saved start index的值。

  5. saved start index 为null。

当上述步骤提到 推送一个ruby注释时,意味着在算法中的那个点上执行以下步骤:

  1. rtrt 元素,它是 current parent的第 index个节点。

  2. annotation range 是一个DOM范围,其 开始边界点current parentindex),其 结束边界点current parentindex 加一)(即,仅包含 rt)。

  3. new annotation segment 是一个由范围 annotation range描述的注释段。

  4. 如果 current base text 不为null,将 new annotation segmentcurrent base text关联。

  5. new annotation segment 添加到 annotation segments中。

在这个例子中,日文文本 漢字 中的每个汉字都用平假名注释其读音。

...
<ruby><rt>かん</rt><rt></rt></ruby>
...

这可能会被渲染为:

The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it.

In this example, each ideograph in the traditional Chinese text 漢字 is annotated with its bopomofo reading.

<ruby><rt>ㄏㄢˋ</rt><rt>ㄗˋ</rt></ruby>

这可能会渲染成:

The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it.

在这个例子中,每个简体中文文本 汉字 中的汉字都附有它的拼音注音。

...<ruby><rt>hàn</rt><rt></rt></ruby>...

这可能会渲染成:

The two main ideographs, each with its pinyin annotation rendered in a smaller font above it.

在这个更复杂的示例中,缩写“HTML”有四个注解:一个用于整个缩写,简要描述它是什么,一个用于字母“HT”,将其扩展为“Hypertext”,一个用于字母“M”,将其扩展为“Markup”,以及一个用于字母“L”,将其扩展为“Language”。

<ruby>
 <ruby>HT<rt>Hypertext</rt>M<rt>Markup</rt>L<rt>Language</rt></ruby>
 <rt>An abstract language for describing documents and applications
</ruby>

4.5.11 The rt element

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 中的标签省略:
An rt 元素的 结束标签 可以省略,如果该 rt 元素后面紧跟着一个 rtrp 元素,或者如果父元素中没有更多内容。
内容属性:
全局属性
无障碍考虑:
给作者的建议
给实现者的建议
净化
默认
DOM 接口:
使用 HTMLElement

The rt 元素标记了 ruby 注释的 ruby 文本组件。当它是 ruby 元素的子元素时,它本身并不 代表 任何东西,但 ruby 元素使用它作为确定 代表什么的一部分。

An rt element that is not a child of a ruby element 代表 与它的子元素相同的东西。

4.5.12 The rp element

Element/rp

Support in all current engines.

Firefox38+Safari5+Chrome5+
Opera?Edge79+
Edge (旧版)?Internet Explorer5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别:
无。
可以使用该元素的上下文:
作为 ruby 元素的子元素,紧接在 rt 元素之前或之后。
内容模型:
文本
在 text/html 中的标签省略:
An rp 元素的 结束标签 可以省略,如果该 rp 元素后面紧跟着一个 rt 元素或另一个 rp 元素,或者父元素中没有更多内容。
内容属性:
全局属性
可访问性考虑:
给作者的建议
给实施者的建议
净化
默认
DOM 接口:
使用 HTMLElement

The rp 元素可用于为 ruby 注释的 ruby 文本组件提供括号或其他内容,以供不支持 ruby 注释的用户代理显示。

An rp element that is a child of a ruby element represents 元素的 rp element whose parent element is not a ruby element represents its children.

上面的示例中,文本 漢字 中的每个汉字都附有其语音读音,可以扩展为使用 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 The data element

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

Support in all current engines.

火狐22+Safari10+Chrome62+
Opera?Edge79+
Edge(旧版)14+Internet Explorer不支持
火狐 Android?Safari iOS?Chrome Android?WebView Android?三星浏览器 Android?Opera Android?
类别:
流内容.
短语内容.
可触及内容.
此元素可以使用的上下文:
在期望出现 短语内容 的地方。
内容模型:
短语内容.
在 text/html 中的标签省略:
没有标签是可省略的。
内容属性:
全局属性
value — 机器可读的值
无障碍考虑:
对于作者.
对于实现者.
净化
默认 ,且具有 属性 value
DOM 接口:
[Exposed=Window]
interface HTMLDataElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute DOMString value;
};

The data 元素 表示 其内容,并在 value 属性中提供这些内容的机器可读形式。

The value 属性必须存在。其值必须是元素内容的机器可读格式的表示。

当值与日期或时间相关时,可以使用更具体的 time 元素。

该元素可以用于多种目的。

与本规范中定义的微格式或 微数据属性 结合使用时,该元素可以为数据处理器提供机器可读的值,并为网页浏览器呈现提供人类可读的值。在这种情况下, value 属性中使用的格式由所使用的微格式或微数据词汇决定。

然而,该元素也可以与页面中的脚本一起使用,当脚本需要存储与人类可读值并存的字面值时。在这种情况下,所使用的格式仅取决于脚本的需要。( data-* 属性在这种情况下也可能有用。)

在这里,一个简短的表格使用了 data 元素对其数字值进行编码,以便表格排序的 JavaScript 库可以在每列上提供排序机制,尽管这些数字在一列中以文本形式呈现,而在另一列中以分解形式呈现。

<script src="sortable.js"></script>
<table class="sortable">
 <thead> <tr> <th> Game <th> Corporations <th> Map Size
 <tbody>
  <tr> <td> 1830 <td> <data value="8">Eight</data> <td> <data value="93">19+74 hexes (93 total)</data>
  <tr> <td> 1856 <td> <data value="11">Eleven</data> <td> <data value="99">12+87 hexes (99 total)</data>
  <tr> <td> 1870 <td> <data value="10">Ten</data> <td> <data value="149">4+145 hexes (149 total)</data>
</table>

4.5.14 The time 元素

元素/time

所有当前引擎的支持。

Firefox22+Safari7+Chrome62+
Opera49+Edge79+
Edge (旧版)18Internet Explorer
Firefox Android?Safari iOS4+Chrome Android?WebView Android?Samsung Internet?Opera Android46+

HTMLTimeElement

所有当前引擎的支持。

Firefox22+Safari10+Chrome62+
Opera49+Edge79+
Edge (旧版)14+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android46+

HTMLTimeElement/dateTime

Support in all current engines.

火狐22+Safari10+Chrome62+
Opera49+Edge79+
Edge(旧版)14+Internet Explorer不支持
火狐 Android?Safari iOS?Chrome Android?WebView Android?三星浏览器 Android?Opera Android46+
类别:
流内容.
短语内容.
可感知内容.
此元素可以使用的上下文:
在期望有 短语内容 的地方。
内容模型:
如果元素有一个 datetime 属性: 短语内容.
否则: 文本,但必须符合下面文本中的要求。
在 text/html 中的标签省略:
没有标签是可以省略的。
内容属性:
全局属性
datetime — 机器可读值
可访问性考虑:
作者
实现者
净化
默认 ,且具有 属性 datetime
DOM 接口:
[Exposed=Window]
interface HTMLTimeElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute DOMString dateTime;
};

The time 元素 表示 它的 内容,以及这些内容的机器可读形式,存储在 datetime 属性中。内容的类型限制为各种日期、时间、时区偏移和 持续时间,如下所述。

The datetime 属性可能存在。如果存在,其值必须是元素内容的机器可读格式。

A time element that does not have a datetime content attribute must not have any element descendants.

The datetime 值time 元素是元素的 datetime 内容属性的值,如果有的话,否则是 子文本内容 of the time element.

The datetime 值time 元素必须符合以下之一的语法。

一个 有效的月份字符串
<time>2011-11</time>
一个 有效的日期字符串
<time>2011-11-18</time>
一个 有效的无年份日期字符串
<time>11-18</time>
一个 有效的时间字符串
<time>14:54</time>
<time>14:54:39</time>
<time>14:54:39.929</time>
一个 有效的本地日期和时间字符串
<time>2011-11-18T14:54</time>
<time>2011-11-18T14:54:39</time>
<time>2011-11-18T14:54:39.929</time>
<time>2011-11-18 14:54</time>
<time>2011-11-18 14:54:39</time>
<time>2011-11-18 14:54:39.929</time>

没有时区偏移的带日期时间字符串对于指定在一天内各时区中相同具体时间发生的事件是有用的。例如,2020年新年是在2020-01-01 00:00在每个时区庆祝,而不是在所有时区的同一精确时刻庆祝。对于在所有时区同时发生的事件,例如视频会议,一个 有效的全球日期和时间字符串 可能更有用。

一个 有效的时区偏移字符串
<time>Z</time>
<time>+0000</time>
<time>+00:00</time>
<time>-0800</time>
<time>-08:00</time>

对于没有日期的时间(或指代在多个日期重复的事件的时间),指定控制时间的地理位置通常比指定时区偏移更有用,因为地理位置会随夏令时改变时区偏移。在某些情况下,地理位置甚至会改变时区,例如在2011年底萨摩亚发生的时区调整。存在一个描述时区边界及每个时区内适用规则的数据库,称为 时区数据库[TZDATABASE]

一个 有效的全球日期和时间字符串
<time>2011-11-18T14:54Z</time>
<time>2011-11-18T14:54:39Z</time>
<time>2011-11-18T14:54:39.929Z</time>
<time>2011-11-18T14:54+0000</time>
<time>2011-11-18T14:54:39+0000</time>
<time>2011-11-18T14:54:39.929+0000</time>
<time>2011-11-18T14:54+00:00</time>
<time>2011-11-18T14:54:39+00:00</time>
<time>2011-11-18T14:54:39.929+00:00</time>
<time>2011-11-18T06:54-0800</time>
<time>2011-11-18T06:54:39-0800</time>
<time>2011-11-18T06:54:39.929-0800</time>
<time>2011-11-18T06:54-08:00</time>
<time>2011-11-18T06:54:39-08:00</time>
<time>2011-11-18T06:54:39.929-08:00</time>
<time>2011-11-18 14:54Z</time>
<time>2011-11-18 14:54:39Z</time>
<time>2011-11-18 14:54:39.929Z</time>
<time>2011-11-18 14:54+0000</time>
<time>2011-11-18 14:54:39+0000</time>
<time>2011-11-18 14:54:39.929+0000</time>
<time>2011-11-18 14:54+00:00</time>
<time>2011-11-18 14:54:39+00:00</time>
<time>2011-11-18 14:54:39.929+00:00</time>
<time>2011-11-18 06:54-0800</time>
<time>2011-11-18 06:54:39-0800</time>
<time>2011-11-18 06:54:39.929-0800</time>
<time>2011-11-18 06:54-08:00</time>
<time>2011-11-18 06:54:39-08:00</time>
<time>2011-11-18 06:54:39.929-08:00</time>

带日期和时区偏移的时间字符串对于指定特定事件或不固定在特定地理位置的虚拟活动是有用的。例如,小行星撞击的确切时间,或者在每天1400 UTC举行的一系列会议中的某次会议,无论世界上的任何特定部分是否遵守夏令时。对于时间随特定地理位置的本地时区偏移而变化的事件,结合该地理位置的 有效的本地日期和时间字符串 可能更有用。

一个 有效的周字符串
<time>2011-W47</time>
四个或更多 ASCII数字,其中至少有一个不是U+0030数字零(0)
<time>2011</time>
<time>0001</time>
一个 有效的持续时间字符串
<time>PT4H18M3S</time>
<time>4h 18m 3s</time>

元素内容的 机器可读等效 必须通过以下算法从元素的 datetime 值 获取:

  1. If parsing a month string from the element's datetime 值 returns a 月份,那就是机器可读的等效;返回。

  2. If parsing a date string from the element's datetime 值 returns a 日期,那就是机器可读的等效;返回。

  3. If parsing a yearless date string from the element's datetime 值 returns a 无年份日期,那就是机器可读的等效;返回。

  4. If parsing a time string from the element's datetime 值 returns a 时间,那就是机器可读的等效;返回。

  5. If parsing a local date and time string from the element's datetime 值 returns a 本地日期和时间,那就是机器可读的等效;返回。

  6. If parsing a time-zone offset string from the element's datetime 值 returns a 时区偏移,那就是机器可读的等效;返回。

  7. If parsing a global date and time string from the element's datetime 值 returns a 全球日期和时间,那就是机器可读的等效;返回。

  8. If parsing a week string from the element's datetime 值 returns a ,那就是机器可读的等效;返回。

  9. 如果元素的 datetime 值 仅由 ASCII 数字组成,其中至少一个不是 U+0030 DIGIT ZERO (0),那么机器可读的等效是这些数字的十进制解释,代表一个年份;返回。

  10. If parsing a duration string from the element's datetime 值 returns a 持续时间,那就是机器可读的等效;返回。

  11. 没有机器可读的等效。

上述提到的算法旨在设计成对于任何任意字符串 s,只有一个算法会返回一个值。更高效的方法可能是创建一个算法,能够在一次操作中解析所有这些数据类型;开发这样的算法留给读者作为练习。

The time 元素可以用于编码日期,例如在微格式中。以下展示了使用 time 元素的 hCalendar 变体来编码事件的一个假设方式:

<div class="vevent">
 <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
 <span class="summary">Web 2.0 Conference</span>:
 <time class="dtstart" datetime="2005-10-05">October 5</time> -
 <time class="dtend" datetime="2005-10-07">7</time>,
 at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>

在这里,使用了基于 Atom 词汇的虚构微数据词汇与 time 元素来标记博客文章的发布日期。

<article itemscope itemtype="https://n.example.org/rfc4287">
 <h1 itemprop="title">Big tasks</h1>
 <footer>Published <time itemprop="published" datetime="2009-08-29">two days ago</time>.</footer>
 <p itemprop="content">Today, I went out and bought a bike for my kid.</p>
</article>

在这个例子中,使用 time元素标记了另一篇文章的发布日期,这里使用了 schema.org 微数据词汇:

<article itemscope itemtype="http://schema.org/BlogPosting">
 <h1 itemprop="headline">Small tasks</h1>
 <footer>Published <time itemprop="datePublished" datetime="2009-08-30">yesterday</time>.</footer>
 <p itemprop="articleBody">I put a bike bell on her bike.</p>
</article>

在以下代码片段中,使用 time 元素以 ISO8601 格式编码一个日期,以便后续由脚本处理:

<p>Our first date was <time datetime="2006-09-23">a Saturday</time>.</p>

在第二个代码片段中,值包含一个时间:

<p>We stopped talking at <time datetime="2006-09-24T05:00-07:00">5am the next morning</time>.</p>

由页面加载的脚本(因此可以了解页面内部使用 time 元素标记日期和时间的约定)可以扫描整个页面,并查看其中所有的 time 元素,以创建一个日期和时间的索引。

例如,这个元素传达了字符串 "Friday" 以及附加的语义,表示 2011 年 11 月 18 日是与 "Friday" 相对应的日期:

Today is <time datetime="2011-11-18">Friday</time>.

在这个示例中,指定了太平洋标准时间(PST)时区的特定时间:

Your next meeting is at <time datetime="2011-11-18T15:00-08:00">3pm</time>.

4.5.15 The code 元素

Element/code

所有当前引擎都支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别:
流内容.
短语内容.
可感知内容.
此元素可以使用的上下文:
在期望有 短语内容 的地方。
内容模型:
短语内容.
在 text/html 中的标签省略:
没有标签可以省略。
内容属性:
全局属性
无障碍考虑:
针对作者.
针对实现者.
净化
默认
DOM 接口:
使用 HTMLElement.

The code 元素 表示 计算机代码的片段。这可以是 一个 XML 元素名称、一个文件名、一段计算机程序,或任何计算机能够识别的字符串。

没有正式的方法来指示标记的计算机代码的语言。希望标记 code 元素并标明所用语言的作者,例如,以便语法高亮脚本可以使用正确的规则,可以使用 class 属性,例如, 通过向元素添加以 "language-" 为前缀的类。

以下示例展示了如何在段落中使用该元素来标记元素名称和计算机代码,包括标点符号。

<p>The <code>code</code> element represents a fragment of computer
code.</p>

<p>When you call the <code>activate()</code> method on the
<code>robotSnowman</code> object, the eyes glow.</p>

<p>The example below uses the <code>begin</code> keyword to indicate
the start of a statement block. It is paired with an <code>end</code>
keyword, which is followed by the <code>.</code> punctuation character
(full stop) to indicate the end of the program.</p>

以下示例展示了如何使用 precode 元素标记一段代码。

<pre><code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code></pre>

在该示例中使用了一个类来指示所用的语言。

有关更多详细信息,请参见 pre 元素。

4.5.16 The 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.

The var 元素 表示 一个变量。这可以是数学表达式或编程上下文中的实际变量、一个表示常量的标识符、一个识别物理量的符号、一个函数参数,或仅仅是用作文中占位符的术语。

在下面的段落中,字母 "n" 被用作文中的变量:

<p>If there are <var>n</var> pipes leading to the ice
cream factory then I expect at <em>least</em> <var>n</var>
flavors of ice cream to be available for purchase!</p>

对于数学,特别是对于超出最简单表达式的情况,MathML 更为合适。然而, var 元素仍然可以用来引用在 MathML 表达式中提到的特定变量。

在这个示例中,展示了一个方程,图例中引用了方程中的变量。表达式本身使用 MathML 标记,但变量在图例中使用 var提及。

<figure>
 <math>
  <mi>a</mi>
  <mo>=</mo>
  <msqrt>
   <msup><mi>b</mi><mn>2</mn></msup>
   <mi>+</mi>
   <msup><mi>c</mi><mn>2</mn></msup>
  </msqrt>
 </math>
 <figcaption>
  Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of
  a triangle with sides <var>b</var> and <var>c</var>
 </figcaption>
</figure>

在这里,描述质量-能量等价的方程被用在句子中, var 元素被用来标记该方程中的变量和常量:

<p>Then she turned to the blackboard and picked up the chalk. After a few moment's
thought, she wrote <var>E</var> = <var>m</var> <var>c</var><sup>2</sup>. The teacher
looked pleased.</p>

4.5.17 The 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.

The samp 元素 表示 从另一个程序或计算系统中获取的示例或引用输出。

请参阅 prekbd 元素以获取更多详细信息。

该元素可以与 output 元素进行对比,后者可用于提供 Web 应用程序中的即时输出。

此示例显示了 samp 元素的内联用法:

<p>The computer said <samp>Too much cheese in tray
two</samp> but I didn't know what that meant.</p>

第二个示例展示了来自控制台程序的示例输出块。嵌套的 sampkbd 元素允许使用样式表对示例输出的特定元素进行样式设置。还有一些 samp 元素使用更详细的标记进行注释,以实现非常精确的样式设置。为此,使用了 span 元素。

<pre><samp><span class="prompt">jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown

<span class="prompt">jdoe@demo:~$</span> <span class="cursor">_</span></samp></pre>

第三个示例展示了一个输入块及其相应的输出。该示例使用了 codesamp 元素。

<pre>
<code class="language-javascript">console.log(2.3 + 2.4)</code>
<samp>4.699999999999999</samp>
</pre>

4.5.18 The kbd 元素

Element/kbd

支持所有当前引擎。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别:
流内容.
短语内容.
可触及内容.
可以使用此元素的上下文:
在期望有 短语内容 的地方。
内容模型:
短语内容.
在 text/html 中的标签省略:
两个标签都不可省略。
内容属性:
全局属性
无障碍考虑:
给作者的建议.
给实施者的建议.
净化
默认
DOM 接口:
使用 HTMLElement.

The kbd 元素 表示 用户输入(通常是键盘输入,但也可以用来表示其他输入,例如语音命令)。

kbd 元素嵌套在 samp 元素内时,它表示系统回显的输入。

kbd 元素 包含 一个 samp 元素时,它表示基于系统输出的输入,例如调用菜单项。

kbd 元素嵌套在另一个 kbd 元素内时,它表示一个实际的键或其他单一输入单元,具体取决于输入机制。

这里使用了 kbd 元素来指示需要按的键:

<p>To make George eat an apple, press <kbd><kbd>Shift</kbd> + <kbd>F3</kbd></kbd></p>

在第二个示例中,用户被指示选择特定的菜单项。外部的 kbd 元素标记了一块输入区域,内部的 kbd 元素表示每个单独的输入步骤,而其中的 samp 元素则指示这些步骤是基于系统显示的内容进行输入的,在这个例子中是菜单标签:

<p>To make George eat an apple, select
    <kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd>
</p>

这种精确度并不是必要的;以下示例也同样合适:

<p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p>

4.5.19 The sub and sup elements

元素/sub

所有当前浏览器均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

元素/sup

所有当前浏览器均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
分类:
流内容
短语内容
可触及内容
可以使用此元素的上下文:
在期望 短语内容 的地方。
内容模型:
短语内容
在 text/html 中的标签省略:
两个标签都不可省略。
内容属性:
全局属性
无障碍考虑:
The sub 元素: 给作者给实施者
The sup 元素: 给作者给实施者
净化
默认
DOM 接口:
使用 HTMLElement

The sup 元素 表示 上标,而 sub 元素 表示 下标。

这些元素只能用于标记具有特定含义的排版约定,而不是为了排版效果而使用。例如,将 subsup 元素用于 LaTeX 文档准备系统的名称是不适当的。一般来说,作者应仅在 缺少 这些元素会改变内容的含义时使用这些元素。

在某些语言中,上标是某些缩写的排版约定的一部分。

<p>Their names are
<span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span> and
<span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>.</p>

The sub 元素可以在 var 元素内使用,用于表示具有下标的变量。

在这里, sub 元素用于表示识别变量族中的变量的下标:

<p>The coordinate of the <var>i</var>th point is
(<var>x<sub><var>i</var></sub></var>, <var>y<sub><var>i</var></sub></var>).
For example, the 10th point has coordinate
(<var>x<sub>10</sub></var>, <var>y<sub>10</sub></var>).</p>

数学表达式经常使用下标和上标。建议作者使用 MathML 来标记数学内容,但如果不需要详细的数学标记,作者可以选择使用 subsup[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 The i element

元素/i

所有当前引擎均支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge(遗留版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别:
流内容.
短语内容.
可感知内容.
此元素可以使用的上下文:
期望出现的 短语内容
内容模型:
短语内容.
在 text/html 中的标签省略:
标签不可省略。
内容属性:
全局属性
无障碍考虑:
面向作者.
面向实现者.
净化
默认
DOM 接口:
使用 HTMLElement

The i 元素 表示 一段以另一种语气或情感的文本,或者以其他方式与正常的正文区分开来,表示一种不同的文本特质,如分类名称、术语、另一种语言的习惯用语、音译、思考或西方文本中的船名。

与主要文本不同的语言中的术语应使用 lang 属性(或在 XML 中, lang 属性在 XML 命名空间)进行注解。

下面的示例展示了 i 元素的用法:

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
<p>The term <i>prose content</i> is defined above.</p>
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

在以下示例中,梦境序列使用了 i 元素进行标记。

<p>Raymond tried to sleep.</p>
<p><i>The ship sailed away on Thursday</i>, he
dreamt. <i>The ship had many people aboard, including a beautiful
princess called Carey. He watched her, day-in, day-out, hoping she
would notice him, but she never did.</i></p>
<p><i>Finally one night he picked up the courage to speak with
her—</i></p>
<p>Raymond woke with a start as the fire alarm rang out.</p>

Authors can use the class attribute on the i element to identify why the element is being used, so that if the style of a particular use (e.g. dream sequences as opposed to taxonomic terms) is to be changed at a later date, the author doesn't have to go through the entire document (or series of related documents) annotating each use.

鼓励作者考虑是否有其他元素可能比 i 元素更适用,例如 em 元素用于标记强调,或者 dfn 元素用于标记术语的定义实例。

样式表可以用于格式化 i 元素,就像任何其他元素一样。因此, i 元素中的内容不一定会被斜体显示。

4.5.21 The b element

Element/b

所有当前浏览器均支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
分类:
流内容.
短语内容.
可感知内容.
可以使用此元素的上下文:
在期望出现 短语内容 的地方。
内容模型:
短语内容.
在 text/html 中的标签省略:
没有标签可以省略。
内容属性:
全局属性
无障碍考虑:
供作者参考.
供实施者参考.
净化
默认
DOM 接口:
使用 HTMLElement.

The b 元素 表示 一段文本,该文本被用来吸引注意,但不传达额外的重要性,也没有暗示其他的声音或情绪,例如文档摘要中的关键字、评论中的产品名称、交互式文本驱动软件中的操作词,或文章的引言。

以下示例展示了如何使用 b 元素来突出显示关键字,而不将其标记为重要:

<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>

在以下示例中,文本冒险中的对象通过使用 b 元素来突出显示其特殊性。

<p>You enter a small room. Your <b>sword</b> glows
brighter. A <b>rat</b> scurries past the corner wall.</p>

Another case where the b element is appropriate is in marking up the lede (or lead) sentence or paragraph. The following example shows how a 关于小猫领养一只兔子的BBC文章

<article>
 <h2>Kittens 'adopted' by pet rabbit</h2>
 <p><b class="lede">Six abandoned kittens have found an
 unexpected new mother figure — a pet rabbit.</b></p>
 <p>Veterinary nurse Melanie Humble took the three-week-old
 kittens to her Aberdeen home.</p>
[...]

As with the i element, authors can use the class attribute on the b element to identify why the element is being used, so that if the style of a particular use is to be changed at a later date, the author doesn't have to go through annotating each use.

The b element should be used as a last resort when no other element is more appropriate. In particular, headings should use the h1 to h6 elements, stress emphasis should use the em element, importance should be denoted with the strong element, and text marked or highlighted should use the mark element.

以下是 不正确 的用法:

<p><b>WARNING!</b> Do not frob the barbinator!</p>

在之前的例子中,正确的元素应该是 strong,而不是 b

样式表可以用于格式化 b 元素,就像可以重新样式化任何其他元素一样。因此, b 元素中的内容不一定会被加粗。

4.5.22 The u element

Element/u

在所有当前引擎中都支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge(遗留版)12+Internet Explorer
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别
流内容
措辞内容
可触及内容
此元素可用的上下文
在期望 措辞内容 的地方。
内容模型
措辞内容
文本/html 中的标签省略
两个标签都不可省略。
内容属性
全局属性
无障碍考虑
供作者参考
供实施者参考
净化
默认
DOM 接口
使用 HTMLElement

The u 元素 表示 一段文本,该文本具有未明确表达但显式呈现的非文本注释,例如在中文文本中标记该文本为专有名称(中文专有名称标记),或标记该文本为拼写错误。

在大多数情况下,另一个元素可能更合适:用于标记强调的,应该使用 em 元素;用于标记关键词或短语,根据上下文应使用 b 元素或 mark 元素;用于标记书名,应该使用 cite 元素;用于带有明确文本注释的标记,应该使用 ruby 元素;用于技术术语、分类名称、音译、思想,或在西方文本中标记船名,应该使用 i 元素。

在视觉呈现中, u 元素的默认渲染与超链接(下划线)的传统渲染相冲突。建议作者避免在可能与超链接混淆的情况下使用 u 元素。

在这个示例中,使用了 u 元素来标记一个拼写错误的词:

<p>The <u>see</u> is full of fish.</p>

4.5.23 The mark element

Element/mark

在所有当前引擎中都支持。

Firefox4+Safari5.1+Chrome7+
Opera11+Edge79+
Edge(遗留版)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别
流内容
措辞内容
可触及内容
此元素可用的上下文
在期望 措辞内容 的地方。
内容模型
措辞内容
文本/html 中的标签省略
两个标签都不可省略。
内容属性
全局属性
无障碍考虑
供作者参考
供实施者参考
净化
默认
DOM 接口
使用 HTMLElement

The mark 元素 表示 文档中一段被标记或高亮的文本,用于 参考 目的,因为它在另一上下文中的相关性。当在引文或从散文中引用的其他文本块中使用时,它表示一个原本不存在但已添加的高亮,以引起读者对文本中一部分的注意,这部分可能在原作者写作时未被认为重要,但现在正受到意料之外的关注。当在文档的主要散文中使用时,它表示文档中的一部分由于其对用户当前活动的相关性而被高亮。

这个示例展示了如何使用 mark 元素来引起对引文中特定部分的注意:

<p lang="en-US">Consider the following quote:</p>
<blockquote lang="en-GB">
 <p>Look around and you will find, no-one's really
 <mark>colour</mark> blind.</p>
</blockquote>
<p lang="en-US">As we can tell from the <em>spelling</em> of the word,
the person writing this quote is clearly not American.</p>

(然而,如果目标是标记该元素为拼写错误,使用 u 元素,可能带有一个类,将更为合适。)

另一个 mark 元素的示例是高亮显示匹配某些搜索字符串的文档部分。如果有人查看文档,而服务器知道用户正在搜索“kitten”这个词,则服务器可能会返回一个修改过的文档,其中一个段落如下所示:

<p>I also have some <mark>kitten</mark>s who are visiting me
these days. They're really cute. I think they like my garden! Maybe I
should adopt a <mark>kitten</mark>.</p>

在以下片段中,文本段落提到了代码片段的特定部分。

<p>The highlighted part below is where the error lies:</p>
<pre><code>var i: Integer;
begin
   i := <mark>1.1</mark>;
end.</code></pre>

这与 语法高亮是不同的,语法高亮更适合使用 span 元素。将两者结合,可以得到:

<p>The highlighted part below is where the error lies:</p>
<pre><code><span class=keyword>var</span> <span class=ident>i</span>: <span class=type>Integer</span>;
<span class=keyword>begin</span>
   <span class=ident>i</span> := <span class=literal><mark>1.1</mark></span>;
<span class=keyword>end</span>.</code></pre>

这是另一个示例,展示了如何使用 mark 来高亮显示原本未被强调的引用文本的一部分。在这个示例中,常见的排版惯例使得作者将引号中的 mark 元素明确地设置为斜体。

<style>
 blockquote mark, q mark {
   font: inherit; font-style: italic;
   text-decoration: none;
   background: transparent; color: inherit;
 }
 .bubble em {
   font: inherit; font-size: larger;
   text-decoration: underline;
 }
</style>
<article>
 <h1>She knew</h1>
 <p>Did you notice the subtle joke in the joke on panel 4?</p>
 <blockquote>
  <p class="bubble">I didn't <em>want</em> to believe. <mark>Of course
  on some level I realized it was a known-plaintext attack.</mark> But I
  couldn't admit it until I saw for myself.</p>
 </blockquote>
 <p>(Emphasis mine.) I thought that was great. It's so pedantic, yet it
 explains everything neatly.</p>
</article>

顺便提一下,注意这个示例中 em 元素和 mark element, which is highlighting a part for comment.

以下示例展示了标记文本片段的 重要性strong)与标记文本片段的 相关性mark)之间的区别。这是一本教科书的摘录,其中突出显示了与考试相关的部分。尽管安全警告可能很重要,但显然与考试无关。

<h3>Wormhole Physics Introduction</h3>

<p><mark>A wormhole in normal conditions can be held open for a
maximum of just under 39 minutes.</mark> Conditions that can increase
the time include a powerful energy source coupled to one or both of
the gates connecting the wormhole, and a large gravity well (such as a
black hole).</p>

<p><mark>Momentum is preserved across the wormhole. Electromagnetic
radiation can travel in both directions through a wormhole,
but matter cannot.</mark></p>

<p>When a wormhole is created, a vortex normally forms.
<strong>Warning: The vortex caused by the wormhole opening will
annihilate anything in its path.</strong> Vortexes can be avoided when
using sufficiently advanced dialing technology.</p>

<p><mark>An obstruction in a gate will prevent it from accepting a
wormhole connection.</mark></p>

4.5.24 The bdi element

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.

The bdi 元素 表示 一段文本,这段文本将从其周围环境中隔离开来,以便进行双向文本格式化。 [BIDI]

The dir 全局属性在此元素上默认为 auto (它不会像其他元素那样从父元素继承)。

此元素 具有涉及双向算法的渲染要求

此元素在嵌入方向性未知的用户生成内容时特别有用。

在此示例中,显示了用户名以及用户提交的帖子数量。如果没有使用 bdi 元素,阿拉伯语用户的用户名将会混淆文本(双向算法会把冒号和数字“3”放在“User”一词旁边,而不是放在“posts”一词旁边)。

<ul>
 <li>User <bdi>jcranmer</bdi>: 12 posts.
 <li>User <bdi>hober</bdi>: 5 posts.
 <li>User <bdi>إيان</bdi>: 3 posts.
</ul>
使用 bdi 元素时,用户名的表现如预期。
如果将 bdi 元素替换为 b 元素,则用户名会混淆双向算法,第三个项目符号会显示为“User 3 :”,后面跟着阿拉伯名字(从右到左),然后是“posts”和句号。

4.5.25 The bdo 元素

Element/bdo

在所有当前引擎中都支持。

Firefox10+Safari4+Chrome15+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别:
流内容
措辞内容
可感知内容
可以使用该元素的上下文:
在需要 措辞内容 的地方。
内容模型:
措辞内容
在 text/html 中的标签省略:
没有标签可以省略。
内容属性:
全局属性
此外, dir 全局属性在该元素上具有特殊语义。
无障碍考虑:
对于作者
对于实施者
净化
默认
DOM 接口:
使用 HTMLElement

The bdo 元素 表示 对其子元素的显式文本方向格式控制。它允许作者通过显式指定方向覆盖来覆盖 Unicode 双向算法。 [BIDI]

作者必须在该元素上指定 dir 属性,值为 ltr 以指定从左到右的覆盖,值为 rtl 以指定从右到左的覆盖。 auto 值不得指定。

该元素 具有涉及双向算法的渲染要求

4.5.26 The 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?
类别:
流式内容.
短语内容.
可感知内容.
此元素可使用的上下文:
在期望有 短语内容 is expected.
内容模型:
短语内容
text/html 中标签省略:
Neither tag is omissible.
内容属性:
全局属性
可访问性注意事项:
针对作者.
针对实现者.
净化
默认
DOM 接口:
[Exposed=Window]
interface HTMLSpanElement : HTMLElement {
  [HTMLConstructor] constructor();
};

The span 元素本身没有特定含义,但与 全局属性(例如 classlangdir)一起使用时非常有用。它 表示 其子元素。

在这个示例中,代码片段使用了 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 The br element

Element/br

所有当前引擎的支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLBRElement

所有当前引擎的支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
流内容.
措辞内容.
可以使用该元素的上下文:
在需要 措辞内容 的地方。
内容模型:
.
在 text/html 中的标签省略:
没有 结束标签
内容属性:
全局属性
无障碍考虑:
对于作者.
对于实施者.
净化
默认
DOM 接口:
[Exposed=Window]
interface HTMLBRElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

The br 元素 表示 一个换行符。

虽然换行符在视觉媒体中通常通过将后续文本物理移动到新行来表示,但样式表或用户代理同样可以将换行符以其他方式呈现,例如作为绿色点或额外的间距。

br 元素只能用于实际作为内容一部分的换行符,例如在诗歌或地址中。

以下示例是正确使用 br 元素:

<p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p>

br 元素不得用于分隔段落中的主题组。

以下示例是不符合规范的,因为它们滥用了 br 元素:

<p><a ...>34 comments.</a><br>
<a ...>Add a comment.</a></p>
<p><label>Name: <input name="name"></label><br>
<label>Address: <input name="address"></label></p>

以下是上述情况的替代方案,这些方案是正确的:

<p><a ...>34 comments.</a></p>
<p><a ...>Add a comment.</a></p>
<p><label>Name: <input name="name"></label></p>
<p><label>Address: <input name="address"></label></p>

如果一个 段落 仅包含一个 br 元素,它 代表一个占位的空白行(例如在模板中)。这样的空白行不应被用于呈现目的。

任何在 br 元素内部的内容 不应被视为周围文本的一部分。

这个元素 有涉及双向算法的呈现要求

4.5.28 The 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

The wbr 元素 表示 一种换行机会。

在以下示例中,有人引用了某句话,这句话为了效果被写成了一个长单词。然而,为了确保文本可以以可读的方式换行,这句话中的单词使用了 wbr 元素进行分隔。

<p>So then she pointed at the tiger and screamed
"there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me"!</p>

任何在 wbr 元素内的内容都不应被视为周围文本的一部分。

var wbr = document.createElement("wbr");
wbr.textContent = "This is wrong";
document.body.appendChild(wbr);

该元素 具有涉及双向算法的渲染要求

4.5.29 使用总结

本节为非规范性内容。

元素 用途 示例
a 超链接
Visit my <a href="drinks.html">drinks</a> page.
em 强调重音
I must say I <em>adore</em> lemonade.
strong 重要性
This tea is <strong>very hot</strong>.
small 附带评论
These grapes are made into wine. <small>Alcohol is addictive.</small>
s 不准确的文本
Price: <s>£4.50</s> £2.00!
cite 作品标题
The case <cite>Hugo v. Danielle</cite> is relevant here.
q 引用
The judge said <q>You can drink water from the fish tank</q> but advised against it.
dfn 定义实例
The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals.
abbr 缩写
Organic food in Ireland is certified by the <abbr title="Irish Organic Farmers and Growers Association">IOFGA</abbr>.
ruby, rt, rp 注音标注
<ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby>
data 机器可读的等价物
Available starting today! <data value="UPC:022014640201">North Coast Organic Apple Cider</data>
time 日期或时间相关数据的机器可读等价物
Available starting on <time datetime="2011-11-18">November 18th</time>!
code 计算机代码
The <code>fruitdb</code> program can be used for tracking fruit production.
var 变量
If there are <var>n</var> fruit in the bowl, at least <var>n</var>÷2 will be ripe.
samp 计算机输出
The computer said <samp>Unknown error -3</samp>.
kbd 用户输入
Hit <kbd>F1</kbd> to continue.
sub 下标
Water is H<sub>2</sub>O.
sup 上标
The Hydrogen in heavy water is usually <sup>2</sup>H.
i 替代声音
Lemonade consists primarily of <i>Citrus limon</i>.
b 关键词
Take a <b>lemon</b> and squeeze it with a <b>juicer</b>.
u 注解
The mixture of apple juice and <u class="spelling">eldeflower</u> juice is very pleasant.
mark 高亮
Elderflower cordial, with one <mark>part</mark> cordial to ten <mark>part</mark>s water, stands a<mark>part</mark> from the rest.
bdi 文本方向隔离
The recommended restaurant is <bdi lang="">My Juice Café (At The Beach)</bdi>.
bdo 文本方向格式化
The proposal is to write English, but in reverse order. "Juice" would become "<bdo dir=rtl>Juice</bdo>">
span 其他
In French we call it <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 介绍

链接是一个概念性构造,通过 aareaformlink 元素创建,这些元素 表示 两个资源之间的连接,其中一个是当前的 Document。在 HTML 中有三种类型的链接:

外部资源链接

这些链接指向需要用来增强当前文档的资源,通常由用户代理自动处理。所有 外部资源链接 都具有 获取和处理链接资源 算法,用于描述如何获取资源。

超链接

这些链接指向其他资源,通常由用户代理向用户公开,以便用户可以使用户代理 导航 到这些资源,例如访问它们或下载它们。

内部资源链接

这些链接指向当前文档中的资源,用于赋予这些资源特殊的意义或行为。

对于具有 link 元素、 href 属性和 rel 属性的链接,必须为 rel 属性的关键字创建链接,这些关键字在 链接类型 部分中定义。

类似地,对于具有 aarea 元素、 href 属性和 rel 属性的链接,必须为 rel 属性的关键字创建链接,这些关键字在 链接类型 部分中定义。然而,与 link 元素不同的是, aarea 元素如果具有 href 属性,但没有 rel 属性,或者其 rel 属性没有定义为指定 超链接的关键字,也必须创建一个 超链接。这种隐含的超链接没有特殊意义(它没有 链接类型),仅仅是将元素的 节点文档 链接到元素的 href 属性指定的资源。

类似地,对于具有 form 元素和 rel 属性的链接,必须为 rel 属性的关键字创建链接,这些关键字在 链接类型 section. form elements that do not have a rel attribute, or whose rel 属性没有定义为指定 超链接的关键字,也必须创建一个 超链接

一个 超链接 可以有一个或多个 超链接注解 ,这些注解修改该超链接的处理语义。

The href 属性在 aarea 元素上必须具有一个 有效的 URL,可能被空格包围的值。

The href 属性在 aarea 元素上不是必需的;当这些元素没有 href 属性时,它们不会创建超链接。

The target 属性(如果存在)必须是 有效的可导航目标名称或关键字。它给出了将使用的 可导航目标 的名称。用户代理在 跟随超链接时使用此名称。

The 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?

The ping 属性(如果存在)提供了希望在用户跟随超链接时收到通知的资源的 URL。其值必须是一个 用空格分隔的令牌集合,每个令牌必须是一个 有效的非空 URL ,其 方案 必须是 HTTP(S) 方案。该值由用户代理用于 超链接审计

The rel 属性在 aarea 元素上控制元素创建的链接类型。属性值必须是一个 无序的唯一空格分隔令牌集合允许的关键词及其含义 在下文定义。

rel支持的令牌HTML 链接类型 中定义的允许在 aarea 元素上使用的关键词,这些关键词影响处理模型,并由用户代理支持。可能的 支持的令牌 包括 noreferrernoopeneropenerrel支持的令牌 必须仅包括用户代理实现处理模型的令牌。

The rel 属性没有默认值。如果省略该属性,或者属性中的值都未被用户代理识别,则文档与目标资源之间没有特定的关系,只是两个之间存在一个超链接。

The referrerpolicy 属性是一个 referrer 策略属性. Its purpose is to set the referrer policy used when 跟随超链接. [REFERRERPOLICY]


aarea 元素的 激活行为 被触发时,用户代理可以允许用户表示是否希望将超链接用于 导航 ,或者是否希望下载指定的资源。

在没有用户偏好的情况下,如果元素没有 download 属性,则默认行为应为导航;如果元素具有该属性,则默认行为应为下载指定的资源。

The activation behavior of an aarea element element given an event event 时为:

  1. 如果 element 没有 href 属性,则返回。

  2. hyperlinkSuffix 设为null。

  3. 如果 elementa 元素,并且 event目标 is an img with an ismap attribute specified:

    1. xy 设为0。

    2. 如果 eventisTrusted 属性被初始化为true,则将 x 设为图像左边缘到点击位置的距离(以 CSS 像素 为单位),将 y 设为图像上边缘到点击位置的距离(以 CSS 像素 为单位)。

    3. 如果 x 为负,则将 x 设为0。

    4. 如果 y 为负,则将 y 设为0。

    5. hyperlinkSuffix 设为U+003F(?)、 x 的值(以十进制整数形式使用 ASCII 数字表示)、U+002C(,)和 y 的值(以十进制整数形式使用 ASCII 数字表示)的拼接。

  4. userInvolvement 设为 event用户导航参与

  5. 如果用户表示了下载超链接的偏好,则将 userInvolvement 设为"browser UI"。

    即,如果用户表示了特定的下载偏好,这不再被视为仅仅是"activation"。

  6. 如果 element 具有 download 属性,或者用户表示了下载超链接的偏好,则 download the hyperlink created by element with hyperlinkSuffix 设为 hyperlinkSuffix ,将 userInvolvement 设为 userInvolvement

  7. 否则, follow the hyperlink created by element with 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 的 scheme。

可以设置,以更改 URL 的 scheme。

hyperlink.username

HTMLAnchorElement/username

所有当前引擎均支持。

Firefox26+Safari10+Chrome32+
Opera?Edge79+
Edge (旧版)?Internet Explorer不支持
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLAreaElement/username

所有当前引擎均支持。

Firefox26+Safari10+Chrome32+
Opera?Edge79+
Edge (旧版)?Internet Explorer不支持
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回超链接的 URL 的用户名。

可以设置,以更改 URL 的用户名。

hyperlink.password

HTMLAnchorElement/password

所有当前引擎均支持。

Firefox26+Safari10+Chrome32+
Opera?Edge79+
Edge (旧版)?Internet Explorer不支持
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLAreaElement/password

所有当前引擎均支持。

Firefox26+Safari10+Chrome32+
Opera?Edge79+
Edge (旧版)?Internet Explorer不支持
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回超链接的 URL 的密码。

可以设置,以更改 URL 的密码。

hyperlink.host

HTMLAnchorElement/host

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLAreaElement/host

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回超链接的 URL 的主机和端口(如果与 scheme 的默认端口不同)。

可以设置,以更改 URL 的主机和端口。

hyperlink.hostname

HTMLAnchorElement/hostname

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLAreaElement/hostname

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回超链接的 URL 的主机。

可以设置,以更改 URL 的主机。

hyperlink.port

HTMLAnchorElement/port

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLAreaElement/port

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回超链接的 URL 的端口。

可以设置,以更改 URL 的端口。

hyperlink.pathname

HTMLAnchorElement/pathname

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLAreaElement/pathname

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回超链接的 URL 的路径。

可以设置,以更改 URL 的路径。

hyperlink.search

HTMLAnchorElement/search

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLAreaElement/search

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回超链接的 URL 的查询(包括前导的 "?",如果非空)。

可以设置,以更改 URL 的查询(忽略前导的 "?")。

hyperlink.hash

HTMLAnchorElement/hash

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLAreaElement/hash

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回超链接的 URL 的片段(包括前导的 "#",如果非空)。

可以设置,以更改 URL 的片段(忽略前导的 "#")。

实现 HyperlinkElementUtils mixin 的元素是 超链接 元素

A 超链接元素 具有一个 关联的 url (null 或一个 URL)。它最初为 null。

A 超链接元素 具有以下 提取源 步骤:

  1. 如果 thisurl 为 null,则 返回 null。

  2. 返回 thisurl

A 超链接元素 必须具有一个 关联的 设置 url 算法。

超链接元素 被 创建时,用户代理 必须 设置 url

A 超链接元素 具有一个 关联的 重新初始化 url 算法,该算法运行以下 步骤:

  1. 如果该元素的 url 非 null,其 方案 为“blob”,并且它具有 不透明路径,则终止这些步骤。

  2. 设置 url

A 超链接元素 必须具有一个 关联的 更新 href 算法。

The hreflang attribute on hyperlink elements that create 超链接的 元素上,则给出被链接资源的 语言。它纯粹是建议性的。该值必须是有效的 BCP 47 语言标签。 [BCP47] 用户代理不得 认为该属性具有权威性——在获取该 资源时,用户代理必须仅使用与该资源相关联的语言信息来确定 其语言,而不是链接到该资源的链接中包含的元数据。

The type attribute on hyperlink elements, if present, gives the MIME 类型 。它纯粹是建议性的。该值必须是 有效的 MIME 类型字符串。用户代理不得认为 type 属性 具有权威性——在获取该 资源时,用户代理不得使用链接到该资源的链接中包含的元数据来确定其 类型。


The origin 的 getter步骤如下:

  1. 重新初始化 url

  2. 如果 thisurl 为 null,则返回空字符串。

  3. 返回 序列化 of thisurlorigin

The protocol 的 getter步骤如下:

  1. 重新初始化 url

  2. 如果 thisurl 为 null,则返回 ":"。

  3. 返回 thisurlscheme,后接 ":"。

The protocol 的 setter步骤如下:

  1. 重新初始化 url

  2. 如果 thisurl 为 null,则返回。

  3. 基本URL解析 给定值,后接":",以 thisurlurl ,以 scheme start statestate override

    因URL解析器会忽略多个连续冒号,若提供"https:"(甚至"https::::")与 提供"https"效果相同。

  4. 更新 href

The username 的 getter步骤如下:

  1. 重新初始化 url

  2. 如果 thisurl 为 null,则返回空字符串。

  3. 返回 thisurl用户名

The username 的 setter步骤如下:

  1. 重新初始化 url

  2. urlthisurl

  3. url 为 null 或 url 不可拥有用户名/密码/端口,则返回。

  4. 设置用户名,给定 url 与给定值。

  5. 更新 href

The password 的 getter步骤如下:

  1. 重新初始化 url

  2. urlthisurl

  3. url 为 null,则返回空字符串。

  4. 返回 url密码

The password 的 setter步骤如下:

  1. 重新初始化 url

  2. urlthisurl

  3. url 为 null 或 url 不可拥有用户名/密码/端口,则返回。

  4. 设置密码,给定 url 与给定值。

  5. 更新 href

The host 的 getter步骤如下:

  1. 重新初始化 url

  2. urlthisurl

  3. urlurl主机 为 null,则返回空字符串。

  4. url端口 为 null,返回 url主机序列化

  5. 返回 url主机序列化,后接 ":"与 url端口序列化

The host 的 setter步骤如下:

  1. 重新初始化 url

  2. urlthisurl

  3. url 为 null 或 url 拥有 不透明路径,则返回。

  4. 基本URL解析 给定值,以 urlurlhost statestate override

  5. 更新 href

The hostname 的 getter步骤如下:

  1. 重新初始化 url

  2. urlthisurl

  3. urlurl主机 为 null,则返回空字符串。

  4. 返回 url主机序列化

The hostname 的 setter步骤如下:

  1. 重新初始化 url

  2. urlthisurl

  3. url 为 null 或 url 拥有 不透明路径,则返回。

  4. 基本URL解析 给定值,以 urlurlhostname statestate override

  5. 更新 href

The port 的 getter步骤如下:

  1. 重新初始化 url

  2. urlthisurl

  3. urlurl端口 为 null,则返回空字符串。

  4. 返回 url端口序列化

The port 的 setter步骤如下:

  1. 重新初始化 url

  2. urlthisurl

  3. url 为 null 或 url 不可拥有用户名/密码/端口,则返回。

  4. 若给定值为空字符串,则令 url端口 为 null。

  5. 否则, 基本URL解析 给定值,以 urlurlport statestate override

  6. 更新 href

The pathname 的 getter步骤如下:

  1. 重新初始化 url

  2. urlthisurl

  3. url 为 null,则返回空字符串。

  4. 返回 URL 路径序列化 url的结果。

The pathname 的 setter步骤如下:

  1. 重新初始化 url

  2. urlthisurl

  3. url 为 null 或 url 拥有 不透明路径,则返回。

  4. 设置 url路径 为空列表。

  5. 基本URL解析 给定值,以 urlurlpath start statestate override

  6. 更新 href

The search 的 getter步骤如下:

  1. 重新初始化 url

  2. urlthisurl

  3. url 为 null,或 url查询 为 null 或空字符串,则 返回空字符串。

  4. 返回 "?",后接 url查询

The search 的 setter步骤如下:

  1. 重新初始化 url

  2. urlthisurl

  3. url 为 null,则终止这些步骤。

  4. 若给定值为空字符串,则设置 url查询 为 null。

  5. 否则:

    1. input 为给定值,若有单个前导"?"则移除。

    2. 设置 url查询 为空字符串。

    3. 基本URL解析 input,以 urlurlquery statestate override

  6. 更新 href

The hash 的 getter步骤如下:

  1. 重新初始化 url

  2. urlthisurl

  3. url 为 null,或 url片段 为 null 或空字符串,则返回空字符串。

  4. 返回 "#",后接 url片段

The hash 的 setter步骤如下:

  1. 重新初始化 url

  2. urlthisurl

  3. url 为 null,则返回。

  4. 若给定值为空字符串,则设置 url片段 为 null。

  5. 否则:

    1. input 为给定值,若有单个前导"#"则移除。

    2. 设置 url片段 为空字符串。

    3. 基本URL解析 input,以 urlurlfragment statestate override

  6. 更新 href

4.6.4 用于 aarea 元素

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 (Legacy)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 (Legacy)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 (Legacy)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 (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回超链接的 URL。

可以设置,以更改该 URL。

The href getter steps are:

  1. 重新初始化 url.

  2. urlthisurl

  3. 如果 url 为 null 且 this 没有 href 内容属性,则返回空字符串。

  4. 否则,如果 url 为 null,则返回 thishref 内容属性的值。

  5. 返回 url,并将其 序列化

The HTML element insertion steps for aarea elements, given insertedNode, are:

  1. 如果 insertedNode 未与文档 连接,则返回。

  2. Consider speculative loads given insertedNode节点文档.

The HTML element removing steps for aarea elements, given removedNode, isSubtreeRoot, and oldAncestor are:

  1. 如果 oldAncestor 未与文档 连接,则返回。

  2. Consider speculative loads given oldAncestor节点文档.

The HTML element moving steps for aarea elements, given movedNode, are:

  1. Consider speculative loads given movedNode节点文档.

The following 属性更改步骤,给定 elementlocalNameoldValuevaluenamespace, are used for all a and area elements:

  1. 如果 namespace 非 null,则返回。

  2. 如果 oldValue 等于 value,则返回。

  3. 如果 localNamehref,则 set the url given element.

    仅当为 blob: URL 时可观察到这一点,因为对它们进行 解析 涉及对 Blob URL 存储 的查找。

  4. 如果 localNamehrefreferrerpolicyrel, then consider speculative loads given element节点文档考虑推测性加载。

To update href for an HTMLAnchorElementHTMLAreaElement element, set the element's href 内容属性值设置为该元素的 url序列化后得到的结果。

The set the url algorithm for HTMLAnchorElementHTMLAreaElement elements is as follows:

  1. 将此元素的 url 设置为 null。

  2. 如果此元素的 href 内容属性不存在,则返回。

  3. url be the result of encoding-parsing a URL given this element's href 内容属性值相对于此元素的 节点文档.

  4. 如果 url 非失败(not failure),则将此元素的 url 设置为 url

如果满足以下任意条件,则元素 element 不能导航

这也被 表单提交 用于 form 元素。 a 元素的例外是为了与网页内容兼容。

To get an element's noopener, given an aareaform 元素 element, 一个 URL 记录 url, 以及一个字符串 target,请执行以下步骤。该过程返回一个布尔值。

  1. 如果 element链接类型 包含 noopenernoreferrer 关键字,则返回 true。

  2. 如果 element链接类型 不包含 opener 关键字,并且 target is an ASCII case-insensitive match for "_blank", then return true.

  3. 如果 urlblob URL 条目 不为 null:

    1. blobOriginurlblob URL 条目所在 环境来源.

    2. topLevelOriginelement相关设置对象顶级来源.

    3. 如果 blobOrigin is not same site with topLevelOrigin, then return true.

  4. 返回 false。

跟随由元素 created by an element subject创建的超链接,给定一个可选的 hyperlinkSuffix (默认值为 null)和一个可选的 userInvolvement (默认值为 "none"):

  1. 如果 subject 不能导航,则返回。

  2. targetAttributeValue 设置为空字符串。

  3. 如果 subjectaarea 元素,则将 targetAttributeValue 设置为 获取元素的目标 的结果,给定 subject

  4. urlRecord 为对 编码-解析 URL 的结果,该结果是基于 subjecthref 属性值,相对于 subject节点文档.

  5. 如果 urlRecord is failure, then return.

  6. noopener be the result of getting an element's noopener with subjecturlRecordtargetAttributeValue获取元素的 noopener 的结果。

  7. targetNavigable be the first return value of applying the rules for choosing a navigable given targetAttributeValuesubject's node navigable, and noopener

  8. 如果 targetNavigable 为 null,则返回。

  9. urlString be the result of applying the URL serializer to urlRecord.

  10. 如果 hyperlinkSuffix 不为 null,则将其附加到 urlString

  11. 导航 targetNavigableurlString ,使用 subject节点文档, 并将 referrerPolicy(引用策略) 设置为 subject超链接引用策略userInvolvement(用户参与) 设置为 userInvolvementsourceElement(源元素) 设置为 subject

    与许多其他类型的导航不同,跟随超链接在文档未完全加载时没有特殊的 "replace" behavior for when documents are not completely loaded. This is true for both user-initiated instances of following hyperlinks, as well as script-triggered ones via, e.g., aElement.click()触发的脚本导航。

The hyperlink referrer policy for an element subject is the value returned by the following steps:

  1. 如果 subject链接类型 包含 noreferrer 关键字, 则返回 "no-referrer".

  2. 返回 subjectreferrerpolicy content attribute.

4.6.5 下载资源

HTMLAnchorElement/download

所有当前引擎都支持。

Firefox20+Safari10.1+Chrome15+
Opera?Edge79+
Edge (旧版)13+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

In some cases, resources are intended for later use rather than immediate viewing. To indicate that a resource is intended to be downloaded for use later, rather than immediately used, the download attribute can be specified on the aarea element that creates the download to that resource.

此外,属性还可以指定一个值,以指定用户代理在将资源存储在文件系统中时应使用的文件名。这个值可以被Content-DispositionHTTP 头的文件名参数覆盖。 [RFC6266]

在跨源情况下, download 属性必须与Content-DispositionHTTP 头结合使用,特别是与 attachment 处置类型,以避免用户被警告可能的恶意活动。(这是为了保护用户免于在没有完全理解的情况下下载敏感的个人或机密信息。)


下载该超链接 ,由一个元素 subject创建,给定一个可选的 hyperlinkSuffix (默认为 null)和一个可选的 userInvolvement (默认为 "none")时:

  1. 如果 subject 无法导航,则返回。

  2. 如果 subject节点文档活动沙箱标志集 已设置 沙箱下载浏览上下文标志 ,则返回。

  3. urlString be the result of encoding-parsing-and-serializing a URL given subjecthref 属性值, 相对于 subject节点文档.

  4. 如果 urlString 为失败,则返回。

  5. 如果 hyperlinkSuffix 非空,则将其追加到 urlString

  6. 如果 userInvolvement 不是"browser UI",则:

    1. 断言subject 有一个 download 属性。

    2. navigationsubject相关全局对象导航API

    3. filenamesubjectdownload 属性的值。

    4. continue触发下载请求 navigate 事件 的结果,目标为 navigationdestinationURL 设为 urlStringuserInvolvement 设为 userInvolvementsourceElement 设为 subjectfilename 设为 filename

    5. 如果 continue 为false,则返回。

    6. Inform the navigation API about aborting navigation given subject节点可导航性.

  7. 按照 并行运行以下步骤:

    1. 可选地,用户代理可中止这些步骤,如果其认为这样做有助于防止潜在恶意下载以保护用户。

    2. request 为一个新的 请求 , 其 URLurlString客户端入口设置对象发起者 为"download", 目标 为空字符串,且 同步标志使用URL凭据标志 已设置。

    3. response获取 request的结果。

    4. Handle as a download response with subject节点可导航性 and null.

作为下载处理 一个 response response ,使用 可导航对象 navigable导航 ID 或 null navigationId

  1. suggestedFilename be the result of getting the suggested filename for response.

  2. download behavior be the result of WebDriver BiDi download will begin with navigable 和一个新的 WebDriver BiDi 导航状态 whose idnavigationIdstatus 为 "pending", urlresponseURLsuggestedFilenamesuggestedFilename

  3. 如果 download behavior 不为 null 且 download behaviorallowed 为 false:

    1. Invoke WebDriver BiDi download end with navigable 和一个新的 WebDriver BiDi 导航状态 , 其中 idnavigationIdstatus 为 "canceled", urlresponseURL.

    2. 返回。

  4. 如果 download behavior 不为 null,则令 destinationFolderdownload behaviordestinationFolder

  5. 以下步骤 并行运行

    1. 运行 实现自定义 步骤以保存 response 以便后续使用。 如果 destinationFolder 不为 null,用户代理应将文件保存到该路径。 如果用户代理需要文件名,则应使用 suggestedFilename

    2. 如果以下任一条件成立:

      • 下载被用户取消;

      • 下载被用户代理取消;

      • 发生错误(例如,网络错误、存储空间不足、目标文件夹不可用);

      则:

      1. Invoke WebDriver BiDi download end with navigable 和一个新的 WebDriver BiDi 导航状态 , 其中 idnavigationIdstatus 为 "canceled", urlresponseURL.

      2. 返回。

    3. When the download completes successfully, invoke WebDriver BiDi download end with navigable 和一个新的 WebDriver BiDi 导航状态 , 其中 idnavigationIdstatus 为 "complete", downloadedFilepath 为下载文件的绝对路径(如果有),否则为 null, urlresponseURL.

为了 获取建议的文件名 对于一个 响应 response

该算法旨在减轻从不信任的网站下载文件的安全风险,强烈建议用户代理遵循此算法。

  1. filename be the undefined value.

  2. 如果 response 有一个 `Content-Disposition` 头部,该头部指定了 attachment 附件类型,并且该头部中包含文件名信息,则令 filename 取该头部指定的值,并跳转到下面标记为 sanitize 的步骤。 [RFC6266]

  3. interface origin 为启动下载的 文档源 的源( Document in which the download or navigate action resulting in the download was initiated, if any.

  4. response origin be the origin of the URL of response, unless that URL's 方案 部分为 data,此时令 response origininterface origin, if any.

  5. 如果不存在 interface origin,则令 trusted operation 为 true;否则,当 response origininterface origin is the same origin as trusted operation, and false otherwise.

  6. 如果 trusted operation 为 true 且 response 有一个 `Content-Disposition` 头部且该头部包含文件名信息,则令 filename 取该头部指定的值,并跳转到下面标记为 sanitize 的步骤。 [RFC6266]

  7. 如果下载不是由一个由 超链接 (由 aarea element, or if the element of the hyperlink from which it was initiated did not have a download 属性,或存在该属性但其值为空,则跳转到标记为 no proposed filename.

  8. proposed filename 为触发下载的超链接元素上 download attribute of the element of the hyperlink that initiated the download at the time the download was initiated.

  9. 如果 trusted operation 为 true,则令 filenameproposed filename的值,并跳转到标记为 sanitize below.

  10. 如果 response 有一个 `Content-Disposition` 头部,并且该头部指定了 attachment 附件类型,则令 filenameproposed filename的值,并跳转到标记为 sanitize 的步骤。 [RFC6266]

  11. No proposed filename:如果 trusted operation 为 true,或者用户指定了希望下载该响应,则令 filename have a value derived from the URL of response in an 实现定义的方式 派生的值,并跳转到标记为 sanitize below.

  12. filename 设置为用户偏好的文件名或由用户代理选择的文件名,并跳转到标记为 sanitize below.

    如果算法执行到此步骤,则说明下载是从与 response不同的源发起的,该源没有将文件标记为适合下载,并且下载不是由用户发起的。这可能是因为使用了 download 属性来触发下载,或者因为 response 的类型不是用户代理所支持的类型。

    这可能会有危险,例如,一个敌意服务器可能试图诱使用户在不知情的情况下下载私人信息,然后将其重新上传到敌意服务器,通过使用户误以为数据来自敌意服务器。

    因此,为符合用户利益,用户应被通知 response 来自一个完全不同的源,并且为了防止混淆,应忽略来自潜在敌意 interface origin 的任何建议文件名。

  13. Sanitize:可选地,允许用户对 filename进行修改。例如,用户代理可以提示用户输入文件名,并可能以算法上确定的 filename as determined above as a default value.

  14. 调整 filename ,使其适合本地文件系统。

    例如,这可能涉及移除文件名中非法的字符,或者去除首尾空白字符。

  15. 如果平台约定中完全不使用 扩展名 来判定文件系统中文件的类型,则返回 filename as the filename.

  16. claimed typeresponseContent-Type 元数据给出的类型(如果已知)。令 named typefilename扩展名给出的类型(如果已知)。在本步骤中,一个 类型 指的是将一个 MIME 类型 映射到一个 扩展名.

  17. 如果 named type 与用户偏好一致(例如,因为 filename 是通过提示用户确定的),则返回 filename as the filename.

  18. 如果 claimed typenamed type 是同一类型(即 responseContent-Type 元数据filename扩展名一致),则返回 filename as the filename.

  19. 如果 claimed type 已知,则修改 filename to add an extension corresponding to claimed type.

    否则,如果已知 named type 是潜在危险的类型(例如,在平台约定中会被视作本机可执行文件、shell 脚本、HTML 应用程序或支持可执行宏的文档),则可选择修改 filename 以添加一个已知安全的 扩展名 (例如 ".txt")。

    这最后一步会导致无法下载可执行文件,这可能不是理想的做法。如同以往一样,实施者必须在安全性和可用性之间做出权衡。

  20. 返回 filename as the filename.

对于本算法的目的,文件 扩展名 指的是文件名中任何由平台约定用于识别文件类型的部分。例如,许多操作系统使用文件名中最后一个点(".")之后的部分来确定文件的类型,并从中决定文件的打开或执行方式。

用户代理在决定将生成的文件存储在用户文件系统中的位置时,应忽略响应本身提供的任何目录或路径信息、其 URL以及任何 download 属性。

If a hyperlink created by an aarea element has a ping 属性,并且用户跟随该超链接,而元素的 href attribute can be parsed, relative to the element's 节点文档, without failure, then the user agent must take the ping 属性的值, 在ASCII空白处拆分该字符串, parse each resulting token, relative to the element's 节点文档, and then run these steps for each resulting URL ping URL运行这些步骤,忽略解析返回失败的情况:

  1. 如果 ping URL方案 不是 HTTP(S) 方案,则返回。

  2. 可选地,返回。(例如,用户代理可能希望根据用户表达的偏好忽略任何或所有 ping URL。)

  3. settingsObject 成为元素的 节点文档相关设置对象

  4. request 成为一个新的 请求 ,其 URLping URL方法 是`POST`, 头部列表 是 « (`Content-Type`, `text/ping`) », 主体 是`PING`, 客户端settingsObject目标 是空字符串, 凭证模式 是`include`, 引用者 是`no-referrer", and whose 使用URL凭证标志 被设置,且 发起者类型 是`ping`。

  5. target URL be the result of encoding-parsing-and-serializing a URL given the element's href 属性的值,相对于元素的 节点文档, and then:

    If the URL of the Document object containing the hyperlink being audited and ping URL 具有 相同的来源
    If the origins are different, but the scheme of the URL of the Document containing the hyperlink being audited is not "https`
    request 必须包含一个`Ping-From`头部,其值为包含超链接的文档的 URL ,以及一个`Ping-To` HTTP头部,其值为 target URL
    否则
    request 必须包含一个`Ping-To` HTTP头部,其值为 target URLrequest 不包含`Ping-From`头部。
  6. 获取 request

这可以与主要获取操作 并行 进行,并且与该获取操作的结果无关。

用户代理应允许用户调整此行为,例如与禁用发送HTTP `Referer`(如所写)头部的设置结合使用。根据用户的偏好,用户代理可以完全 忽略 the ping 属性,或者有选择地忽略列表中的URL(例如,忽略任何第三方URL);这在上述步骤中已明确考虑。

用户代理必须忽略响应中返回的任何实体主体。一旦开始接收响应主体,用户代理可以提前关闭连接。

(This is a tracking vector.) An a 元素或 area element that creates a hyperlink and has the ping attribute is present, user agents may indicate to the user that following the hyperlink will also cause secondary requests to be sent in the background, possibly including listing the actual target URLs.

例如,可视化用户代理可在状态栏或工具提示中同时显示目标 ping URL 的主机名和该超链接的实际 URL。

The ping 属性与诸如 HTTP 重定向和 JavaScript 等现有技术在允许网页跟踪最流行站外链接或让广告商跟踪点击率方面功能冗余。

然而,与这些替代方式相比, ping 属性为用户提供了以下优势:

4.6.7.1 `Ping-From` 和 `Ping-To` 头部

`Ping-From` 和 `Ping-To` HTTP 请求头部包含在 超链接审计 请求中。它们的值是一个 URL序列化的。

4.6.8 链接类型

链接类型

所有当前引擎均支持。

Firefox1+Safari1+Chrome1+
Opera9+Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

Link_types

下表总结了本规范定义的链接类型及其对应的关键词。此表为非规范性表格;实际的链接类型定义将在接下来的几节中给出。

在本节中,术语 引用文档 指的是由表示链接的元素标识的资源,而术语 当前文档 指的是表示链接的元素所在的资源。

要确定哪些链接类型适用于 linkaareaform 元素,必须对元素的 rel 属性进行 ASCII 空格分割。生成的令牌即为适用于该元素的链接类型的关键词。

除非另有说明,否则每个 rel 属性中不得指定重复的关键词。

一些表格下方的部分会列出某些关键词的同义词。所指示的同义词应按用户代理指定的方式处理,但不得在文档中使用(例如,关键词"copyright")。

关键词总是 ASCII 不区分大小写,并且必须按此方式进行比较。

因此, rel="next"rel="NEXT"是相同的。

被标记为 body-ok 的关键词会影响 link 元素是否可以 出现在文档主体中body-ok 关键词包括 dns-prefetchmodulepreloadpingbackpreconnectprefetchpreloadstylesheet

需要由网页浏览器实现的新链接类型将被添加到此标准中。其余类型可以 注册为扩展

4.6.8.1 链接类型 "alternate"

备用样式表

仅在一个引擎中支持。

Firefox3+Safari?Chrome1–48
OperaYesEdgeNo
Edge (旧版)?Internet Explorer8+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The alternate 关键字可以与 linkaarea 元素一起使用。

这个关键字的含义取决于其他属性的值。

如果元素是 link 元素且 rel 属性也包含 stylesheet

The alternate 关键字会修改 stylesheet 关键字的含义,如该关键字的描述所示。 alternate 关键字不会创建自己的链接。

这里,一组 link 元素提供了一些样式表:

<!-- a persistent style sheet -->
<link rel="stylesheet" href="default.css">

<!-- the preferred alternate style sheet -->
<link rel="stylesheet" href="green.css" title="Green styles">

<!-- some alternate style sheets -->
<link rel="alternate stylesheet" href="contrast.css" title="High contrast">
<link rel="alternate stylesheet" href="big.css" title="Big fonts">
<link rel="alternate stylesheet" href="wide.css" title="Wide screen">
如果 alternate 关键字与 type 属性的值设置为 application/rss+xmlapplication/atom+xml

这个关键字创建了一个 超链接 ,引用了一个聚合源(虽然不一定与当前页面聚合完全相同的内容)。

为了进行源自动发现,用户代理应考虑文档中所有使用 link 元素且 alternate 关键字的元素,以及其 type 属性设置为 application/rss+xmlapplication/atom+xml的元素。如果用户代理有默认的聚合源概念,第一个这样的元素(按 树顺序)应作为默认。

以下 link 元素为博客提供了聚合源:

<link rel="alternate" type="application/atom+xml" href="posts.xml" title="Cool Stuff Blog">
<link rel="alternate" type="application/atom+xml" href="posts.xml?category=robots" title="Cool Stuff Blog: robots category">
<link rel="alternate" type="application/atom+xml" href="comments.xml" title="Cool Stuff Blog: Comments">

这样的 link 元素会被用于源自动发现,首先的元素(在适用情况下)作为默认。

以下示例提供了各种不同的聚合源给用户,使用了 a 元素:

<p>You can access the planets database using Atom feeds:</p>
<ul>
 <li><a href="recently-visited-planets.xml" rel="alternate" type="application/atom+xml">Recently Visited Planets</a></li>
 <li><a href="known-bad-planets.xml" rel="alternate" type="application/atom+xml">Known Bad Planets</a></li>
 <li><a href="unexplored-planets.xml" rel="alternate" type="application/atom+xml">Unexplored Planets</a></li>
</ul>

这些链接不会用于 feed 自动发现。

否则

该关键词创建一个引用当前文档的备用表示形式的 超链接

引用文档的性质由 hreflangtype 属性给出。

如果 alternate 关键词与 hreflang 属性一起使用,并且该属性的值与 文档元素语言不同,则表示引用的文档是一个翻译版本。

如果 alternate 关键词与 type 属性一起使用,则表示引用的文档是当前文档在指定格式中的重新表述。

The hreflangtype attributes can be combined when specified with the alternate keyword.

以下示例展示了如何指定使用替代格式、面向其他语言和其他媒体的页面版本:

<link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML">
<link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML">
<link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print title="English HTML (for printing)">
<link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)">
<link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="English PDF">
<link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF">

此关系是可传递的——即,如果一个文档链接到两个具有"alternate"链接类型的其他文档,那么,除了意味着这些文档是第一个文档的备用表示之外,还意味着这两个文档也是彼此的备用表示。

The author 关键字可以与 linkaarea 元素一起使用。这个关键字创建一个 超链接

对于 aarea 元素, author 关键字表示所引用的文档提供有关定义超链接的元素最近的 article 元素祖先的更多信息(如果有的话),否则提供有关整个页面的信息。

对于 link 元素, author 关键字表示所引用的文档提供有关整个页面的作者的更多信息。

"引用的文档" 可以是(并且通常是)一个 mailto: URL,提供作者的电子邮件地址。 [MAILTO]

同义词: For historical reasons, user agents must also treat linkaarea elements that have a rev attribute with the value "made" as having the author 关键字指定的链接关系。

The bookmark 关键字可以与 aarea 元素一起使用。这个关键字创建一个 超链接

bookmark 关键字为相关链接元素的最近祖先 article 元素提供一个永久链接;如果不存在祖先 article 元素,则为与该链接元素最密切关联的部分提供永久链接。

以下代码段有三个永久链接。用户代理可以通过查看永久链接的位置来确定哪个永久链接适用于规范的哪个部分。

 ...
 <body>
  <h1>Example of permalinks</h1>
  <div id="a">
   <h2>First example</h2>
   <p><a href="a.html" rel="bookmark">This permalink applies to
   only the content from the first H2 to the second H2</a>. The DIV isn't
   exactly that section, but it roughly corresponds to it.</p>
  </div>
  <h2>Second example</h2>
  <article id="b">
   <p><a href="b.html" rel="bookmark">This permalink applies to
   the outer ARTICLE element</a> (which could be, e.g., a blog post).</p>
   <article id="c">
    <p><a href="c.html" rel="bookmark">This permalink applies to
    the inner ARTICLE element</a> (which could be, e.g., a blog comment).</p>
   </article>
  </article>
 </body>
 ...

The canonical 关键字可以与 link 元素一起使用。这个关键字创建一个 超链接

The canonical 关键字表示由 href 属性给出的 URL 是当前文档的首选 URL。 这有助于搜索引擎减少重复内容,详细描述见 The Canonical Link Relation[RFC6596]

Link_types/dns-prefetch

Firefox3+Safari?Chrome46+
Opera?Edge79+
Edge (旧版)NoInternet Explorer?
Firefox Android?Safari iOS?Chrome AndroidYesWebView Android46+Samsung Internet?Opera Android?

The dns-prefetch 关键字可以与 link 元素一起使用。此关键字创建一个 外部资源链接。此关键字是 body-ok

The dns-prefetch 关键字表示,预先为指定资源的 执行DNS解析可能是有益的,因为用户很可能需要位于该 的资源,预先解决DNS解析的延迟成本将改善用户体验。

对于 dns-prefetch 关键字,没有默认的资源类型。

适合 获取和处理 此类链接的时间是:

此类型链接资源的 获取和处理 步骤,给定一个 link 元素 el,如下:

  1. url be the result of encoding-parsing a URL given elhref 属性值相对 el节点文档.

  2. 如果 url 解析失败,则返回。

  3. partitionKey be the result of determining the network partition key given el节点文档相关设置对象.

  4. The user agent should resolve an origin given partitionKeyurl.

    由于此算法的结果可以被缓存,因此将来的获取可能会更快。

The expect 关键字可用于 link 元素。此关键字创建一个 内部资源链接

An internal resource link created by the expect keyword can be used to 阻止渲染 ,直到它 指示的 元素连接到文档并完全解析。

There is no default type for resources given by the expect 关键字没有默认的资源类型。

link 元素 el发生以下任何情况时:

然后 处理 el

To process internal resource link given a link 元素 el, run these steps:

  1. doc 成为 el节点文档

  2. url be the result of encoding-parsing a URL given elhref attribute's value, relative to doc

  3. 如果这失败,或者如果 url等于 docURL ,且 排除片段 set to true, then unblock rendering on el and return.

  4. indicatedElement be the result of selecting the indicated part given docurl.

  5. 如果以下所有条件都为真:

    然后 阻止渲染 on el

  6. 否则, 取消阻止渲染 on el

To process internal resource links given a Document doc:

  1. 对于每个 expect link 元素 linkdoc渲染阻塞元素集中, 处理 link

以下的 属性更改步骤,给定 element(元素)、 localName(本地名称)、 oldValue(旧值)、 value(新值)和 namespace(命名空间),用于确保 expect link 元素能够响应动态的 idname 更改:

  1. 如果 namespace 不为null,则返回。

  2. 如果 element 位于一个 打开元素栈HTML解析器中,则返回。

  3. 如果以下任一条件为真:

    • localNameid;或者

    • localNamename ,并且 element 是一个 a 元素,

    然后 处理内部资源链接 给定 element节点文档

The external 关键字可用于 aareaform 元素。此关键字不会创建 超链接,但会 注释 由该元素创建的任何其他超链接(如果没有其他关键字创建,则为隐含超链接)。

The external 关键字表示该链接指向的文档不属于当前文档所在网站的一部分。

The help 关键字可用于 linkaareaform 元素。此关键字创建一个 超链接

对于 aareaform 元素, help 关键字表示引用的文档为定义超链接的元素的父元素及其子元素提供进一步的帮助信息。

在以下示例中,表单控件具有相关的上下文帮助。例如,当用户按下“帮助”或“F1”键时,用户代理可以使用此信息显示引用的文档。

 <p><label> Topic: <input name=topic> <a href="help/topic.html" rel="help">(Help)</a></label></p>

对于 link 元素, help 关键字表示引用的文档为整个页面提供帮助。

对于 aarea 元素,在某些浏览器中, help 关键字会使链接使用不同的光标。

4.6.8.9 链接类型 "icon"

Link_types#icon

Support in all current engines.

Firefox2+Safari3.1+Chrome4+
Opera9+Edge79+
Edge (旧版)12+Internet Explorer11
Firefox Android4+Safari iOSNoChrome Android18+WebView Android38+Samsung Internet4.0+Opera AndroidNo
caniuse.com table

The icon 关键字可用于 link 元素。此关键字创建一个 外部资源链接

指定的资源是代表页面或网站的图标,应该由用户代理在用户界面中代表页面时使用。

图标可以是听觉图标、视觉图标或其他类型的图标。如果提供了多个图标,用户代理必须根据 typemediasizes attributes. If there are multiple equally appropriate icons, user agents must use the last one declared in tree order at the time that the user agent collected the list of icons. If the user agent tries to use an icon but that icon is determined, upon closer examination, to in fact be inappropriate (e.g. because it uses an unsupported format), then the user agent must try the next-most-appropriate icon as determined by the attributes.

用户代理不要求在图标列表更改时更新图标,但鼓励这样做。

There is no default type for resources given by the icon 关键字没有默认的资源类型。然而,为了 确定资源类型,用户代理必须期望资源是图像。

The sizes 关键字表示图标的原始像素大小(相对于 CSS 像素)。

一个宽度为50 CSS 像素 的图标,适用于每个 CSS 像素 具有两个设备像素(2x,192dpi)的显示器,其宽度为100原始像素。此功能不支持指示在小高分辨率图标与大低分辨率图标之间使用不同的资源(例如50×50 2x与100×100 1x)。

要解析和处理属性的值,用户代理必须首先 在ASCII空白处拆分属性的值,然后必须解析每个结果关键字以确定它代表什么。

The any 关键字表示资源包含一个可缩放的图标,例如由SVG图像提供的图标。

其他关键字必须进一步解析如下,以确定它们代表什么:

  1. 如果关键字不包含一个U+0078拉丁小写字母x或U+0058拉丁大写字母X字符,则此关键字不代表任何内容。返回该关键字。

  2. width string 为"x"或"X"之前的字符串。

  3. height string 为"x"或"X"之后的字符串。

  4. 如果 width stringheight string 以U+0030数字零(0)字符开头或包含除 ASCII数字以外的任何字符,则此关键字不代表任何内容。返回该关键字。

  5. 应用 解析非负整数的规则width string 以获得 width

  6. 应用 解析非负整数的规则height string 以获得 height

  7. 关键字表示资源包含一个宽度为 width 设备像素、高度为 height 设备像素的位图图标。

The keywords specified on the sizes 属性中指定的关键字不得表示实际不可用的图标大小。

The linked resource fetch setup steps for this type of linked resource, given a link 元素 el请求 request, are:

  1. 设置 request目的地 为"image"。

  2. 返回true。

这种类型的链接资源的 处理链接头 步骤不执行任何操作。

在没有带有 linkicon keyword, for Document objects whose URL's scheme is an HTTP(S) scheme对象,用户代理可以改为 并行运行以下步骤:

  1. request 成为一个新的 请求 ,其 URL is the URL record obtained by resolving the URL "/favicon.ico" against the Document 对象的 URL客户端Document 对象的 相关设置对象目的地 为"image", 同步标志 被设置, 凭证模式 为"include",并且 使用URL凭证标志 被设置。

  2. response获取 request的结果。

  3. 使用 response不安全响应 作为图标,就像它是用 icon 关键字声明的一样。

以下代码片段显示了带有多个图标的应用程序顶部部分。

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>lsForums — Inbox</title>
  <link rel=icon href=favicon.png sizes="16x16" type="image/png">
  <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
  <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
  <link rel=icon href=iphone.png sizes="57x57" type="image/png">
  <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
  <link rel=stylesheet href=lsforums.css>
  <script src=lsforums.js></script>
  <meta name=application-name content="lsForums">
 </head>
 <body>
  ...

由于历史原因, icon 关键字前面可能有关键字"shortcut"。如果存在"shortcut"关键字,则 rel attribute's entire value must be an ASCII case-insensitive match for the string "shortcut icon"(在标记之间有一个U+0020空格字符,没有其他 ASCII空白)进行ASCII不区分大小写匹配。

The license 关键字可用于 linkaareaform 元素。此关键字创建一个 超链接

The license 关键字表示引用的文档提供了当前文档主要内容所依据的版权许可条款。

本规范未规定如何区分文档的主要内容和不被视为主要内容的部分。区分应向用户明确。

考虑一个照片分享网站。该网站上的页面可能描述和展示照片,页面标记如下:

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>Exampl Pictures: Kissat</title>
  <link rel="stylesheet" href="/style/default">
 </head>
 <body>
  <h1>Kissat</h1>
  <nav>
   <a href="../">Return to photo index</a>
  </nav>
  <figure>
   <img src="/pix/39627052_fd8dcd98b5.jpg">
   <figcaption>Kissat</figcaption>
  </figure>
  <p>One of them has six toes!</p>
  <p><small><a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a></small></p>
  <footer>
   <a href="/">Home</a> | <a href="../">Photo index</a>
   <p><small>© copyright 2009 Exampl Pictures. All Rights Reserved.</small></p>
  </footer>
 </body>
</html>

在这种情况下, license 适用于照片(文档的主要内容),而不是整个文档。特别是页面设计的版权,页面底部给出了版权声明。这可以通过样式使其更清楚(例如,将许可证链接突出显示在照片附近,而页面底部的版权信息则使用小字体和淡色显示)。

同义词:由于历史原因,用户代理还必须将关键字"copyright"视为 license 关键字。

Link_types/manifest

仅在一个引擎中支持。

Firefox?Safari?ChromeNo
Opera?EdgeNo
Edge (旧版)?Internet Explorer?
Firefox Android?Safari iOS?Chrome Android39+WebView Android?Samsung Internet?Opera Android?

The manifest 关键字可以用于 link 元素。这个关键字创建一个 外部资源链接

The manifest 关键字指示提供与当前文档相关的元数据的清单文件。

manifest 关键字指定的资源没有默认类型。

当Web应用程序未 安装时,适当的时间来 获取和处理链接资源 类型的链接是当用户代理认为有必要时。例如,当用户选择 安装Web应用程序时。

对于已 安装的Web应用程序,适当的时间来 获取和处理链接资源 类型的链接是:

在任何情况下,只有第一个 link 元素在 树顺序 中,其 rel 属性包含 manifest 标记,才能被使用。

用户代理不得为了这种链接类型 延迟加载事件

The linked resource fetch setup steps for this type of linked resource, given a link 元素 el请求 request, are:

  1. navigable 成为 el节点文档节点可导航

  2. 如果 navigable 为空,则返回 false。

  3. 如果 navigable 不是 顶级可遍历,则返回 false。

  4. request发起者 设置为 "manifest"。

  5. request目标 设置为 "manifest"。

  6. request模式 设置为 "cors"。

  7. request凭据模式 to the CORS settings attribute credentials mode for elcrossorigin content attribute.

  8. 返回 true。

处理这种类型的链接资源 给定一个 link 元素 el、布尔值 success响应 response字节序列 bodyBytes

  1. 如果 responseContent-Type元数据 不是 JSON MIME类型,则将 success 设置为 false。

  2. 如果 success 为 true:

    1. document URLel节点文档URL

    2. manifest URLresponseURL

    3. clientel节点文档相关设置对象

    4. 处理清单 ,使用 document URLmanifest URLbodyBytesclient[MANIFEST]

对于这种类型的链接资源, 处理链接头 步骤是无操作。

Link_types/modulepreload

Firefox115+Safari?Chrome66+
Opera?Edge79+
Edge (旧版)NoInternet Explorer?
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The modulepreload 关键字可以用于 link 元素。这个关键字创建一个 外部资源链接。这个关键字是 body-ok

The modulepreload 关键字是 preload 关键字的专业替代,具有针对预加载 模块脚本的处理模型。特别是,它使用特定的模块脚本获取行为(包括,例如,对 crossorigin 属性的不同解释),并将结果放入适当的 模块映射 for later evaluation. In contrast, a similar external resource link using the preload keyword would place the result in the preload cache, without affecting the document's 模块映射

此外,实现可以利用 模块脚本 声明其依赖关系的事实来预先获取指定模块的依赖关系。这被视为一种优化机会,因为用户代理知道,很可能稍后也需要这些依赖关系。通常情况下,除非使用诸如service workers之类的技术或在服务器端进行监控,否则不会察觉。值得注意的是,适当的 loaderror 事件将在指定模块被获取后发生,不会等待任何依赖关系。

用户代理不得为了这种链接类型 延迟加载事件

A 模块预加载目标 可以是 "json"、 "style"、"text", 或者是 类脚本目标

适当的时间来 获取和处理链接资源 类型的链接是:

与其他一些链接关系不同,更改这些 ascrossoriginreferrerpolicy) of such a link does not trigger a new fetch. This is because the document's 模块映射 已经被之前的获取填充,因此重新获取毫无意义。

The 获取和处理链接资源 算法用于 modulepreload 链接,给定一个 link 元素 el,其步骤如下:

  1. 如果 elhref 属性的值为空字符串,则返回。

  2. destination 成为 elas 属性的当前状态(一个 目标),或者如果它没有状态,则为 "script"。

  3. 如果 destination 不是 模块预加载目的地, then queue an element task on the 网络任务源 上针对 el to 排入一个元素任务 named error at el, and return.

  4. url 成为 编码解析一个URL 的结果,给定 elhref 属性的值,相对于 el节点文档

  5. 如果 url 失败,则返回。

  6. settings object 成为 el节点文档相关设置对象

  7. credentials mode be the CORS settings attribute credentials mode for elcrossorigin attribute.

  8. cryptographic nonce 成为 el.[[CryptographicNonce]]

  9. integrity metadata 成为 elintegrity 属性的值,如果指定的话,否则为空字符串。

  10. 如果 el 没有 integrity 属性,则将 integrity metadata 设置为 解析模块完整性元数据 的结果,给定 urlsettings object

  11. referrer policy 成为 elreferrerpolicy 属性的当前状态。

  12. fetch priority 成为 elfetchpriority 属性的当前状态。

  13. options 成为 脚本获取选项 ,其 密码随机数cryptographic nonce完整性元数据integrity metadata解析器元数据 为 "not-parser-inserted", 凭据模式credentials mode引用策略referrer policy获取优先级fetch priority

  14. 获取一个modulepreload模块脚本图 ,给定 urldestinationsettings objectoptions,并使用以下步骤,给定 result

    1. 如果 result 为 null,则 触发一个事件 名为 errorel上,并返回。

    2. 触发一个事件 名为 loadel上。

对于这种类型的链接资源, 处理链接头 步骤是无操作。

以下代码段显示了具有多个模块预加载的应用程序的顶部部分:

<!DOCTYPE html>
<html lang="en">
<title>IRCFog</title>

<link rel="modulepreload" href="app.mjs">
<link rel="modulepreload" href="helpers.mjs">
<link rel="modulepreload" href="irc.mjs">
<link rel="modulepreload" href="fog-machine.mjs">

<script type="module" src="app.mjs">
...

假设应用程序的模块图如下所示:

The module graph is rooted at app.mjs, which depends on irc.mjs and fog-machine.mjs. In turn, irc.mjs depends on helpers.mjs.

这里我们看到应用程序开发人员使用 modulepreload 声明其模块图中的所有模块,确保用户代理发起对它们的获取。没有这种预加载,用户代理可能需要进行多次网络往返才能发现 helpers.mjs,如果没有诸如HTTP/2服务器推送之类的技术。这种方式, modulepreload link 元素可以用作应用程序模块的 "manifest"。

以下代码显示了如何将 modulepreload 链接与 import() 结合使用,以确保网络获取提前完成,因此当调用 import() 时,模块已经在 模块映射中准备就绪(但未评估):

<link rel="modulepreload" href="awesome-viewer.mjs">

<button onclick="import('./awesome-viewer.mjs').then(m => m.view())">
  View awesome thing
</button>

The nofollow 关键字可以用于 aareaform 元素。这个关键字不会创建一个 超链接,而是 注释 任何其他由元素创建的超链接(如果没有其他关键字创建超链接,则为隐含的超链接)。

The nofollow 关键字表示链接不被页面的原始作者或出版者认可,或者链接到引用的文档主要是由于两个页面的相关人员之间的商业关系而包含的。

Link_types/noopener

所有当前引擎均支持。

Firefox52+Safari10.1+Chrome49+
Opera?Edge79+
Edge (旧版)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Link_types/noopener

所有当前引擎均支持。

Firefox52+Safari10.1+Chrome49+
Opera?Edge79+
Edge (旧版)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The noopener 关键字可以用于 aareaform 元素。这个关键字不会创建一个 超链接,而是 注释 任何其他由元素创建的超链接(如果没有其他关键字创建超链接,则为隐含的超链接)。

The keyword indicates that any newly created top-level traversable which results from following the 超链接 will not contain an 辅助浏览上下文。例如,结果 Windowopener 获取器将返回 null。

另见 处理模型

This typically creates a top-level traversable with an 辅助浏览上下文navigable whose target name (假设不存在目标名称为 "example"):

<a href=help.html target=example>Help!</a>

This creates a top-level traversable with a non-辅助浏览上下文 (assuming the same thing):

<a href=help.html target=example rel=noopener>Help!</a>

这些是等效的,仅导航 父可导航

<a href=index.html target=_parent>Home</a>
<a href=index.html target=_parent rel=noopener>Home</a>

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?

The noreferrer 关键字可以用于 aareaform 元素。这个关键字不会创建一个 超链接,而是 注释 任何其他由元素创建的超链接(如果没有其他关键字创建超链接,则为隐含的超链接)。

它表示在跟随链接时不会泄露任何引用信息,并且还暗示在相同条件下 noopener 关键字的行为。

另见直接操作引用的 处理模型

<a href="..." rel="noreferrer" target="_blank"><a href="..." rel="noreferrer noopener" target="_blank">具有相同的行为。

The opener 关键字可以用于 aareaform 元素。这个关键字不会创建一个 超链接,而是 注释 任何其他由元素创建的超链接(如果没有其他关键字创建超链接,则为隐含的超链接)。

The keyword indicates that any newly created top-level traversable which results from following the 超链接 will contain an 辅助浏览上下文

另见 处理模型

在以下示例中, opener 用于允许帮助页面弹出窗口导航其打开者,例如,当用户正在寻找的内容可以在其他地方找到时。一种替代方法可能是使用命名目标,而不是 _blank,但这可能会与现有名称冲突。

<a href="..." rel=opener target=_blank>Help!</a>

The pingback 关键字可以用于 link 元素。这个关键字创建一个 外部资源链接。这个关键字是 body-ok

关于 pingback 关键字的语义,请参见 Pingback 1.0[PINGBACK]

Link_types/preconnect

所有当前引擎均支持。

Firefox39+Safari11.1+Chrome46+
Opera?Edge79+
Edge (旧版)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet4.0+Opera Android?

The preconnect 关键字可以用于 link 元素。这个关键字创建一个 外部资源链接。这个关键字是 body-ok

The preconnect 关键字表示预先与指定资源的 建立连接可能是有利的,因为用户很可能需要位于该 的资源,通过预先解决与建立连接相关的延迟成本可以改善用户体验。

没有资源类型的默认类型由 preconnect 关键字指定。

用户代理不得因这种链接类型 延迟加载事件

合适的 获取和处理 此类链接的时机是:

The 获取和处理此类型链接资源 的步骤,给定一个 link 元素 el,是 create link options from el and to 预连接

The process a link header step for this type of linked resource given a 链接处理选项 options处理链接头 步骤是给定 options.

To preconnect given a 链接处理选项 options:

  1. 如果 optionshref 为空字符串,则返回。

  2. 给定 options be the result of encoding-parsing a URL given options's hrefoptions基本URL.

    将基本URL传递而不是文档或环境是由 issue #9715追踪的。

  3. 如果 url 解析失败,则返回。

  4. 如果 url方案 不是 HTTP(S) 方案,则返回。

  5. 给定 options环境 ,确定网络分区键并得到 partitionKey's environment.

  6. 设定 useCredentials 为 true。

  7. 如果 optionscrossorigin匿名 并且 optionsorigin does not have the same origin as urlorigin不同源,则设定 useCredentials 为 false。

  8. The user agent should obtain a connection given partitionKeyurloriginuseCredentials.

    此连接已获取但未直接使用。它将保留在 连接池 中以供后续使用。

    用户代理应尽可能尝试启动预连接并执行完整的连接握手(HTTP 为 DNS+TCP,HTTPS 源为 DNS+TCP+TLS),但由于资源限制或其他原因,允许选择执行部分握手(HTTP 仅为 DNS,HTTPS 源为 DNS 或 DNS+TCP),或完全跳过。

    每个源的最佳连接数取决于协商协议、用户当前的连接配置文件、可用设备资源、全局连接限制和其他特定上下文变量。因此,多少连接应打开的决定由用户代理决定。

Link_types/prefetch

Firefox2+SafariNoChrome8+
Opera?Edge79+
Edge (旧版)12+Internet Explorer11
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet1.5+Opera Android?

The prefetch 关键字可以用于 link 元素。这个关键字创建一个 外部资源链接。这个关键字是 body-ok

The prefetch 关键字表示预先 获取 和缓存指定的资源或同站点文档可能是有益的,因为用户很可能会在将来导航中需要此资源。

没有资源类型的默认类型由 prefetch 关键字指定。

合适的 获取和处理 此类链接的时机是:

The 获取和处理此类型链接资源 algorithm for prefetch links, given a link 元素 el,如下:

  1. 如果 elhref 属性的值为空字符串,则返回。

  2. options 设为 creating link options from el.

  3. request 设为 创建一个链接请求 并给定 options的结果。

  4. 如果 request 为 null,则返回。

  5. 设定 requestinitiator 为 "prefetch"。

  6. processPrefetchResponse 设为以下步骤,给定 响应 response 和 null、失败或 字节序列 bytesOrNull

    1. 如果 response网络错误触发一个 名为 error 的事件于 el

    2. 否则, 触发一个 名为 load 的事件于 el

  7. 用户代理应 获取 request,并将 processResponseConsumeBody 设为 processPrefetchResponse。用户代理可以延迟获取 request 以优先处理当前文档所需的其他请求。

The 处理链接头 步骤对于这种类型的链接资源是无操作。

Link_types/preload

Support in one engine only.

Firefox85+Safari?Chrome🔰 50+
Opera37+Edge🔰 79+
Edge (旧版)NoInternet Explorer?
Firefox Android?Safari iOS?Chrome Android?WebView Android50+Samsung Internet5.0+Opera Android?

The preload 关键字可以用于 link 元素。这个关键字创建一个 外部资源链接。这个关键字是 body-ok

The preload 关键字表示用户代理会预先 获取 and cache the specified resource according to the preload destination given by the as 属性给定的 预加载目的地 , 以及 fetchpriority attribute, as it is highly likely that the user will require this resource for the current navigation.

用户代理在加载资源时可能会执行额外的操作,例如预先 解码图片创建样式表。但是,这些额外的操作不能有可观察的效果。

没有资源类型的默认类型由 preload 关键字指定。

用户代理不得为了这种链接类型 延迟加载事件

合适的 获取和处理 此类链接的时机是:

A Document 有一个 预加载资源的映射,这是一个 有序映射,初始为空。

A 预加载键 是一个 结构体。它有以下

URL
一个 URL
destination
一个 预加载目的地
模式
一个 请求模式,可以是 "same-origin"、"cors" 或 "no-cors"
凭证模式
一个 凭证模式

A 预加载条目 是一个 结构体。它有以下

完整性元数据
一个字符串
响应
空或一个 响应
响应可用时
空,或一个接受 响应 或空的算法

消费一个预加载的资源Window window,给定一个 URL url、一个字符串 destination、一个字符串 mode、一个字符串 credentialsMode、一个字符串 integrityMetadataonResponseAvailable,这是一个接受 响应的算法:

  1. key 成为一个 预加载键 ,其 URLurl目的地destination模式mode凭证模式credentialsMode

  2. preloads 成为 window关联的 Document预加载资源的映射

  3. 如果 key存在preloads中,则返回 false。

  4. entry 成为 preloads[key]。

  5. consumerIntegrityMetadata 成为 解析 integrityMetadata的结果。

  6. preloadIntegrityMetadata 成为 解析 entry完整性元数据的结果。

  7. 如果以下条件都不适用:

    • consumerIntegrityMetadatano metadata

    • consumerIntegrityMetadata 等于 preloadIntegrityMetadata

      此比较将忽略未知的完整性选项。参见 问题 #116

    则返回 false。

    预加载与消费者之间完整性元数据不匹配,即使各自都符合数据要求,也会导致从网络额外请求资源。

    非常重要的一点是, 网络错误 应被加入预加载缓存中,这样如果预加载请求出错,错误的响应就不会在后续重新从网络请求。此外,这也具有安全隐患;请设想一种情况:开发者在预加载请求上指定了子资源完整性元数据,而随后的资源请求中未指定。如果预加载请求未通过子资源完整性验证并被丢弃,则资源请求将直接从网络获取并消费一个未经完整性验证的、可能存在恶意的响应。 [SRI]

  8. 移除 preloads[key]。

  9. 如果 entry响应 是空的,则设置 entry响应可用时onResponseAvailable

  10. 否则,用 entry with entry's 响应.

  11. 返回 true。

在本节中,字符串 type 匹配 a 预加载目的地 destination ,当以下算法返回 true 时:

  1. 如果 type 是空字符串,则返回 true。

  2. 如果 destination 为 "fetch",则返回 true。

  3. mimeTypeRecord解析 type的结果。

  4. 如果 mimeTypeRecord 失败,则返回 false。

  5. 如果 mimeTypeRecord 不是由 用户代理支持,则返回 false。

  6. 如果下列任一条件为真:

    则返回 true。

  7. 返回 false。

To create a preload key for a 请求 request, return a new 预加载键 ,其 URLrequestURL目的地request目的地模式request模式,以及 凭证模式request凭证模式

A 预加载目的地 为 "fetch"、"font"、 "image"、"script"、"style" 或 "track"。

To translate a preload destination given a string destination:

  1. 如果 destination 不是 预加载目的地,则返回 null。

  2. 返回 翻译 destination的结果。

预加载 给定一个 链接处理选项 options 和一个可选的 processResponse,这是一个接受 响应的算法:

  1. 如果 options类型匹配 options目的地,则返回。

  2. 如果 options目的地 是 "image" 并且 options源集 不是 null,则将 optionshref 设置为 选择一个图片源options源集

  3. request 成为 创建一个链接请求 给定 options的结果。

  4. 如果 request 为 null,则返回。

  5. unsafeEndTime 为 0。

  6. entry 成为一个新的 预加载条目 ,其 完整性元数据options完整性

  7. key 成为 创建一个预加载键 给定 request的结果。

  8. 如果 optionsdocument 为 null,则将 requestinitiator type 设为 “early hint”。

  9. controller 为 null。

  10. reportTiming 给定一个 Document document报告计时document given document's 相关全局对象

  11. controller 设置为 获取 request的结果,其中 processResponseConsumeBody 设置为以下步骤,给定一个 响应 response 和 null、失败或一个 字节序列 bodyBytes

    1. 如果 bodyBytes 是一个 字节序列,则将 response主体 设置为 bodyBytes 作为主体

      通过使用 processResponseConsumeBody,我们 提取了 整个 主体。这是为了确保预加载器从网络加载整个主体,无论预加载是否会被消费(在此时是不确定的)。此步骤然后将请求的主体重置为包含相同字节的新主体,以便其他规范可以在实际消费时读取它,尽管我们已经这样做了一次。

    2. 否则,将 response 设置为一个 网络错误

    3. unsafeEndTime 设置为 不安全共享当前时间

    4. 如果 options文档 不是 null,则调用 reportTiming 给定 options文档

    5. 如果 entryon response available 为null,则将 entryresponse 设置为 response;否则,调用 entryon response available 并传入 response

    6. 如果给定 processResponse ,则调用 processResponse 使用 response

  12. commit 成为以下步骤,给定一个 Document document

    1. 如果 entry响应 不是 null,则调用 reportTiming 给定 document

    2. document预加载资源的映射[key] 设置为 entry

  13. 如果 options文档 是 null,则将 options文档就绪时 设置为 commit。否则,调用 commit 给定 options文档

The fetch and process the linked resource steps for this type of linked resource, given a link 元素 el,是:

  1. Update the source set for el.

  2. options 成为 从元素创建链接选项 from el.

  3. destination转换 表示 elas 属性状态的关键字的结果。

  4. 如果 destination 为 null,则返回。

  5. optionsdestination 设置为 destination

  6. 预加载 options,以下步骤给定一个 响应 response

    1. 如果 response网络错误,则 触发事件 ,命名为 error ,在 el. Otherwise, 触发事件 ,命名为 load at el.

      实际浏览器行为与规范在这里不同,改变行为的可行性尚未调查。见 问题 #1142

为这种链接类型 处理链接头 的步骤,给定一个 链接处理选项 options预加载 options

The privacy-policy 关键字可用于 linkaarea 元素。该关键字创建一个 超链接

The privacy-policy 关键字表示引用的文档包含关于适用于当前文档的数据收集和使用实践的信息,如 Additional Link Relation Types中更详细描述的那样。引用的文档可以是独立的隐私政策,或者是某些更通用文档的特定部分。 [RFC6903]

The search 关键字可用于 linkaareaform 元素。该关键字创建一个 超链接

The search 关键字表示引用的文档提供了一个专门用于搜索该文档及其相关资源的接口。

OpenSearch 描述文档可与 link 元素和 search 链接类型一起使用,以使用户代理能够自动发现搜索接口。 [OPENSEARCH]

The stylesheet 关键字可用于 link 元素。此关键字创建一个 外部资源链接 ,它有助于样式处理模型。此关键字是 body-ok

指定的资源是一个 CSS 样式表 , 它描述了如何呈现文档。

Alternative_style_sheets

仅支持一个引擎。

Firefox3+Safari?Chrome1–48
OperaYesEdgeNo
Edge (旧版)?Internet Explorer8+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

如果 alternate 关键字也在 link 元素上指定,那么 该链接是一个替代样式表;在这种情况下, title 属性必须在 link 元素上指定,且其值不能为空。

The default type for resources given by the stylesheet 关键字的默认资源类型是 text/css

此类型的 link element of this type is implicitly potentially render-blocking if the element was created by its 节点文档's parser.

当带有 disabled 关键字的 link 元素的 stylesheet 属性被设置时, 禁用 关联的 CSS 样式表

此类链接 获取和处理 的适当时机是:

怪癖:如果文档已设置为 怪癖模式, 具有与外部资源的 相同来源 as the URL of the external resource, and the 内容类型元数据 不是支持的样式表类型, 则用户代理必须将其视为 text/css

此类链接资源的 链接资源获取设置步骤 ,给定一个 link 元素 el请求 request,如下:

  1. 如果 eldisabled 属性被设置,则返回false。

  2. 如果 el 脚本阻塞样式表,则 追加 el 到其 节点文档脚本阻塞样式表集合

  3. 如果 elmedia 属性的值 与环境匹配 ,且 el潜在渲染阻塞, then block rendering on el.

  4. 如果 el 当前是 渲染阻塞的, 则将 request渲染阻塞 设置为true。

  5. 返回true。

请参见 issue #968 ,了解使用CSSOM 获取CSS样式表 算法代替 默认获取和处理链接资源 算法的计划。 与此同时,任何 关键子资源 请求 应将其 渲染阻塞 设置为 link 元素当前是否 渲染阻塞

处理此类型的链接资源 , 给定一个 link 元素 el, 布尔值 success响应 response, 和 字节序列 bodyBytes

  1. 如果资源的 内容类型元数据 不是 text/css,则将 success 设置为false。

  2. 如果 el 不再创建一个贡献于样式处理模型的 外部资源链接 ,或者自从该资源被 获取以来,它变得适合再次 获取 ,那么:

    1. el from el's 节点文档脚本阻塞样式表集合.

    2. 返回。

  3. 如果 el 有一个 关联的CSS样式表移除CSS样式表

  4. 如果 success 为true,那么:

    1. 创建一个CSS样式表 ,具有以下属性:

      类型

      text/css

      位置

      responseURL列表[0]

      我们在此提供一个URL,假设 w3c/csswg-drafts issue #9316 将会被修复。

      所有者节点

      el

      媒体

      The media attribute of el.

      这是对(此时可能不存在的)属性的引用,而不是该属性当前值的副本。 CSSOM 定义了当属性动态设置、更改或删除时会发生什么。

      标题

      The title attribute of el, if el is title, or the empty string otherwise.

      同样,这是对属性的引用,而不是该属性当前值的副本。

      备用标志

      如果 链接是一个备用样式表 ,并且 el明确启用 为false,则设置此标志;否则不设置。

      来源清洁标志

      如果资源是 CORS同源,则设置;否则不设置。

      父CSS样式表
      所有者CSS规则

      null

      禁用标志

      保持默认值。

      CSS规则

      未初始化。

      这似乎不对。大概我们应该使用 bodyBytes? 跟踪于 issue #2997

      CSS 环境编码 的结果是运行以下步骤的结果: [CSSSYNTAX]

      1. 如果 el 有一个 charset 属性,从该属性的值中 获取编码 。如果成功,返回结果编码。 [ENCODING]

      2. 否则,返回 文档的字符编码[DOM]

    2. named load at el.

  5. 否则, named error at el.

  6. 如果 el 贡献了一个脚本阻塞样式表,则:

    1. 断言el节点文档脚本阻塞样式表集合 包含 el

    2. 从其 el from its 节点文档脚本阻塞样式表集合.

  7. 解除 on el的渲染阻塞。

此类链接资源的 处理链接头 步骤是不做任何事情。

The tag 关键字可以与 aarea 元素一起使用。这个关键字创建一个 超链接

The tag 关键字表示引用的文档代表的 tag 适用于当前文档。

由于它表示该标签 适用于当前文档,因此在 标签云的标记中使用此关键字是不合适的,因为标签云列出了跨多个页面的热门标签。

本文档是关于一些宝石的,所以它被 标记 为"https://en.wikipedia.org/wiki/Gemstone",以明确将其归类为适用于"珠宝"类型的宝石,而不是美国的城镇、Ruby包格式或瑞士机车类:

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>My Precious</title>
 </head>
 <body>
  <header><h1>My precious</h1> <p>Summer 2012</p></header>
  <p>Recently I managed to dispose of a red gem that had been
  bothering me. I now have a much nicer blue sapphire.</p>
  <p>The red gem had been found in a bauxite stone while I was digging
  out the office level, but nobody was willing to haul it away. The
  same red gem stayed there for literally years.</p>
  <footer>
   Tags: <a rel=tag href="https://en.wikipedia.org/wiki/Gemstone">Gemstone</a>
  </footer>
 </body>
</html>

这个 文档中,有两篇文章。然而,"tag"链接适用于整个页面(无论其放置位置,包括在 article 元素内时也是如此)。

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>Gem 4/4</title>
 </head>
 <body>
  <article>
   <h1>801: Steinbock</h1>
   <p>The number 801 Gem 4/4 electro-diesel has an ibex and was rebuilt in 2002.</p>
  </article>
  <article>
   <h1>802: Murmeltier</h1>
   <figure>
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b0/Trains_de_la_Bernina_en_hiver_2.jpg"
         alt="The 802 was red with pantographs and tall vents on the side.">
    <figcaption>The 802 in the 1980s, above Lago Bianco.</figcaption>
   </figure>
   <p>The number 802 Gem 4/4 electro-diesel has a marmot and was rebuilt in 2003.</p>
  </article>
  <p class="topic"><a rel=tag href="https://en.wikipedia.org/wiki/Rhaetian_Railway_Gem_4/4">Gem 4/4</a></p>
 </body>
</html>

The terms-of-service 关键字可以与 linkaarea 元素一起使用。这个关键字创建一个 超链接

The terms-of-service 关键字表示引用的文档包含关于当前文档提供者与希望使用当前文档的用户之间的协议的信息,如 Additional Link Relation Types中更详细描述的那样。 [RFC6903]

某些文档是文档序列的一部分。

文档序列是指每个文档可以有一个 前一个兄弟文档 和一个 下一个兄弟文档。没有前一个兄弟文档的文档是其序列的起点,没有下一个兄弟文档的文档是其序列的终点。

一个文档可以属于多个序列。

The next 关键字可以与 linkaareaform 元素一起使用。这个关键字创建一个 超链接

The next 关键字表示文档是一个序列的一部分,并且链接指向序列中下一个逻辑文档。

next 关键字与 link 元素一起使用时,用户代理应该处理这些链接,就像它们使用 dns-prefetchpreconnectprefetch 关键字一样。用户代理希望使用哪个关键字取决于实现;例如,用户代理可能希望在节省数据、电池电量或处理能力时使用成本较低的 preconnect 处理模型,或者可能希望根据对类似场景中过去用户行为的启发式分析来选择一个关键字。

The prev 关键字可以与 linkaareaform 元素一起使用。这个关键字创建一个 超链接

The prev 关键字表示文档是一个序列的一部分,并且链接指向序列中上一个逻辑文档。

同义词:出于历史原因,用户代理还必须将关键字"previous"视为 prev 关键字。

预定义链接类型集的扩展 可以在 现有rel值的microformats页面上注册。 [MFREL]

任何人都可以随时编辑 现有rel值的microformats页面 以添加类型。扩展类型必须指定以下信息:

关键字

实际定义的值。该值不应与任何其他定义的值混淆相似(例如,仅在大小写上有所不同)。

如果该值包含U+003A冒号字符(:),则它还必须是一个 绝对URL

对...的影响 link

以下之一:

不允许
不允许在 link 元素上指定关键字。
超链接
可以在 link 元素上指定关键字;它创建一个 超链接
外部资源
可以在 link 元素上指定关键字;它创建一个 外部资源链接
对...的影响 aarea

以下之一:

不允许
不允许在 aarea 元素上指定关键字。
超链接
可以在 aarea 元素上指定关键字;它创建一个 超链接
外部资源
可以在 aarea 元素上指定关键字;它创建一个 外部资源链接
超链接注释
可以在 aarea 元素上指定关键字;它 注释 由元素创建的其他 超链接
对...的影响 form

以下之一:

不允许
不允许在 form 元素上指定关键字。
超链接
可以在 form 元素上指定关键字;它创建一个 超链接
外部资源
可以在 form 元素上指定关键字;它创建一个 外部资源链接
超链接注释
可以在 form 元素上指定关键字;它 注释 由元素创建的其他 超链接
简要描述

关键字含义的简短非规范性描述。

规范

更详细描述关键字语义和要求的链接。它可以是wiki上的另一页,也可以是链接到外部页面。

同义词

具有完全相同处理要求的其他关键字值列表。作者不应使用定义为同义词的值,它们仅用于允许用户代理支持旧版内容。任何人都可以删除未实际使用的同义词;仅那些需要与旧版内容兼容处理的名称应以这种方式注册。

状态

以下之一:

建议
关键字尚未经过广泛的同行评审和批准。有人建议它,并且正在或即将使用它。
批准
关键字已经过广泛的同行评审和批准。它有一个规范,明确定义了如何处理使用该关键字的页面,包括当它们以不正确的方式使用时。
停止使用
关键字经过广泛的同行评审后被认为不符合要求。现有页面正在使用此关键字,但新页面应避免使用。简要描述和规范条目将详细说明作者应使用的替代内容(如果有)。

如果发现关键字与现 有值冗余,则应将其移除并列为现有值的同义词。

如果关键字在一个月或更长时间内未使用或未指定,则可以从注册表中删除。

如果添加的关键字处于建议状态并发现与现有值冗余,则应将其移除并列为现有值的同义词。如果添加的关键字处于建议状态并发现有害,则应将其状态更改为停止使用。

任何人都可以随时更改状态,但应仅根据上述定义进行。

一致性检查器必须使用 现有rel值的microformats页面 上提供的信息来确定值是否被允许:本规范中定义的或标记为"建议"或"批准"的值在用于其描述的元素时必须被接受,而标记为"停止使用"或未在本规范或上述页面上列出的值必须被拒绝为无效。一致性检查器可以缓存此信息(例如,为了性能原因或避免使用不可靠的网络连接)。

当作者使用本规范或wiki页面未定义的新类型时,一致性检查器应提议将该值添加到wiki中,详情如上所述,状态为"建议"。

现有rel值的microformats页面 中以"建议"或"批准"状态定义的扩展类型,可以按照"对...的影响"字段所述的方式与 rel 属性一起用于 linkaarea 元素。 [MFREL]

4.7 编辑

The insdel 元素表示对文档的编辑。

4.7.1 The ins element

Element/ins

所有当前引擎支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别
流内容
短语内容
可感知内容
该元素可以使用的上下文
Where phrasing content is expected.
内容模型
透明
在 text/html 中省略标签
两个标签都不可省略。
内容属性
全局属性
cite — 链接到引用的来源或有关编辑的更多信息
datetime — 更改的日期和(可选)时间
无障碍考虑
对于作者
对于实现者
净化
默认 ,且具有 属性 citedatetime
DOM 接口
使用 HTMLModElement

The ins element represents an addition to the document.

以下表示添加了一个段落:

<aside>
 <ins>
  <p> I like fruit. </p>
 </ins>
</aside>

以下也是,因为这里的 aside element here counts as phrasing content and therefore there is just one paragraph:

<aside>
 <ins>
  Apples are <em>tasty</em>.
 </ins>
 <ins>
  So are pears.
 </ins>
</aside>

ins elements should not cross implied paragraph boundaries.

以下示例表示添加了两个段落,其中第二个段落分两部分插入。此示例中的第一个 ins 元素跨越了段落边界,这被认为是不好的做法。

<aside>
 <!-- don't do this -->
 <ins datetime="2005-03-16 00:00Z">
  <p> I like fruit. </p>
  Apples are <em>tasty</em>.
 </ins>
 <ins datetime="2007-12-19 00:00Z">
  So are pears.
 </ins>
</aside>

这是一个更好的标记方法。它使用了更多的元素,但没有任何元素跨越隐含的段落边界。

<aside>
 <ins datetime="2005-03-16 00:00Z">
  <p> I like fruit. </p>
 </ins>
 <ins datetime="2005-03-16 00:00Z">
  Apples are <em>tasty</em>.
 </ins>
 <ins datetime="2007-12-19 00:00Z">
  So are pears.
 </ins>
</aside>

4.7.2 The del element

Element/del

所有当前引擎支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别
流内容
短语内容
可感知内容
该元素可以使用的上下文
Where phrasing content is expected.
内容模型
透明
在 text/html 中省略标签
两个标签都不可省略。
内容属性
全局属性
cite — 链接到引用的来源或有关编辑的更多信息
datetime — 更改的日期和(可选)时间
无障碍考虑
对于作者
对于实现者
净化
默认 ,且具有 属性 citedatetime
DOM 接口
使用 HTMLModElement

The del element represents a removal from the document.

del elements should not cross implied paragraph boundaries.

以下示例展示了一个“待办”列表,其中已完成的项目被划掉,并标注完成的日期和时间。

<h1>To Do</h1>
<ul>
 <li>Empty the dishwasher</li>
 <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li>
 <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
 <li>Buy a printer</li>
</ul>

4.7.3 Attributes common to insdel 元素的公共属性

The cite 属性可用于指定解释更改的文档的 URL 。当该文档很长时,例如会议记录,作者被鼓励包含一个 片段 ,指向该文档中特定讨论更改的部分。

如果存在 cite 属性,它必须是一个 有效的 URL(可能被空格包围) that explains the change. To obtain the corresponding citation link, the value of the attribute must be parsed relative to the element's 节点文档. User agents may allow users to follow such citation links, but they are primarily intended for private use (e.g., by server-side scripts collecting statistics about a site's edits), not for readers.

The datetime 属性可用于指定更改的时间和日期。

如果存在, datetime 属性的值必须是 有效的日期字符串(可选时间)

User agents must parse the datetime attribute according to the parse a date or time string algorithm. If that doesn't return a 日期全局日期和时间,那么修改没有相关联的时间戳(该值是不符合规范的;它不是 有效的日期字符串(可选时间))。否则,修改被标记为在给定的 日期全局日期和时间进行的。如果给定的值是 全局日期和时间,那么用户代理应该使用相关的时区偏移信息来确定展示给定日期时间的时区。

这个值可以展示给用户,但它主要是为了私有用途。

The insdel 元素必须实现 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 编辑和段落

本节为非规范性内容。

由于 insdel 元素不影响 段落划分, it is possible, in some cases where paragraphs are implied (without explicit p elements), for an ins or del element to span both an entire paragraph or other non-短语内容 元素和部分另一段。例如:

<section>
 <ins>
  <p>
   This is a paragraph that was inserted.
  </p>
  This is another paragraph whose first sentence was inserted
  at the same time as the paragraph above.
 </ins>
 This is a second sentence, which was there all along.
</section>

通过仅将一些段落包裹在 p 元素中,甚至可以使一个段落的结尾、整个第二段和第三段的开始被同一个 insdel 元素覆盖(尽管这非常混乱,并不被认为是好的做法):

<section>
 This is the first paragraph. <ins>This sentence was
 inserted.
 <p>This second paragraph was inserted.</p>
 This sentence was inserted too.</ins> This is the
 third paragraph in this example.
 <!-- (don't do this) -->
</section>

然而,由于 隐含段落 的定义方式,无法使用同一个 insdel 元素来标记一个段落的结尾和下一个段落的开始。你需要使用一个(或两个) p 元素和两个 insdel 元素,例如:

<section>
 <p>This is the first paragraph. <del>This sentence was
 deleted.</del></p>
 <p><del>This sentence was deleted too.</del> That
 sentence needed a separate &lt;del&gt; element.</p>
</section>

部分因为上述的混乱,强烈建议作者始终使用 p element, instead of having insdel elements that cross implied paragraphs boundaries.

4.7.5 编辑和列表

本节为非规范性内容。

The content models of the olul 元素的内容模型不允许 insdel 元素作为子元素。列表总是表示所有项目,包括那些本应标记为已删除的项目。

要指示某个项目已插入或删除,可以将 insdel 元素包裹在 li 元素的内容周围。要指示某个项目已被另一个替换,可以在单个 li 元素中包含一个或多个 del 元素,后跟一个或多个 ins 元素。

在以下示例中,一个最初为空的列表随着时间的推移添加和删除了项目。示例中加重显示的部分显示了列表的“当前”状态。列表项编号没有考虑编辑。

<h1>Stop-ship bugs</h1>
<ol>
 <li><ins datetime="2008-02-12T15:20Z">Bug 225:
 Rain detector doesn't work in snow</ins></li>
 <li><del datetime="2008-03-01T20:22Z"><ins datetime="2008-02-14T12:02Z">Bug 228:
 Water buffer overflows in April</ins></del></li>
 <li><ins datetime="2008-02-16T13:50Z">Bug 230:
 Water heater doesn't use renewable fuels</ins></li>
 <li><del datetime="2008-02-20T21:15Z"><ins datetime="2008-02-16T14:25Z">Bug 232:
 Carbon dioxide emissions detected after startup</ins></del></li>
</ol>

在以下示例中,最初只有水果的列表被替换为只有颜色的列表。

<h1>List of <del>fruits</del><ins>colors</ins></h1>
<ul>
 <li><del>Lime</del><ins>Green</ins></li>
 <li><del>Apple</del></li>
 <li>Orange</li>
 <li><del>Pear</del></li>
 <li><ins>Teal</ins></li>
 <li><del>Lemon</del><ins>Yellow</ins></li>
 <li>Olive</li>
 <li><ins>Purple</ins></li>
</ul>

4.7.6 编辑和表格

本节为非规范性内容。

表格模型中的元素有复杂的内容模型要求,不允许 insdel 元素,因此指示对表格的编辑可能会很困难。

要指示整行或整列已被添加或删除,可以将该行或列中每个单元格的全部内容包裹在 insdel 元素中。

这里,一个表格的行被添加了:

<table>
 <thead>
  <tr> <th> Game name           <th> Game publisher   <th> Verdict
 <tbody>
  <tr> <td> Diablo 2            <td> Blizzard         <td> 8/10
  <tr> <td> Portal              <td> Valve            <td> 10/10
  <tr> <td> <ins>Portal 2</ins> <td> <ins>Valve</ins> <td> <ins>10/10</ins>
</table>

这里,一列被删除了(删除时间和解释原因的页面链接也一并给出):

<table>
 <thead>
  <tr> <th> Game name           <th> Game publisher   <th> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">Verdict</del>
 <tbody>
  <tr> <td> Diablo 2            <td> Blizzard         <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">8/10</del>
  <tr> <td> Portal              <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
  <tr> <td> Portal 2            <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
</table>

一般来说,没有好的方法可以指示更复杂的编辑(例如,删除一个单元格,移动所有后续单元格向上或向左)。

4.8 嵌入内容

4.8.1 The picture 元素

Element/picture

支持所有当前引擎。

Firefox38+Safari9.1+Chrome38+
Opera?Edge79+
Edge (旧版)13+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLPictureElement

支持所有当前引擎。

Firefox38+Safari9.1+Chrome38+
Opera?Edge79+
Edge (旧版)13+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
分类
流内容
短语内容
嵌入内容
可感知内容
该元素可以使用的上下文
Where embedded content is expected.
内容模型
零个或多个 source 元素,后跟一个 img element, optionally intermixed with script-supporting elements.
在 text/html 中标签省略
两个标签都不能省略。
内容属性
全局属性
无障碍考虑
作者
实施者
净化
未分类
DOM 接口
[Exposed=Window]
interface HTMLPictureElement : HTMLElement {
  [HTMLConstructor] constructor();
};

The picture 元素是一个容器,提供多种来源给其包含的 img element to allow authors to declaratively control or give hints to the user agent about which image resource to use, based on the screen pixel density, viewport size, image format, and other factors. It represents its children.

The picture 元素与类似的 videoaudio 元素有些不同。虽然它们都包含 source 元素,但当元素嵌套在 source 元素中时, src attribute has no meaning when the element is nested within a picture element, and the resource selection algorithm is different. Also, the picture 元素本身不显示任何内容;它仅为其包含的 img element that enables it to choose from multiple URLs.

4.8.2 The 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 (在 audiovideo中) — 资源地址
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;
};

The source element allows authors to specify multiple alternative source sets for img 元素指定多个替代的 source sets 或为 media 元素. It does not 表示 任何内容。

The type 属性可以存在。如果存在,其值必须是一个 有效的 MIME 类型字符串

The media 属性也可以存在。如果存在,其值必须包含一个 有效的媒体查询列表. The user agent will skip to the next source element if the value does not match the environment.

The media 属性仅在 资源选择算法 中对 media 元素进行一次评估。相比之下,当使用 picture 元素时,用户代理将 对环境的变化做出反应

其余的要求取决于父元素是 picture 元素还是 media 元素

The source 元素的父元素是 picture 元素

The srcset 属性必须存在,并且是一个 srcset 属性

The srcset attribute contributes the image sources to the source set, if the source element is selected.

如果 srcset attribute has any image candidate strings using a 宽度描述符, the sizes 属性也可以存在。如果另外,下一个兄弟 img 元素不 允许自动尺寸,则 sizes 属性必须存在。 sizes 属性是一个 sizes 属性, which contributes the source size to the source set, if the source element is selected.

如果 img 元素 允许自动尺寸, then the sizes attribute can be omitted on previous sibling source elements. In such cases, it is equivalent to specifying auto

The source 元素支持 尺寸属性img 元素可以使用 widthheight attributes of a source element, instead of those on the img element itself, to determine its rendered dimensions and aspect-ratio, 如渲染部分所定义

The type 属性指定 source set中图像的类型,以便用户代理在不支持给定类型时跳到下一个 source 元素。

如果 未指定 type attribute is not specified, the user agent will not select a different source 元素。

source 元素有一个后续的兄弟 source 元素或 img 元素,并且指定了 srcset 属性时,必须满足以下至少一个条件:

The src 属性不得存在。

The source 元素的父元素是 media 元素

The src 属性提供 URL媒体资源。该值必须是 有效的非空 URL(可能被空格包围)。该属性必须存在。

The type 属性指定 媒体资源的类型,以帮助用户代理在获取之前确定是否可以播放此 媒体资源 。某些 MIME 类型定义的 codecs 参数可能需要指定资源的确切编码方式。 [RFC6381]

Dynamically modifying a source 元素的 srctype attribute when the element is already inserted in a video or audio element will have no effect. To change what is playing, just use the src attribute on the media element directly, possibly making use of the canPlayType() 方法从可用资源中选择。通常,在文档解析后手动操作 source 元素是一种不必要的复杂方法。

以下列表显示了一些如何在 codecs= MIME 参数中使用 type 属性的示例。

H.264 约束基线档次视频(主和扩展视频兼容)级别 3 和低复杂度 AAC 音频在 MP4 容器中
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
H.264 扩展档次视频(基线兼容)级别 3 和低复杂度 AAC 音频在 MP4 容器中
<source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
H.264 主档次视频级别 3 和低复杂度 AAC 音频在 MP4 容器中
<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
H.264 '高' 档次视频(与主、基线或扩展档次不兼容)级别 3 和低复杂度 AAC 音频在 MP4 容器中
<source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
MPEG-4 可视简单档次级别 0 视频和低复杂度 AAC 音频在 MP4 容器中
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>
MPEG-4 高级简单档次级别 0 视频和低复杂度 AAC 音频在 MP4 容器中
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
MPEG-4 可视简单档次级别 0 视频和 AMR 音频在 3GPP 容器中
<source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>
Theora 视频和 Vorbis 音频在 Ogg 容器中
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
Theora 视频和 Speex 音频在 Ogg 容器中
<source src='video.ogv' type='video/ogg; codecs="theora, speex"'>
单独的 Vorbis 音频在 Ogg 容器中
<source src='audio.ogg' type='audio/ogg; codecs=vorbis'>
单独的 Speex 音频在 Ogg 容器中
<source src='audio.spx' type='audio/ogg; codecs=speex'>
单独的 FLAC 音频在 Ogg 容器中
<source src='audio.oga' type='audio/ogg; codecs=flac'>
Dirac 视频和 Vorbis 音频在 Ogg 容器中
<source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>

The srcsetsizes 属性不得存在。

The source HTML element insertion steps, given insertedNode, are:

  1. parentinsertedNode父节点.

  2. 如果 parent 是一个 媒体元素 ,且该元素没有 src 属性,并且其 networkState 的值为 NETWORK_EMPTY,则调用该 媒体元素资源选择算法.

  3. 如果 parent 是一个 picture element, then for each child of parent的每个 子节点, if child is an img element, then count this as a relevant mutation for child.

The source HTML 元素移动步骤, 给定 movedNodeisSubtreeRootoldAncestor ,如下:

  1. 如果 isSubtreeRoot 为 true 且 oldAncestorpicture 元素,则 遍历 oldAncestor of oldAncestor's 所有子节点:如果 childimg element, then count this as a relevant mutation for child.

The source HTML 元素移除步骤, 给定 removedNodeisSubtreeRootoldAncestor ,如下:

  1. 如果 isSubtreeRoot 为 true 且 oldAncestorpicture 元素,则 遍历 oldAncestor of oldAncestor's 所有子节点:如果 childimg element, then count this as a relevant mutation for child.

If the author isn't sure if user agents will all be able to render the media resources provided, the author can listen to the error event on the last source element and trigger fallback behavior:

<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 The img element

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

Support in all current engines.

火狐1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer5.5+
火狐 Android?Safari iOS1+Chrome Android?WebView Android?三星浏览器 Android?Opera Android12.1+

HTMLImageElement/srcset

Support in all current engines.

火狐38+Safari8+Chrome34+
Opera?Edge79+
Edge(旧版)12+Internet Explorer不支持
火狐 Android?Safari iOS?Chrome Android?WebView Android?三星浏览器 Android?Opera Android?

HTMLImageElement/sizes

Support in all current engines.

火狐38+Safari9.1+Chrome38+
Opera?Edge79+
Edge(旧版)13+Internet Explorer不支持
火狐 Android?Safari iOS?Chrome Android?WebView Android?三星浏览器 Android?Opera Android?

HTMLImageElement/useMap

Support in all current engines.

火狐1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer5.5+
火狐 Android?Safari iOS1+Chrome Android?WebView Android?三星浏览器 Android?Opera Android12.1+

HTMLImageElement/isMap

Support in all current engines.

火狐1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer5.5+
火狐 Android?Safari iOS1+Chrome Android?WebView Android?三星浏览器 Android?Opera Android12.1+
分类:
流内容
短语内容
嵌入内容
表单相关元素
如果该元素具有 usemapcontrols 属性: 交互式内容
显著内容
此元素可以使用的上下文:
Where embedded content is expected.
作为 picture 元素的子元素,在所有 source 元素之后。
内容模型:
无内容
在text/html中省略标签:
没有 结束标签
内容属性:
全局属性
alt — 图像不可用时的替代文本
src — 资源地址
srcset — 不同情况下使用的图像,例如高分辨率显示器、小显示器等。
sizes — 不同页面布局的图像大小
crossorigin — 元素如何处理跨域请求
usemap — 要使用的 图像映射 的名称
ismap — 图像是否为服务器端图像映射
controls — 显示用户代理控件
width — 水平尺寸
height — 垂直尺寸
referrerpolicy — 元素发起的 referrer policyfetches initiated by the element
decoding — 处理此图像进行展示时使用的解码提示
loading — 用于确定加载延迟
fetchpriority — 为元素发起的 请求优先级 设置 fetches initiated by the element
可访问性注意事项:
如果元素具有非空的 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
};

An img 元素表示一张图片。

An img 元素有一个 维度属性源,初始设置为元素本身。

HTMLImageElement/src

支持所有当前引擎。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

Element/img#attr-srcset

支持所有当前引擎。

Firefox38+Safari8+Chrome34+
Opera?Edge79+
Edge (旧版)≤18+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

srcsrcset 属性以及任何先前兄弟 source 元素的 srcset 属性(如果父元素是 picture 元素)给出的图像是嵌入的内容; alt 属性的值为那些无法处理图像或禁用图像加载的用户提供等效内容(即它是 img 元素的 回退内容)。

The requirements on the alt 属性值的要求在 一个单独的章节中描述。

At least one of the srcsrcset 属性中至少要有一个存在。

如果存在 src 属性,则该属性必须包含一个 有效且非空的 URL(允许前后有空格) ,该 URL 应指向一个非交互式的(可选为动画的)图片资源,并且该资源不能是分页的或带脚本的。

上述要求意味着图像可以是静态位图(例如PNG、GIF、JPEG)、单页矢量文档(单页PDF、包含SVG文档元素的XML文件)、动画位图(APNG、动画GIF)、动画矢量图形(包含SVG 文档元素 并使用声明性SMIL动画的XML文件)等。然而,这些定义排除了带有脚本的SVG文件、多页PDF文件、交互式MNG文件、HTML文档、纯文本文件等。 [PNG] [GIF] [JPEG] [PDF] [XML] [APNG] [SVG] [MNG]

The srcset 属性是一个 srcset 属性

The srcset 属性和 src 属性(如果未使用 宽度描述符 )会将 图片资源 贡献到 资源集合 中(如果没有选中任何 source 元素)。

如果 srcset 属性存在,并且有任何 图片候选字符串 使用了 宽度描述符,那么 sizes 属性也必须存在。 如果 srcset attribute is not specified, and the loading 属性处于 懒加载(Lazy) 状态,则可以将 sizes 属性指定为值 "auto"(ASCII 大小写不敏感)。 sizes 属性是一个 sizes 属性,它会将 资源尺寸 贡献到 资源集合 中(如果没有选中任何 source 元素)。

An img 元素 允许自动大小 如果:

Attributes/crossorigin

支持所有当前引擎。

Firefox8+Safari6+Chrome13+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The crossorigin 属性是一个 CORS设置属性。其目的是允许具有跨源访问权限的第三方网站的图像与 canvas一起使用。

The referrerpolicy 属性是一个 引用策略属性。其目的是设置在 引用策略 时使用的 获取 图像。 [REFERRERPOLICY]

The decoding 属性表示 解码 此图像的首选方法。如果存在,该属性必须是一个 图像解码提示。此属性的 缺省值无效值 都是 Auto 状态。

HTMLImageElement/fetchPriority

FirefoxNoSafari🔰 preview+102+102+
Opera?Edge102+
Edge (旧版)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The fetchpriority 属性是一个 获取优先级属性。其目的是设置在 请求优先级 时使用的 获取 图像。

The loading 属性是一个 延迟加载属性。其目的是指示视口外图像的加载策略。

loading 属性的状态更改为 Eager 状态时,用户代理必须执行以下步骤:

  1. resumptionStepsimg 元素的 延迟加载恢复步骤

  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> <!-- Everything after this div is below the viewport -->
<img src="4.jpeg" alt="4">
<img src="5.jpeg" loading=lazy alt="5">

在上述示例中,图像按如下方式加载:

1.jpeg, 2.jpeg, 4.jpeg

这些图像急切加载,并延迟窗口的加载事件。

3.jpeg

由于位于视口中,该图像在布局已知时加载,但不会延迟窗口的加载事件。

5.jpeg

该图像仅在滚动到视口中时加载,不会延迟窗口的加载事件。

建议开发者在延迟加载的图像上通过 widthheight 属性指定首选的纵横比,即使CSS设置了图像的宽度和高度属性,以防止页面布局在图像加载后发生变化。

The img HTML element insertion steps, given insertedNode, are:

  1. 如果 insertedNode的父元素是 picture element, then, count this as a relevant mutation for insertedNode.

The img HTML 元素移动步骤, 给定 movedNodeisSubtreeRootoldAncestor ,如下:

  1. 如果 isSubtreeRoot 为 true 且 oldAncestorpicture element, then count this as a relevant mutation for movedNode.

The img HTML 元素移除步骤, 给定 removedNodeoldAncestorisSubtreeRoot ,如下:

  1. 如果 isSubtreeRoot 为 true 且 oldAncestorpicture element, then count this as a relevant mutation for removedNode.


不应将 img 元素用作布局工具。特别是,不应使用 img 元素来显示透明图片,因为此类图片很少传达有意义的信息,也很少给文档增添任何有用的东西。


What an 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 属性完全未设置

该元素 表示 无内容。

否则

该元素 表示 the text given by the alt 属性给出的文本。

The alt 属性不代表建议信息。 用户代理不得以与 alt 属性 内容相同的方式展示 title 属性的内容。

用户代理可以始终为用户提供显示任何图片或阻止显示任何图片的选项。用户代理也可以应用启发式方法来帮助用户在无法看到图片时利用图片,例如,由于视觉障碍或使用没有图形能力的文本终端。这些启发式方法可以包括,例如,对图片中找到的文本进行光学字符识别(OCR)。

虽然鼓励用户代理修复缺失的 alt 属性的情况,但作者不应依赖于这种行为。有关提供文本作为图片替代的 要求 详细描述如下。

The img 元素的 img 元素的内容(如果有的话)在渲染时将被忽略。


The usemap 属性(如果存在)可以指示该图片有一个相关的 图片地图

The ismap 属性,当用于一个是 a 元素的 后代元素上,并且该 href 属性存在时,表示该元素提供访问服务器端图片地图的功能。这影响了在相应的 a 元素上的事件处理。

The ismap 属性是一个 布尔属性。 该属性不得在没有具有 a 元素且该元素 上没有 href 属性的元素上指定。

使用 usemapismap 属性可能会导致在与 source 元素及在 media 属性指定的 picture 元素一起使用时,行为可能会令人困惑。

The controls 属性是 布尔属性。如果 存在,则表示用户代理可以 向用户展示一个用户界面。没有 alt 属性, 或其 alt 属性值为空字符串的元素, 不得指定该属性。

如果存在 controls 属性,用户代理可 能会为图片提供控件(例如,提供全屏查看的控件)。具体提供哪些控件是 实现自定义的,并且可以依赖于平台或用户的偏好。

如果用户代理通过在 img 元素上显示控件来展示用户界面,则当用户代理在与该界面交互时,应该屏蔽任何用户交互事件。

Issue #12318 跟踪 图像控件与动画图片之间的交互。在该问题解决之前,用户代理不应为图片提供动画控件。


The 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+

The crossOrigin IDL 属性必须 反映 the crossorigin 内容属性, 限制为已知值

HTMLImageElement/referrerPolicy

在所有当前引擎中支持。

Firefox50+Safari14+Chrome52+
Opera?Edge79+
Edge(旧版)?Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The referrerPolicy IDL 属性必须 反映 the 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+SafariChrome65+
Opera?Edge79+
Edge(旧版)?Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The decoding IDL 属性必须 反映 the decoding 内容属性, 限制为已知值

HTMLImageElement/loading

在所有当前引擎中支持。

Firefox75+Safari15.4+Chrome77+
Opera?Edge79+
Edge(旧版)?Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The loading IDL 属性必须 反映 the loading 内容属性, 限制为已知值

The fetchPriority IDL 属性 必须 反映 the 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+SafariChrome64+
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 元素,其 widthheight 属性设置为传入相关参数的值(如果适用)。

To determine the dimensions of an img 元素 image:

  1. 如果 image is 正在渲染,则 返回其渲染宽度和 高度,以 CSS 像素为单位。 [CSS]

  2. 如果 image可用的 ,并且 具有 密度校正后的自然宽度和 高度,则返回其 密度校正后的自然宽度和 高度,以 CSS 像素为单位。

  3. 返回宽度 0 和高度 0。

The width getter 步骤是返回 this尺寸的宽度。

The height getter 步骤是返回 this尺寸的高度。

The naturalWidthnaturalHeight getter 步骤为:

  1. 如果该图像不是 可用的,则 返回 0。

  2. 返回该图像的 密度校正后的自然宽度和 高度的相应分量,以 CSS 像素为单位。 [CSS]

由于图像的 密度校正后的自然宽度和高度 会考虑其元数据中指定的任何方向, naturalWidthnaturalHeight 反映的是 应用正确确定图像方向所需的任何 旋转之后的尺寸,而不管 'image-orientation' 属性的值如何。

The complete getter 步骤为:

  1. 如果以下任一项为真:

    则返回 true。

  2. 返回 false。

The currentSrc IDL 属性必须返回 img 元素的 当前请求当前 URL

The decode() 方法在调用时,必须执行以下步骤:

  1. promise 为一个新的 promise。

  2. 排入一个微任务 以执行 以下步骤:

    这样做是因为 更新 图像数据 也发生在一个微任务中。因此,为了使如下代码

    img.src = "stars.jpg";
    img.decode();

    正确解码 stars.jpg,我们需要将任何处理延迟一个 微任务。

    1. globalthis相关全局 对象

    2. 如果以下任一项为真:

      then reject promise with an "EncodingError" DOMException.

    3. 否则, 并行地等待以下情况之一 发生,并 执行相应操作:

      img 元素的 节点文档 不再是 完全 活动的
      img 元素的 当前请求 发生变化或被 改变
      img 元素的 当前请求状态 变为 损坏

      Queue a global task on the DOM 操作任务源 上,以 global to reject promise with an "EncodingError" DOMException.

      img 元素的 当前请求状态 变为 完全 可用

      解码 该图像。

      If decoding does not need to be performed for this image (for example because it is a vector graphic) or the decoding process completes successfully, then queue a global task on the DOM 操作任务源 上,以 global to resolve promise

      If decoding fails (for example due to invalid image data), then queue a global task on the DOM 操作任务源 上,以 global to reject promise with an "EncodingError" DOMException.

      用户代理应确保解码后的媒体数据至少到下一次成功的 更新渲染 步骤结束之前都保持易于可用,在 事件循环中。这是 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));
});

提供了一个遗留的工厂函数用于创建 HTMLImageElement 对象(除了 DOM 中的工厂方法,如 createElement()): Image(width, height)。当被调用时,遗留工厂函数必须执行以下步骤:

  1. document当前全局对象关联 Document

  2. img 为调用 创建一个元素 的结果,传入 document、"img" 及 HTML 命名空间

  3. 如果提供了 width ,则通过 设置属性值 ,为 img 添加名为 "width"、值为 width的属性。

  4. 如果提供了 height ,则通过 设置属性值 ,为 img 添加名为 "height"、值为 height的属性。

  5. 返回 img

一张图片在不同的上下文中可能需要不同的替代文本。

在以下每种情况下,使用的是相同的图片,但 alt 文本每次都不同。这张图片是瑞士日内瓦州卡鲁日市的市徽。

这里它被用作补充图标:

<p>I lived in <img src="carouge.svg" alt=""> Carouge.</p>

这里它被用作代表城镇的图标:

<p>Home town: <img src="carouge.svg" alt="Carouge"></p>

这里它作为文本的一部分用于城镇:

<p>Carouge has a coat of arms.</p>
<p><img src="carouge.svg" alt="The coat of arms depicts a lion, sitting in front of a tree."></p>
<p>It is used as decoration all over the town.</p>

这里它用来支持类似的文本,其中描述被给出,并且作为图像的补充,而不是替代图像:

<p>Carouge has a coat of arms.</p>
<p><img src="carouge.svg" alt=""></p>
<p>The coat of arms depicts a lion, sitting in front of a tree.
It is used as decoration all over the town.</p>

这里它作为故事的一部分使用:

<p>She picked up the folder and a piece of paper fell out.</p>
<p><img src="carouge.svg" alt="Shaped like a shield, the paper had a
red background, a green tree, and a yellow lion with its tongue
hanging out and whose tail was shaped like an S."></p>
<p>She stared at the folder. S! The answer she had been looking for all
this time was simply the letter S! How had she not seen that before? It all
came together now. The phone call where Hector had referred to a lion's tail,
the time Maria had stuck her tongue out...</p>

在出版时未知图像的具体内容,只知道它将是某种徽章,因此无法提供替代文本,而是仅在 title 属性中提供简短的图像说明:

<p>The last user to have uploaded a coat of arms uploaded this one:</p>
<p><img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms."></p>

Ideally, the author would find a way to provide real replacement text even in this case, e.g. by asking the previous user. Not providing replacement text makes the document more difficult to use for people who are unable to view images, e.g. blind users, or users or very low-bandwidth connections or who pay by the byte, or users who are forced to use a text-only web browser.

以下是一些更多的示例,展示了相同的图片在不同的上下文中使用,每次都有不同的适当替代文本。

<article>
 <h1>My cats</h1>
 <h2>Fluffy</h2>
 <p>Fluffy is my favorite.</p>
 <img src="fluffy.jpg" alt="She likes playing with a ball of yarn.">
 <p>She's just too cute.</p>
 <h2>Miles</h2>
 <p>My other cat, Miles just eats and sleeps.</p>
</article>
<article>
 <h1>Photography</h1>
 <h2>Shooting moving targets indoors</h2>
 <p>The trick here is to know how to anticipate; to know at what speed and
 what distance the subject will pass by.</p>
 <img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be
 photographed quite nicely using this technique.">
 <h2>Nature by night</h2>
 <p>To achieve this, you'll need either an extremely sensitive film, or
 immense flash lights.</p>
</article>
<article>
 <h1>About me</h1>
 <h2>My pets</h2>
 <p>I've got a cat named Fluffy and a dog named Miles.</p>
 <img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy.">
 <p>My dog Miles and I like go on long walks together.</p>
 <h2>music</h2>
 <p>After our walks, having emptied my mind, I like listening to Bach.</p>
</article>
<article>
 <h1>Fluffy and the Yarn</h1>
 <p>Fluffy was a cat who liked to play with yarn. She also liked to jump.</p>
 <aside><img src="fluffy.jpg" alt="" title="Fluffy"></aside>
 <p>She would play in the morning, she would play in the evening.</p>
</article>

4.8.4 图像

4.8.4.1 介绍

本节为非规范性内容。

要在 HTML 中嵌入图像,当只有一个图像资源时,使用 img 元素及其 src 属性。

<h2>From today's featured article</h2>
<img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
was an English <a href="/wiki/Music_hall">music hall</a> singer, ...

然而,有许多情况下,作者可能希望使用多个图像资源供用户代理选择:

上述情况并不是相互排斥的。例如,将不同的资源结合使用来应对不同的 设备像素比 和不同的 艺术方向是合理的。

虽然可以通过脚本解决这些问题,但这样做会引入一些其他问题:

考虑到这些问题,本规范引入了一些功能,以声明性的方式解决上述问题。

基于设备像素比的选择,当图像的渲染大小是固定的

The srcsrcset 属性可以用于 img 元素,使用 x 描述符提供多个仅在大小上有所不同的图像(较小的图像是较大图像的缩小版)。

The x descriptor is not appropriate when the rendered size of the image depends on the 视口 宽度(基于视口的选择), but can be used together with 艺术方向一起使用。

<h2>From today's featured article</h2>
<img src="/uploads/100-marie-lloyd.jpg"
     srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
     alt="" width="100" height="150">
<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
was an English <a href="/wiki/Music_hall">music hall</a> singer, ...

用户代理可以根据用户屏幕的像素密度、缩放级别以及可能的其他因素(如用户的网络条件)选择任何给定的资源。

为了与旧版用户代理兼容,这些用户代理尚不理解 srcset 属性,必须在 img 元素的 src 属性中指定一个 URL。 这将导致即使在旧版用户代理中也会显示一些有用的内容(尽管可能分辨率较低)。对于新的用户代理, src 属性参与资源选择,就像它是在 srcset 中以 1x 描述符指定的那样。

图像的渲染大小在 widthheight 属性中给出,这使得用户代理可以在图像下载之前为其分配空间。

基于视口的选择

The srcsetsizes 属性可以使用 w 描述符来提供多种仅在尺寸上有所不同的图像(较小的图像是较大图像的缩小版)。

在此示例中,一个横幅图像占据整个 视口 的宽度(使用适当的 CSS)。

<h1><img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
     src="wolf-400.jpg" alt="The rad wolf"></h1>

用户代理将根据指定的 w 描述符和 sizes 属性中指定的渲染尺寸来计算每个图像的实际像素密度。然后,它可以根据用户屏幕的像素密度、缩放级别以及其他可能的因素(如用户的网络条件)选择任何给定的资源。

如果用户的屏幕宽度为 320 CSS 像素 ,这相当于指定 wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x。另一方面,如果用户的屏幕宽度为 1200 CSS 像素 ,这相当于指定 wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x。通过使用 w 描述符和 sizes 属性,用户代理可以选择正确的图像源进行下载,无论用户设备的大小如何。

为了向后兼容,在 img 元素的 src attribute. In new user agents, the src attribute is ignored when the srcset 属性使用 w descriptors.

在此示例中,网页有三种布局,取决于 视口的宽度。窄布局有一列图像(每个图像的宽度约为 100%),中间布局有两列图像(每个图像的宽度约为 50%),最宽布局有三列图像,并有一些页面边距(每个图像的宽度约为 33%)。在 视口 宽度分别为 30em50em 时,会在这些布局之间切换。

<img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
     srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
     src="swing-400.jpg" alt="Kettlebell Swing">

The sizes 属性设置了在 30em50em处的布局断点,并声明在这些断点之间的图像尺寸为 100vw50vwcalc(33vw - 100px)。这些尺寸不一定要与 CSS 中指定的实际图像宽度完全匹配。

用户代理将从 sizes 属性中选择一个宽度,使用第一个返回值为真的 <media-condition> (括号中的部分),或者如果所有条件都评估为假,则使用最后一个值(calc(33vw - 100px))。

例如,如果 视口 宽度为 29em,则 (max-width: 30em) 评估为真,使用 100vw ,因此图像尺寸(用于资源选择)为 29em。如果 视口 宽度为 32em,则 (max-width: 30em) 评估为假,但 (max-width: 50em) 评估为真,使用 50vw ,因此图像尺寸(用于资源选择)为 16em (half the viewport width). Notice that the slightly wider 视口 会因为不同的布局而导致图像变小。

用户代理可以像前一个示例一样计算实际的像素密度并选择合适的资源。

此示例与前一个示例相同,但图像是 延迟加载的。在这种情况下, sizes 属性可以使用 auto 关键字,用户代理将使用 width 属性(或 CSS 中指定的宽度)作为 源大小

<img loading="lazy" width="200" height="200" sizes="auto"
     srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
     src="swing-400.jpg" alt="Kettlebell Swing">

为了更好地向后兼容不支持 auto 关键字的旧版用户代理,可以在需要时指定后备尺寸。

<img loading="lazy" width="200" height="200"
     sizes="auto, (max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
     srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
     src="swing-400.jpg" alt="Kettlebell Swing">
艺术方向基于选择

The picture 元素和 source 元素,加上 media 属性,可以用来提供多种图像,图像内容有所不同(例如,小图像可能是大图像的裁剪版本)。

<picture>
  <source media="(min-width: 45em)" srcset="large.jpg">
  <source media="(min-width: 32em)" srcset="med.jpg">
  <img src="small.jpg" alt="The wolf runs through the snow.">
</picture>

用户代理将选择第一个 source 元素,其 media 属性的媒体查询匹配,然后从其 srcset 属性中选择一个合适的 URL。

图像的呈现大小取决于选择的资源。要指定用户代理在下载图像之前可以使用的尺寸,可以使用 CSS。

img { width: 300px; height: 300px }
@media (min-width: 32em) { img { width: 500px; height:300px } }
@media (min-width: 45em) { img { width: 700px; height:400px } }

此示例结合了 艺术方向设备像素比-based selection. A banner that takes half the viewport is provided in two versions, one for wide screens and one for narrow screens.

<h1>
 <picture>
  <source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">
  <img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="The Breakfast Combo">
 </picture>
</h1>
基于图像格式的选择

The type 属性在 source 元素上可以用来提供多种不同格式的图像。

<h2>From today's featured article</h2>
<picture>
 <source srcset="/uploads/100-marie-lloyd.webp" type="image/webp">
 <source srcset="/uploads/100-marie-lloyd.jxr" type="image/vnd.ms-photo">
 <img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
</picture>
<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
was an English <a href="/wiki/Music_hall">music hall</a> singer, ...

在这个示例中,用户代理将选择第一个具有受支持 MIME 类型的 type 属性的 source 元素。如果用户代理支持 WebP 图像,将选择第一个 source 元素。如果不支持,但用户代理支持 JPEG XR 图像,将选择第二个 source 元素。如果这两种格式都不支持,将选择 img 元素。

4.8.4.1.1 自适应图像

本节为非规范性内容。

CSS 和媒体查询可用于构建根据用户环境动态调整的图形页面布局,特别是针对不同的 视口 尺寸和像素密度。然而,对于内容,CSS 并没有帮助;取而代之的是,我们有 img 元素的 srcset 属性和 picture 元素。本节将通过一个示例说明如何使用这些功能。

考虑一种情况,在宽屏(宽于 600 CSS 像素)上使用名为 a-rectangle.png 的 300×150 图像,但在较小屏幕(600 CSS 像素 及以下)上使用名为 a-square.png 的 100×100 图像。其标记如下所示:

<figure>
 <picture>
  <source srcset="a-square.png" media="(max-width: 600px)">
  <img src="a-rectangle.png" alt="Barney Frank wears a suit and glasses.">
 </picture>
 <figcaption>Barney Frank, 2011</figcaption>
</figure>

有关在 alt 属性中放置内容的详细信息,请参阅 提供文本作为图像替代的要求 一节。

问题在于,当图像加载时,用户代理不一定知道使用什么尺寸的图像。为了避免在页面加载时多次重新布局,可以使用 CSS 和 CSS 媒体查询来提供尺寸:

<style>
 #a { width: 300px; height: 150px; }
 @media (max-width: 600px) { #a { width: 100px; height: 100px; } }
</style>
<figure>
 <picture>
  <source srcset="a-square.png" media="(max-width: 600px)">
  <img src="a-rectangle.png" alt="Barney Frank wears a suit and glasses." id="a">
 </picture>
 <figcaption>Barney Frank, 2011</figcaption>
</figure>

Alternatively, the width and height attributes can be used on the sourceimg elements to provide the width and 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 wears a suit and glasses.">
 </picture>
 <figcaption>Barney Frank, 2011</figcaption>
</figure>

带有 img 元素的 src 属性,用于提供图像的URL,以便支持不兼容 picture 元素的旧版用户代理。这就引出了一个问题:在 src 属性中提供哪张图片。

如果作者希望在旧版用户代理中提供最大图像,标记可以如下:

<picture>
 <source srcset="pear-mobile.jpeg" media="(max-width: 720px)">
 <source srcset="pear-tablet.jpeg" media="(max-width: 1280px)">
 <img src="pear-desktop.jpeg" alt="The pear is juicy.">
</picture>

然而,如果旧版移动用户代理更为重要,可以在 source 元素中列出所有三个图像,完全覆盖 src 属性。

<picture>
 <source srcset="pear-mobile.jpeg" media="(max-width: 720px)">
 <source srcset="pear-tablet.jpeg" media="(max-width: 1280px)">
 <source srcset="pear-desktop.jpeg">
 <img src="pear-mobile.jpeg" alt="The pear is juicy.">
</picture>

Since at this point the src attribute is actually being ignored entirely by picture-supporting user agents, the src 属性可以默认任何图像,包括既不是最小也不是最大的图像:

<picture>
 <source srcset="pear-mobile.jpeg" media="(max-width: 720px)">
 <source srcset="pear-tablet.jpeg" media="(max-width: 1280px)">
 <source srcset="pear-desktop.jpeg">
 <img src="pear-tablet.jpeg" alt="The pear is juicy.">
</picture>

上述 max-width 媒体特性用于指定图像适用的最大(视口)尺寸。也可以使用 min-width

<picture>
 <source srcset="pear-desktop.jpeg" media="(min-width: 1281px)">
 <source srcset="pear-tablet.jpeg" media="(min-width: 721px)">
 <img src="pear-mobile.jpeg" alt="The pear is juicy.">
</picture>
4.8.4.2 Attributes common to sourceimglink 元素的共同属性
4.8.4.2.1 Srcset 属性

A srcset 属性 是一个在本节中定义了要求的属性。

如果存在,其值必须由一个或多个 图像候选字符串组成,每个字符串之间用 U+002C 逗号字符 (,) 分隔。如果一个 图像候选字符串 不包含描述符且 URL 后面没有 ASCII 空白字符 ,则下一个 图像候选字符串(如果有的话)必须以一个或多个 ASCII 空白字符开头。

一个 图像候选字符串 由以下组件组成,按顺序排列,并有以下列表中描述的进一步限制:

  1. 零个或多个 ASCII 空白字符

  2. 一个 有效的非空 URL ,不能以 U+002C 逗号字符 (,) 开头或结尾,引用一个非交互式的、可选动画的图像资源,该资源既不是分页的也不是脚本化的。

  3. 零个或多个 ASCII 空白字符

  4. 零个或一个以下项:

    • 一个 宽度描述符,由以下部分组成: ASCII 空白字符,一个 有效的非负整数 ,表示一个大于零的数字,代表 宽度描述符值,以及一个 U+0077 拉丁小写字母 W 字符。

    • 一个 像素密度描述符,由以下部分组成: ASCII 空白字符,一个 有效的浮点数 ,表示一个大于零的数字,代表 像素密度描述符值,以及一个 U+0078 拉丁小写字母 X 字符。

  5. 零个或多个 ASCII 空白字符

There must not be an image candidate string for an element that has the same 宽度描述符值 as another 图像候选字符串宽度描述符值 相同。

There must not be an image candidate string for an element that has the same 像素密度描述符值 as another 图像候选字符串像素密度描述符值 相同。为了满足此要求,没有描述符的 图像候选字符串 with no descriptors is equivalent to an image candidate string with a 1x descriptor.

如果某个元素的 图像候选字符串 指定了 宽度描述符 ,那么该元素的所有其他 图像候选字符串 也必须指定 宽度描述符

图像候选字符串宽度描述符 must match the natural width in the resource given by the 图像候选字符串's URL, if it has a 自然宽度)。

如果某个元素具有 sizes 属性 ,那么该元素的所有 图像候选字符串 必须指定 宽度描述符

4.8.4.2.2 Sizes 属性

A sizes 属性 是一个具有本节定义的要求的属性。

如果存在,该属性的值必须是 有效的源尺寸列表

A 有效的源尺寸列表 是一个匹配以下语法的字符串: [CSSVALUES] [MQ]

<source-size-list> = <source-size>#? , <source-size-value>
<source-size> = <media-condition> <source-size-value> | auto
<source-size-value> = <length> | auto

A <source-size-value> 如果是一个 <length> ,必须是非负的,并且不能使用除 数学函数之外的 CSS 函数。

关键字 auto 是一个在 解析 sizes 属性中计算的宽度。如果存在,它必须是第一个条目,整个 <source-size-list> 值必须是字符串 "auto"(ASCII 不区分大小写)或者以字符串 "auto," 开头(ASCII 不区分大小写)。

如果启动了图像加载的 img 元素(通过 更新图像数据响应环境变化 算法) 允许自动尺寸 并且正在 渲染,那么 auto 就是 具体对象尺寸 宽度。否则, auto 值将被忽略,使用下一个 源尺寸 (如果有)。

The auto 关键字可以在 sizes 属性中指定在 source 元素中,也可以在 sizes 属性中指定在 img 元素中,前提是满足以下条件。否则,不得指定 auto

此外,强烈建议使用 widthheight 属性或使用 CSS 指定尺寸。如果未指定尺寸,图像可能会以 300x150 的尺寸呈现,因为 sizes="auto" implies contain-intrinsic-size: 300px 150px in 渲染部分.

The <source-size-value> 提供了图像的预期布局宽度。作者可以使用 <media-condition>指定不同环境下的不同宽度。

<source-size-value>中不允许使用百分比,以避免混淆其相对参照。可以使用 'vw' 单位来表示相对于 视口 宽度的尺寸。

4.8.4.3 处理模型

一个 img 元素有一个 当前请求 和一个 待处理请求当前请求 初始设置为一个新的 图像请求待处理请求 初始设置为 null。

一个 图像请求 有一个 状态、一个 当前 URL和一个 图像数据

一个 图像请求状态 是以下之一:

不可用
用户代理尚未获取任何图像数据,或已获取部分或全部图像数据但尚未解码足够的图像以获取图像尺寸。
部分可用
用户代理已获取部分图像数据,并且至少图像尺寸是可用的。
完全可用
用户代理已获取所有图像数据,并且至少图像尺寸是可用的。
损坏
用户代理已获取所有它能获取的图像数据,但无法解码图像以获取图像尺寸(例如图像已损坏,或格式不受支持,或无法获取数据)。

一个 图像请求当前 URL 初始为空字符串。

一个 图像请求图像数据 是解码后的图像数据。

当一个 图像请求状态部分可用完全可用时,该 图像请求 被称为 可用

当一个 img 元素的 当前请求状态完全可用 并且用户代理能够无错误地解码媒体数据,则该 img 元素被称为 完全可解码

一个 图像请求状态 初始为 不可用

当一个 img 元素的 当前请求可用时,该 img 元素提供一个 绘图源 ,其宽度为图像的 密度校正自然宽度 (如果有),高度为图像的 密度校正自然高度 (如果有),外观为图像的自然外观。


一个 img 元素被称为 使用 srcsetpicture ,如果它有一个指定的 srcset 属性,或者如果它的父元素是一个 picture 元素。


每个 img 元素都有一个 最后选择的源,其初始值必须为 null。

每个 图像请求 都有一个 当前像素密度,其初始值必须为 1。

每个 图像请求 都有 首选密度校正尺寸,它要么是包含宽度和高度的结构,要么为 null。初始值必须为 null。

确定 密度校正后的自然宽度和高度 的方法如下,针对 img 元素 img

  1. densityimg当前请求当前像素密度

  2. dimensionsimg当前请求优选密度校正尺寸

    The 优选密度校正尺寸 是在 为展示准备图像 算法中,根据图像中的元信息设置的。

  3. 如果 dimensions 不为null,则将 dimensions的宽度设为 dimensions的宽度除以 density,高度设为 dimensions的高度除以 density,然后返回 dimensions, and return dimensions.

  4. intrinsicWidthintrinsicHeightintrinsicRatio 依次为 img固有宽度、固有高度和固有宽高比(如有)。

  5. 如果 intrinsicWidth 存在,则将 intrinsicWidth 设为 intrinsicWidth 除以 density

  6. 如果 intrinsicHeight 存在,则将 intrinsicHeight 设为 intrinsicHeight 除以 density

  7. 返回应用 默认尺寸算法 的结果, 传入 intrinsicWidthintrinsicHeightintrinsicRatio,并使用300×150作为 默认对象尺寸

例如,如果 当前像素密度 为 3.125,这意味着每 CSS 英寸, and thus if the image data is 300x600, it has density-corrected natural width and height of 96 CSS 像素 乘 192 CSS 像素.

所有 imglink 元素都与一个 源集关联。

一个 源集 是一个有序的零个或多个 图像源 和一个 源大小

一个 图像源 是一个 URL,并且可以选择地包含一个 像素密度描述符或一个 宽度描述符

一个 源大小 是一个 <source-size-value>。当一个 源大小 具有相对于 视口的单位时,必须相对于 img 元素的 节点文档视口进行解释。其他单位的解释与媒体查询中相同。 [MQ]


本节中的算法的 解析错误 表示输入和要求之间的非致命性不匹配。鼓励用户代理以某种方式公开 解析错误


在确定图像的类型及其是否为有效图像时,图像是否成功获取(例如,响应状态是否为 成功状态)必须被忽略。

这允许服务器返回带有错误响应的图像,并使其显示出来。

用户代理应该应用 图像嗅探规则 来确定图像的类型,并且图像的 关联内容类型头 给出 official type。如果这些规则没有应用,那么图像的类型必须是图像的 关联内容类型头给出的类型。

用户代理不得使用 img 元素支持非图像资源(例如,其 文档元素 为 HTML 元素的 XML 文件)。用户代理不得运行嵌入图像资源中的可执行代码(例如,脚本)。用户代理只能显示多页资源的第一页(例如,PDF 文件)。用户代理不得允许资源以交互方式工作,但应尊重资源中的任何动画。

本规范没有指定支持哪些图像类型。

4.8.4.3.1 何时获取图像

默认情况下,图像会立即获取。用户代理可以为用户提供按需获取图像的选项(例如,带宽受限的用户可能会使用此选项)。

在立即获取图像时,用户代理必须在每次创建元素或发生 update the image data of the img element, with the 重新启动动画 标志(如果这样规定)同步地 更新图像数据

在按需获取图像时,用户代理必须在需要图像数据时(即按需) 更新图像数据 of an img element whenever it needs the image data (i.e., on demand), but only if the img 元素的 当前请求状态不可用时进行。当 img 元素经历了 相关变更时,如果用户代理仅按需获取图像,则 img 元素的 当前请求状态 必须返回到 不可用

4.8.4.3.2 对 DOM 变更的响应

The relevant mutations for an img element are as follows:

4.8.4.3.3 可用图像列表

每个 Document 对象必须有一个 可用图像列表。列表中的每个图像由一个元组标识,该元组包括一个 绝对 URL、一个 CORS 设置属性 模式,以及(如果模式不是 无 CORS)一个 。 每个图像还有一个 忽略更高层缓存 标志。用户代理可以在任何时候将一个 Document 对象的 可用图像列表 复制到另一个对象(例如,当 Document 被创建时,用户代理可以将其他 Document中加载的所有图像添加到此列表),但在这样做时不得更改复制条目的键,并且必须取消设置 忽略更高层缓存 flag for the copied entry. User agents may also remove images from such lists at any time (e.g. to save memory). User agents must remove entries in the list of available images as appropriate given higher-layer caching semantics for the resource (e.g. the HTTP `Cache-Control` response header) when the 忽略更高层缓存 标志未设置时。

The 可用图像列表 旨在支持在将 src 属性更改为先前已加载的 URL 时的同步切换,并避免在同一文档中重新下载图像,即使它们不允许 HTTP 缓存。它不用于避免在先前图像仍在加载时重新下载相同的图像。

用户代理还可以将图像数据单独存储在 可用图像列表之外。

例如,如果一个资源具有 HTTP 响应头 `Cache-Control: must-revalidate`,并且其 忽略更高层缓存 标志未设置,用户代理会从 可用图像列表 中移除它,但可以单独保留图像数据,并在服务器响应 ` 304 Not Modified ` 状态时使用该数据。

4.8.4.3.4 解码图像

图像数据通常会被编码以减少文件大小。这意味着为了让用户代理将图像呈现到屏幕上,需要对数据进行解码。 解码 是将图像的媒体数据转换为适合屏幕呈现的位图形式的过程。请注意,这一过程相对于其他内容呈现过程可能较慢。因此,用户代理可以选择何时执行解码,以创建最佳的用户体验。

图像解码被称为同步解码如果它在完成之前阻止了其他内容的呈现。通常,这会使图像和其他内容同时原子性地呈现。然而,这种呈现会被解码所需的时间延迟。

图像解码被称为异步解码如果它不会阻止其他内容的呈现。这会使非图像内容的呈现更快。然而,直到解码完成之前,图像内容在屏幕上是缺失的。一旦解码完成,屏幕将更新为图像。

在同步和异步解码模式下,最终内容呈现到屏幕上所经过的时间相同。主要的区别在于用户代理是否在呈现最终内容之前呈现非图像内容。

为了帮助用户代理决定是否执行同步或异步解码,可以在 decoding 属性上设置在 img 元素上。 decoding 属性的可能值是以下 图像解码提示 关键字:

关键字 状态 描述
sync 同步 表示希望以同步方式 解码 图像,以便与其他内容原子性地呈现。
async 异步 表示希望以异步方式 解码 图像,以避免延迟其他内容的呈现。
auto 自动 表示对解码模式没有偏好(默认值)。

解码 图像时,用户代理应尊重 decoding 属性状态所指示的偏好。如果指示的状态是 自动,则用户代理可以自由选择任何解码行为。

也可以使用 decode() 方法来控制解码行为。由于 decode() 方法独立于负责内容呈现的过程进行 解码 ,因此不受 decoding 属性的影响。

4.8.4.3.5 更新图像数据

此算法不能在运行 并行的步骤中调用。如果用户代理需要在运行 并行的步骤中调用此算法,则需要 排队 一个任务来实现。

当用户代理需要 更新图像数据img 元素时,可能设置 重新启动动画 标志,可能设置 可能省略事件 标志,必须执行以下步骤:

  1. 如果元素的 节点文档 不是 完全激活,则:

    1. 继续 并行运行此算法。

    2. 等待直到元素的 节点文档 is fully active.

    3. If another instance of this algorithm for this img element was started after this instance (even if it aborted and is no longer running), then return.

    4. 排队一个微任务 以继续此算法。

  2. 如果用户代理无法支持图像,或其图像支持已被禁用,则 中止图像请求当前请求挂起请求,设置 当前请求状态不可用,设置 挂起请求 为null,并返回。

  3. previousURL当前请求当前 URL

  4. selected source 为null, selected pixel density 为未定义。

  5. 如果元素不 使用 srcsetpicture 并且它具有指定值不是空字符串的 src 属性,则将 selected source 设置为元素的 src 属性的值,并将 selected pixel density 设置为1.0。

  6. 将元素的 最后选择的源 设置为 selected source

  7. 如果 selected source 不为null,则:

    1. urlString 成为 编码-解析-序列化URL 的结果,给定 selected source,相对于元素的 节点文档

    2. 如果 urlString 失败,则中止这组内部步骤。

    3. key 成为一个包含 urlStringimg 元素的 crossorigin 属性的模式的元组,并且,如果该模式不是 No CORS,则是 节点文档来源

    4. 如果 可用图像列表 中包含 key的条目,则:

      1. 为该条目设置 忽略更高级别缓存 标志。

      2. Abort the image request for the 当前请求挂起的请求.

      3. 挂起的请求 设为 null。

      4. 当前请求 成为一个新的 图像请求 ,其 图像数据 来源于该条目,且其 状态完全可用

      5. 为展示准备 当前请求 for presentation ,作用于 img 元素。

      6. 当前请求当前像素密度 设置为 selected pixel density

      7. Queue an element task on the DOM 操作任务源 上,为 img element and the following steps:

        1. 如果设置了 restart animation ,则 重新启动动画

        2. 当前请求当前 URL 设为 urlString

        3. 如果未设置 maybe omit eventspreviousURL 不等于 urlString, then 触发事件 ,事件名称为 load at the img element.

      8. 终止 更新图像数据 算法。

  8. 排队一个微任务 来执行该算法的其余部分,允许调用此算法的 任务 继续。

  9. 如果在此实例之后为此 img 元素启动了该算法的另一个实例(即使它已中止且不再运行),则返回。

    只有最后一个实例生效,以避免在例如依次设置 srcsrcsetcrossorigin 属性时出现多个请求。

  10. selected sourceselected pixel density 分别为 选择图像源的结果的URL和像素密度。

  11. 如果 selected source 为null,则:

    1. 当前请求状态 设置为 损坏中止图像请求当前请求挂起请求,并将 挂起请求 设置为null。

    2. 排队一个元素任务DOM操作任务源 上,给定 img 元素和以下步骤:

      1. 当前请求当前URL 更改为空字符串。

      2. 如果以下所有条件均为真:

        then 触发一个事件 ,名称为 error at the img element.

    3. 返回。

  12. urlString 成为 编码-解析-序列化URL 的结果,给定 selected source,相对于元素的 节点文档

  13. 如果 urlString 失败,则:

    1. 中止图像请求当前请求挂起请求

    2. 当前请求状态 设置为 损坏

    3. 设置 挂起请求 为null。

    4. 排队一个元素任务DOM操作任务源 上,给定 img 元素和以下步骤:

      1. 当前请求当前URL 更改为 selected source

      2. 如果没有设置 可能省略事件previousURL 不等于 selected source, then 触发一个事件 ,名称为 error at the img element.

    5. 返回。

  14. 如果 挂起请求 不为 null 且 urlString挂起请求当前 URL相同,则返回。

  15. 如果 urlString当前请求当前 URL 相同,并且 当前请求状态部分可用

    1. Abort the image request for the 挂起请求.

    2. 如果 重启动画 is set, then queue an element task on the DOM manipulation task source given the img element to 重启动画

    3. 返回。

  16. 中止图像请求挂起请求

  17. image request 设置为一个新的 图像请求 ,其 当前URLurlString

  18. 如果 当前请求状态不可用损坏,则将 当前请求 设置为 image request。否则,将 挂起请求 设置为 image request

  19. request 成为 创建潜在的CORS请求 的结果,给定 urlString、"image",以及元素的 crossorigin 内容属性的当前状态。

  20. request客户端 设置为元素的 节点文档相关设置对象

  21. 如果元素 使用 srcsetpicture,则将 request发起者 设置为"imageset"。

  22. request引用策略 设置为元素的 referrerpolicy 属性的当前状态。

  23. request优先级 设置为元素的 fetchpriority 属性的当前状态。

  24. Let delay load event be true if the img懒加载属性 处于 Eager 状态,或 禁用脚本 用于 img, and false otherwise.

  25. If the will lazy load element steps given the img return true:

    1. img懒加载恢复步骤 设置为从标记为 获取图像的步骤开始的此算法的其余部分。

    2. 开始观察懒加载元素的交叉点 用于 img 元素。

    3. 返回。

  26. 获取图像获取 request。从该算法返回,并作为获取的 处理响应 的一部分运行剩余步骤, 响应 response

    以这种方式获得的资源(如果有)是 image request图像数据。它可以是 CORS-相同来源CORS-跨来源;这会影响图像与其他API的交互(例如,在 canvas上使用时)。

    delay load event 为true时,获取图像必须 延迟元素的加载事件 of the element's node document until the task that is 排队 的任务在资源被获取后 网络任务源 上运行为止(定义如下)。

    不幸的是,这可以用来对用户的本地网络执行一个简单的端口扫描(特别是在结合脚本时,尽管实际上不需要脚本来执行此攻击)。用户代理可能会实施比上述描述更严格的 跨来源 访问控制策略来减轻此攻击,但不幸的是,这些策略通常与现有的网络内容不兼容。

  27. 尽快跳转到以下列表中的第一个适用条目:

    如果资源类型是 multipart/x-mixed-replace

    下一个在图像被获取时由 网络任务源 that is 排队任务 必须运行以下步骤:

    1. 如果 image request挂起请求 ,并且至少一个体被完全解码,则 中止图像请求当前请求,并 将挂起请求升级为当前请求

    2. 否则,如果 image request挂起请求 ,并且用户代理能够确定 image request的图像在某种致命的方式中损坏,以至于无法获取图像尺寸,则 中止图像请求当前请求将挂起请求升级为当前请求,并将 当前请求状态 设置为 损坏

    3. 否则,如果 image request当前请求,其 状态不可用,并且用户代理能够确定 image request的图像的宽度和高度,则将 当前请求状态 设置为 部分可用

    4. 否则,如果 image request当前请求,其 状态不可用,并且用户代理能够确定 image request的图像在某种致命的方式中损坏,以至于无法获取图像尺寸,则将 当前请求状态 设置为 损坏

    当图像正在获取时,由 网络任务源 that is 排队 的每个 networking task source while the image is being fetched must update the presentation of the image, but as each new body part comes in, if the user agent is able to determine the image's width and height, it must prepare the img element's current request for presentation 都必须更新图像的显示,但随着每个新的主体部分的到来,如果用户代理能够确定图像的宽度和高度,则必须根据 img element and replace the previous image. Once one body part has been completely decoded, perform the following steps:

    1. img 元素的 当前请求状态 设置为 完全可用

    2. 如果没有设置 可能省略事件previousURL 不等于 urlString, then 排队一个元素任务DOM操作任务源 上,给定 img 元素以 触发一个事件 ,名称为 load at the img element.

    如果资源类型和数据对应于支持的图像格式, 如下所述

    下一个在图像被获取时由 网络任务源 that is 排队任务 必须运行以下步骤:

    1. 如果用户代理能够确定 image request的图像的宽度和高度,并且 image request挂起请求,则将 image request状态 设置为 部分可用

    2. 否则,如果用户代理能够确定 image request的图像的宽度和高度,并且 image request当前请求为展示准备 image request for presentation 给定 img 元素,并将 image request状态 设置为 部分可用

    3. 否则,如果用户代理能够确定 image request的图像在某种致命的方式中损坏,以至于无法获取图像尺寸,并且 image request挂起请求

      1. 中止图像请求当前请求挂起请求

      2. 将挂起请求升级为当前请求

      3. 当前请求状态 设置为 损坏

      4. 触发一个事件 ,名称为 errorimg 元素上。

    4. 否则,如果用户代理能够确定 image request的图像在某种致命的方式中损坏,以至于无法获取图像尺寸,并且 image request当前请求

      1. 中止图像请求image request

      2. 如果没有设置 可能省略事件previousURL 不等于 urlString, then 触发一个事件 ,名称为 error at the img element.

    任务以及后续每个由 网络任务源 在获取图像期间 排入队列任务 ,如果 image request当前 请求,则必须适当地更新图像的呈现 (例如,如果图像是渐进式 JPEG,则每个数据包都可以提高图像的 分辨率)。

    此外,一旦资源被获取,最后一个由 网络任务源 that is 排队任务 必须额外运行这些步骤:

    1. 如果 image request挂起请求中止图像请求当前请求将挂起请求升级为当前请求,并 为展示准备 image request for presentation ,给定 img 元素。

    2. image request 设置为 完全可用 状态。

    3. Add the image to the list of available images using the key key, with the 忽略更高层缓存 标志。

    4. 如果 maybe omit events 未设置或 previousURL 不等于 urlString, then 触发一个 名为 load at the img element.

    否则

    图像数据不是受支持的文件格式;用户代理必须将 image request状态 设置为 broken中止图像请求 针对 当前请求挂起的请求, upgrade the pending request to the current request if image request挂起的请求, and then, if maybe omit events 未设置或 previousURL 不等于 urlString, queue an element task on the DOM 操作任务源 上为给定的 img element to 触发事件 ,事件名称为 error at the img element.

当用户代理为元素 x运行上述算法时,必须从元素的 节点文档 到元素 x保持一个强引用,即使该元素未 连接

中止图像请求 对于一个 图像请求 或空的 image request ,意味着运行以下步骤:

  1. 如果 image request 为空,则返回。

  2. 忘记 image request图像数据,如果有的话。

  3. Abort any instance of the fetching algorithm for image request, discarding any pending tasks generated by that algorithm.

挂起请求升级为当前请求 对于 img 元素意味着运行以下步骤:

  1. img 元素的 当前请求 成为 挂起请求

  2. img 元素的 挂起请求 为null。

4.8.4.3.6 为展示准备图像

要为一个 prepare an image for presentation 针对一个 图像请求 req 准备给定的图像元素 img以便呈现:

  1. exifTagMap 为从 req图像数据中取得的 EXIF 标签,由相关编解码器定义。 [EXIF]

  2. physicalWidthphysicalHeight 为从 req图像数据中取得的宽度和高度,由相关编解码器定义。

  3. dimXexifTagMap中标签 0xA002 (PixelXDimension) 的值。

  4. dimYexifTagMap中标签 0xA003 (PixelYDimension) 的值。

  5. resXexifTagMap中标签 0x011A (XResolution) 的值。

  6. resYexifTagMap中标签 0x011B (YResolution) 的值。

  7. resUnitexifTagMap中标签 0x0128 (ResolutionUnit) 的值。

  8. 如果以下所有条件都为真:

    • dimX 是正整数;

    • dimY 是正整数;

    • resX 是正的浮点数;

    • resY 是正的浮点数;

    • physicalWidth × 72 / resX 等于 dimX

    • physicalHeight × 72 / resY 等于 dimY

    • resUnit2Inch),

    则:

    1. 如果 req图像数据CORS-cross-origin,则将 imgnatural dimensions 设置为 dimXdimY,并相应地缩放 img的像素数据。

    2. 否则,将 reqpreferred density-corrected dimensions 设置为一个结构体,其宽度为 dimX ,高度为 dimY

  9. 适当更新 reqimg 元素的呈现。

EXIF中的分辨率相当于 每英寸CSS点,因此72是根据分辨率计算大小的基础。

尚未规定如果EXIF在图像已经展示后到达的情况。见 问题#4929

4.8.4.3.7 选择图像源

选择图像源 ,给定一个 img 元素 el

  1. Update the source set for el.

  2. 如果 elsource set 为空,则返回null作为URL,并返回undefined作为像素密度。

  3. Return the result of selecting an image from el源集合.

从source set中选择图像源 ,给定一个 source set sourceSet

  1. 如果 sourceSet 中的条目 b has the same associated pixel density descriptor as an earlier entry a in a, then remove entry b。重复此步骤,直到 sourceSet 中的所有条目都不再具有与之前条目相同的关联 像素密度描述符

  2. 实现定义 manner, choose one image source from sourceSet. Let selectedSource 为该选择。

  3. 返回 selectedSource 及其关联的像素密度。

4.8.4.3.8 从属性创建source set

当被要求 创建一个source set ,给定字符串 default source、字符串 srcset、字符串 sizes以及元素或null的 img

  1. source set 为一个空的 source set

  2. 如果 srcset 不是空字符串,则将 source set 设置为 解析 srcset的结果。

  3. source set来源尺寸 设置为在 解析 sizesimg时得到的结果。

  4. 如果 default source 不是空字符串,并且 source set does not contain an image source with a 像素密度描述符 值为1的 图像源 ,并且没有具有 宽度描述符, append default source 附加到 source set

  5. 规范化 of source set的源密度。

  6. 返回 source set

4.8.4.3.9 更新source set

When asked to update the source set for a given imglink 元素 el更新source set时,用户代理必须执行以下操作:

  1. elsource set 设置为空的 source set

  2. elements 为« el »。

  3. 如果 el is an img element whose parent node is a picture element, then 替换 the contents of elements 的内容为 el的父节点的子元素,保留相对顺序。

  4. 如果 el be el if el is an img element, otherwise null.

  5. 对于 elements 中的每个 child

    1. 如果 childel

      1. default source 为空字符串。

      2. srcset 为空字符串。

      3. sizes 为空字符串。

      4. 如果 el is an img element that has a srcset attribute, then set srcset 设置为该属性的值。

      5. 否则,如果 el is a link element that has an imagesrcset attribute, then set srcset 设置为该属性的值。

      6. 如果 el is an img element that has a sizes attribute, then set sizes 设置为该属性的值。

      7. 否则,如果 el is a link element that has an imagesizes attribute, then set sizes 设置为该属性的值。

      8. 如果 el is an img element that has a src attribute, then set default source 设置为该属性的值。

      9. 否则,如果 el is a link element that has an href attribute, then set default source 设置为该属性的值。

      10. elsource set to the result of creating a source set given default sourcesrcsetsizesimg.

      11. 返回。

        如果 ellink 元素,那么 elements 仅包含 el,因此此步骤将立即达到,算法的其余部分将不会运行。

    2. 如果 child 不是 source 元素,则 继续

    3. 如果 child 没有 srcset 属性, 继续 到下一个子元素。

    4. 解析 child的 srcset 属性 ,并令 source set 为返回的 source set

    5. 如果 source set 没有 图像源继续 到下一个子元素。

    6. 如果 child 具有 media 属性,并且其值不 与环境匹配继续 到下一个子元素。

    7. 解析 child的sizes属性 ,并将 source set, and let source set's source size 设置为返回的值。

    8. 如果 child 具有 type 属性,并且其值是未知或不支持的 MIME类型继续 到下一个子元素。

    9. 如果 child 具有 widthheight 属性,则将 el尺寸属性源 设置为 child。否则,将 el尺寸属性源 设置为 el

    10. 规范化 of source set的源密度。

    11. elsource set 设置为 source set

    12. 返回。

每个 img 元素单独考虑其前一个兄弟 source 元素加上 img 元素本身来选择 图像源, ignoring any other (invalid) elements, including other img elements in the same picture 元素中的其他 source 元素,或作为相关 img element.

4.8.4.3.10 解析 srcset 属性

当被要求从元素解析 srcset 属性 时,解析元素的 srcset 属性 的值如下:

  1. input 为传递给此算法的值。

  2. positioninput中的指针,初始指向字符串的开头。

  3. candidates 为初始为空的 source set

  4. 分割循环收集 that are ASCII whitespace or U+002C COMMA characters from position 给定的 input. If any U+002C COMMA characters were collected, that is a 解析错误

  5. 如果 position 已超过 input的末尾,返回 candidates

  6. 收集一系列代码点 ,这些代码点不是 ASCII 空白 , 从给定位置 positioninput中获取,并将结果赋值给 url

  7. descriptors 为一个新的空列表。

  8. 如果 url 以U+002C (,)结尾,则:

    1. url中移除所有尾随的U+002C 逗号字符。如果移除了多个字符,这是一个 解析错误

    否则:

    1. 描述符分词器跳过position 给定的 input中的ASCII空白字符。

    2. current descriptor 为空字符串。

    3. state在描述符中

    4. cposition处的字符。根据 state的值执行以下操作。对于此步骤的目的,“EOF”是一个特殊字符,表示 position 已超过 input的末尾。

      在描述符中

      根据 c的值执行以下操作:

      ASCII空白字符

      如果 current descriptor 不为空,将 current descriptor 追加到 descriptors 中,并将 current descriptor 设为空字符串。将 state 设为 在描述符之后

      U+002C 逗号 (,)

      position 推进到 input中的下一个字符。如果 current descriptor 不为空,将 current descriptor 追加到 descriptors中。跳到标记为 描述符解析器的步骤。

      U+0028 左括号 (()

      c 追加到 current descriptor中。将 state 设为 在括号中

      EOF

      如果 current descriptor 不为空,将 current descriptor 追加到 descriptors中。跳到标记为 描述符解析器的步骤。

      其他任何值

      c 追加到 current descriptor中。

      在括号中

      根据 c的值执行以下操作:

      U+0029 右括号 ())

      c 追加到 current descriptor中。将 state 设为 在描述符中

      EOF

      current descriptor 追加到 descriptors中。跳到标记为 描述符解析器的步骤。

      其他任何值

      c 追加到 current descriptor中。

      在描述符之后

      根据 c的值执行以下操作:

      ASCII空白字符

      保持在此状态。

      EOF

      跳到标记为 描述符解析器的步骤。

      其他任何值

      state 设为 在描述符中。将 position to the previous character in input.

      position 推进到 input中的下一个字符。重复此步骤。

      为了与将来的添加兼容,此算法支持多个描述符和带括号的描述符。

  9. 描述符解析器:令 error

  10. width不存在

  11. density不存在

  12. future-compat-h不存在

  13. 对于 descriptors中的每个描述符,执行以下列表中的相应步骤:

    如果描述符由一个 有效的非负整数 组成,后跟一个U+0077 拉丁小写字母W
    1. 如果用户代理不支持 sizes 属性,令 error

      符合规范的用户代理将支持 sizes 属性。然而,用户代理通常在实际中以增量方式实现和发布功能。

    2. 如果 widthdensity 都不是 不存在,则令 error

    3. 应用 解析非负整数的规则 到描述符。如果结果为0,令 error。否则,令 width 为结果。

    如果描述符由一个 有效的浮点数 组成,后跟一个U+0078 拉丁小写字母X
    1. 如果 widthdensityfuture-compat-h 都不是 不存在,则令 error

    2. 应用 解析浮点数值的规则 到描述符。如果结果小于0,令 error。否则,令 density 为结果。

      如果 density 为0,则 自然尺寸 将是无限的。预计用户代理在图像渲染大小方面 有其限制

    如果描述符由一个 有效的非负整数 组成,后跟一个U+0068 拉丁小写字母H

    这是一个 解析错误

    1. 如果 future-compat-hdensity 都不是 不存在,则令 error

    2. 应用 解析非负整数的规则 到描述符。如果结果为0,令 error。否则,令 future-compat-h 为结果。

    其他任何情况

    error

  14. 如果 future-compat-h 不是 不存在width不存在,令 error

  15. 如果 error 仍然是 , then append a new image source to candidates whose URL is url,宽度为 width (如果不是 不存在 ),像素密度为 density (如果不是 不存在)。否则,这是一个 解析错误

  16. 返回到标记为 分割循环的步骤。

4.8.4.3.11 解析 sizes 属性

When asked to parse a sizes attribute from an element element, with an img 元素或null img时:

  1. unparsed sizes list解析 from the value of elementsizes 属性 (or the empty string, if the attribute is absent). [CSSSYNTAX]

  2. size 为null。

  3. 对于 unparsed sizes list 中的每个 unparsed size

    1. Remove all consecutive <whitespace-token>s from the end of unparsed size. If unparsed size 现在为空,则这是一个 解析错误继续

    2. If the last component value in unparsed size is a valid non-negative <source-size-value>,则将 size to its value and remove the component value from unparsed size. Any CSS function other than the 数学函数 外的任何CSS函数都是无效的。否则,这是一个 解析错误继续

    3. 如果 sizeauto,并且 img 不是null,并且 img 正在 渲染,并且 img 允许自动尺寸,则将 size to the concrete object size width of img, in CSS像素为单位。

      如果 size 仍然是 auto,则它将被忽略。

    4. Remove all consecutive <whitespace-token>s from the end of unparsed size. If unparsed size 现在为空:

      1. 如果这不是 unparsed sizes list中的最后一项,则这是一个 解析错误

      2. 如果 size 不是 auto,则返回 size。否则,继续。

    5. Parse the remaining component values in unparsed size as a <media-condition>。如果它未正确解析,或者它正确解析但 <media-condition> 的结果为false, 继续. [MQ]

    6. 如果 size 不是 auto,则返回 size。否则,继续。

  4. 返回 100vw

使用一个不带 <media-condition> 的裸 <source-size-value> (作为一个 <length>)作为一个不在列表末尾的 <source-size-list> 条目是无效的。然而,解析 算法允许它出现在 <source-size-list>中的任何位置,并且如果列表中的前一个条目未被使用,则会立即接受它作为尺寸。这是为了支持将来的扩展,并防止简单的作者错误,例如最后的尾随逗号。一个裸的 auto 关键字被允许有其他条目跟在其后,以为遗留的用户代理提供回退。

4.8.4.3.12 规范化源密度

An 图像源 可以有一个 像素密度描述符、一个 宽度描述符,或者伴随其URL没有任何描述符。规范化 源集 会给每个 图像源 一个 像素密度描述符

当要求 规范化源密度 时,对于一个 源集合 source set,用户代理必须执行以下操作:

  1. source sizesource set源尺寸

  2. For each image source in source set:

    1. 如果 图像源 带有 像素密度描述符,则 继续 到下一个 图像源

    2. 否则,如果 图像源 带有 宽度描述符,则将该 宽度描述符 替换为一个 像素密度描述符 ,其 of the width descriptor value divided by 源大小 ”,单位为 x

      如果 源大小 为 0,则密度为无穷大,这会导致 自然尺寸 变为 0 × 0。

    3. 否则,为该 图像源 赋予一个 像素密度描述符 ,值为 1x

4.8.4.3.13 应对环境变化

用户代理可以随时运行以下算法,以更新 img 元素的图像,以 应对环境变化。(用户代理 不需要 运行此算法;例如,如果用户不再查看页面,用户代理可能会等到用户返回页面后再确定使用哪个图像,以防在此期间环境再次变化。)

用户代理特别鼓励在用户更改 视口大小(例如,通过调整窗口大小或更改页面缩放),以及将 img 元素 插入到文档中时运行此算法,以使 密度校正后的自然宽度和高度 匹配新的 视口,并在涉及 艺术指导 时选择正确的图像。

  1. 等待稳定状态同步部分 包括此算法的所有剩余步骤,直到算法声明 同步部分 结束为止。( 同步部分 的步骤标有⌛。)

  2. ⌛ 如果 img element does not use srcsetpicture, its 节点文档 未处于 fully active状态,或其拥有资源类型为 multipart/x-mixed-replace的图像数据,或其 pending request 不为 null,则返回。

  3. ⌛ 令 selected sourceselected pixel density 分别为 选择图像源的URL和像素密度的结果。

  4. ⌛ 如果 selected source 为null,则返回。

  5. ⌛ 如果 selected sourceselected pixel density 与元素的 最后选择的源当前像素密度相同,则返回。

  6. ⌛ 令 urlString编码、解析和序列化URL 的结果,给定 selected source,相对于元素的 节点文档

  7. ⌛ 如果 urlString 失败,则返回。

  8. ⌛ 令 corsAttributeState 为元素的 crossorigin 内容属性的状态。

  9. ⌛ 令 originimg 元素的 节点文档

  10. ⌛ 令 clientimg 元素的 节点文档相关设置对象

  11. ⌛ 令 key 为一个元组,包含 urlStringcorsAttributeState,如果 corsAttributeState 不为 无CORS,则包含 origin

  12. ⌛ 令 image request 为一个新的 图像请求 ,其 当前URLurlString

  13. ⌛ 将元素的 pending request 设为 image request

  14. 结束 同步部分并行继续其余步骤。

  15. 如果 可用图像列表 中包含 key的条目,则将 image request图像数据 设置为该条目的图像数据。继续下一步。

    否则:

    1. request创建潜在的 CORS 请求 ,参数为 urlString、"image" 和 corsAttributeState的结果。

    2. requestclient 设为 clientrequestinitiator 设为 "imageset",并设置 request同步标志

    3. requestreferrer policy(引用策略) 设为当前元素的 referrerpolicy 属性的当前值。

    4. requestpriority(优先级) 设为当前元素的 fetchpriority 属性的当前值。

    5. response获取 request的结果。

    6. 如果 response不安全响应 是一个 网络错误 ,或者图像格式不受支持(通过应用 图片嗅探规则,如前所述确定),或者用户代理能够确定 image request的图像已损坏且无法获得图像尺寸,或者资源类型为 multipart/x-mixed-replace,则将 pending request 设为 null 并中止这些步骤。

    7. 否则, response不安全响应 即为 image request图像数据。它可以是 CORS-同源CORS-跨源,这会影响图像与其他 API 的交互(例如用于 canvas时)。

  16. 将元素任务排队DOM操作任务源 ,给定 img 元素和以下步骤:

    1. 如果 img 元素自算法开始以来经历了 相关变更 ,则将 pending request 设为 null 并中止这些步骤。

    2. img 元素的 last selected source 设为 selected source ,并将 img 元素的 current pixel density 设为 selected pixel density

    3. image request状态 设为 完全可用

    4. Add the image to the list of available images using the key key, with the 忽略更高层缓存 标志。

    5. 将挂起请求升级为当前请求

    6. 为展示准备 image request for presentation 给定 img 元素。

    7. 触发一个事件 ,名为 load ,在 img 元素上。

4.8.4.4 提供文字作为图像替代的要求
4.8.4.4.1 一般准则

除非另有规定, alt 属性必须指定且其值不能为空;其值必须是图像的适当替代。 alt 属性的具体要求取决于图像的表示目的,如以下部分所述。

编写替代文字时要考虑的最一般规则是: 意图是用 alt 属性的文字替换每个图像不会改变页面的意义

因此,一般来说,可以通过考虑如果不能包含图像时会写什么来编写替代文字。

由此引申出 alt 属性的值不应包含可视为图像的 说明标题图例的文字。它应该包含用户可以 替代 图像使用的替代文字,而不是补充图像。 title 属性可以用于补充信息。

另一个引申点是 alt 属性的值不应重复已经在图像旁边的文章中提供的信息。

考虑替代文字的一种方法是思考如何通过电话阅读包含图像的页面,而不提及存在图像。你用来替代图像的内容通常是编写替代文字的良好开端。

当创建超链接的 a element that creates a hyperlink, or a button 元素没有文本内容但包含一个或多个图像时, alt 属性必须包含传达链接或按钮目的的文本。

在此示例中,用户被要求从三个颜色列表中选择他们喜欢的颜色。每种颜色由图像表示,但对于配置用户代理不显示图像的用户,使用颜色名称代替:

<h1>Pick your color</h1>
<ul>
 <li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li>
 <li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li>
 <li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li>
</ul>

在此示例中,每个按钮都有一组图像以指示用户所需的颜色输出类型。每种情况下第一个图像用于提供替代文本。

<button name="rgb"><img src="red" alt="RGB"><img src="green" alt=""><img src="blue" alt=""></button>
<button name="cmyk"><img src="cyan" alt="CMYK"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>

由于每个图像代表文字的一部分,也可以这样写:

<button name="rgb"><img src="red" alt="R"><img src="green" alt="G"><img src="blue" alt="B"></button>
<button name="cmyk"><img src="cyan" alt="C"><img src="magenta" alt="M"><img src="yellow" alt="Y"><img src="black" alt="K"></button>

但是,使用其他替代文字时,这可能行不通,在每种情况下将所有替代文字放入一个图像中可能更有意义:

<button name="rgb"><img src="red" alt="sRGB profile"><img src="green" alt=""><img src="blue" alt=""></button>
<button name="cmyk"><img src="cyan" alt="CMYK profile"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>
4.8.4.4.3 带有替代图形表示的短语或段落:图表、图解、图形、地图、插图

有时,图形形式可以更清晰地表达某些内容,例如流程图、图解、图形或显示方向的简单地图。在这种情况下,可以使用 img 元素来提供图像,但仍必须提供较少的文本版本,以便无法查看图像的用户(例如,由于连接非常慢,或因为他们使用的是纯文本浏览器,或者因为他们通过免提汽车语音网页浏览器听取页面,或者因为他们是盲人)仍然能够理解所传达的信息。

文本必须在 alt 属性中给出,必须传达与 src 属性中指定的图像相同的信息。

重要的是要意识到,替代文本是图像的 替代 ,而不是图像的描述。

在以下示例中,我们有一个以图像形式显示的 流程图alt 属性中的文本以散文形式重新表述流程图:

<p>In the common case, the data handled by the tokenization stage
comes from the network, but it can also come from script.</p>
<p><img src="images/parsing-model-overview.svg" alt="The Network
passes data to the Input Stream Preprocessor, which passes it to the
Tokenizer, which passes it to the Tree Construction stage. From there,
data goes to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to the
Tokenizer."></p>

这里是另一个示例,显示了在描述中包含图像问题的好解决方案和坏解决方案。

首先,这是好的解决方案。此示例显示了如果图像从未存在,替代文本应该是你会放在散文中的内容。

<!-- This is the correct way to do things. -->
<p>
 You are standing in an open field west of a house.
 <img src="house.jpeg" alt="The house is white, with a boarded front door.">
 There is a small mailbox here.
</p>

其次,这是坏的解决方案。在这种错误的做法中,替代文本只是图像的描述,而不是图像的文字替代。这是错误的,因为当图像不显示时,文本的流畅性不如第一个示例。

<!-- This is the wrong way to do things. -->
<p>
 You are standing in an open field west of a house.
 <img src="house.jpeg" alt="A white house, with a boarded front door.">
 There is a small mailbox here.
</p>

类似“Photo of white house with boarded door”这样的文字也会是糟糕的替代文本(尽管它可能适合用于 title 属性或带有此图像的 figcaption 元素中的 figure 元素)。

4.8.4.4.4 带有替代图形表示的短语或标签:图标、标志

文档可以包含图标形式的信息。图标旨在帮助视觉浏览器用户一眼就能识别功能。

在某些情况下,图标是传达相同意义的文本标签的补充。在这些情况下, alt 属性必须存在但必须为空。

这里图标在传达相同意义的文本旁边,所以它们的 alt 属性为空:

<nav>
 <p><a href="/help/"><img src="/icons/help.png" alt=""> Help</a></p>
 <p><a href="/configure/"><img src="/icons/configuration.png" alt="">
 Configuration Tools</a></p>
</nav>

在其他情况下,图标旁边没有描述其含义的文本;图标应是自解释的。在这些情况下,必须在 alt 属性中给出等效的文本标签。

这里,新闻网站上的文章用图标标明其主题。

<body>
 <article>
  <header>
   <h1>Ratatouille wins <i>Best Movie of the Year</i> award</h1>
   <p><img src="movies.png" alt="Movies"></p>
  </header>
  <p>Pixar has won yet another <i>Best Movie of the Year</i> award,
  making this its 8th win in the last 12 years.</p>
 </article>
 <article>
  <header>
   <h1>Latest TWiT episode is online</h1>
   <p><img src="podcasts.png" alt="Podcasts"></p>
  </header>
  <p>The latest TWiT episode has been posted, in which we hear
  several tech news stories as well as learning much more about the
  iPhone. This week, the panelists compare how reflective their
  iPhones' Apple logos are.</p>
 </article>
</body>

许多页面包含标志、徽章、旗帜或徽章,这些代表特定实体,如公司、组织、项目、乐队、 软件包、国家等。

如果标志用于表示实体,例如作为页面标题, alt 属性必须包含标志所代表的实体的名称。 alt attribute must not contain text like the word "logo", as it is not the fact that it is a logo that is being conveyed, it's the entity itself.

如果标志用于表示其代表的实体名称旁边,则该标志是补充性的,其 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>

This example shows how the alternative text should be written such that if the image isn't available, and the text is used instead, the text flows seamlessly into the surrounding text, as if the image had never been there in the first place.

4.8.4.4.5 图形化呈现的文本

有时,图像仅由文本组成,图像的目的是传达文本本身,而不是突出用于呈现文本的实际排版效果。

在这种情况下, alt 属性必须存在,但其内容必须与图像本身的文本相同。

考虑一个包含“Earth Day”文本的图形,但字母上都装饰有花卉和植物。如果文本仅用作标题,为图形用户增加页面趣味,那么正确的替代文本就是相同的文本“Earth Day”,无需提及装饰:

<h1><img src="earthdayheading.png" alt="Earth Day"></h1>

在照明手稿中,某些图像可能会使用图形。在这种情况下的替代文本只是图像所代表的字符。

<p><img src="initials/o.svg" alt="O">nce upon a time and a long long time ago, late at
night, when it was dark, over the hills, through the woods, across a great ocean, in a land far
away, in a small house, on a hill, under a full moon...

当图像用于表示无法用Unicode表示的字符时,例如外字、异体字或新字符(如新货币符号),替代文本应为更常规的书写方式,例如使用平假名或片假名给出字符的发音。

在1997年的这个例子中,一个看起来像带有两个横线而不是一个的花体E的新货币符号用图像表示。替代文本给出了字符的发音。

<p>Only <img src="euro.png" alt="euro ">5.99!

如果字符可以达到相同的目的,则不应使用图像。只有当文本不能直接用文本表示时,例如由于装饰或没有适当的字符(如外字的情况),才应使用图像。

如果作者因为其默认系统字体不支持某个字符而想使用图像,那么网络字体比图像更好的解决方案。

4.8.4.4.6 周围文本的图形表示

在许多情况下,图像实际上只是补充,其存在只是加强了周围的文本。在这些情况下, alt 属性必须存在,但其值必须为空字符串。

一般来说,如果删除图像不会使页面的实用性降低,但包括图像会使视觉浏览器的用户更容易理解概念,那么图像就属于这一类。

以下是以图形形式重复前一段的流程图:

<p>The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</p>
<p><img src="images/parsing-model-overview.svg" alt=""></p>

在这些情况下,仅包含一个标题的替代文本是错误的。如果要包括标题,可以使用 title 属性,或者使用 figurefigcaption 元素。在后一种情况下,图像实际上是带有替代图形表示的短语或段落,因此需要替代文本。

<!-- Using the title="" attribute -->
<p>The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</p>
<p><img src="images/parsing-model-overview.svg" alt=""
        title="Flowchart representation of the parsing model."></p>
<!-- Using <figure> and <figcaption> -->
<p>The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</p>
<figure>
 <img src="images/parsing-model-overview.svg" alt="The Network leads to
 the Input Stream Preprocessor, which leads to the Tokenizer, which
 leads to the Tree Construction stage. The Tree Construction stage
 leads to two items. The first is Script Execution, which leads via
 document.write() back to the Tokenizer. The second item from which
 Tree Construction leads is the DOM. The DOM is related to the Script
 Execution.">
 <figcaption>Flowchart representation of the parsing model.</figcaption>
</figure>
<!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
<p>The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</p>
<p><img src="images/parsing-model-overview.svg"
        alt="Flowchart representation of the parsing model."></p>
<!-- Never put the image's caption in the alt="" attribute! -->

以下是以图形形式重复前一段的图表:

<p>According to a study covering several billion pages,
about 62% of documents on the web in 2007 triggered the Quirks
rendering mode of web browsers, about 30% triggered the Almost
Standards mode, and about 9% triggered the Standards mode.</p>
<p><img src="rendering-mode-pie-chart.png" alt=""></p>
4.8.4.4.7 辅助图像

有时,图像对内容并非至关重要,但也不是纯装饰或完全与文本重复。在这些情况下, alt 属性必须存在,其值应为空字符串或该图像所传达信息的文本表示。如果图像有标题说明图像的标题,那么 alt 属性的值不应为空(因为这对非视觉读者来说会很困惑)。

考虑一篇关于政治人物的新闻文章,其中个人的脸部显示在图像中。图像不是纯装饰性的,因为它与故事相关。图像也不是完全与故事重复,因为它显示了政治家的外貌。是否需要提供任何替代文本是一个创作决定,取决于图像是否影响了文章的解释。

在第一个变体中,图像没有上下文,未提供替代文本:

<p><img src="president.jpeg" alt=""> Ahead of today's referendum,
the President wrote an open letter to all registered voters. In it, she admitted that the country was
divided.</p>

如果图片只是脸部,描述它可能没有意义。读者不关心这个人是红发还是金发,是白皮肤还是黑皮肤,是一只眼睛还是两只眼睛。

然而,如果图片更具动态性,例如显示政治家愤怒、特别高兴或沮丧,那么一些替代文本在设定文章基调方面会很有用,否则可能会错过这一点:

<p><img src="president.jpeg" alt="The President is sad.">
Ahead of today's referendum, the President wrote an open letter to all
registered voters. In it, she admitted that the country was divided.
</p>
<p><img src="president.jpeg" alt="The President is happy!">
Ahead of today's referendum, the President wrote an open letter to all
registered voters. In it, she admitted that the country was divided.
</p>

总统“悲伤”还是“高兴”会影响如何解释其余的段落:她可能是在说她对国家的分裂感到不满,还是在说国家分裂的前景对她的政治生涯有利?根据图像的不同,解释也会不同。

如果图像有标题,那么包括替代文本可以避免让非视觉用户对标题所指内容感到困惑。

<p>Ahead of today's referendum, the President wrote an open letter to
all registered voters. In it, she admitted that the country was divided.</p>
<figure>
 <img src="president.jpeg"
      alt="A high forehead, cheerful disposition, and dark hair round out the President's face.">
 <figcaption> The President of Ruritania. Photo © 2014 PolitiPhoto. </figcaption>
</figure>
4.8.4.4.8 纯装饰性图像,不添加任何信息

如果图像是装饰性的,但并不是特别针对页面的——例如作为整个网站设计方案的一部分——图像应该在网站的CSS中指定,而不是在文档的标记中。

然而,一个装饰性图像虽然没有被周围的文本讨论,但仍有一定的相关性,可以使用 img 元素包含在页面中。这类图像是装饰性的,但仍构成内容的一部分。在这些情况下, alt 属性必须存在,但其值必须为空字符串。

尽管图像相关,但纯装饰性的示例包括在关于火人节活动的博客文章中展示黑岩城景观的照片,或者在朗诵某首诗的页面上展示受该诗启发的绘画图像。以下片段显示了后一种情况的示例(此片段仅包括第一节):

<h1>The Lady of Shalott</h1>
<p><img src="shalott.jpeg" alt=""></p>
<p>On either side the river lie<br>
Long fields of barley and of rye,<br>
That clothe the wold and meet the sky;<br>
And through the field the road run by<br>
To many-tower'd Camelot;<br>
And up and down the people go,<br>
Gazing where the lilies blow<br>
Round an island there below,<br>
The island of Shalott.</p>

当一幅图片被切割成较小的图像文件,然后再一起显示以组成完整的图片时,其中一个图像的 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%">

请注意,“销售图表”对于销售图表来说是不够的替代文本。适合作为 标题 的文本通常不适合作为替代文本。

无法完全描述的图像

在某些情况下,图像的性质可能使得提供详细的替代文本不切实际。例如,图像可能模糊不清,或是复杂的分形图案,或是详细的地形图。

在这些情况下, alt 属性必须包含一些合适的替代文本,但可以相对简短。

有时确实没有任何文本可以充分描述一张图像。例如,对于罗夏墨迹测试图,很难用有用的文字来描述。然而,即使是简短的描述,也总比没有要好:

<figure>
 <img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right
 symmetry with indistinct edges, with a small gap in the center, two
 larger gaps offset slightly from the center, with two similar gaps
 under them. The outline is wider in the top half than the bottom
 half, with the sides extending upwards higher than the center, and
 the center extending below the sides.">
 <figcaption>A black outline of the first of the ten cards
 in the Rorschach inkblot test.</figcaption>
</figure>

请注意,以下做法会是替代文本的非常糟糕的使用:

<!-- This example is wrong. Do not copy it. -->
<figure>
 <img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
 of the first of the ten cards in the Rorschach inkblot test.">
 <figcaption>A black outline of the first of the ten cards
 in the Rorschach inkblot test.</figcaption>
</figure>

将标题包含在替代文本中并没有什么用,因为这样做实际上是对那些无法查看图像的用户重复了一遍标题,让他们感到困扰,而不会比只读或听一次标题更有帮助。

另一个无法完全描述的图像的例子是分形图,它本质上是无限细节的。

以下示例展示了一种可能的方式来为曼德布罗特集的完整视图提供替代文本。

<img src="ms1.jpeg" alt="The Mandelbrot set appears as a cardioid with
its cusp on the real axis in the positive direction, with a smaller
bulb aligned along the same center line, touching it in the negative
direction, and with these two shapes being surrounded by smaller bulbs
of various sizes.">

同样,一张人的面部照片,例如在传记中,可以被认为是非常相关且关键的内容,但为其提供完全替代的文本可能很困难:

<section class="bio">
 <h1>A Biography of Isaac Asimov</h1>
 <p>Born <b>Isaak Yudovich Ozimov</b> in 1920, Isaac was a prolific author.</p>
 <p><img src="headpics/asimov.jpeg" alt="Isaac Asimov had dark hair, a tall forehead, and wore glasses.
 Later in life, he wore long white sideburns."></p>
 <p>Asimov was born in Russia, and moved to the US when he was three years old.</p>
 <p>...</p>
</section>

在这种情况下,在替代文本中包含对图像本身存在的引用是不必要的(实际上也是不鼓励的),因为这些文本与浏览器报告图像存在本身是重复的。例如,如果替代文本是“艾萨克·阿西莫夫的照片”,则符合标准的用户代理可能会读作“(图像)艾萨克·阿西莫夫的照片”,而不是更有用的“(图像)艾萨克·阿西莫夫有深色头发、高额头,戴着眼镜……”。

内容未知的图像

在一些不幸的情况下,可能完全没有可用的替代文本,要么是因为图像是通过某种自动化方式获取的,没有任何关联的替代文本(例如,网络摄像头),要么是因为页面是通过脚本生成的,用户提供的图像没有提供合适或可用的替代文本(例如,照片共享网站),要么是因为作者自己不知道图像代表什么(例如,一个盲人摄影师在他们的博客上分享图像)。

在这种情况下, alt 属性可以省略,但还必须满足以下条件之一:

这种情况应保持在绝对最低限度。如果作者有可能提供真实的替代文本,那么省略 alt 属性是不被接受的。

在一个照片分享网站上,如果网站收到的图像没有任何元数据,只包含说明,可以这样标记:

<figure>
 <img src="1100670787_6a7c664aef.jpg">
 <figcaption>Bubbles traveled everywhere with us.</figcaption>
</figure>

然而,如果能够从用户那里获得图像的重要部分的详细描述并将其包含在页面上,那将更好。

一个盲人用户的博客中显示了一张由用户拍摄的照片。最初,用户可能不知道他们拍摄的照片展示了什么:

<article>
 <h1>I took a photo</h1>
 <p>I went out today and took a photo!</p>
 <figure>
  <img src="photo2.jpeg">
  <figcaption>A photograph taken blindly from my front porch.</figcaption>
 </figure>
</article>

然而,用户最终可能会从他们的朋友那里获得图像的描述,并可以添加替代文本:

<article>
 <h1>I took a photo</h1>
 <p>I went out today and took a photo!</p>
 <figure>
  <img src="photo2.jpeg" alt="The photograph shows my squirrel
  feeder hanging from the edge of my roof. It is half full, but there
  are no squirrels around. In the background, out-of-focus trees fill the
  shot. The feeder is made of wood with a metal grate, and it contains
  peanuts. The edge of the roof is wooden too, and is painted white
  with light blue streaks.">
  <figcaption>A photograph taken blindly from my front porch.</figcaption>
 </figure>
</article>

有时,图像的全部意义在于无法提供文本描述,用户需要提供描述。例如,CAPTCHA 图像的目的就是查看用户是否能够字面上读取图形。这里是标记 CAPTCHA 的一种方式(注意 title 属性):

<p><label>What does this image say?
<img src="captcha.cgi?id=8934" title="CAPTCHA">
<input type=text name=captcha></label>
(If you cannot see the image, you can use an <a
href="?audio">audio</a> test instead.)</p>

另一个示例是显示图像并要求提供替代文本的软件,目的是然后编写具有正确替代文本的页面。这样的页面可以包含一个图像表格,如下所示:

<table>
 <thead>
  <tr> <th> Image <th> Description
 <tbody>
  <tr>
   <td> <img src="2421.png" title="Image 640 by 100, filename 'banner.gif'">
   <td> <input name="alt2421">
  <tr>
   <td> <img src="2422.png" title="Image 200 by 480, filename 'ad3.gif'">
   <td> <input name="alt2422">
</table>

请注意,即使在这个示例中,也尽可能多地在 title 属性中包含有用的信息。

由于一些用户根本无法使用图像(例如,因为他们的连接非常慢,或因为他们使用的是仅文本浏览器,或因为他们正在使用免提汽车语音网页浏览器来听页面内容,或仅仅因为他们是盲人), alt 属性只允许在没有替代文本且无法提供替代文本时省略,而不是提供替代文本,如上例所示。缺乏作者的努力不是省略 alt 属性的可接受理由。

4.8.4.4.12 不打算给用户显示的图像

一般来说,作者应避免将 img 元素用于显示图像以外的其他目的。

如果 img 元素用于显示图像以外的其他目的,例如作为页面浏览量统计的一部分,则 alt 属性必须为空字符串。

在这种情况下, widthheight 属性应设置为零。

4.8.4.4.13 在电子邮件或私人文档中,打算给一个已知能查看图像的特定人

本节不适用于公开访问的文档,或其目标受众不一定为作者个人认识的人,例如网站上的文档、发送到公开邮件列表的电子邮件或软件文档。

当图像包含在针对特定且已知能够查看图像的个人的私人通信(例如HTML电子邮件)中时, alt 属性可以省略。然而,即使在这种情况下,仍强烈建议作者包括替代文本(根据图像的类型,如上所述),以便在用户使用不支持图像的邮件客户端时,电子邮件仍然可以使用,或者在文档被转发给其他可能不易查看图像的用户时,文档仍然可用。

4.8.4.4.14 标记生成器的指导

标记生成器(如所见即所得的创作工具)应尽可能从用户那里获取替代文本。然而,认识到在许多情况下,这可能不可行。

对于作为链接唯一内容的图像,标记生成器应检查链接目标,以确定目标的标题或目标的URL,并使用以这种方式获得的信息作为替代文本。

对于有标题的图像,标记生成器应使用 figurefigcaption 元素,或 title 属性,来提供图像的标题。

作为最后的手段,实施者应将 alt 属性设置为空字符串,假设图像是纯粹的装饰性图像,不添加任何信息但仍特定于周围内容,或者完全省略 alt 属性,假设图像是内容的关键部分。

Markup generators may specify a generator-unable-to-provide-required-alt attribute on img elements for which they have been unable to obtain alternative text and for which they have therefore omitted the alt 属性。该属性的值必须为空字符串。包含这些属性的文档不符合规范,但一致性检查器将 默默忽略 这一错误。

这旨在避免标记生成器因省略 alt 属性而被迫用更严重的错误(如提供虚假的替代文本)来替代,因为最先进的自动一致性检查器无法区分虚假的替代文本和正确的替代文本。

标记生成器通常应避免使用图像本身的文件名作为替代文本。同样,标记生成器应避免从任何将同样可供呈现用户代理(例如,Web浏览器)使用的内容中生成替代文本。

这是因为一旦页面生成,它通常不会被更新,而随后读取页面的浏览器可以由用户更新,因此浏览器可能会比标记生成器在生成页面时具有更为最新和精确的启发式规则。

4.8.4.4.15 一致性检查器的指导

一致性检查器必须报告缺少 alt 属性为错误,除非符合以下列出的条件之一:

4.8.5 The iframe 元素

Element/iframe

在所有当前引擎中支持。

Firefox1+Safari4+Chrome1+
Opera15+Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android14+

HTMLIFrameElement

在所有当前引擎中支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

HTMLIFrameElement/src

Support in all current engines.

火狐1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer5.5+
火狐 Android?Safari iOS1+Chrome Android?WebView Android?三星浏览器 Android?Opera Android12.1+

HTMLObjectElement/width

Support in all current engines.

火狐1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer5.5+
火狐 Android?Safari iOS1+Chrome Android?WebView Android?三星浏览器 Android?Opera Android12.1+

HTMLObjectElement/height

Support in all current engines.

火狐1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer5.5+
火狐 Android?Safari iOS1+Chrome Android?WebView Android?三星浏览器 Android?Opera Android12.1+
类别:
流内容
短语内容
嵌入内容
交互内容
有感内容
可使用此元素的上下文:
当需要 嵌入内容 时。
内容模型:
在 text/html 中省略标签:
两个标签都不可省略。
内容属性:
全局属性
src — 资源地址
srcdoc — 在 iframe
name可导航内容
sandbox — 嵌套内容的安全规则
allowPermissions policy to be applied to the iframe's contents
allowfullscreen — 是否允许 iframe内容使用 requestFullscreen()
width — 水平方向尺寸
height — 垂直方向尺寸
referrerpolicy — 元素发起的 引用策略fetches initiated by the element
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
};

The iframe 元素 表示可导航内容

The src 属性提供了该元素的 URL ,该页面将被该元素的 可导航内容 包含。该属性(如果存在)必须是一个 有效的非空 URL,可能被空格包围。如果 itemprop 属性在一个 iframe 元素上指定,则 src 属性也必须被指定。

Element/iframe#attr-srcdoc

在所有当前引擎中支持。

Firefox25+Safari6+Chrome20+
Opera?Edge79+
Edge (旧版)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android?

The srcdoc 属性提供了该元素的 可导航内容 的页面内容。该属性的值用于 构建 一个 iframe srcdoc 文档,它是一个 Document ,其 URL 匹配 about:srcdoc

The srcdoc 属性(如果存在)必须使用 HTML 语法 ,由以下语法组件按给定顺序组成:

  1. 任意数量的 注释ASCII 空白字符
  2. 可选的 DOCTYPE
  3. 任意数量的 注释ASCII 空白字符
  4. The document element, in the form of an 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 属性时保留符号,另一次是为了防止在解析沙盒内容时误解符号。

此外,请注意,由于 DOCTYPEiframe srcdoc 文档中是可选的,并且 htmlheadbody 元素具有 可选的 起始标签和结束标签,并且 title 元素在 iframe srcdoc 文档中也是可选的,因此 srcdoc 属性中的标记尽管表示的是整个文档,也可以相对简洁,因为在语法中只需要按字面出现 body 元素的内容。其他元素仍然 存在,但只是通过隐含的方式存在。

HTML 语法中,作者只需记住使用 U+0022 引号字符 (") 包裹属性内容,然后转义所有的 U+0026 符号 (&) 和 U+0022 引号 (") 字符,并指定 sandbox 属性,以确保内容安全嵌入。(记得在引号之前转义符号,以确保引号变成 &quot; 而不是 &amp;quot;。)

在 XML 中,U+003C 小于号字符 (<) 也需要转义。为了防止 属性值规范化,一些 XML 的空白字符——特别是 U+0009 制表符 (tab)、U+000A 换行符 (LF) 和 U+000D 回车符 (CR)——也需要转义。 [XML]

如果 src 属性和 srcdoc 属性同时指定,则 srcdoc attribute takes priority. This allows authors to provide a fallback URL for legacy user agents that do not support the srcdoc attribute.


对于 iframe HTML 元素连接后步骤,在给定 insertedNode的情况下,如下:

  1. 如果 insertedNodesandbox attribute, then parse the sandboxing directive given the attribute's value and insertedNodeiframe 沙盒标志集.

  2. Create a new child navigable for insertedNode.

  3. 处理 iframe 的属性 ,针对 insertedNode,并将 initialInsertion 设置为 true。

The iframe HTML 元素移除步骤,给定 removedNode,是 销毁子可导航对象 ,给定 removedNode

这在没有触发任何 unload 事件的情况下发生(该元素的 内容文档销毁,而不是 卸载)。

虽然 iframe元素在 影子树中处理,如上所述,但其行为的其他几个方面在影子树方面没有明确规定。有关详细信息,请参见 issue #763

Whenever an iframe element with a non-null content navigable has its srcdoc 属性被设置、更改或移除时,用户代理必须 处理 iframe 属性

Similarly, whenever an iframe element with a non-null 可导航内容 但没有指定 srcdoc attribute specified has its src 属性被设置、更改或移除时,用户代理必须 处理 iframe 属性

处理 iframe 的属性 ,对于元素 element,可选布尔值 initialInsertion (默认为 false):

  1. 如果 elementsrcdoc 属性已指定,则:

    1. elementcurrent navigation was lazy loaded 布尔值设为 false。

    2. 如果 will lazy load element steps 给定 element 返回 true,则:

      1. elementlazy load resumption steps 设置为从标记为 navigate to the srcdoc resource的步骤开始的算法的其余部分。

      2. elementcurrent navigation was lazy loaded 布尔值设为 true。

      3. Start intersection-observing a lazy loading element for element.

      4. 返回。

    3. Navigate to the srcdoc resourceNavigate an iframeframe given element, about:srcdoc,空字符串和 elementsrcdoc 属性的值。

      生成的 Document 必须被视为 一个 iframe srcdoc 文档

  2. 否则:

    1. url be the result of running the shared attribute processing steps for iframe and frame elements given elementinitialInsertion.

    2. 如果 url 为 null,则返回。

    3. 如果 url 匹配 about:blankinitialInsertion 为 true,则:

      1. 运行 iframe 加载事件步骤 ,给定 element

      2. 返回。

    4. referrerPolicy 成为 elementreferrerpolicy 内容属性的当前状态。

    5. elementcurrent navigation was lazy loaded 布尔值设为 false。

    6. 如果 will lazy load element steps 给定 element 返回 true,则:

      1. elementlazy load resumption steps 设置为从标记为 navigate的步骤开始的算法的其余部分。

      2. elementcurrent navigation was lazy loaded 布尔值设为 true。

      3. Start intersection-observing a lazy loading element for element.

      4. 返回。

    7. NavigateNavigate an iframeframe ,给定 urlreferrerPolicy, and referrerPolicy.

The shared attribute processing steps for iframeframe 元素的共享属性处理步骤, given an element element and a boolean initialInsertion, are:

  1. urlURL 记录 about:blank

  2. 如果 element 指定了 src 属性,并且其值不是空字符串,则:

    1. maybeURL编码解析 URL 的结果,给定该属性的值,相对于 element节点文档

    2. 如果 maybeURL 不是失败,则将 url 设置为 maybeURL

  3. If the inclusive ancestor navigables of element节点可导航 contains a 可导航 ,其 活动文档URL 等于 url ,且 排除片段 设置为 true,则返回 null。

  4. 如果 url 匹配 about:blank ,且 initialInsertion 为 true,则执行 URL 和历史记录更新步骤 ,给定 element可导航内容活动文档url

    如果 url 是类似 about:blank?foo的内容,这是必要的。如果 url 只是纯粹的 about:blank,这将不做任何事情。

  5. 返回 url

导航一个 iframeframe ,需给定元素 elementURL urlreferrer policy(引用者策略) referrerPolicy,一个可选的 string-or-null 类型 srcdocString (默认为 null),以及一个可选的布尔值 initialInsertion (默认为 false):

  1. historyHandling 为 "auto"。

  2. 如果 element内容 可导航对象活动文档完全加载,则将 historyHandling 设置为 "replace"。

  3. 如果 element 是一个 iframe

    1. element待处理资源计时开始时间 to the current high resolution time given element节点文档相关全局对象.

    2. element待处理资源计时 URL 设置为 url

  4. Navigate element节点文档 ,将 element using url's node document, with historyHandling 设置为 historyHandling,将 referrerPolicy 设置为 referrerPolicy,将 documentResource 设置为 srcdocString,并将 initialInsertion 设置为 initialInsertion

每个 Document 都有一个 iframe 加载中 标志和一个 静音 iframe 加载 标志。当一个 Document is created, these flags must be unset for that Document.

To run the iframe load event steps, given an iframe 元素 element:

  1. 断言element内容可导航对象 不为 null。

  2. childDocumentelement内容可导航对象活动文档

  3. 如果 childDocument 设置了其 抑制 iframe 加载 标志,则 返回。

  4. 如果 element待处理资源计时开始时间 不为 null,则:

    1. 断言element待处理资源计时 URL 不为 null。

    2. globalelement节点 文档相关全局 对象

    3. fallbackTimingInfo 为一个新的 fetch 计时信息 , 其 开始时间element待处理资源计时开始 时间 , 且其 响应 结束时间 is the current high resolution time given global.

    4. Mark resource timing given fallbackTimingInfo解析 element待处理资源计时 URL所得结果、 "iframe"、 global、空字符串、一个新的 响应体信息, and 0.

    5. element待处理资源计时开始 时间 设置为 null。

    6. element待处理资源计时 URL 设置为 null。

  5. 设置 childDocumentiframe 加载进行中 标志。

  6. 触发一个事件 ,其名称为 load at element.

  7. 取消设置 childDocumentiframe 加载进行中 标志。

这与脚本一起使用时,可以用于探测本地网络 HTTP 服务器的 URL 空间。用户代理可能会实现比上述描述更严格的 跨源 访问控制策略以减轻此攻击,但不幸的是,这些策略通常与现有的网页内容不兼容。

如果某个元素类型 可能延迟加载事件,则对于该类型的每个元素 element ,用户代理必须 延迟 of element节点文档 的加载事件,如果 element内容可导航 非 null,并且以下任意条件为真:

如果在处理 load 事件期间, element内容可导航 再次被 导航,这将进一步 延迟加载事件

每个 iframe 元素有一个关联的 当前导航是惰性加载 布尔值,初始值为 false。它在 处理 iframe 属性 算法中设置和取消设置。

一个 iframe 元素,其 当前导航是惰性加载 布尔值为 false 可能延迟加载事件

每个 iframe 元素有一个关联的 null 或 DOMHighResTimeStamp 待处理资源计时开始时间, 初始值为 null。

每个 iframe 元素 都有一个关联的 null 或 URL 待处理资源计时 URL,初始设置为 null。

如果在元素创建时, srcdoc 属性未设置,而 src 属性也未设置或已设置但其值无法被 解析,则元素的 内容可导航 将保持在 初始 about:blank Document

如果用户 导航 离开此页面, iframe内容可导航活动 WindowProxy 对象将代理新的 Window 对象用于新的 Document 对象,但 src 属性不会改变。


The name 属性(如果存在)必须是一个 有效的可导航目标名称。给定的值用于命名元素的 内容可导航 if present when that is created.


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?

The sandbox 属性在指定时,会对由 iframe托管的任何内容启用一组额外的限制。其值必须是 无序的唯一空格分隔的标记集合 ,且这些标记是 ASCII 不区分大小写。允许的值包括:

当设置了该属性时,内容会被视为来自一个唯一的 不透明源,表单、脚本以及各种可能令人烦恼的 API 会被禁用,且链接被防止指向其他 可导航对象allow-same-origin 关键字使内容被视为来自其真实源,而不是强制其成为一个 不透明源allow-top-navigation 关键字允许内容 导航可遍历的可导航对象allow-top-navigation-by-user-activation keyword behaves similarly but allows such navigation only when the browsing context's 活动窗口 具有 临时激活; the allow-top-navigation-to-custom-protocols 重新启用对非 fetch 协议 的导航,允许 交给外部软件;而 allow-formsallow-modalsallow-orientation-lockallow-pointer-lockallow-popupsallow-presentationallow-scripts、 和 allow-popups-to-escape-sandbox 关键字分别重新启用表单、模态对话框、屏幕方向锁定、指针锁 API、弹出窗口、展示 API、脚本和未沙箱化的 辅助浏览上下文 的创建。 allow-downloads 关键字允许内容执行下载。 [POINTERLOCK] [SCREENORIENTATION] [PRESENTATION]

The allow-top-navigationallow-top-navigation-by-user-activation 关键字不能同时指定,因为这样做是多余的;在这种不符合规范的标记中,只有 allow-top-navigation 会有效。

类似地,如果指定了 allow-top-navigation-to-custom-protocols 关键字,则不能指定 allow-top-navigationallow-popups 关键字,因为这样做是多余的。

要在沙箱内容中允许 alert()confirm()prompt() 函数,必须同时指定 allow-modalsallow-same-origin 关键字,并且加载的 URL 需要与 同源 ,与 顶级源相同。没有 allow-same-origin 关键字,内容总是被视为跨源的,跨源内容 无法显示简单对话框

Setting both the allow-scriptsallow-same-origin keywords together when the embedded page has the same origin as the page containing the iframe allows the embedded page to simply remove the sandbox 属性,然后重新加载自身,从而实际上完全逃出沙盒。

These flags only take effect when the content navigable of the iframe element is 导航时生效。移除它们,或 移除整个 sandbox 属性,对 已经加载的页面没有影响。

潜在敌意文件不应从与包含 iframe 元素的文件相同的服务器提供。如果攻击者能够说服用户直接访问敌意内容,而不是在 iframe中访问,那么对敌意内容进行沙盒化的帮助很有限。为了限制 敌意 HTML 内容可能造成的损害,应从单独的专用域提供它。 使用不同的域可确保这些文件中的脚本无法攻击该站点,即使用户被诱骗直接访问这些页面, 而没有 sandbox 属性的保护。

当一个 iframe 元素的 sandbox 属性在其具有非 null 的 内容可导航对象, the user agent must parse the sandboxing directive given the attribute's value and the iframe 元素的 iframe 沙盒化标志集.

当一个 iframe 元素的 sandbox 属性在其具有非 null 的 内容可导航对象时被移除,用户代理必须 清空该 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 in A has scripts disabled, and this overrides the allow-scripts keyword set on the iframe in B. Forms are also disabled, because the inner iframe (在 B 中) 没有设置 allow-forms 关键字。

现在假设 A 中的某个脚本移除了 A 和 B 中所有 sandbox 属性。 这不会立即改变任何东西。如果用户点击 C 中的链接,把页面 D 加载到 B 中的 iframe 中,那么页面 D 现在会表现得像 B 中的 iframe 设置了 allow-same-originallow-forms 关键字一样,因为这是页面 B 被加载时,A 中的 内容可导航对象 in the iframe in A when page B was loaded.

一般来说,动态移除或更改 sandbox 属性是 不明智的,因为这会使得判断什么会被允许、什么不会被允许变得相当困难。


The allow attribute, when specified, determines the iframe that will be used when the 内容可导航对象 中的 Document in the iframe's 容器 策略 。 其值必须是一个 序列化权限 策略[PERMISSIONSPOLICY]

在此示例中,使用一个 iframe 来嵌入来自在线导航 服务的地图。 allow 属性用于在嵌套上下文中启用 Geolocation API。

<iframe src="https://maps.example.com/" allow="geolocation"></iframe>

The allowfullscreen 属性是一个 布尔 属性. When specified, it indicates that Document objects in the iframe 元素的 内容可导航对象 will be initialized with a Document which allows the "fullscreen" feature to be used from any . This is enforced by the 处理权限策略 属性 算法强制执行。 [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>

Neither allowallowfullscreen 都不能向一个 iframe 元素的 内容可导航对象 中的特性授予访问权限,如果该元素的 节点 文档 本身尚未被允许使用该特性。

要确定一个 Document 对象 document 是否 被允许使用 策略控制特性 feature, 运行以下 步骤:

  1. 如果 document浏览 上下文 为 null,则返回 false。

  2. 如果 document 不是 完全活动的, 则返回 false。

  3. If the result of running is feature enabled in document for origin on featuredocumentdocument is "Enabled",则返回 true。

  4. 返回 false。

Because they only influence the permissions policy of the content navigable's active document, the allowallowfullscreen 属性只影响 content navigable ,所以它们只在 iframe is 导航时生效。添加或移除它们对 已经加载的 文档没有影响。


The iframe 元素 支持 尺寸属性 ,用于 嵌入内容具有特定尺寸的情况(例如广告单元具有明确定义的尺寸)。

An iframe 元素 永远没有 后备内容,因为无论指定的初始 内容是否成功使用,它总是会 创建一个新的子 可导航对象


The referrerpolicy 属性是一个 引用来源策略 属性. Its purpose is to set the referrer policy used when 处理 iframe 属性 时使用的 引用来源 策略 ,以及允许在 内部祖先源对象列表 创建步骤. [REFERRERPOLICY]

The loading 属性是一个 延迟 加载属性。其用途是指示用于加载视口外 iframe 元素的策略。

loading 属性的状态变为 Eager 状态时,用户 代理必须运行以下 步骤:

  1. resumptionStepsiframe 元素的 延迟加载 恢复步骤

  2. 如果 resumptionSteps 为 null,则返回。

  3. 将该 iframe延迟加载 恢复步骤 设置为 null。

  4. 调用 resumptionSteps


Descendants of iframe 元素的后代不表示任何内容。(在不支持 iframe 元素的旧版用户代理中,其内容会被解析为可作为 后备内容的标记。)

The HTML 解析器iframe 元素内的标记视为 文本。


HTMLIFrameElement/srcdoc

支持所有当前的引擎。

Firefox25+Safari6+Chrome20+
Opera?Edge79+
Edge (旧版)?Internet Explorer不支持
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The srcdoc 获取器步骤如下:

  1. attribute 为通过命名空间和本地名称 获取属性 的结果,参数为 null, srcdoc本地名称,以及 this

  2. 如果 attribute 为 null,则返回空字符串。

  3. 返回 attribute

The srcdoc 设置器步骤如下:

  1. compliantString 为调用 获取受信任的类型符合字符串 算法的结果,参数为 TrustedHTMLthis相关全局对象、给定值、“HTMLIFrameElement srcdoc” 和 “script”。

  2. 设置属性值 ,参数为 thissrcdoc本地名称compliantString

The 受支持的标记 对于 sandboxDOMTokenList 是在 sandbox 属性中定义的允许值,并且用户代理支持的值。

HTMLIFrameElement/referrerPolicy

所有当前引擎都支持。

Firefox50+Safari14+Chrome52+
Opera?Edge79+
Edge (旧版)?Internet Explorer不支持
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The referrerPolicy IDL 属性必须 反映 the referrerpolicy 内容 属性, 仅限已知值

The loading IDL 属性必须 反映 the 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+

The contentDocument 获取器的步骤是返回 内容文档

HTMLIFrameElement/contentWindow

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
Opera8+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

The contentWindow 获取器的步骤是返回 内容窗口

以下是一个使用 iframe 来包含来自广告经纪人的广告的页面示例:

<iframe src="https://ads.example.com/?customerid=923513721&amp;format=banner"
        width="468" height="60"></iframe>

4.8.6 The embed element

Element/embed

支持所有当前引擎。

Firefox1+Safari4+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLEmbedElement

支持所有当前引擎。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
分类:
流内容.
短语内容.
嵌入内容.
交互内容.
可感知内容.
此元素可用的上下文:
当需要 嵌入内容 时。
内容模型:
无内容.
在 text/html 中的标签省略:
结束标签.
内容属性:
全局属性
src — 资源的地址
type — 嵌入资源的类型
width — 水平尺寸
height — 垂直尺寸
任何其他无命名空间的属性(见正文)。
无障碍考虑:
对于作者.
对于实施者.
净化
不安全
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
};

The embed 元素为外部应用程序或交互内容提供了一个集成点。

The src 属性提供了嵌入资源的 URL 。如果存在,此属性必须包含一个 有效的非空 URL,可能会被空格包围

如果在 itemprop 属性的 embed 元素上指定了,那么必须也指定 src 属性。

The type 属性(如果存在)提供了通过插件选择实例化的 MIME 类型 。其值必须是 有效的 MIME 类型字符串。如果同时存在 type 属性和 src 属性,那么 type 属性必须指定与 显式内容类型元数据 相同的类型,由 src 属性指定的资源。

当发生以下任一情况时,为元素实例化的任何 插件 必须被移除, embed 元素 不表示 任何内容:

当同时满足以下条件时, embed 元素被称为 潜在活动 :

每当一个 embed 元素从未处于 潜在活动 状态变为 潜在活动状态,或当一个保持 潜在活动 embed element that is remaining potentially active has its src 属性被设置、修改或移除,或其 type attribute set, changed, or removed, the user agent must queue an element task on the embed 任务源 given the element to run the embed 元素设置步骤

定义 embed 元素设置步骤 对于给定的 embed 元素 element 如下:

  1. 如果另一个 任务 已排队运行 the embed element setup steps 给定 element,则返回。

  2. 如果 element 设置了 src 属性,则:

    1. url 成为 编码解析 URL 的结果,给定 elementsrc 属性的值,相对于 element节点文档

    2. 如果 url 失败,则返回。

    3. request 成为一个新的 请求 ,其 URLurl客户端element节点文档相关设置对象目的地 是 "embed", 凭证模式 是 "include", 模式 是 "navigate", 启动类型 是 "embed",并且其 使用 URL 凭证标志 设置。

    4. 获取 request,设置 处理响应 的步骤,给定 响应 response:

      1. 如果另一个 任务 已排队运行 the embed element setup steps 给定 element,则返回。

      2. 如果 response 是一个 网络错误,则 触发一个事件 名为 loadelement上,并返回。

      3. type 成为确定 内容类型 的结果,给定 elementresponse

      4. 切换 type:

        null
        1. 不显示插件element

        否则
        1. 如果 element可导航内容 为 null,则 create a new child navigable for element.

        2. 导航 element可导航内容responseURL ,使用 element节点文档,设置 响应response,并设置 历史处理 为 "replace"。

          elementsrc 属性不会更新,即使 可导航内容 进一步导航到其他位置。

        3. element 现在 表示可导航内容

      获取资源必须 延迟加载事件 of element节点文档

  3. 否则, 不显示插件element

To determine the type of the content given an embed 元素 element响应 response, run the following steps:

  1. 如果 element 设置了 type attribute, and that attribute's value is a type that a plugin supports, then return the value of the type 属性的值。

  2. If the path component of responseurl matches a pattern that a plugin 组件与插件支持的模式匹配,则返回该插件可以处理的类型。

    For example, a plugin might say that it can handle URLs with path components that end with the four character string ".swf" 结尾的 URL。

  3. 如果 response has explicit Content-Type metadata, and that value is a type that a plugin supports, then return that value.

  4. 返回 null。

上面的算法有意允许 response 具有非OK 状态。这允许服务器即使在错误响应中(例如,HTTP 500 内部服务器错误代码仍然可以包含插件数据)返回数据给插件。

To display no plugin for an embed 元素 element:

  1. 销毁一个子可导航内容 给定 element

  2. Display an indication that no plugin could be found for element, as the contents of element的内容。

  3. element 现在 表示 什么都没有。

The embed 元素没有 回退内容;其后代将被忽略。

每当一个 embed 元素 潜在活动 stops being potentially active, any plugin that had been instantiated for that element must be unloaded.

The embed 元素 可能会延迟加载事件

The embed 元素支持 尺寸属性

4.8.7 The object 元素

元素/object

所有当前引擎均支持。

Firefox1+Safari3+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLObjectElement

所有当前引擎均支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLObjectElement/data

Support in all current engines.

火狐1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer5.5+
火狐 Android?Safari iOS1+Chrome Android?WebView Android?三星浏览器 Android?Opera Android12.1+

HTMLObjectElement/type

Support in all current engines.

火狐1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer5.5+
火狐 Android?Safari iOS1+Chrome Android?WebView Android?三星浏览器 Android?Opera Android12.1+

HTMLObjectElement/name

Support in all current engines.

火狐1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer5.5+
火狐 Android?Safari iOS1+Chrome Android?WebView Android?三星浏览器 Android?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 元素实例化的内容类型,节点还支持其他接口。

The object 元素可以表示一个外部资源,具体取决于资源的类型,该资源将被视为图像或 子可导航内容

The data 属性指定资源的 URL 。它必须存在,并且必须包含 有效的非空 URL,可能被空格包围

The type 属性(如果存在)指定资源的类型。如果存在,该属性必须是 有效的 MIME 类型字符串

The name 属性(如果存在)必须是一个 有效的可导航目标名称。给定的值用于命名元素的 内容可导航(如果适用),并且如果在元素的 内容可导航 is created.

每当发生以下情况 之一时:

...用户代理必须 排队一个元素任务 on the DOM manipulation task source given the object element to run the following steps to (re)determine what the object element represents. This task being 排队 或正在运行时,必须 延迟元素的加载事件 在其 节点文档中。

  1. 如果用户表示希望显示此 object 元素的 后备内容 而不是元素的通常行为,那么跳转到下面标记为 后备的步骤。

    例如,用户可以要求显示元素的 后备内容 ,因为该内容使用用户觉得更容易访问的格式。

  2. 如果元素有一个祖先 媒体元素,或有一个祖先 object element that is not showing its 后备内容,或者元素不在其 文档中 ,其 浏览上下文 为非空,或者元素的 节点文档 is not fully active, or if the element is still in the 打开元素栈HTML 解析器XML 解析器中,或者元素未 渲染,则跳转到下面标记为 后备的步骤。

  3. 如果 data 属性存在且其值不为空字符串,则:

    1. 如果 type 属性存在且其值不是用户代理支持的类型,则用户代理可以跳过获取内容以检查其真实类型,直接跳转到下面标记为 后备 的步骤。

    2. url编码解析 URL 的结果,给定 data 属性的值,相对于元素的 节点文档

    3. 如果 url 失败,则 触发一个事件 名为 error 在元素上,然后跳转到下面标记为 后备的步骤。

    4. request 为一个新的 请求 ,其 URLurl客户端 为元素的 节点文档相关设置对象目标 为 "object", 凭证模式 为 "include", 模式 为 "navigate", 发起者类型 为 "object",并且其 使用 URL 凭证标志 被设置。

    5. 获取 request

      获取资源必须 延迟元素的加载事件 在其 节点文档 until the task that is queued by the 网络任务源 once the resource has been fetched (defined next) has been run.

    6. 如果资源尚不可用(例如,由于资源未在缓存中,因此需要通过网络请求来加载资源),则跳转到下面标记为 后备. The task that is queued by the networking task source once the resource is available must restart this algorithm from this step. Resources can load incrementally; user agents may opt to consider a resource "available" whenever enough data has been obtained to begin processing the resource.

    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 为假。

        2. 如果在 资源的 Content-Type 元数据 中指定的类型是 "text/plain",并且应用 文本或二进制资源判别规则 到资源的结果是资源不是 text/plain,则将 binary 设置为真。

        3. 如果在 资源的 Content-Type 元数据 中指定的类型是 "application/octet-stream",则将 binary 设置为真。

        4. 如果 binary 为假,则令 resource type 为在 资源的 Content-Type 元数据中指定的类型,并跳转到下面标记为 处理程序的步骤。

        5. 如果在 type 属性存在于 object 元素上,并且其值不是 application/octet-stream,则运行以下步骤:

          1. 如果属性的值是以 "image/" 开头的类型,而不是 XML MIME 类型,则令 resource type 为在 type 属性中指定的类型。

          2. 跳转到下面标记为 处理程序的步骤。

        否则,如果资源没有 关联的 Content-Type 元数据
        1. 如果在 type 属性存在于 object 元素上,则令 tentative type 为在 type 属性中指定的类型。

          否则,令 tentative type资源的计算类型

        2. 如果 tentative type is not application/octet-stream,则令 resource typetentative type 并跳转到下面标记为 处理程序的步骤。

      4. 如果应用 URL 解析器 算法到指定资源的 URL (在任何重定向之后)的结果为一个 URL 记录 ,其 路径 组件匹配 插件 支持的模式,则令 resource type 为该插件可以处理的类型。

        For example, a plugin might say that it can handle resources with path components that end with the four character string ".swf" 结尾的资源。

      此步骤可能会结束,或上面的子步骤之一直接跳到下一步,而 resource type 仍然未知。在这两种情况下,下一步将触发后备。

    9. 处理程序:根据以下第一个匹配的情况处理内容:

      如果 resource typeXML MIME 类型,或 resource type 不以 "image/" 开头

      如果 object 元素的 内容可导航 为 null,则 为元素创建一个新的子可导航内容

      response获取响应

      如果 responseURL匹配 about:blank,则使用该元素的 节点文档 将该元素的 内容可导航对象 导航至 responseURL using the element's node document, with historyHandling 设置为 “replace”。

      The data attribute of the object element doesn't get updated if the 内容可导航 进一步 导航 到其他位置。

      The object 元素 表示内容可导航

      如果 resource type 以 "image/" 开头,并且未禁用图像支持

      销毁一个子可导航内容 给定 object 元素。

      应用 图像嗅探规则 以确定图像的类型。

      The object 元素 表示 指定的图像。

      如果图像无法渲染,例如因为它格式错误或格式不受支持,跳转到下面标记为 后备的步骤。

      否则

      给定的 resource type 不受支持。跳转到下面标记为 后备的步骤。

      如果上一步结束时 resource type 仍然未知,这就是触发的情况。

    10. 元素的内容不是 object 元素表示的一部分。

    11. 如果 object 元素不表示其 内容可导航,则在资源完全加载后, 排队一个元素任务 on the DOM manipulation task source given the object element to 触发一个事件 名为 load 在元素上。

      If the element does represent its 内容可导航,则在创建的 Document is completely finished loading.

    12. 返回。

  4. 后备object 元素 表示 元素的子元素。这是元素的 后备内容销毁一个子可导航内容 给定元素。

由于上述算法, object 元素的内容充当 后备内容,仅在引用的资源无法显示时使用(例如返回 404 错误)。这允许多个 object 元素嵌套在一起,针对具有不同能力的多个用户代理,用户代理选择它支持的第一个。

The object 元素 可能延迟加载事件

The form 属性用于显式关联 object 元素与其 表单所有者

The 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+

The contentDocument getter 步骤是返回 this内容文档

HTMLObjectElement/contentWindow

所有当前引擎均支持。

Firefox22+Safari13+Chrome53+
Opera?Edge79+
Edge (旧版)17+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The contentWindow getter 步骤是返回 this内容窗口

The willValidatevalidityvalidationMessage 属性,以及 checkValidity()reportValidity()setCustomValidity() 方法,是 约束验证 API的一部分。 form IDL 属性是元素的表单 API 的一部分。

在此示例中,使用 object 元素将 HTML 页面嵌入到另一个页面中。

<figure>
 <object data="clock.html"></object>
 <figcaption>My HTML Clock</figcaption>
</figure>

4.8.8 The 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+
Categories:
Flow content.
Phrasing content.
Embedded content.
如果元素具有 controls 属性: Interactive content.
Palpable content.
Contexts in which this element can be used:
Where embedded content is expected.
Content model:
如果元素具有 src 属性:零个或多个 track elements, then transparent, but with no media element descendants.
如果元素没有 src 属性:零个或多个 source 元素,然后是零个或多个 track elements, then transparent, but with no media element descendants.
Tag omission in text/html:
标签都不可省略。
Content attributes:
全局属性
src — 资源地址
crossorigin — 处理跨域请求的方式
poster — 视频播放前显示的海报帧
preload — Hints how much buffering the media resource will likely need
autoplay — Hint that the media resource can be started automatically when the page is loaded
playsinline — 鼓励用户代理在元素的播放区域内显示视频内容
loop — Whether to loop the media resource
muted — Whether to mute the media resource by default
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;

};

A video 元素用于播放视频或电影,以及带有字幕的音频文件。

可以在 video 元素内提供内容。用户代理不应向用户显示此内容;它是为不支持 video的旧版网页浏览器准备的,以便向这些旧浏览器的用户显示文本,告知他们如何访问视频内容。

特别地,此内容并不是为了应对可访问性问题。为了使视频内容对部分视力障碍者、盲人、听力障碍者、聋人以及其他有身体或认知障碍的人可访问,有多种功能可用。可以提供嵌入视频流中的字幕或使用 track 元素作为外部文件的字幕。手语轨道可以嵌入视频流中。音频描述可以嵌入视频流中或以文本形式使用 WebVTT 文件 referenced using the track element and synthesized into speech by the user agent. WebVTT can also be used to provide chapter titles. For users who would rather not use a media element at all, transcripts or other textual alternatives can be provided by simply linking to them in the prose near the video 元素附近的文本中链接到转录本或其他文本替代品来提供这些内容。 [WEBVTT]

The video 元素是一个 媒体元素 ,其 媒体数据 显然是视频数据,可能还包括相关的音频数据。

The video 元素具有一个 内部 影子树 , 其中没有 slot 元素。

The srccrossoriginpreloadautoplayloopmuted,和 controls attributes are the attributes common to all media elements.

The poster 属性提供一个图像文件的 URL ,用户代理可以在没有视频数据时显示该图像。如果存在此属性,则必须包含一个 有效的非空 URL,可能被空格包围

如果要使用指定的资源,那么,当元素被创建时,或者当 poster 属性被设置、 更改或移除时,用户代理必须 运行以下步骤,以确定该元素的 海报帧 (无论该元素的 显示海报标志的值如何):

  1. 如果已经存在此算法的一个实例正在为此 video 元素运行,则中止此算法的该实例,且不更改 海报 帧

  2. 如果 poster 属性的值为空字符串, 或者该属性不存在:

    1. video 元素的 海报延迟加载恢复步骤 设置为 null。

    2. 不存在 海报帧;返回。

  3. url be the result of encoding-parsing a URL given the poster 属性的值, 相对于该元素的 节点 文档.

  4. 如果 url 为失败,则返回。 不存在 海报 帧

  5. request 为一个新的 请求 ,其 URLurl客户端 为该元素的 节点文档相关设置 对象目标 为“image”, 发起者类型 为“video”, 凭证模式 为“include”,且其 use-URL-credentials 标志 被设置。

  6. If the will lazy load element steps given the video return true:

    1. posterResumptionSteps 为此算法中从标记为 Fetch的步骤开始的其余部分。

    2. video 元素的 海报延迟加载恢复步骤 设置为 posterResumptionSteps

    3. 返回。

  7. 获取 request。这必须 延迟加载事件 ,延迟的是该元素的 节点文档的加载事件。

  8. 如果因此获得了图像,则 海报 帧 为该图像。否则, 不存在 海报帧

The image given by the poster 属性提供的图像,即 海报帧,旨在作为视频的代表帧(通常是第一个非空白帧),以便让用户了解视频的内容。

The playsinline 属性是一个 布尔属性。如果存在,它作为用户代理的提示,视频应该默认在文档中“内联”显示,受限于元素的播放区域,而不是全屏显示或在一个独立的可调整大小的窗口中显示。

缺少 playsinline 属性并不意味着视频将默认全屏显示。事实上,大多数用户代理已经选择默认内联播放所有视频,并且在这些用户代理中, playsinline 属性没有效果。

如果 poster 属性存在且 loading 属性处于 Lazy 状态,用户代理必须在该元素的 惰性加载恢复步骤 被调用之前,延迟加载 poster 图片源的数据。

<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

视频和 poster 图片会主动(eagerly)加载,并延迟 window 的 load 事件。

2.mp4, 5.mp4

这些视频主动加载,并延迟 window 的 load 事件。

3.mp4

该视频由于处于视口内,页面布局已知后加载,但不会延迟 window 的 load 事件。

4.mp4

该视频在处于视口且页面布局已知后加载,并立即自动播放,但不会延迟 window 的 load 事件。

6.mp4

该视频仅在滚动进入视口后加载,并且不会延迟 window 的 load 事件。

7.mp4

仅当滚动进入视口后加载,并自动播放,不会延迟 window 的 load 事件。

8.mp4

视频和 poster 图片仅在滚动进入视口后加载,并不会延迟 window 的 load 事件。

9.mp4

该视频仅在播放时才会加载。poster 图片只在滚动进入视口后加载,且不会延迟 window 的 load 事件。

10.mp4

仅当滚动进入视口后加载视频元数据(metadata),也不会延迟 window 的 load 事件。

11.mp4

该视频仅在播放时才会加载。poster 图片会主动加载,并延迟 window 的 load 事件。


A video 元素 表示下面列表中第一个匹配条件所给出的内容:

当没有视频数据可用时(该元素的 readyState 属性 为 HAVE_NOTHING,或者为 HAVE_METADATA 但尚未获得任何视频数据,或者该元素的 readyState 属性 为任何 后续值但 媒体资源 没有视频通道)
The video 元素 表示海报帧(如果有), 否则表示没有 透明黑色 且没有 自然 尺寸
video 元素 已暂停当前播放 位置 为视频的第一帧, 且该元素的 显示海报标志 被设置时
The video 元素 表示海报帧(如果有), 否则表示视频的第一帧。
video 元素 已暂停,且对应于 当前播放 位置 的视频帧不可用时(例如因为视频正在寻址或缓冲)
video 元素既不是 可能正在 播放 也不是 已暂停 时(例如在 寻址或停滞时)
The video 元素 表示 已被渲染的视频的最后一帧。
video 元素 已暂停
The video 元素 表示 对应于 当前播放 位置的视频帧。
否则( video 元素有视频通道并且 可能正在 播放
The video 元素 表示 在连续 增加的 “当前” 位置处的视频帧。当 当前播放 位置 发生变化,以致最后渲染的帧不再是视频中对应于 当前播放位置 的帧时,必须渲染新帧。

Frames of video must be obtained from the video track that was selected when the 事件循环 上一次到达 步骤 1.

视频流中的哪一帧对应于特定播放位置, 由视频流的格式定义。

The video 元素还 表示 any text track cues whose 文本轨道提示活动标志 被设置,且其 文本轨道 处于 显示 mode, and any audio from the 媒体资源中处于 当前播放 位置的任何音频。

媒体资源 关联的任何音频,如果播放,必须与 当前播放位置同步播放,并以该元素的 有效 媒体音量. The user agent must play the audio from audio tracks that were enabled when the 事件循环 last reached step 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。

The 自然宽度自然高度媒体资源 are the dimensions of the resource in CSS pixels after taking into account the resource's dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used by the resource. If an anamorphic format does not define how to apply the aspect ratio to the video data's dimensions to obtain the "correct" dimensions, then the user agent must apply the ratio by increasing one dimension and leaving the other unchanged.

The videoWidth getter 步骤为:

  1. 如果 thisreadyState 属性是 HAVE_NOTHING, 则返回 0。

  2. 返回视频的 自然宽度 ,以 CSS 像素为单位。

The videoHeight getter 步骤为:

  1. 如果 thisreadyState 属性是 HAVE_NOTHING, 则返回 0。

  2. 返回视频的 自然高度 ,以 CSS 像素为单位。

每当视频的 自然宽度自然 高度 发生变化 (包括例如因为 选中的视频 轨道 发生了变化),如果该元素的 readyState 属性不是 HAVE_NOTHING, the user agent must queue a media element task given the 媒体元素 to 触发一个事件 名为 resize 的事件,目标为该 媒体元素

The video 元素 支持 尺寸属性

在没有相反样式规则的情况下,视频内容应被渲染在元素的播放区域内, 使视频内容在播放区域中居中显示,并以能够完全适配其中的最大可能大小显示,同时 保持视频内容的宽高比。因此,如果播放区域的宽高比与 视频的宽高比不匹配,则视频将以上下加黑边或左右加黑边的方式显示。元素播放区域中 不包含视频的区域不表示任何内容。

在实现 CSS 的用户代理中,上述要求可以通过 使用 渲染章节中建议的样式规则来实现。

The natural width of a video element's playback area is the 自然宽度 ,即 海报帧的自然宽度,如果该宽度可用且该 元素当前 表示 其海报帧; 否则,它是视频资源的 自然宽度 ,如果该宽度 可用;否则 自然宽度 缺失。

The natural height of a video element's playback area is the 自然高度 ,即 海报帧的自然高度,如果该高度可用且该 元素当前 表示 其海报帧; 否则它是视频资源的 自然高度 ,如果该高度 可用;否则 自然高度 缺失。

The 默认对象大小 为 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 The 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 属性: 可感知内容
使用此元素的上下文:
Where embedded content is expected.
内容模型:
如果元素有 src 属性:零个或多个 track 元素,然后 透明,但没有 媒体元素 后代。
如果元素没有 src 属性:零个或多个 source 元素,然后零个或多个 track 元素,然后 透明,但没有 媒体元素 后代。
在 text/html 中省略标签:
标签均不可省略。
内容属性:
全局属性
src — 资源地址
crossorigin — 元素如何处理跨域请求
preload — Hints how much buffering the media resource will likely need
autoplay — Hint that the media resource can be started automatically when the page is loaded
loop — Whether to loop the media resource
muted — Whether to mute the media resource by default
controls — 显示用户代理控件
loading — 用于 决定加载延迟
可访问性考虑:
给作者
给实现者
净化
未分类
DOM 接口:
[Exposed=Window,
 LegacyFactoryFunction=Audio(optional DOMString src)]
interface HTMLAudioElement : HTMLMediaElement {
  [HTMLConstructor] constructor();
};

An audio element represents a sound or audio stream.

内容可以放在 audio 元素中。用户代理不应向用户显示这些内容;它们是为不支持 audio的旧版网页浏览器准备的,以便向这些旧版浏览器的用户显示如何访问音频内容的文本。

特别地,这些内容不是为了解决可访问性问题。为了使音频内容对聋人或有其他身体或认知障碍的人可访问,有多种功能可用。如果有字幕或手语视频,可以使用 video 元素代替 audio 元素播放音频,允许用户启用视觉替代。可以使用 track 元素和 WebVTT 文件提供章节标题以帮助导航。自然,也可以通过简单地在 audio 元素附近的正文中链接到它们来提供转录或其他文本替代。 [WEBVTT]

The audio 元素是一个 媒体元素 ,其 媒体数据 大体上是音频数据。

The audio 元素具有一个 内部 影子树 , 其中没有 slot 元素。

The srccrossoriginpreloadautoplayloopmutedcontrolsloading 属性是 所有媒体元素共有的 属性

audio elements without a controls attribute will not be displayed by the user agent, preventing them from lazy loading.

<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.mp32.mp35.mp3

这些音频文件会主动(eagerly)加载,并延迟 window 的 load 事件。

3.mp3

由于处于视口内,页面布局已知后加载,但不会延迟 window 的 load 事件。

4.mp3

该音频会在布局已知后加载,并自动播放,但不会延迟 window 的 load 事件。

6.mp3

仅当滚动进入视口后加载,不会延迟 window 的 load 事件。

7.mp3

仅在滚动进入视口后加载并自动播放,不会延迟 window 的 load 事件。

8.mp3

仅当滚动进入视口后加载元数据(metadata),不会延迟 window 的 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 element, with the src attribute set to the value passed in the argument, if applicable.

为创建 HTMLAudioElement 对象提供了一个传统的工厂函数(除了 DOM 的工厂方法如 createElement()外): Audio(src)。调用传统工厂函数时,必须执行以下步骤:

  1. document当前全局对象关联 Document

  2. audio 为调用 创建一个元素 的结果,传入 document、“audio” 以及 HTML 命名空间

  3. 设置属性值 ,为 audio 添加 "preload" 属性,值为 "auto"。

  4. 如果提供了 src ,则通过 设置属性值 ,为 audio 添加 "src" 属性,值为 src。(这将在返回之前 导致用户代理调用 该对象的 资源选择算法 。)

  5. 返回 audio

4.8.10 The 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

Support in all current engines.

火狐31+Safari6+Chrome23+
Opera12+Edge79+
Edge(旧版)12+Internet Explorer10+
火狐 Android?Safari iOS?Chrome Android?WebView Android?三星浏览器 Android?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;
};

The track element allows authors to specify explicit external timed text tracks for 媒体元素. It does not 代表 任何东西。

The kind 属性是一个 枚举属性 ,具有以下关键字和状态:

关键字 状态 简要描述
subtitles 字幕 对话的转录或翻译,适用于声音可用但听不懂的情况(例如用户不理解 媒体资源音轨的语言)。覆盖在视频上。
captions 字幕 对话、音效、相关音乐提示和其他相关音频信息的转录或翻译,适用于声音不可用或不清晰的情况(例如由于静音、被环境噪声淹没或用户是聋人)。覆盖在视频上;标记为适合听力障碍者。
descriptions 描述 媒体资源视频组件的文本描述,旨在视觉组件被遮挡、不可用或无法使用时进行音频合成(例如用户在驾驶时无需屏幕与应用程序互动,或用户是盲人)。合成为音频。
chapters 章节元数据 供脚本使用的轨道。用户代理不显示。
metadata 元数据

属性的 缺失值默认值字幕 状态, 无效值默认值元数据 状态。

The src 属性提供文本轨道数据的 URL 。值必须是 有效的非空 URL,可能被空格包围。此属性必须存在。

元素有一个相关的 轨道 URL (一个字符串),初始为空字符串。

当元素的 src 属性被设置时,执行以下步骤:

  1. trackURL 失败。

  2. value 为元素的 src 属性值。

  3. 如果 value 不是空字符串,则将 trackURL 设置为 编码、解析和序列化 URL 的结果,给定 value,相对于元素的 节点文档

  4. Set the element's 轨道 URL 设置为 trackURL ;否则设为空字符串。

如果元素的 轨道 URL 指定了 WebVTT 资源,并且元素的 kind 属性不在 章节元数据元数据 状态中,则 WebVTT 文件必须是 使用提示文本的 WebVTT 文件[WEBVTT]

The srclang 属性提供文本轨道数据的语言。值必须是有效的 BCP 47 语言标签。如果元素的 kind 属性处于 字幕 状态,则必须存在此属性。 [BCP47]

如果元素有一个 srclang 属性且其值不是空字符串,则元素的 轨道语言 为属性的值。否则,元素没有 轨道语言

The label 属性提供用户可读的轨道标题。用户代理在列出 字幕字幕音频描述 轨道时使用此标题。

如果存在 label attribute, if the attribute is present, must not be the empty string. Furthermore, there must not be two track element children of the same media element whose kind 属性处于相同状态,其 srclang 属性都缺失或有相同语言的值,并且其 label 属性都缺失或有相同值。

如果元素有一个 label 属性且其值不是空字符串,则元素的 轨道标签 为属性的值。否则,元素的 轨道标签 为空字符串。

The default 属性是一个 布尔属性,如果指定,表示如果用户的偏好不表明另一个轨道更合适,则启用该轨道。

每个 媒体元素 不能有超过一个 track 子元素,其 kind 属性处于 字幕字幕 状态,且 default 属性已指定。

每个 媒体元素 不能有超过一个 track 子元素,其 kind 属性处于 描述 状态,且 default 属性已指定。

每个 媒体元素 不能有超过一个 track 子元素,其 kind 属性处于 章节元数据 状态,且 default 属性已指定。

对于 track 元素,其 kind 属性处于 元数据 状态且 default 属性已指定的数量没有限制。

track.readyState

返回 文本轨道就绪状态,用以下列表中的数字表示:

track.NONE (0)

The 文本轨道未加载 状态。

track.LOADING (1)

The 文本轨道加载中 状态。

track.LOADED (2)

The 文本轨道已加载 状态。

track.ERROR (3)

The 文本轨道加载失败 状态。

track.track

返回 track 元素的 文本轨道

The readyState 属性必须返回对应于 文本轨道就绪状态 of the track element's text track, as defined by the following list:

NONE (数值 0)
The 文本轨道未加载 状态。
LOADING (数值 1)
The 文本轨道加载中 状态。
LOADED (数值 2)
The 文本轨道已加载 状态。
ERROR (数值 3)
The 文本轨道加载失败 状态。

The track getter 步骤是返回 this文本轨道

The 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 对象(在本规范中audiovideo)被简单地称为 媒体元素

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

Support in all current engines.

火狐3.5+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer9+
火狐 Android?Safari iOS3+Chrome Android?WebView Android37+三星浏览器 Android?Opera Android12.1+

HTMLMediaElement/autoplay

Support in all current engines.

火狐3.5+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer9+
火狐 Android?Safari iOS3+Chrome Android?WebView Android37+三星浏览器 Android?Opera Android12.1+

HTMLMediaElement/loop

Support in all current engines.

火狐11+Safari4+Chrome3+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer9+
火狐 Android?Safari iOS3+Chrome Android?WebView Android37+三星浏览器 Android?Opera Android12.1+

HTMLMediaElement/controls

Support in all current engines.

火狐3.5+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer9+
火狐 Android?Safari iOS3+Chrome Android?WebView Android37+三星浏览器 Android?Opera Android12.1+

HTMLMediaElement/defaultMuted

Support in all current engines.

火狐11+Safari6+Chrome15+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer不支持
火狐 Android?Safari iOS?Chrome Android?WebView Android?三星浏览器 Android?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 = "");
};

The 媒体元素属性srccrossoriginpreloadautoplayloopmutedcontrolsloading,适用于所有 媒体元素。这些属性在本节中定义。

The loading 属性是一种 惰性加载属性。其作用是指示对视口外媒体资源的加载策略。

loading 属性的状态被更改为 Eager 状态时,用户代理必须执行下列步骤:

  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

The loading IDL 属性必须 反映 the loading 内容属性, 仅限已知值

loading 属性处于 Lazy 状态时,其通过延迟数据获取,优先级高于 preload 属性。

如果 autoplay 属性存在且 loading 属性处于 Lazy 状态,用户代理在该元素的 惰性加载恢复步骤 被调用前,也必须延迟启动播放(以及 autoplay 可能引发的相关网络请求)。

媒体元素 用于向用户呈现音频数据,或音视频数据。在本节中,这称为 媒体数据 ,因为本节对于音频或视频的 媒体元素 均适用。 术语 媒体资源 用于指代完整媒体数据集,例如完整的视频文件或完整的音频文件。

一个 媒体资源 具有关联的 ,其为 “none”、“multiple”、 “rewritten”,或一个 。它 初始设置为 “none”。

一个 媒体资源 可包含多个音频/视频轨道。 对于 媒体元素媒体资源 is only that of the currently selected track (if any) as given by the element's videoTracks 属性指定的已选中轨道(如有); 音频数据为, 事件循环 上次到达 步骤1, and the audio data of the media resource is the result of mixing all the currently enabled tracks (if any) given by the element's audioTracks attribute when the event loop last reached step 1.

Both audiovideo 元素都可以用于音频或视频。 二者的主要区别仅在于 audio 元素没有用来显示可视内容(如视频或字幕)的播放区域,而 video 元素有。

每个 媒体元素 都有唯一的 媒体元素事件任务源

To queue a media element task with a 媒体元素 element 和一系列步骤 steps, queue an element task on the 媒体元素媒体元素事件任务源 given elementsteps

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)
The media resource indicated by the src attribute or 分配的媒体提供对象 不适用。

创建一个 MediaError,给定一个错误代码,它是上述值之一,返回一个新的 MediaError 对象,其 代码 是给定的错误代码,其 消息 是包含用户代理能够提供的关于错误情况原因的任何详细信息的字符串,如果用户代理无法提供这些详细信息,则为空字符串。此消息字符串不得仅包含通过提供的错误代码已经可用的信息;例如,它不得只是将代码翻译为字符串格式。如果没有比错误代码提供的更多的附加信息,则 消息 必须设置为空字符串。

The code 的获取步骤是返回 this代码

The message 的获取步骤是返回 this消息

4.8.11.2 媒体资源的位置

The src 内容属性在 媒体元素 上给出了要显示的媒体资源(视频、音频)的 URL 。如果存在,该属性必须包含一个 有效的非空URL,可能被空格包围

If the itemprop attribute is specified on the media element, then the src 属性。

The crossorigin 内容属性在 媒体元素 上是一个 CORS设置属性

If a media element is created with a src attribute, the user agent must 立即 调用 媒体元素资源选择算法

If a src attribute of a media element is set or changed, the user agent must invoke the 媒体元素媒体元素加载算法. (Removing the 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?

The crossOrigin IDL 属性必须 反映 the crossorigin 内容属性, 仅限于已知值

A 媒体提供对象 是一个可以表示 媒体资源的对象,与 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时,返回空字符串。

The currentSrc IDL 属性最初必须被设置为空 字符串。其值会由下文定义的 资源 选择算法 更改。

The srcObject getter 的步骤是返回 this已分配媒体提供者对象

The srcObject setter 的步骤是:

  1. this已分配媒体提供者对象 设置为 给定 值。

  2. 调用 this媒体元素加载算法

有三种方式可以指定 媒体资源srcObject IDL 属性、 src 内容属性,以及 source 元素。 IDL 属性优先级最高,其次是内容属性,再次是这些元素。

4.8.11.3 MIME 类型

A 媒体资源 可以通过其 类型来描述,特别是 MIME 类型,在某些情况下还可以带有 codecs 参数。(是否允许 codecs 参数取决于 MIME 类型。) [RFC6381]

类型通常是有些不完整的描述;例如 "video/mpeg" 除了说明容器类型外什么也没说,即使像 "video/mp4; codecs="avc1.42E01E, mp4a.40.2"" 这样的类型也不包括实际比特率的信息(只包括最大比特率)。因此,给定一种类型,用户代理通常只能知道它 可能 能够播放该类型的媒体(置信度不同),或它绝对 不能 播放该类型的媒体。

用户代理知道无法渲染的类型 是描述用户代理绝对不支持的资源的类型,例如因为它不识别容器类型,或者它不支持列出的编解码器。

The MIME 类型 "application/octet-stream"没有参数时,永远不会是 用户代理知道无法渲染的类型. User agents must treat that type as equivalent to the lack of any explicit Content-Type metadata when it is used to label a potential 媒体资源.

只有 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"。

The canPlayType(type) 方法必须返回 空字符串 ,如果 type用户代理已知无法渲染的类型 , 或者是类型 "application/octet-stream"; it must return "probably" if the user agent is confident that the type represents a 媒体资源 ,且与此 audiovideo element; and it must return "maybe"。鼓励实现者除非能确定该类型是否被支持,否则返回 "maybe" unless the type can be confidently established as being supported or not. Generally, a user agent should never return "probably" for a type that allows the codecs parameter if that parameter is not present.

此脚本测试用户代理是否支持(虚构的)新格式,以动态决定是否使用 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>

The type 属性允许用户代理避免下载无法渲染格式的资源。 source 元素的

4.8.11.4 网络状态
media.networkState

HTMLMediaElement/networkState

支持所有当前引擎。

Firefox3.5+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer9+
Firefox Android4+Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

返回元素的当前网络活动状态,以下列表中的代码之一。

媒体元素 与网络交互时,它们的当前网络活动由 networkState 属性表示。获取时,它必须返回元素的当前网络状态,该状态必须是以下值之一:

NETWORK_EMPTY (数值 0)
元素尚未初始化。所有属性都处于初始状态。
NETWORK_IDLE (数值 1)
元素的 资源选择算法 处于活动状态并已选择 资源,但此时并未实际使用网络。
NETWORK_LOADING (数值 2)
用户代理正在积极尝试下载数据。
NETWORK_NO_SOURCE (数值 3)
元素的 资源选择算法 处于活动状态,但尚未找到可用的 资源

The 资源选择算法 在下文定义,描述了 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。

The 媒体元素加载算法 包含下列步骤:

  1. 将此元素的 当前是否停顿 设为 false。

  2. 中止任何已为此元素运行的 资源选择算法 的已在运行的实例。

  3. pending tasks 为该 任务 列表中属于该 媒体元素媒体元素事件任务源 的所有任务,这些任务位于某个 任务队列中。

  4. 对于 pending tasks 中每个会 解决待定播放承诺拒绝待定播放承诺的任务,按相应任务被排入队列的顺序,立即解决或拒绝那些承诺。

  5. 从其 任务队列 中移除 pending tasks 中的每个 任务

    基本上,当媒体元素开始加载新资源时,待定的事件和回调会被丢弃,而正在进行中的将要被解决/拒绝的承诺会被立即处理。

  6. 如果该 媒体元素networkState 被设置为 NETWORK_LOADINGNETWORK_IDLE, 则 排队一个媒体元素任务 给该 媒体元素 ,用于 触发一个名为 named abort 的事件 于该 媒体元素上。

  7. 如果该 媒体元素networkState 未被设置为 NETWORK_EMPTY,则:

    1. 排队一个媒体元素任务 给该 媒体元素 ,用于 触发一个名为 named emptied 的事件 于该 媒体元素上。

    2. 如果有一个获取过程正在为该 媒体元素进行,用户代理应该停止它。

    3. 如果该 媒体元素已分配的媒体提供者对象 是一个 MediaSource 对象,则 将其从元素分离

    4. 忘记该媒体元素的媒体资源特定轨道

    5. 如果 readyState 未被设置为 HAVE_NOTHING, 则将其设为该状态。

    6. 如果 paused 属性 为 false,则:

      1. paused 属性设为 true。

      2. 取得待定播放承诺 and reject pending play promises with the result and an "AbortError" DOMException.

    7. 如果 seeking 为 true,则将其设为 false。

    8. 当前播放位置 设为 0。

      正式播放位置 设为 0。

      如果这导致 正式播放位置改变,则 排队一个媒体元素任务 给该 媒体元素 ,用于 触发一个名为 named timeupdate 的事件 于该 媒体元素上。

    9. 时间线偏移 设为 Not-a-Number (NaN)。

    10. duration 属性更新为 Not-a-Number (NaN)。

      用户代理 不会 为这一次的时长变化触发 durationchange 事件。

  8. playbackRate 属性设为 defaultPlaybackRate 属性的值。

  9. error 属性设为 null 并将 可自动播放标志 设为 true。

  10. 调用该 媒体元素资源选择算法

  11. 之前正在播放的任何该元素的 媒体资源 的播放将停止。

The 资源选择算法 用于 媒体元素 ,如下所示。此 算法始终作为 任务的一部分被调用,但该算法最开始的步骤之一 是返回,并继续 并行运行其余步骤。 此外,此算法与 事件循环 机制紧密 交互;特别是,它有 同步 区段 (作为 事件循环 算法的一部分被触发)。此类区段中的步骤以 ⌛ 标记。

  1. 将该元素的 networkState 属性设置为 NETWORK_NO_SOURCE 值。

  2. 将该元素的 显示海报 标志 设置为 true。

  3. 如果 媒体元素延迟加载 属性 处于 Eager 状态,或者 脚本 被禁用,则将 媒体 元素延迟 load 事件标志 设置为 true(这会 延迟 load 事件)。

  4. 等待稳定 状态,允许调用此算法的 任务 继续执行。 同步 区段 由此算法剩余的所有步骤组成,直到该算法说明 同步区段 已结束。( 同步区段 中的步骤以 ⌛ 标记。)

  5. ⌛ 如果 媒体元素blocked-on-parser 标志为 false, 则 填充待处理文本轨道列表

  6. ⌛ 令 mode 为 null。

  7. ⌛ 令 candidate 为 null。

  8. ⌛ 如果 媒体元素已分配媒体提供者对象 不是 null,则将 mode 设置为 object

  9. ⌛ 否则,如果 媒体 元素src 属性,则将 mode 设置为 attribute

  10. ⌛ 否则,如果 媒体 元素source 元素 子元素,则将 mode 设置为 children ,并将 candidate to the first source element child in tree order.

  11. ⌛ 否则:

    1. ⌛ 将 networkState 设置为 NETWORK_EMPTY

    2. ⌛ 将该元素的 延迟 load 事件标志 设置为 false。这会停止 延迟 load 事件

    3. 结束 同步 区段 并返回。

  12. ⌛ 将 媒体元素networkState 设置为 NETWORK_LOADING

  13. 排队一个 媒体元素任务 ,以在 媒体元素触发 名为 loadstart at the media element.

  14. 运行以下列表中相应的步骤:

    如果 modeobject
    1. ⌛ 将 currentSrc 属性设置为 空字符串。

    2. 结束 同步区段,并继续 并行执行其余步骤。

    3. Run the resource fetch algorithm with the 已分配媒体提供者对象. If that algorithm returns without aborting 算法的情况下返回,则加载失败。

    4. 因媒体提供者而失败:到达此步骤表示媒体 资源加载失败。 取得待处理的 play promise and queue a media element task given the 媒体元素 to run the 专用媒体 源失败步骤

    5. 等待上一步排队的 任务 执行完毕。

    6. 返回。该元素在此算法再次触发之前不会尝试加载另一个 资源。

    如果 modeattribute
    1. ⌛ 如果 src 属性的值为空字符串,则结束 同步区段,并跳 到下面的 因属性而失败 步骤。

    2. ⌛ 令 urlRecord以编码方式解析 URL 的结果; 给定 src attribute's value, relative to the media element's node document when the src attribute was last changed.

    3. ⌛ 如果 urlRecord 不是 failure,则将 currentSrc attribute to the result of applying the URL serializer to urlRecord.

    4. 结束 同步区段,并继续 并行执行其余步骤。

    5. 如果 urlRecord is not failure, then run the resource fetch algorithm with urlRecord. If that algorithm returns without aborting 算法的情况下返回,则 加载失败。

    6. 因属性而失败:到达此步骤表示媒体资源 加载失败,或者 urlRecord 为 failure。 取得待处理的 play promise and queue a media element task given the 媒体 元素 to run the 专用媒体源 失败步骤

    7. 等待上一步排队的 任务 执行完毕。

    8. 返回。该元素在此算法再次触发之前不会尝试加载另一个 资源。

    否则(modechildren
    1. ⌛ 令 pointer媒体元素子列表中由两个相邻节点定义的位置,将列表开头(列表中第一个 子节点之前,如有)和列表末尾(列表中最后一个子节点之后,如有)视为 自身也是节点。一个节点是 pointer之前的节点,另一个 节点是 pointer之后的节点。最初,令 pointercandidate 节点与 下一个节点之间的位置(如果有下一个节点),如果它是最后一个节点,则为列表末尾。

      当节点被 插入移除,以及 移动媒体元素中时, pointer 必须按如下方式更新:

      如果新节点被 插入移动 到定义 pointer
      pointerpointer 之前的节点与 新节点之间的点。换言之,在 pointer 处的插入会进入 pointer之后。
      如果 pointer 之前的节点被移除
      pointerpointer 之后的节点与 pointer之后的节点之前的节点之间的点。换言之, pointer 不会 相对于剩余节点移动。
      如果 pointer 之后的节点被移除
      pointerpointer 之前的节点与 pointer之前的节点之后的节点之间的点。与前一种情况一样, pointer 不会相对于剩余节点移动。

      其他更改不会影响 pointer

    2. 处理候选项:如果 candidate 没有 src 属性,或者其 src 属性的值为空字符串,则结束 同步 区段,并跳到下面的 因元素而失败 步骤。

    3. ⌛ 如果 candidate 有一个 media 属性,且其值不 匹配 环境,则结束 同步区段,并跳到下面的 因元素而失败 步骤。

    4. ⌛ 令 urlRecord以编码方式解析 URL 的结果; 给定 candidatesrc attribute's value, relative to candidate's node document when the src attribute was last changed.

    5. ⌛ 如果 urlRecord 为 failure,则结束 同步 区段,并跳到下面的 因元素而失败 步骤。

    6. ⌛ 如果 candidate 有一个 type 属性,且其值在被解析为 MIME 类型 (包括由 codecs 参数描述的任何编解码器,对于 定义了该参数的类型)时,表示 一种用户代理已知其无法 渲染的类型,则结束 同步区段,并跳到下面的 因元素而失败 步骤。

    7. ⌛ 将 currentSrc attribute to the result of applying the URL serializer to urlRecord.

    8. 结束 同步区段,并继续 并行执行其余步骤。

    9. Run the resource fetch algorithm with urlRecord. If that algorithm returns without aborting 算法的情况下返回, 则加载失败。

    10. 因元素而失败: Queue a media element task given the 媒体元素 to 触发 名为 error at candidate.

    11. 等待稳定 状态同步区段 由此算法剩余的所有步骤组成,直到该算法说明 同步 区段 已结束。( 同步区段 中的步骤以 ⌛ 标记。)

    12. 忘记 媒体元素的媒体资源特定 轨道

    13. 查找下一个候选项:令 candidate 为 null。

    14. 搜索循环:如果 pointer 之后的节点是 列表末尾,则跳到下面的 等待 步骤。

    15. ⌛ 如果 pointer 之后的节点是 source 元素, 则令 candidate 为该元素。

    16. ⌛ 推进 pointer ,使得 pointer 之前的节点现在为 原本在 pointer之后的节点,而 pointer 之后的节点为原本在 pointer之后的那个节点之后的节点(如果有)。

    17. ⌛ 如果 candidate 为 null,则跳回 搜索 循环 步骤。否则,跳回 处理候选项 步骤。

    18. 等待:将该元素的 networkState 属性设置为 NETWORK_NO_SOURCE 值。

    19. ⌛ 将该元素的 显示海报标志 设置为 true。

    20. Queue a media element task given the 媒体元素 to set the element's 延迟 load 事件标志 设置为 false。这会停止 延迟 load 事件

    21. 结束 同步区段,并继续 并行执行其余步骤。

    22. 等待直到 pointer 之后的节点为列表末尾以外的节点。 (此步骤可能会永远等待。)

    23. 等待稳定 状态同步区段 由此算法剩余的所有步骤组成,直到该算法说明 同步 区段 已结束。( 同步区段 中的步骤以 ⌛ 标记。)

    24. ⌛ 将该元素的 延迟 load 事件标志 重新 设置为 true(这会再次 延迟 load 事件 ,以防它尚未 触发)。

    25. ⌛ 将 networkState 重新设置为 NETWORK_LOADING

    26. ⌛ 跳回上面的 查找下一个候选项 步骤。

    The dedicated media source failure steps with a list of promises promises are the following steps:

    1. error attribute to the result of creating a MediaError with MEDIA_ERR_SRC_NOT_SUPPORTED.

    2. 忘记 媒体元素的媒体资源特定轨道

    3. 将该元素的 networkState 属性设置为 NETWORK_NO_SOURCE 值。

    4. 将该元素的 显示 海报标志 设置为 true。

    5. 触发 名为 error at the media element.

    6. Reject pending play promises with promises"NotSupportedError" DOMException.

    7. 将该元素的 延迟 load 事件标志 设置为 false。这会停止 延迟 load 事件

To verify a media response given a response response、一个 media resource resource,以及 "entire resource" 或一个 (number, number 或 "until end") 元组 byteRange:

  1. 如果 response 是一个 网络错误,则返回 false。

  2. 如果 byteRange 是 "entire resource",则返回 true。

  3. internalResponseresponseunsafe response

  4. 如果 internalResponsestatus 为 200,则返回 true。

  5. 如果 internalResponsestatus 不是 206,则返回 false。

  6. If the result of extracting content-range values from internalResponse is failure, then return false.

    注意,提取出的值并未被使用,特别地并没有与 byteRange进行比较。因此这一步起到对 `Content-Range` 头的语法验证作用,但如果响应上的 `Content-Range` 值与请求上的 `Range` 值不匹配,则这并不被视为失败。

  7. origin 为 "rewritten" 如果 internalResponseURL 为 null; 否则为 internalResponseURLorigin

  8. previousOriginresourceorigin

  9. 如果以下任一为真:

    • previousOrigin 为 "none";

    • originpreviousOrigin 均为 "rewritten";或

    • originpreviousOrigin 均为 origins,且 origin is same origin with previousOrigin,

    则将 resourceorigin 设为 origin

    否则,如果 responseCORS-cross-origin,则返回 false。

    否则,将 resourceorigin 设为 "multiple"。

    这确保了带有范围头的不可见响应(opaque responses)不会通过与来自不同源的其他响应拼接在一起而泄露信息。

  10. 返回 true。

The 资源获取算法 用于 媒体元素 和给定的 URL 记录媒体提供者 对象 ,如下所示:

  1. If the will lazy load element steps given the 媒体元素 return true:

    1. resumptionSteps 为此算法从标有 令 mode 为 remote的步骤 开始的其余部分。

    2. 媒体元素延迟 加载恢复步骤 设置为 resumptionSteps

    3. Start intersection-observing a lazy loading element for the 媒体 元素.

    4. 返回。

  2. moderemote

  3. 如果该算法是以 媒体提供者对象调用的,则将 mode 设置为 local

    否则:

    1. isTopLevelSelfFetch 为 false。

    2. settingsObject媒体元素节点 文档相关设置对象

    3. global媒体元素节点 文档相关全局对象

    4. 如果以下所有条件都为 true:

      则将 isTopLevelSelfFetch 设置为 true。

    5. 如果 isTopLevelSelfFetch be "top-level-self-fetch" if stringOrEnvironment is true; otherwise settingsObject

    6. object be the result of obtaining a blob object using the URL 记录blob URL 条目stringOrEnvironment.

    7. 如果 object媒体提供者对象,则将 mode 设置为 local

  4. 如果 moderemote,则令 当前媒体资源 为传递给此 算法的 URL 记录 给出的资源;否则,令 当前媒体资源媒体提供者 对象给出的资源。无论哪种情况, 当前媒体资源 现在都是该元素的 媒体 资源

  5. Remove all media-resource-specific text tracks from the 媒体 元素待处理文本轨道列表, if any.

  6. 运行以下列表中相应的步骤:

    如果 mode 为 remote
    1. 可选地,运行以下子步骤。如果用户代理打算在用户明确请求之前不尝试获取资源 (例如作为实现 preload 属性的 none 关键字的一种方式),这就是预期行为。

      1. networkState 设置为 NETWORK_IDLE

      2. Queue a media element task given the 媒体 元素 to 触发 一个事件 ,该事件名为 suspend

      3. Queue a media element task given the 媒体 元素 to set the element's 延迟 load 事件标志 设置为 false。这会停止 延迟 load 事件

      4. 等待该任务运行。

      5. 等待一个 实现定义的 事件(例如,用户请求 媒体元素开始播放)。

      6. 将该元素的 延迟 load 事件标志 重新设置为 true(这会再次 延迟 load 事件 ,以防 它尚未被触发)。

      7. networkState 设置为 NETWORK_LOADING

    2. Let destination be "audio" if the 媒体 元素audio element, or "video"。

    3. request be the result of creating a potential-CORS request given current media resourceURL 记录destination媒体 元素crossorigin content attribute.

    4. requestclient 设置为 媒体元素节点 文档相关设置 对象

    5. requestinitiator type 设置为 destination

    6. byteRange, which is "entire resource" 或一个 (number、number 或 "until end") tuple, be the byte range required to satisfy missing data in media data. This value is 实现定义的 , 并且可以依赖编解码器、网络状况或其他启发式规则。用户代理可以决定 完整获取资源,在这种情况下 byteRange 将是 "entire resource";也可以从某个字节偏移一直获取到末尾, 在这种情况下 byteRange 将是 (number,"until end");也可以获取两个字节偏移之间的范围, 在这种情况下 byteRange 将是表示这两个偏移的(number,number)元组。

    7. 如果 byteRange 不是 "entire resource":

      1. 如果 byteRange[1] 是 "until end", then add a range header to byteRange [0],向 request[0].

      2. Otherwise, add a range header to byteRange [0] 和 byteRange[1],向 request[1].

    8. 获取 request,并将 processResponse 设置为给定 响应 response的以下步骤:

      1. global媒体元素节点 文档相关全局对象

      2. updateMedia be to queue a media element task given the 媒体元素 to run the first appropriate steps from the 媒体数据处理步骤 列表 中第一个适用的步骤。(这里使用新任务, 以便下面描述的工作相对于适当的 媒体元素事件任务 源 发生,而不是使用 网络任务源。)

      3. processEndOfMedia 为以下步骤:如果获取过程 已无错误地完成,包括媒体数据解码,并且所有数据 都可供用户代理在无需网络访问的情况下使用,则用户代理必须继续执行下面的 最终步骤 。这可能永远不会发生,例如在流式传输无限 资源(如网络广播)时,或者如果资源长度超出用户代理缓存数据的能力。

      4. If the result of verifying current media resourcebyteRange and response 的结果为 false,则中止这些步骤。

      5. Otherwise, incrementally read updateMedia's body given processEndOfMedia、一个空算法和 global, an empty algorithm, and response.

      6. Update the media data with the contents of responseunsafe response obtained in this fashion. response 可以是 CORS-same-originCORS-cross-origin;这会影响 媒体数据 中引用的字幕是否暴露在 API 中,并且对于 video 元素,还会影响视频绘制到 canvas 上时该 canvas 是否被污染。

      The 媒体元素停滞超时 是一个 实现定义的 时长,应该约为 三秒。 当一个 媒体元素 正在主动尝试获取 媒体 数据 ,但在等于 媒体元素 停滞超时, the user agent must queue a media element task given the 媒体元素 to:

      1. 将该元素的 当前已停滞 设置为 true。

      2. 触发 一个事件 ,该事件名为 stalled

      用户代理可以允许用户选择性地阻止或减慢 媒体数据 下载。 当 媒体元素的 下载被完全阻止时,用户代理必须 表现得好像它已停滞(而不是表现得好像连接已关闭)。下载速率 也可以由用户代理自动限速,例如为了在共享相同带宽的其他连接之间平衡下载。

      用户代理可以随时决定不再下载更多内容, 例如在为一小时的媒体资源缓冲五分钟后,在等待用户 决定是否播放该资源时,在交互式资源中等待用户输入时,或者当用户离开页面时。当 媒体 元素's download has been suspended, the user agent must queue a media element task given the 媒体元素 to set the networkState 设置为 NETWORK_IDLE 并在该元素上 触发一个 事件 ,该事件名为 suspend at the element. If and when downloading of the resource resumes, the user agent must queue a media element task given the 媒体元素 to set the networkState 设置为 NETWORK_LOADING。 在这些任务排队之间,加载处于暂停状态(因此如上所述, progress 事件 不会触发)。

      The preload 属性提供了一个提示, 表明作者认为即使在没有 autoplay 属性的情况下,建议缓冲多少内容。

      When a user agent decides to completely suspend a download, e.g., if it is waiting until the user starts playback before downloading any further content, the user agent must queue a media element task given the 媒体元素 to set the element's 延迟 load 事件标志 设置为 false。这会停止 延迟 load 事件

      虽然上述步骤给出了发出请求的算法,但用户代理可以使用 不限于这些确切步骤的其他方式,尤其是在面对错误条件时。 例如,用户代理可以重新连接到服务器或切换到流式传输协议。只有当用户代理已经放弃尝试获取该资源时, 用户代理才必须认为该资源出错,并进入上述步骤的错误分支。

      为了确定 媒体资源的格式,用户代理必须使用 专门嗅探音频和视频的规则

      在加载未被暂停时(见下文),每 350ms(±200ms)或每接收一个字节, 以 较不 frequent, queue a media element task given the 媒体元素 to:

      1. 将该元素的 当前已停滞 设置为 false。

      2. 触发 一个事件 ,该事件名为 progress

      只要用户代理可能仍然需要网络访问来获取 媒体 资源的部分内容,用户代理就必须停留在此步骤。

      例如,如果用户代理已经丢弃了视频的前半部分, 那么即使 播放已经 结束,用户代理仍会停留在此步骤,因为始终存在用户可能回退定位到开头的可能性。 事实上,在这种情况下,一旦 播放已经结束,用户代理 最终会触发一个 suspend 事件,如前文所述。

    否则(modelocal

    The resource described by the current media resource所描述的资源(如果有)包含 媒体数据。它是 CORS-same-origin

    如果 current media resource 是原始数据流(例如来自 File 对象),则为了确定 媒体资源的格式, 用户代理必须使用 专门嗅探 音频和视频的规则。否则,如果数据流是预解码的,则 格式为相关规范给出的格式。

    每当 current media resource becomes available, queue a media element task given the 媒体元素 to run the first appropriate steps from the 媒体数据处理步骤列表 中第一个适用的步骤。

    current media resource 被永久耗尽时(例如 一个 Blob 的所有字节都已被处理),如果没有解码错误,则用户 代理必须继续执行下面的 最终步骤 。这可能永远不会发生,例如如果 current media resource 是一个 MediaStream

    The 媒体数据处理步骤列表 如下:

    如果由于网络错误,导致 用户代理放弃尝试获取资源,而完全无法获取 媒体数据 cannot be fetched at all, due to network errors, causing the user agent to give up trying to fetch the resource
    如果 媒体数据 可以获取, 但经检查发现其格式不受支持,或者以其他方式完全无法被渲染

    DNS 错误、HTTP 4xx 和 5xx 错误(以及其他协议中的等价错误),以及在用户代理确定 current media resource 是否可用之前发生的其他致命网络错误,连同文件使用不受支持的 容器格式,或者所有数据都使用不受支持的编解码器,必须导致用户代理 执行以下步骤:

    1. 用户代理应取消获取过程。

    2. 中止此子算法,返回到 资源选择算法

    如果发现 媒体资源 具有音频 轨道
    1. 创建一个 AudioTrack 对象来 表示该音频轨道。

    2. Update the 媒体 元素audioTracks 属性的 AudioTrackList object with the new AudioTrack object.

    3. enableunknown

    4. 如果 媒体 资源 or the URL of the current media resource indicate a particular set of audio tracks to enable, or if the user agent has information that would facilitate the selection of specific audio tracks to improve the user's experience: if this audio track is one of the ones to enable, then set enable 设置为 true,否则,将 enable 设置为 false

      这可能由 媒体片段语法触发,但也可能 例如由用户代理选择 5.1 环绕声音频轨道而不是立体声音频轨道触发。

    5. 如果 enable 仍为 unknown,则如果 媒体 元素 尚未具有 已启用 的音频轨道,则将 enable 设置为 true,否则,将 enable 设置为 false

    6. 如果 enabletrue,则启用此音频轨道, 否则,不启用此音频轨道。

    7. 触发一个 事件 ,该事件名为 addtrack at this AudioTrackList object, using TrackEvent, 并将 track 属性初始化为新的 AudioTrack 对象。

    如果发现 媒体资源 具有视频 轨道
    1. 创建一个 VideoTrack 对象来表示该视频轨道。

    2. Update the 媒体 元素videoTracks 属性的 VideoTrackList object with the new VideoTrack object.

    3. enableunknown

    4. 如果 媒体 资源 or the URL of the current media resource indicate a particular set of video tracks to enable, or if the user agent has information that would facilitate the selection of specific video tracks to improve the user's experience: if this video track is the first such video track, then set enable 设置为 true,否则,将 enable 设置为 false

      这同样可能由 媒体片段语法触发。

    5. 如果 enable 仍为 unknown,则如果 媒体 元素 尚未具有 已选中 的视频轨道,则将 enable 设置为 true,否则,将 enable 设置为 false

    6. 如果 enabletrue,则选中此轨道并取消选中任何 先前选中的视频轨道;否则,不选中此视频轨道。如果其他轨道 被取消选中,则 会触发一个 change 事件

    7. 触发一个 事件 ,该事件名为 addtrack at this VideoTrackList object, using TrackEvent, 并将 track 属性初始化为新的 VideoTrack 对象。

    一旦已经获取足够的 媒体数据 ,以确定 媒体资源的持续时间、尺寸和其他 元数据

    这表明该资源可用。用户代理必须遵循以下子步骤:

    1. 媒体数据 ,为 当前播放 位置最早可能位置建立 媒体 时间线

    2. 时间线 偏移 更新为与上一步建立的 媒体 时间线 中零 时间对应的日期和时间,如果有的话。如果 媒体资源没有给出 显式时间和日期,则 时间线 偏移 必须设置为 Not-a-Number(NaN)。

    3. 当前播放位置正式播放 位置 设置为 最早可能位置

    4. Update the duration attribute with the time of the last frame of the resource, if known, on the media timeline established above. If it is not known (e.g. a stream that is in principle infinite), update the duration 属性更新为正 Infinity 值。

      此时,用户代理 queue a media element task given the 媒体元素 to 触发一个 事件 ,该事件名为 durationchange

    5. 对于 video 元素,设置 videoWidthvideoHeight attributes, and 排队一个媒体 元素任务 ,以在该 媒体元素触发一个 事件 ,该事件名为 resize at the media element.

      如果尺寸随后发生变化,还会触发后续的 resize 事件。

    6. readyState 属性设置为 HAVE_METADATA

      作为将 loadedmetadata 属性设置为新值的一部分, 会触发 一个 readyState DOM 事件。

    7. jumped 为 false。

    8. 如果 媒体元素默认播放开始位置 大于零,则 定位 到该时间,并令 jumped 为 true。

    9. 媒体元素默认播放 开始位置 设置为零。

    10. 初始播放位置 为 0。

    11. 如果 媒体 资源 or the URL of the current media resource indicate a particular start time, then set the 初始播放位置 设置为该时间,并且如果 jumped 仍为 false,则 定位 到该时间。

      例如,对于支持 媒体片段 语法的媒体格式,可以使用 片段 来 指示开始位置。

    12. 如果没有 已启用 的音频轨道,则 启用一个音频轨道。这 会导致触发一个 change 事件

    13. 如果没有 已选中 的视频轨道, 则选中一个视频轨道。这 会导致触发一个 change 事件

    一旦 readyState 属性达到 HAVE_CURRENT_DATAloadeddata 事件被触发后,将该 元素的 延迟 load 事件标志 设置为 false。这会停止 延迟 load 事件

    试图在仍然获取每个 媒体 资源 元数据的同时减少网络使用量的用户代理,也会在此时停止缓冲, 遵循 前面描述的规则,其中涉及 networkState 属性切换到 NETWORK_IDLE 值,并触发 suspend 事件。

    用户代理 被要求 确定 媒体资源 的持续时间,并在播放前 经过此步骤。

    一旦整个 媒体 资源 已被获取(但可能在其任何部分 被解码之前)

    触发一个 事件 ,该事件名为 progress at the media element.

    networkState 设置为 NETWORK_IDLE and 触发一个 事件 ,该事件名为 suspend at the media element.

    如果用户代理曾丢弃任何 媒体数据 and then needs to resume the network activity to obtain it again, then it must queue a media element task given the 媒体元素 to set the networkState 设置为 NETWORK_LOADING

    如果用户代理能够使 媒体资源 保持已加载,则 该算法会继续到下面的 最终步骤 ,该步骤会中止算法。

    如果连接在接收到一些 媒体数据 后中断, 导致用户代理放弃尝试获取资源

    在用户代理已经确定 current media resource 是否可用之后(即一旦 媒体元素readyState 属性不再是 HAVE_NOTHING),发生的致命网络错误 必须导致用户代理执行 以下步骤:

    1. 用户代理应取消获取过程。

    2. error attribute to the result of creating a MediaError with MEDIA_ERR_NETWORK.

    3. 将该元素的 networkState 属性 设置为 NETWORK_IDLE 值。

    4. 将该元素的 延迟 load 事件标志 设置为 false。这会停止 延迟 load 事件

    5. 触发一个 事件 ,该事件名为 error at the media element.

    6. 中止整个 资源选择 算法

    如果 媒体 数据 损坏

    Fatal errors in decoding the media data that occur after the user agent has established whether the current media resource 是否可用之后(即一旦 媒体元素readyState 属性不再是 HAVE_NOTHING) must cause the user agent to execute the following steps:

    1. 用户代理应取消获取过程。

    2. error attribute to the result of creating a MediaError with MEDIA_ERR_DECODE.

    3. 将该元素的 networkState 属性 设置为 NETWORK_IDLE 值。

    4. 将该元素的 延迟 load 事件标志 设置为 false。这会停止 延迟 load 事件

    5. 触发一个 事件 ,该事件名为 error at the media element.

    6. 中止整个 资源选择 算法

    如果 媒体数据 获取过程 被用户中止

    获取过程被用户中止,例如因为用户 按下了“停止”按钮,用户代理必须执行以下步骤。如果 load() 方法本身 在这些步骤运行时被调用,则不遵循这些步骤,因为上面的步骤会处理那种特定的中止。

    1. 用户代理应取消获取过程。

    2. error attribute to the result of creating a MediaError with MEDIA_ERR_ABORTED.

    3. 触发一个 事件 ,该事件名为 abort at the media element.

    4. 如果 媒体元素readyState 属性的值等于 HAVE_NOTHING, 则将 该元素的 networkState 属性设置为 NETWORK_EMPTY 值,将该元素的 显示海报标志 设置为 true,并在该元素上 触发一个 事件 ,该事件名为 emptied

      否则,将该元素的 networkState 属性设置为 NETWORK_IDLE 值。

    5. 将该元素的 延迟 load 事件标志 设置为 false。这会停止 延迟 load 事件

    6. 中止整个 资源选择 算法

    如果 媒体数据 可以获取,但具有非致命 错误或部分使用不受支持的编解码器,从而阻止用户代理 完全正确地渲染内容,但并不阻止整体播放

    服务器返回部分可用但无法以最佳方式渲染的数据时,必须 导致用户代理只渲染其能够处理的部分,并忽略其余部分。

    如果发现 媒体资源 声明了一个用户代理支持的 媒体资源特定文本 轨道 that the user agent supports

    如果 媒体数据CORS-same-origin,则使用相关数据运行 暴露媒体资源特定文本轨道的步骤

    跨源视频不会暴露其字幕,因为那会允许 攻击,例如恶意站点读取用户 内网上机密视频的字幕。

  7. 最终步骤:如果用户代理曾到达此步骤(只有在整个资源 被加载并保持可用时才可能发生):中止整个 资源选择算法

媒体元素忘记媒体元素的 媒体资源特定 轨道时,用户代理必须从 媒体元素文本 轨道列表 中移除所有 媒体资源特定 文本轨道,然后清空 媒体 元素audioTracks 属性的 AudioTrackList 对象, 然后清空 媒体元素videoTracks 属性的 VideoTrackList 对象。 作为此过程的一部分,不会触发任何事件(特别是不会触发 removetrack 事件);由调用此算法的那些算法触发的 erroremptied 事件可以代替使用。


The preload 属性是 枚举属性 ,具有以下关键字及状态:

关键字 状态 简要描述
auto 自动 提示用户代理可在不影响服务器的前提下优先考虑用户需求,可以乐观地下载整个资源。
none 提示用户代理,作者不期望用户需要该媒体资源,或服务器希望最小化不必要的流量。 该状态不会提示一旦开始缓冲时该如何积极地实际下载媒体资源(比如用户点击“播放”以后)。
metadata 元数据 提示用户代理作者不期望用户需要完整媒体资源,但获取资源元数据(尺寸、轨道列表、时长等),甚至前几帧是合理的。 如果用户代理严格只获取元数据,则 媒体元素readyState 属性会被设为 HAVE_METADATA; 但通常会加载一些帧,因此更可能是 HAVE_CURRENT_DATAHAVE_FUTURE_DATA。 当资源播放时,该提示表示应将带宽视为稀缺(如建议节流下载,保证最低速率但不影响持续播放)。

该属性的 空值默认自动 状态。

该属性的 缺省值无效值默认 都是 实现自定义, 但推荐 元数据 状态, 各取所需以减少服务器压力同时兼顾用户体验。

即便 媒体资源 正在被缓冲或播放,该属性仍可更改; 上表描述应据此解释。

作者可能会在用户开始播放后,将该属性从 "none" 或 "metadata" 动态切换为 "auto" dynamically once the user begins playback. For example, on a page with many videos this might be used to indicate that the many videos are not to be downloaded unless requested, but that once one is requested it is to be downloaded aggressively.

The preload 属性 旨在给用户代理一个提示,说明作者认为怎样的体验最优。该属性可被完全忽略(比如基于用户明示偏好或网络条件)。

The preload IDL 属性必须 反映 同名内容属性, 仅限已知值

The autoplay 属性 可覆盖 preload attribute (since if the media plays, it naturally has to buffer first, regardless of the hint given by the preload attribute). Including both is not an error, however.

audiovideo 元素中, 如果 脚本可用loading 属性 可以延迟 preload 属性 暗示的行为,直到该元素的 惰性加载恢复步骤 被运行。


media.buffered

HTMLMediaElement/buffered

所有主流引擎均支持。

Firefox4+Safari3.1+Chrome3+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+

返回一个 TimeRanges 对象, 表示用户代理已经缓冲的 媒体资源 的各个区间。

The buffered getter 步骤是返回一个新的 经规范化的 TimeRanges 对象 ,该对象表示 this媒体资源中(如有)用户代理已缓冲的范围。 用户 代理必须准确确定可用的范围,即使对于只能通过繁琐检查才能确定这些范围的媒体流也是如此。

通常,这只是从零点开始的连续区间,但若用户代理在 seek 时用 HTTP Range 请求,也可能出现多个区间。

用户代理可以丢弃先前缓冲的数据。

因此,某一时刻由 buffered 属性返回的对象包含的时间区间, 可能在稍后该属性返回的区间中消失。

每次都返回新对象不适合属性 getter,这里只是由于改变代价太高才保留此规则,不建议新接口效仿。

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+

返回 媒体资源, in seconds, assuming that the start of the media resource is at time zero.

如果持续时间不可用,则返回 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+

返回 官方播放位置,以秒为单位。

可以设置,以跳到指定时间。

A 媒体资源 有一个 媒体时间线 ,将时间(以秒为单位)映射到 媒体资源中的位置。时间线的起点是其最早定义的位置。时间线的持续时间是其最后定义的位置。

建立媒体时间线:如果 媒体资源 以某种方式指定了起点不是负数的显式时间线(即为每帧指定了特定的时间偏移,并为第一帧指定了零或正偏移),则 媒体时间线 应为该时间线。(是否可以指定时间线取决于 媒体资源 can specify a timeline or not depends on the media resource's format.) If the 媒体资源 specifies an explicit start time and date, then that time and date should be considered the zero point in the 媒体时间线的零点; 时间线偏移量 将是时间和日期,通过 getStartDate() 方法暴露。

如果 媒体资源 具有不连续的时间轴,用户代理必须在整个资源范围内扩展资源开始时使用的时间轴,以使 媒体时间轴 of the media resource increases linearly starting from the 最早可能的位置 (如下所定义)线性增加,即使底层 媒体数据 具有无序甚至重叠的时间码。

例如,如果将两个片段连接到一个视频文件中,但视频格式暴露了两个片段的原始时间,则视频数据可能暴露一个时间线,例如 00:15..00:29 然后是 00:05..00:38。然而,用户代理不会暴露这些时间;相反,它会 将时间暴露为 00:15..00:29 和 00:29..01:02,作为一个单一视频。

(这是一个跟踪向量。) 在极少数情况下,如果 媒体资源 没有显式时间线, 媒体时间线 的零时间应对应于 媒体资源的第一帧。在更罕见的情况下,如果 媒体资源 没有任何显式时间信息,甚至没有帧持续时间,用户代理必须以 实现定义 的方式自行确定每帧的时间。

没有显式时间线但有显式帧持续时间的文件格式的示例是动画 GIF 格式。没有任何显式时间的文件格式的示例是 JPEG 推送格式(multipart/x-mixed-replace 与 JPEG 帧,通常用作 MJPEG 流的格式)。

如果在没有时间信息的资源情况下,用户代理仍然能够跳到服务器最初提供的第一帧之前的较早位置,则零时间应对应于 媒体资源的最早可寻位置;否则,它应对应于从服务器收到的第一帧(用户代理开始接收流的 媒体资源 中的位置)。

在撰写本文时,没有已知的格式缺少显式帧时间偏移但仍支持跳到服务器发送的第一帧之前的帧。

考虑一个电视广播的流,它在十月的一个阳光明媚的星期五下午开始流,并且始终向连接的用户代理发送相同媒体时间线上的媒体数据,其零时间设置为该流的开始时间。几个月后,连接到该流的用户代理会发现他们收到的第一帧时间有数百万秒。 getStartDate() 方法将始终返回广播开始的日期;这将允许控制器在其进度条上显示实际时间(例如“下午 2:30”)而不是相对于广播开始的时间(“8 个月 4 小时 12 分钟 23 秒”)。

考虑一个包含多个连接片段的视频流,由不允许用户代理请求特定时间但只按预定顺序流式传输视频数据的服务器广播,始终将第一个传送的帧标识为时间零的帧。如果用户代理连接到此流并收到覆盖时间戳 2010-03-20 23:15:00 UTC 至 2010-03-21 00:05:00 UTC 和 2010-02-12 14:25:00 UTC 至 2010-02-12 14:35:00 UTC 的片段,它会以从 0 秒开始并延伸到 3600 秒(一小时)的 媒体时间线 暴露这些时间。假设流媒体服务器在第二个片段结束时断开连接,则 duration 属性会返回 3600。 getStartDate() 方法会返回一个 Date object with a time corresponding to 2010-03-20 23:15:00 UTC. However, if a different user agent connected five minutes later, it would (presumably) receive fragments covering timestamps 2010-03-20 23:20:00 UTC to 2010-03-21 00:05:00 UTC and 2010-02-12 14:25:00 UTC to 2010-02-12 14:35:00 UTC, and would expose this with a 媒体时间线 暴露这些时间。在这种情况下, getStartDate() 方法会返回一个 Date 对象,时间对应于 2010-03-20 23:20:00 UTC。

在这两个示例中, seekable 属性将给出控制器希望在其 UI 中实际显示的范围;通常,如果服务器不支持跳到任意时间,这将是从用户代理连接到流的时刻到用户代理已获取的最新帧的时间范围;然而,如果用户代理开始丢弃早期信息,实际范围可能会更短。

In any case, the user agent must ensure that the earliest possible position (as defined below) using the established 媒体时间线, is greater than or equal to zero.

The 媒体时间线 还有一个关联的时钟。使用哪个时钟由用户代理定义,可能依赖于 媒体资源,但它应近似用户的挂钟。

媒体元素 有一个 当前播放位置,其初始值(即在没有 媒体数据的情况下)必须为零秒。 当前播放位置媒体时间线上的时间。

媒体元素 也有一个 官方播放位置,它最初必须设置为零秒。 官方播放位置当前播放位置 的一个近似值,在脚本运行时保持稳定。

媒体元素 还有一个 默认播放起始位置,其初始值必须设置为零秒。此时间用于在媒体加载之前允许元素进行搜索。

每个 媒体元素 都有一个 显示海报标志。创建 媒体元素 时,必须将此标志设置为 true。此标志用于控制何时为 video 元素显示海报帧,而不是显示视频内容。

The currentTime 属性必须,在获取时,返回 媒体元素默认播放起始位置,除非该值为零,在这种情况下它必须返回元素的 官方播放位置。返回值必须以秒为单位表示。在设置时,如果 媒体元素readyStateHAVE_NOTHING,则必须将 媒体元素默认播放起始位置 设置为新值;否则,它必须将 官方播放位置 设置为新值,然后 搜索 到新值。新值必须以秒为单位解释。

如果 媒体资源 是流媒体资源,则用户代理可能无法在缓冲区过期后获取资源的某些部分。同样,某些 媒体资源 可能有一个不从零开始的 媒体时间线最早可能的位置 是用户代理可以再次获得的流或资源中的最早位置。这也是 媒体时间线上的一个时间。

The earliest possible position is not explicitly exposed in the API; it corresponds to the start time of the first range in the seekable 属性的 TimeRanges 对象中第一个范围的开始时间(如果有的话),否则对应于 当前播放位置

最早可能的位置 变化时,如果 当前播放位置 早于 最早可能的位置,用户代理必须 搜索最早可能的位置;否则,如果用户代理在过去 15 到 250 毫秒内没有在元素上触发 timeupdate 事件,并且还没有在运行该事件的事件处理程序,则用户代理必须 排队媒体元素任务 ,将该 媒体元素 给定以 触发一个名为 named timeupdate 的事件。

由于上述要求和 资源获取算法 中在 获取媒体元数据时启动的要求, 当前播放位置 不能小于 最早可能的位置

如果用户代理在任何时候得知音轨或视频轨道已经结束,并且所有 媒体数据 都对应于 媒体时间线 that are before the 最早可能位置的部分,则用户代理可以 排队一个媒体元素任务 ,将该 媒体元素 给定以运行这些步骤:

  1. audioTracks 属性的 AudioTrackList 对象或 videoTracks 属性的 VideoTrackList 对象中移除该轨道(根据需要)。

  2. 触发一个名为 named removetrack at the 媒体元素AudioTrackListVideoTrackList object, using TrackEvent, with the track 属性为代表轨道的 AudioTrackVideoTrack 对象。

The duration 属性必须返回 媒体资源媒体时间线上的结束时间,以秒为单位。如果没有可用的 媒体数据 ,则属性必须返回 NaN 值。如果 媒体资源 不被认为是有界的(例如流媒体广播或没有宣布结束时间的直播活动),则属性必须返回正无穷值。

The user agent must determine the duration of the media resource before playing any part of the 媒体数据 之前,并且在将 readyState 设置为大于或等于 HAVE_METADATA, even if doing so requires fetching multiple parts of the resource.

媒体资源 的长度变为已知值(例如从未知变为已知,或从先前确定的长度变为新长度)时,用户代理必须 排队一个媒体元素任务 ,将该 媒体元素 给定以 触发一个名为 named durationchange at the media element. (The event is not fired when the duration is reset as part of loading a new media resource.) If the duration is changed such that the 当前播放位置 大于 媒体资源的结束时间,则用户代理还必须 搜索媒体资源的结束时间。

如果“无限”流出于某种原因结束,则持续时间将从正无穷大变为流中最后一帧或样本的时间,并触发 durationchange 事件。同样,如果用户代理最初估计 媒体资源的持续时间而不是精确定义它,并根据新信息稍后修正估计,则持续时间会发生变化并触发 durationchange 事件。

某些视频文件还有一个与 媒体时间线的零时间相对应的显式日期和时间,称为 时间线偏移。初始时, 时间线偏移 必须设置为 NaN。

The getStartDate() 方法必须返回 一个新的 Date 对象 ,表示当前的 时间线偏移


The 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)

有可用的关于 当前播放位置 is available, but either not enough data is available that the user agent could successfully advance the current playback position in the direction of playback at all without immediately reverting to the HAVE_METADATA state, or there is no more data to obtain in the 播放方向上没有更多的数据可获取。例如,在视频中,这对应于用户代理拥有当前帧的数据,但没有下一帧的数据,当 当前播放位置 在当前帧的末尾时;以及当 播放已结束时。

HAVE_FUTURE_DATA (数值 3)

有可用的关于 当前播放位置 is available, as well as enough data for the user agent to advance the current playback position in the direction of playback at least a little without immediately reverting to the HAVE_METADATA state, and 文本轨道已准备好。例如,在视频中,这对应于用户代理在 当前播放位置 位于两帧之间的瞬间时,拥有至少当前帧和下一帧的数据,或者当 当前播放位置 在帧中间时,拥有当前帧的视频数据和至少能继续播放一点的音频数据。如果 播放已结束,用户代理不能处于此状态,因为在这种情况下 当前播放位置 永远不能前进。

HAVE_ENOUGH_DATA (数值 4)

满足 HAVE_FUTURE_DATA 状态描述的所有条件,并且满足以下条件之一:

实际上, HAVE_METADATAHAVE_CURRENT_DATA 之间的区别是微不足道的。真正唯一相关的区别是在将 video 元素绘制到 canvas上时,它区分了会绘制某些内容的情况(HAVE_CURRENT_DATA 或更高)与不会绘制任何内容的情况(HAVE_METADATA 或更低)。同样, HAVE_CURRENT_DATA (仅当前帧)和 HAVE_FUTURE_DATA (至少当前帧和下一帧)之间的区别可能是微不足道的(在极端情况下,仅一个帧)。这种区别真正重要的唯一时间是页面提供“逐帧”导航接口时。

媒体元素networkState 不为 NETWORK_EMPTY 时,其就绪状态发生变化时,用户代理必须按照以下步骤操作:

  1. 从以下列表中应用第一个适用的子步骤集:

    如果之前的就绪状态是 HAVE_NOTHING,而新就绪状态是 HAVE_METADATA

    排队一个媒体元素任务 ,将该 媒体元素 给定以 触发一个名为 named loadedmetadata 的事件。

    在此任务运行之前,作为 事件循环 机制的一部分,渲染将已更新以调整 video 元素的大小(如果适用)。

    如果之前的就绪状态是 HAVE_METADATA ,而新就绪状态是 HAVE_CURRENT_DATA 或更高

    If this is the first time this occurs for this media element since the load() algorithm was last invoked, the user agent must 排队一个媒体元素任务 ,给定 媒体元素触发一个名为 named loadeddata 的事件在该元素上。

    如果新就绪状态是 HAVE_FUTURE_DATAHAVE_ENOUGH_DATA,则必须运行以下相关步骤。

    如果之前的就绪状态是 HAVE_FUTURE_DATA 或更高,而新就绪状态是 HAVE_CURRENT_DATA 或更低

    如果 媒体元素 was potentially playing before its readyState 属性降至 HAVE_FUTURE_DATA, and the element has not 结束播放,且播放未 因错误停止因用户互动暂停因带内内容暂停,用户代理必须 排队一个媒体元素任务 ,将该 媒体元素 给定以 触发一个名为 named timeupdate 的事件,并 排队一个媒体元素任务 ,将该 媒体元素 给定以 触发一个名为 named waiting 的事件。

    如果之前的就绪状态是 HAVE_CURRENT_DATA 或更低,而新就绪状态是 HAVE_FUTURE_DATA

    用户代理必须 排队一个媒体元素任务 ,将该 媒体元素 给定以 触发一个名为 named canplay 的事件。

    如果元素的 paused 属性为 false,用户代理必须 通知关于播放

    如果新就绪状态是 HAVE_ENOUGH_DATA

    如果之前的就绪状态是 HAVE_CURRENT_DATA 或更低,用户代理必须 排队一个媒体元素任务 ,将该 媒体元素 给定以 触发一个名为 named canplay 的事件,并且,如果元素的 paused 属性为 false, 通知关于播放

    用户代理必须 排队一个媒体元素任务 ,将该 媒体元素 给定以 触发一个名为 named canplaythrough 的事件。

    如果元素不 符合自动播放条件,则用户代理必须中止这些子步骤。

    用户代理可以运行以下子步骤:

    1. paused 属性设置为 false。
    2. 如果元素的 显示海报标志 为 true,将其设置为 false 并运行 时间前进 步骤。
    3. 排队一个媒体元素任务 ,将该元素给定以 触发一个名为 named play 的事件。
    4. 通知关于播放

    或者,如果元素是 video 元素,用户代理可以开始观察元素是否 与视口相交。当元素开始 与视口相交时,如果元素仍然 符合自动播放条件,运行上述子步骤。可选地,当元素停止 与视口相交时,如果 可自动播放标志 仍然为真并且 autoplay 属性仍然指定,运行以下子步骤:

    1. 运行 内部暂停步骤 并将 可自动播放标志 设置为真。
    2. 排队一个媒体元素任务 ,将该元素给定以 触发一个名为 named pause 的事件。

    随着元素开始或停止 与视口相交,播放和暂停的子步骤可以多次运行,只要 可自动播放标志 为真。

    用户代理不需要支持自动播放,建议用户代理尊重用户对该问题的偏好。建议作者使用 autoplay 属性而不是使用脚本强制视频播放,以便允许用户在需要时覆盖行为。

媒体元素的就绪状态可能会不连续地在这些状态之间跳跃。例如,媒体元素的状态可以直接从 HAVE_METADATA 跳到 HAVE_ENOUGH_DATA ,而不经过 HAVE_CURRENT_DATAHAVE_FUTURE_DATA 状态。

The readyState IDL 属性在获取时必须返回上述描述的值,表示 媒体元素的当前就绪状态。

The 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+

Returns the default rate of playback, for when the user is not fast-forwarding or reversing through the media resource.

可以设置此属性来更改默认的播放速率。

默认速率对播放没有直接影响,但如果用户切换到快进模式,当他们返回到正常播放模式时,预计播放速率将恢复为默认播放速率。

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,必要时加载 媒体资源

The paused 属性表示 媒体元素 是否处于暂停状态。该属性初始值必须为 true。

如果 媒体元素 is a blocked media element if its readyState 属性处于 HAVE_NOTHING 状态、 HAVE_METADATA 状态,或 HAVE_CURRENT_DATA 状态,或者如果该元素已被 用户交互暂停因带内内容暂停.

媒体元素 is said to be potentially playing when its paused 属性为 false,且元素没有 结束播放、播放没有 因错误停止,且元素不是 被阻塞的媒体元素.

如果 waiting DOM 事件 可能会触发 ,当一个 可能正在播放 的元素因其 readyState 属性的值变为低于 HAVE_FUTURE_DATA时。

当以下所有条件都满足时, 媒体元素 被认为是 符合自动播放条件

如果用户代理和系统允许在当前上下文中播放媒体,则 媒体元素 被认为是 允许播放

例如,用户代理可能只在 媒体元素Window 对象具有 临时激活时允许播放,但可以做出例外,允许在 静音时播放。

当以下条件满足时, 媒体元素 被认为是 播放结束

The ended 属性必须返回 true,如果在上一次 事件循环 到达 第 1 步时, 媒体元素播放结束 ,且 播放方向 为向前,否则返回 false。

媒体元素因错误而停止 ,是指该元素的 readyState 属性值为 HAVE_METADATA or greater, and the user agent encounters a non-fatal error during the processing of the 媒体数据, and due to that error, is not able to play the content at the 当前播放位置播放内容。

媒体元素因用户交互而暂停 ,是指其 paused 属性为 false, readyState 属性为 HAVE_FUTURE_DATAHAVE_ENOUGH_DATA, 并且用户代理到达了 媒体资源 的某个点,用户需要做出选择以继续资源的播放。

一个 媒体元素 可能同时处于 播放结束因用户交互而暂停 状态。

当一个 媒体元素 处于 可能正在播放 , 并因 因用户交互而暂停, the user agent must queue a media element task given the 媒体元素 to 触发一个名为 named timeupdate 的事件。

媒体元素 is said to have 因带内内容而暂停 ,是指其 paused 属性为 false, readyState 属性为 HAVE_FUTURE_DATAHAVE_ENOUGH_DATA, 并且用户代理暂停了 媒体资源 的播放, 以便播放与 媒体资源 时间锚定且长度非零的内容, 或播放与 媒体资源 某段时间锚定但长度大于该段的内容。

一个 媒体元素 被认为是 因带内内容暂停 的一个例子是当用户代理正在播放来自外部 WebVTT 文件的 音频描述 时,而为某个提示生成的合成语音的时间长于 文本轨道提示开始时间文本轨道提示结束时间之间的时间。


当前播放位置 达到 媒体资源 的末尾时,且 播放方向 为前向,用户代理必须遵循以下步骤:

  1. 如果 媒体元素 指定了 loop 属性,则 跳转最早可能的位置 of the media resource and return.

  2. 如上所述, ended IDL 属性将在 事件循环 返回到 步骤 1时开始返回 true。

  3. 排队一个媒体元素任务 ,给定 媒体元素 和以下步骤:

    1. 触发一个事件 ,名为 timeupdate ,在 媒体元素上。

    2. 如果 媒体元素 已经 播放结束,且 播放方向 为前向,并且 paused 为 false,则:

      1. paused 属性设置为 true。

      2. 触发一个事件 ,名为 pause ,在 媒体元素上。

      3. 获取挂起的播放承诺拒绝挂起的播放承诺 ,结果和 AbortError DOMException

    3. 触发一个事件 ,名为 ended ,在 媒体元素上。

当前播放位置 达到 最早可能的位置媒体资源 时,如果 播放方向 为后向,则用户代理仅需 排队一个媒体元素任务 ,给定 媒体元素 ,以 触发一个事件 ,事件名为 timeupdate

这里的“达到”并不意味着 当前播放位置 必须在正常播放过程中发生变化;它也可以通过 跳转进行变化。


The defaultPlaybackRate 属性给出 媒体资源 播放的期望速度,作为其固有速度的倍数。该属性是可变的:在获取时必须返回最后设置的值,如果尚未设置则返回 1.0;在设置时,属性必须设置为新值。

The defaultPlaybackRate is used by the user agent when it exposes a user interface to the user.

The playbackRate 属性给出有效的播放速率,即 媒体资源 播放的速度,作为其固有速度的倍数。如果它不等于 defaultPlaybackRate,则意味着用户正在使用诸如快进或慢动作播放等功能。该属性是可变的:在获取时必须返回最后设置的值,如果尚未设置则返回 1.0;在设置时,用户代理必须遵循以下步骤:

  1. 如果给定值不被用户代理支持,则抛出 NotSupportedError DOMException

  2. playbackRate 设置为新值,如果元素处于 可能正在播放状态,则更改播放速度。

defaultPlaybackRateplaybackRate 属性值发生变化(无论是由脚本设置还是由用户代理直接更改,例如响应用户控制时),用户代理必须 排队一个媒体元素任务 ,给定 媒体元素 ,以 触发一个事件 ,事件名为 ratechange ,在 媒体元素上。用户代理必须平滑地处理属性更改,不能引入任何可感知的间隙或静音。

The preservesPitch 的获取步骤是,如果在播放期间应用了保持音高的算法,则返回 true。设置步骤是相应地开启或关闭保持音高的算法,而不引入任何可感知的间隙或静音。默认情况下,必须启用这种保持音高的算法(即,获取器将初始返回 true)。


The played getter 步骤是返回一个新的 经规范化的 TimeRanges 对象 that represents the ranges of points on the media timeline of this当前播放 位置 通常的单调递增所到达的, thiscurrent playback position 上的点的范围(如有)。

每次返回一个新对象是一种不良的属性获取器模式,仅在这里被保留,因为改变它会很麻烦。这不应被复制到新的 API 中。


每个 媒体元素 都有一个 待处理播放承诺的列表,该列表最初必须是空的。

获取待处理播放承诺 对于一个 媒体元素,用户代理必须执行以下步骤:

  1. promises 成为一个空的承诺列表。

  2. 媒体元素待处理播放承诺的列表 复制到 promises

  3. 清空 媒体元素待处理播放承诺的列表

  4. 返回 promises

解决待处理播放承诺 对于一个 媒体元素 和一个承诺列表 promises,用户代理必须用未定义值解决 promises 中的每个承诺。

拒绝待处理播放承诺 对于一个 媒体元素 和一个承诺列表 promises 及一个异常名称 error,用户代理必须用 error 拒绝 promises中的每个承诺。

通知播放状态 对于一个 媒体元素,用户代理必须执行以下步骤:

  1. 获取待处理播放承诺 并将结果赋值给 promises

  2. 排队一个媒体元素任务 给定该元素和以下步骤:

    1. 触发一个事件 名为 playing 在该元素上。

    2. 解决待处理播放承诺 使用 promises

When the play() method on a media element is invoked, the user agent must run the following steps:

  1. 如果 媒体元素 不被 允许播放,则返回 一个被拒绝的承诺 ,拒绝原因是 "NotAllowedError" DOMException

  2. 如果 媒体元素error 属性不为 null 并且其 codeMEDIA_ERR_SRC_NOT_SUPPORTED,则返回 一个被拒绝的承诺 ,拒绝原因是 "NotSupportedError" DOMException

    这意味着 专用媒体源失败步骤 已经执行。播放在 媒体元素加载算法 清除 error 属性之前是不可能的。

  3. resumptionSteps 为该 媒体元素惰性加载恢复步骤

  4. 如果 resumptionSteps 不为 null,则:

    1. 将该 媒体元素惰性加载恢复步骤 设为 null。

    2. 调用 resumptionSteps

  5. promise 为一个新的 Promise,并将 promise 添加到 待定播放 Promise 列表

  6. Run the internal play steps for the 媒体元素.

  7. 返回 promise

The internal play steps for a media element are as follows:

  1. 如果该 media elementnetworkState 属性的值为 NETWORK_EMPTY, 则调用该 media element资源选择算法

  2. 如果 播放已结束播放方向 is forwards, seek 到其 最早可能位置 of the media resource.

    这将 导致 the user agent to queue a media element task given the media element to 触发一个名为 named timeupdate 的事件 于该 media element上。

  3. 如果该 media elementpaused 属性为 true,则:

    1. paused 的值改为 false。

    2. 如果 show poster flag 为 true,则将该元素的 show poster flag 设为 false 并运行 time marches on 步骤。

    3. 排队一个媒体元素任务 给该 media element ,以便 触发一个名为 named play 的事件 于该元素上。

    4. 如果该 media elementreadyState 属性的值为 HAVE_NOTHINGHAVE_METADATA, 或 HAVE_CURRENT_DATA, 则 排队一个媒体元素任务 给该 media element ,以便 触发一个名为 named waiting 的事件 于该元素上。

      否则,该 media elementreadyState 属性的值为 HAVE_FUTURE_DATAHAVE_ENOUGH_DATA: 则对该元素执行 notify about playing 操作。

  4. 否则,如果该 media elementreadyState 属性的值为 HAVE_FUTURE_DATAHAVE_ENOUGH_DATA, 则 取得待定播放承诺排队一个媒体元素任务 给该 media element解决待定播放承诺 并返回结果。

    媒体元素已经在播放。然而,有可能在排队任务运行之前, promise 会被 拒绝

  5. 将该 media elementcan autoplay flag 设为 false。


pause() 方法被调用,或当用户代理被要求暂停该 media element时, 用户代理必须运行下列步骤:

  1. 如果该 media elementnetworkState 属性的值为 NETWORK_EMPTY, 则调用该 media element资源选择算法

  2. Run the internal pause steps for the media element.

The internal pause steps for a media element are as follows:

  1. 将该 media elementcan autoplay flag 设为 false。

  2. 如果该 media elementpaused 属性为 false,则运行下列步骤:

    1. paused 的值改为 true。

    2. 取得待定播放承诺 并令 promises 为结果。

    3. 排队一个媒体元素任务 给该 media element ,并执行下列步骤:

      1. 触发一个名为 named timeupdate 的事件 于该元素上。

      2. 触发一个名为 named pause 的事件 于该元素上。

      3. with promises 和一个 "AbortError" DOMException拒绝 待定播放承诺。

    4. official playback position 设为当前的 current playback position


如果该元素的 playbackRate 为正或零,则 播放方向 为前向。否则为后向。

当一个 media element 处于 potentially playing 且其 Document 为一个 fully active Document时,其 current playback position 必须以该元素的 playbackRate units of media time per unit time of the media timeline's clock. (This specification always refers to this as an increase, but that increase could actually be a decrease if the element's playbackRate 为负,则该“增加”实际上可以是减少。)

该元素的 playbackRate 可以为 0.0,此时 current playback position 不会移动,尽管播放并未被暂停(paused 不会变为 true,且 pause 事件也不会触发)。

本规范不定义用户代理如何实现相应的播放速率——视协议和可用媒体而定,用户代理可能与服务器协商以使服务器以相应速率提供媒体数据,这样(除速率变化与服务器更新流速率之间的时间差外)客户端实际上不需要丢弃或插值任何帧。

每当用户代理 提供稳定状态时, 必须将 official playback position 设为 current playback position

如果元素的 playbackRate 不是 1.0,且 preservesPitch 为 true,则用户代理必须应用音高 调整,以保持音频的原始音高。否则,用户代理必须在不进行任何音高调整的情况下加速 或减慢音频。

当一个 media element 处于 potentially playing状态时,其播放的音频数据必须与 current playback position同步,音量为该元素的 effective media volume. The user agent must play the audio from audio tracks that were enabled when the event loop last reached step 1时已被启用的音轨的音频。

当一个 media element 不处于 potentially playing状态时,该元素不得播放音频。

媒体元素可能正在播放 时, 如果不 在文档中 ,则不得播放任何视频,但应当播放任何音频组件。 媒体元素不能仅因所有对它的引用都被移除就停止播放; 只有当媒体元素处于无法再播放任何音频的状态时,该元素才能被垃圾回收。

即便某个元素没有显式引用存在,它也可能播放音频,即使该元素不再处于积极播放状态:例如,它可以是未被暂停但因等待缓冲而停滞,或仍在缓冲,但有一个 suspend 事件监听器会在接收到事件时开始播放。即便某个媒体元素的 media resource 没有音频轨道,如果它有一个事件监听器能更改 media resource,则该元素将来仍可能再次播放音频。


每个 media element 都有一个 新引入 Cue 列表,该列表最初应为空。每当某个处于该 text track cue is added to the list of cues 中的 文本轨道cue 列表 中新增了一个 text track cue,该 cue 必须被添加到该 media element新引入 Cue 列表中。每当一个 文本轨道 is added to the list of text tracks for a media elementcues in that text track时,该文本轨道的所有 cue 列表 must be added to the media element新引入 Cue 列表中。当某个 media element新引入 Cue 列表 在该 media elementshow poster flag 未设置时新增了新的 cues,则用户代理必须运行 time marches on 步骤。

当某个 text track cue 从属于某个处于该 文本轨道列表文本轨道list of text tracks for a media element中被移除时,或每当某个 文本轨道 is removed from the list of text tracks of a media element, if the media elementshow poster flag 未设置,则用户代理必须运行 time marches on 步骤。

当某个 current playback position (例如由于播放或 seek 导致) 在某个 media element 上发生变化时,用户代理必须运行 time marches on 步骤。为支持依赖 cue 事件触发时间精度的用例(例如在视频中将字幕与镜头切换同步),用户代理应尽可能接近媒体时间线的位置触发 cue 事件,理想情况下在 20 毫秒内。如果在步骤运行期间 current playback position 发生变化,则用户代理必须等待这些步骤完成,然后立即重新运行这些步骤。因此这些步骤会尽可能或按需频繁运行。

如果一次迭代耗时较长,可能会导致短时长的 cues 被跳过,因为用户代理匆忙“赶上进度”,因此这些 cues 将不会出现在 activeCues 列表中。

The time marches on 步骤如下:

  1. current cues 为一列 cues,初始化为包含该 media element 的所有处于 hiddenshowing text tracks of the media element (not the disabled 的那些)中,且其 开始时间 小于或等于 current playback position 且其 结束时间 大于 current playback position.

  2. other cues 为一列 cues,初始化为包含该 media element 中所有处于 hiddenshowing text tracks of the media element that are not present in current cues.

  3. last time be the current playback position at the time this algorithm was last run for this media element, if this is not the first time it has run.

  4. 如果自上次运行此算法以来, current playback position 只是通过正常播放期间的单调增加变化,则令 missed cues be the list of cues in other cues 中那些其 开始时间 大于或等于 last time 且其 结束时间 小于或等于当前的 current playback position. Otherwise, let missed cues 为空列表。

  5. Remove all the cues in missed cues that are also in the media element新引入 Cue 列表, and then empty the element's 新引入 Cue 列表

  6. 如果该时间是通过正常播放期间 current playback position 的单调增加到达的,且用户代理在过去 15 到 250ms 内尚未在该元素上触发 timeupdate event at the element in the past 15 to 250ms and is not still running event handlers for such an event, then the user agent must queue a media element task given the media element to 触发一个名为 named timeupdate 的事件 于该元素上。(在其他情形,如显式 seek,相关事件作为更改 current playback position的整体过程的一部分被触发。)

    因此该事件触发频率不得快于约 66Hz 或慢于 4Hz(假设事件处理程序运行时间不超过 250ms)。鼓励用户代理基于系统负载和每次处理该事件的平均开销来调整事件频率,以免 UI 更新比用户代理在解码视频时能舒适处理的更频繁。

  7. If all of the cues in current cues 中的所有 cuestext track cue active flag 都已设置,且 other cues have their text track cue active flag 被设置,且 missed cues 为空,则返回。

  8. 如果该时间是通过正常播放期间 current playback position during normal playback, and there are cues in other cues that have their text track cue pause-on-exit flag 被设置,且这些 cues 要么其 text track cue active flag 被设置,要么也存在于 missed cues中,则应 立即 暂停media element

    在其他情况下(如显式 seek),即使越过了某个 cue的结束时间,也不会因该 cuetext track cue pause-on-exit flag 被设置而暂停播放。

  9. events 为一个起初为空的 任务列表。该列表中的每个 任务 将与一个 text track、一条 text track cue以及一个时间相关联, 在将这些 任务 排队之前會用来对列表进行排序。

    affected tracks 为一个起初为空的 text tracks列表。

    When the steps below say to prepare an event named event for a text track cue target 且时间为 time, the user agent must run these steps:

    1. track be the text track with which the text track cue target is associated.

    2. 创建一个 任务 ,用于 触发一个名为 named event 的事件 于 target

    3. 将新创建的该 任务 添加到 events中,并与时间 timetext track track以及该 text track cue target相关联。

    4. track 添加到 affected tracks中。

  10. For each text track cue in missed cues, 准备一个 名为 enter 的事件,针对该 TextTrackCue 对象,时间为该 text track cue start time

  11. For each text track cue in other cues that either has its text track cue active flag 被设置或该 cue 在 missed cues中,则 准备一个 名为 exit 的事件,针对该 TextTrackCue 对象,时间为该 cue 的 text track cue end time 与其 text track cue start time中的较晚者。

  12. For each text track cue in current cues 中每个尚未设置其 text track cue active flag set, 准备一个 名为 enter 的事件,针对该 TextTrackCue 对象,时间为其 text track cue start time

  13. Sort the tasks in events in ascending time order (任务 在前)。

    对于时间相同的 任务 in events that have the same time by the relative text track cue order of the text track cues 的相对 text track cue order进行排序。

    Finally, sort tasks in events that have the same time and same text track cue order任务 ,将触发 enter events before those that fire exit 事件的任务之前。

  14. 任务 (按列表顺序),为该 media element for each 排队一个媒体元素任务 in events, in list order.

  15. affected tracks 按这些 text tracks 在该 media element文本轨道列表中的出现顺序进行排序,并去重。

  16. For each text track in affected tracks中的每个 text track (按列表顺序),为该 media element to fire an event named cuechange at the TextTrack object, and, if the text track 有相应的 track element, to then fire an event named cuechange at the track 元素上触发同名事件。

  17. Set the text track cue active flag of all the cues in the current cues中所有 cuestext track cue active flag ,并取消设置 other cues.

  18. Run the rules for updating the text track rendering of each of the text tracks in affected tracks 中所有处于 showing, providing the text tracktext track language 作为回退语言(如果它非空)。例如,对于基于 WebVTT 的 text tracks ,应用 更新 WebVTT 文本轨道显示的规则[WEBVTT]

就上述算法而言,只有当 文本轨道提示 is considered to be part of a text track only if it is listed in the 文本轨道提示列表, not merely if it is associated with the 文本轨道有关联时并不是其组成部分。

如果该 media elementnode document 不再是一个 fully active 文档,则播放将 停止 ,直到该文档再次处于活动状态为止。

当某个 media elementDocument时,用户代理必须运行下列步骤:

  1. 等待稳定状态, allowing the task that removed the media element from the Document to continue. The 同步段 包含本算法剩余的所有步骤。( 同步段 中的步骤以 ⌛ 标记。)

  2. ⌛ 如果该 media element处于文档中,则返回。

  3. ⌛ Run the internal pause steps for the media element.

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 属性。)

如果媒体资源尚未加载,则不执行任何操作。

The seeking 属性初始值必须为 false。

The fastSeek(time) 方法必须 seek to the time given by time, with the approximate-for-speed 标志。

当用户代理需要 寻找到 媒体资源中的特定 new playback position in the media resource, optionally with the approximate-for-speed 标志,这意味着用户代理必须执行以下步骤。该算法与 事件循环 机制紧密交互;特别是,它具有 一个 同步部分 (作为 事件循环 算法的一部分触发)。该部分的步骤用 ⌛ 标记。

  1. 媒体元素显示海报标志 设置为false。

  2. 如果 媒体元素readyStateHAVE_NOTHING,则返回。

  3. 如果元素的 seeking IDL属性为true,则表示此算法的另一个实例正在运行。终止该算法的另一个实例,而无需等待其运行的步骤完成。

  4. seeking IDL属性设置为true。

  5. 如果搜索是响应DOM方法调用或设置IDL属性,则继续脚本。其余步骤必须 并行运行。除了标有⌛的步骤外,这些步骤随时可能被另一个实例调用而中止。

  6. 如果 new playback position 晚于 媒体资源的末尾,则将其设为 媒体资源 的末尾。

  7. 如果 new playback position 小于 最早可能的位置,则将其设为该位置。

  8. 如果(可能现在已更改的) new playback position 不在 seekable 属性提供的范围之一内,则将其设为 seekable 属性提供的最接近 new playback position的范围中的位置。如果两个位置都满足该约束(即 new playback position 正好位于 seekable 属性中的两个范围之间),则使用最接近 当前播放位置的位置。如果 seekable 属性中没有给定范围,则将 seeking IDL属性设置为false并返回。

  9. 如果设置了 approximate-for-speed 标志,则调整 new playback position 以允许快速恢复播放。如果此步骤之前的 new playback position当前播放位置之前,则调整后的 new playback position 也必须在 当前播放位置之前。同样,如果此步骤之前的 new playback position当前播放位置之后,则调整后的 new playback position 也必须在 当前播放位置之后。

    例如,用户代理可以捕捉到附近的关键帧,以便在恢复播放之前不必花时间解码然后丢弃中间帧。

  10. 排队一个媒体元素任务 ,给定 媒体元素触发一个事件 ,名为 seeking 在该元素上。

  11. 当前播放位置 设置为 new playback position

    如果 媒体元素 在开始搜索之前是 潜在播放 状态,但搜索导致其 readyState 属性变为低于 HAVE_FUTURE_DATA的值,则将在该元素上触发一个 waiting 事件 at the element.

    此步骤设置 当前播放位置,因此可以立即触发其他条件,例如播放何时达到媒体资源的末尾的规则(处理循环的一部分逻辑),即使在用户代理实际上能够渲染该位置的媒体数据之前(如下一步所确定)。

    The currentTime 属性返回 官方播放位置,而不是 当前播放位置,因此在脚本执行之前独立于此算法进行更新。

  12. Wait until the user agent has established whether or not the media data for the new playback position is available, and, if it is, until it has decoded enough data to play back that position.

  13. 等待一个稳定状态同步部分 包括此算法的所有剩余步骤。( 同步部分 中的步骤标有⌛。)

  14. ⌛ 将 seeking IDL属性设置为false。

  15. ⌛ 运行 时间向前推进 步骤。

  16. 排队一个媒体元素任务 ,给定 媒体元素触发一个事件 ,名为 timeupdate 在该元素上。

  17. 排队一个媒体元素任务 ,给定 媒体元素触发一个事件 ,名为 seeked 在该元素上。


The seekable getter 步骤是返回一个新的 经规范化的 TimeRanges 对象 ,该对象表示 this媒体资源中(如有)用户代理能够 seek 到的范围。

如果用户代理可以在 媒体资源中的任意位置进行寻找到,例如,因为这是一个简单的电影文件且用户代理和服务器支持 HTTP Range 请求,那么属性将返回一个具有一个范围的对象,该范围的开始是第一个帧的时间( 最早可能的位置,通常为零),结束时间是第一个帧的时间加上 duration 属性的值(这将等于最后一个帧的时间,可能为正无穷)。

该范围可能会不断变化,例如,如果用户代理在无限流上缓存滑动窗口。这在 DVR 观看直播电视时会看到。

每次返回一个新对象是属性获取器的一个糟糕模式,只在此处被铭记,因为改变它的成本很高。这不应被复制到新的 API 中。

用户代理应采取非常宽松和乐观的寻找到视图。用户代理还应在可能的情况下缓冲最近的内容,以使寻找到过程更快。

例如,考虑一个在没有 HTTP Range 请求支持的 HTTP 服务器上提供的大型视频文件。一个浏览器 可以 实现为只缓冲当前帧和获取后续帧的数据,从不允许寻找到,除了通过重启播放来寻找到开始。但是,这将是一个不好的实现。高质量的实现将缓冲最近几分钟的内容(或更多,如果有足够的存储空间),允许用户快速跳回并重新观看令人惊讶的内容而没有任何延迟,并且如果必要的话,还会允许通过从头开始重新加载文件来进行任意寻找到,这会更慢但仍然比仅仅重启视频并全部观看一遍来获取早期未缓冲的点更方便。

媒体资源 可能是内部脚本化的或交互式的。因此,一个 媒体元素 可能以非线性的方式播放。如果发生这种情况,用户代理必须在 寻找到 算法被使用时表现得好像当前播放位置 变化 是不连续的(以便相关事件被触发)。

4.8.11.10 具有多个媒体轨道的媒体资源

一个 媒体资源 可以包含多个嵌入的音频和视频轨道。例如,除了主要的视频和音频轨道外,一个 媒体资源 还可以包含外语配音、导演评论、音频描述、备用角度或手语覆盖层。

media.audioTracks

HTMLMediaElement/audioTracks

所有当前引擎均支持。

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (旧版)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回一个 AudioTrackList 对象,表示在 媒体资源中可用的音频轨道。

media.videoTracks

HTMLMediaElement/videoTracks

所有当前引擎均支持。

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (旧版)NoInternet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回一个 VideoTrackList 对象,表示在 媒体资源中可用的视频轨道。

The audioTracks attribute of a media element must return a live AudioTrackList 对象,表示在 媒体元素媒体资源中可用的音频轨道。

The videoTracks attribute of a media element must return a live VideoTrackList 对象,表示在 媒体元素媒体资源中可用的视频轨道。

There are only ever one AudioTrackList 对象和一个 VideoTrackList object per media element, even if another 媒体资源 被加载到元素中:这些对象会被重用。(不过, AudioTrackVideoTrack 对象则不会。)

4.8.11.10.1 AudioTrackListVideoTrackList 对象

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 表格

The AudioTrackListVideoTrackList 接口由前面章节中定义的属性使用。

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]

返回指定的 AudioTrackVideoTrack 对象。

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?

返回具有给定标识符的 AudioTrackVideoTrack 对象,如果没有具有该标识符的轨道,则返回 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。如果格式支持 片段 if the format supports media fragment syntax, and that can be used with the getTrackById() 方法一起使用,则这是可使用的 ID。

audioTrack.kind

AudioTrack/kind

支持所有当前引擎。

Firefox🔰 33+Safari8+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (旧版)不支持Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
videoTrack.kind

VideoTrack/kind

支持所有当前引擎。

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (旧版)不支持Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回给定轨道所属的类别。下面给出了 可能的轨道类别

audioTrack.label

AudioTrack/label

支持所有当前引擎。

Firefox🔰 33+Safari8+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (旧版)不支持Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
videoTrack.label

VideoTrack/label

支持所有当前引擎。

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (旧版)不支持Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回给定轨道的标签(如果已知),否则返回空字符串。

audioTrack.language

AudioTrack/language

支持所有当前引擎。

Firefox🔰 33+Safari8+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (旧版)不支持Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
videoTrack.language

VideoTrack/language

支持所有当前引擎。

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (旧版)不支持Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回给定轨道的语言(如果已知),否则返回空字符串。

audioTrack.enabled [ = value ]

AudioTrack/enabled

支持所有当前引擎。

Firefox🔰 33+Safari8+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (旧版)不支持Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

如果给定轨道处于活动状态,则返回 true,否则返回 false。

可以设置,以更改轨道是否已启用。如果同时启用多个音轨,则它们会混合。

media.videoTracks.selectedIndex

VideoTrackList/selectedIndex

支持所有当前引擎。

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (旧版)不支持Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回当前选定轨道的索引(如果有),否则返回 −1。

videoTrack.selected [ = value ]

VideoTrack/selected

支持所有当前引擎。

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (旧版)不支持Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

如果给定轨道处于活动状态,则返回 true,否则返回 false。

可以设置,以更改轨道是否已选择。可以选择零个或一个视频轨道;在选择新轨道时,取消选择先前的轨道。

一个 AudioTrackList 对象表示一个动态列表,包含零个或多个音轨,其中零个或多个可以同时启用。每个音轨由一个 AudioTrack 对象表示。

一个 VideoTrackList 对象表示一个动态列表,包含零个或多个视频轨道,其中每次只能选择零个或一个。每个视频轨道由一个 VideoTrack 对象表示。

Tracks in AudioTrackListVideoTrackList 对象中的轨道必须保持一致的顺序。如果 媒体资源 的格式定义了顺序,则必须使用该顺序;否则,顺序必须是轨道在 媒体资源中声明的相对顺序。使用的顺序称为列表的 自然顺序

因此,这些对象中的每个轨道都有一个索引;第一个索引为 0,每个后续轨道的编号比前一个高一。 如果 媒体资源 动态添加或删除音轨或视频轨道,则轨道的索引将动态更改。如果 媒体资源 完全更改,则所有先前的轨道将被删除并替换为新轨道。

The AudioTrackList lengthVideoTrackList length 属性的获取器必须返回其对象在获取时表示的轨道数量。

The 支持的属性索引 of AudioTrackListVideoTrackList 对象在任何时刻的支持的属性索引是从零到各自对象表示的轨道数量减一的数字(如果表示任何轨道)。如果一个 AudioTrackListVideoTrackList 对象不表示任何轨道,则它没有 支持的属性索引

To determine the value of an indexed property for a given index indexAudioTrackListVideoTrackList 对象 list, the user agent must return the AudioTrackVideoTrack object that represents the indexth track in list.

The AudioTrackList getTrackById(id)VideoTrackList getTrackById(id) methods must return the first AudioTrack or VideoTrack object (respectively) in the AudioTrackListVideoTrackList object (respectively) whose identifier is equal to the value of the id 参数的值(如上定义的列表的自然顺序)。当没有轨道与给定参数匹配时,方法必须返回 null。

The AudioTrackVideoTrack 对象表示 媒体资源的特定轨道。每个轨道可以有一个标识符、类别、标签和语言。 这些轨道的各个方面在轨道的生命周期内是永久的;即使从 媒体资源AudioTrackListVideoTrackList 对象中移除这些轨道,这些方面也不会改变。

此外, AudioTrack 对象可以启用或禁用;这是音轨的 启用状态。创建 AudioTrack 时,其 启用状态 必须设置为 false(禁用)。 资源获取算法 可以覆盖此设置。

类似地,每个 VideoTrack 对象的 VideoTrackList 对象 中可以选择一个,这就是视频轨道的 选择状态。创建 VideoTrack 时,其 选择状态 必须设置为 false(未选择)。 资源获取算法 可以覆盖此设置。

The AudioTrack idVideoTrack id 属性 必须返回轨道的标识符(如果有),否则返回空字符串。如果 媒体资源 的格式支持 媒体片段语法,则返回的特定轨道的标识符必须与使用该标识符作为该轨道在轨道维度中的名称时相同,从而启用该轨道 片段[INBAND]

例如,在 Ogg 文件中,这将是轨道的 Name 头字段。 [OGGSKELETONHEADERS]

The AudioTrack kindVideoTrack kind 属性 必须返回轨道的类别(如果有),否则返回空字符串。

轨道的类别是下表第一列中根据第二列和第三列中的定义最适合该轨道的字符串,如由 媒体资源中的元数据确定。表中某一行第三列中的单元格说明了该行第一列中给定类别适用的对象;某个类别仅在适用于音轨时才适用于音轨,仅在适用于视频轨道时才适用于视频轨道。类别必须仅返回 AudioTrack 对象,如果它们适用于音频,并且必须仅返回 VideoTrack 对象,如果它们适用于视频。

对于 Ogg 文件,轨道的 Role 头字段提供了相关元数据。对于 DASH 媒体资源, Role 元素传达了信息。对于 WebM,目前只有 FlagDefault 元素映射到一个值。 从媒体容器到 HTML 的带内媒体资源轨道的来源 有更多细节。 [OGGSKELETONHEADERS] [DASH] [WEBMCG] [INBAND]

Return values for AudioTrackkindVideoTrackkind
类别 定义 适用于... 示例
"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" 角色(忽略其他角色)。
""(空字符串) 没有明确的类别,或轨道元数据中给出的类别未被用户代理识别。 音频和视频。

The AudioTrack labelVideoTrack label 属性必须返回轨道的标签(如果有),否则返回空字符串。 [INBAND]

The AudioTrack languageVideoTrack language 属性必须 返回轨道的 BCP 47 语言标签(如果有),否则返回空字符串。如果用户代理无法将该语言表示为 BCP 47 语言标签(例如,因为 媒体资源格式中的语言信息是没有定义解释的自由格式字符串),那么该方法必须返回空字符串,就像轨道没有语言一样。 [INBAND]

The AudioTrack enabled 属性,在获取时,必须返回 true 如果轨道当前已启用,否则返回 false。在设置时,如果新值为 true,则必须启用轨道,否则禁用轨道。(如果轨道不再在一个 AudioTrackList 对象中,则轨道的启用或 禁用除了更改 AudioTrack 对象上的属性值外没有其他效果。)

每当 AudioTrackList 中已禁用的音轨被启用,以及启用的音轨被禁用时,用户代理必须 排队媒体元素任务 给定 媒体元素触发一个名为 named change 的事件在 AudioTrackList 对象上。

媒体时间轴上没有特定位置数据的音轨,或在该位置不存在的音轨,必须被解释为在该时间点上是静音的。

The VideoTrackList selectedIndex 属性必须返回 当前选择的轨道的索引(如果有)。如果 VideoTrackList 对象当前不表示任何轨道,或者如果没有选择任何轨道,则必须返回 −1。

The VideoTrack selected 属性,在获取时,必须返回 true 如果轨道当前已选择,否则返回 false。在设置时,如果新值为 true,则必须选择轨道,否则取消选择它。如果轨道在一个 VideoTrackList中,则该列表中的所有其他 VideoTrack 对象必须取消选择。(如果轨道不再在一个 VideoTrackList 对象中,则轨道的选择或取消选择除了更改 VideoTrack 对象上的属性值外没有其他效果。)

每当 VideoTrackList 中先前未选择的轨道被选择,以及当 VideoTrackList 中已选择的轨道未选择且没有新轨道被选中代替时,用户代理必须 排队一个媒体元素任务 给定 媒体元素触发一个名为 named change 的事件在 VideoTrackList 对象上。该 任务 必须在 排队一个元素任务 before the task that fires the resize 事件的任务(如果有)。

媒体时间轴 上没有特定位置数据的视频轨道必须在该时间点上被解释为 透明黑色 , 具有与该位置之前的最后一帧相同的尺寸,或者如果位置在该轨道的所有数据之前,则具有该轨道第一帧的尺寸。当前位置根本不存在的轨道必须被视为存在但没有数据。

例如,如果一个视频有一个在播放一个小时后才引入的轨道,并且用户选择该轨道然后返回到开始位置,则用户代理将表现得像该轨道从 媒体资源 的开始处开始,但只是在一小时内透明。


以下是 事件处理程序 (及其对应的 事件处理程序事件类型) that must be supported, as event handler IDL attributes, by all objects implementing the AudioTrackListVideoTrackList interfaces:

事件处理程序 事件处理程序事件类型
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 ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android4.4+Samsung Internet?Opera Android20+

VideoTrackList/removetrack_event

支持所有当前引擎。

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (旧版)不支持Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
removetrack
4.8.11.10.2 以声明方式选择特定的音频和视频轨道

The audioTracksvideoTracks 属性允许脚本选择应该播放的轨道,但也可以通过在 片段 中指定特定轨道,以声明方式选择特定轨道 ,即通过指定 URL媒体资源片段 的格式取决于 MIME类型 of the media resource. [RFC2046] [URL]

在这个例子中,一个使用支持 媒体片段语法 的格式的视频被嵌入,以便启用标记为“Alternative”的替代角度,而不是默认的视频轨道。

<video src="myvideo#track=Alternative"></video>
4.8.11.11 定时文本轨迹
4.8.11.11.1 文本轨迹模型

A 媒体元素 可以有一组相关的 文本轨迹,称为 媒体元素文本轨迹列表文本轨迹 按以下顺序排序:

  1. 对应于 text tracks corresponding to track element children of the 媒体元素树顺序中。

  2. Any text tracks added using the addTextTrack() method, in the order they were added, oldest first.

  3. 任何 特定于媒体资源的文本轨迹文本轨迹 对应于 媒体资源中的数据),按 媒体资源的格式规范中定义的顺序排列。

A 文本轨道 是一个 TextTrack 对象,并由以下组成:

文本轨迹的类型

这决定了用户代理如何处理轨迹。类型由一个字符串表示。可能的字符串包括:

The kind of track can change dynamically, in the case of a 文本轨迹track 元素的情况下,轨迹类型可以动态更改。

标签

这是一个人类可读的字符串,用于识别轨迹。

The label of a track can change dynamically, in the case of a 文本轨迹track 元素的情况下,轨迹的标签可以动态更改。

文本轨迹标签 为空字符串时,用户代理应自动从文本轨迹的其他属性(例如文本轨迹的类型和语言)生成一个适当的标签,以在其用户界面中使用。此自动生成的标签不会在API中公开。

带内元数据轨迹调度类型

这是从 媒体资源 中提取的一个字符串,专门用于带内元数据轨迹,以便将这些轨迹分派给文档中的不同脚本。

例如,传统电视台的网络直播,配有网页特定的互动功能,可以包含带有广告定位、游戏节目期间的问答游戏数据、体育比赛中的玩家状态、烹饪节目的食谱信息等元数据的文本轨迹。随着每个节目开始和结束,新的轨迹可能会被添加或从流中移除,当每个轨迹被添加时,用户代理可以使用此属性的值将其绑定到专用的脚本模块。

除了带内元数据文本轨迹之外, 带内元数据轨迹调度类型 为空字符串。如何为不同媒体格式填充此值在 暴露特定媒体资源文本轨迹的步骤中进行了描述。

语言

这是一个表示文本轨迹提示语言的字符串(BCP 47语言标签)。 [BCP47]

The language of a text track can change dynamically, in the case of a 文本轨迹track 元素的情况下,文本轨迹的语言可以动态更改。

标识符

字符串。

准备状态

以下之一:

未加载

表示文本轨迹的提示尚未获取。

正在加载

表示文本轨迹正在加载,目前尚未遇到致命错误。解析器可能仍会向轨迹添加更多提示。

已加载

表示文本轨迹已加载且没有致命错误。

加载失败

表示文本轨迹已启用,但用户代理尝试获取它时失败(例如, URL 无法 解析,网络错误,未知的文本轨迹格式)。一些或所有提示可能丢失,且不会被获取。

The 文本轨迹的准备状态 of a text track changes dynamically as the track is obtained.

模式

以下之一:

禁用

表示文本轨迹未激活。除了在DOM中暴露轨迹之外,用户代理将忽略文本轨迹。没有提示激活,没有事件触发,用户代理不会尝试获取轨迹的提示。

隐藏

表示文本轨迹已激活,但用户代理未主动显示提示。如果尚未尝试获取轨迹的提示,用户代理将立即尝试。用户代理维护一个活跃提示的列表,并相应触发事件。

显示

表示文本轨道是活跃的。如果尚未尝试获取轨道的提示,用户代理将立即进行此尝试。用户代理正在维护一个列表,记录哪些提示是活跃的,并相应地触发事件。此外,对于 类型subtitlescaptions的文本轨道,提示适当地叠加在视频上;对于 类型descriptions的文本轨道,用户代理以非视觉方式向用户提供提示;对于 类型chapters的文本轨道,用户代理提供一种机制,使用户可以通过选择提示在 媒体资源 中的任何一点进行导航。

一个或多个提示的列表

一个 文本轨迹提示的列表,以及更新文本轨迹渲染的 规则。例如,对于WebVTT, 更新WebVTT文本轨迹显示的规则. [WEBVTT]

The 文本轨迹的提示列表 可以动态更改,因为 文本轨迹 尚未 加载 或仍在 加载,或由于DOM操作。


每个 媒体元素 都有一个 待处理文本轨迹列表,该列表必须最初为空,还有一个 被解析器阻塞 标志,该标志必须最初为假,以及一个 是否执行了自动轨迹选择 标志,该标志也必须最初为假。

当要求用户代理 填充 待处理文本轨道列表 (属于某个 媒体元素)时,用户代理必须将该 元素的 待处理 文本 轨道列表 each text track in the element's 文本轨道列表 whose 文本轨道模式 不是 禁用 ,且其 文本轨道就绪 状态正在加载

每当一个 track element's parent node changes, the user agent must remove the corresponding text track from any 待处理文本 轨道列表 that it is in.

每当一个 文本轨道文本轨道就绪 状态 变为 已加载加载 失败时,用户代理必须从它所在的任何 待处理文本轨道列表 中移除 它。

当一个 媒体元素HTML 解析器XML 解析器创建时,用户代理必须将该元素的 blocked-on-parser 标志设置为 true。 当一个 媒体元素打开元素栈 中弹出(该栈属于 HTML 解析器XML 解析器)时,用户代理必须 遵循用户 对自动文本轨道选择的偏好填充待处理文本 轨道列表,并将该元素的 blocked-on-parser 标志设置为 false。

The text tracks of a 媒体元素 are 就绪 : 该元素的 待处理 文本 轨道列表 为空,且该元素的 blocked-on-parser 标志为 false。

每个 媒体元素 都有一个 待处理文本轨道变更通知标志, 其初始时必须未设置。

每当一个 文本轨道 位于某个 媒体元素文本 轨道列表 中,并且其 文本轨道模式 改变 值时,用户代理必须为该 媒体元素运行 以下步骤:

  1. 如果该 媒体元素待处理文本轨道变更通知 标志 已设置,则返回。

  2. 设置该 媒体元素待处理文本轨道变更通知 标志

  3. Queue a media element task given the 媒体元素 to run these steps:

    1. 取消设置该 媒体元素待处理文本轨道变更 通知 标志

    2. Fire an event named change at the 媒体元素textTracks 属性的 TextTrackList object.

  4. 如果该 媒体元素显示海报标志 未设置,则运行 时间推进 步骤。

The task source for the 任务 listed in this section is the DOM 操作任务源


A 文本轨道提示文本轨道中对时间敏感数据的单元, 例如对于字幕和说明字幕,它对应于在某一特定 时间出现并在另一时间消失的文本。

每个 文本轨道提示 由以下组成:

一个标识符

任意字符串。

一个开始时间

以秒和秒的小数部分表示的时间,用于描述该提示所适用的 媒体数据 范围的开始。

一个结束时间

以秒和秒的小数部分表示的时间,用于描述该提示所适用的 媒体数据 范围的结束,或对于 无界 文本轨道提示为正 Infinity。

一个退出时暂停标志

一个布尔值,指示当到达该提示所适用范围的 结束处时,是否要暂停 媒体资源 的播放。

一些额外的格式特定数据

按格式需要的额外字段,包括提示的实际数据。例如, WebVTT 有 文本轨道提示书写方向 等等。 [WEBVTT]

An 无界文本轨道提示 是指其 文本轨道提示结束 时间 设置为正 Infinity 的文本轨道提示。一个活动的 无界 文本轨道提示 不能通过正常播放期间 当前播放位置 通常的单调增加而变为非活动(例如,直播 事件中没有公布结束时间的章节元数据提示)。

The 文本轨道 提示开始时间文本 轨道提示结束 时间 可以为负。(不过, 当前播放位置 绝不会为负, 因此完全位于时间零之前的提示不能处于活动状态。)

每个 文本轨道提示 都有一个对应的 TextTrackCue 对象(或更 具体地说,是一个继承自 TextTrackCue 的对象——例如,WebVTT 提示使用 VTTCue 接口)。 文本轨道提示的内存中 表示可以通过这个 TextTrackCue API 动态更改。 [WEBVTT]

A 文本轨道提示用于更新文本轨道 渲染的规则相关联,这些规则由特定种类的 文本轨道 提示. These rules are used specifically when the object representing the cue is added to a TextTrack object using the addCue() method.

此外,每个 文本轨道提示 都有两 项动态信息:

The 活动标志

该标志初始时必须未设置。该标志用于确保在提示变为活动或非活动时 适当地触发事件,并确保渲染正确的提示。

每当 文本轨道提示 从其 文本轨道文本轨道提示列表中 移除时;每当 文本轨道 本身从其 媒体元素文本 轨道列表 中移除,或其 文本轨道 模式 更改为 禁用时; 以及每当 媒体元素readyState 被改 回 HAVE_NOTHING. When the flag is unset in this way for one or more cues in text tracks that were 显示中文本轨道 中的一个 或多个提示以这种方式取消设置该标志时,用户代理必须在取消设置 所有受影响提示的标志之后,应用这些 文本轨道. For example, for 文本轨道 ,应用 用于更新 WebVTT 文本轨道显示 的规则[WEBVTT]

The 显示状态

这是渲染模型的一部分,用于使提示保持在一致的位置。其初始时必须 为空。每当 文本轨道提示活动标志 被取消设置时,用户 代理必须清空 文本轨道提示显示状态

The text track cues of a 媒体元素文本轨道 are ordered relative to each other in the 文本 轨道提示顺序, which is determined as follows: first group the cues by their 文本轨道, with the groups being sorted in the same order as their 文本轨道媒体元素文本轨道列表中出现的相同顺序 排序;然后,在每个分组内, 提示 必须按其 开始 时间, earliest first; then, any cues with the same 开始时间提示必须按其 结束时间 排序,最晚的 在前;最后,任何具有相同 结束 时间 must be sorted in the order they were last added to their respective 文本轨道 提示列表中的顺序排序,最早的在前(因此,例如,对于来自 WebVTT 文件的提示,这最初将是 这些提示在文件中列出的顺序)。 [WEBVTT]

4.8.11.11.2 嵌入式文本轨迹的来源

A 媒体资源特定文本轨迹 是一个 文本轨迹 ,对应于在 媒体资源中找到的数据。

处理和渲染此类数据的规则由相关规范定义,例如,如果 媒体资源 是视频,则由视频格式规范定义。一些遗留格式的详细信息可以在 从媒体容器中获取嵌入式媒体资源轨迹到HTML中找到。 [INBAND]

媒体资源 包含用户代理识别并支持作为 文本轨迹的数据时,用户代理将执行 暴露媒体资源特定文本轨迹的步骤 the steps to expose a media-resource-specific text track with the relevant data, as follows.

  1. 将相关数据与一个新的 文本轨道相关联。该 文本 轨道 是一个 媒体资源特定的文本轨道

  2. 根据相关规范定义的相关 数据语义,设置新的 文本轨道种类标签语言标识符 。 如果该数据中没有标签,则 标签 必须设置为 空字符串。

    如果 媒体资源 采用的 格式支持 媒体片段 语法,则 标识符 必须与 在这种 片段的轨道维度中 用作轨道名称时会启用该轨道的标识符相同。

  3. 文本轨道提示列表 与适用于所涉格式的 用于更新 文本轨道渲染的规则 相关联。

  4. 如果新的 文本轨道种类chaptersmetadata, then set the text track in-band metadata track dispatch type as follows, based on the type of the 媒体 资源:

    如果 媒体资源 是 Ogg 文件
    The 文本轨道带内 元数据轨道分派类型 必须设置为 Name 标头字段的值。 [OGGSKELETONHEADERS]
    如果 媒体资源 是 WebM 文件
    The 文本轨道带内 元数据轨道分派类型 必须设置为 CodecID 元素的值。 [WEBMCG]
    如果 媒体资源 是 MPEG-2 文件
    stream type 为文件节目映射段中描述文本 轨道类型的 "stream_type" 字段的值,并解释为 8 位无符号整数。令 length 为同一节目映射段部分中该轨道的 "ES_info_length" 字段的值, 并按 Generic coding of moving pictures and associated audio information中的定义解释为整数。令 descriptor bytes 为 "ES_info_length" 字段之后的 length 个字节。 文本轨道带内 元数据轨道分派类型 必须设置为 stream type 字节和零个或多个 descriptor bytes 字节的串联,并使用 ASCII 大写十六进制数字以十六进制表示。 [MPEG2]
    如果 媒体资源 是 MPEG-4 文件
    stsd box 为该文件第一个 stsd box of the first stbl box 的 第一个 minf box 的 第一个 mdia box of the text track's trak box 的 第一个 moov box; 如果不存在这样的 stsd box,则为 null。 如果 stsd box 为 null,或者如果 stsd box 既没有 mett box 也没有 metx box,则 文本轨道 带内元数据轨道分派类型 必须设置为空字符串。 否则,如果 stsd boxmett box,则 文本 轨道带内元数据轨道分派类型 必须设置为字符串 "mett", a U+0020 SPACE character, and the value of the first mime_format box 的第一个 mett 字段的值的串联;如果该 box 中不存在该字段,则设置为空字符串。 否则,如果 stsd box, or the empty string if that field is absent in that box. Otherwise, if stsd box has no mett box 但有 metx box,则 文本轨道带内 元数据轨道分派类型 必须设置为字符串 "metx", a U+0020 SPACE character, and the value of the first namespace box 的第一个 metx box of stsd box, or the empty string if that field is absent in that box. [MPEG4]
  5. 用到目前为止已解析出的提示填充新的 文本轨道提示 列表 ,遵循 暴露 提示的准则,并根据需要开始动态更新它。

  6. 将新的 文本轨道就绪 状态 设置为 已加载

  7. 将新的 文本轨道模式 设置为 与用户偏好以及相关规范对该数据的要求一致的模式。

    例如,如果没有其他活动字幕,并且这是一个强制 字幕轨道(即在音轨的主要语言中给出字幕的字幕轨道,但 仅用于实际上使用另一种语言的音频),那么这些字幕可能会在 此处被激活。

  8. 将新的 文本轨道 添加到 媒体元素文本 轨道列表中。

  9. Fire an event named addtrack at the 媒体元素textTracks 属性的 TextTrackList 对象上, 使用 TrackEvent, with the track 属性初始化为该 文本 轨道

4.8.11.11.3 外部文本轨迹的来源

当一个 track 元素被 创建时,它必须与一个新的 文本 轨道 相关联(其值按下文定义设置)。

The 文本轨迹类型 由元素的 kind 属性的状态确定,依据下表;对于第一列中的状态, 类型 是第二列中给定的字符串:

状态 字符串
Subtitles subtitles
Captions captions
Descriptions descriptions
Chapters metadata chapters
Metadata metadata

The 文本轨迹标签 是元素的 轨迹标签

The 文本轨道 语言 是元素的 轨道语言,如果有的话; 否则为空字符串。

The 文本轨道 标识符 是元素的 id 属性值,如果有的话;否则为空字符串。

随着 kindlabelsrclangid 属性 被设置、更改或移除, 文本 轨道 必须按照上述定义相应地更新。

轨迹URL 的更改在下面的算法中处理。

The 文本轨迹准备状态 最初是 未加载文本轨迹模式 最初是 禁用

The 文本轨迹提示列表 最初为空。解析引用文件时会动态修改它。与列表关联的是适用于该格式的 文本轨迹渲染更新规则 ;对于WebVTT,这是 更新WebVTT文本轨迹显示的规则[WEBVTT]

当一个 track 元素的父元素发生变化,且新的父元素是一个 媒体 元素时,用户代理必须将该 track 元素对应的 文本轨道 添加到该 媒体元素文本轨道列表, and then queue a media element task given the 媒体元素fire an event named addtrack at the 媒体元素textTracks 属性的 TextTrackList 对象上, 使用 TrackEvent, with the track 属性 初始化为该 文本轨道

当一个 track 元素的父元素发生变化,且旧父元素曾是一个 媒体 元素, then the user agent must remove the track 元素对应的 文本轨道 from the media element's list of text tracks, and then queue a media element task given the 媒体元素fire an event named removetrack at the 媒体元素textTracks 属性的 TextTrackList 对象上, 使用 TrackEvent, with the track 属性 初始化为该 文本轨道


当一个 文本轨迹 对应一个 track 元素被添加到 媒体元素文本轨迹列表时,用户代理必须 将媒体元素任务排入队列 ,给定 媒体元素 ,按以下步骤运行 媒体元素

  1. 如果元素的 被解析器阻塞 标志为真,则返回。

  2. 如果元素的 已执行自动轨迹选择 标志为真,则返回。

  3. 尊重用户对自动文本轨迹选择的偏好

When the user agent is required to honor user preferences for automatic text track selection for a 媒体元素, the user agent must run the following steps:

  1. Perform automatic text track selection for subtitlescaptions.

  2. Perform automatic text track selection for descriptions.

  3. If there are any text tracks in the 媒体元素文本轨迹列表 whose 文本轨迹类型chaptersmetadata ,并且其对应的 track 元素设置了 default 属性,其 文本轨迹模式 设置为 禁用,则将所有此类轨迹的 文本轨迹模式 设置为 隐藏

  4. 将元素的 已执行自动轨迹选择 标志设置为真。

When the steps above say to perform automatic text track selection for one or more 文本轨迹类型, it means to run the following steps:

  1. candidates be a list consisting of the text tracks in the 媒体元素文本轨迹列表 中, 文本轨迹 的类型是传递给算法的类型之一(如果有),按 文本轨迹列表中给定的顺序。

  2. 如果 candidates 为空,则返回。

  3. If any of the text tracks in candidates have a 文本轨迹模式 设置为 显示,则返回。

  4. If the user has expressed an interest in having a track from candidates enabled based on its 文本轨迹类型文本轨迹语言文本轨迹标签, then set its 文本轨迹模式 设置为 显示

    例如,用户可以设置浏览器偏好,如“我希望在任何可能的情况下启用法语字幕”,或者“如果有标题中包含‘评论’的字幕轨迹,启用它”,或者“如果有音频描述轨迹可用,启用一个,最好是瑞士德语,但如果没有,则启用标准瑞士德语或标准德语”。

    Otherwise, if there are any text tracks in candidates that correspond to track 元素设置了 default 属性,并且其 文本轨迹模式 设置为 禁用,则将第一个这样的轨迹的 文本轨迹模式 设置为 显示

当一个 文本轨迹 对应一个 track 元素经历以下任何情况时,用户代理必须 启动 track 处理模型 ,用于该 文本轨迹 及其 track 元素:

当用户代理 启动 track 处理模型 时,为 文本轨迹 及其 track 元素,它必须运行以下算法。此算法与 事件循环 机制密切互动;特别是,它有一个 同步部分 (在 事件循环 算法的一部分触发)。该部分的步骤标有⌛。

  1. 如果此算法的另一个实例已经在为该 文本轨迹 及其 track 元素运行,则返回,让另一个算法处理该元素。

  2. 如果 文本轨迹文本轨迹模式 未设置为 隐藏显示,则返回。

  3. 如果 文本轨迹track 元素没有一个 媒体元素 作为父元素,则返回。

  4. 在允许导致这些步骤运行的情况下, 并行运行剩余步骤。

  5. 顶部等待稳定状态同步部分 包括以下步骤。( 同步部分 的步骤标有⌛。)

  6. ⌛将 文本轨迹准备状态 设置为 加载中

  7. ⌛令 URL be the track URL of the track element.

  8. ⌛如果 track 元素的父元素是 媒体元素,则令 corsAttributeState 为父 媒体元素crossorigin 内容属性的状态。否则,令 corsAttributeState无CORS

  9. 结束 同步部分并行继续剩余步骤。

  10. 如果 URL 不为空字符串,则:

    1. request创建一个潜在的CORS请求 的结果,给定 URL、“track”和 corsAttributeState,并设置 同源回退标志

    2. request客户端 设置为 track 元素的 节点文档相关设置对象

    3. request启动器类型 设置为“track”。

    4. 获取 request

    The tasks queued by the fetching algorithm on the 网络任务源 to process the data as it is being fetched must determine the type of the resource. If the type of the resource is not a supported text track format, the load will fail, as described below. Otherwise, the resource's data must be passed to the appropriate parser (e.g., the WebVTT解析器),并在接收时传递给该解析器的输出使用的 文本轨迹提示列表[WEBVTT]

    The appropriate parser will incrementally update the text track list of cues during these 网络任务源 任务, as each such task is run with whatever data has been received from the network).

    本规范目前没有说明是否或如何检查文本轨迹的MIME类型,或者是否或如何使用实际文件数据进行文件类型嗅探。实施者在这个问题上的意图有所不同,因此不清楚正确的解决方案是什么。在这里没有任何要求的情况下,HTTP规范严格要求遵循Content-Type头的规定(“Content-Type指定了底层数据的媒体类型。”...“只有在Content-Type字段未给出媒体类型的情况下,接收方可以尝试通过检查其内容 和/或标识资源的URI的名称扩展来猜测媒体类型。”)。

    如果由于任何原因(网络错误、服务器返回错误代码、CORS失败等)导致获取失败,或者 URL is the empty string, then queue an element task on the DOM manipulation task source given the 媒体元素 to first change the 文本轨迹准备状态 更改为 加载失败 ,然后 触发一个事件 ,事件名为 error ,在 track 元素上。

    如果获取没有失败,但资源的类型不是受支持的文本轨迹格式,或者文件未成功处理(例如,该格式是XML格式,文件包含 XML 要求检测和报告给应用程序的良好格式错误),则在检测到上述问题的 task that is queued 上排队的 任务 ,必须将 文本轨迹准备状态 更改为 加载失败 ,并 触发一个事件 ,事件名为 error ,在 track 元素上。

    如果获取没有失败,并且文件已成功处理,则在解析数据后,通过 网络任务源 排队的最后一个 queued by the networking task source,必须将 文本轨迹准备状态 更改为 已加载,并 触发一个事件 ,事件名为 load ,在 track 元素上。

    如果在获取进行时:

    ...那么用户代理必须中止 获取,丢弃该算法生成的任何待处理 任务 generated by that algorithm (and in particular, not adding any cues to the text track list of cues after the moment the URL changed), and then queue an element task on the DOM manipulation task source given the track element that first changes the 文本轨迹准备状态 更改为 加载失败 ,然后 触发一个事件 ,事件名为 error ,在 track 元素上。

  11. 等待,直到 文本轨迹准备状态 不再设置为 加载中

  12. 等待,直到 轨迹URL 不再等于 URL,同时 文本轨迹模式 设置为 隐藏显示

  13. 跳到标记为 顶部的步骤。

每当 track 元素的 src 属性被设置、更改或删除时,用户代理必须 立即 清空该元素的 文本轨迹文本轨迹提示列表。(这也会导致上面的算法停止从以前给定的URL获取的资源中添加提示,如果有的话。)

4.8.11.11.4 在各种格式中暴露提示的指南 作为 文本轨迹提示

特定格式的文本轨迹提示如何解释,以便由HTML用户代理进行处理,由该格式定义。在缺乏此类规范的情况下,本节提供了一些限制,以便实现可以尝试一致地暴露这些格式。

为了支持 文本轨迹 模型, 每个定时数据单元被转换为一个 文本轨迹提示。 当 格式的特性与 文本轨迹提示 的 方面在本规范中没有定义时,实现必须 确保映射与上述 文本轨迹提示 的 方面的定义一致,并符合以下限制:

The 文本轨迹提示标识符

如果格式没有明显的类似物,应设置为空字符串。

The 文本轨迹提示退出时暂停标志

应设置为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+

Returns the number of text tracks associated with the 媒体元素 (e.g. from track elements). This is the number of text tracks in the 媒体元素文本 轨道列表.

media.textTracks[ n ]

Returns the nth text track in the 媒体元素文本轨道列表.

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。

A TextTrackList 对象表示给定 顺序中动态更新的 文本轨道 列表。

The textTracks attribute of media elements must return a TextTrackList object representing the text tracks in the 媒体元素文本 轨道列表, in the same order as in the 文本轨道列表中的顺序相同。

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+

The length 属性必须返回由该 TextTrackList 对象表示的列表中的 文本轨道 in the list represented by the TextTrackList object.

The supported property indices of a TextTrackList 对象在任何 时刻的 受支持属性索引 是从零到由该 TextTrackList object minus one, if any. If there are no 文本轨道 ,则没有 受支持属性 索引

To 确定索引属性的值 ,对于 TextTrackList object for a given index index, the user agent must return the indexth text track in the list represented by the TextTrackList object.

The getTrackById(id) method must return the first TextTrack in the TextTrackList 对象中第一个其 id IDL 属性会返回等于 id argument. When no tracks match the given argument, the method must return 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。

For in-band tracks, this is the ID that can be used with a fragment if the format supports 媒体片段 语法, and that can be used with the getTrackById() 方法一起使用。

For text tracks corresponding to track elements, this is the ID of the 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"

The 文本轨道禁用 模式。

"hidden"

The 文本轨道隐藏 模式。

"showing"

The 文本轨道显示 模式。

可以设置,以更改模式。

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+

Returns the text track cues from the 文本轨道 提示列表 that are currently active (i.e. that start before the 当前播放 位置 之前开始并在其之后结束的提示),作为一个 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文本轨道 提示列表中移除给定提示。

The addTextTrack(kind, label, language) method of media elements, when invoked, must run the following steps:

  1. 创建一个新的 文本轨道,并将其 文本轨道种类 设置为 kind,其 文本轨道标签 设置为 label,其 文本轨道 语言 设置为 language,其 文本轨道就绪状态 设置为 文本轨道已加载 状态,其 文本轨道模式 设置为 文本轨道 隐藏 模式,并将其 文本轨道提示列表 设置为空列表。

    初始时, 文本轨道 提示列表 不与任何 用于更新文本轨道渲染的规则相关联。当一个 文本轨道提示 被添加到其中时, 该 文本轨道 提示列表 的规则会相应地被永久设置。

  2. 将新的 文本轨道 添加到 媒体元素文本 轨道列表中。

  3. Queue a media element task given the 媒体元素fire an event named addtrack at the 媒体元素textTracks 属性的 TextTrackList 对象上, 使用 TrackEvent, with the track 属性初始化为新的 文本轨道

  4. 返回新的 文本轨道


The kind getter 步骤是返回 thiskind

The label getter 步骤是返回 thislabel

The language getter 步骤是返回 thislanguage

The id getter 步骤 是返回 thisidentifier

The inBandMetadataTrackDispatchType getter 步骤是返回 this带内元数据轨道分派类型

The mode getter 步骤是返回对 thismode进行切换所得的字符串:

The 文本轨道禁用 模式
"disabled"
The 文本轨道隐藏 模式
"hidden"
The 文本轨道显示 模式
"showing"

The mode setter 步骤是 将 thismode 设置为对给定 值进行切换所得的模式:

"disabled"
The 文本轨道禁用 模式。
"hidden"
The 文本轨道隐藏 模式。
"showing"
The 文本轨道显示 模式。

The cues getter 步骤是:

  1. 如果 thismode文本轨道 禁用 模式,则返回 null。

  2. 返回一个 实时 TextTrackCueList 对象,该对象 表示 this文本轨道提示列表 的子集, 其中 结束时间 出现在 脚本启动时最早可能 位置或之后,并按 文本轨道提示顺序排列。

对于每个 TextTrack 对象,当一个对象 被返回时,每次都必须返回同一个 TextTrackCueList 对象。

The 脚本启动时最早可能位置 is whatever the earliest possible position was the last time the 事件循环 reached step 1.

The activeCues getter 步骤是:

  1. 如果 thismode文本轨道 禁用 模式,则返回 null。

  2. 返回一个 实时 TextTrackCueList 对象,该对象 表示 this文本轨道提示列表 的子集,其中 脚本启动时活动标志已设置, 并按 文本 轨道提示顺序排列。

对于每个 TextTrack 对象,当一个对象 被返回时,每次都必须返回同一个 TextTrackCueList 对象。

如果一个 文本轨道提示's active flag was set when the script started if its 文本轨道提示活动 标志事件循环 上一次到达 步骤 1.


The addCue(cue) 方法步骤是:

  1. listthis文本轨道提示列表

  2. 如果 list 尚未有任何关联的 用于更新文本 轨道渲染的规则,则将 list with the rules for updating the text track rendering appropriate to cue.

  3. 如果 list关联的 用于更新文本轨道 渲染的规则 are not the same rules for updating the text track rendering as appropriate for cue, then throw an "InvalidStateError" DOMException

  4. 如果给定的 cue 位于某个 文本轨道提示列表, then remove cue from that 文本轨道提示列表.

  5. cue 添加到 list

The removeCue(cue) 方法步骤是:

  1. 如果给定的 cue 不在 this文本轨道 提示列表中,则抛出一个 "NotFoundError" DOMException

  2. Remove cue from this文本轨道 提示列表.

在这个例子中,使用一个 audio 元素来播放包含多个音效的音频文件中的特定音效。使用提示暂停音频,以便音频在剪辑结束时正好结束,即使浏览器正在运行一些脚本。如果页面依赖于脚本来暂停音频,那么如果浏览器无法在指定的时间运行脚本,则可能会听到下一个剪辑的开始部分。

var sfx = new Audio('sfx.wav');
var sounds = sfx.addTextTrack('metadata');

// add sounds we care about
function addFX(start, end, name) {
  var cue = new VTTCue(start, end, '');
  cue.id = name;
  cue.pauseOnExit = true;
  sounds.addCue(cue);
}
addFX(12.783, 13.612, 'dog bark');
addFX(13.612, 15.091, 'kitten mew');

function playSound(id) {
  sfx.currentTime = sounds.getCueById(id).startTime;
  sfx.play();
}

// play a bark as soon as we can
sfx.oncanplaythrough = function () {
  playSound('dog bark');
}
// meow when the user tries to leave,
// and have the browser ask them to stay
window.onbeforeunload = function (e) {
  playSound('kitten mew');
  e.preventDefault();
}

TextTrackCueList

Support in all current engines.

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
[Exposed=Window]
interface TextTrackCueList {
  readonly attribute unsigned long length;
  getter TextTrackCue (unsigned long index);
  TextTrackCue? getCueById(DOMString id);
};
cuelist.length

返回列表中 提示 的数量。

cuelist[index]

Returns the text track cue with index index in the list. The cues are sorted in 文本轨提示顺序排序。

cuelist.getCueById(id)

Returns the first 文本轨道提示 (按 文本轨道提示顺序) with text track cue identifier id.

如果没有提示具有给定的标识符或参数为空字符串,则返回null。

A TextTrackCueList 对象表示一个按特定顺序动态更新的 文本轨道提示 列表。

TextTrackCueList/length

所有主流引擎均支持。

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

The length attribute must return the number of cues in the list represented by the TextTrackCueList object.

The supported property indices of a TextTrackCueList 对象在任意时刻的 支持的属性索引 in the list represented by the TextTrackCueList object minus one, if any. If there are no 提示 ,则没有 支持的属性索引

To determine the value of an indexed property for a given index index, the user agent must return the indexth 确定索引属性的值 ,用户代理必须返回由 TextTrackCueList object.

TextTrackCueList/getCueById

所有主流引擎均支持。

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

The getCueById(id) method, when called with an argument other than the empty string, must return the first text track cue in the list represented by the TextTrackCueList object whose 文本轨道提示标识符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

Returns the TextTrack object to which this text track cue belongs, if any, or null otherwise.

cue.id [ = value ]

返回 文本轨道提示 标识符

可设置。

cue.startTime [ = value ]

返回 文本轨道提示 开始时间,以秒为单位。

可设置。

cue.endTime [ = value ]

返回 文本轨道提示结束 时间,以秒为单位。

对于 无界文本轨道提示,返回正 Infinity。

可设置。

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+

The track getter 步骤是返回 文本轨道 ,即 提示列表 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+

The id attribute, on getting, must return the text track cue identifier of the text track cue that the TextTrackCue object represents. On setting, the 文本 轨道提示标识符 必须设置为新值。

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+

The startTime attribute, on getting, must return the text track cue start time of the text track cue that the TextTrackCue object represents, in seconds. On setting, the 文本 轨道提示 开始时间 必须设置为新值,并解释为秒;然后,如果该 TextTrackCue 对象的 文本轨道提示 位于某个 文本轨道提示列表中,且该 文本轨道 位于 某个 媒体元素文本轨道列表中,并且该 媒体 元素显示海报标志 is not set, then run the 时间推进 steps for that media element.

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+

The endTime attribute, on getting, must return the text track cue end time of the text track cue that the TextTrackCue object represents, in seconds or positive Infinity. On setting, if the new value is negative Infinity or a Not-a-Number (NaN) value, then throw a TypeError 异常。否则, 文本轨道提示结束时间 必须设置为新值。 然后,如果该 TextTrackCue 对象的 文本轨道提示 位于某个 文本 轨道提示列表中, 且该 文本 轨道 位于某个 媒体元素文本轨道列表中,并且该 媒体元素显示海报标志 is not set, then run the 时间推进 steps for that media element.

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+

The pauseOnExit attribute, on getting, must return true if the text track cue pause-on-exit flag of the text track cue that the TextTrackCue object represents is set; or false otherwise. On setting, the 文本轨道 提示退出时暂停标志 ,否则必须 取消设置。

4.8.11.11.6 文本轨道API对象的事件处理程序

The following are the 事件处理程序 及其相应的 事件处理程序事件类型,作为 事件处理程序IDL属性, by all objects implementing the TextTrackList interface:

事件处理程序 事件处理程序事件类型
onchange change
onaddtrack addtrack
onremovetrack removetrack

The following are the 事件处理程序 及其相应的 事件处理程序事件类型,作为 事件处理程序IDL属性, by all objects implementing the TextTrack interface:

事件处理程序 事件处理程序事件类型
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

The following are the 事件处理程序 及其相应的 事件处理程序事件类型,作为 事件处理程序IDL属性, by all objects implementing the TextTrackCue interface:

事件处理程序 事件处理程序事件类型
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 to identify the return values of the AudioTrack kind or VideoTrack kind IDL属性的其他规范或格式,或者识别 文本轨道类型,必须使用 about:html-kind URL

4.8.11.13 用户界面

The controls 属性是一个 布尔属性。 如果存在,则表示作者没有提供脚本控制器,希望用户代理提供自己的一套控制。

如果存在该属性,或者该 脚本已禁用媒体元素,则用户代理应当 向用户展示一个用户界面。这个用户界面应当包括开始播放、暂停播放、跳转到内容中任意位置(如果内容支持任意跳转)、更改音量、更改隐藏字幕或嵌入手语轨道的显示、选择不同音轨或打开音频描述、以及以更适合用户的方式显示媒体内容(例如全屏视频或在独立的可调整大小的窗口中)。其他控制也可以提供。

即使没有该属性,用户代理也可以提供控制来影响媒体资源的播放(例如播放、暂停、跳转、轨道选择和音量控制),但这些功能不应干扰页面的正常渲染。例如,这些功能可以在 媒体元素的上下文菜单、平台媒体键或遥控器中提供。用户代理可以通过如上所述 向用户展示一个用户界面 来实现这一点(就像存在 controls 属性一样)。

If the user agent exposes a user interface to the user by displaying controls over the 媒体元素, then the user agent should suppress any user interaction events while the user agent is interacting with this interface. (For example, if the user clicks on a video's playback control, mousedown 事件等)。

如果可能(特别是用于开始、停止、暂停和继续播放、跳转、更改播放速率、快进或倒退、列出、启用和禁用文本轨道、以及静音或更改音量),用户代理暴露的用户界面功能必须根据上述DOM API实现,以确保例如所有相同的事件触发。

诸如快进或倒退的功能必须仅通过更改 playbackRate 属性(而不是 defaultPlaybackRate 属性)来实现。

跳转必须根据 跳转媒体元素媒体时间轴中的请求位置来实现。对于跳转到任意位置会很慢的媒体资源,用户代理应当在响应用户操作近似位置界面(如跳转条)时使用 approximate-for-speed 标志。


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+

如果音频被静音,返回true,覆盖 volume 属性;如果 volume 属性被尊重,返回false。

可以设置,以更改音频是否被静音。

一个 媒体元素 具有一个 播放音量,它是范围 0.0(静音)到 1.0(最大声)内的一个分数。 初始时,音量应为 1.0,但用户代理可以在会话之间记住最后设置的值, 以每站点为基础或其他方式记住,因此音量可以从其他值开始。

To set the playback volume of a 媒体元素 element to a number value

  1. 如果 element播放 音量 等于 value,则返回。

  2. element播放 音量 设置为 value

  3. 如果 element允许 播放, then run the internal pause steps for element.

  4. 排队一个媒体元素 任务 ,以在 element触发一个事件 ,其名称为 volumechange at element.

The volume getter 步骤是返回 this播放 音量

The volume setter 步骤是:

  1. 如果给定值不在 0.0 到 1.0(含)范围内,则抛出一个 "IndexSizeError" DOMException

  2. Set the playback volume of this to the given value.

如果以下任一项为真,则 媒体元素 is 已静音

每个 媒体元素 都有一个 静音 状态,它要么是 true、false,要么是 "default";它初始为 "default". User agents may set the muted state of a 媒体 元素 to true or false (e.g., remembering the last set value across sessions, on a per-site basis or otherwise).

To set the muted state of a 媒体元素 element to a boolean value

  1. 如果 element静音状态 等于 value,则返回。

  2. element静音状态 设置为 value

  3. 如果 element允许 播放, then run the internal pause steps for element.

  4. 排队一个媒体元素 任务 ,以在 element触发一个事件 ,其名称为 volumechange at element.

The muted getter 步骤是:如果 this is 已静音,则返回 true;否则返回 false。

The muted setter steps are to set the muted state of this to the given value.

用户代理具有一个关联的 音量锁定 (布尔值)。其值是 实现定义的 ,并确定 播放音量 是否生效。

元素的 有效媒体 音量 按如下方式确定:

  1. 如果用户已指示用户代理要覆盖该元素的音量, 则返回用户期望的音量。

  2. 如果用户代理的 音量锁定 为 true, 则返回系统 音量。

  3. 如果元素 已静音,则 返回 0。

  4. volume be the playback volume of the audio portions of the 媒体 元素, in range 0.0 (silent) to 1.0 (loudest).

  5. 返回 volume,相对于 0.0 到 1.0 的范围解释,其中 0.0 为 静音,1.0 为最大声设置,介于其中的值表示响度递增。该范围 不必是线性的。最大声设置可以低于系统可能的最大声设置; 例如,用户可能已设置了最大音量。

The muted content attribute on media elements is a 布尔 属性 ,它给出静音的默认值。

一旦 muted setter 已被调用或用户指示了 偏好,此属性就不再有进一步效果。

这个视频(一个广告)会自动播放,但为了避免惹恼用户,它在无声状态下播放, 并允许用户打开声音。如果它在没有用户交互的情况下被取消静音,用户代理可以暂停该视频。

<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 对象具有 范围,它是由零个或多个 列表 构成的 时间范围

A 时间范围 是一个具有以下 结构体 with the following 的:

The length getter 步骤是返回 this范围大小

The start(index) 方法步骤是:

  1. 如果 index 大于或等于 this范围大小,则抛出 "IndexSizeError" DOMException

  2. 返回 this范围[index] 的 起点

The end(index) 方法步骤是:

  1. 如果 index 大于或等于 this范围大小,则抛出 "IndexSizeError" DOMException

  2. 返回 this范围[index] 的 终点

一个 TimeRanges object is a 经规范化的 TimeRanges 对象 if the following are true for each time range in its ranges:

换句话说,这样一个对象中的 时间范围 是 有序的,不重叠,也不相接(相邻的会被折叠成一个更大的 时间范围)。一个 时间范围 可以为空(仅引用时间中的单个时刻),例如,用于表示在用户代理已丢弃除当前帧以外的整个 媒体 资源 时,在 媒体 元素 暂停的情况下,当前只缓冲了一个帧。

一个 时间范围起点终点 都是包含的。

Thus, the end of a 时间范围终点 会等于后续相邻 (相接但不 重叠) 时间范围. Similarly, a 时间范围 会有 一个等于零的 起点 ,以及一个等于该 时间线持续时间的 终点

The timelines used by the objects returned by the bufferedseekableplayed IDL attributes of media elements must be that element's 媒体时间线

4.8.11.15 The 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+

返回事件相关的轨道对象(TextTrackAudioTrack, 或 VideoTrack)。

The 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_EMPTYNETWORK_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_EMPTYNETWORK_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 A media element whose networkState was previously not in the NETWORK_EMPTY state has just switched to that state (either because of a fatal error during load that's about to be reported, or because the load() method was invoked while the resource selection algorithm was already running). networkStateNETWORK_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 用户代理尝试获取 媒体数据,但数据意外未到达。 networkStateNETWORK_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 The user agent can render the media data at the 当前播放位置 for the first time. 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 The 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 The seeking IDL attribute changed to false after the current playback position was changed.
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 The 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 The 当前播放位置 在正常播放过程中或以特别有趣的方式(例如不连续地)发生了变化。
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 Either the defaultPlaybackRateplaybackRate 属性刚刚更新。
resize Event One or both of the videoWidthvideoHeight 属性之一或两者刚刚更新。 媒体元素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 Either the volume 属性或 muted 属性已更改。在相关属性的setter返回后触发。

以下事件会在 source 元素上触发:

事件名称 接口 触发时机
error Event 在获取 媒体数据 时发生错误或资源类型不是支持的媒体格式。

以下事件会在 AudioTrackListVideoTrackListTextTrackList 对象上触发:

事件名称 接口 触发时机
change

AudioTrackList/change_event

所有当前引擎支持。

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (旧版)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

TextTrackList/change_event

所有当前引擎支持。

Firefox31+Safari7+Chrome33+
Opera?Edge79+
Edge (旧版)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android4.4+Samsung Internet?Opera Android?

VideoTrackList/change_event

所有当前引擎支持。

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (旧版)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
Event 一个或多个轨道在轨道列表中已启用或禁用。
addtrack

AudioTrackList/addtrack_event

所有当前引擎支持。

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (旧版)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

TextTrackList/addtrack_event

所有当前引擎支持。

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer11
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android?

VideoTrackList/addtrack_event

所有当前引擎支持。

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (旧版)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
TrackEvent 轨道已添加到轨道列表中。
removetrack

AudioTrackList/removetrack_event

所有当前引擎支持。

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (旧版)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

TextTrackList/removetrack_event

所有当前引擎支持。

Firefox31+Safari7+Chrome33+
Opera20+Edge79+
Edge (旧版)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android4.4+Samsung Internet?Opera Android?

VideoTrackList/removetrack_event

所有当前引擎支持。

Firefox🔰 33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+
Edge (旧版)NoInternet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
TrackEvent 轨道已从轨道列表中移除。

以下事件在 TextTrack 对象和 track 元素上触发:

事件名称 接口 触发时机
cuechange

HTMLTrackElement/cuechange_event

所有当前引擎支持。

Firefox68+Safari10+Chrome32+
Opera19+Edge79+
Edge (旧版)14+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android4.4.3+Samsung Internet?Opera Android19+

TextTrack/cuechange_event

所有当前引擎支持。

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
Event 轨道中的一个或多个提示已变为活动或停止活动。

以下事件在 track 元素上触发:

事件名称 接口 触发时机
error Event 获取轨道数据时发生错误或资源类型不是受支持的文本轨道格式。
load Event 轨道数据已被获取并成功处理。

以下事件在 TextTrackCue 对象上触发:

事件名称 接口 触发时机
enter

TextTrackCue/enter_event

所有当前引擎支持。

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
Event 提示已变为活动。
exit

TextTrackCue/exit_event

所有当前引擎支持。

Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer10+
Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
Event 提示已停止活动。
4.8.11.17 安全和隐私考量

The main security and privacy implications of the videoaudio 元素的主要安全和隐私影响来自跨源嵌入媒体的能力。威胁可以从两个方向流动:从恶意内容到受害页面,以及从恶意页面到受害内容。


如果受害页面嵌入恶意内容,威胁在于内容可能包含脚本代码,试图与嵌入内容的 Document 交互。为避免这种情况,用户代理必须确保内容无法访问嵌入页面。在使用DOM概念的媒体内容的情况下,嵌入的内容必须被视为在其自己无关的 顶级可遍历中。

例如,如果在 video 元素中嵌入一个SVG动画,用户代理不会给予它访问外部页面DOM的权限。从SVG资源中的脚本视角来看,SVG文件将显得处于一个没有父级的单独顶级可遍历中。


如果恶意页面嵌入受害内容,威胁在于嵌入页面可能会从内容中获取其本不会访问的信息。API确实暴露了一些信息:媒体的存在、其类型、其持续时间、其大小及其主机的性能特征。这些信息已经可能带来问题,但实际上可以通过 img 元素获取到差不多的信息,因此被认为是可以接受的。

然而,如果用户代理进一步暴露内容中的元数据,如字幕,则可能获得显著更敏感的信息。因此,只有在视频资源使用CORS时才暴露这些信息。 crossorigin 属性允许作者启用CORS。 [FETCH]

没有这个限制,攻击者可能会欺骗在企业网络内运行的用户访问一个试图从企业内联网泄露位置加载视频的网站。如果这样的影片包含新产品的机密计划,那么能够读取字幕将造成严重的机密泄露。

4.8.11.18 使用媒体元素的作者的最佳实践

本节为非规范性内容。

在小型设备(如机顶盒或手机)上播放音视频资源通常受到设备硬件资源有限的限制。例如,一个设备可能只支持同时播放三个视频。因此,当媒体元素 media elements 播放完毕时,通过非常谨慎地移除对该元素的所有引用并允许其被垃圾回收,或者更好的方法是将元素的 src 属性设置为空字符串,来释放资源。如果设置了 srcObject ,则将 srcObject 设置为null。

同样地,当播放速率不完全是1.0时,硬件、软件或格式限制可能会导致视频帧丢失和音频断断续续或静音。

4.8.11.19 实现媒体元素的最佳实践

本节为非规范性内容。

实现 media element API的各个方面的准确程度被认为是实现质量问题。

例如,在实现 buffered 属性时,报告已缓冲范围的精确程度取决于用户代理检查数据的仔细程度。由于API以时间报告范围,但数据是以字节流获取的,因此接收可变比特率流的用户代理可能只能通过实际解码所有数据来确定精确时间。然而,用户代理不需要这样做;他们可以返回估计值(例如基于到目前为止看到的平均比特率),这些估计值会随着更多信息的出现而进行修正。

作为一般规则,用户代理应保守而非乐观。例如,报告所有内容都已缓冲但实际上并没有缓冲完全是有害的。

另一个实现质量问题是当编解码器仅设计用于前向播放(例如关键帧很少且间隔很远,并且中间帧仅具有前一帧的增量)时,反向播放视频。用户代理可能会表现不佳,例如只显示关键帧;然而,更好的实现会做更多的工作,从而表现得更好,例如实际前向解码视频部分,存储完整帧,然后反向播放这些帧。

同样,实现可以随时丢弃缓冲数据(没有要求用户代理在媒体元素的生命周期内保留所有获取的媒体数据),这也是实现质量问题:有足够资源的用户代理被鼓励保留所有数据,因为这可以提供更好的用户体验。例如,如果用户在观看直播,用户代理可以只允许用户观看直播视频;然而,更好的用户代理会缓冲所有内容,并允许用户浏览早期材料,暂停,前后播放等。


当一个 media element 暂停时被 从文档中移除 并且在 事件循环 到达 步骤1之前未重新插入,实现资源受限的用户代理被鼓励利用这个机会释放所有由 media element使用的硬件资源(如视频平面、网络资源和数据缓冲区)。(用户代理仍需跟踪播放位置等,以防以后重新开始播放。)

4.8.12 The 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+
分类:
流内容.
短语内容.
有形内容.
该元素可以使用的上下文:
Where phrasing content is expected.
内容模型:
透明.
在 text/html 中省略标签:
两者标签都不可省略。
内容属性:
全局属性
name — Name of image map to reference from the usemap 属性引用图像地图的名称
无障碍考虑:
作者参考.
实现者参考.
净化
未分类
DOM 接口:
[Exposed=Window]
interface HTMLMapElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions, Reflect] attribute DOMString name;
  [SameObject] readonly attribute HTMLCollection areas;
};

The map 元素,与 img 元素和任何 area 元素后代一起使用,定义一个 图像地图. The element represents its children.

The name attribute gives the map a name so that it can be referenced. The attribute must be present and must have a non-empty value with no ASCII whitespace. The value of the name attribute must not be equal to the value of the name attribute of another map element in the same name. If the id 属性,则两个属性的值必须相 同。

map.areas

返回 HTMLCollection of the area elements in the map.

The areas 属性必须返回一个以 HTMLCollection rooted at the map element, whose filter matches only area elements.

图像地图可以与页面上的其他内容一起定义,以简化维护。这个示例是一个页面,在页面顶部有一个图像地图,在底部有一组对应的文本链接。

<!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 The 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

Support in all current engines.

火狐30+Safari9+Chrome54+
Opera?Edge79+
Edge(旧版)12+Internet Explorer11
火狐 Android?Safari iOS?Chrome Android?WebView Android?三星浏览器 Android?Opera Android?

HTMLAreaElement/relList

Support in all current engines.

火狐30+Safari9+Chrome65+
Opera41+Edge79+
Edge(旧版)18Internet Explorer不支持
火狐 Android?Safari iOS?Chrome Android?WebView Android?三星浏览器 Android?Opera Android41+
类别
流式内容
短语内容
可使用此 元素的上下文
在预期使用 短语内容 之处, 但仅当存在一个 map 元素祖先时。
内容模型
无内容
text/html 中的 标签省略
结束标签
内容属性
全局属性
alt — 在图像不可用时使用的 替代文本
coords — 在 图像映射
shape — 在 图像映射
href超链接
targetNavigable for 超链接 导航
download — 是否下载资源而不是导航到该资源,以及如果下载时使用的文件名
ping — 要 ping 的 URL to ping
rel — 包含 超链接 的文档中的位置与目标资源之间的关系
referrerpolicyReferrer policy for 获取 initiated by the element
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;

The area 元素 表示 either a hyperlink with some text and a corresponding area on an image map, or a dead area on an image map.

具有父节点的 area 元素必须有一个 map 元素祖先。

如果 area 元素具有 href 属性,那么 area 元素表示一个 超链接。在这种情况下, alt 属性必须存在。它指定超链接的文本。其值必须是这样的文本:当与图像地图的其他超链接文本以及图像的替代文本一起呈现时,但没有图像本身时,向用户提供与超链接使用其形状应用于图像时相同类型的选择。如果同一 image map, and with the alternative text of the image, but without the image itself, provides the user with the same kind of choice as the hyperlink would when used without its text but with its shape applied to the image. The alt attribute may be left blank if there is another area element in the same image map that points to the same resource and has a non-blank alt 属性不为空,则该属性可以留空。

如果 area 元素没有 href 属性,则该元素表示的区域不可选择,并且必须省略 alt 属性。

在这两种情况下, shapecoords 属性指定该区域。

The shape attribute is an enumerated attribute with the following keywords and states:

关键字 符合 状态 简要描述
circle 圆形状态 表示一个圆形,使用 coords 属性中的三个整数。
circ
default 默认状态 该区域是整个图像。(不使用 coords 属性。)
poly 多边形状态 表示一个多边形,使用 coords 属性中的至少六个整数。
polygon
rect 矩形状态 表示一个矩形,使用 coords 属性中的四个整数。
rectangle

该属性的 缺省值无效值 都是 矩形 状态。

The coords 属性必须包含一个 有效的浮点数列表,如果指定的话。该属性提供了由 shape 属性描述的形状的坐标。此属性的处理在 图像地图 处理模型中描述。

圆形状态中, area 元素必须具有 coords 属性,该属性包含三个整数,最后一个必须为非负数。第一个整数必须是从图像左边缘到圆心的距离,第二个整数必须是从图像上边缘到圆心的距离,第三个整数必须是圆的半径,均以 CSS 像素 from the left edge of the image to the center of the circle, the second integer must be the distance in CSS pixels from the top edge of the image to the center of the circle, and the third integer must be the radius of the circle, again in CSS pixels.

默认状态中, area 元素不能有 coords 属性。(该区域是整个图像。)

多边形状态中, area 元素必须具有 coords 属性,至少包含六个整数,并且整数的数量必须是偶数。每对整数必须表示从图像左侧和顶部的距离,均以 CSS 像素 为单位,并且所有坐标一起表示多边形的点,按顺序排列。

矩形状态中, area 元素必须具有 coords 属性,其中包含四个整数,第一个必须小于第三个,第二个必须小于第四个。这四个点分别表示从图像左边缘到矩形左侧的距离、从顶部边缘到顶部的距离、从左侧到右侧的距离和从顶部到底部的距离,均以 CSS 像素为单位。

当用户代理允许用户 跟随超链接下载超链接 时, area 元素的 hreftargetdownloadping 属性决定了链接的跟随方式。 rel 属性可用于向用户指示在用户跟随链接之前目标资源的可能性质。

The targetdownloadpingrelreferrerpolicyhreflangtype attributes must be omitted if the href attribute is not present.

如果 itemprop 属性在 area 元素上指定,则还必须指定 href 属性。

HTMLAreaElement/referrerPolicy

所有当前引擎都支持。

Firefox50+Safari14.1+Chrome52+
Opera?Edge79+
Edge(旧版)?Internet Explorer不支持
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

ID属性 referrerPolicy 必须 反映 the referrerpolicy 内容属性, 仅限于已知值

4.8.14 图像映射

4.8.14.1 编写

An 图像映射 允许将图像上的几何区域与 超链接关联起来。

图像(以 img 元素的形式)可以通过在 map 元素上指定 usemap 属性来关联到图像映射(以 img 元素的形式)。如果指定了 usemap attribute, if specified, must be a valid hash-name reference to a map element.

考虑如下所示的图像:

一个包含四个形状的线条,等间距排列:一个红色空心框,一个绿色圆圈,一个蓝色三角形和一个黄色四角星。

如果我们只想让有颜色的区域可以点击,我们可以这样做:

<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. Otherwise, the user agent must collect all the area 元素。令 areas. Let areas be that list.

在获得组成图像映射的 area 元素列表( areas)后,交互式用户代理必须根据意图以以下两种方式之一处理该列表。

如果用户代理打算显示 img 元素所代表的文本,则必须使用以下步骤:

  1. Remove all the area elements in areas 中所有没有 href attribute.

  2. Remove all the area elements in areas 中所有没有 alt 属性或 alt attribute's value is the empty string, if there is another area element in areas 中有另一个具有相同 href 属性值且具有非空 alt attribute.

  3. Each remaining area element in areas represents a 超链接。这些超链接应以与 img的文本相关的方式提供给用户。

    在这种情况下,用户代理可以以 areaimg 元素没有指定 alt 属性或其 alt 属性为空字符串或其他不可见文本的方式表示这些元素,使用一种 实现定义的 方式来指示缺少适当的作者提供的文本。

If the user agent intends to show the image and allow interaction with the image to select hyperlinks, then the image must be associated with a set of layered shapes, taken from the area elements in areas, in reverse 树顺序 (so the last specified area 元素是最底层的形状, map is the bottom-most shape, and the first element in the map, in 树顺序中,是最顶层的形状)。

Each area element in areas must be processed as follows to obtain a shape to layer onto the image:

  1. 找到该元素的 shape 属性所代表的状态。

  2. 使用 解析浮点数列表规则 来解析元素的 coords 属性(如果存在),并将结果赋值给 coords 列表。如果该属性不存在,则令 coords 列表为空列表。

  3. 如果 coords 列表中的项目数少于当前状态下 area 元素的最小数量,则形状为空;返回。

    状态 最小项目数
    圆形状态 3
    默认状态 0
    多边形状态 6
    矩形状态 4
  4. Check for excess items in the coords list as per the entry in the following list corresponding to the shape attribute's state:

    圆形状态
    丢弃列表中第三个项目以后的任何项目。
    默认状态
    丢弃列表中的所有项目。
    多边形状态
    如果项目数为奇数,则丢弃最后一个项目。
    矩形状态
    丢弃列表中第四个项目以后的任何项目。
  5. 如果 shape 属性代表 矩形状态,并且列表中的第一个数字大于第三个数字,则交换这两个数字。

  6. 如果 shape 属性代表 矩形状态,并且列表中的第二个数字大于第四个数字,则交换这两个数字。

  7. 如果 shape 属性代表 圆形状态,并且列表中的第三个数字小于或等于零,则形状为空;返回。

  8. 现在,由元素表示的形状是下面列表中与 shape 属性状态对应的条目所描述的形状:

    圆形状态

    xcoords列表中的第一个数字, y 为第二个数字, r 为第三个数字。

    该形状是一个圆,其中心点距离图像左边缘 x CSS像素 ,距离图像上边缘 y CSS像素 ,半径为 r CSS像素

    默认状态

    形状是一个完全覆盖整个图像的矩形。

    多边形状态

    xi be the (2coords)th entry in coords个条目, yi be the (2coords+1)th entry in i (the first entry in coords 中的第一个条目索引为0)。

    coordinates 为(xi, yi),以 CSS像素 为单位,从图像左上角开始测量,对于所有 i from 0 to (N/2)-1, where Ncoords中的条目数。

    该形状是一个多边形,其顶点由 coordinates给出,其内部通过奇偶规则确定。 [GRAPHICS]

    矩形状态

    x1coords中的第一个数字, y1 为第二个数字, x2 为第三个数字, y2 为第四个数字。

    该形状是一个矩形,其左上角由坐标(x1, y1)给出,右下角由坐标(x2, y2)给出,这些坐标以 CSS像素 为单位,从图像的左上角测量。

    由于历史原因,坐标必须相对于 显示 后的图像解释,即CSS 'width''height' 属性(或者,对于非CSS浏览器,图像元素的 widthheight 属性——CSS浏览器将这些属性映射到上述CSS属性)。

    浏览器缩放功能和使用CSS或SVG应用的变换不会影响坐标。

Pointing device interaction with an image associated with a set of layered shapes per the above algorithm must result in the relevant user interaction events being first fired to the top-most shape covering the point that the pointing device indicated, if any, or to the image element itself, if there is no shape covering that point. User agents may also allow individual area elements representing hyperlinks to be selected and activated (e.g. using a keyboard).

由于 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+

The MathML math 元素属于 嵌入内容, 短语内容, 流内容, 和 可感知内容 类别,用于本规范中的内容模型。

MathML annotation-xml 元素包含来自 HTML 命名空间的元素时,这些元素都必须是 流内容

当 MathML 令牌元素 (mi, mo, mn, ms, 和 mtext) 是 HTML 元素的后代时,它们可以包含来自 HTML 命名空间短语内容元素。

User agents must handle text other than inter-element whitespace found in MathML elements whose content models do not allow straight text by pretending for the purposes of MathML content models, layout, and rendering that the text is actually wrapped in a MathML mtext element. (Such text is not, however, conforming.)

用户代理必须假装任何 MathML 元素的内容不符合元素的内容模型时,其内容被一个包含适当错误信息的 MathML merror 元素替换,以用于 MathML 布局和渲染。

MathML 元素的语义由 MathML其他适用的规范定义。 [MATHML]

这是在 HTML 文档中使用 MathML 的一个示例:

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>The quadratic formula</title>
 </head>
 <body>
  <h1>The quadratic formula</h1>
  <p>
   <math>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
     <mrow>
      <mo form="prefix"></mo> <mi>b</mi>
      <mo>±</mo>
      <msqrt>
       <msup> <mi>b</mi> <mn>2</mn> </msup>
       <mo></mo>
       <mn>4</mn> <mo></mo> <mi>a</mi> <mo></mo> <mi>c</mi>
      </msqrt>
     </mrow>
     <mrow>
      <mn>2</mn> <mo></mo> <mi>a</mi>
     </mrow>
    </mfrac>
   </math>
  </p>
 </body>
</html>

4.8.16 SVG

HTML/HTML5/HTML5_Parser#Inline_SVG_and_MathML_support

支持所有当前引擎。

Firefox37+Safari11.1+Chrome7+
Opera15+Edge79+
Edge (旧版)12+Internet Explorer10+
Firefox Android37+Safari iOS11.3+Chrome Android18+WebView Android4.4+Samsung Internet4+Opera Android15+

The SVG svg 元素属于 嵌入内容短语内容流内容可感知内容 类别,用于本规范中的内容模型。

SVG foreignObject 元素包含来自 HTML 命名空间的元素时,这些元素必须全部为 流内容

The content model for the SVG title element inside HTML documents is 短语内容。(这进一步 约束了 SVG 2中给出的要求。)

SVG 元素的语义由 SVG 2其他适用的规范定义。 [SVG]


doc = iframe.getSVGDocument()
doc = embed.getSVGDocument()
doc = object.getSVGDocument()

返回 Document 对象,当 iframe, embed, 或 object 元素用于嵌入 SVG 时。

The getSVGDocument() 方法的步骤如下:

  1. document 成为 this内容文档

  2. 如果 document 非空,并且因为 页面加载处理模型针对 XML 文件 部分创建了它,因为在 资源的计算类型导航 算法中是 image/svg+xml,那么返回 document

  3. 返回 null。

4.8.17 尺寸属性

作者要求: The width and height attributes on imgiframeembedobjectvideosource 元素上, 当其父元素是 picture 元素时, 以及当其 type 属性处于 图片按钮 状态时, input elements may be specified to give the dimensions of the visual content of the element (the width and height respectively, relative to the nominal direction of the output medium), in CSS 像素。如果指定了这些属性,它们的值必须是 有效的非负整数

给定的指定尺寸可能与资源本身指定的尺寸不同,因为资源的分辨率可能与 CSS 像素分辨率不同。(在屏幕上, CSS 像素 的分辨率是 96ppi,但一般来说,CSS 像素分辨率取决于阅读距离。)如果同时指定了两个属性,则必须满足以下陈述之一:

The target ratio 是资源的 自然宽度自然高度 的比率。 specified widthspecified height 分别是 widthheight 属性的值。

如果相关资源没有 自然宽度自然高度,则必须省略这两个属性。

如果两个属性都为0,这表示该元素不打算用于用户(例如,它可能是一个用于计数页面浏览量的服务的一部分)。

尺寸属性不应用于拉伸图像。

用户代理要求:用户代理应使用这些属性 作为渲染的提示

对于 iframeembedobject ,IDL 属性类型为 DOMString; 对于 videosource ,IDL 属性类型为 unsigned long

对于 imginput 元素, 相应的 IDL 属性在这些各自元素的部分中定义,因为它们更具体地与这些元素的其他行为相关。

4.9 表格数据

4.9.1 The table element

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
};

The table 元素 表示 具有多于一个维度的数据,以 表格的形式。

The table 元素参与 表格模型。表格具有由其后代给出的行、列和单元格。这些行和列形成一个网格;表格的单元格必须完全覆盖该网格而不重叠。

判断此一致性要求是否满足的具体规则在 表格模型的描述中。

鼓励作者提供描述如何解释复杂表格的信息。关于如何 提供此类信息 的指导在下方。

表格不得用作布局辅助工具。历史上,一些网页作者错误地使用 HTML 表格来控制其页面布局。这种用法是不符合规范的,因为尝试从此类文档中提取表格数据的工具会得到非常混乱的结果。特别是,使用屏幕阅读器等辅助工具的用户可能会发现很难导航使用表格进行布局的页面。

有多种替代方案可用于布局,而不是使用 HTML 表格,例如 CSS 网格布局、CSS 弹性盒布局(“flexbox”)、CSS 多列布局、CSS 定位和 CSS 表格模型。 [CSS]


表格可能很复杂,难以理解和导航。为了帮助用户,用户代理应清晰地将表格中的单元格彼此区分开来,除非用户代理已将表格分类为(不符合规范的)布局表格。

鼓励作者和实现者考虑使用一些在下方描述的 表格设计技巧 以使表格更易于用户导航。

用户代理,特别是那些对任意内容进行表格分析的用户代理,鼓励找到确定哪些表格实际包含数据而哪些仅用于布局的启发式方法。本规范未定义精确的启发式方法,但以下建议作为可能的指标:

特征 指示
使用 role 属性,值为 presentation 可能是布局表格
使用不符合规范的 border 属性,值为 0 可能是布局表格
使用不符合规范的 cellspacingcellpadding 属性,值为 0 可能是布局表格
使用 captiontheadth 元素 可能是非布局表格
使用 headersscope 属性 可能是非布局表格
使用不符合规范的 border 属性,值为非0 可能是非布局表格
使用 CSS 设置的显式可见边框 可能是非布局表格
使用 summary 属性 不是一个好的指标(历史上,布局表格和非布局表格都设置了这个属性)

以上建议很可能是错误的。强烈建议实现者提供反馈,详细说明他们尝试创建布局表格检测启发式方法的经验。

如果一个 table 元素有一个(不符合规范的) summary 属性,并且用户代理未将其分类为布局表格,则用户代理可以向用户报告该属性的内容。


table.caption [ = value ]

HTMLTableElement/caption

支持所有当前引擎。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回表格的 caption 元素。

可设置,以替换 caption 元素。

caption = table.createCaption()

HTMLTableElement/createCaption

支持所有当前引擎。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

确保表格有一个 caption 元素,并返回它。

table.deleteCaption()

HTMLTableElement/deleteCaption

支持所有当前引擎。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

确保表格没有 caption 元素。

table.tHead [ = value ]

HTMLTableElement/tHead

支持所有当前引擎。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回表格的 thead 元素。

可设置,以替换 thead 元素。如果新值不是 thead 元素,则抛出 "HierarchyRequestError" DOMException

thead = table.createTHead()

HTMLTableElement/createTHead

支持所有当前引擎。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

确保表格有一个 thead 元素,并返回它。

table.deleteTHead()

HTMLTableElement/deleteTHead

支持所有当前引擎。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

确保表格没有 thead 元素。

table.tFoot [ = value ]

HTMLTableElement/tFoot

支持所有当前引擎。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回表格的 tfoot 元素。

可设置,以替换 tfoot 元素。如果新值不是 tfoot 元素,则抛出 "HierarchyRequestError" DOMException

tfoot = table.createTFoot()

HTMLTableElement/createTFoot

支持所有当前引擎。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

确保表格有一个 tfoot 元素,并返回它。

table.deleteTFoot()

HTMLTableElement/deleteTFoot

支持所有当前引擎。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

确保表格没有 tfoot 元素。

table.tBodies

HTMLTableElement/tBodies

支持所有当前引擎。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回一个 HTMLCollection ,包含表格的 tbody 元素。

tbody = table.createTBody()

HTMLTableElement/createTBody

支持所有当前引擎。

Firefox25+Safari6+Chrome20+
Opera?Edge79+
Edge (旧版)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

创建一个 tbody 元素,将其插入表格中,并返回它。

table.rows

HTMLTableElement/rows

支持所有当前引擎。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回一个 HTMLCollection ,包含表格的 tr 元素。

tr = table.insertRow([ index ])

HTMLTableElement/insertRow

支持所有当前引擎。

Firefox1+Safari4+Chrome1+
Opera10+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+

创建一个 tr 元素,必要时同时创建 tbody ,按给定的位置将其插入表格中,并返回 tr

位置相对于表中的行。默认省略参数时,索引 -1 相当于插入到表格末尾。

如果给定位置小于 -1 或大于行数,则抛出 "IndexSizeError" DOMException

table.deleteRow(index)

HTMLTableElement/deleteRow

支持所有当前引擎。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

移除表中给定位置的 tr 元素。

位置相对于表中的行。索引 -1 相当于删除表格的最后一行。

如果给定位置小于 -1 或大于最后一行的索引,或没有行,则抛出 "IndexSizeError" DOMException

To create a table element given a table 元素 tableElement 和一个字符串 localName, return the result of creating an element given tableElement's 节点 文档localName以及 HTML 命名空间

The caption getter steps are to return the first caption element child of this, if any; otherwise null.

The caption 设置器步骤 为:

  1. Remove the first caption element child of this, if any.

  2. 如果给定值不是 null,则将其作为 this的第一个节点插入。

The createCaption() 方法步骤为:

  1. 如果 this 有一个 caption 元素 子节点,则返回第一个这样的 元素。

  2. caption 为在给定 创建 表元素 时,给定 this 和 "caption" 的结果。

  3. caption 作为 this的第一个节点插入。

  4. 返回 caption

The deleteCaption() method steps are to remove the first caption element child of this, if any.

The tHead getter steps are to return the first thead element child of this, if any; otherwise null.

The tHead 设置器步骤为:

  1. 如果给定值既不是 null 也不是一个 thead 元素,则抛出 一个 "HierarchyRequestError" DOMException

  2. Remove the first thead element child of this, if any.

  3. 如果给定值不是 null,则将其插入到 this 的第一个既不是 caption 元素也不是 colgroup 元素的元素子节点之前,如果有这样的子节点;否则将其插入到 this的末尾。

The createTHead() 方法步骤为:

  1. 如果 this 有一个 thead 元素子节点, 则返回第一个这样的 元素。

  2. thead 为在给定 创建 表元素 时,给定 this 和 "thead" 的结果。

  3. thead 插入到 this 的第一个既不是 caption 元素也不是 colgroup 元素的元素子节点之前,如果有这样的子节点; 否则将 thead 插入到 this的末尾。

  4. 返回 thead

The deleteTHead() method steps are to remove the first thead element child of this, if any.

The tFoot getter steps are to return the first tfoot element child of this, if any; otherwise null.

The tFoot 设置器步骤为:

  1. 如果给定值既不是 null 也不是一个 tfoot 元素,则抛出 一个 "HierarchyRequestError" DOMException

  2. Remove the first tfoot element child of this, if any.

  3. 如果给定值不是 null,则将其插入到 this的末尾。

The createTFoot() 方法步骤为:

  1. 如果 this 有一个 tfoot 元素子节点, 则返回第一个这样的 元素。

  2. tfoot 为在给定 创建 表元素 时,给定 this 和 "tfoot" 的结果。

  3. tfoot 插入到 this的末尾。

  4. 返回 tfoot

The deleteTFoot() method steps are to remove the first tfoot element child of this, if any.

The tBodies getter steps are to return an HTMLCollection , 其过滤器仅匹配作为 this子节点的 tbody elements that are children of this.

The createTBody() 方法步骤为:

  1. tbody 为在给定 创建 表元素 时,给定 this 和 "tbody" 的结果。

  2. tbody immediately after the last tbody element child of this, if any; otherwise insert tbody 插入到 this的末尾。

  3. 返回 tbody

The rows getter steps are to return an HTMLCollection rooted at this, whose filter matches only tr 元素, 这些元素要么是 this的子节点,要么 是 theadtbodytfoot 元素的子节点,而这些元素本身 是 this的子节点。集合中的元素必须按以下方式排序: 父元素为 thead 的那些元素首先包含,按 树 顺序排列,随后是父元素为 thistbody 元素的那些元素,同样按 树顺序排列,最后是 父元素为 tfoot 元素的那些元素,仍然按 树顺序排列。

The 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 to the last tbody element in this.

  5. 否则,如果 index 为 −1 或等于 rows 集合中的项数,则将 tr to the parent of the last tr element in the rows collection.

  6. 否则,将 tr immediately before the indextr element in the rows collection, in the same parent.

  7. 返回 tr

The deleteRow(index) 方法步骤为:

  1. 如果 index 小于 −1 或大于等于 rows 集合中的 元素数量,则抛出一个 "IndexSizeError" DOMException

  2. 如果 index 为 −1,则从其父节点 移除 the last element in the rows 集合中的最后一个元素,或者 如果 rows 集合为空,则不执行任何操作。

  3. 否则,从其父节点 移除 the indexth element in the rows collection from its parent.

这是一个将表格用于标记数独谜题的示例。请注意,缺少标题,这在这样的表格中是没有必要的。

<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>
在表格旁边,位于 figurefigcaption
<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 The caption 元素

Element/caption

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLTableCaptionElement

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
无。
使用此元素的上下文:
作为 table 元素的第一个子元素。
内容模型:
流内容,但没有 table 元素的后代。
在text/html中省略标签:
如果 caption element's end tag can be omitted if the caption element is not immediately followed by ASCII whitespace or a comment.
内容属性:
全局属性
无障碍考虑:
针对作者
针对实现者
净化
默认
DOM接口:
[Exposed=Window]
interface HTMLTableCaptionElement : HTMLElement {
  [HTMLConstructor] constructor();

  // also has obsolete members
};

The caption element 代表 the title of the table 元素)的 table 元素的标题。

The caption element takes part in the 表格模型.

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

In the abstract, this table is not clear. However, with a caption giving the table's number (for 引用 in the main prose) and explaining its use, it makes more sense:

<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 The 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 元素之后,并且在任何 theadtbodytfoottr 元素之前。
内容模型:
如果 span 属性存在: 无内容
如果 span 属性不存在:零个或多个 coltemplate 元素。
在 text/html 中的标签省略:
如果 colgroup element's start tag can be omitted if the first thing inside the colgroup element is a col 元素,并且该元素之前没有紧跟另一个 colgroup 元素(其结束标签已省略),则可以省略 开始标签 。(如果元素为空,则不能省略)。
如果 colgroup element's end tag can be omitted if the colgroup element is not immediately followed by ASCII 空白字符注释.
内容属性:
全局属性
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
};

The colgroup 元素 表示 a group of one or more columns in the table that is its parent, if it has a parent and that is a table element.

如果 colgroup 元素不包含 col 元素,那么该元素可以指定一个 span 内容属性,其值必须是一个 有效的非负整数 ,大于零且小于等于 1000。

The colgroup 元素及其 span 属性参与 表格模型

4.9.4 The col 元素

Element/col

支持所有当前引擎。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
分类:
无。
此元素可以使用的上下文:
作为 colgroup 元素的子元素,该元素没有 span 属性。
内容模型:
无内容
在 text/html 中的标签省略:
没有 结束标签
内容属性:
全局属性
span — 元素跨越的列数
无障碍考虑:
作者指南
实现者指南
净化
默认 ,且具有 属性 span
DOM 接口:
使用 HTMLTableColElement,如在 colgroup 元素中定义的那样。

如果 col 元素有一个父元素,而该父元素是一个 colgroup 元素,该元素本身有一个父元素是一个 table 元素,则该 col 元素 表示 one or more columns in the column group represented by that colgroup中的一列或多列。

该元素可以指定一个 span 内容属性,其值必须是一个 有效的非负整数 ,大于零且小于或等于 1000。

The col 元素及其 span 属性参与 表格模型

4.9.5 The tbody 元素

元素/tbody

在所有当前引擎中支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLTableSectionElement

在所有当前引擎中支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
无。
此元素可使用的上下文:
作为 table 元素的子元素,在任何 captioncolgroupthead 元素之后,但前提是没有 tr 元素是 table 元素的子元素。
内容模型:
零个或多个 tr支持脚本 元素。
text/html 中的标签省略:
如果 tbody element's start tag can be omitted if the first thing inside the tbody element is a tr 元素,并且该元素前面没有省略了结束标签的 tbodytheadtfoot 元素,则可以省略 开始标签 。(如果元素是空的,则不能省略。)
如果 tbody element's end tag can be omitted if the tbody element is immediately followed by a tbody or tfoot element, or if there is no more content in the parent element.
内容属性:
全局属性
无障碍考虑:
作者
实现者
净化
默认
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
};

The HTMLTableSectionElement 接口也用于 theadtfoot 元素。

The tbody 元素 表示 一个 ,它由父 table 元素的数据主体组成,如果 tbody 元素有一个父元素并且它是一个 table

The tbody 元素参与 表模型

tbody.rows

返回一个 HTMLCollection ,其中包含表节的 tr 元素。

tr = tbody.insertRow([ index ])

创建一个 tr 元素,将其插入到给定位置的表节中,并返回 tr

位置相对于表节中的行。省略参数时,默认值 -1 等同于插入到表节的末尾。

如果给定的位置小于 -1 或大于行数,则抛出 "IndexSizeError" DOMException

tbody.deleteRow(index)

移除表节中给定位置的 tr 元素。

位置相对于表节中的行。索引 -1 等同于删除表节的最后一行。

如果给定的位置小于 -1 或大于最后一行的索引,或者如果没有行,则抛出 "IndexSizeError" DOMException

The rows 属性必须返回一个根植于该元素的 HTMLCollection ,其过滤器仅匹配作为该元素子元素的 tr 元素。

The insertRow(index) 方法必须按如下方式操作:

  1. 如果 index 小于 −1 或大于 rows 集合中的元素数量,则抛出一个 "IndexSizeError" DOMException

  2. table row 为调用 创建一个元素 的结果,传入该元素的 节点文档、“tr” 和 HTML 命名空间

  3. 如果 index 为 −1 或等于 rows collection, then append table row to this element.

  4. Otherwise, insert table row as a child of this element, immediately before the indextr element in the rows collection.

  5. 返回 table row

The deleteRow(index) 方法在调用时必须按如下操作:

  1. 如果 index 小于 -1 或大于等于 rows 集合中的元素数量,则抛出 "IndexSizeError" DOMException

  2. 如果 index 为 -1,则从此元素中 移除 the last element in the rows 集合中的最后一个元素,或者如果 rows 集合为空,则不执行任何操作。

  3. Otherwise, remove the indexth element in the rows collection from this element.

4.9.6 The thead 元素

元素/thead

在所有当前引擎中支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
无。
此元素可使用的上下文:
作为 table 元素的子元素,在任何 captioncolgroup 元素之后,在任何 tbodytfoottr 元素之前,但前提是没有其他 thead 元素是 table 元素的子元素。
内容模型:
零个或多个 tr支持脚本 元素。
text/html 中的标签省略:
如果 thead element's end tag can be omitted if the thead element is immediately followed by a tbodytfoot element.
内容属性:
全局属性
无障碍考虑:
作者
实现者
净化
默认
DOM 接口:
使用 HTMLTableSectionElement,如 tbody 元素中定义的。

The thead 元素 表示 由列标签(表头)和任何辅助非表头单元格组成的 that consist of the column labels (headers) and any ancillary non-header cells for the parent table element, if the thead 元素有一个父元素并且它是一个 table

The thead 元素参与 表模型

这个例子展示了 thead element being used. Notice the use of both thtd elements in the thead element: the first row is the headers, and the second row is an explanation of how to fill in the table.

<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 The tfoot 元素

元素/tfoot

在所有当前引擎中支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
无。
此元素可使用的上下文:
作为 table 元素的子元素,在任何 captioncolgrouptheadtbodytr 元素之后,但前提是没有其他 tfoot 元素是 table 元素的子元素。
内容模型:
零个或多个 tr支持脚本 元素。
text/html 中的标签省略:
如果父元素中没有更多内容,则可以省略 tfoot 元素的 结束标签
内容属性:
全局属性
无障碍考虑:
作者
实现者
净化
默认
DOM 接口:
使用 HTMLTableSectionElement,如 tbody 元素中定义的。

The tfoot 元素 表示 由列摘要(表尾)组成的 that consist of the column summaries (footers) for the parent table element, if the tfoot 元素有一个父元素并且它是一个 table

The tfoot 元素参与 表模型

4.9.8 The tr 元素

元素/tr

在所有当前引擎中支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLTableRowElement

在所有当前引擎中支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
无。
此元素可使用的上下文:
作为 thead 元素的子元素。
作为 tbody 元素的子元素。
作为 tfoot 元素的子元素。
作为 table 元素的子元素,在任何 captioncolgroupthead 元素之后,但前提是没有 tbody 元素是 table 元素的子元素。
内容模型:
零个或多个 tdth支持脚本 元素。
text/html 中的标签省略:
如果 tr element's end tag can be omitted if the tr element is immediately followed by another tr element, or if there is no more content in the parent element.
内容属性:
全局属性
无障碍考虑:
作者
实现者
净化
默认
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
};

The tr 元素 表示 表格中的一个 ,该行由表格中的 单元格 in a table.

The tr 元素参与 表模型

tr.rowIndex

HTMLTableRowElement/rowIndex

在所有当前引擎中支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回该行在表格 rows 列表中的位置。

如果该元素不在表格中,则返回 −1。

tr.sectionRowIndex

返回该行在表格节的 rows 列表中的位置。

如果该元素不在表格节中,则返回 −1。

tr.cells

返回一个 HTMLCollection ,其中包含该行的 tdth 元素。

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)

移除行中给定位置的 tdth 元素。

位置相对于行中的单元格。索引 -1 等同于删除行的最后一个单元格。

如果给定的位置小于 -1 或大于最后一个单元格的索引,或者如果没有单元格,则抛出 "IndexSizeError" DOMException

The rowIndex 属性必须,如果该元素有一个父 table 元素,或者一个父 tbodytheadtfoot 元素和一个 祖父 table 元素,返回该 tr 元素在该 table 元素的 rows 集合中的索引。如果没有这样的 table 元素,则属性必须返回 -1。

The sectionRowIndex 属性必须,如果该元素有一个父 tabletbodytheadtfoot 元素,返回该 tr 元素在父元素的 rows 集合中的索引(对于表格,这是 HTMLTableElementrows 集合;对于表格节,这是 HTMLTableSectionElementrows 集合)。如果没有这样的父元素,则属性必须返回 -1。

The cells attribute must return an HTMLCollection rooted at this tr element, whose filter matches only tdth elements that are children of the tr element.

The insertCell(index) 方法必须按如下方式操作:

  1. 如果 index 小于 −1 或大于 cells 集合中的元素数量,则抛出一个 "IndexSizeError" DOMException

  2. table cell 为调用 创建一个元素 的结果,传入该 tr 元素的 节点文档、“td” 和 HTML 命名空间

  3. 如果 index 等于 −1 或等于 cells collection, then append table cell to this tr 元素。

  4. Otherwise, insert table cell as a child of this tr element, immediately before the indextdth element in the cells collection.

  5. 返回 table cell

The deleteCell(index) 方法必须按如下方式操作:

  1. 如果 index 小于 -1 或大于等于 cells 集合中的元素数量,则抛出 "IndexSizeError" DOMException

  2. 如果 index 为 -1,则从其父元素中 移除 the last element in the cells 集合中的最后一个元素,或者如果 cells 集合为空,则不执行任何操作。

  3. Otherwise, remove the indexth element in the cells collection from its parent.

4.9.9 The td 元素

元素/td

在所有当前引擎中支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLTableCellElement

在所有当前引擎中支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
无。
此元素可使用的上下文:
作为 tr 元素的子元素。
内容模型:
流内容
text/html 中的标签省略:
如果 td element's end tag can be omitted if the td element is immediately followed by a td or th element, or if there is no more content in the parent element.
内容属性:
全局属性
colspan — 单元格跨越的列数
rowspan — 单元格跨越的行数
headers — 该单元格的表头单元格
无障碍考虑:
作者
实现者
净化
默认 ,且具有属性 colspanheadersrowspan
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
};

The HTMLTableCellElement 接口也用于 th 元素。

The td 元素 表示 表格中的数据 单元格

The td 元素及其 colspanrowspanheaders 属性参与 表模型

用户代理,尤其是在非视觉环境中或在显示表格为二维网格不切实际的情况下,可能会在渲染单元格内容时为用户提供单元格的上下文;例如,给出其在 表模型中的位置,或列出单元格的表头单元格(由 分配表头单元格的算法确定)。当列出单元格的表头单元格时,用户代理可以使用这些表头单元格上的 abbr 属性值(如果有),而不是表头单元格的内容。

在这个例子中,我们看到一个由可编辑单元格组成的网格(本质上是一个简单的电子表格)的网页应用片段。一个单元格被配置为显示其上方单元格的总和。三个单元格被标记为表头,使用 th 元素而不是 td 元素。一个脚本会附加事件处理程序到这些元素上以维护总数。

<table>
 <tr>
  <th><input value="Name">
  <th><input value="Paid ($)">
 <tr>
  <td><input value="Jeff">
  <td><input value="14">
 <tr>
  <td><input value="Britta">
  <td><input value="9">
 <tr>
  <td><input value="Abed">
  <td><input value="25">
 <tr>
  <td><input value="Shirley">
  <td><input value="2">
 <tr>
  <td><input value="Annie">
  <td><input value="5">
 <tr>
  <td><input value="Troy">
  <td><input value="5">
 <tr>
  <td><input value="Pierce">
  <td><input value="1000">
 <tr>
  <th><input value="Total">
  <td><output value="1060">
</table>

4.9.10 The th 元素

元素/th

在所有当前引擎中支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (旧版)12+Internet Explorer
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
类别:
无。
此元素可使用的上下文:
作为 tr 元素的子元素。
内容模型:
流内容,但没有 headerfooter分节内容标题内容 的后代元素。
text/html 中的标签省略:
如果 th element's end tag can be omitted if the th element is immediately followed by a tdth element, or if there is no more content in the parent element.
内容属性:
全局属性
colspan — 单元格跨越的列数
rowspan — 单元格跨越的行数
headers — 该单元格的表头单元格
scope — 指定表头单元格应用于哪些单元格
abbr — 在其他上下文中引用该单元格时使用的替代标签
无障碍考虑:
作者
实现者
净化
默认 ,且具有属性 abbrcolspanheadersrowspanscope
DOM 接口:
使用 HTMLTableCellElement,如 td 元素所定义。

The th 元素 表示 表格中的一个表头 单元格

The th 元素可以指定一个 scope 内容属性。

The scope 属性是一个 枚举属性 ,具有以下关键字和状态:

关键字 状态 简短描述
row Row 表头单元格适用于同一行中的一些后续单元格。
col Column 表头单元格适用于同一列中的一些后续单元格。
rowgroup Row Group 表头单元格适用于行组中的所有剩余单元格。
colgroup Column Group 表头单元格适用于列组中的所有剩余单元格。

属性的 缺失值默认无效值默认 都是 自动 状态。(在此状态下,表头单元格适用于基于上下文选择的一组单元格。)

A th 元素的 scope 属性不得处于 行组 状态;如果元素未锚定在 列组中,则不得处于 列组 state if the element is not anchored in a column group.

The th 元素可以指定一个 abbr 内容属性。其值必须是表头单元格的替代标签,用于在其他上下文中引用该单元格(例如在描述适用于数据单元格的表头单元格时)。它通常是完整表头单元格的缩写形式,但也可以是扩展形式,或只是不同的措辞。

The th 元素及其 colspanrowspanheadersscope 属性参与 表格模型

以下示例展示了 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 Attributes common to tdth 元素的共有属性

The tdth 元素可以有一个 colspan 内容属性,该属性的值必须是大于零且小于或等于1000的 有效非负整数

The tdth 元素还可以有一个 rowspan 内容属性,该属性的值必须是小于或等于65534的 有效非负整数 。对于该属性,值为零表示单元格将跨越行组中的所有剩余行。

这些属性分别给出了单元格要跨越的列数和行数。如 表模型描述的那样,这些属性不得用于重叠单元格。


The tdth 元素可以有一个 headers 内容属性。如果指定了 headers attribute, if specified, must contain a string consisting of an unordered set of unique space-separated tokens, none of which are identical to another token and each of which must have the value of an ID of a th element taking part in the same table as the tdth 元素(如 表模型).

A th 元素, 被认为是由同一 table id is said to be directly targeted by all tdth elements in the same table that have headers 属性值包含 以该 ID id作为其中一个 token。 th 元素 A is said to be targeted by a thtd 元素 B if either A is 指向 ,如果 AB that is itself 直接指向 ,或者存在一个元素 C , 该元素本身被 B is 指向 ,且 A.

A th 元素不得自 目标 自身。

The colspanrowspanheaders 属性参与 表模型


cell.cellIndex

返回单元格在行的 cells 列表中的位置。这不一定对应单元格在表中的 x位置,因为前面的单元格可能覆盖了多个行或列。

如果元素不在行中,则返回-1。

The cellIndex IDL属性必须在该元素有一个父 tr 元素时,返回该单元格元素在父元素的 cells 集合中的索引。如果没有这样的父元素,则该属性必须返回-1。

The scope IDL属性必须 反映 相同名称的内容属性, 仅限于已知值

4.9.12 处理模型

各种表格元素及其内容属性共同定义了 表模型

一个 表格 由在二维网格 上的对齐单元格组成,具有坐标(x, y)。网格是有限的,并且是空的或有一个或多个槽。如果网格有一个或多个槽,则 x 坐标始终在范围 0 ≤x<xwidthy 坐标始终在范围 0 ≤y<yheight内。如果 xwidthyheight 之一或两者为零,则该表为空(没有槽)。表对应于 table 元素。

一个 单元格 是锚定在槽(cellx, celly)上的一组槽,并具有特定的 widthheight ,使单元格覆盖所有具有坐标(x, y)的槽,其中 cellxx<cellx+widthcellyy<celly+height。单元格可以是 数据单元格标题单元格。数据单元格对应于 td 元素,标题单元格对应于 th 元素。两种类型的单元格都可以有零个或多个关联的标题单元格。

在某些错误情况下,可能会出现两个单元格占据同一个槽的情况。

一个 是从 x=0到 x=xwidth-1的完整槽集,对于特定的 y值。行通常对应于 tr 元素,尽管在某些涉及跨越多行的单元格情况下, 行组 的末尾可能有一些隐含的 at the end in some cases involving cells spanning multiple rows.

一个 是从 y=0到 y=yheight-1的完整槽集,对于特定的 x值。列可以对应于 col 元素。如果没有 col 元素,则列是隐含的。

A 行组 is a set of rows anchored at a slot (0, groupy) 具有特定 height such that the row group covers all the slots with coordinates (x, y) 的槽,其中 0 ≤ x < xwidthgroupy ≤ y < groupy+height。行组对应于 tbodytheadtfoot 元素。并非每一行都必须在一个行组中。

A 列组 is a set of columns anchored at a slot (groupx, 0) 具有特定 width such that the column group covers all the slots with coordinates (x, y) 的槽,其中 groupx ≤ x < groupx+width0 ≤ y < yheight。列组对应于 colgroup 元素。并非每一列都必须在一个列组中。

行组 不能相互重叠。同样, 列组 也不能相互重叠。

一个 单元格 不能覆盖两个或多个 行组的槽。然而,一个单元格可以位于多个 列组中。一个单元格的所有槽要么是零个,要么是一个 行组 的一部分,并且是零个或多个 列组的一部分。

除了 单元格行组列组表格 可以有一个 caption 元素与之关联。这为表格提供了标题或说明。

A 表模型错误 是指由 table 元素及其后代表示的数据错误。文档中不应有表模型错误。

4.9.12.1 表格的形成

To determine which elements correspond to which slots in a table associated with a table element, to determine the dimensions of the table (xwidthyheight),以及确定是否存在 表模型错误,用户代理必须使用以下算法:

  1. xwidth 为 0。

  2. yheight 为 0。

  3. pending tfoot 元素tfoot 元素的列表,初始为空。

  4. the table be the table represented by the table element. The xwidthyheight 变量给出了 the table的尺寸。 the table 最初是空的。

  5. 如果 table 元素没有子元素,则返回 the table (它将是空的)。

  6. 将第一个 caption 元素子元素与 table element with the table. If there are no such children, then it has no associated caption 元素。

  7. current elementtable 元素的第一个子元素。

    如果算法中的某个步骤需要将 current element to be 推进到 table ,而没有这样的下一个子元素,那么用户代理必须跳到算法结尾附近标记为 end的步骤。

  8. current element is not one of the following elements, advance the current element to the next child of the table的下一个子元素:

  9. 如果 current elementcolgroup,请按照以下子步骤进行:

    1. 列组:根据下面的适当情况处理 current element

      如果 current element 有任何 col 元素子元素

      按照以下步骤进行:

      1. xstart have the value of xwidth.

      2. current column be the first col element child of the colgroup element.

      3. :如果 current column col 元素具有 span 属性,则使用 解析非负整数的规则解析其值。

        如果解析结果不是错误或零,则令 span 为该值。

        否则,如果 col 元素没有 span 属性,或者尝试解析属性的值导致错误或零,则令 span 为1。

        如果 span 大于1000,则令其为1000。

      4. xwidth 增加 span

      5. the table columns in span 列对应于 current column col 元素。

      6. 如果 current column is not the last col element child of the colgroup element, then let the current column be the next col element child of the colgroup element, and return to the step labeled 的步骤。

      7. Let all the last columns in the table from x=xstartx=xwidth-1 form a new 列组,锚定在位置 (xstart, 0),宽度为 xwidth-xstart,对应于 colgroup 元素。

      如果 current element 没有 col 元素子元素
      1. 如果 colgroup 元素具有 span 属性,则使用 解析非负整数的规则解析其值。

        如果解析结果不是错误或零,则令 span 为该值。

        否则,如果 colgroup 元素没有 span 属性,或者尝试解析属性的值导致错误或零,则令 span 为1。

        如果 span 大于1000,则令其为1000。

      2. xwidth 增加 span

      3. the table columns in span 列形成一个新的 列组,以xwidth-span为锚点,宽度为 span,对应于 colgroup 元素。

    2. 推进 the current elementtable的下一个子元素。

    3. current element is not one of the following elements, advance the current element to the next child of the table的下一个子元素:

    4. 如果 current elementcolgroup 元素,跳到上面标记为 列组 的步骤。

  10. ycurrent 为 0。

  11. list of downward-growing cells 为空列表。

  12. :当 current element is not one of the following elements, advance the current element to the next child of the table的下一个子元素:

  13. 如果 current elementtr,则运行 行处理算法, advance the current element to the next child of the table的下一个子元素,并返回到标记为 的步骤。

  14. 运行 行组结束算法

  15. 如果 current elementtfoot,则将该元素添加到 pending tfoot 元素, advance the current element to the next child of the table的下一个子元素,并返回到标记为 的步骤。

  16. 当前元素 current elementtheadtbody

    运行 行组处理算法

  17. Advance the current element to the next child of the table的下一个子元素。

  18. 返回到标记为 的步骤。

  19. 结束: For each tfoot element in the list of pending tfoot elements, in 树顺序运行 行组处理算法

  20. If there exists a row or column in the table containing only slots that do not have a 单元 anchored to them, then this is a 表模型错误

  21. 返回 the table

The 处理行组的算法,由上述用于处理 theadtbodytfoot 元素的步骤调用,其流程如下:

  1. ystart 的值为 yheight

  2. 对于作为正在处理的元素的子元素的每个 tr 元素,按树顺序运行 行处理算法

  3. 如果 yheight > ystart, then let all the last rows in the table from y=ystarty=yheight-1 form a new 行组,锚定在坐标 (0, ystart) 的位置,高度为 yheight-ystart,对应于正在处理的元素。

  4. 运行 行组结束算法

当上述算法要求用户代理运行 行组结束算法时,用户代理必须遵循以下步骤:

  1. ycurrent 小于 yheight时,执行以下步骤:

    1. 运行 向下生长的单元算法

    2. ycurrent 增加1。

  2. 清空 list of downward-growing cells

上述算法调用的 行处理算法, which is invoked by the set of steps above for processing tr elements, is:

  1. 如果 yheight 等于 ycurrent,则将 yheight 增加1。(ycurrent is never greater than yheight。)

  2. xcurrent 为0。

  3. 运行 向下生长的单元算法

  4. 如果正在处理的 tr 元素没有 tdth 元素子元素,则将 ycurrent 增加1,中止此步骤集,并返回到上面的算法。

  5. current cell be the first tdth element child in the tr element being processed.

  6. 单元格:当 xcurrent 小于 xwidth 且坐标为(xcurrent, ycurrent)的槽已经有单元格分配给它时,将 xcurrent 增加1。

  7. 如果 xcurrent 等于 xwidth,则将 xwidth 增加1。(xcurrent is never greater than xwidth。)

  8. 如果 current cellcolspan 属性,则 解析该属性的值,并令 colspan 为结果。

    如果解析该值失败或返回零,或者该属性不存在,则令 colspan 为1。

    如果 colspan 大于1000,则令其为1000。

  9. 如果 current cellrowspan 属性,则 解析该属性的值,并令 rowspan 为结果。

    如果解析该值失败或该属性不存在,则令 rowspan 为1。

    如果 rowspan 大于65534,则令其为65534。

  10. cell grows downward be false.

  11. 如果 rowspan 为零,则将 cell grows downward 设为真,并将 rowspan to 1.

  12. 如果 xwidth < xcurrent+colspan,则令 xwidthxcurrent+colspan

  13. 如果 yheight < ycurrent+rowspan,则令 yheightycurrent+rowspan

  14. 让坐标为(x, y) such that xcurrent ≤ x < xcurrent+colspan and ycurrent ≤ y < ycurrent+rowspan be covered by a new 单元 c覆盖,其锚点为(xcurrent, ycurrent),宽度为 colspan ,高度为 rowspan,对应于 current cell 元素。

    如果 current cell 元素是 th 元素,则让这个新单元 c 为一个标题单元格;否则,让它为一个数据单元格。

    要确定哪些标题单元格适用于 current cell 元素,请使用下一节中描述的 分配标题单元格的算法

    如果涉及的任何槽已经有 单元 覆盖,则这是一个 表模型错误。那些槽现在有两个重叠的单元。

  15. 如果 cell grows downward 为真,则将元组{c, xcurrent, colspan}添加到 list of downward-growing cells

  16. xcurrent 增加 colspan

  17. 如果 current cell is the last tdth element child in the tr element being processed, then increase ycurrent 增加1,中止此步骤集,并返回到上面的算法。

  18. current cell be the next tdth element child in the tr element being processed.

  19. 返回到标记为 单元格的步骤。

当上述算法要求用户代理运行 向下生长的单元算法时,用户代理必须对list of downward-growing cells中的每个{ cellx, width, width}元组,如果有,将 单元 cell 扩展,以便它还覆盖坐标为(x, ycurrent), where cellx ≤ x < cellx+width.

4.9.12.2 在数据单元格和标题单元格之间形成关系

每个单元格可以分配零个或多个标题单元格。将 标题单元格分配算法 分配给单元格 principal cell 的过程如下。

  1. header list 为空单元格列表。

  2. 令(principalx, principaly)为 principal cell 锚定的槽的坐标。

  3. 如果 principal cell 指定了 headers 属性
    1. principal cellheaders 属性值并 按ASCII空白字符分割,得到 id list

    2. 对于 id list中的每个令牌,如果 Document with an ID equal to the token is a cell in the same 表格中的单元格,并且该单元格不是 principal cell,则将该单元格添加到 header list

    如果 principal cell 没有指定 headers 属性
    1. principalwidthprincipal cell的宽度。

    2. principalheightprincipal cell的高度。

    3. 对于从 y from principalyprincipaly+principalheight-1, run the 扫描和分配标题单元格的内部算法,使用 principal cellheader list、初始坐标(principalx, y)和增量 Δx=−1Δy=0

    4. 对于从 x from principalxprincipalx+principalwidth-1, run the 扫描和分配标题单元格的内部算法,使用 principal cellheader list、初始坐标(x, principaly)和增量 Δx=0Δy=−1

    5. 如果 principal cell 锚定在一个 行组, then add all header cells that are row group headers and are anchored in the same row group with an x坐标小于或等于 principalx+principalwidth-1且 y坐标小于或等于 principaly+principalheight-1 to header list中。

    6. 如果 principal cell 锚定在一个 列组, then add all header cells that are column group headers and are anchored in the same column group with an x坐标小于或等于 principalx+principalwidth-1且 y坐标小于或等于 principaly+principalheight-1 to header list中。

  4. Remove all the empty cells from the header list.

  5. header list中移除所有重复项。

  6. 如果 principal cellheader list 中,则将其移除。

  7. header list 中的标题分配给 principal cell

The 扫描和分配标题单元格的内部算法,给定一个 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. 如果 xy 小于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 列表中有任何单元格锚定的 x坐标与 current cell相同,且宽度与 current cell相同,则令 blocked 为true。

      如果 current cell 不是 列标题,则令 blocked 为true。

      如果Δy 为0

      如果在 opaque headers 列表中有任何单元格锚定的 y坐标与 current cell相同,且高度与 current cell相同,则令 blocked 为true。

      如果 current cell 不是 行标题,则令 blocked 为true。

    5. 如果 blocked 为false,则将 current cell 添加到 header list中。

    如果 current cell 是一个数据单元格且 in header block 为true

    设置 in header block 为false。将 headers from current header block 中的所有单元格添加到 opaque headers 列表中,并清空 headers from current header block 列表。

  10. 返回到标记为 循环的步骤。

锚定在坐标(x, y)、宽度为 width 、高度为 height 的槽上的标题单元格,如果符合以下任一条件,则称为 列标题

锚定在坐标(x, y)、宽度为 width 、高度为 height 的槽上的标题单元格,如果符合以下任一条件,则称为 行标题

A header cell is said to be a column group header if its scope 属性处于 列组 state.

A header cell is said to be a row group header if its scope 属性处于 行组 state.

A cell is said to be an empty cell if it contains no elements and its 子文本内容(如果有的话)仅由 ASCII空白字符.

4.9.13 示例

本节为非规范性内容。

The following shows how one might mark up the bottom part of table 45 of the Smithsonian physical tables, Volume 71:

<table>
 <caption>Specification values: <b>Steel</b>, <b>Castings</b>,
 Ann. A.S.T.M. A27-16, Class B;* P max. 0.06; S max. 0.05.</caption>
 <thead>
  <tr>
   <th rowspan=2>Grade.</th>
   <th rowspan=2>Yield Point.</th>
   <th colspan=2>Ultimate tensile strength</th>
   <th rowspan=2>Per cent elong. 50.8&nbsp;mm or 2&nbsp;in.</th>
   <th rowspan=2>Per cent reduct. area.</th>
  </tr>
  <tr>
   <th>kg/mm<sup>2</sup></th>
   <th>lb/in<sup>2</sup></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Hard</td>
   <td>0.45 ultimate</td>
   <td>56.2</td>
   <td>80,000</td>
   <td>15</td>
   <td>20</td>
  </tr>
  <tr>
   <td>Medium</td>
   <td>0.45 ultimate</td>
   <td>49.2</td>
   <td>70,000</td>
   <td>18</td>
   <td>25</td>
  </tr>
  <tr>
   <td>Soft</td>
   <td>0.45 ultimate</td>
   <td>42.2</td>
   <td>60,000</td>
   <td>22</td>
   <td>30</td>
  </tr>
 </tbody>
</table>

该表可能如下所示:

规格值: 铸件,ASTM A27-16年,B类;* P最大值0.06;S最大值0.05。
等级。 屈服点。 极限抗拉强度 延伸率。50.8 mm或 2 英寸。 截面收缩率。
kg/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

以下显示了如何标记Apple, Inc. 2008财年10-K文件第46页上的毛利表:

<table>
 <thead>
  <tr>
   <th>
   <th>2008
   <th>2007
   <th>2006
 <tbody>
  <tr>
   <th>Net sales
   <td>$ 32,479
   <td>$ 24,006
   <td>$ 19,315
  <tr>
   <th>Cost of sales
   <td>  21,334
   <td>  15,852
   <td>  13,717
 <tbody>
  <tr>
   <th>Gross margin
   <td>$ 11,145
   <td>$  8,154
   <td>$  5,598
 <tfoot>
  <tr>
   <th>Gross margin percentage
   <td>34.3%
   <td>34.0%
   <td>29.0%
</table>

该表可能如下所示:

2008 2007 2006
净销售额 $ 32,479 $ 24,006 $ 19,315
销售成本 21,334 15,852 13,717
毛利 $ 11,145 $ 8,154 $ 5,598
毛利率 34.3% 34.0% 29.0%

以下显示了如何标记同一文件页下方的运营费用表:

<table>
 <colgroup> <col>
 <colgroup> <col> <col> <col>
 <thead>
  <tr> <th> <th>2008 <th>2007 <th>2006
 <tbody>
  <tr> <th scope=rowgroup> Research and development
       <td> $ 1,109 <td> $ 782 <td> $ 712
  <tr> <th scope=row> Percentage of net sales
       <td> 3.4% <td> 3.3% <td> 3.7%
 <tbody>
  <tr> <th scope=rowgroup> Selling, general, and administrative
       <td> $ 3,761 <td> $ 2,963 <td> $ 2,433
  <tr> <th scope=row> Percentage of net sales
       <td> 11.6% <td> 12.3% <td> 12.6%
</table>

该表可能如下所示:

2008 2007 2006
研发 $ 1,109 $ 782 $ 712
净销售额百分比 3.4% 3.3% 3.7%
销售、一般和行政 $ 3,761 $ 2,963 $ 2,433
净销售额百分比 11.6% 12.3% 12.6%

4.10 表单

Element#Forms

所有当前引擎均支持。

Firefox4+Safari4+Chrome61+
Opera52+Edge79+
Edge (旧版)16+Internet Explorer10+
Firefox Android5+Safari iOS3.2+Chrome Android61+WebView Android61+Samsung Internet8.0+Opera Android47+

4.10.1 介绍

本节为非规范性内容。

表单是网页的一个组件,包含表单控件,如文本框、按钮、复选框、范围选择器或颜色选择器控件。用户可以与这些表单进行交互,提供数据,然后可以将这些数据发送到服务器进行进一步处理(例如返回搜索或计算的结果)。在许多情况下,不需要客户端脚本,尽管提供了一个API,以便脚本可以增强用户体验或将表单用于提交数据到服务器以外的目的。

编写表单包括几个步骤,这些步骤可以按任何顺序执行:编写用户界面、实现服务器端处理以及配置用户界面与服务器通信。

4.10.1.1 编写表单的用户界面

本节为非规范性内容。

为了简单介绍,我们将创建一个披萨订购表单。

任何表单都从一个 form 元素开始,控件放在其中。大多数控件由 input 元素表示,该元素默认提供文本控件。要为控件添加标签,使用 label 元素;标签文本和控件本身放在 label 元素内。表单的每个部分都被视为一个 段落,通常使用 p 元素与其他部分分隔。结合这些元素,下面是如何询问客户姓名的示例:

<form>
 <p><label>Customer name: <input></label></p>
</form>

为了让用户选择披萨的大小,我们可以使用一组单选按钮。单选按钮也使用 input 元素,这次带有值为 type 属性为 radio。为了使单选按钮作为一组工作,它们使用 name 属性赋予一个共同的名称。为了将一批控件组合在一起,例如在这种情况下的单选按钮,可以使用 fieldset 元素。这样一组控件的标题由 fieldset中的第一个元素给出,该元素必须是 legend 元素。

<form>
 <p><label>Customer name: <input></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
</form>

从上一步的变化已突出显示。

为了选择配料,我们可以使用复选框。这些使用 input 元素,其 type 属性值为 checkbox

<form>
 <p><label>Customer name: <input></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
</form>

这个披萨店总是出错,所以需要一种方法联系客户。为此,我们可以使用专门用于电话号码的表单控件(input 元素,其 type 属性设置为 tel)和电子邮件地址(input 元素,其 type 属性设置为 email):

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>Email address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
</form>

我们可以使用 input 元素,其 type 属性设置为 time 来询问送货时间。许多这些表单控件都有属性来精确控制可以指定的值;在这种情况下,特别感兴趣的三个属性是 minmaxstep。这些设置了最小时间、最大时间和允许值之间的间隔(以秒为单位)。这家披萨店只在上午11点到晚上9点之间送货,不承诺超过15分钟的增量,可以如下标记:

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>Email address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
</form>

The textarea 元素可用于提供多行文本控件。在这种情况下,我们将使用它为客户提供一个填写送货说明的空间:

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>Email address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
 <p><label>Delivery instructions: <textarea></textarea></label></p>
</form>

最后,为了使表单可提交,我们使用 button 元素:

<form>
 <p><label>Customer name: <input></label></p>
 <p><label>Telephone: <input type=tel></label></p>
 <p><label>Email address: <input type=email></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size> Small </label></p>
  <p><label> <input type=radio name=size> Medium </label></p>
  <p><label> <input type=radio name=size> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox> Bacon </label></p>
  <p><label> <input type=checkbox> Extra Cheese </label></p>
  <p><label> <input type=checkbox> Onion </label></p>
  <p><label> <input type=checkbox> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900"></label></p>
 <p><label>Delivery instructions: <textarea></textarea></label></p>
 <p><button>Submit order</button></p>
</form>
4.10.1.2 实现表单的服务器端处理

本节为非规范性内容。

编写服务器端处理器的具体细节不在本规范范围内。为了介绍的目的,我们假设 https://pizza.example.com/order.cgi 上的脚本配置为接受使用 application/x-www-form-urlencoded 格式的提交,期望在HTTP POST主体中发送以下参数:

custname
顾客的姓名
custtel
顾客的电话号码
custemail
顾客的电子邮件地址
size
披萨尺寸,值可以是 smallmediumlarge
topping
一种配料,每选一个配料就指定一次,允许的值是 baconcheeseonionmushroom
delivery
请求的送货时间
comments
送货说明
4.10.1.3 配置表单与服务器通信

本节为非规范性内容。

表单提交通过多种方式暴露给服务器,最常见的是HTTP GET或POST请求。为了指定使用的具体方法,在 method attribute is specified on the form element. This doesn't specify how the form data is encoded, though; to specify that, you use the enctype attribute. You also have to specify the URL of the service that will handle the submitted data, using the action attribute.

对于每个要提交的表单控件,必须给出一个名称,以便在提交中引用该数据。我们已经为一组单选按钮指定了名称;同样的属性(name)也指定了提交名称。通过为单选按钮提供不同的值(使用 value 属性),可以在提交中将它们区分开。

多个控件可以具有相同的名称;例如,这里我们给所有复选框相同的名称,服务器通过查看以该名称提交的值来区分哪个复选框被选中——就像单选按钮一样,它们也使用 value 属性给出了唯一的值。

根据上一节中的设置,这些都变成:

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname"></label></p>
 <p><label>Telephone: <input type=tel name="custtel"></label></p>
 <p><label>Email address: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size value="small"> Small </label></p>
  <p><label> <input type=radio name=size value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery"></label></p>
 <p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
 <p><button>Submit order</button></p>
</form>

某些属性的值带引号而其他的不带引号,并没有特别的意义。HTML语法允许多种同样有效的方式来指定属性,如语法部分 讨论的那样。.

例如,如果顾客输入“Denise Lawrence”作为姓名,“555-321-8642”作为电话号码,没有指定电子邮件地址,选择了中号披萨,选择了额外的奶酪和蘑菇配料,输入了晚上7点的送货时间,并且将送货说明文本控件留空,用户代理将向在线网络服务提交以下内容:

custname=Denise+Lawrence&custtel=555-321-8642&custemail=&size=medium&topping=cheese&topping=mushroom&delivery=19%3A00&comments=
4.10.1.4 客户端表单验证

Form_validation

Support in all current engines.

Firefox4+Safari5+Chrome4+
Opera≤12.1+Edge79+
Edge (旧版)12+Internet Explorer10+
Firefox Android?Safari iOS4+Chrome Android?WebView Android≤37+Samsung Internet?Opera Android≤12.1+

本节为非规范性内容。

表单可以进行注释,以便用户代理在表单提交之前检查用户的输入。服务器仍然需要验证输入是否有效(因为恶意用户可以轻松绕过表单验证),但这允许用户避免仅由服务器检查用户输入所带来的等待。

最简单的注释是 required 属性,可以在 input 元素上指定,以表明在给出值之前不提交表单。通过将此属性添加到客户姓名、披萨大小和送货时间字段,当用户在未填写这些字段的情况下提交表单时,用户代理会通知用户:

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname" required></label></p>
 <p><label>Telephone: <input type=tel name="custtel"></label></p>
 <p><label>Email address: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size required value="small"> Small </label></p>
  <p><label> <input type=radio name=size required value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size required value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
 <p><label>Delivery instructions: <textarea name="comments"></textarea></label></p>
 <p><button>Submit order</button></p>
</form>

还可以使用 maxlength 属性来限制输入的长度。通过将此属性添加到 textarea 元素,我们可以将用户限制为1000个字符,防止他们写出大量的文章而不是简明扼要的送货说明:

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname" required></label></p>
 <p><label>Telephone: <input type=tel name="custtel"></label></p>
 <p><label>Email address: <input type=email name="custemail"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size required value="small"> Small </label></p>
  <p><label> <input type=radio name=size required value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size required value="large"> Large </label></p>
 </fieldset>
 <fieldset>
  <legend> Pizza Toppings </legend>
  <p><label> <input type=checkbox name="topping" value="bacon"> Bacon </label></p>
  <p><label> <input type=checkbox name="topping" value="cheese"> Extra Cheese </label></p>
  <p><label> <input type=checkbox name="topping" value="onion"> Onion </label></p>
  <p><label> <input type=checkbox name="topping" value="mushroom"> Mushroom </label></p>
 </fieldset>
 <p><label>Preferred delivery time: <input type=time min="11:00" max="21:00" step="900" name="delivery" required></label></p>
 <p><label>Delivery instructions: <textarea name="comments" maxlength=1000></textarea></label></p>
 <p><button>Submit order</button></p>
</form>

当表单提交时,会在每个无效的表单控件上触发 invalid 事件。这对于显示表单问题的摘要很有用,因为通常浏览器本身只会一次报告一个问题。

4.10.1.5 启用客户端自动填充表单控件

本节为非规范性内容。

一些浏览器尝试通过自动填充表单控件来帮助用户,而不是每次都让用户重新输入他们的信息。例如,一个请求用户电话号码的字段可以自动填充用户的电话号码。

为了帮助用户代理实现这一点,可以使用 autocomplete 属性来描述字段的用途。在此表单的情况下,有三个字段可以这样注释:关于披萨的收件人信息。添加这些信息如下所示:

<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="https://pizza.example.com/order.cgi">
 <p><label>Customer name: <input name="custname" required autocomplete="shipping name"></label></p>
 <p><label>Telephone: <input type=tel name="custtel" autocomplete="shipping tel"></label></p>
 <p><label>Email address: <input type=email name="custemail" autocomplete="shipping email"></label></p>
 <fieldset>
  <legend> Pizza Size </legend>
  <p><label> <input type=radio name=size required value="small"> Small </label></p>
  <p><label> <input type=radio name=size required value="medium"> Medium </label></p>
  <p><label> <input type=radio name=size required value="large"> Large </label></p>
 </fieldset>
 <fieldset>