HTML：活的标准

面向 Web 开发人员版 - 最后更新时间 2024 年 9 月 12 日

3 HTML 文档的语义、结构和 API
1. 3.1 文档
2. 3.2 元素

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

3.1 文档

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

Document 对象的 URL 在 DOM 中定义。它在创建 Document 对象时被初始设置，但可以在 Document 对象的生命周期内发生变化；例如，当用户导航到页面上的片段时，以及当使用新的 URL 调用 pushState() 方法时，它会发生变化。 [DOM]

交互式用户代理通常在其用户界面中公开 Document 对象的 URL。这是用户判断网站是否试图模仿其他网站的主要机制。

Document 对象的源在 DOM 中定义。它在创建 Document 对象时被初始设置，并且只有在设置 document.domain 时，才会在 Document 的生命周期内发生变化。Document 的源可能与其 URL 的源不同；例如，当子可导航被创建时，其活动文档的源继承自其父的活动文档的源，即使其活动文档的 URL 是 about:blank。 [DOM]

当使用 createDocument() 或 createHTMLDocument() 方法通过脚本创建 Document 时，该 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 接口，该规范对其进行了重大扩展。

每个 Document 都具有一个策略容器（一个策略容器），最初是一个新的策略容器，其中包含适用于该 Document 的策略。

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

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

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

每个 Document 都具有一个初始 about:blank，它是一个布尔值，最初为 false。

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

顾名思义，这用于与 WebDriver BiDi 规范交互，该规范需要以某种方式告知 Document 生命周期的早期部分发生的某些事件，并将这些事件与创建该 Document 的导航使用的原始导航 ID 关联起来。当 WebDriver BiDi 认为加载过程已完成时，最终会将其设置回 null。 [BIDI]

每个 Document 都具有一个 about 基地址，它是一个 URL 或 null，最初为 null。

这仅填充 "about:" 方案的 Document。

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

3.1.2 `DocumentOrShadowRoot` 接口

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

3.1.3 资源元数据管理

document.referrer

返回用户从该 Document 导航到当前 Document 的 URL，除非它被阻止或没有这样的文档，在这种情况下，它返回空字符串。

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

document.cookie [ = value ] 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+

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

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

如果内容被沙箱限制到不透明源（例如，在具有 sandbox 属性的 iframe 中），则在获取和设置时将抛出 "SecurityError" DOMException。

document.lastModified

返回服务器报告的文档最后修改日期，格式为 "MM/DD/YYYY hh:mm:ss"，以用户的本地时区表示。

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

3.1.4 报告文档加载状态

Document/DOMContentLoaded_event

所有当前引擎都支持。

Firefox1+Safari3.1+Chrome1+

Opera9+Edge79+

Edge (Legacy)12+Internet Explorer9+

Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

document.readyState

在 Document 加载时返回 "loading"，在完成解析但仍在加载子资源时返回 "interactive"，以及在加载完成后返回 "complete"。

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

当所有子资源（除 async script 元素外）加载完成时，DOMContentLoaded 事件会在从 "interactive" 状态转换到 "complete" 状态之前触发。

3.1.5 渲染阻塞机制

每个 Document 都拥有一个渲染阻塞元素集，一个包含元素的集合，最初为空集。

如果 Document document 的内容类型是 "text/html" 且 document 的 body 元素为空，则它允许添加渲染阻塞元素。

当以下两项都为真时，Document document 被视为渲染阻塞：

document 的渲染阻塞元素集不为空，或 document 允许添加渲染阻塞元素。
给定 document 的相关全局对象，当前高分辨率时间没有超过实现定义的超时值。

如果元素 el 的节点文档 document 被渲染阻塞，且 el 存在于 document 的渲染阻塞元素集中，则该元素 el 被认为是渲染阻塞。

要对元素 el 阻塞渲染：

设 document 为 el 的节点文档。
如果 document 允许添加渲染阻塞元素，则将 el 追加到 document 的渲染阻塞元素集中。

要对元素 el 解除渲染阻塞：

设 document 为 el 的节点文档。
从 document 的渲染阻塞元素集中移除 el。

当渲染阻塞元素 el 与浏览上下文断开连接，或 el 的阻塞属性的值发生更改，导致 el 不再潜在渲染阻塞时，则对 el 解除渲染阻塞。

3.1.6 DOM 树访问器

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

document.head: 返回 head 元素。

head 元素是文档中 html 元素的第一个子元素且为 head 元素，如果存在则返回，否则返回 null。

document.title [ = value ]

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

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

title 元素是文档中第一个 title 元素（按树序），如果存在则返回，否则返回 null。

document.body [ = value ]

返回 body 元素。

可以设置，用于替换 body 元素。

如果新值不是 body 或 frameset 元素，则会抛出一个 "HierarchyRequestError" DOMException。

body 元素是 html 元素子元素中第一个为 body 或 frameset 元素的子元素，如果没有这样的元素则返回 null。

document.images: 返回 Document 中所有 img 元素的 HTMLCollection。
document.embeds
document.plugins: 返回 Document 中所有 embed 元素的 HTMLCollection。
document.links: 返回 Document 中所有具有 href 属性的 a 和 area 元素的 HTMLCollection。
document.forms: 返回 Document 中所有 form 元素的 HTMLCollection。
document.scripts: 返回 Document 中所有 script 元素的 HTMLCollection。

collection = document.getElementsByName(name): 返回 Document 中所有具有名为 name 的 name 属性的元素的 NodeList。

document.currentScript

返回当前正在执行的 script 元素或 SVG script 元素，只要该元素代表经典脚本。在脚本执行重入的情况下，返回在那些尚未完成执行的脚本中最近开始执行的那个。

如果 Document 当前没有执行 script 或 SVG script 元素（例如，因为正在运行的脚本是事件处理程序或计时器），或者当前正在执行的 script 或 SVG script 元素代表模块脚本，则返回 null。

这个 API 在实现者和标准社区中已经失宠，因为它全局地暴露了 script 或 SVG script 元素。因此，它在较新的上下文中不可用，例如运行模块脚本时或在影子树中运行脚本时。我们正在研究为在这些上下文中识别正在运行的脚本创建一个新的解决方案，该解决方案不会将其全局公开：请参见问题 #1013。

Document 接口上的 dir 属性是与 dir 内容属性一起定义的。

3.2 元素

3.2.1 语义

HTML 中的元素、属性和属性值被定义（通过本规范）为具有特定的含义（语义）。例如，ol 元素代表一个有序列表，lang 属性代表内容的语言。

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

作为一个简单的例子，考虑一个作者只考虑台式电脑 Web 浏览器编写的网页

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

由于 HTML 传达的是含义，而不是表现形式，因此同一个页面也可以在移动电话上的小型浏览器中使用，而无需对页面进行任何更改。例如，与台式机上标题使用大号字体不同，移动电话上的浏览器可能会对整个页面使用相同大小的字体，但将标题加粗显示。

但这不仅仅限于屏幕尺寸的差异：同一个页面也可以被使用语音合成技术的盲人用户使用，他们使用基于语音合成的浏览器，它不会在屏幕上显示页面，而是将页面读给用户，例如使用耳机。与使用大号字体显示标题不同，语音浏览器可能会使用不同的音量或更慢的语速。

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

甚至超越浏览器，软件也可以利用这些信息。搜索引擎可以使用标题更有效地索引页面，或从搜索结果中提供指向页面子部分的快速链接。工具可以使用标题来创建目录（事实上，本规范的目录就是使用这种方法生成的）。

此示例重点介绍了标题，但相同的原则适用于 HTML 中的所有语义。

作者不得将元素、属性或属性值用于除其适当预期语义目的以外的其他目的，因为这样做会阻止软件正确处理页面。

例如，以下代码段旨在表示公司网站的标题，是不符合规范的，因为第二行不是要作为子部分的标题，而仅仅是一个副标题或副标题（同一部分的从属标题）。

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

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

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

下一个示例中的文档同样不符合规范，尽管语法正确，因为放在单元格中的数据显然不是表格数据，并且 cite 元素被误用

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

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

此文档的更正版本可能是

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

作者不得使用本规范或其他适用规范不允许的元素、属性或属性值，因为这样做会显著降低将来扩展语言的难度。

在下一个示例中，存在一个不符合规范的属性值（“carpet”）和一个不符合规范的属性（“texture”），它不被本规范允许

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

以下将是标记此内容的替代方法和正确方法

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

DOM 节点的节点文档的浏览上下文为 null，则豁免所有文档符合性要求，除了 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 元素，例如

“如模块 A、B、C 和 D 的图形所示…”
“在图 27 中…”（没有超链接）
“来自‘简单模块图’图形的内容…”
“在下图中…”（但不建议这样做）

所有 HTML 元素的接口继承的基接口是 HTMLElement 接口。

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

以下示例是一个既不是 HTML 元素也不是 SVG 元素的元素，它创建如下

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

3.2.3 元素定义

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

类别

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

可以使用此元素的上下文

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

为简单起见，只列出了最具体的期望。

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

内容模型

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

text/html 中的标签省略

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

内容属性

对元素上可能指定的属性（除非另有规定）的规范性列表，以及对这些属性的非规范性描述。（破折号左侧的内容是规范性的，破折号右侧的内容是非规范性的。）

辅助功能注意事项

针对作者：ARIA role 和 aria-* 属性的使用符合性要求在 ARIA in HTML 中定义。 [ARIA] [ARIAHTML]

针对实现者：实现辅助功能 API 语义的用户代理要求在 HTML Accessibility API Mappings 中定义。 [HTMLAAM]

DOM 接口

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

然后，紧随其后是对元素代表内容的描述，以及可能适用于作者的其他规范性符合性标准。有时还包括示例。

3.2.3.1 属性

属性值是一个字符串。除非另有规定，HTML 元素上的属性值可以是任何字符串值，包括空字符串，并且对可以在此类属性值中指定的文本没有限制。

3.2.4 内容模型

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

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

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

因此，如果元素 A 和 B 具有相同的父节点，并且它们之间没有其他元素节点或 Text 节点（除了元素间空白），则元素 A 被认为是 在元素 B 之前或之后。类似地，如果一个元素除了元素间空白、注释节点和处理指令节点之外不包含其他节点，则该节点是该元素的 唯一子节点。

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

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

此外，HTML 元素可以是孤儿节点（即没有父节点）。

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

var data = {
  name: "Banana",
  cell: document.createElement('td'),
};

3.2.4.1 “无内容” 内容模型

当元素的内容模型为无内容时，该元素不能包含任何 Text 节点（除了元素间空白）和任何元素节点。

大多数内容模型为“无内容”的 HTML 元素也为了方便，是空元素（在 HTML 语法中没有结束标签的元素）。但是，这些是完全独立的概念。

3.2.4.2 内容类型

HTML 中的每个元素都属于零个或多个类别，这些类别将具有相似特征的元素分组在一起。本规范中使用了以下广泛的类别

元数据内容
流内容
分节内容
标题内容
短语内容
嵌入式内容
交互式内容

一些元素也属于其他类别，这些类别在本规范的其他部分定义。

这些类别之间的关系如下

分节内容、标题内容、短语内容、嵌入式内容和交互式内容都是流内容的类型。元数据有时是流内容。元数据和交互式内容有时是短语内容。嵌入式内容也是一种短语内容类型，有时也是交互式内容。

其他类别也用于特定目的，例如表单控件使用多个类别来定义通用要求。一些元素具有独特的需求，不属于任何特定类别。

3.2.4.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.4.2.2 流内容

大多数用于文档和应用程序主体中的元素被归类为流内容。

3.2.4.2.3 分节内容

分节内容是定义 header 和 footer 元素范围的内容。

3.2.4.2.4 标题内容

标题内容定义了部分的标题（无论是使用分节内容元素显式标记，还是由标题内容本身隐含）。

3.2.4.2.5 短语内容

短语内容是文档的文本，以及在段落内级别标记该文本的元素。短语内容的运行形成段落。

大多数被归类为短语内容的元素只能包含本身被归类为短语内容的元素，而不是任何流内容。

文本，在内容模型的上下文中，意味着无内容或 Text 节点。文本有时本身用作内容模型，但它也是短语内容，并且可以是元素间空白（如果 Text 节点为空或只包含 ASCII 空白）。

Text 节点和属性值必须由标量值组成，不包括非字符和控制字符，除了 ASCII 空白。本规范根据其确切的上下文，对 Text 节点和属性值的精确值包含额外的约束。

3.2.4.2.6 嵌入式内容

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

来自除 HTML 命名空间之外的命名空间并且传达内容而不是元数据的元素，对于本规范中定义的内容模型而言是嵌入式内容。（例如，MathML 或 SVG。）

一些嵌入式内容元素可以具有备用内容：当无法使用外部资源（例如，由于其格式不受支持）时要使用的内容。元素定义说明了备用内容是什么，如果有的话。

3.2.4.2.7 交互式内容

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

3.2.4.2.8 可感知内容

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

可感知内容通过提供一些后代非空文本，或者用户可以听到的东西（音频 元素）或看到的东西（视频，图像 或 画布 元素），或以其他方式进行交互（例如，交互式表单控件），使元素非空。

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

鼓励符合性检查器为作者提供一种机制，以查找未满足此要求的元素，作为创作辅助工具。

以下元素是可感知内容

3.2.4.2.9 支持脚本的元素

支持脚本的元素是那些本身不代表任何内容（即它们不渲染），但用于支持脚本，例如，为用户提供功能。

以下元素是支持脚本的元素

3.2.4.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.4.4 段落

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

一个段落通常是一系列短语内容，形成一个文本块，包含一个或多个句子，讨论特定主题，如排版，但也可以用于更一般的主题分组。例如，地址也是一个段落，表单的一部分，旁注或诗歌中的诗节也是如此。

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

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

在流内容中的段落是相对于文档在不使用 a，ins，del 和 map 元素的情况下所呈现的样子而定义的，因为这些元素及其混合内容模型可能会跨越段落边界，如下面的前两个示例所示。

通常，最好避免元素跨越段落边界。维持这种标记可能很困难。

以下示例采用先前示例中的标记，并在其中部分标记周围放置 ins 和 del 元素，以表明文本已更改（虽然在这种情况下，这些更改确实没有多大意义）。注意，尽管有 ins 和 del 元素 - ins 元素跨越标题和第一个段落，而 del 元素跨越两个段落之间的边界 - 此示例与上一个示例具有完全相同的段落。

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

一个段落也可以通过 p 元素显式形成。

当除了短语内容之外没有其他内容来将段落彼此分开时，可以使用 p 元素来包装单个段落。

在以下示例中，链接跨越了第一个段落的一半，两个段落之间所有标题，以及第二个段落的一半。它跨越了段落和标题。

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

以下是另一种标记方法，这次显示了段落，并将一个链接元素拆分为三个

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

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

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

有五个段落

说“你可以玩我的猫模拟器。object 我对此非常自豪。”的段落，其中object 是 object 元素。
说“要查看猫模拟器，请使用以下链接之一：”的段落。
说“下载模拟器文件”的段落。
说“使用在线模拟器”的段落。
说“或者，升级到 Mellblom 浏览器。”的段落。

第一个段落与其他四个段落重叠。支持“cats.sim”资源的用户代理只会显示第一个段落，但显示回退的用户代理会令人困惑地将第一个段落的第一个句子显示为与第二个段落位于同一段落，并将最后一个段落显示为位于第一个段落的第二个句子的开头。

为了避免这种混淆，可以使用显式的 p 元素。例如

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

3.2.5 全局属性

全局属性

以下属性对于所有 HTML 元素都是通用的，并且可以在所有 HTML 元素上指定。

全局属性/slot

所有当前引擎都支持。

Firefox63+Safari10+Chrome53+

Opera?Edge79+

Edge (Legacy)NoInternet Explorer?

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

DOM 定义了用户代理对 class，id 和 slot 属性在任何命名空间中任何元素上的要求。 [DOM]

class，id 和 slot 属性可以在所有 HTML 元素上指定。

当在 HTML 元素上指定时，class 属性的值必须是一组用空格分隔的标记，代表元素所属的各种类。

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

作者在 class 属性中使用的标记没有其他限制，但鼓励作者使用描述内容性质的值，而不是描述内容所需呈现方式的值。

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

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

对 ID 可以采用何种形式没有其他限制；特别是，ID 可以仅由数字组成、以数字开头、以下划线开头、仅由标点符号组成等。

元素的唯一标识符可用于各种目的，最值得注意的是作为使用片段链接到文档特定部分的方法、作为在脚本中定位元素的方法，以及作为从 CSS 样式化特定元素的方法。

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

slot 属性用于为元素分配一个槽位：具有 slot 属性的元素被分配到由 slot 元素创建的槽位，其 name 属性的值与该 slot 属性的值匹配 — 但前提是该 slot 元素发现自己位于阴影树中，该阴影树的根的主机具有相应的 slot 属性值。

为了使辅助技术产品能够公开比使用 HTML 元素和属性所能实现的更细粒度的界面，可以指定一组辅助技术产品注释（ARIA role 和 aria-* 属性）。[ARIA]

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

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

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

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

在 HTML 文档中，如果且仅当 HTML 命名空间中的元素具有 xmlns 属性指定，且该属性的精确值为“http://www.w3.org/1999/xhtml”。这不适用于 XML 文档。

在 HTML 中，xmlns 属性完全没有效果。它基本上是一个护身符。它被允许仅仅是为了使从 XML 向 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.5.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 属性，因为许多用户代理未以本规范要求的辅助方式公开该属性（例如，需要指向设备（如鼠标）才能使工具提示出现，这排除了仅使用键盘的用户和仅使用触控的用户，例如任何使用现代手机或平板电脑的人）。

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

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

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

例如，以下片段实际上定义了一个缩略语的扩展，其中 _包含换行符_

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

某些元素（如 link、abbr 和 input）为 title 属性定义了除上述语义之外的附加语义。

3.2.5.2 `lang` 和 `xml: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 文档中的HTML 元素上，以及在其他命名空间中的元素上（如果相关规范允许，特别是 MathML 和 SVG 允许在它们的元素上指定lang 属性在XML 命名空间），可以使用XML 命名空间中的lang 属性。如果在同一个元素上同时指定了无命名空间的lang 属性和lang 属性在XML 命名空间，则在ASCII 不区分大小写的方式进行比较时，它们必须具有完全相同的值。

作者不得在HTML 文档中的HTML 元素上使用lang 属性在XML 命名空间。为了便于迁移到和从 XML 迁移，作者可以在HTML 文档中的HTML 元素上指定一个无命名空间且没有前缀的属性，其文字本地名称为“xml:lang”，但只有在无命名空间的lang 属性也被指定的情况下才必须指定这些属性，并且这两个属性在ASCII 不区分大小写的方式进行比较时，必须具有相同的值。

无命名空间且没有前缀的属性，其文字本地名称为“xml:lang”，对语言处理没有影响。

3.2.5.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。
(空字符串)	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 状态，如果元素的父元素为 null。

当元素处于translate-enabled 状态时，元素的可翻译属性及其Text 节点子节点的值将在页面本地化时进行翻译。

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

以下属性是可翻译属性

abbr 在th 元素上
alt 在area、img 和input 元素上
content 在meta 元素上，如果name 属性指定一个元数据名称，其值为已知可翻译的
download 在a 和area 元素上
label 在optgroup、option 和track 元素上
lang 在HTML 元素上；必须被“翻译”以匹配翻译中使用的语言
placeholder 在input 和textarea 元素上
srcdoc 在iframe 元素上；必须被解析并递归处理
style 在HTML 元素上；必须被解析并递归处理（例如，对于'content' 属性的值）
title 在所有HTML 元素上
value 在input 元素上，其type 属性处于Button 状态或Reset Button 状态

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

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

<!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.5.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]

对于textarea 和pre 元素，启发式算法在每个段落级别上应用。

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

元素的方向性（任何元素，不仅仅是HTML 元素）要么是 'ltr' 要么是 'rtl'。为了计算给定元素element的方向性，根据element的dir 属性状态进行切换

ltr

返回 'ltr'。

rtl

返回 'rtl'。

auto

令result 为element的自动方向性。
如果result 为 null，则返回 'ltr'。
返回result。

undefined

如果element 是一个bdi 元素

令result 为element的自动方向性。
如果result 为 null，则返回 'ltr'。
返回result。

如果 element 是一个 input 元素，其 type 属性处于 Telephone 状态

返回 'ltr'。

否则

返回 element 的父方向性。

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

称为自动方向性表单关联元素的元素是

input 元素，其 type 属性处于 Hidden、Text、Search、Telephone、URL、Email、Password、Submit Button、Reset Button 或 Button 状态，以及
textarea 元素。

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

如果 element 是一个自动方向性表单关联元素
1. 如果 element 的值包含一个双向字符类型的 AL 或 R 字符，并且在元素的值中，它之前没有任何一个双向字符类型的 L 字符，则返回 'rtl'。 [BIDI]
2. 如果 element 的值不是空字符串，则返回 'ltr'。
3. 返回 null。
如果 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。
返回 element 的包含文本自动方向性，其中 canExcludeRoot 设置为 false。

为了计算元素 element 的包含文本自动方向性，其中 canExcludeRoot 是一个布尔值

对于 element 的后代中的每个节点 descendant，按树序
1. 如果以下任何一项
  - descendant
  - descendant 的任何祖先元素，该元素是 element 的后代
  - 如果 canExcludeRoot 为 true，则为 element
  是以下元素之一
  - 一个 bdi 元素
  - 一个 script 元素
  - 一个 style 元素
  - 一个 textarea 元素
  - 一个其 dir 属性不处于未定义状态的元素
  则继续。
2. 如果 descendant 是一个 slot 元素，其根是一个影子根，则返回该影子根的宿主的方向性。
3. 如果 descendant 不是一个 Text 节点，则继续。
4. 将 result 设置为 descendant 的文本节点方向性。
5. 如果 result 不是 null，则返回 result。
返回 null。

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

如果 text 的数据不包含一个双向字符类型的 L、AL 或 R 的代码点，则返回 null。 [BIDI]
将 codePoint 设置为 text 的数据中第一个双向字符类型的 L、AL 或 R 的代码点。
如果 codePoint 的双向字符类型是 AL 或 R，则返回 'rtl'。
如果 codePoint 的双向字符类型是 L，则返回 'ltr'。

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

将 parentNode 设置为 element 的父节点。
如果 parentNode 是一个影子根，则返回 parentNode 的宿主的方向性。
如果 parentNode 是一个元素，则返回 parentNode 的方向性。
返回 'ltr'。

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

如果该属性是方向性可支持属性，并且元素的 dir 属性处于 auto 状态

找到属性值的第一个（按逻辑顺序）双向字符类型的 L、AL 或 R 的字符。 [BIDI]

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

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

否则

该属性的方向性与元素的方向性相同。

以下是方向性可支持属性

abbr 在 th 元素上
alt 在 area、img 和 input 元素上
content 在 meta 元素上，如果 name 属性指定了一个元数据名称，其值主要用于人类可读而不是机器可读
label 在 optgroup、option 和 track 元素上
placeholder 在 input 和 textarea 元素上
title 在所有 HTML 元素上

document.dir [ = value ] 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+

返回 html 元素的 dir 属性的值（如果有）。

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

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

强烈建议作者使用 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.5.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]

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

特别是，使用 style 属性来隐藏和显示内容，或传达文档中未包含的含义，是非合规的。（要隐藏和显示内容，请使用 hidden 属性。）

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

在以下示例中，引用颜色的单词使用 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.5.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

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

带连字符的名称将转换为骆驼式大小写。例如，data-foo-bar="" 将变为 element.dataset.fooBar。

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

如果网页想要一个元素来代表一艘宇宙飞船，例如作为游戏的一部分，则必须使用 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.6 `innerText` 和 `outerText` 属性

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 ] 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+

返回元素的文本内容“如渲染”。

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

3.2.7 与双向算法相关的要求

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

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

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

3.1 文档

3.1.1 Document 对象

3.1.2 DocumentOrShadowRoot 接口

3.1.3 资源元数据管理

3.1.4 报告文档加载状态

3.1.5 渲染阻塞机制

3.1.6 DOM 树访问器

3.2 元素

3.2.1 语义

3.2.2 DOM 中的元素

3.2.3 元素定义

3.2.3.1 属性

3.2.4 内容模型

3.2.4.1 “无内容” 内容模型

3.2.4.2 内容类型

3.2.4.2.1 元数据内容

3.2.4.2.2 流内容

3.2.4.2.3 分节内容

3.2.4.2.4 标题内容

3.2.4.2.5 短语内容

3.2.4.2.6 嵌入式内容

3.2.4.2.7 交互式内容

3.2.4.2.8 可感知内容

3.2.4.2.9 支持脚本的元素

3.2.4.3 透明内容模型

3.2.4.4 段落

3.2.5 全局属性

3.2.5.1 title 属性

3.2.5.2 lang 和 xml:lang 属性

3.2.5.3 translate 属性

3.2.5.4 dir 属性

3.2.5.5 style 属性

3.2.5.6 使用 data-* 属性嵌入自定义不可见数据

3.2.6 innerText 和 outerText 属性

3.2.7 与双向算法相关的要求

3.1.1 `Document` 对象

3.1.2 `DocumentOrShadowRoot` 接口

3.2.5.1 `title` 属性

3.2.5.2 `lang` 和 `xml:lang` 属性

3.2.5.3 `translate` 属性

3.2.5.4 `dir` 属性

3.2.5.5 `style` 属性

3.2.5.6 使用 `data-*` 属性嵌入自定义不可见数据

3.2.6 `innerText` 和 `outerText` 属性