1. 3 HTML 文档的语义、结构和 API
    1. 3.1 文档
      1. 3.1.1 Document 对象
      2. 3.1.2 DocumentOrShadowRoot 接口
      3. 3.1.3 资源元数据管理
      4. 3.1.4 报告文档加载状态
      5. 3.1.5 渲染阻塞机制
      6. 3.1.6 DOM 树访问器
    2. 3.2 元素
      1. 3.2.1 语义
      2. 3.2.2 DOM 中的元素
      3. 3.2.3 HTML 元素构造函数
      4. 3.2.4 元素定义
        1. 3.2.4.1 属性
      5. 3.2.5 内容模型
        1. 3.2.5.1 “无” 内容模型
        2. 3.2.5.2 内容类型
          1. 3.2.5.2.1 元数据内容
          2. 3.2.5.2.2 流内容
          3. 3.2.5.2.3 分区内容
          4. 3.2.5.2.4 标题内容
          5. 3.2.5.2.5 短语内容
          6. 3.2.5.2.6 嵌入内容
          7. 3.2.5.2.7 交互式内容
          8. 3.2.5.2.8 可感知内容
          9. 3.2.5.2.9 支持脚本的元素
        3. 3.2.5.3 透明内容模型
        4. 3.2.5.4 段落
      6. 3.2.6 全局属性
        1. 3.2.6.1 title 属性
        2. 3.2.6.2 langxml:lang 属性
        3. 3.2.6.3 translate 属性
        4. 3.2.6.4 dir 属性
        5. 3.2.6.5 style 属性
        6. 3.2.6.6 使用 data-* 属性嵌入自定义不可见数据
      7. 3.2.7 innerTextouterText 属性
      8. 3.2.8 与双向算法相关的要求
        1. 3.2.8.1 双向算法格式化字符的创作符合性标准
        2. 3.2.8.2 用户代理符合性标准
      9. 3.2.9 与 ARIA 和平台辅助功能 API 相关的要求

3 HTML 文档的语义、结构和 API

3.1 文档

HTML UA 中的每个 XML 和 HTML 文档都由一个 Document 对象表示。 [DOM]

Document 对象的 URLDOM 中定义。它在 Document 对象创建时最初设置,但在 Document 对象的生命周期中可能会改变;例如,当用户 导航 到页面上的 片段 以及当 pushState() 方法被调用带有新的 URL 时,它会改变。 [DOM]

交互式用户代理通常在它们的界面中公开 Document 对象的 URL。这是用户判断一个网站是否试图冒充另一个网站的主要机制。

Document 对象的 originDOM 中定义。它在 Document 对象创建时最初设置,并且在 Document 的生命周期中只有在设置 document.domain 时才能改变。 Documentorigin 可能与它的 origin 不同;例如,当 子可导航创建 时,它的 活动文档origin 从它的 父级活动文档origin 继承,即使它的 活动文档URLabout:blank[DOM]

Document脚本 使用 createDocument()createHTMLDocument() 方法创建时,Document 立即 准备好执行加载后任务

文档的来源 是一个字符串(表示一个 URL),可以在创建 Document 时设置。如果它没有被显式设置,那么它的值为一个空字符串。

3.1.1 Document 对象

Document

所有当前引擎中都支持。

Firefox1+Safari1+Chrome1+
Opera3+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+

DOM 定义了 Document 接口,该规范对其进行了重大扩展。

enum DocumentReadyState { "loading", "interactive", "complete" };
enum DocumentVisibilityState { "visible", "hidden" };
typedef (HTMLScriptElement or SVGScriptElement) HTMLOrSVGScriptElement;

[LegacyOverrideBuiltIns]
partial interface Document {
  static Document parseHTMLUnsafe((TrustedHTML or DOMString) html);

  // resource metadata management
  [PutForwards=href, LegacyUnforgeable] readonly attribute Location? location;
  attribute USVString domain;
  readonly attribute USVString referrer;
  attribute USVString cookie;
  readonly attribute DOMString lastModified;
  readonly attribute DocumentReadyState readyState;

  // DOM tree accessors
  getter object (DOMString name);
  [CEReactions] attribute DOMString title;
  [CEReactions] attribute DOMString dir;
  [CEReactions] attribute HTMLElement? body;
  readonly attribute HTMLHeadElement? head;
  [SameObject] readonly attribute HTMLCollection images;
  [SameObject] readonly attribute HTMLCollection embeds;
  [SameObject] readonly attribute HTMLCollection plugins;
  [SameObject] readonly attribute HTMLCollection links;
  [SameObject] readonly attribute HTMLCollection forms;
  [SameObject] readonly attribute HTMLCollection scripts;
  NodeList getElementsByName(DOMString elementName);
  readonly attribute HTMLOrSVGScriptElement? currentScript; // classic scripts in a document tree only

  // dynamic markup insertion
  [CEReactions] Document open(optional DOMString unused1, optional DOMString unused2); // both arguments are ignored
  WindowProxy? open(USVString url, DOMString name, DOMString features);
  [CEReactions] undefined close();
  [CEReactions] undefined write((TrustedHTML or DOMString)... text);
  [CEReactions] undefined writeln((TrustedHTML or DOMString)... text);

  // user interaction
  readonly attribute WindowProxy? defaultView;
  boolean hasFocus();
  [CEReactions] attribute DOMString designMode;
  [CEReactions] boolean execCommand(DOMString commandId, optional boolean showUI = false, optional DOMString value = "");
  boolean queryCommandEnabled(DOMString commandId);
  boolean queryCommandIndeterm(DOMString commandId);
  boolean queryCommandState(DOMString commandId);
  boolean queryCommandSupported(DOMString commandId);
  DOMString queryCommandValue(DOMString commandId);
  readonly attribute boolean hidden;
  readonly attribute DocumentVisibilityState visibilityState;

  // special event handler IDL attributes that only apply to Document objects
  [LegacyLenientThis] attribute EventHandler onreadystatechange;
  attribute EventHandler onvisibilitychange;

  // also has obsolete members
};
Document includes GlobalEventHandlers;

每个 Document 都有一个 策略容器(一个 策略容器),最初是一个新的策略容器,其中包含适用于 Document 的策略。

每个 Document 都有一个 权限策略,它是一个 权限策略,最初为空。

每个 Document 都有一个 模块映射,它是一个 模块映射,最初为空。

每个 Document 都有一个 打开策略,它是一个 打开策略,最初是一个新的打开策略。

每个 Document 都有一个 初始 about:blank,它是一个布尔值,最初为假。

每个 Document 都有一个 加载期间的 WebDriver BiDi 导航 ID,它是一个 导航 ID 或 null,最初为 null。

顾名思义,它用于与 WebDriver BiDi 规范交互,该规范需要以某种方式了解 Document 生命周期早期部分的某些事件,将它们与创建此 Document 的导航所使用的原始 导航 ID 绑定。最终,在 WebDriver BiDi 认为加载过程完成之后,它会重新设置为 null。 [BIDI]

每个 Document 都有一个 关于基本 URL,它是一个 URL 或 null,最初为 null。

这仅适用于 “about:” 模式 Document

每个 Document 都有一个 bfcache 阻塞详细信息,它是一个 集合,其中包含 未恢复的原因详细信息,最初为空。

3.1.2 DocumentOrShadowRoot 接口

DOM 定义了 DocumentOrShadowRoot 混合,该规范对其进行了扩展。

partial interface mixin DocumentOrShadowRoot {
  readonly attribute Element? activeElement;
};

3.1.3 资源元数据管理

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+

返回用户从哪个 Document 导航到当前文档的 URL,除非它被阻止或不存在此类文档,在这种情况下它将返回空字符串。

noreferrer 链接类型可以用于阻止来源。

referrer 属性必须返回 文档的来源


document.cookie [ = value ]

返回适用于 Document 的 HTTP cookie。如果没有 cookie 或 cookie 无法应用于此资源,则将返回空字符串。

可以设置,以将新 cookie 添加到元素的 HTTP cookie 集合中。

如果内容被沙箱化到不透明的来源(例如,在一个带有sandbox属性的iframe中),则在获取和设置时会抛出一个"SecurityError" DOMException

文档/cookie

所有当前引擎中都支持。

Firefox1+Safari1+Chrome1+
Opera3+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

cookie 属性表示由文档的URL标识的资源的cookie。

满足以下条件之一的Document对象是排斥cookie的Document对象

(这是一个跟踪向量。) 在获取时,如果文档是一个排斥cookie的Document对象,则用户代理必须返回空字符串。否则,如果Document来源是一个不透明的来源,则用户代理必须抛出一个"SecurityError" DOMException。否则,用户代理必须返回文档的URL的“非HTTP”API的cookie字符串,使用无BOM的UTF-8解码解码。 [COOKIES]

在设置时,如果文档是一个排斥cookie的Document对象,则用户代理必须什么也不做。否则,如果Document来源是一个不透明的来源,则用户代理必须抛出一个"SecurityError" DOMException。否则,用户代理必须像它在通过“非HTTP”API接收文档的URLset-cookie字符串时一样进行操作,该字符串由新值组成,以UTF-8编码[COOKIES] [ENCODING]

由于cookie属性在跨帧访问时是可访问的,因此cookie上的路径限制只是一个工具,可以帮助管理哪些cookie被发送到网站的哪些部分,而这并不是任何安全功能。

cookie属性的getter和setter会同步访问共享状态。由于没有锁定机制,多进程用户代理中的其他浏览上下文可以在脚本运行时修改cookie。例如,一个网站可以尝试读取一个cookie,增加它的值,然后使用cookie的新值作为会话的唯一标识符写回它;如果该网站在两个不同的浏览器窗口中同时执行此操作两次,它可能会最终使用相同的“唯一”标识符来标识两个会话,这可能会产生灾难性的影响。


document.lastModified

文档/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”,以用户的本地时区表示。

如果最后修改日期未知,则返回当前时间。

lastModified 属性在获取时,必须返回Document的源文件的最后修改日期和时间,以用户的本地时区表示,格式如下

  1. 日期的月份部分。

  2. 一个 U+002F 斜杠字符(/)。

  3. 日期的日期部分。

  4. 一个 U+002F 斜杠字符(/)。

  5. 日期的年份部分。

  6. 一个 U+0020 空格字符。

  7. 时间的时分部分。

  8. 一个 U+003A 冒号字符(:).

  9. 时间的分钟部分。

  10. 一个 U+003A 冒号字符(:).

  11. 时间的秒数部分。

上述所有数字部分,除了年份,都必须用两个ASCII数字表示以十进制表示的数字,必要时用零填充。年份必须用最短的四个或更多ASCII数字表示以十进制表示的数字,必要时用零填充。

Document的源文件的最后修改日期和时间必须从使用的网络协议的相关特征中获取,例如从文档的HTTP`Last-Modified`标头值中获取,或者从本地文件的系统文件中的元数据中获取。如果最后修改日期和时间未知,则该属性必须以上述格式返回当前日期和时间。

3.1.4 报告文档加载状态

document.readyState

Document正在加载时返回“loading”,当它完成解析但仍在加载子资源时返回“interactive”,当它已加载完毕时返回“complete”。

当此值更改时,readystatechange事件在Document对象上触发。

DOMContentLoaded事件在从“interactive”过渡到“complete”之前触发,此时所有子资源(除了asyncscript元素)都已加载完毕。

文档/readyState

所有当前引擎中都支持。

Firefox3.6+Safari1+Chrome1+
Opera11+Edge79+
Edge (Legacy)12+Internet Explorer11
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android11+

每个Document都有一个当前文档就绪状态,它是一个字符串,最初为“complete”。

对于通过创建和初始化Document对象算法创建的Document对象,这将立即重置为“loading”,然后任何脚本都可以观察document.readyState的值。此默认值适用于其他情况,例如初始about:blank Document或没有浏览上下文Document

readyState getter步骤是返回this当前文档就绪状态

更新当前文档就绪状态,对于Document document,将其设置为readinessValue

  1. 如果document当前文档就绪状态等于readinessValue,则返回。

  2. document当前文档就绪状态设置为readinessValue

  3. 如果document与一个HTML解析器相关联,则

    1. now为给定document相关全局对象当前高分辨率时间

    2. 如果readinessValue为“complete”,且document加载计时信息DOM完成时间为0,则将document加载计时信息DOM完成时间设置为now

    3. 否则,如果readinessValue为“interactive”,且document加载计时信息DOM交互时间为0,则将document加载计时信息DOM交互时间设置为now

  4. 触发事件,名为 readystatechange,在 document 上。


如果一个 文档 与一个尚未 停止中止HTML 解析器XML 解析器 关联,则该 文档 被认为具有 活动解析器


一个 文档 拥有一个 文档加载时间信息 加载时间信息

一个 文档 拥有一个 文档卸载时间信息 先前文档卸载时间

一个 文档 拥有一个布尔值 通过跨域重定向创建,初始值为 false。

The 文档加载时间信息 结构体 包含以下

导航开始时间 (默认值为 0)
一个数字
DOM 交互时间 (默认值为 0)
DOM 内容加载事件开始时间 (默认值为 0)
DOM 内容加载事件结束时间 (默认值为 0)
DOM 完成时间 (默认值为 0)
加载事件开始时间 (默认值为 0)
加载事件结束时间 (默认值为 0)
DOMHighResTimeStamp

The 文档卸载时间信息 结构体 包含以下

卸载事件开始时间 (默认值为 0)
卸载事件结束时间 (默认值为 0)
DOMHighResTimeStamp

3.1.5 渲染阻塞机制

每个 文档 都有一个 渲染阻塞元素集合,一个 集合,最初为空集。

如果一个 文档 document内容类型 为 "text/html" 且 documentbody 元素 为 null,则该 文档 允许添加渲染阻塞元素

如果一个 文档 document 满足以下两个条件,则该 文档 被认为是 渲染阻塞的

如果一个元素 el节点文档 document渲染阻塞的,且 el 位于 document渲染阻塞元素集合 中,则该元素 el 被认为是 渲染阻塞的

要在元素 el阻塞渲染

  1. documentel节点文档

  2. 如果 document 允许添加渲染阻塞元素,则将 el 追加document渲染阻塞元素集合 中。

要在元素 el解除渲染阻塞

  1. documentel节点文档

  2. document渲染阻塞元素集合移除 el

每当 渲染阻塞的 元素 el 变成浏览上下文断开连接的,或 el阻塞属性 的值更改,导致 el 不再是 潜在的渲染阻塞元素,则在 el解除渲染阻塞

3.1.6 DOM 树访问器

文档的 html 元素 是其 文档元素,如果它是 html 元素,否则为 null。


document.head

Document/head

所有当前引擎中都支持。

Firefox4+Safari5+Chrome4+
Opera11+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS4+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+

返回 head 元素

head 元素 是文档中第一个作为 html 元素 子节点的 head 元素,如果有的话,否则为 null。

The head attribute,在获取时,必须返回 head 元素 (一个 head 元素或 null)。


document.title [ = value ]

返回文档的标题,对于 HTML 来说,由 title 元素 给出,而对于 SVG 来说,由 SVG title 元素给出。

可以设置,以更新文档的标题。如果没有合适的元素可更新,则新值会被忽略。

title 元素 是文档中第一个 title 元素 (按 树序),如果有的话,否则为 null。

Document/title

所有当前引擎中都支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

The title attribute 必须,在获取时,运行以下算法

  1. 如果 文档元素 是一个 SVG svg 元素,则令 value 为第一个作为 文档元素 子节点的 SVG title 元素的 子节点文本内容

  2. 否则,令 valuetitle 元素子节点文本内容,或空字符串,如果 title 元素 为 null。

  3. value剥离和合并 ASCII 空白字符

  4. 返回 value

在设置时,必须运行与以下列表中第一个匹配条件相对应的步骤

如果 文档元素 是一个 SVG svg 元素
  1. 如果存在一个作为 文档元素 子节点的 SVG title 元素,则令 element 为第一个这样的元素。

  2. 否则

    1. element创建元素 的结果,该结果由 文档元素节点文档titleSVG 命名空间 给出。

    2. element 插入到 文档元素第一个子节点 位置。

  3. element使用给定值替换所有字符串

如果 文档元素 位于 HTML 命名空间
  1. 如果 title 元素 为空,且 head 元素 为空,则返回。

  2. 如果 title 元素 不为空,则将变量 element 设置为 title 元素

  3. 否则

    1. 将变量 element 设置为 创建元素 的结果,该结果基于 文档元素节点文档titleHTML 命名空间

    2. 追加 elementhead 元素

  4. 字符串替换所有,在 element 中使用给定的值。

否则

什么也不做。


document.body [ = value ]

Document/body

所有当前引擎中都支持。

Firefox60+Safari1+Chrome1+
Opera9.6+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

返回 主体元素

可以设置,以替换 主体元素

如果新值不是 bodyframeset 元素,则会抛出 "HierarchyRequestError" DOMException

主体元素 是文档中 html 元素 的子元素,该子元素是 body 元素或 frameset 元素中的第一个,如果不存在这样的元素,则为 null。

body 属性在获取时必须返回文档的 主体元素body 元素、frameset 元素或 null)。在设置时,必须运行以下算法

  1. 如果新值不是 bodyframeset 元素,则抛出 "HierarchyRequestError" DOMException
  2. 否则,如果新值与 主体元素 相同,则返回。
  3. 否则,如果 主体元素 不为空,则 替换 主体元素 为新值,并在 主体元素 的父元素中返回。
  4. 否则,如果没有 文档元素,则抛出 "HierarchyRequestError" DOMException
  5. 否则,主体元素 为空,但存在 文档元素追加 新值到 文档元素

body 获取器返回的值并不总是传递给设置器的值。

在此示例中,设置器成功插入了 body 元素(尽管这与标准不符,因为 SVG 不允许将 body 作为 SVG svg 的子元素)。但是获取器将返回 null,因为文档元素不是 html

<svg xmlns="http://www.w3.org/2000/svg">
 <script>
  document.body = document.createElementNS("http://www.w3.org/1999/xhtml", "body");
  console.assert(document.body === null);
 </script>
</svg>

document.images

Document/images

所有当前引擎中都支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回一个 HTMLCollection,该集合包含 Document 中的 img 元素。

document.embeds

Document/embeds

所有当前引擎中都支持。

Firefox1+Safari10.1+Chrome64+
Opera51+Edge79+
Edge (Legacy)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 (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS10.3+Chrome Android?WebView Android?Samsung Internet?Opera Android47+

返回一个 HTMLCollection,该集合包含 Document 中的 embed 元素。

document.links

Document/links

所有当前引擎中都支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回一个 HTMLCollection,该集合包含 Document 中的 aarea 元素,这些元素具有 href 属性。

document.forms

Document/forms

所有当前引擎中都支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回一个 HTMLCollection,该集合包含 Document 中的 form 元素。

document.scripts

Document/scripts

所有当前引擎中都支持。

Firefox9+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer4+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

返回一个 HTMLCollection,该集合包含 Document 中的 script 元素。

images 属性必须返回一个以 Document 节点为根的 HTMLCollection,其过滤器只匹配 img 元素。

embeds 属性必须返回一个以 Document 节点为根的 HTMLCollection,其过滤器只匹配 embed 元素。

plugins 属性必须返回与 embeds 属性返回的相同对象。

links 属性必须返回一个以 Document 节点为根的 HTMLCollection,其过滤器只匹配具有 href 属性的 a 元素和具有 href 属性的 area 元素。

forms 属性必须返回一个以 Document 节点为根的 HTMLCollection,其过滤器只匹配 form 元素。

scripts 属性必须返回一个以 Document 节点为根的 HTMLCollection,其过滤器只匹配 script 元素。


collection = document.getElementsByName(name)

Document/getElementsByName

所有当前引擎中都支持。

Firefox1+Safari1+Chrome1+
Opera5+Edge79+
Edge (Legacy)12+Internet Explorer5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

返回一个 NodeList,该集合包含 Document 中的元素,这些元素的 name 属性值与 name 相同。

The getElementsByName(elementName) 方法的步骤是返回一个包含该文档中所有具有name属性(其值与elementName参数相同)的HTML 元素实时NodeList,按照树序排列。当在Document 对象上再次调用该方法,并使用相同的参数时,用户代理可能会返回与之前调用返回的对象相同的结果。在其他情况下,必须返回一个新的NodeList 对象。


document.currentScript

Document/currentScript

所有当前引擎中都支持。

Firefox4+Safari8+Chrome29+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

返回当前正在执行的script 元素或SVG script 元素,前提是该元素表示经典脚本。在重新进入脚本执行的情况下,返回最近开始执行且尚未完成执行的脚本。

如果Document 当前没有执行scriptSVG script 元素(例如,因为正在运行的脚本是事件处理程序或超时),或者当前正在执行的scriptSVG script 元素表示模块脚本,则返回 null。

在获取currentScript 属性时,必须返回最近一次设置的值。当创建Document 时,currentScript 必须初始化为 null。

此 API 在实现者和标准社区中已不再流行,因为它全局暴露了scriptSVG script 元素。因此,它在较新的上下文中不可用,例如在运行模块脚本或在影子树中运行脚本时。我们正在研究一种新的解决方案,用于在这些上下文中识别正在运行的脚本,该解决方案不会使其全局可用:请参阅问题 #1013


The Document 接口支持命名属性。在任何时刻,Document 对象document支持的属性名称包括以下内容,按照树序排列(根据贡献它们的元素,忽略后面的重复项),并且当同一个元素贡献了两个值时,来自id 属性的值在来自name 属性的值之前

确定Document 的命名属性name的值,用户代理必须使用以下步骤返回获得的值

  1. elements 为具有名称name命名元素列表,这些元素位于文档树中,其Document

    至少将存在一个这样的元素,因为否则算法将不会被Web IDL 调用

  2. 如果elements 只有一个元素,并且该元素是一个iframe 元素,并且该iframe 元素的内容可导航 不为 null,则返回元素的内容可导航活动WindowProxy

  3. 否则,如果elements 只有一个元素,则返回该元素。

  4. 否则,返回一个HTMLCollection,其根节点为Document 节点,其过滤器仅匹配具有名称name命名元素

命名元素 的名称为name,为了上述算法的目的,这些元素是:

embedobject 元素被称为暴露的,如果它没有暴露的object 祖先,并且对于object 元素,额外地,要么没有显示它的后备内容,要么没有objectembed 子孙。


The dir 属性在Document 接口上定义,与dir 内容属性一起定义。

3.2 元素

3.2.1 语义

HTML 中的元素、属性和属性值被定义(由本规范定义)为具有某些含义(语义)。例如,ol 元素表示一个有序列表,lang 属性表示内容的语言。

这些定义允许 HTML 处理器(例如 Web 浏览器或搜索引擎)在作者可能没有考虑到的各种情况下呈现和使用文档和应用程序。

作为简单的例子,考虑一个由只考虑桌面计算机 Web 浏览器的作者编写的网页

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>My Page</title>
 </head>
 <body>
  <h1>Welcome to my page</h1>
  <p>I like cars and lorries and have a big Jeep!</p>
  <h2>Where I live</h2>
  <p>I live in a small hut on a mountain!</p>
 </body>
</html>

由于 HTML 传达的是含义,而不是呈现方式,因此同一个页面也可以被手机上的小型浏览器使用,而无需对页面进行任何更改。例如,标题在桌面上的显示方式是大字体,而手机上的浏览器可能会使用相同的字体大小来显示整个页面,但标题会以粗体显示。

但这不仅仅是屏幕尺寸的差异:同一个页面也可以被使用语音合成技术的盲人用户使用,该技术不是在屏幕上显示页面,而是将页面读给用户,例如使用耳机。 语音浏览器可能不会使用大型文本作为标题,而是使用不同的音量或更慢的声音。

而且不止这些。 由于浏览器知道页面哪些部分是标题,它们可以创建用户用来快速浏览文档的文档大纲,使用按键进行“跳转到下一个标题”或“跳转到上一个标题”。 这些功能在语音浏览器中尤其常见,在语音浏览器中,用户否则会发现快速浏览页面非常困难。

即使在浏览器之外,软件也可以利用这些信息。 搜索引擎可以使用标题更有效地索引页面,或从搜索结果中提供到页面子部分的快速链接。 工具可以使用标题来创建目录(实际上,本规范的目录就是这么生成的)。

这个例子集中在标题上,但同样的原则适用于 HTML 中的所有语义。

作者不得将元素、属性或属性值用于与其预期语义目的不一致的目的,因为这样做会阻止软件正确处理页面。

例如,以下片段旨在表示公司网站的标题,但它不符合规范,因为第二行并非旨在作为子部分的标题,而仅仅是副标题或副标题(同一部分的从属标题)。

<body>
 <h1>ACME Corporation</h1>
 <h2>The leaders in arbitrary fast delivery since 1920</h2>
 ...

可以使用 hgroup 元素处理这类情况。

<body>
 <hgroup>
  <h1>ACME Corporation</h1>
  <p>The leaders in arbitrary fast delivery since 1920</p>
 </hgroup>
 ...

下一个示例中的文档也同样不符合规范,尽管从语法上来说是正确的,因为放置在单元格中的数据明显不是表格数据,并且 cite 元素被误用了。

<!DOCTYPE HTML>
<html lang="en-GB">
 <head> <title> Demonstration </title> </head>
 <body>
  <table>
   <tr> <td> My favourite animal is the cat. </td> </tr>
   <tr>
    <td><a href="https://example.org/~ernest/"><cite>Ernest</cite></a>,
     in an essay from 1992
    </td>
   </tr>
  </table>
 </body>
</html>

这会导致依赖这些语义的软件失败:例如,允许盲人用户浏览文档中表格的语音浏览器会将上面的引文报告为表格,使用户感到困惑; 同样,从页面中提取作品标题的工具会提取“Ernest”作为作品的标题,即使它实际上是一个人的名字,而不是标题。

该文档的更正版本可能是

<!DOCTYPE HTML>
<html lang="en-GB">
 <head> <title> Demonstration </title> </head>
 <body>
  <blockquote>
   <p> My favourite animal is the cat. </p>
  </blockquote>
  <p><a href="https://example.org/~ernest/">Ernest</a>,
   in an essay from 1992
  </p>
 </body>
</html>

作者不得使用本规范或 其他适用规范 不允许的元素、属性或属性值,因为这样做会使该语言在将来难以扩展。

在下一个示例中,存在一个不符合规范的属性值(“carpet”)和一个不符合规范的属性(“texture”),该属性在本规范中不允许。

<label>Carpet: <input type="carpet" name="c" texture="deep pile"></label>

下面是标记它的另一种正确方法。

<label>Carpet: <input type="text" class="carpet" name="c" data-texture="deep pile"></label>

节点文档浏览上下文 为 null 的 DOM 节点,除了 HTML 语法 要求和 XML 语法 要求之外,无需满足所有文档一致性要求。

特别是,template 元素的 模板内容节点文档浏览上下文 为 null。 例如,内容模型 要求和属性值微语法要求不适用于 template 元素的 模板内容。 在此示例中,img 元素具有在 template 元素之外无效的占位符属性值。

<template>
 <article>
  <img src="{{src}}" alt="{{alt}}">
  <h1></h1>
 </article>
</template>

但是,如果上面的标记省略了 </h1> 结束标签,则会违反 HTML 语法,因此会被一致性检查器标记为错误。

通过脚本和其他机制,属性的值、文本,甚至文档的整个结构都可能在用户代理处理文档时动态更改。 文档在某一时刻的语义是指该时刻文档状态所表示的语义,因此文档的语义可能会随着时间推移而改变。 用户代理必须在这种情况发生时更新其对文档的呈现。

HTML 有一个 progress 元素,用于描述进度条。 如果它的“value”属性被脚本动态更新,则 UA 会更新渲染以显示进度发生变化。

3.2.2 DOM 中的元素

表示 DOM 中 HTML 元素 的节点必须实现并向脚本公开本规范相关部分中为其列出的接口。 这包括 HTML 元素XML 文档 中,即使这些文档在另一个上下文中(例如,在 XSLT 转换中)。

DOM 中的元素 表示 事物; 也就是说,它们具有内在的 *意义*,也称为语义。

例如,ol 元素表示有序列表。

元素可以以某种方式被 引用(提及),无论是显式还是隐式。 DOM 中元素可以显式引用的方法之一是,为该元素提供一个 id 属性,然后创建一个 超链接,该超链接的 id 属性值作为 片段 用于 超链接href 属性值。 但是,超链接并非引用所必需; 任何提及该元素的方式都足以。

请考虑以下 figure 元素,该元素被赋予了一个 id 属性。

<figure id="module-script-graph">
  <img src="module-script-graph.svg"
       alt="Module A depends on module B, which depends
            on modules C and D.">
  <figcaption>Figure 27: a simple module graph</figcaption>
</figure>

可以使用 a 元素创建基于 超链接引用,如下所示。

As we can see in <a href="#module-script-graph">figure 27</a>, ...

但是,还有很多其他方法可以 引用 figure 元素,例如

基本接口是所有 HTML 元素 接口继承的接口,对于没有额外要求的元素,必须使用该接口,它是 HTMLElement 接口。

HTMLElement

所有当前引擎中都支持。

Firefox1+Safari1+Chrome1+
Opera8+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android1+Samsung Internet?Opera Android10.1+

HTMLUnknownElement

所有当前引擎中都支持。

Firefox1+Safari6+Chrome15+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
[Exposed=Window]
interface HTMLElement : Element {
  [HTMLConstructor] constructor();

  // metadata attributes
  [CEReactions] attribute DOMString title;
  [CEReactions] attribute DOMString lang;
  [CEReactions] attribute boolean translate;
  [CEReactions] attribute DOMString dir;

  // user interaction
  [CEReactions] attribute (boolean or unrestricted double or DOMString)? hidden;
  [CEReactions] attribute boolean inert;
  undefined click();
  [CEReactions] attribute DOMString accessKey;
  readonly attribute DOMString accessKeyLabel;
  [CEReactions] attribute boolean draggable;
  [CEReactions] attribute boolean spellcheck;
  [CEReactions] attribute DOMString writingSuggestions;
  [CEReactions] attribute DOMString autocapitalize;
  [CEReactions] attribute boolean autocorrect;

  [CEReactions] attribute [LegacyNullToEmptyString] DOMString innerText;
  [CEReactions] attribute [LegacyNullToEmptyString] DOMString outerText;

  ElementInternals attachInternals();

  // The popover API
  undefined showPopover();
  undefined hidePopover();
  boolean togglePopover(optional boolean force);
  [CEReactions] attribute DOMString? popover;
};

HTMLElement includes GlobalEventHandlers;
HTMLElement includes ElementContentEditable;
HTMLElement includes HTMLOrSVGElement;

[Exposed=Window]
interface HTMLUnknownElement : HTMLElement {
  // Note: intentionally no [HTMLConstructor]
};

HTMLElement 接口包含与许多不同功能相关的属性和方法,因此,本接口的成员在本规范的各个不同部分中进行了描述。


HTML 命名空间 中,名称为 name 的元素的 元素接口 的确定方法如下。

  1. 如果 nameappletbgsoundblinkisindexkeygenmulticolnextidspacer,则返回 HTMLUnknownElement

  2. 如果 nameacronymbasefontbigcenternobrnoembednoframesplaintextrbrtcstrikett,则返回 HTMLElement

  3. 如果 namelistingxmp,则返回 HTMLPreElement

  4. 否则,如果本规范定义了适合于对应于局部名称 name元素类型 的接口,则返回该接口。

  5. 如果 其他适用规范name 定义了合适的接口,则返回它们定义的接口。

  6. 如果 name 是一个 有效的自定义元素名称,则返回 HTMLElement

  7. 返回 HTMLUnknownElement

有效的自定义元素名称的情况下,使用HTMLElement而不是HTMLUnknownElement是为了确保任何潜在的未来升级只导致元素原型链的线性过渡,从HTMLElement到子类,而不是横向过渡,从HTMLUnknownElement到不相关的子类。

HTML 和 SVG 元素共享的功能使用HTMLOrSVGElement 接口混合:[SVG]

interface mixin HTMLOrSVGElement {
  [SameObject] readonly attribute DOMStringMap dataset;
  attribute DOMString nonce; // intentionally no [CEReactions]

  [CEReactions] attribute boolean autofocus;
  [CEReactions] attribute long tabIndex;
  undefined focus(optional FocusOptions options = {});
  undefined blur();
};

一个既不是 HTML 也不是 SVG 元素的示例,如下创建:

const el = document.createElementNS("some namespace", "example");
console.assert(el.constructor === Element);

3.2.3 HTML 元素构造函数

为了支持自定义元素功能,所有 HTML 元素都具有特殊的构造函数行为。这通过[HTMLConstructor] IDL 扩展属性指示。它表明给定接口的接口对象在调用时将具有特定的行为,如下面的详细定义。

[HTMLConstructor]扩展属性必须不带参数,并且只能出现在构造函数操作上。它必须在构造函数操作上只出现一次,并且接口必须只包含单个带注释的构造函数操作,而不能包含其他操作。带注释的构造函数操作必须声明为不带参数。

使用带注释的[HTMLConstructor]扩展属性的构造函数操作声明的接口具有以下重写构造函数步骤

  1. registry当前全局对象CustomElementRegistry对象。

  2. 如果NewTarget 等于活动函数对象,则抛出TypeError

    这可能发生在使用元素接口作为其构造函数定义自定义元素时。

    customElements.define("bad-1", HTMLButtonElement);
    new HTMLButtonElement();          // (1)
    document.createElement("bad-1");  // (2)

    在这种情况下,在执行HTMLButtonElement(显式地,如(1),或隐式地,如(2))期间,活动函数对象NewTarget 都是HTMLButtonElement。如果此检查不存在,则可以创建HTMLButtonElement 的实例,其本地名称为 bad-1

  3. definitionregistry构造函数 等于NewTarget 的条目。如果没有这样的定义,则抛出TypeError

    由于registry 中不可能有构造函数 为 undefined 的条目,因此此步骤还阻止 HTML 元素构造函数被调用为函数(因为在这种情况下NewTarget 将为 undefined)。

  4. is value 为 null。

  5. 如果definition本地名称 等于definition名称(即,definition 是用于自治自定义元素),则

    1. 如果活动函数对象 不是HTMLElement,则抛出TypeError

      这可能发生在自定义元素被定义为不扩展任何本地名称,但继承自非HTMLElement 类时。

      customElements.define("bad-2", class Bad2 extends HTMLParagraphElement {});

      在这种情况下,在构造 Bad2 的实例时发生的(隐式)super() 调用期间,活动函数对象HTMLParagraphElement,而不是HTMLElement

  6. 否则(即,如果definition 是用于自定义内置元素

    1. valid local names 为在本规范或其他适用规范中定义的元素的本地名称列表,这些元素使用活动函数对象 作为其元素接口

    2. 如果valid local names 不包含definition本地名称,则抛出TypeError

      这可能发生在自定义元素被定义为扩展给定的本地名称,但继承自错误的类时。

      customElements.define("bad-3", class Bad3 extends HTMLQuoteElement {}, { extends: "p" });

      在这种情况下,在构造 Bad3 的实例时发生的(隐式)super() 调用期间,valid local names 是包含qblockquote 的列表,但definition本地名称p,该名称不在该列表中。

    3. is value 设置为definition名称

  7. 如果definition构造堆栈 为空,则

    1. element内部创建一个实现接口的新对象 的结果,该接口对应于活动函数对象,给定当前领域NewTarget

    2. element节点文档 设置为当前全局对象关联的 Document

    3. element命名空间 设置为HTML 命名空间

    4. element命名空间前缀 设置为 null。

    5. element本地名称 设置为definition本地名称

    6. element自定义元素状态 设置为 "custom"。

    7. element自定义元素定义 设置为definition

    8. elementis 设置为is value

    9. 返回element

    这发生在作者脚本直接构造一个新的自定义元素时,例如通过 new MyCustomElement()

  8. prototype 为 ? Get(NewTarget, "prototype")。

  9. 如果Type(prototype) 不是 Object,则

    1. realm 为 ? GetFunctionRealm(NewTarget)。

    2. prototype 设置为realm接口原型对象,其接口与活动函数对象 的接口相同。

    活动函数对象 的领域可能不是realm,因此我们使用“跨领域的相同接口”这一更通用的概念;我们不是寻找接口对象 的相等性。这种回退行为,包括使用NewTarget 的领域并在那里查找适当的原型,旨在与 JavaScript 内置函数和 Web IDL 的内部创建一个实现接口的新对象 算法的类似行为相匹配。

  10. elementdefinition构造堆栈 中的最后一个条目。

  11. 如果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();
      }
    }
  12. 执行?element.[[SetPrototypeOf]](prototype).

  13. definition构造栈中的最后一个条目替换为已构造标记

  14. 返回element

    升级自定义元素时,通常会到达此步骤;返回现有元素,以便自定义元素构造函数内部的super()调用将该现有元素分配给this


除了由[HTMLConstructor]隐含的构造函数行为外,一些元素还具有命名构造函数(实际上是具有修改后的prototype属性的工厂函数)。

HTML 元素的命名构造函数也可以在定义自定义元素构造函数时的extends子句中使用。

class AutoEmbiggenedImage extends Image {
  constructor(width, height) {
    super(width * 10, height * 10);
  }
}

customElements.define("auto-embiggened", AutoEmbiggenedImage, { extends: "img" });

const image = new AutoEmbiggenedImage(15, 20);
console.assert(image.width === 150);
console.assert(image.height === 200);

3.2.4 元素定义

本规范中的每个元素都有一个定义,其中包含以下信息。

类别

元素所属的类别列表。这些用于定义每个元素的内容模型

可以使用此元素的上下文

对元素可以使用位置的非规范性描述。此信息与允许此元素作为子元素的元素的内容模型冗余,仅作为方便提供。

为简单起见,仅列出最具体的期望。

例如,所有短语内容都是流内容。因此,作为短语内容的元素将仅列为“在预期短语内容的地方”,因为这是更具体的期望。任何期望流内容的地方也期望短语内容,因此也满足此期望。

内容模型

对元素必须包含为子元素和后代的内容的规范性描述。

在 text/html 中的标签省略

对在text/html语法中是否可以省略开始结束标签的非规范性描述。此信息与可选标签部分中给出的规范性要求冗余,仅在元素定义中作为方便提供。

内容属性

对可能在元素上指定的属性(除非在其他地方禁止)的规范性列表,以及对这些属性的非规范性描述。(破折号左侧的内容是规范性的,破折号右侧的内容不是。)

辅助功能注意事项

对于作者:ARIA rolearia-* 属性的使用符合性要求在HTML 中的 ARIA 中定义。[ARIA] [ARIAHTML]

对于实现者:实现辅助功能 API 语义的用户代理要求在HTML 辅助功能 API 映射 中定义。[HTMLAAM]

DOM 接口

对这些元素必须实现的 DOM 接口的规范性定义。

然后是关于元素表示的内容的描述,以及可能适用于作者和实现的任何其他规范性符合性标准。有时还包括示例。

3.2.4.1 属性

属性值是一个字符串。除非另有说明,否则HTML 元素上的属性值可以是任何字符串值,包括空字符串,并且对在这些属性值中可以指定哪些文本没有限制。

3.2.5 内容模型

本规范中定义的每个元素都有一个内容模型:对元素预期内容的描述。HTML 元素必须具有与元素内容模型中描述的要求相匹配的内容。内容是元素在 DOM 中的子元素。

ASCII 空格始终允许在元素之间。用户代理在源标记中用元素之间的这些字符表示为 DOM 中的文本节点。空的文本节点和仅包含这些字符序列的文本节点被视为元素间空格

元素间空格、注释节点和处理指令节点在确定元素内容是否与元素内容模型匹配时必须被忽略,并且在遵循定义文档和元素语义的算法时必须被忽略。

因此,如果元素 A 和元素 B 具有相同的父节点,并且它们之间没有其他元素节点或文本节点(除元素间空格以外),则称元素 A 位于元素 B 之前或之后。类似地,如果元素不包含除元素间空格、注释节点和处理指令节点之外的任何其他节点,则该节点是元素的唯一子节点

作者不得在任何地方使用HTML 元素,除非在为每个元素明确允许的情况下,或在其他规范明确要求的情况下。对于 XML 复合文档,这些上下文可能在来自其他命名空间的元素内部,如果这些元素被定义为提供相关的上下文。

Atom 联合格式 定义了一个content元素。当其type属性的值为xhtml时,Atom 联合格式 要求它包含一个 HTML div元素。因此,即使本规范没有明确规范性地说明这一点,div元素在此上下文中是允许的。[ATOM]

此外,HTML 元素 可以是孤儿节点(即没有父节点)。

例如,创建一个td元素并将它存储在脚本中的全局变量中是符合规范的,即使td元素通常只应该在tr元素内部使用。

var data = {
  name: "Banana",
  cell: document.createElement('td'),
};
3.2.5.1 “无”内容模型

当元素的内容模型为时,该元素不得包含任何文本节点(除元素间空格以外)和任何元素节点。

出于方便,大多数内容模型为“无”的 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:[email protected]"/>
    <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 空白。 本规范根据其确切上下文,对Text 节点和属性值的精确值包含额外的约束。

3.2.5.2.6 嵌入内容

嵌入内容 是将另一个资源导入文档,或者将来自另一个词汇表的内容插入文档的内容。

来自HTML 命名空间 以外的命名空间并且传递内容而不是元数据的元素,对于本规范中定义的内容模型而言是嵌入内容。 (例如,MathML 或 SVG)。

一些嵌入内容元素可以具有回退内容:当无法使用外部资源时 (例如,由于它属于不支持的格式) 要使用的内容。 元素定义说明了回退 (如果有) 是什么。

3.2.5.2.7 交互式内容

交互式内容 是专门用于用户交互的内容。

3.2.5.2.8 可感知内容

作为一般规则,其内容模型允许任何流内容短语内容 的元素应在其内容 中至少有一个节点是可感知内容 并且没有指定hidden 属性。

可感知内容 通过提供一些后代非空文本,或者用户可以听到的内容 (audio 元素) 或观看的内容 (videoimgcanvas 元素) 或以其他方式交互的内容 (例如,交互式表单控件),使元素非空。

但是,此要求不是强制性要求,因为在许多情况下,元素可以合法地为空,例如,当它用作占位符时,该占位符稍后将由脚本填充,或者当元素是模板的一部分时,并且在大多数页面上会填充,但在某些页面上不相关。

鼓励一致性检查器为作者提供一种机制来查找未能满足此要求的元素,作为一种创作帮助。

以下元素是可感知内容

3.2.5.2.9 脚本支持元素

脚本支持元素 是那些本身不表示 任何内容 (即它们没有渲染) 的元素,但用于支持脚本,例如,为用户提供功能。

以下元素是脚本支持元素

3.2.5.3 透明内容模型

一些元素被描述为透明的;它们在内容模型的描述中包含“透明”。 透明 元素的内容模型源自其父元素的内容模型:在“透明”内容模型部分中需要的元素与父元素的内容模型部分中需要的元素相同,透明元素在其中找到自己。

例如,ins 元素在ruby 元素内部不能包含rt 元素,因为ruby 元素的内容模型允许ins 元素的部分是允许短语内容 的部分,而rt 元素不是短语内容

在一些情况下,当透明元素相互嵌套时,需要迭代地应用该过程。

考虑以下标记片段

<p><object><param><ins><map><a href="/">Apples</a></map></ins></object></p>

要检查 "Apples" 是否允许在 a 元素中使用,需要检查内容模型。 a 元素的内容模型是透明的,map 元素的内容模型也是透明的,ins 元素的内容模型也是透明的,object 元素中包含 ins 元素的部分也是透明的。 object 元素位于 p 元素中,其内容模型为 短语内容。 因此,允许使用 "Apples",因为文本属于短语内容。

当一个透明元素没有父元素时,其内容模型中 "透明" 部分应被视为接受任何 流内容

3.2.5.4 段落

本节定义的术语 段落 不仅用于定义 p 元素。 此处定义的 段落 概念用于描述如何解释文档。 p 元素只是标记 段落 的几种方式之一。

一个 段落 通常是一段 短语内容,构成一段文本,包含一个或多个句子,讨论特定主题,如同在排版中一样,但也可用作更一般的主题分组。 例如,地址也是一个段落,表单的一部分、副标题或诗歌中的一节也是段落。

在以下示例中,一个部分包含两个段落。 此外还有一个标题,包含非段落的短语内容。 请注意,注释和 元素间空格 不构成段落。

<section>
  <h2>Example of paragraphs</h2>
  This is the <em>first</em> paragraph in this example.
  <p>This is the second.</p>
  <!-- This is not a paragraph. -->
</section>

流内容 中,段落的定义取决于文档在没有 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 为 DOM 的视图,其中所有 ainsdelmap 元素都被其 内容 替换。 然后,在 view 中,对于每个在接受除 短语内容 之外的内容以及 短语内容 的元素中,由兄弟 短语内容 节点组成的、未被其他类型内容打断的运行,令 first 为运行的第一个节点,令 last 为运行的最后一个节点。 对于每个由至少一个既不是 嵌入内容 也不是 元素间空格 的节点组成的运行,在原始 DOM 中,从 first 之前的立即位置到 last 之后的立即位置,存在一个段落。(因此,段落可以跨越 ainsdelmap 元素。)

一致性检查器可能会向作者发出警告,提醒他们存在段落相互重叠的情况(这种情况可能发生在 objectvideoaudiocanvas 元素中,以及通过允许进一步嵌入 HTML 的其他命名空间中的元素间接发生,例如 SVG svgMathML math)。

一个 段落 也可由 p 元素显式形成。

当没有其他内容可以将段落相互分隔时,p 元素可用于包装各个段落。

在以下示例中,链接跨越了第一个段落的一半、两个段落之间标题的全部内容以及第二个段落的一半。 它跨越了段落和标题。

<header>
 Welcome!
 <a href="about.html">
  This is home of...
  <h1>The Falcons!</h1>
  The Lockheed Martin multirole jet fighter aircraft!
 </a>
 This page discusses the F-16 Fighting Falcon's innermost secrets.
</header>

这是另一种标记方式,这次显式地显示了段落,并将一个链接元素拆分为三个

<header>
 <p>Welcome! <a href="about.html">This is home of...</a></p>
 <h1><a href="about.html">The Falcons!</a></h1>
 <p><a href="about.html">The Lockheed Martin multirole jet
 fighter aircraft!</a> This page discusses the F-16 Fighting
 Falcon's innermost secrets.</p>
</header>

当使用某些定义回退内容的元素时,段落可能会重叠。 例如,在以下部分

<section>
 <h2>My Cats</h2>
 You can play with my cat simulator.
 <object data="cats.sim">
  To see the cat simulator, use one of the following links:
  <ul>
   <li><a href="cats.sim">Download simulator file</a>
   <li><a href="https://sims.example.com/watch?v=LYds5xY4INU">Use online simulator</a>
  </ul>
  Alternatively, upgrade to the Mellblom Browser.
 </object>
 I'm quite proud of it.
</section>

有五个段落

  1. 包含 "你可以玩我的猫模拟器。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 元素 的属性。 当本规范提到元素具有这些属性时,不定义为具有这些属性的命名空间中的元素不得被视为具有这些属性的元素。

例如,在以下 XML 片段中,"bogus" 元素没有本规范中定义的 dir 属性,尽管它具有一个名称为 "dir" 的属性。 因此,最内层 span 元素的 方向性 为 'rtl',它从 div 元素继承而来,并通过 "bogus" 元素间接传递。

<div xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
 <bogus xmlns="https://example.net/ns" dir="ltr">
  <span xmlns="http://www.w3.org/1999/xhtml">
  </span>
 </bogus>
</div>

Global_attributes/slot

所有当前引擎中都支持。

Firefox63+Safari10+Chrome53+
Opera?Edge79+
Edge (Legacy)NoInternet Explorer?
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

DOM 定义了用户代理对任何命名空间中任何元素的 classidslot 属性的要求。 [DOM]

可以在所有 HTML 元素 上指定 classidslot 属性。

当在 HTML 元素 上指定时,class 属性的值必须是一个 空格分隔的标记集,表示该元素所属的各种类。

为元素分配类会影响 CSS 中的选择器匹配、DOM 中的 getElementsByClassName() 方法以及其他此类功能。

对作者在 class 属性中可以使用哪些标记没有额外的限制,但建议作者使用描述内容性质的值,而不是描述内容期望呈现方式的值。

当在 HTML 元素 上指定时,id 属性值必须在元素 中的所有 ID 中是唯一的,并且必须包含至少一个字符。 该值不能包含任何 ASCII 空格

id 属性指定其元素的 唯一标识符 (ID)

对 ID 可以采用什么形式没有其他限制;特别地,ID 可以仅由数字组成、以数字开头、以下划线开头、仅由标点符号组成等。

元素的 唯一标识符 可用于多种目的,最重要的是用作使用 片段 链接到文档特定部分的方法、用作在脚本编写时定位元素的方法,以及用作从 CSS 样式化特定元素的方法。

标识符是不透明字符串。不应从 id 属性的值中推导出特定含义。

对于 slot 属性,没有针对 HTML 元素 的特定一致性要求。

使用 slot 属性向元素 分配槽位:具有 slot 属性的元素被 分配 给由 slot 元素创建的 槽位,其 name 属性的值与该 slot 属性的值匹配 - 但仅当该 slot 元素出现在其 影子树 中,其 宿主 具有相应的 slot 属性值时。


为了使辅助技术产品能够公开比使用 HTML 元素和属性所能实现的更细粒度的接口,可以指定一组 用于辅助技术产品的注释(ARIA rolearia-* 属性)。[ARIA]


以下 事件处理程序内容属性 可以指定在任何 HTML 元素

用星号标记的属性在指定为 body 元素时具有不同的含义,因为这些元素公开 事件处理程序,这些事件处理程序与具有相同名称的 Window 对象相同。

虽然这些属性适用于所有元素,但它们并不适用于所有元素。例如,只有 媒体元素 会接收到用户代理触发的 volumechange 事件。


自定义数据属性(例如 data-foldernamedata-msgid)可以在任何 HTML 元素 上指定,以存储特定于页面的自定义数据、状态、注释等。


HTML 文档 中,如果 HTML 命名空间 中的元素指定了 xmlns 属性,则它必须且仅当它的确切值为“http://www.w3.org/1999/xhtml”时。这并不适用于 XML 文档

在 HTML 中,xmlns 属性没有任何作用。它基本上是一个护身符。它被允许只是为了使从 XML 迁移到 XML 和从 XML 迁移到 XML 变得更容易。当由 HTML 解析器 解析时,该属性最终将位于没有命名空间的位置,而不是像 XML 中的命名空间声明属性那样位于“http://www.w3.org/2000/xmlns/”命名空间中。

在 XML 中,xmlns 属性是命名空间声明机制的一部分,元素实际上不能在没有指定命名空间的情况下具有 xmlns 属性。


XML 还允许在 XML 命名空间 中的任何 XML 文档 中的任何元素上使用 xml:space 属性。此属性对 HTML 元素 没有影响,因为 HTML 中的默认行为是保留空格。 [XML]

无法在 text/html 语法中对 HTML 元素 上的 xml:space 属性进行序列化。

3.2.6.1 title 属性

Global_attributes/title

所有当前引擎中都支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

title 属性 表示 元素的提示信息,例如适合作为工具提示的信息。在链接上,这可能是目标资源的标题或描述;在图像上,这可能是图像来源或图像的描述;在段落上,这可能是脚注或对文本的评论;在引用上,这可能是关于来源的更多信息;在 交互式内容 上,这可能是元素的标签或使用说明;等等。该值为文本。

目前不建议依赖 title 属性,因为许多用户代理没有以本规范要求的无障碍方式公开该属性(例如,需要使用指向设备,如鼠标,才能使工具提示出现,这排除了仅使用键盘的用户和仅使用触控的用户,例如任何拥有现代手机或平板电脑的用户)。

如果从元素中省略了此属性,则意味着最近祖先 HTML 元素title 属性(已设置)也与该元素相关。设置该属性将覆盖此操作,明确表示任何祖先的提示信息与该元素无关。将该属性设置为空字符串表示该元素没有提示信息。

如果 title 属性的值包含 U+000A 换行符 (LF) 字符,则内容将被分成多行。每个 U+000A 换行符 (LF) 字符代表一个换行符。

建议谨慎使用 title 属性中的换行符。

例如,以下代码片段实际上定义了缩略语的展开,其中包含换行符

<p>My logs show that there was some interest in <abbr title="Hypertext
Transport Protocol">HTTP</abbr> today.</p>

某些元素(例如 linkabbrinput)为 title 属性定义了除上述语义之外的其他语义。

元素的 提示信息 是以下算法返回的值,该算法在返回一个值后就会中止。当该算法返回空字符串时,表示没有提示信息。

  1. 如果元素具有 title 属性,则返回在该属性的值上运行 规范化换行符 的结果。

  2. 如果元素具有父元素,则返回父元素的 提示信息

  3. 返回空字符串。

用户代理应在元素具有 提示信息 时通知用户,否则这些信息将无法发现。


HTMLElement/title

所有当前引擎中都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

title IDL 属性必须 反映 title 内容属性。

3.2.6.2 langxml:lang 属性

Global_attributes/lang

所有当前引擎中都支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

lang 属性(位于没有命名空间的位置)指定元素内容以及任何包含文本的元素属性的主要语言。它的值必须是有效的 BCP 47 语言标签,或者为空字符串。将该属性设置为空字符串表示主要语言未知。 [BCP47]

lang 属性位于 XML 命名空间 中,在 XML 中定义。 [XML]

如果元素中省略了这些属性,则该元素的语言与它的父元素的语言相同(如果有)。(除了 slot 元素在 影子树 中)。

在任何 HTML 元素 上都可以使用没有命名空间的 lang 属性。

XML 文档 中,可以将 XML 命名空间 中的 lang 属性 用于 HTML 元素,以及其他命名空间中的元素(如果相关规范允许)。(特别是,MathML 和 SVG 允许在它们的元素上指定 XML 命名空间 中的 lang 属性)。如果在同一个元素上同时指定了没有命名空间的 lang 属性和 XML 命名空间 中的 lang 属性,则当以 ASCII 不区分大小写 的方式进行比较时,它们必须具有完全相同的值。

作者不得在 HTML 文档 中的 HTML 元素 上使用 XML 命名空间 中的 lang 属性。为了便于迁移到 XML 和从 XML 迁移,作者可以在 HTML 文档 中的 HTML 元素 上指定一个没有命名空间、没有前缀且局部名称为 "xml:lang" 的属性,但只有在也指定了没有命名空间的 lang 属性时才能指定此类属性,并且当以 ASCII 不区分大小写 的方式进行比较时,这两个属性必须具有相同的值。

没有命名空间、没有前缀且局部名称为 "xml:lang" 的属性对语言处理没有任何影响。


为了确定节点的 语言,用户代理必须使用以下列表中的第一个适用步骤。

如果该节点是具有 XML 命名空间 中的 lang 属性 的元素。

使用该属性的值。

如果该节点是 HTML 元素SVG 命名空间 中的元素,并且它具有一个没有命名空间的 lang 属性。

使用该属性的值。

如果该节点的父节点是 影子根

使用该 影子根宿主语言

如果该节点的 父元素 不为空。

使用该 父元素语言

否则

如果设置了 pragma-set default language,则该语言就是该节点的语言。如果没有设置 pragma-set default language,则必须使用来自更高级别协议(例如 HTTP)(如果有)的语言信息作为最终的备用语言。在没有此类语言信息的情况下,以及更高级别协议报告多种语言的情况下,该节点的语言未知,相应的语言标签为空字符串。

如果结果值不是一个公认的语言标签,则必须将其视为具有给定语言标签的未知语言,与所有其他语言不同。为了便于往返或与期望语言标签的其他服务进行通信,用户代理应将未知语言标签通过未修改的方式传递,并将其标记为 BCP 47 语言标签,以便后续服务不会将数据解释为其他类型的语言描述。 [BCP47]

因此,例如,具有 lang="xyzzy" 的元素将与选择器 :lang(xyzzy) 匹配(例如在 CSS 中),但它不会与 :lang(abcde) 匹配,即使两者都是同样无效的。类似地,如果协同工作的网页浏览器和屏幕阅读器就元素的语言进行通信,浏览器会告诉屏幕阅读器语言是 "xyzzy",即使它知道它是无效的,只是以防屏幕阅读器最终确实支持具有该标签的语言。即使屏幕阅读器支持 BCP 47 和另一种用于编码语言名称的语法,并且在该其他语法中字符串 "xyzzy" 是一种表示白俄罗斯语的方式,屏幕阅读器开始将文本视为白俄罗斯语也是 不正确 的,因为 "xyzzy" 不是 BCP 47 代码中描述白俄罗斯语的方式(BCP 47 使用代码 "be" 表示白俄罗斯语)。

如果结果值为空字符串,则必须将其解释为意味着该节点的语言明确未知。


用户代理可以使用元素的语言来确定适当的处理或呈现(例如,在选择适当的字体或发音、选择词典或选择表单控件(如日期选择器)的用户界面中)。


HTMLElement/lang

所有当前引擎中都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

lang IDL 属性 必须 反映 没有命名空间的 lang 内容属性。

3.2.6.3 translate 属性

Global_attributes/translate

所有当前引擎中都支持。

Firefox111+Safari6+Chrome19+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

translate 属性 用于指定当页面本地化时,元素的属性值及其 Text 节点子节点的值是否要翻译,或者是否要保持不变。它是一个 枚举属性,具有以下关键字和状态。

关键字状态简要描述
yes yes 翻译模式 设置为 translate-enabled
(空字符串)
no no 翻译模式 设置为 no-translate

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

每个元素(即使是非 HTML 元素)都具有一个 翻译模式,该模式处于 translate-enabled 状态或 no-translate 状态。如果 HTML 元素translate 属性处于 yes 状态,则该元素的 翻译模式 处于 translate-enabled 状态;否则,如果该元素的 translate 属性处于 no 状态,则该元素的 翻译模式 处于 no-translate 状态。否则,该元素的 translate 属性处于 inherit 状态,或者该元素不是 HTML 元素 因此没有 translate 属性;在这两种情况下,该元素的 翻译模式 与其 父元素(如果有)的翻译模式相同,或者如果该元素的 父元素 为空,则处于 translate-enabled 状态。

当元素处于 translate-enabled 状态时,该元素的 可翻译属性 及其 Text 节点子节点的值在页面本地化时应被翻译。

当元素处于 no-translate 状态时,该元素的属性值及其 Text 节点子节点的值在页面本地化时应保持原样,例如,因为该元素包含一个人的姓名或计算机程序的名称。

以下属性是 可翻译属性

其他规范可能会定义其他属性,这些属性也是 可翻译属性。例如,ARIAaria-label 属性定义为可翻译的。


translate IDL 属性在获取时,如果元素的 翻译模式translate-enabled,则必须返回 true;否则返回 false。在设置时,如果新值为 true,则必须将内容属性的值设置为 "yes";否则将内容属性的值设置为 "no"。

在本例中,当页面本地化时,文档中的所有内容都将被翻译,除了示例键盘输入和示例程序输出。

<!DOCTYPE HTML>
<html lang=en> <!-- default on the document element is translate=yes -->
 <head>
  <title>The Bee Game</title> <!-- implied translate=yes inherited from ancestors -->
 </head>
 <body>
  <p>The Bee Game is a text adventure game in English.</p>
  <p>When the game launches, the first thing you should do is type
  <kbd translate=no>eat honey</kbd>. The game will respond with:</p>
  <pre><samp translate=no>Yum yum! That was some good honey!</samp></pre>
 </body>
</html>
3.2.6.4 dir 属性

Global_attributes/dir

所有当前引擎中都支持。

Firefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

dir 属性是一个 枚举属性,具有以下关键字和状态

关键字状态简要描述
ltr ltr 元素的内容被显式地方向隔离为从左到右的文本。
rtl rtl 元素的内容被显式地方向隔离为从右到左的文本。
auto auto 元素的内容被显式地方向隔离为文本,但方向需要使用元素的内容以编程方式确定(如下所述)。

auto 状态使用的启发式方法非常粗略(它只查看具有强方向性的第一个字符,方式类似于双向算法中的段落级别确定)。强烈建议作者只在文本方向真正未知且无法应用更好的服务器端启发式方法时才使用此值。 [BIDI]

对于 textareapre 元素,启发式方法在每个段落级别应用。

属性的 缺失值默认值无效值默认值 都是 未定义 状态。


元素的 方向性(任何元素,不仅是 HTML 元素)是 'ltr' 或 'rtl'。为了计算给定元素 element方向性,请根据 elementdir 属性状态进行切换

ltr

返回 'ltr'。

rtl

返回 'rtl'。

auto
  1. resultelement自动方向性

  2. 如果 result 为 null,则返回 'ltr'。

  3. 返回 result

undefined
如果 element 是一个 bdi 元素
  1. resultelement自动方向性

  2. 如果 result 为 null,则返回 'ltr'。

  3. 返回 result

如果 element 是一个 input 元素,其 type 属性处于 电话 状态

返回 'ltr'。

否则

返回 element父方向性

由于 dir 属性只为 HTML 元素 定义,因此它不能出现在其他命名空间的元素上。因此,来自其他命名空间的元素最终都会使用 父方向性

auto-directionality 表单关联元素是

为了计算给定元素 element自动方向性

  1. 如果 element 是一个 自动方向性表单关联元素

    1. 如果 element 包含一个双向字符类型的 AL 或 R 字符,并且在元素的 中之前没有任何地方存在一个双向字符类型的 L 字符,则返回 'rtl'。 [BIDI]

    2. 如果 element 不是空字符串,则返回 'ltr'。

    3. 返回 null。

  2. 如果 element 是一个 slot 元素,其 是一个 影子根 并且 element分配节点 不为空

    1. 对于 element分配节点 中的每个节点 child

      1. childDirection 为 null。

      2. 如果 child 是一个 Text 节点,则将 childDirection 设置为 child文本节点方向性

      3. 否则

        1. 断言child 是一个 Element 节点。

        2. childDirection 设置为 child包含文本自动方向性,其中 canExcludeRoot 设置为 true。

      4. 如果 childDirection 不为 null,则返回 childDirection

    2. 返回 null。

  3. 返回 element包含文本自动方向性,其中 canExcludeRoot 设置为 false。

为了计算具有布尔值 canExcludeRoot 的元素 element包含文本自动方向性

  1. 对于 element后代 中的每个节点 descendant,按 树序

    1. 如果以下任一条件满足

      • descendant
      • descendant 的任何祖先元素,这些元素是 element 的后代
      • 如果 canExcludeRoot 为 true,则为 element

      是以下之一

      继续

    2. 如果 descendant 是一个 slot 元素,其 是一个 影子根,则返回该 影子根宿主方向性

    3. 如果 descendant 不是一个 Text 节点,则 继续

    4. resultdescendant文本节点方向性

    5. 如果 result 不为 null,则返回 result

  2. 返回 null。

为了计算给定 Text 节点 text文本节点方向性

  1. 如果 text数据 不包含一个双向字符类型为 L、AL 或 R 的代码点,则返回 null。 [BIDI]

  2. codePointtext数据 中第一个双向字符类型为 L、AL 或 R 的代码点。

  3. 如果 codePoint 的双向字符类型为 AL 或 R,则返回 'rtl'。

  4. 如果 codePoint 的双向字符类型为 L,则返回 'ltr'。

为了计算给定元素 element父方向性

  1. parentNodeelement 的父节点。

  2. 如果 parentNode 是一个 影子根,则返回 parentNode方向性

  3. 如果 parentNode 是一个元素,则返回 parentNode方向性

  4. 返回 'ltr'。

此属性 具有涉及双向算法的渲染要求


一个 HTML 元素属性的方向性,在属性文本以某种方式包含在渲染中时使用,根据以下列表中的第一个适当步骤集确定。

如果属性是 方向性属性,并且元素的 dir 属性处于 auto 状态

找到属性值中第一个(在逻辑顺序中)属于双向字符类型 L、AL 或 R 的字符。 [BIDI]

如果找到这样的字符,并且它是双向字符类型 AL 或 R,则 属性的方向性 为 'rtl'。

否则,属性的方向性 为 'ltr'。

否则
属性的方向性元素的方向性 相同。

以下属性是 方向性属性


document.dir [ = value ]

返回 html 元素dir 属性值,如果有。

可以设置,为 "ltr"、"rtl" 或 "auto",以替换 html 元素dir 属性值。

如果没有 html 元素,则返回空字符串,并忽略新值。

HTMLElement/dir

所有当前引擎中都支持。

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

元素上的 dir IDL 属性必须 反映 该元素的 dir 内容属性,仅限于已知值

Document/dir

所有当前引擎中都支持。

Firefox1+Safari10.1+Chrome64+
Opera51+Edge79+
Edge (Legacy)12+Internet Explorer5+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android47+

Document 对象上的 dir IDL 属性必须 反映 html 元素dir 内容属性(如果有),仅限于已知值。如果没有这样的元素,则属性必须返回空字符串,并在设置时不执行任何操作。

强烈建议作者使用 dir 属性来指示文本方向,而不是使用 CSS,因为这样即使没有 CSS,他们的文档也能继续正确渲染(例如,被搜索引擎解释)。

此标记片段是 IM 对话的片段。

<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 元素的默认对齐样式(即使文本对齐到段落的起始边缘),生成的渲染可能是这样的

Each paragraph rendered as a separate block, with the paragraphs left-aligned except the second paragraph and the last one, which would be right aligned, with the usernames ('Student' and 'Teacher' in this example) flush right, with a colon to their left, and the text first to the left of that.

如前所述,auto 值不是万能药。此示例中的最后一段被误解为从右到左的文本,因为它以阿拉伯字符开头,导致 "right?" 位于阿拉伯文本的左侧。

3.2.6.5 style 属性

Global_attributes/style

所有当前引擎中都支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

所有 HTML 元素 都可以设置 style 内容属性。这是一个 样式属性,如 CSS 样式属性 中所定义。 [CSSATTR]

在支持 CSS 的用户代理中,必须根据 样式属性 的规则,在添加属性或更改属性值时解析属性的值。 [CSSATTR]

但是,如果 是否应通过内容安全策略阻止元素的内联行为? 算法在对属性的 元素、"style attribute" 和属性值执行时返回 "Blocked",则属性值中定义的样式规则不得应用于 元素[CSP]

使用其元素上的 style 属性的文档,即使这些属性被删除,也必须仍然可理解和可用。

特别是,使用 style 属性来隐藏和显示内容,或传递文档中未包含的含义,是不符合规范的。(要隐藏和显示内容,请使用 hidden 属性。)


element.style

返回元素的 style 属性的 CSSStyleDeclaration 对象。

style IDL 属性在 CSS 对象模型 中定义。 [CSSOM]

在以下示例中,指的是颜色的单词使用 span 元素和 style 属性标记,以便这些单词在视觉媒体中以相关颜色显示。

<p>My sweat suit is <span style="color: green; background:
transparent">green</span> and my eyes are <span style="color: blue;
background: transparent">blue</span>.</p>
3.2.6.6 使用 data-* 属性 嵌入自定义不可见数据

Global_attributes/data-*

所有当前引擎中都支持。

Firefox6+Safari5.1+Chrome7+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

一个 自定义数据属性 是一个没有命名空间的属性,其名称以字符串 "data-" 开头,连字符后至少有一个字符,与 XML 兼容,并且不包含任何 ASCII 大写字母

HTML 文档 中,HTML 元素 上的所有属性名称都会自动转换为 ASCII 小写,因此 ASCII 大写字母的限制不会影响此类文档。

自定义数据属性 用于存储自定义数据、状态、注释等,这些数据对页面或应用程序是私有的,没有更合适的属性或元素。

这些属性不打算被使用这些属性的网站管理员不知道的软件使用。对于要由多个独立工具使用的通用扩展,要么应该扩展本规范以显式提供该功能,要么应该使用像 微数据 这样的技术(使用标准化词汇表)。

例如,一个关于音乐的网站可以使用自定义数据属性来注释表示专辑中轨道的列表项,这些属性包含每个轨道的长度。然后,该网站本身可以使用此信息来允许用户按轨道长度对列表进行排序,或过滤特定长度的轨道。

<ol>
 <li data-length="2m11s">Beyond The Sea</li>
 ...
</ol>

然而,用户使用与该音乐网站无关的通用软件来通过查看这些数据来搜索特定长度的轨道是不合适的。

这是因为这些属性旨在供网站自己的脚本使用,而不是通用扩展机制,不能用于公开使用的元数据。

类似地,页面作者可以编写标记来提供他们想要使用的翻译工具的信息

<p>The third <span data-mytrans-de="Anspruch">claim</span> covers the case of <span
translate="no">HTML</span> markup.</p>

在此示例中,"data-mytrans-de" 属性为 MyTrans 产品提供了在将 "claim" 翻译成德语时使用的特定文本。但是,标准的 translate 属性用于告诉它,在所有语言中,"HTML" 都保持不变。当有标准属性可用时,就不需要使用 自定义数据属性

在本示例中,自定义数据属性用于存储对 PaymentRequest 的功能检测结果,可用于在 CSS 中以不同方式设置结账页面的样式。

<script>
 if ('PaymentRequest' in window) {
   document.documentElement.dataset.hasPaymentRequest = '';
 }
</script>

此处,data-has-payment-request 属性实际上用作 布尔属性;检查属性的存在与否就足够了。但是,如果作者愿意,可以稍后用一些值填充它,例如,指示功能有限。

每个 HTML 元素 可以包含任意数量的 自定义数据属性,并使用任意值。

作者应仔细设计此类扩展,以便在忽略属性并删除任何关联的 CSS 时,页面仍然可以使用。

用户代理不得根据这些属性或值推导出任何实现行为。面向用户代理的规范不得将这些属性定义为具有任何有意义的值。

JavaScript 库可以使用 自定义数据属性,因为它们被视为其所用页面的组成部分。鼓励使用多个作者重用的库的作者在其属性名中包含其名称,以降低冲突风险。在有意义的情况下,也鼓励库作者使属性名中使用的确切名称可定制,这样,那些不知情地选择了相同名称的库的作者就可以在同一页面上使用这些库,并且即使这些版本彼此之间不兼容,也可以在同一页面上使用特定库的多个版本。

例如,名为“DoQuery”的库可以使用诸如data-doquery-range 之类的属性名,而名为“jJo”的库可以使用诸如data-jjo-range 之类的属性名。jJo 库还可以提供一个 API 来设置要使用的前缀(例如,J.setDataPrefix('j2'),使属性具有诸如data-j2-range 之类的名称)。


element.dataset

HTMLElement/dataset

所有当前引擎中都支持。

Firefox6+Safari5.1+Chrome7+
Opera11+Edge79+
Edge (Legacy)12+Internet Explorer11
Firefox Android?Safari iOS?Chrome Android?WebView Android3+Samsung Internet?Opera Android11+

SVGElement/dataset

所有当前引擎中都支持。

Firefox51+Safari5.1+Chrome55+
Opera41+Edge79+
Edge (Legacy)17+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android41+

返回元素的 data-* 属性的 DOMStringMap 对象。

带连字符的名称将转换为驼峰式命名法。例如,data-foo-bar="" 将变为 element.dataset.fooBar

dataset IDL 属性为元素上的所有 data-* 属性提供了便捷的访问器。在获取时,dataset IDL 属性必须返回一个 DOMStringMap,其关联元素为该元素。

DOMStringMap 接口用于 dataset 属性。每个 DOMStringMap 都有一个 关联元素

[Exposed=Window,
 LegacyOverrideBuiltIns]
interface DOMStringMap {
  getter DOMString (DOMString name);
  [CEReactions] setter undefined (DOMString name, DOMString value);
  [CEReactions] deleter undefined (DOMString name);
};

获取 DOMStringMap 的名称-值对,请运行以下算法

  1. list 为一个空名称-值对列表。

  2. 对于 DOMStringMap关联元素 上的每个内容属性,其前五个字符为字符串“data-”,其剩余字符(如果有)不包含任何 ASCII 大写字母,按这些属性在元素的 属性列表 中的列出顺序,将一个名称-值对添加到 list 中,该对的名称是属性名的前五个字符被移除后的名称,其值是属性的值。

  3. 对于 list 中的每个名称,对于名称中每个后面跟着 ASCII 小写字母 的 U+002D 连字符 (-),移除 U+002D 连字符 (-) 并用相同字符 转换为 ASCII 大写字母 替换跟随它的字符。

  4. 返回 list

DOMStringMap 对象在任何时间点的 支持的属性名 是从 获取 DOMStringMap 的名称-值对 返回的每个对的名称,按返回的顺序排列。

确定 DOMStringMap 的命名属性的 name 的值,请返回从 获取 DOMStringMap 的名称-值对 返回的列表中,名称组件为 name 的名称-值对的值组件。

设置 DOMStringMap 的新命名属性的值 或 设置 DOMStringMap 的现有命名属性的值,对于给定的属性名 name 和新值 value,请运行以下步骤

  1. 如果 name 包含 U+002D 连字符 (-) 后面跟着 ASCII 小写字母,则抛出 "SyntaxError" DOMException

  2. 对于 name 中的每个 ASCII 大写字母,在字符前面插入 U+002D 连字符 (-),并用相同字符 转换为 ASCII 小写字母 替换字符。

  3. name 的前面插入字符串 data-

  4. 如果 name 与 XML 的 Name 产生式不匹配,则抛出 "InvalidCharacterError" DOMException

  5. 设置 DOMStringMap关联元素 的属性值,使用 namevalue

删除 DOMStringMap 的现有命名属性 name,请运行以下步骤

  1. 对于 name 中的每个 ASCII 大写字母,在字符前面插入 U+002D 连字符 (-),并用相同字符 转换为 ASCII 小写字母 替换字符。

  2. name 的前面插入字符串 data-

  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 innerTextouterText 属性

HTMLElement/innerText

所有当前引擎中都支持。

Firefox45+Safari1+Chrome1+
Opera9.6+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android1+Samsung Internet?Opera Android10.1+
element.innerText [ = value ]

返回元素的文本内容“按渲染显示”。

可以设置,用给定的值替换元素的子节点,但将换行符转换为br元素。

element.outerText [ = value ]

返回元素的文本内容“按渲染显示”。

可以设置,用给定的值替换元素,但将换行符转换为br元素。

给定一个HTMLElement element获取文本步骤

  1. 如果element渲染或用户代理是非 CSS 用户代理,则返回element后代文本内容

    此步骤可能会产生令人意外的结果,例如,当在未渲染的元素上调用innerText获取器时,将返回其文本内容,但当在已渲染的元素上访问时,其所有未渲染的子节点将忽略其文本内容。

  2. results为一个新的空列表

  3. 对于element的每个子节点node

    1. current为使用node运行渲染文本收集步骤所得到的列表results中的每个项目要么是一个字符串,要么是一个正整数(必需换行符计数)。

      直观地说,必需换行符计数项目意味着在该位置出现了特定数量的换行符,但它们可以与相邻必需换行符计数项目引起的换行符折叠,类似于 CSS 的边距折叠。

    2. 对于current中的每个项目item,将item附加到results

  4. 移除results中任何为空字符串的项目。

  5. 移除results开头或结尾处任何连续的必需换行符计数项目运行。

  6. 替换每个剩余的连续必需换行符计数项目运行,用一个字符串,该字符串包含与必需换行符计数项目中的最大值一样多的 U+000A LF 代码点。

  7. 返回results中字符串项目的串联。

HTMLElement/outerText

所有当前引擎中都支持。

Firefox98+Safari1.3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS?Chrome Android?WebView Android1+Samsung Internet?Opera Android12.1+

innerTextouterText 获取器步骤是返回使用获取文本步骤this运行的结果。

给定一个节点 node渲染文本收集步骤如下

  1. items为使用node的每个子节点(按树序)运行渲染文本收集步骤,然后将结果连接到单个列表所得到的结果。

  2. 如果node'visibility'计算值不是 'visible',则返回items

  3. 如果node渲染,则返回items。出于此步骤的目的,如果'display'属性的计算值不是 'none',则以下元素必须按描述方式执行

    items 可能由于 'display:contents' 而非空。

  4. 如果node是一个Text 节点,则对于node产生的每个 CSS 文本盒(按内容顺序),在应用 CSS 'white-space' 处理规则和'text-transform' 规则后,计算文本盒的文本,将items设置为所得到字符串的列表,并返回items。 CSS 'white-space' 处理规则略有修改:行尾的可折叠空格始终被折叠,但仅在行是块的最后一行,或以br元素结尾时才会移除。 应该保留软连字符。 [CSSTEXT]

  5. 如果node是一个br 元素,则附加一个包含单个 U+000A LF 代码点的字符串到items

  6. 如果node'display'计算值'table-cell',并且nodeCSS 盒不是其包含的'table-row' 盒的最后一个'table-cell' 盒,则附加一个包含单个 U+0009 TAB 代码点的字符串到items

  7. 如果node'display'计算值'table-row',并且nodeCSS 盒不是最近的祖先'table' 盒的最后一个'table-row' 盒,则附加一个包含单个 U+000A LF 代码点的字符串到items

  8. 如果node是一个p 元素,则附加 2(必需换行符计数)到items的开头和结尾。

  9. 如果node'display'使用值块级'table-caption',则附加 1(必需换行符计数)到items的开头和结尾。 [CSSDISPLAY]

    浮动元素和绝对定位元素属于此类别。

  10. 返回items

请注意,大多数替换元素的后代节点(例如,textareainputvideo - 但不是 button)严格地说不是由 CSS 渲染的,因此对于此算法而言没有CSS 盒

此算法适合被推广到在范围上工作。 然后我们可以将其用作Selection的字符串化的基础,并可能直接在范围上公开它。 请参阅Bugzilla 错误 10583


给定一个HTMLElement element 和一个字符串value设置内部文本步骤

  1. fragment为给定element节点文档value渲染文本片段

  2. 替换所有fragmentelement 内。

The innerText 设置步骤是运行 设置内部文本步骤.

The outerText 设置步骤是

  1. 如果 this 的父级为 null,则抛出一个 "NoModificationAllowedError" DOMException.

  2. nextthis下一个兄弟节点.

  3. previousthis上一个兄弟节点.

  4. fragment 为给定值在 this节点文档 中的 渲染文本片段.

  5. 如果 fragment 没有 子节点,则 追加 一个新的 Text 节点,其 数据 为空字符串,节点文档this节点文档fragment

  6. 替换 thisfragmentthis 的父级内。

  7. 如果 next 为非 null 且 next上一个兄弟节点 为一个 Text 节点,则 与下一个文本节点合并,给定 next上一个兄弟节点.

  8. 如果 previous 为一个 Text 节点,则 与下一个文本节点合并,给定 previous.

给定 Document document 的字符串 input渲染文本片段 是运行以下步骤的结果

  1. fragment 为一个新的 DocumentFragment,其 节点文档document.

  2. positioninput位置变量,最初指向 input 的开头。

  3. text 为空字符串。

  4. position 未越过 input 的末尾时

    1. 收集 一系列不为 U+000A LF 或 U+000D CR 的代码点,来自 input 给定 position,并将 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. 追加 创建元素 的结果,给定 documentbrHTML 命名空间fragment

  5. 返回 fragment.

与下一个文本节点合并,给定一个 Text 节点 node

  1. nextnode下一个兄弟节点.

  2. 如果 next 不是一个 Text 节点,则返回。

  3. 替换数据nodenode数据长度,0 和 next数据.

  4. 移除 next.

3.2.8 与双向算法相关的要求

3.2.8.1 双向算法格式化字符的创作符合性标准

文本内容HTML 元素 中,其 内容 中包含 Text 节点,以及 HTML 元素 的属性中的文本,这些属性允许自由格式文本,可能包含范围为 U+202A 到 U+202E 以及 U+2066 到 U+2069 的字符(双向算法格式化字符)。[BIDI]

鼓励作者使用 dir 属性、bdo 元素和 bdi 元素,而不是手动维护双向算法格式化字符。双向算法格式化字符与 CSS 的交互效果不佳。

3.2.8.2 用户代理符合性标准

用户代理必须实现 Unicode 双向算法,以确定在渲染文档和文档部分时字符的正确排序。[BIDI]

将 HTML 映射到 Unicode 双向算法必须通过以下三种方式之一完成。用户代理必须实现 CSS,特别是 CSS 'unicode-bidi''direction''content' 属性,并且必须在其用户代理样式表中包含此规范的 渲染 部分中给出的使用这些属性的规则,或者,用户代理必须充当它只实现了上述属性并且具有包含所有上述规则的用户代理样式表,但没有让文档中指定的样式表覆盖它们,或者,用户代理必须实现具有等效语义的另一种样式语言。[CSSGC]

以下元素和属性具有 渲染 部分定义的要求,由于本部分中的要求,这些要求适用于所有用户代理(不仅仅是那些 支持建议的默认渲染 的用户代理)

3.2.9 与 ARIA 和平台可访问性 API 相关的要求

HTML 可访问性 API 映射 中定义了用户代理在 HTML 元素 上实现可访问性 API 语义的要求。除了那里的规则外,对于 自定义元素 element,默认 ARIA 角色语义确定如下:[HTMLAAM]

  1. mapelement内部内容属性映射.

  2. 如果 map["role"] 存在,则返回它。

  3. 返回无角色。

类似地,对于 自定义元素 element,默认 ARIA 状态和属性语义,对于名为 stateOrProperty 的状态或属性,确定如下

  1. 如果 element附加内部 为非 null

    1. 如果 element附加内部结构获取 stateOrProperty 关联元素 存在,则返回运行它的结果。

    2. 如果 element附加内部结构获取 stateOrProperty 关联元素 存在,则返回运行它的结果。

  2. 如果 element内部内容属性映射[stateOrProperty] 存在,则返回它。

  3. 返回 stateOrProperty 的默认值。

这里提到的“默认语义”在 ARIA 中有时也被称为“原生”、“隐式”或“宿主语言”语义。 [ARIA]

这些定义的一个含义是,默认语义可能会随着时间的推移而改变。这使得自定义元素具有与内置元素相同的表达能力;例如,比较 a 元素的默认 ARIA 角色语义如何随着 href 属性的添加或删除而改变。

有关此操作的示例,请参阅 自定义元素部分


用于检查 HTML 元素 上 ARIA rolearia-* 属性使用的符合性检查器要求在 ARIA in HTML 中定义。 [ARIAHTML]