现行标准 — 最后更新 2026年7月11日
a 元素em 元素strong 元素small 元素s 元素cite 元素q 元素dfn 元素abbr 元素ruby 元素rt 元素rp 元素data 元素time 元素code 元素var 元素samp 元素kbd 元素sub 和
sup 元素i 元素b 元素u 元素mark 元素bdi 元素bdo 元素span 元素br 元素wbr 元素a 和 area 元素创建的链接a 和
area 元素的APIalternate"
author"
bookmark"canonical"dns-prefetch"expect"
external"help"icon"license"manifest"modulepreload"nofollow"noopener"noreferrer"opener"
pingback"preconnect"prefetch"preload"privacy-policy"search"
stylesheet"tag"terms-of-service"picture 元素
source 元素img 元素source、
img和 link 元素的共同属性
iframe 元素embed 元素object 元素video 元素audio 元素track 元素TrackEvent
接口map 元素area 元素form 元素label 元素input 元素
type 属性的状态
type=hidden)type=text) 状态和搜索状态
(type=search)type=tel)type=url)type=email)type=password)type=date)type=month)type=week)type=time)type=datetime-local)type=number)type=range)type=color)type=checkbox)type=radio)type=file)type=submit)type=image)type=reset)type=button)input 元素属性
input
元素 APIbutton 元素select 元素datalist 元素
optgroup 元素
option 元素
textarea 元素
output 元素
progress 元素
meter 元素fieldset 元素
legend 元素
selectedcontent 元素script 元素
noscript 元素
template 元素
slot 元素canvas 元素
Path2D 对象
ImageBitmap 渲染上下文
OffscreenCanvas 接口
canvas 元素的安全性Window、
WindowProxy和 Location 对象的安全基础设施
Window 对象
WindowProxy
特殊对象
Location
接口
History 接口
NotRestoredReasons 接口X-Frame-Options` 头部
Refresh` 头部WindowOrWorkerGlobalScope 混入button 元素
details
和 summary 元素input 元素作为文本输入控件input 元素作为特定领域的控件input
元素作为范围控制input
元素作为颜色选择器input 元素作为复选框和单选按钮部件input 元素作为文件上传控件input
元素作为按钮marquee 元素
meter 元素
progress
元素select 元素
textarea
元素该规范定义了网页平台的大部分内容,详细程度很高。它在网页平台规范堆栈中的位置相对于其他规范可以总结如下:
本节为非规范性内容。
简而言之:是的。
更详细地说:“HTML5”这一术语广泛用作现代网页技术的流行词,其中许多(尽管并非全部)是由 WHATWG 开发的。本文档即为其中之一;其他文档可在 WHATWG 标准概览中找到。
本节为非规范性内容。
HTML 是万维网的核心标记语言。最初,HTML 主要被设计为一种用于语义描述科学文档的语言。然而,它的总体设计使得它在随后的几年中被适应为描述其他多种文档类型甚至应用程序的语言。
本节为非规范性内容。
本规范旨在为使用本规范中定义的特性的文档和脚本的作者、操作使用本规范中定义特性的页面的工具的实现者,以及希望确认文档或实现是否符合本规范要求的个人提供参考。
本文件可能不适合没有至少基础了解网络技术的读者,因为在某些地方,它牺牲了清晰性以追求精确性,牺牲了简洁性以求完整性。更易于接近的教程和创作指南可以为读者提供更温和的入门介绍。
特别是,对于本规范中一些更技术性的部分,了解 DOM 的基础知识是必要的。理解 Web IDL、HTTP、XML、Unicode、字符编码、JavaScript 和 CSS 在某些地方也会有所帮助,但不是必须的。
本节为非规范性内容。
本规范的范围限于提供一个语义级别的标记语言和相关的语义级别脚本 API,用于创建从静态文档到动态应用的可访问网页。
本规范的范围不包括提供媒体特定的呈现定制机制(尽管规范末尾包括了默认的网页浏览器渲染规则,并且提供了若干与 CSS 相关的钩子机制)。
本规范的范围也不包括描述整个操作系统。特别是,硬件配置软件、图像处理工具以及用户预期在高端工作站上日常使用的应用程序均不在范围之内。就应用程序而言,本规范特别针对那些预期用户偶尔使用的应用程序,或定期但在不同地点使用的应用程序,并且对 CPU 的要求较低。这类应用程序的例子包括在线购物系统、搜索系统、游戏(尤其是多人在线游戏)、公共电话簿或地址簿、通信软件(电子邮件客户端、即时消息客户端、讨论软件)、文档编辑软件等。
本节为非规范性内容。
在其最初的五年(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,即本文档。
本节为非规范性内容。
必须承认,HTML的许多方面乍一看似乎是毫无意义和不一致的。
HTML及其支持的DOM API,以及许多支持技术,已经由一系列不同优先级的人们在数十年的时间里开发完成,在很多情况下,这些人彼此之间并不知道对方的存在。
因此,特性来源于多个来源,并且设计方式并不总是特别一致。此外,由于网页的独特特性,实施错误往往成为事实上的标准,甚至现在是法定标准,因为内容通常会在修复这些错误之前以依赖它们的方式被无意中编写。
尽管如此,仍然努力坚持某些设计目标。这些目标将在接下来的几个小节中进行描述。
本节为非规范性内容。
为了避免将多线程的复杂性暴露给网页作者,HTML和DOM API的设计使得脚本无法检测到其他脚本的同时执行。即使在 工作线程中,设计的意图也是使实现行为可以被认为是完全串行化所有脚本在所有全局上下文中的执行。
这一通用设计原则的例外是JavaScript SharedArrayBuffer
类。使用 SharedArrayBuffer
对象,实际上可以观察到其他 代理 中的脚本同时执行。此外,由于JavaScript内存模型,存在一些情况不仅不能通过序列化的
脚本 执行来表示,而且不能通过序列化的 语句 执行来表示这些脚本中的内容。
本节为非规范性内容。
HTML 提供了多种扩展机制,可以安全地添加语义:
作者可以使用 class 属性来扩展元素,实际上创建自己的元素,同时使用最适用的现有“真实”
HTML 元素,以便浏览器和其他不知晓扩展的工具仍能较好地支持它。这就是微格式使用的方法。
作者可以通过 data-*=""
属性包含供客户端脚本或服务器端站点脚本处理的数据。这些属性保证不会被浏览器触及,允许脚本在 HTML 元素上包含数据,然后脚本可以查找和处理这些数据。
作者可以使用 <meta name="" content="">
机制包含页面范围的元数据。
作者可以使用 rel=""
机制通过注册 预定义链接类型的扩展来注释链接的具体含义。这也被微格式使用。
作者可以使用 <script type="">
机制和自定义类型嵌入原始数据,供内联或服务器端脚本进一步处理。
作者可以使用 JavaScript 原型机制扩展 API。这被脚本库广泛使用。
作者可以使用微数据功能( itemscope="" 和 itemprop=""
属性)嵌入嵌套的名称-值对数据,以便与其他应用程序和网站共享。
作者可以定义、共享和使用 自定义元素 来扩展 HTML 的词汇。 有效自定义元素名称 的要求确保了向前兼容性(因为未来不会在 HTML、SVG 或 MathML 中添加包含连字符的本地名称的元素)。
本节为非规范性内容。
本规范定义了一种用于描述文档和应用程序的抽象语言,以及一些用于与使用该语言的资源的内存表示进行交互的 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 语法中表示。
本节为非规范性内容。
本规范分为以下主要部分:
EventSource的服务器推送事件流机制,以及一种名为
Web Sockets 的双向全双工套接字协议。
此外,还有一些附录,列出了 过时的特性 和 IANA 注意事项,以及几个索引。
阅读本规范的方法与其他规范类似。首先,应该全面阅读多次。然后,至少要反向阅读一次。接着,可以通过从目录中随机挑选章节并跟踪所有交叉引用来进行阅读。
如下面的合规要求部分所述,本规范描述了多种合规类别的合规标准。特别是,有些合规要求适用于 生产者,例如作者及其创建的文档,还有些合规要求适用于 消费者,例如网页浏览器。它们可以通过要求的内容来区分:对生产者的要求说明了允许的内容,而对消费者的要求则说明了软件应该如何行动。
例如,“ foo 属性的值必须是一个 有效整数”是对生产者的要求,因为它规定了允许的值;相比之下,“ foo 属性的值必须按照
解析整数的规则进行解析”的要求是对消费者的要求,因为它描述了如何处理内容。
对生产者的要求对消费者没有任何影响。
继续上述示例,一个声明特定属性值受限于 有效整数 的要求明确地 不 意味着对消费者的要求。可能消费者实际上被要求将属性视为不透明字符串,完全不受值是否符合要求的影响。也可能(如上例所示),消费者被要求使用特定规则解析值,定义如何处理无效(在此情况下为非数字)值。
这是一个定义、要求或解释。
这是一个备注。
这是一个示例。
这是一个未解决的问题。
这是一个警告。
[Exposed =Window ]
interface Example {
// this is an IDL definition
};
variable = object.method([optionalArgument])
这是一个描述接口使用的注释。
/* this is a CSS fragment */
术语的定义实例标记为 这样。该术语的使用标记为 这样 或 这样。
元素、属性或API的定义实例标记为 this。对该元素、属性或API的引用标记为 this。
其他代码片段标记为 like this。
变量标记为 这样。
在算法中, 同步部分 中的步骤标记为 ⌛。
在某些情况下,要求以带有条件和对应要求的列表形式给出。在这种情况下,适用于条件的要求始终是紧跟在条件后的第一组要求,即使对于这些要求有多个条件组。这样的情况呈现如下:
本节非规范性。
一个基本的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
文档中始终出现在该位置的元素。它包含两个元素,
head 和 body,
以及它们之间的一个
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 的更多详细信息,建议作者查阅教程和指南。虽然本规范中包含的一些示例可能也会有所帮助,但新手作者需注意,本规范为了必要性,以一种可能难以理解的细节水平定义了语言。
本节为非规范性内容。
当 HTML 被用于创建交互式网站时,需要注意避免引入漏洞,通过这些漏洞攻击者可以破坏网站自身或用户的安全。
对这一问题的全面研究超出了本文档的范围,强烈建议作者更详细地研究这一问题。然而,本节尝试提供对 HTML 应用开发中一些常见陷阱的快速介绍。
网络的安全模型基于“来源”概念,相应地,许多对网络的潜在攻击涉及跨源操作。 [ORIGIN]
在接受不可信的输入时,例如用户生成的内容如文本评论、URL 参数中的值、来自第三方网站的消息等,必须在使用之前对数据进行验证,并在显示时正确转义。否则,恶意用户可能会执行各种攻击,从可能无害的提供虚假用户信息(如负年龄),到严重的情况,例如每当用户查看包含信息的页面时运行脚本,可能在过程中传播攻击,到灾难性的情况,例如删除服务器中的所有数据。
在编写验证用户输入的过滤器时,必须确保过滤器始终基于白名单,允许已知安全的构造,拒绝所有其他输入。基于黑名单的过滤器,仅拒绝已知的恶意输入而允许其他所有输入是不安全的,因为并不是所有的恶意内容都是已知的(例如,可能是未来发明的)。
例如,假设一个页面查看其 URL 的查询字符串来确定要显示的内容,然后网站将用户重定向到该页面以显示消息,如下所示:
< ul >
< li >< a href = "message.cgi?say=Hello" > Say Hello</ a >
< li >< a href = "message.cgi?say=Welcome" > Say Welcome</ a >
< li >< a href = "message.cgi?say=Kittens" > Say Kittens</ a >
</ ul >
如果消息只是显示给用户而没有转义,恶意攻击者可能会构造一个包含脚本元素的 URL:
https://example.com/message.cgi?say=%3Cscript%3Ealert%28%27Oh%20no%21%27%29%3C/script%3E
如果攻击者成功地说服受害用户访问此页面,攻击者选择的脚本将在页面上运行。这样的脚本可以执行任何数量的恶意操作,仅受网站提供的功能的限制:例如,如果网站是电子商务商店,这样的脚本可能导致用户在不知情的情况下进行任意多的购买。
这被称为跨站脚本攻击。
有许多构造可以用来尝试欺骗网站执行代码。以下是一些作者在编写白名单过滤器时被鼓励考虑的:
img这样的看似无害的元素时,必须对任何提供的属性进行白名单过滤。如果允许所有属性,那么攻击者可以例如使用
onload
属性来运行任意脚本。
javascript:",但用户代理可以实现(并且确实在历史上实现过)其他方案。
base
元素意味着页面中的任何带有相对链接的 script
元素都可能被劫持,同样地,任何表单提交都可能被重定向到一个恶意网站。如果网站允许用户进行具有用户特定副作用的表单提交,例如在论坛上以用户的名义发布消息、进行购买或申请护照,则必须验证请求是否确实由用户自愿发出,而不是由其他网站欺骗用户无意中发出请求。
这个问题存在是因为 HTML 表单可以提交到其他来源。
网站可以通过填充带有用户特定的隐藏令牌的表单,或通过检查 `Origin`
头来防止此类攻击。
提供用户执行他们可能不愿意执行的操作的接口的页面需要设计得足够谨慎,以避免用户被欺骗以激活该接口。
一种用户可能被欺骗的方法是,如果恶意网站将受害网站放在一个小的 iframe
中,然后通过让用户玩反应游戏来说服用户点击。例如,一旦用户开始玩游戏,恶意网站可以快速将 iframe 定位到鼠标指针下方,正当用户准备点击时,从而欺骗用户点击受害网站的界面。
为了避免这种情况,建议不期望在框架中使用的站点仅在检测到它们不在框架中时启用其接口(例如,通过将 window 对象与 top
属性的值进行比较)。
本节为非规范性内容。
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 >
本节为非规范性内容。
建议作者使用一致性检查器(也称为 验证器)来捕捉常见错误。WHATWG 维护了一个此类工具的列表: https://whatwg.org/validator/
本节为非规范性内容。
与之前版本的 HTML 规范不同,本规范详细定义了无效文档和有效文档的处理要求。
然而,即使无效内容的处理在大多数情况下是明确的,文档的合规要求仍然很重要:实际上,互操作性(即所有实现以可靠和相同或等效的方式处理特定内容)并不是文档合规要求的唯一目标。本节详细说明了仍然区分符合规范的文档和有错误的文档的一些常见原因。
本节为非规范性内容。
以前版本的 HTML 中大多数表现性特性现在已不再允许。表现性标记通常存在一些问题:
虽然可以以提供给辅助技术(AT)用户可接受体验的方式使用表现性标记(例如,使用 ARIA),但这样做比使用语义上合适的标记要困难得多。此外,即使使用这些技术,也无法帮助非 AT 用户,如文本模式浏览器用户,使页面变得可访问。
另一方面,使用与媒体无关的标记可以提供一种简单的方法,使文档能够以更适合更多用户(例如文本浏览器用户)的方式编写。
维护风格无关的站点要容易得多。例如,更改整个站点中使用 <font color="">
的颜色需要对整个站点进行更改,而对基于 CSS 的站点进行类似更改只需更改一个文件。
表现性标记往往更加冗余,因此导致文档大小更大。
由于这些原因,表现性标记在这一版本的 HTML 中已被移除。这一变化并不令人惊讶;HTML4 很多年前已弃用了表现性标记,并提供了一种模式(HTML4 Transitional)来帮助作者摆脱表现性标记;随后,XHTML 1.1 进一步将这些特性完全废弃。
HTML 中唯一剩余的表现性标记特性是 style 属性和 style 元素。
style
属性在生产环境中使用有些不被推荐,但在快速原型制作(其规则可以随后直接移入单独的样式表)和在特定情况下提供特殊样式时(在这种情况下使用单独的样式表可能不方便)是有用的。类似地, style
元素在聚合或页面特定样式中可能很有用,但一般来说,当样式适用于多个页面时,外部样式表可能更为方便。
还值得注意的是,一些以前被认为是表现性的元素在本规范中被重新定义为与媒体无关: b、 i、
hr、 s、 small和 u。
本节为非规范性内容。
HTML 的语法被约束以避免各种问题。
某些无效的语法构造在解析时,会生成非常不直观的 DOM 树。
为了使用户代理在受控环境中使用而无需实现更奇异和复杂的错误处理规则,允许用户代理在遇到 解析错误时失败。
一些错误处理行为,例如上面提到的 <table><hr>... 示例,不兼容流式用户代理(即以单次传递处理 HTML
文件的用户代理,不存储状态)。为了避免与这些用户代理的互操作性问题,任何导致这种行为的语法都被视为无效。
当基于 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©",因为即使没有最终的分号,"©" 也会被处理为 "©",从而被解释为
"©":
< a href = "?art©" > 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&copy" > Art and Copy</ a > <!-- the & has to be escaped, since © is a named character reference -->
某些语法构造已知会在旧版用户代理中引发特别微妙或严重的问题,因此被标记为不符合规范,以帮助作者避免这些问题。
例如,这就是为什么 U+0060 GRAVE ACCENT 字符(`)不允许出现在未加引号的属性中。在某些旧版用户代理中,它有时被当作引号字符处理。
某些限制纯粹是为了避免已知的安全问题。
例如,限制使用 UTF-7 的规定纯粹是为了避免作者受到利用 UTF-7 的已知跨站脚本攻击的威胁。 [UTF7]
作者意图非常不明确的标记通常被标记为不符合规范。尽早纠正这些错误可以使后续维护更容易。
当用户犯简单的打字错误时,如果能够及早捕捉到错误,这将有助于节省作者大量的调试时间。因此,本规范通常将使用与规范中定义的名称不匹配的元素名称、属性名称等视为错误。
例如,如果作者输入了 <capton> 而不是 <caption>,这将被标记为错误,作者可以立即纠正这个打字错误。
为了允许将来扩展语言语法,某些原本无害的特性被禁止。
例如,结束标签中的“属性”目前被忽略,但它们是无效的,以防将来对语言进行修改时,使用该语法特性而不与已经部署的(并且有效的!)内容冲突。
一些作者发现,总是引用所有属性并始终包括所有可选标签的做法是有帮助的,他们更倾向于从这种习惯中获得的一致性,而不是利用HTML语法的灵活性所带来的微小好处。为了帮助这些作者,符合性检查工具可以提供一种操作模式,其中强制执行这些约定。
本节是非规范性的。
除了语言的语法之外,本规范还对如何指定元素和属性进行限制。这些限制存在的原因类似:
为了避免误用具有明确意义的元素,定义了内容模型以限制元素在这种嵌套不太可能有价值的情况下的嵌套方式。
同样,为了引起作者对元素使用错误的注意,明确的语义矛盾也被视为符合性错误。
例如,在下面的片段中,语义是不合理的:分隔符不能同时是单元格,单选按钮也不能是进度条。
< 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
属性,尽管在实践中 circ
和 circle
值作为同义词接受,但禁止使用 circ
值,以简化教程和其他学习工具。允许两者没有任何好处,但会在教授语言时引起额外的混淆。
某些元素以有些古怪的方式解析(通常是历史原因),其内容模型限制旨在避免作者暴露于这些问题。
某些错误旨在帮助防止难以调试的脚本问题。
例如,这就是为什么具有相同值的两个 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.
有些作者喜欢编写可以同时作为XML和HTML解释并具有类似结果的文件。尽管这种做法在一般情况下由于涉及的各种微妙复杂性(尤其是涉及脚本、样式或任何形式的自动化序列化)而不鼓励,但本规范有一些限制旨在至少在某种程度上缓解这些困难。这使得作者在HTML和XML语法之间迁移时可以更轻松地使用此过渡步骤。
例如,围绕 lang 和
xml:lang
属性的规则相对复杂,旨在保持两者同步。
另一个例子是HTML序列化中 xmlns 属性值的限制,旨在确保无论是作为HTML还是XML处理,符合规范的文档中的元素最终都会位于相同的命名空间中。
与旨在允许将来修订语言的新语法的语法限制一样,对元素的内容模型和属性值的某些限制旨在允许HTML词汇的未来扩展。
例如,限制以U+005F下划线字符(_)开头的 target
属性的值仅限于特定的预定义值,以便将来可以引入新的预定义值,而不会与作者定义的值冲突。
某些限制旨在支持其他规范的限制。
例如,要求使用媒体查询列表的属性仅使用 有效的 媒体查询列表,加强了遵循该规范的符合性规则的重要性。
本节是非规范性的。
以下文档可能对本规范的读者感兴趣。
本架构规范为规范的作者、软件开发人员和内容开发人员提供了一个共同的参考,用于在万维网上进行可互操作的文本处理,基于Unicode标准和ISO/IEC 10646共同定义的通用字符集。涉及的主题包括“字符”、“编码”和“字符串”的使用术语、参考处理模型、字符编码的选择和标识、字符转义和字符串索引。
由于Unicode包含了大量字符并结合了世界上各种书写系统,不正确的使用可能会使程序或系统面临潜在的安全攻击。这在越来越多的产品国际化时尤为重要。本文件描述了程序员、系统分析员、标准开发人员和用户应考虑的一些安全问题,并提供了具体的建议以降低问题的风险。
网页内容无障碍指南 (WCAG) 涵盖了一系列使网页内容更具可访问性的建议。遵循这些指南将使内容对更多有残疾的人更易访问,包括盲人和低视力者、聋人和听力损失者、学习障碍者、认知限制者、行动不便者、言语障碍者、光敏感者及其组合。遵循这些指南通常也会使您的网页内容对一般用户更易用。
本规范提供了设计更易于残障人士使用的网页内容创作工具的指南。符合这些指南的创作工具将通过为残障作者提供可访问的用户界面以及通过启用、支持和促进所有作者创作可访问的网页内容来促进无障碍。
本文件提供了设计用户代理的指南,以降低残障人士在网页无障碍方面的障碍。用户代理包括浏览器和其他类型的检索和呈现网页内容的软件。符合这些指南的用户代理将通过其自身的用户界面和其他内部功能(包括与其他技术(尤其是辅助技术)通信的能力)促进无障碍。此外,所有用户,不仅仅是残障用户,都会发现符合这些指南的用户代理更易用。
本规范依赖于 Infra。 [INFRA]
本规范提到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类型的资源。
为了简化,术语如 显示、 呈现和 可见 有时可能用于指代文档呈现给用户的方式。这些术语并不意味着特指视觉媒介;它们必须被视为在其他媒介中具有等效的应用。
按照定义 并行 执行步骤,意味着这些步骤在标准中的其他逻辑(例如, 事件循环)同时运行。该标准未定义实现这一目标的精确机制,无论是时间共享协作多任务处理、纤程、线程、进程、使用不同的超线程、核心、CPU、机器等。相比之下, 立即 运行的操作必须中断当前正在运行的任务,自己运行,然后恢复之前正在运行的任务。
有关编写利用并行处理规范的指南,请参见 其他规范中的事件循环处理。
为了避免不同 并行 算法在操作相同数据时产生竞争条件,可以使用 并行队列 。
A 并行队列 表示必须按顺序运行的一系列算法步骤。
要 启动一个新的并行队列,请运行以下步骤:
令 parallelQueue 为一个新的 并行队列。
Run the following steps 并行运行以下步骤:
当为真时:
令 steps be the result of dequeuing from parallelQueue的 算法队列.
如果 steps 不为空,则运行 steps。
断言:运行 steps did not throw an exception, as steps running in parallel are not allowed to throw.
实现不需要将此作为持续运行的循环来实现。标准中的算法应易于理解,不一定对电池寿命或性能有好处。
返回 parallelQueue。
Steps running in parallel can themselves run other steps in in parallel. E.g., inside a 并行队列 内并行运行一系列步骤可能是有用的。
设想一个标准定义的 nameList (一个 列表),以及一个方法将 name 添加到 nameList,除非 nameList 已经 包含 name,在这种情况下,它将拒绝。
以下解决方案存在竞态条件:
Run the following steps 并行运行以下步骤:
返回 p.
以上两个调用可以同时运行,这意味着在步骤 3.1 中 name 不在 nameList 中,但在步骤 3.3 运行之前,它 可能被添加 ,这意味着 name 最终在 nameList 中出现了两次。
并行队列解决了这个问题。标准会令 nameListQueue 为 启动一个新的并行 队列 的结果,并将名称添加步骤定义如下:
Enqueue the following steps to nameListQueue:
返回 p.
这些步骤现在会排队,竞态得以避免。
本规范使用术语 支持的 来指用户代理是否具有能够解码外部资源语义的实现。当实现能够处理某种格式或类型的外部资源而不会忽略资源的关键方面时,该格式或类型被称为 支持的 。特定资源是否 支持的 可能取决于资源格式中使用的功能。
例如,如果可以解码并渲染PNG图像的像素数据,即使实现不知道图像还包含动画数据,该图像也被认为是支持的格式。
如果使用的压缩格式不支持,即使实现可以从文件的元数据中确定电影的尺寸,MPEG-4视频文件也不会被认为是支持的格式。
某些规范(特别是HTTP规范)所指的 表示 在本规范中被称为 资源。 [HTTP]
资源的 关键子资源 是指资源需要可用以便被正确处理的那些资源。哪些资源被认为是关键资源由定义资源格式的规范规定。
对于 CSS样式表,我们在此暂时定义它们的关键子资源是通过 @import
规则导入的其他样式表,包括由其他导入的样式表间接导入的样式表。
此定义尚未完全互操作;此外,一些用户代理似乎将背景图像或网页字体等资源视为关键子资源。理想情况下,CSS工作组将定义这一点;请参见 w3c/csswg-drafts issue #1088 以跟踪此方面的进展。
为了简化从HTML到XML的迁移,符合本规范的用户代理将在DOM和CSS的目的下,将HTML中的元素放置在 http://www.w3.org/1999/xhtml
命名空间中。术语"HTML元素"指的是该命名空间中的任何元素,即使是在XML文档中。
除非另有说明,本规范中定义或提到的所有元素都在 HTML命名空间
("http://www.w3.org/1999/xhtml")中,且本规范中定义或提到的所有属性都没有命名空间。
术语 元素类型 用于指具有给定本地名称和命名空间的元素集。例如, button 元素是具有元素类型 button的元素,这意味着它们具有本地名称"button",并且(如上所述隐含)在
HTML命名空间中。
当声明某个元素或属性被 忽略,或被视为其他值,或处理为其他内容时,这仅指节点在DOM中处理的情况。在这种情况下,用户代理不得更改DOM。
只有当内容属性的新值与其先前的值不同,才说内容属性 改变 了值;将属性设置为它已经具有的值不会改变它。
当术语 空用于属性值、 Text
节点或字符串时,表示文本的 长度 为零(即,不包含 控制字符 或U+0020空格)。
一个 HTML 元素可以有特定的 HTML 元素插入步骤、 HTML 元素连接后步骤、 HTML 元素移除步骤和 HTML 元素移动步骤 ,这些都为其元素的 本地名称定义。
HTML标准的 插入步骤 ,给定 insertedNode,定义如下:
如果 insertedNode 是一个元素,并且其 命名空间 是 HTML 命名空间, and this standard defines HTML element insertion steps for insertedNode的 本地名称, then run the corresponding HTML 元素插入步骤 ,给定 insertedNode。
如果 insertedNode is an Element
that is not on the
打开元素栈 中的 HTML解析器, then
处理内部资源链接 ,给定
insertedNode的
节点文档。
HTML 标准的 连接后步骤 ,给定 insertedNode,定义如下:
如果 insertedNode 是一个元素,并且其 命名空间 是 HTML 命名空间, and this standard defines HTML element post-connection steps for insertedNode的 本地名称定义了 HTML 元素连接后的步骤 ,则在给定 insertedNode.
HTML 标准中 移除步骤 ,给定 removedNode、 isSubtreeRoot和 oldAncestor,定义如下:
令 document 为 removedNode的 节点文档。
如果 document的 聚焦区域 是 removedNode,则将 document的 聚焦区域 设置为 document的 视口,并将 document的 相关全局对象的 导航API的 正在进行导航期间焦点更改 设置为false。
如果 removedNode 是一个元素,其 命名空间 是 HTML 命名空间, and this standard defines HTML element removing steps for removedNode的 本地名称, then run the corresponding 对应的 HTML 元素移除步骤 , 以 removedNode、 isSubtreeRoot和 oldAncestor作为参数运行。
如果 removedNode is a form-associated element with a non-null 表单所有者 and removedNode 及其 表单所有者 不再位于同一 树中,则 reset the form owner of removedNode.
如果 removedNode的 popover
属性不处于 无 Popover state, then run
the hide
popover algorithm given removedNode, false, false, false, and null.
The moving steps for the HTML Standard, given movedNode、 isSubtreeRoot和 oldAncestor, are defined as the following:
如果 movedNode 是一个元素,其 命名空间 是 HTML 命名空间, and this standard defines HTML element moving steps for movedNode的 本地名称定义了 HTML 元素移动步骤 , 那么,给定 movedNode、 isSubtreeRoot和 oldAncestor.
如果 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.
构造 "一个 Foo 对象",其中 Foo 实际上是一个接口,有时被用于代替更准确的 "实现接口 Foo的对象"。
当IDL属性的值被检索(例如通过作者脚本)时,称该属性 正在获取 值,当为其赋予新值时,称其 正在设置 值。
如果某个DOM对象被称为 实时的,则该对象上的属性和方法必须操作实际的底层数据,而不是数据的快照。
术语 插件 是指由用户代理使用的一组 实现定义的
内容处理程序,这些处理程序可以参与用户代理对
Document object, but that neither act as child
navigables of the Document nor introduce any
Node
objects to the
Document's DOM.
通常,这些内容处理程序由第三方提供,但用户代理也可以将内置的内容处理程序指定为插件。
用户代理不得将类型 text/plain
和
application/octet-stream
视为已注册的 插件。
插件的一个例子是当用户导航到PDF文件时,在 导航器 中实例化的PDF查看器。无论PDF查看器组件的实现方与用户代理的实现方是否相同,这都算作插件。然而,与用户代理分开的启动的PDF查看器应用程序(而不是使用相同的界面)不符合插件的定义。
本规范未定义与插件交互的机制,因为这被认为是用户代理和平台特定的。一些用户代理可能选择支持诸如Netscape插件API之类的插件机制;其他可能使用远程内容转换器或内置支持某些类型。事实上,本规范并不要求用户代理支持插件。 [NPAPI]
浏览器在与外部内容(例如 插件)交互时应格外小心。当第三方软件与用户代理本身具有相同的权限运行时,第三方软件中的漏洞变得与用户代理中的漏洞一样危险。
由于不同用户拥有不同的 插件 集提供了一个跟踪向量,增加了唯一识别用户的可能性,建议用户代理为每个用户支持完全相同的 插件 集。
A 字符编码,或在不产生歧义的情况下仅称为 编码 ,是一种在字节流和Unicode字符串之间转换的定义方式,如 编码中定义的那样。一个 编码 具有一个 编码名称 和一个或多个 编码标签,在编码标准中被称为编码的 名称 和 标签 。 [ENCODING]
本规范描述了与实现者相关的用户代理和与作者及创作工具实现者相关的文档的合规标准。
合规文档 是指符合所有文档合规标准的文档。为了便于阅读,这些合规要求中的一些被表述为对作者的合规要求;这些要求隐含为对文档的要求:根据定义,所有文档都假定由某个作者创建。(在某些情况下,作者本身可能是用户代理——此类用户代理需要遵守下面解释的额外规则。)
例如,如果某个要求规定“作者不得使用 foobar 元素”,则意味着文档中不允许包含名为 foobar的元素。
文档合规要求与实现合规要求之间没有隐含关系。用户代理不得自由处理不合规的文档;无论输入文档是否合规,本规范描述的处理模型都适用于实现。
用户代理分为几类(重叠),具有不同的合规要求。
支持 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系统也不能构成一致性检查器。
换句话说,有三种类型的合规标准:
一致性检查器必须检查前两类错误。简单的基于DTD的验证器只能检查第一类错误,因此根据本规范不构成一致性检查器。
为了渲 染文档或检查其合规性之外的目的处理HTML和XML文档的应用程序和工具,应根据其处理的文档的语义行事。
创作工具和标记生成器必须生成 合规文档。 适用于作者的合规性标准,在适当情况下也适用于创作工具。
创作工具可以免于严格遵守“仅将元素用于其指定目的”的要求, 但仅限于创作工具尚无法确定作者意图的程度。不过,创作工具不得自动误用元素, 或鼓励其用户这样做。
例如,使用 address 元素表示
任意联系信息并不合规;该元素只能用于标记其最近的 article 或 body 元素祖先的联系信息。
但是,由于
创作工具很可能无法判断这种差异,因此创作工具可免于该要求。不过,这并不意味着创作工具可以将 address
元素用于任何斜体文本块(例如);它只是意味着,当用户使用某个工具来插入某个
article 元素的联系信息时,
创作工具不必验证用户确实是在这样做,而不是在插入其他内容。
就合规性检查而言,编辑器必须输出与合规性检查器将要验证的程度相同的合规文档。
当创作工具用于编辑非合规文档时,它可以保留文档中在本次编辑会话期间未被编辑部分的 合规性错误(即,编辑工具允许往返处理有错误的内容)。但是,如果错误被这样保留下来, 创作工具不得声称其输出是合规的。
创作工具预计大致分为两类:基于结构 或语义数据工作的工具,以及基于特定媒体的所见即所得编辑 方式工作的工具(WYSIWYG)。
前者是创作 HTML 的工具的首选机制,因为 源信息中的结构可用于就哪些 HTML 元素和 属性最合适作出明智选择。
不过,WYSIWYG 工具是正当的。WYSIWYG 工具应该使用它们知道
合适的元素,并且不应该使用它们不知道是否合适的元素。在某些极端情况下,
这可能意味着将流元素的使用限制为少数几个元素,例如
div、 b、 i和 span ,并大量使用 style 属性。
所有创作工具,无论是否为 WYSIWYG,都应该尽最大努力使 用户能够创建结构良好、语义丰富且与媒体无关的内容。
为了与现有内容和先前规范兼容,本规范描述了两种创作格式:一种基于 XML,另一种使用 自定义格式 ,受到SGML的启发(称为 HTML语法)。实现必须至少支持这两种格式中的一种,尽管鼓励支持两者。
一些合规要求表述为对元素、属性、方法或对象的要求。这些要求分为两类:描述内容模型限制的要求和描述实现行为的要求。前者是对文档和创作工具的要求。后者是对用户代理的要求。同样,一些合规要求表述为对作者的要求;这些要求应解释为对作者生成的文档的合规要求。(换句话说,本规范不区分对作者的合规标准和对文档的合规标准。)
本规范依赖于几个其他的基础规范。
以下术语在 基础结构(Infra)中定义: [INFRA]
Unicode字符集用于表示文本数据, Encoding 定义了与 字符编码相关的要求。 [UNICODE]
本规范 引入了 基于这些规范中定义的术语,如前所述。
以下术语在 Encoding中定义: [ENCODING]
支持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]
This specification also references the <?xml-stylesheet?>
processing instruction, defined in Associating Style Sheets with XML documents.
[XMLSSPI]
本规范还非规范性地提及了 XSLTProcessor
接口及其 transformToFragment() 和
transformToDocument() 方法。
[XSLTP]
以下术语在 URL中定义: [URL]
application/x-www-form-urlencoded
formatapplication/x-www-form-urlencoded
serializer本规范还引用了多个方案和协议:
about: 方案
[ABOUT]
blob: 方案
[FILEAPI]
data: 方案
[RFC2397]
http: 方案
[HTTP]
https: 方案
[HTTP]
mailto:
方案 [MAILTO]sms: 方案
[SMS]
urn: 方案
[URN]
媒体片段语法 在 媒体片段URI中定义。 [MEDIAFRAG]
以下术语在 URL Pattern中定义: [URLPATTERN]
以下术语在HTTP规范中定义: [HTTP]
Accept` 头部Accept-Language`
头部Cache-Control`
头部Content-Disposition` 头部Content-Language`
头部Content-Range`
头部Last-Modified`
头部Range` 头部Referer` 头部以下术语在 HTTP State Management Mechanism中定义: [COOKIES]
以下术语在 Web Linking中定义: [WEBLINK]
以下术语在 Structured Field Values for HTTP中定义: [STRUCTURED-FIELDS]
以下术语在 MIME Sniffing中定义: [MIMESNIFF]
以下术语在 Fetch中定义: [FETCH]
about:blankSec-Purpose`User-Agent` 值Origin`
标头Cross-Origin-Resource-Policy`
标头RequestCredentials
枚举RequestDestination
枚举fetch() 方法以下术语在 Referrer Policy中定义: [REFERRERPOLICY]
Referrer-Policy`HTTP头
Referrer-Policy`头解析引用者政策
算法no-referrer`,`no-referrer-when-downgrade`,`origin-when-cross-origin`,`unsafe-url`引用者政策
以下术语在 Mixed Content中定义: [MIX]
以下术语在 Subresource Integrity中定义: [SRI]
以下术语在 No-Vary-Search HTTP Response Header Field中定义: [NOVARYSEARCH]
The following terms are defined in Paint Timing中定义了以下术语: [PAINTTIMING]
The following terms are defined in Navigation Timing中定义了以下术语: [NAVIGATIONTIMING]
NavigationTimingType
及其 "navigate",
"reload",
和 "back_forward"
值。The following terms are defined in Resource Timing中定义了以下术语: [RESOURCETIMING]
The following terms are defined in Performance Timeline中定义了以下术语: [PERFORMANCETIMELINE]
The following terms are defined in Long Animation Frames中定义了以下术语: [LONGANIMATIONFRAMES]
The following terms are defined in Long Tasks中定义了以下术语: [LONGTASKS]
本规范中的 IDL 片段必须按照 Web IDL的要求进行解释,以符合 IDL 片段的要求。 [WEBIDL]
以下术语在 Web IDL中定义:
[Global][LegacyFactoryFunction]
[LegacyLenientThis][LegacyNullToEmptyString]
[LegacyOverrideBuiltIns]
[LegacyTreatNonObjectAsNull]
[LegacyUnenumerableNamedProperties]
[LegacyUnforgeable]Web IDL 还定义了本规范中使用的以下类型:
ArrayBufferArrayBufferView
boolean
DOMStringdouble
Float16ArrayFunctionlongobject
Promise
Uint8ClampedArray
unrestricted double
unsigned longUSVStringVoidFunctionQuotaExceededError本规范中术语 throw 的使用定义见 Web
IDL。 DOMException
类型和以下异常名称由 Web
IDL 定义,并由本规范使用:
IndexSizeError"HierarchyRequestError"
InvalidCharacterError"
NoModificationAllowedError"
NotFoundError"NotSupportedError"InvalidStateError"SyntaxError"InvalidAccessError"
SecurityError"NetworkError"AbortError"DataCloneError"EncodingError"NotAllowedError"当本规范要求用户代理创建一个表示特定时间(可能是特殊值 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”用来指代 ECMA-262,而不是正式术语 ECMAScript,因为 JavaScript 这个术语更广为人知。
以下术语在 JavaScript 规范中定义,并在本规范中使用:
Atomics
对象Atomics.waitAsync 对象
Date 类
FinalizationRegistry
类RegExp
类SharedArrayBuffer
类SyntaxError
类TypeError
类RangeError
类WeakRef 类eval() 函数
WeakRef.prototype.deref()
函数import()
import.metatypeof 运算符delete
运算符支持 JavaScript 的用户代理还必须实现 动态代码品牌检查 提案。以下术语在那里定义,并在本规范中使用: [JSDYNAMICCODEBRANDCHECKS]
支持 JavaScript 的用户代理还必须实现 Import Text 提案。 下列术语在该提案中定义,并在本规范中使用: [JSIMPORTTEXT]
支持 JavaScript 的用户代理还必须实现 ECMAScript 国际化 API。 [JSINTL]
支持 JavaScript 的用户代理还必须实现 Temporal 提案。以下术语在那里定义,并在本规范中使用: [JSTEMPORAL]
以下术语在 WebAssembly JavaScript Interface中定义: [WASMJS]
文档对象模型 (DOM) 是文档及其内容的表示——一种模型。DOM 不仅仅是一个 API;HTML 实现的符合性标准在本规范中以对 DOM 的操作来定义。 [DOM]
实现必须支持 DOM 和在 UI Events 中定义的事件,因为本规范是根据 DOM 定义的,并且一些功能被定义为对 DOM 接口的扩展。 [DOM] [UIEVENTS]
特别地,以下功能在 DOM中定义: [DOM]
Attr 接口
CharacterData
接口Comment 接口DOMImplementation
接口Document 接口及其
doctype 属性
DocumentOrShadowRoot
接口DocumentFragment
接口DocumentType 接口
ChildNode 接口Element
接口attachShadow()
方法。Node 接口
NodeList 接口ProcessingInstruction
接口及其
目标
概念
ShadowRoot 接口
Text 接口
Range
接口HTMLCollection
接口、其
length 属性,
以及其
item() 和
namedItem()
方法
DOMTokenList
接口,以及其
value 属性和
supports 操作
createDocument()
方法createHTMLDocument()
方法createElement()
方法createElementNS()
方法getElementById()
方法getElementsByClassName()
方法append() 方法appendChild() 方法
cloneNode() 方法moveBefore() 方法
importNode() 方法
preventDefault()
方法id
属性setAttribute()
方法textContent 属性
children 属性
slotchange
事件CharacterData
node and its
替换数据
算法
Event
接口Event 及派生接口的
构造器行为EventTarget 接口
EventInit 字典类型
type
属性currentTarget
属性bubbles 属性cancelable 属性
composed 属性isTrusted 属性initEvent() 方法addEventListener()
方法EventListener
回调接口Document
is 值
MutationObserver 接口
和一般意义上的 变更
观察器 in generalAbortController 及其
信号
AbortSignal以下功能在 UI Events中定义: [UI EVENTS]
FocusEvent 接口FocusEvent
接口的 relatedTarget
属性UIEvent
接口UIEvent
接口的 view 属性beforeinput 事件
contextmenu 事件
input 事件keydown 事件keypress 事件keyup 事件以下功能在 Touch Events中定义: [TOUCH]
Touch
接口touchend 事件以下功能在 Pointer Events中定义: [POINTEREVENTS]
MouseEvent 接口
MouseEvent
接口的 relatedTarget
属性MouseEvent
接口的 button
属性MouseEventInit
字典类型PointerEvent
接口PointerEvent
接口的 pointerType
属性auxclick 事件click
事件dblclick 事件mousedown 事件mouseenter 事件mouseleave 事件mousemove 事件mouseout 事件mouseover 事件mouseup 事件pointerdown
事件pointerup 事件
pointercancel
事件wheel
事件以下事件在 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]
requestFullscreen()
fullscreenchange
High Resolution Time 提供了以下功能: [HRT]
本规范使用 File API中定义的以下功能: [FILEAPI]
Blob 接口及其
type
attribute
File 接口及其
name 和
lastModified attributes
FileList interfaceBlob的
快照状态
以下术语在 Indexed Database API中定义: [INDEXEDDB]
以下术语在 Media Source Extensions中定义: [MEDIASOURCE]
以下术语在 Media Capture and Streams中定义: [MEDIASTREAM]
以下术语在 Reporting中定义: [REPORTING]
以下功能和术语在 XMLHttpRequest中定义: [XHR]
XMLHttpRequest 接口及其
responseXML
属性
ProgressEvent
接口及其
lengthComputable、
loaded和
total 属性
FormData
接口及其关联的
条目列表
以下功能在 Battery Status API中定义: [BATTERY]
getBattery()
方法实现必须支持 Media Queries。其中定义了 <media-condition> 特性。 [MQ]
虽然本规范的实现不要求完全支持 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 Sheets (CSS)中定义: [CSS]
基本版本的 'display' 属性在 CSS中定义,并且该属性由其他CSS模块扩展。 [CSS] [CSSRUBY] [CSSTABLE]
以下术语和功能在 CSS Box Model中定义: [CSSBOX]
以下功能在 CSS逻辑属性中定义: [CSSLOGICAL]
以下术语和功能在 CSS颜色中定义: [CSSCOLOR]
以下术语在 CSS Images中定义: [CSSIMAGES]
术语 paint source 在 CSS Images Level 4 中定义,用于定义某些HTML元素与CSS 'element()'函数的交互。 [CSSIMAGES4]
以下功能在 CSS Backgrounds and Borders中定义: [CSSBG]
CSS Backgrounds and Borders 还定义了以下边框属性: [CSSBG]
以下功能在 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]
Screen 接口
LinkStyle
接口CSSStyleDeclaration
接口style
IDL属性cssText
的 CSSStyleDeclaration
StyleSheet
接口CSSStyleSheet
接口CSSStyleSheetCSSStyleSheetresize 事件
scroll 事件
scrollend
事件以下功能和术语在 CSS Syntax中定义: [CSSSYNTAX]
以下术语在 Selectors中定义: [SELECTORS]
以下功能在 CSS Values and Units中定义: [CSSVALUES]
以下功能在 CSS View Transitions中定义: [CSSVIEWTRANSITIONS]
术语 style attribute 在 CSS Style Attributes中定义。 [CSSATTR]
以下术语在 CSS Cascading and Inheritance中定义: [CSSCASCADE]
The CanvasRenderingContext2D
对象对字体的使用依赖于CSS Fonts 和 Font
Loading 规范中描述的功能,特别是 FontFace 对象和 字体来源 概念。
[CSSFONTS] [CSSFONTLOAD]
以下接口和术语在 Geometry Interfaces中定义: [GEOMETRY]
DOMMatrix 接口及相关的
m11元素、
m12元素、
m21元素、
m22元素、
m41元素和
m42元素
DOMMatrix2DInit
和
DOMMatrixInit
字典
DOMMatrix from a dictionary
和 从2D字典创建
DOMMatrix from a 2D dictionary
算法,用于 DOMMatrix2DInit
或 DOMMatrixInit
DOMPointInit
字典,以及相关的
x 和
y members
以下术语在 CSS Scoping中定义: [CSSSCOPING]
以下术语和功能在 CSS Color Adjustment中定义: [CSSCOLORADJUST]
以下术语在 CSS Pseudo-Elements中定义: [CSSPSEUDO]
以下术语在 CSS Containment中定义: [CSSCONTAIN]
以下术语在 CSS 锚点定位中定义: [CSSANCHOR]
以下术语在 Intersection Observer中定义: [INTERSECTIONOBSERVER]
以下术语在 Resize Observer中定义: [RESIZEOBSERVER]
以下接口在WebGL规范中定义: [WEBGL]
以下接口在 WebGPU中定义: [WEBGPU]
实现可能支持将WebVTT作为字幕、说明、元数据等的文本轨格式,用于媒体资源。 [WEBVTT]
本规范中使用的以下术语在 WebVTT中定义:
VTTCue 接口
The role 属性在
Accessible Rich
Internet Applications (ARIA)中定义,如下角色也是: [ARIA]
此外,以下 aria-* 内容属性在 ARIA中定义: [ARIA]
最后,下列术语在 ARIA中定义: [ARIA]
ARIAMixin
接口,具有其关联的
ARIAMixin getter 步骤
和
ARIAMixin setter 步骤
钩子,以及其
role 和
aria*
attributes
以下术语在 Content Security Policy中定义: [CSP]
report-uri directiveframe-ancestors
directivesandbox directiveSecurityPolicyViolationEvent
接口securitypolicyviolation
事件以下术语在 Service Workers中定义: [SW]
ServiceWorker interface
ServiceWorkerContainer
interfaceServiceWorkerGlobalScope
interfaceunregister
以下算法在 Secure Contexts中定义: [SECURE-CONTEXTS]
以下术语在 Permissions Policy中定义: [PERMISSIONSPOLICY]
以下功能在 Payment Request API中定义: [PAYMENTREQUEST]
虽然本规范不要求全面支持MathML(尽管至少鼓励网页浏览器支持),某些功能依赖于实现MathML的一小部分。 [MATHML]
以下功能在 Mathematical Markup Language (MathML)中定义:
a
元素annotation-xml 元素math 元素merror 元素mfrac 元素mi 元素mmultiscripts 元素mn 元素mo 元素mover 元素mpadded 元素mphantom 元素mprescripts 元素mroot 元素mrow 元素ms 元素mspace 元素msqrt 元素mstyle 元素msub 元素msubsup 元素msup 元素mtable 元素mtd 元素mtext 元素mtr 元素munder 元素munderover 元素semantics 元素accent 属性accentunder 属性columnspan 属性depth 属性fence 属性form 属性height 属性largeop 属性lspace 属性maxsize 属性minsize 属性movablelimits 属性rowspan 属性rspace 属性separator 属性stretchy 属性symmetric 属性voffset 属性width 属性displaystyle 属性mathbackground 属性mathcolor 属性mathsize 属性scriptlevel 属性虽然本规范不要求全面支持SVG(尽管至少鼓励网页浏览器支持),但某些功能依赖于实现SVG的部分内容。
实现SVG的用户代理必须实现 SVG 2 规范,而不是任何早期版本。
以下功能在 SVG 2 规范中定义: [SVG]
SVGElement
接口SVGImageElement
接口SVGScriptElement
接口SVGSVGElement
接口a 元素animate 元素animateTransform 元素circle 元素defs 元素desc 元素ellipse 元素foreignObject 元素g 元素image 元素line 元素marker 元素metadata 元素path 元素polygon 元素polyline 元素rect 元素script 元素set 元素svg 元素text 元素textPath 元素title 元素tspan 元素use 元素action 属性attributeName 属性cx 属性cy 属性d 属性dx 属性dy 属性formaction 属性height 属性href 属性hreflang 属性lengthAdjust 属性markerHeight 属性markerUnits 属性markerWidth 属性method 属性orient 属性path 属性pathLength 属性points 属性preserveAspectRatio 属性r 属性refX 属性refY 属性rotate 属性rx 属性ry 属性side 属性spacing 属性startOffset 属性textLength 属性type 属性viewBox 属性width 属性x 属性x1 属性x2 属性y 属性y1 属性y2 属性text-rendering 属性alignment-baseline 属性baseline-shift 属性clip-path 属性clip-rule 属性color 属性color-interpolation 属性cursor 属性direction 属性display 属性dominant-baseline 属性fill 属性fill-opacity 属性fill-rule 属性font-family 属性font-size 属性font-size-adjust 属性font-stretch 属性font-style 属性font-variant 属性font-weight 属性letter-spacing 属性marker-end 属性marker-mid 属性marker-start 属性opacity 属性paint-order 属性pointer-events 属性shape-rendering 属性stop-color 属性stop-opacity 属性stroke 属性stroke-dasharray 属性stroke-dashoffset 属性stroke-linecap 属性stroke-linejoin 属性stroke-miterlimit 属性stroke-opacity 属性stroke-width 属性text-anchor 属性text-decoration 属性text-overflow 属性transform 属性transform-origin 属性unicode-bidi 属性vector-effect 属性visibility 属性white-space 属性word-spacing 属性writing-mode 属性以下功能在 Filter Effects中定义: [FILTERS]
以下功能在 Compositing and Blending中定义: [COMPOSITE]
以下功能在 Cooperative Scheduling of Background Tasks中定义: [REQUESTIDLECALLBACK]
以下术语在 Screen Orientation中定义: [SCREENORIENTATION]
以下术语在 Storage中定义: [STORAGE]
以下功能在 Web App Manifest中定义: [MANIFEST]
以下术语在 WebAssembly JavaScript 接口:ESM 集成中定义: [WASMESM]
以下功能在 WebCodecs中定义: [WEBCODECS]
以下术语在 WebDriver中定义: [WEBDRIVER]
以下术语在 WebDriver BiDi中定义: [WEBDRIVERBIDI]
以下术语在 Web Cryptography API中定义: [WEBCRYPTO]
以下术语在 WebSockets中定义: [WEBSOCKETS]
以下术语在 WebTransport中定义: [WEBTRANSPORT]
以下术语在 Web Authentication: An API for accessing Public Key Credentials中定义: [WEBAUTHN]
以下术语在 Credential Management中定义: [CREDMAN]
以下术语在 Console中定义: [CONSOLE]
以下术语在 Web Locks API中定义: [WEBLOCKS]
本规范使用在 Trusted Types中定义的以下功能: [TRUSTED-TYPES]
以下术语在 WebRTC API中定义: [WEBRTC]
以下术语在 画中画 API中定义: [PICTUREINPICTURE]
以下术语在 空闲检测 API中定义:
以下术语在 Web 语音 API中定义:
以下术语在 WebOTP API中定义:
以下术语在 Web 分享 API中定义:
以下术语在 Web 智能卡 API中定义:
以下术语在 后台同步 API中定义:
以下术语在 周期性后台同步 API中定义:
以下术语在 后台获取 API中定义:
以下术语在 键盘锁 API中定义:
以下术语在 Web MIDI API中定义:
以下术语在 通用传感器 API中定义:
以下术语在 WebHID API中定义:
以下术语在 WebXR 设备 API中定义:
本规范并不 要求 支持任何特定的网络协议、样式表语言、脚本语言或超出上述列表中要求的任何 DOM 规范。然而,本规范描述的语言倾向于使用 CSS 作为样式语言,JavaScript 作为脚本语言,以及 HTTP 作为网络协议,并且多个功能假定这些语言和协议正在使用。
实现 HTTP 协议的用户代理必须同时实现 HTTP State Management Mechanism (Cookies)。 [HTTP] [COOKIES]
本规范可能在各自的章节中对字符编码、图像格式、音频格式和视频格式有某些额外要求。
强烈不建议对本规范进行厂商特定的专有用户代理扩展。文档不得使用此类扩展,因为这样做会降低互操作性并分裂用户群体,导致只有特定用户代理的用户才能访问相关内容。
所有扩展必须定义为使用扩展既不矛盾也不导致规范中定义的功能不合格。
例如,尽管强烈不建议这样做,但实现可以向控件添加一个新的 IDL 属性 "typeTime",该属性返回用户选择当前控件值所花费的时间。另一方面,定义一个出现在表单的 elements
数组中的新控件将违反上述要求,因为它将违反本规范中给出的 elements 的定义。
当需要对本规范进行中立扩展时,可以相应地更新本规范,或者可以编写一个扩展规范来覆盖本规范中的要求。当某人将本规范应用于其活动时,决定认可此类扩展规范的要求时,它将成为本规范符合性要求目的的 适用规范 。
有人可以编写一个规范,定义任何任意字节流都是合格的,然后声称他们的随机垃圾是合格的。然而,这并不意味着他们的随机垃圾实际上对所有人的目的都是合格的:如果其他人决定该规范不适用于他们的工作,那么他们可以很合法地说上述随机垃圾只是垃圾,根本不合格。就符合性而言,特定社区中的重要问题是该社区 同意 适用的是什么。
用户代理必须将不理解的元素和属性视为语义中性;将它们留在 DOM 中(对于 DOM 处理器),并根据 CSS 进行样式设置(对于 CSS 处理器),但不从中推断任何意义。
当某个功能的支持被禁用时(例如作为减轻安全问题的紧急措施,或为开发提供帮助,或出于性能原因),用户代理必须表现得好像他们完全不支持该功能,并且该功能未在本规范中提及。例如,如果通过 Web IDL 接口中的属性访问某个特定功能,该属性本身将从实现该接口的对象中省略——将属性留在对象上但使其返回 null 或抛出异常是不足够的。
在根据本规范描述的方式解析或创建的 HTML 文档 上操作的 XPath 1.0
实现(例如,作为 document.evaluate() API 的一部分)必须表现得好像已对 XPath 1.0 规范应用了以下编辑。
首先,删除以下段落:
节点测试中的 QName 使用表达式上下文中的命名空间声明扩展为 扩展名称 。这与在开始和结束标签中为元素类型名称进行扩展的方式相同,只是未使用
xmlns声明的默认命名空间:如果 QName 没有前缀,则命名空间 URI 为 null(这与属性名称的扩展方式相同)。如果 QName 有一个前缀,但在表达式上下文中没有命名空间声明,则这是一个错误。
然后,将其替换为以下内容:
节点测试中的 QName 使用表达式上下文中的命名空间声明扩展为扩展名称。如果 QName 有前缀,则该前缀必须在表达式上下文中有命名空间声明,并且相应的命名空间 URI 是与该前缀关联的命名空间 URI。如果 QName 有一个前缀,但在表达式上下文中没有命名空间声明,则这是一个错误。
如果 QName 没有前缀并且轴的主要节点类型是元素,则使用默认元素命名空间。否则,如果 QName 没有前缀,则命名空间 URI 为 null。默认元素命名空间是 XPath 表达式上下文的成员。在通过 DOM3 XPath API 执行 XPath 表达式时,默认元素命名空间的值按以下方式确定:
- 如果上下文节点来自 HTML DOM,则默认元素命名空间为 "http://www.w3.org/1999/xhtml"。
- 否则,默认元素命名空间 URI 为 null。
这相当于将 XPath 2.0 的默认元素命名空间功能添加到 XPath 1.0 中,并将 HTML 命名空间用作 HTML 文档的默认元素命名空间。这样做的目的是希望实现能够与遗留 HTML 内容兼容,同时支持本规范引入的有关 HTML 元素使用的命名空间的更改,并希望使用 XPath 1.0 而不是 XPath 2.0。
此更改是对XPath 1.0规范的 故意违反 ,旨在在保持实现与遗留内容兼容的同时,支持本规范针对 HTML 元素所使用命名空间的更改。 [XPATH10]
当输出方法为 "html"(无论是显式还是通过 XSLT 1.0 中的默认规则)时,将输出到 DOM 的 XSLT 1.0 处理器受以下影响:
如果转换程序输出的元素没有命名空间,则处理器在构造相应的 DOM 元素节点之前,必须将该元素的命名空间更改为 HTML 命名空间,将元素的本地名称 转换为 ASCII 小写 ,并将元素上的任何非命名空间属性的名称 转换为 ASCII 小写 。
此要求是对 XSLT 1.0 规范的 故意违反 , 因为本规范以一种方式更改了 HTML 的命名空间和大小写敏感规则, 否则将与基于 DOM 的 XSLT 转换不兼容。(对输出进行序列化的处理器不受影响。) [XSLT10]
本规范未明确说明 XSLT 处理如何与 HTML
解析器 基础结构交互(例如,XSLT 处理器是否表现为将任何元素放入 打开元素堆栈)。然而,XSLT 处理器在成功完成时必须 停止解析 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
的交互进行了额外的非规范性注释。
Headers/Permissions-Policy/document-domain
仅在一个引擎中支持。
本文档定义了以下 策略控制的功能:
Headers/Feature-Policy/autoplay
Headers/Permissions-Policy/autoplay
仅在一个引擎中支持。
autoplay",其 默认允许列表
为 'self'。cross-origin-isolated",其 默认允许列表 为 'self'。focus-without-user-activation”,其
默认允许列表 为 'self'。
HTML 中有很多地方接受特定的数据类型,例如日期或数字。本节描述了这些格式内容的符合性标准以及如何解析它们。
强烈建议实现者仔细检查可能考虑使用的任何第三方库,以实现以下描述的语法解析。例如,日期库可能会实现与本规范要求不同的错误处理行为,因为描述类似于本规范中使用的日期语法的规范中通常未定义错误处理行为,因此实现往往在如何处理错误方面存在很大差异。
下面描述的一些微解析器遵循一种模式,即具有一个保存解析字符串的 input 变量,以及一个指向 input 中下一个要解析的字符的 position变量。
有许多属性是 布尔属性。元素上存在布尔属性表示真值,而不存在该属性表示假值。
如果该属性存在,其值必须是空字符串或与属性规范名称进行 ASCII 大小写不敏感 匹配的值,且没有前导或尾随空格。
布尔属性上不允许使用值 "true" 和 "false"。要表示假值,必须完全省略该属性。
以下是一个已选中且禁用的复选框示例。 checked 和 disabled
属性是布尔属性。
< label >< input type = checkbox checked name = cheese disabled > Cheese</ label >
这也可以等效地写成这样:
< label >< input type = checkbox checked = checked name = cheese disabled = disabled > Cheese</ label >
你也可以混合使用样式;以下内容仍然等效:
< label >< input type = 'checkbox' checked name = cheese disabled = "" > Cheese</ label >
某些属性被称为 枚举属性,它们具有有限数量的状态。此类属性的状态通过组合属性的值、关键字/状态映射集合以及规范中还可以规定的三种特殊状态来获得。这些特殊状态分别是 无效值默认、 缺失值默认和 空值默认。
多个关键字可以映射到同一个状态。
确定属性状态时,请按照以下步骤进行:
就著作规范性而言,如果指定了枚举属性,则该属性的值必须是以下之一:
该属性的某个符合规范的关键字的 ASCII 不区分大小写 匹配,且无首尾空白字符。
空字符串,并且该属性必须定义了 空值默认 。
对于 反射 目的,任何有关键字映射到其上的状态被称为具有 规范关键字。其确定方式如下:
如果仅有一个关键字映射到该状态,则为该关键字。
如果仅有一个 符合规范 的关键字映射到该状态,则为该符合规范的关键字。
如果有两个符合规范的关键字映射到该状态,且其中之一为空字符串,则规范关键字为那个非空字符串的符合规范关键字。
否则,该状态的规范关键字将在对应属性的规范中明确给出。
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 解析整数的规则 如下所示。当调用时,必须按给定顺序执行步骤,在返回值的第一个步骤中中止。该算法将返回一个整数或一个错误。
令 input 为正在解析的字符串。
令 position 为 input中的指针,最初指向字符串的开头。
令 sign 的值为“positive”。
跳过ASCII空白字符 在 input 中给定 position。
如果 position 超过 input的末尾,则返回错误。
如果 position 指示的字符(第一个字符)是U+002D连字符-字符(-):
否则,如果 position 指示的字符(第一个字符)是U+002B加号字符(+):
+”被忽略,但它不符合规范。)如果 position 指示的字符不是 ASCII数字,则返回错误。
收集一系列代码点 that are ASCII digits from input 中给定 position, and interpret the resulting sequence as a base-ten integer. Let value 为该整数。
如果 sign 为“positive”,则返回 value,否则返回从零减去 value 的结果。
A string is a valid non-negative integer if it consists of one or more ASCII数字.
一个 有效非负整数 表示由该数字字符串表示的十进制数。
The 解析非负整数的规则 如下所示。当调用时,必须按给定顺序执行步骤,在返回值的第一个步骤中中止。该算法将返回零、正整数或错误。
令 input 为正在解析的字符串。
令 value be the result of parsing input using the 解析整数的规则.
如果 value 是一个错误,则返回错误。
如果 value 小于零,则返回错误。
返回 value。
如果一个字符串包含以下内容,则该字符串是 有效浮点数 :
一个 有效浮点数 表示通过将有效数字乘以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 解析浮点数值的规则 如下所示。该算法必须在返回值的第一个步骤中中止。该算法将返回数字或错误。
令 input 为正在解析的字符串。
令 position 为指向 input的指针,最初指向字符串的开头。
令 value 的值为1。
令 divisor 的值为1。
令 exponent 的值为1。
跳过ASCII空白 ,在 input 中给定 position。
如果 position 超过 input的末尾,则返回错误。
如果 position 指示的字符是U+002D HYPHEN-MINUS字符(-):
否则,如果 position 指示的字符(第一个字符)是U+002B PLUS SIGN字符(+):
+”被忽略,但不符合规范。)如果 position 指示的字符是U+002E FULL STOP(.),并且不是 input中的最后一个字符,并且 position 指示的字符后的字符是 ASCII数字,则 将 value 设为零并跳转到标记为 fraction的步骤。
如果 position 指示的字符不是 ASCII数字,则返回错误。
收集一系列代码点 ,这些代码点是 ASCII数字 ,从 input 中给定 position,并将结果序列解释为十进制整数。将 value 乘以该整数。
Fraction:如果 position 指示的字符是U+002E FULL STOP(.),请运行这些子步骤:
将 position 前移到下一个字符。
如果 position 超过 input的末尾,或者 position 指示的字符不是 ASCII数字,U+0065拉丁小写字母E(e),或U+0045拉丁大写字母E(E),则跳转到标记为 conversion的步骤。
如果 position 指示的字符是U+0065拉丁小写字母E字符(e)或U+0045拉丁大写字母E字符(E),则跳过这些子步骤的其余部分。
Fraction loop:将 divisor 乘以10。
将 position 前移到下一个字符。
如果 position 超过 input的末尾,则跳转到标记为 conversion的步骤。
如果 position 指示的字符是 ASCII数字,则跳回这些子步骤中标记为 fraction loop 的步骤。
如果 position 指示的字符是U+0065(e)或U+0045(E),则:
将 position 前移到下一个字符。
如果 position 超过 input的末尾,则跳转到标记为 conversion的步骤。
如果 position 指示的字符是U+002D HYPHEN-MINUS字符(-):
如果 position 超过 input的末尾,则跳转到标记为 conversion的步骤。
否则,如果 position 指示的字符是U+002B PLUS SIGN字符(+):
如果 position 超过 input的末尾,则跳转到标记为 conversion的步骤。
如果 position 指示的字符不是 ASCII数字,则跳转到标记为 conversion的步骤。
收集一系列代码点 ,这些代码点是 ASCII数字 ,从 input 中给定 position,并将结果序列解释为十进制整数。将 exponent 乘以该整数。
将 value 乘以10的 exponent次方。
Conversion:令 S 为一组有限的IEEE 754双精度浮点值,除了-0,但增加了两个特殊值:21024 和-21024。
令 rounded-value 为 S 中最接近 value的数,如果有两个同样接近的值,则选择有效数字为偶数的数。(这两个特殊值21024 和-21024 被视为具有偶数有效数字)。
如果 rounded-value 是21024 或-21024,则返回错误。
返回 rounded-value。
The 解析尺寸值的规则 如下所示。调用时,必须按给定顺序执行这些步骤,在返回值的第一个步骤中中止。该算法将返回大于或等于0.0的数字或失败;如果返回数字,则进一步分类为百分比或长度。
令 input 为正在解析的字符串。
令 position be a position variable for input, initially pointing at the start of input的开头。
跳过ASCII空白 ,在 input 中给定 position。
如果 position 超过 input 的末尾或 input 中 position 处的代码点不是 ASCII数字,则返回失败。
收集一系列代码点 ,这些代码点是 ASCII数字 ,从 input 中给定 position,并将结果序列解释为十进制整数。令 value 为该数字。
如果 position 超过 input的末尾,则返回 value 作为长度。
如果 input 中 position 处的代码点是U+002E (.),则:
将 position 前移1。
如果 position 超过 input 的末尾或 input 中 position 处的代码点不是 ASCII数字, then return the current dimension value with value、 input和 position.
令 divisor 的值为1。
一直循环:
Return the current dimension value with value、 input和 position.
The current dimension value, given value、 input和 position, is determined as follows:
如果 position 超过 input的末尾,则返回 value 作为长度。
如果 input 中 position 处的代码点是U+0025 (%),则返回 value 作为百分比。
返回 value 作为长度。
The 解析非零尺寸值的规则 如下所示。调用时,必须按给定顺序执行这些步骤,在返回值的第一个步骤中中止。该算法将返回大于0.0的数字或错误;如果返回数字,则进一步分类为百分比或长度。
令 input 为正在解析的字符串。
令 value be the result of parsing input using the 解析尺寸值的规则.
如果 value 是错误,则返回错误。
如果 value 为零,则返回错误。
如果 value 是百分比,则返回 value 作为百分比。
返回 value 作为长度。
The 解析浮点数列表的规则 如下:
令 input 为正在解析的字符串。
令 position 为 input中的一个指针,初始指向字符串的开始。
令 numbers 为一个初始为空的浮点数列表。该列表将是此算法的结果。
收集一系列代码点 that are ASCII whitespace, U+002C COMMA, or U+003B SEMICOLON characters from input given position指示。此操作会跳过任何前导分隔符。
当 position 未越过 input的末尾时:
收集一系列代码点 ,这些代码点不是 ASCII空白字符、U+002C逗号、U+003B分号、 ASCII数字、U+002E句号或U+002D连字符,位置由 position given position. This skips past leading garbage.
收集一系列代码点 ,这些代码点不是 ASCII空白字符、U+002C逗号或U+003B分号字符,位置由 position 指示,并将结果命名为 unparsed number, and let unparsed number be the result.
Let unparsed number ,得到 number using the rules for parsing floating-point number values.
如果 number 是错误,则将 number 设为零。
将 number 附加到 numbers中。
收集一系列代码点 that are ASCII whitespace, U+002C COMMA, or U+003B SEMICOLON characters from input given position指示。这会跳过分隔符。
返回 numbers。
The 解析维度列表的规则 如下。这些规则返回零个或多个由一个数字和一个单位组成的对,其中单位可以是 百分比、 相对或 绝对。
令 raw input 为正在解析的字符串。
如果 raw input is a U+002C COMMA character (,), then remove that character from raw input.
按逗号分割字符串 raw input on commas。令 raw tokens 为结果的标记列表。
令 result 为一个空的数字/单位对列表。
对于 raw tokens中的每个标记,运行以下子步骤:
令 input 为该标记。
令 position 为 input中的一个指针,初始指向字符串的开始。
令 value 为数字0。
令 unit 为 绝对。
如果 position 已超出 input的末尾,则将 unit 设为 相对 并跳至最后一个子步骤。
如果 position 处的字符是 ASCII数字,则 收集一系列代码点 that are ASCII digits from input given input, interpret the resulting sequence as an integer in base ten, and increment value 增加该整数。
如果 position 处的字符是U+002E(.),则:
收集一系列代码点 ,这些代码点由 ASCII空白 字符和 ASCII数字 组成,从 input 中给定 position。令 s 为结果序列。
Remove all ASCII whitespace in s.
如果 s 不是空字符串,则:
令 length 为 s 中的字符数(删除空格后)。
令 fraction 为将 s 解释为一个十进制整数,然后将该数除以 10length的结果。
将 fraction 加到 value中。
跳过ASCII空白 字符,在 input 中的 position。
如果 position 处的字符是U+0025百分号字符(%),则将 unit 设为 百分比。
否则,如果 position 处的字符是U+002A星号字符(*),则将 unit 设为 相对。
将一个由 value 给定的数字和 unit 给定的单位组成的条目添加到 result中。
返回列表 result。
在以下算法中, 年份 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 元素。
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:
解析月份字符串的 规则 如下。这将返回一个年份和月份,或不返回任何内容。如果在任何时候算法指示“失败”,则意味着算法在该点中止并返回无。
令 input 为要解析的字符串。
令 position 为指向 input的指针,最初指向字符串的开始。
解析月份组件 以获得 year 和 month。如果返回为空,则失败。
如果 position is not beyond the end of input的结尾之外,则失败。
返回 year 和 month。
解析月份组件的 规则如下,给定一个 input 字符串和一个 position。这将返回一个年份和月份,或不返回任何内容。如果在任何时候算法指示“失败”,则意味着算法在该点中止并返回无。
收集一系列码点 ,其为 ASCII 数字 ,自 input 的给定 position。如果收集的序列长度不足四个字符,则失败。否则,将结果序列解释为十进制整数。令 year 为该数字。
如果 year 不是大于零的数字,则失败。
如果 position 超出 input 的末尾,或者 position 处的字符不是 U+002D HYPHEN-MINUS 字符,则失败。否则,将 position 向前移动一个字符。
收集一系列码点 ,其为 ASCII 数字 ,自 input 的给定 position。如果收集的序列长度不完全是两个字符,则失败。否则,将结果序列解释为十进制整数。令 month 为该数字。
如果 month 不是范围在 1 ≤month≤ 12 之间的数字,则失败。
返回 year 和 month。
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:
解析日期字符串的 规则 如下。这将返回一个日期,或不返回任何内容。如果在任何时候算法指示“失败”,则意味着算法在该点中止并返回无。
令 input 为要解析的字符串。
令 position 为指向 input的指针,最初指向字符串的开始。
解析日期组件 以获得 year、 month和 day。如果返回为空,则失败。
如果 position is not beyond the end of input的结尾之外,则失败。
令 date 为具有 year、 month和 day的日期。
返回 date。
解析日期组件的 规则如下,给定一个 input 字符串和一个 position。这将返回一个年份、月份和日期,或不返回任何内容。如果在任何时候算法指示“失败”,则意味着算法在该点中止并返回无。
解析月份组件 以获得 year 和 month。如果返回为空,则失败。
令 maxday 为该年该月的 number of days in month month of year year。
如果 position 超出 input 的结尾或 position 处的字符不是U+002D HYPHEN-MINUS字符,则失败。否则,将 position 前移一个字符。
收集一系列代码点 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 为该数值。
如果 day 不是范围在1 ≤day≤maxday之间的数值,则失败。
返回 year、 month和 day。
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:
换句话说,如果 month 是“02”,表示二月,那么日期可以是29日,就像该年份是闰年一样。
解析无年份日期字符串的 规则 如下。这将返回一个月份和日期,或不返回任何内容。如果在任何时候算法指示“失败”,则意味着算法在该点中止并返回无。
令 input 为要解析的字符串。
令 position 为指向 input的指针,最初指向字符串的开始。
解析无年份日期组件 以获得 month 和 day。如果返回为空,则失败。
如果 position is not beyond the end of input的结尾之外,则失败。
返回 month 和 day。
解析无年份日期组件的 规则如下,给定一个 input 字符串和一个 position。这将返回一个月份和日期,或不返回任何内容。如果在任何时候算法指示“失败”,则意味着算法在该点中止并返回无。
收集一系列代码点 ,这些代码点是 U+002D HYPHEN-MINUS 字符(-), 从 input 中给定 position. If the collected sequence is not exactly zero or two characters long, then fail.
收集一系列代码点 ,这些代码点是 ASCII 数字 , 从 input 中给定 position进行收集。如果收集的序列长度不是恰好为两个字符,则操作失败。 否则,将结果序列解释为一个以十进制表示的整数。令 month be that number.
如果 month 不是范围 1 ≤month ≤ 12, then fail.
令 maxday be the number of days in month month of any arbitrary leap year (e.g. 4 or 2000).
如果 position 超出 input 的末尾,或者在 position 处的字符不是 U+002D HYPHEN-MINUS 字符,则操作失败。否则,将 position forwards one character.
收集一系列代码点 ,这些代码点是 ASCII 数字 , 从 input 中给定 position进行收集。如果收集的序列长度不是恰好为两个字符,则操作失败。 否则,将结果序列解释为一个以十进制表示的整数。令 day be that number.
如果 day 不是范围 1 ≤day≤maxday, then fail.
返回 month 和 day.
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:
秒 second 组件不能为60或61;无法表示闰秒。
解析时间字符串的 规则 如下。这将返回一个时间或不返回任何内容。如果在任何时候算法指示“失败”,则意味着算法在该点中止并返回无。
令 input 为要解析的字符串。
令 position 为指向 input的指针,最初指向字符串的开始。
解析时间组件 以获得 hour、 minute和 second。如果返回为空,则失败。
如果 position is not beyond the end of input的结尾之外,则失败。
令 time 为具有小时 hour、分钟 minute和秒 second的时间。
返回 time。
解析时间组件的 规则如下,给定一个 input 字符串和一个 position。这将返回一个小时、分钟和秒,或不返回任何内容。如果在任何时候算法指示“失败”,则意味着算法在该点中止并返回无。
收集一系列代码点 ,这些代码点是 ASCII 数字 , 从 input 中给定 position进行收集。如果收集的序列长度不是恰好为两个字符,则操作失败。 否则,将结果序列解释为一个以十进制表示的整数。令 hour be that number.
如果 position 超出 input 的末尾,或者在 position 处的字符不是 U+003A COLON 字符,则操作失败。否则,将 position forwards one character.
收集一系列代码点 ,这些代码点是 ASCII 数字 , 从 input 中给定 position进行收集。如果收集的序列长度不是恰好为两个字符,则操作失败。 否则,将结果序列解释为一个以十进制表示的整数。令 minute be that number.
令 second be 0.
如果 position 没有超出 input 的末尾,并且在 position 处的字符是 U+003A (:),则:
将 position 前移至 input.
如果 position 超出 input的末尾,或位于 input, or if the next two characters in position 开始的 input 中的接下来两个字符不是 ASCII 数字, then fail.
收集一系列代码点 ,这些代码点可以是 ASCII 数字 或是 U+002E FULL STOP 字符,从 input 中给定 position进行收集。如果 收集的序列长度为三个字符,或者它的长度超过三个字符且第三个字符不是 U+002E FULL STOP 字符,或者它包含多个 U+002E FULL STOP 字符,则操作失败。否则,将结果序列解释为一个以十进制表示的数字(可能带有小数部分)。 将 second to that number.
如果 second 不是范围 0 ≤second < 60, then fail.
返回 hour、 minute和 second.
A 本地日期和时间 由一个特定的 前置格里高利日期(包括年份、月份和日期)和一个时间(包括小时、分钟、秒和秒的小数部分)组成,但不包含时区信息。 [GREGORIAN]
如果字符串包含以下顺序的组件,则表示日期和时间的 有效本地日期和时间字符串 :
如果字符串包含以下顺序的组件,则表示日期和时间的 有效规范化本地日期和时间字符串 :
解析本地日期和时间字符串的 规则 如下。这将返回一个日期和时间,或不返回任何内容。如果在任何时候算法指示“失败”,则意味着算法在该点中止并返回无。
令 input 为要解析的字符串。
令 position 为指向 input的指针,最初指向字符串的开始。
解析日期组件 以获得 year、 month和 day。如果返回为空,则失败。
如果 position 超出 input 的结尾或 position 处的字符既不是U+0054拉丁大写字母T字符(T)也不是U+0020空格字符,则失败。否则,将 position 前移一个字符。
解析时间组件 以获得 hour、 minute和 second。如果返回为空,则失败。
如果 position is not beyond the end of input的结尾之外,则失败。
令 date 为具有年份 year、月份 month和日期 day的日期。
令 time 为具有小时 hour、分钟 minute和秒 second的时间。
返回 date 和 time。
A 时区偏移 由若干小时和分钟组成。
如果字符串符合以下任意一种情况,则表示一个 有效的时区偏移字符串 :
此格式允许时区偏移范围为-23:59到+23:59。目前,实际时区的偏移范围为-12:00到+14:00,且偏移的分钟部分通常为00、30或45。然而,由于时区是政治因素的产物,可能会发生变化。
有关使用时区偏移表示历史时间的详细信息,请参阅 全局日期和时间 部分中的使用说明和示例。
解析时区偏移字符串的 规则 如下。这将返回一个时区偏移,或者不返回任何内容。如果在任何时候算法指示“失败”,则意味着算法在该点中止并返回无。
令 input 为要解析的字符串。
令 position 为指向 input的指针,最初指向字符串的开始。
解析时区偏移组件 以获得 timezonehours 和 timezoneminutes。如果返回无,则失败。
如果 position is not beyond the end of input的结尾,则失败。
返回与UTC相差 timezonehours 小时和 timezoneminutes 分钟的时区偏移。
解析时区偏移组件的 规则如下,给定一个 input 字符串和一个 position。这将返回时区小时和分钟,或者不返回任何内容。如果在任何时候算法指示“失败”,则意味着算法在该点中止并返回无。
如果在 position 的字符是 U+005A LATIN CAPITAL LETTER Z 字符(Z),则:
令 timezonehours be 0.
令 timezoneminutes be 0.
将 position 前移至 input.
否则,如果在 position 的字符是 U+002B PLUS SIGN(+)或 U+002D HYPHEN-MINUS(-),则:
如果在 position 的字符是 U+002B PLUS SIGN(+),令 sign 为 "positive"。 否则,它是 U+002D HYPHEN-MINUS(-);令 sign be "negative".
将 position 前移至 input.
收集一系列代码点 ,这些代码点是 ASCII 数字 , 从 input 中给定 position进行收集。令 s be the collected sequence.
如果 s 的长度恰好为两个字符,则:
将 s 解释为十进制整数。令 timezonehours be that number.
如果 position 超出 input 的末尾,或者在 position 的字符不是 U+003A COLON 字符,则操作失败。否则,将 position forwards one character.
收集一系列代码点 ,这些代码点是 ASCII 数字 , 从 input 中给定 position进行收集。如果收集的序列长度不是恰好为两个 字符,则操作失败。否则,将结果序列解释为十进制整数。令 timezoneminutes be that number.
如果 s 的长度恰好为四个字符,则:
将 s 的前两个字符解释为十进制整数。令 timezonehours be that number.
将 s 的后两个字符解释为十进制整数。令 timezoneminutes be that number.
否则,操作失败。
否则,操作失败。
返回 timezonehours 和 timezoneminutes.
A 全球日期和时间 包括一个特定的 前置格里高利日期,包括年份、月份和日期,以及时间,包括小时、分钟、秒和秒的小数部分,用时区偏移量表示,包括一个带符号的小时数和分钟数。 [GREGORIAN]
如果一个字符串包含以下顺序的组件,则表示一个日期、时间和时区偏移量,它是一个 有效的全球日期和时间字符串 :
在20世纪中期UTC形成之前的日期中的时间必须用UT1(在0°经度的当代地球太阳时间)表示和解释,而不是UTC(以SI秒计时的UT1的近似)。在时区形成之前的时间必须用显式时区的UT1时间表示和解释,这些时区近似于当代格林威治伦敦所在地时间和适当本地时间之间的差异。
以下是一些用 有效全球日期和时间字符串书写的日期示例。
0037-12-13 00:00Z"1979-10-14T12:00:00.001-04:00"8592-01-01T02:09+02:09"这些日期有几个显著之处:
T"被替换为一个空格,它必须是一个单一的空格字符。字符串"2001-12-21 12:00Z"(组件之间有两个空格)不会被成功解析。
The rules to 解析全球日期和时间字符串 的规则如下。这将返回UTC时间,以及用于回溯或显示目的的相关时区偏移信息,或什么也不返回。如果算法中任何一点指出它"失败",这意味着它在该点中止并返回什么也没有。
让 input 成为被解析的字符串。
让 position 成为 input中的一个指针,最初指向字符串的开始。
解析日期组件 以获得 year、 month和 day。如果没有返回值,则失败。
如果 position 超出 input 的末尾或 position 处的字符既不是U+0054拉丁大写字母T字符(T),也不是U+0020空格字符,则失败。否则,将 position 向前移动一个字符。
解析时间组件 以获得 hour、 minute和 second。如果没有返回值,则失败。
如果 position 超出 input的末尾,则失败。
解析时区偏移组件 以获得 timezonehours 和 timezoneminutes。如果没有返回值,则失败。
如果 position is not beyond the end of input的末尾,则失败。
让 time 成为 year年、 month月、 day日、 hour时、 minute分、 second秒的时间,减去 timezonehours 小时和 timezoneminutes 分钟。这个时间点是UTC时区的时间点。
让 timezone 成为比UTC快 timezonehours 小时和 timezoneminutes 分钟的时区偏移量。
返回 time 和 timezone。
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:
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.
令 input 为正在解析的字符串。
令 position 为指向 input的指针,初始时指向字符串开头。
收集一系列代码点 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 为该数值。
如果 year 不是大于零的数值,则失败。
如果 position 超出 input 末尾,或当前位置的字符不是 U+002D 连字符(-),则失败;否则,将 position is not a U+002D HYPHEN-MINUS character, then fail. Otherwise, move position forwards one character.
如果 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.
收集一系列代码点 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 为该数值。
令 maxweek be the week number of the last day of year year.
如果 week 不在 1 ≤week≤maxweek范围内,则失败。
如果 position is not beyond the end of input末尾,则失败。
返回周年编号 year 和周编号 week。
A 持续时间 由若干秒组成。
由于月份和秒不可比较(一个月不是一个精确的秒数,而是一个其精确长度取决于从何时开始测量的时间段),本规范中定义的 持续时间 不能包括月份(或等同于十二个月的年份)。只能描述特定秒数的持续时间。
A string is a valid duration string representing a duration t if it consists of either of the following:
一个U+0050拉丁大写字母P字符,后跟以下子组件之一或多个,按给定顺序,其中天数、小时、分钟和秒数对应于 t中的相同秒数:
一个或多个 ASCII数字 ,后跟一个U+0044拉丁大写字母D字符,表示天数。
一个U+0054拉丁大写字母T字符,后跟以下子组件之一或多个,按给定顺序:
这与本规范中定义的其他一些日期和时间相关的微语法一样,基于ISO 8601定义的格式之一。 [ISO8601]
一个或多个 持续时间时间组件,每个组件具有不同的 持续时间时间组件刻度,顺序不限;表示的秒数总和等于 t中的秒数。
A 持续时间时间组件 是一个字符串,由以下组件组成:
零个或多个 ASCII空白字符。
一个或多个 ASCII数字,表示若干时间单位,按指定的 持续时间时间组件刻度 (见下文)缩放,以表示若干秒。
如果指定的 持续时间时间组件刻度 为1(即单位为秒),则可选地,一个U+002E全停止符(.),后跟一个、两个或三个 ASCII数字,表示秒的小数部分。
零个或多个 ASCII空白字符。
以下字符之一,表示时间单位的 持续时间时间组件刻度 of the time unit used in the numeric part of the duration time component:
零个或多个 ASCII空白字符。
这不是基于ISO 8601中的任何格式。它旨在成为ISO 8601持续时间格式的更易于理解的替代方案。
The rules to parse a duration string are as follows. This will return either a 持续时间 或返回空值。如果在任何时候算法指示"失败",这意味着它在该点中止并返回空值。
令 input 为被解析的字符串。
令 position 为 input中的指针,最初指向字符串的开头。
令 months、 seconds和 component count 均为零。
令 M-disambiguator 为 minutes。
此标志的另一个值为 months。它用于消除ISO8601持续时间中"M"单位的歧义,这些持续时间使用相同的单位表示月份和分钟。月份不允许,但解析为了未来的兼 容性,并避免误解在其他上下文中有效的ISO8601持续时间。
跳过ASCII空白字符 在 input 中给定 position。
如果 position 超出 input的末尾,则失败。
如果 input 中 position 指向的字符是U+0050拉丁大写字母P字符,则将 position 前进到下一个字符,将 M-disambiguator 设置为 months,并 跳过ASCII空白字符 在 input 中给定 position。
当条件为真时,执行以下操作:
令 units 未定义。它将被赋值为以下值之一: years、 months、 weeks、 days、 hours、 minutes和 seconds。
令 next character 未定义。它用于处理 input中的字符。
如果 position 超出 input的末尾,则中断。
如果 input 中 position 指向的字符是U+0054拉丁大写字母T字符,则将 position 前进到下一个字符,将 M-disambiguator 设置为 minutes, 跳过ASCII空白字符 在 input 中给定 position,并 继续。
将 next character 设置为 input 中 position指向的字符。
如果 next character 是 U+002E FULL STOP 字符(.),则令 N 为 0。(不要推进 position,该操作将在下方处理。)
否则,如果 next character 是 ASCII数字,则 收集一系列代码点 ,这些代码点是 ASCII数字 ,从 position 处的 input中收集,将结果序列解释为十进制整数,并将 N 设置为该数。
否则, next character 不是数字的一部分;失败。
如果 position 超出 input的末尾,则失败。
将 next character 设置为 input 中 position指向的字符,并将 position 前进到下一个字符。(如果 next character 之前是U+002E全停止符(.),这次仍将是该字符。)
如果 next character 是U+002E(.),则:
如果 s 是空字符串,则失败。
令 length 为 s中的字符数。
令 fraction 为将 s 解释为十进制整数,然后将该数除以 10length的结果。
将 N 增加 fraction。
跳过ASCII空白字符 在 input 中给定 position。
如果 position 超出 input的末尾,则失败。
将 next character 设置为 input 中 position指向的字符,并将 position 前进到下一个字符。
如果 next character 既不是U+0053拉丁大写字母S字符,也不是U+0073拉丁小写字母s字符,则失败。
将 units 设置为 seconds。
否则:
如果 next character 是 ASCII空白字符,则 跳过ASCII空白字符 在 input 中给定 position,将 next character 设置为 input 中 position指向的字符,并将 position 前进到下一个字符。
如果 next character 是U+0059拉丁大写字母Y字符或U+0079拉丁小写字母y字符,将 units 设置为 years ,并将 M-disambiguator 设置为 months。
如果 next character 是U+004D拉丁大写字母M字符或U+006D拉丁 小写字母m字符,并且 M-disambiguator 是 months,则将 units 设置为 months。
如果 next character 是U+0057拉丁大写字母W字符或U+0077拉丁小写字母w字符,将 units 设置为 weeks ,并将 M-disambiguator 设置为 minutes。
如果 next character 是U+0044拉丁大写字母D字符或U+0064拉丁小写字母d字符,将 units 设置为 days ,并将 M-disambiguator 设置为 minutes。
如果 next character 是U+0048拉丁大写字母H字符或U+0068拉丁小写字母h字符,将 units 设置为 hours ,并将 M-disambiguator 设置为 minutes。
如果 next character 是U+004D拉丁大写字母M字符或U+006D拉丁小写字母m字符,并且 M-disambiguator 是 minutes,则将 units 设置为 minutes。
如果 next character 是U+0053拉丁大写字母S字符或U+0073拉丁小写字母s字符,将 units 设置为 seconds ,并将 M-disambiguator 设置为 minutes。
否则,如果 next character 不是上述任何一个字符,则失败。
增加 component count。
令 multiplier 为1。
如果 units 是 years,则将 multiplier 乘以12,并将 units 设置为 months。
如果 units 是 months,则将 N 和 multiplier 的乘积加到 months中。
否则:
如果 units 是 weeks,则将 multiplier 乘以7,并将 units 设置为 days。
如果 units 是 days,则将 multiplier 乘以24,并将 units 设置为 hours。
如果 units 是 hours,则将 multiplier 乘以60,并将 units 设置为 minutes。
如果 units 是 minutes,则将 multiplier 乘以60,并将 units 设置为 seconds。
最终, units 现在是 seconds。将 N 和 multiplier 的乘积加到 seconds中。
跳过ASCII空白字符 在 input 中给定 position。
如果 component count 为零,则失败。
如果 months 不为零,则失败。
Return the duration consisting of seconds seconds.
如果字符串也是以下之一,则该字符串是一个 有效的包含可选时间的日期字符串 :
The rules to 解析日期或时间字符串 的规则如下。该算法将返回一个 日期、一个 时间、一个 全球日期和时间,或什么都不返回。如果在任何时候算法说它“失败”,这意味着它在该点中止并返回什么都没有。
令 input 为正在解析的字符串。
令 position 为 input中的指针,最初指向字符串的开头。
将 start position 设置为与 position相同的位置。
将 date present 和 time present 标志设置为true。
解析日期组件 以获取 year、 month和 day。如果解析失败,则将 date present 标志设置为false。
如果 date present 为true,并且 position 没有超出 input的末尾,并且 position 处的字符是U+0054拉丁大写字母T字符(T)或U+0020空格字符,则将 position 前进到 input中的下一个字符。
否则,如果 date present 为true,并且 position 超出 input 的末尾或 position 处的字符既不是U+0054拉丁大写字母T字符(T)也不是U+0020空格字符,则将 time present 设置为false。
否则,如果 date present 为false,将 position 设置回与 start position相同的位置。
如果 time present 标志为true,则 解析时间组件 以获取 hour、 minute和 second。如果解析失败,则失败。
如果 date present 和 time present 标志都为true,但 position 超出 input的末尾,则失败。
如果 date present 和 time present 标志都为true, 解析时区偏移组件 以获取 timezonehours 和 timezoneminutes。如果解析失败,则失败。
如果 position is not beyond the end of input的末尾,则失败。
如果 date present 标志为true且 time present 标志为false,则令 date 为具有 year、 month和 day的日期,并返回 date。
否则,如果 time present 标志为true且 date present 标志为false,则令 time 为具有 hour、 minute和 second的时间,并返回 time。
否则,令 time 为年 year、月 month、日 day、小时 hour、分钟 minute、秒 second的时间减去 timezonehours 小时和 timezoneminutes 分钟,该时间点为UTC时区的时间点;令 timezone 为距离UTC的 timezonehours 小时和 timezoneminutes 分钟;并返回 time 和 timezone。
一些已废弃的传统属性使用 解析传统颜色值的规则解析颜色,给定一个字符串 input。 它们将返回一个 CSS 颜色或失败。
如果 input is the empty string, then return failure.
Strip leading and trailing ASCII whitespace from input.
如果 input 是 ASCII
大小写不敏感 匹配 "transparent", then return failure.
如果 input 是 ASCII 大小写不敏感 匹配到 命名颜色之一,则返回与该关键字对应的 CSS 颜色。 [CSSCOLOR]
CSS2 系统颜色 不被识别。
如果 input的 代码点长度 为四, 且 input is U+0023 (#), and the last three characters of input are all ASCII 十六进制数字,则:
令 result 为一个 CSS 颜色。
将 input 的第二个字符解释为十六进制数字;将 result 的红色分量设为该数字乘以 17 的结果。
将 input 的第三个字符解释为十六进制数字;将 result 的绿色分量设为该数字乘以 17 的结果。
将 input 的第四个字符解释为十六进制数字;将 result 的蓝色分量设为该数字乘以 17 的结果。
返回 result。
Replace any code points greater than U+FFFF in
input (i.e., any characters that are not in the basic multilingual plane) with "00".
如果 input的 代码点长度 大于 128,则截断 input, leaving only the first 128 characters.
如果 input is U+0023 (#), then remove it.
将 input 中的任何非 ASCII 十六进制数字 with U+0030 (0).
当 input的 代码点长度 为零或不是三的倍数时,在 input.
将 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).
如果 length 大于 8,则移除每个组件中的前 length-8 个字符,并令 length be 8.
当 length 大于二且每个组件的第一个字符为 U+0030 (0) 时,移除该字符并将 length by one.
如果 length is 仍然 greater than two, truncate each component, leaving only the first two characters in each.
令 result 为一个 CSS 颜色。
将第一个组件解释为十六进制数字;将 result 的红色分量设为该数字。
将第二个组件解释为十六进制数字;将 result 的绿色分量设为该数字。
将第三个组件解释为十六进制数字;将 result 的蓝色分量设为该数字。
返回 result。
一个 空格分隔的标记集 是一个包含零个或多个单词(称为标记)的字符串,这些单词由一个或多个 ASCII 空白字符分隔,其中单词由一个或多个字符组成,这些字符都不是 ASCII 空白字符。
一个包含 空格分隔的标记集 的字符串可以有前导或尾随的 ASCII 空白字符。
一个 无序的唯一空格分隔标记集 是一个 空格分隔的标记集 ,其中的标记没有重复。
一个 有序的唯一空格分隔标记集 是一个 空格分隔的标记集 ,其中的标记没有重复,但标记的顺序是有意义的。
空格分隔的标记集 有时具有定义的允许值集合。当定义了允许值集合时,标记必须全部来自该允许值列表;其他值不符合规范。如果没有提供这样的允许值集合,则所有值都是符合规范的。
如何比较 空格分隔的标记集 中的标记(例如,区分大小写或不区分大小写)是按集合来定义的。
一个 逗号分隔的标记集 是一个包含零个或多个标记的字符串,每个标记之间用一个 U+002C 逗号字符(,)分隔,其中标记由零个或多个字符组成,既不以 ASCII 空白字符开头或结尾,也不包含任何 U+002C 逗号字符(,),并且可以选择性地被 ASCII 空白字符包围。
例如,字符串 " a ,b,,d d " 由四个标记组成:"a","b",空字符串和
"d d"。每个标记周围的前导和尾随空白字符不计入标记的一部分,并且空字符串可以是一个标记。
逗号分隔的标记集 有时对有效标记的构成有进一步的限制。当定义了这些限制时,标记必须全部符合这些限制;其他值是不符合规范的。如果没有规定这样的限制,则所有值都是符合规范的。
一个 有效的哈希名称引用 到一个类型为 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:
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]
一个 唯一内部值 是一个可序列化、按值可比较且从不暴露给脚本的值。
要创建一个 新的唯一内部值,返回一个从未被此算法返回过的 唯一内部值 。
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,用作 URL 的 iframe
srcdoc 文档。
[ABOUT]
这样的 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 具有非空的 查询,而与 Document的 URL 匹配 about:blank不同。换句话说,所有 URLs that 匹配
about:srcdoc only vary in their fragment.
解析 URL 是将一个字符串转换为其表示的 URL 记录 的过程。虽然这个过程在 URL中有定义,但 HTML 标准定义了几个封装器来抽象基础 URL 和编码。 [URL]
大多数新的 API 应该使用 解析 URL。较旧的 API 和 HTML 元素可能需要使用 编码解析 URL。当需要自定义基础 URL 或不希望使用基础 URL 时, URL 解析器 也可以直接使用。
要 解析 URL,给定一个字符串 url,相对于
Document 对象或 环境设置对象
environment,执行以下步骤。这些步骤返回失败或一个 URL。
让 baseURL 为 environment的 基础 URL,如果 environment 是一个 Document 对象;否则为
environment的 API 基础
URL。
Return the result of applying the URL parser to url, with baseURL。
要 编码解析 URL,给定一个字符串 url,相对于一个
Document 对象或 环境设置对象
environment,执行以下步骤。这些步骤返回失败或一个
URL。
让 encoding 为 UTF-8。
如果 environment 是一个 Document
对象,则将 encoding
设置为 environment的 字符编码。
否则,如果 environment的 相关全局对象 是一个
Window 对象,将 encoding 设置为
environment的 相关全局对象的 关联
Document的 字符编码。
让 baseURL 为 environment的 基础 URL,如果 environment 是一个 Document 对象;否则为
environment的 API 基础
URL。
Return the result of applying the URL parser to url, with baseURL 和 encoding。
要 编码解析并序列化 URL,给定一个字符串 url,相对于一个 Document 对象或
环境设置对象
environment,执行以下步骤。这些步骤返回失败或一个字符串。
让 url 为 编码解析 URL 的结果,给定 url,相对于 environment。
如果 url 失败,则返回失败。
Return the result of applying the URL serializer to url.
The 回退基础 URL 是指 Document 对象 document 的
URL
记录 ,通过以下步骤获得:
如果 document 是 一个 iframe
srcdoc 文档:
断言: document的 about 基础 URL is non-null.
返回 document的 about 基础 URL.
如果 document的 URL 匹配
about:blank ,
并且 document的 about 基础 URL 不为 null,则返回
document的 about 基础 URL.
返回 document的 URL.
To set the URL for a Document document 设置一个 URL
记录 url:
将 document的 URL 设置为 url.
Respond to base URL changes given document.
To respond to base URL changes for
a
Document document:
用户代理应当更新任何向用户展示受影响 URL 或由该 URL 派生的数据的用户界面元素。例如,展示 超链接的 url的状态栏,
或展示由 q、 blockquote、
ins、 del
元素的 cite attribute.
对每一个 descendant 属于 document的 包含 shadow 的所有后代:
考虑推测性加载 ,参数为 document.
这意味着更改基础 URL 不会影响例如由 img 元素显示的图片。因此,
后续通过脚本访问 src IDL 属性时,
将返回一个新的 绝对 URL ,但可能不再对应于当前显示的图片。
要 创建一个潜在的 CORS 请求,给定一个 url、 destination、 corsAttributeState和一个可选的 同源回退标志,执行以下步骤:
令 mode 为 "no-cors",如果 corsAttributeState
是 无 CORS,否则为 "cors"
otherwise.
如果设置了 同源回退标志 且 mode 为 "no-cors",则将 mode
设置为 "same-origin".
令 credentialsMode 为 "include".
如果 corsAttributeState 是 匿名,则将 credentialsMode 设置为
"same-origin".
返回一个新的 请求 ,其 URL 为 url, 目的地 为 destination, 模式 为 mode, 凭证模式 为 credentialsMode,且其 use-URL-credentials 标志 is set.
资源的 内容类型元数据 必须以与 MIME Sniffing要求一致的方式获取和解释。 [MIMESNIFF]
资源的 计算 MIME 类型 必须以与 MIME Sniffing要求一致的方式确定。 [MIMESNIFF]
对于 图像的嗅探规则、 区分资源是文本还是二进制的规则和 音频和视频的嗅探规则 也在 MIME Sniffing中定义。这些规则返回一个 MIME 类型 作为结果。 [MIMESNIFF]
务必严格遵守 MIME Sniffing 中的规则。当用户代理使用不同于服务器预期的内容类型检测启发式方法时,可能会发生安全问题。更多详细信息,请参见 MIME Sniffing。 [MIMESNIFF]
meta
元素中提取字符编码The algorithm for extracting a
character encoding from a meta element,
given a string s,如下所示。该算法返回一个字符编码或者不返回任何值。
设 position 为指向 s的指针,初始时指向字符串的开始。
循环: 找到 position 之后的 s that are an ASCII
case-insensitive match for the word "charset". If no such match is found, return nothing.
Skip any ASCII
whitespace that immediately follow the word "charset" (there might not be any).
如果下一个字符不是 U+003D 等号 (=),则将 position 移动到指向该下一个字符之前,并返回到标记为 循环的步骤。
跳过紧跟在等号之后的任何 ASCII 空白字符 (可能没有)。
处理下一个字符如下:
该算法与 HTTP 规范中的那些算法不同(例如,HTTP 不允许使用单引号,并且要求支持一个不被该算法支持的反斜杠转义机制)。虽然该算法用于历史上与 HTTP 相关的上下文中,但实现所支持的语法已经有一段时间偏离。 [HTTP]
在所有当前引擎中均受支持。
A CORS 设置属性 是一个 枚举属性 , 具有以下关键字和状态:
| 关键字 | 状态 | 简要描述 |
|---|---|---|
anonymous
|
匿名 | 对元素的请求 将其
模式 设置为
"cors",并将其
凭证模式 设置为 "same-origin"。
|
use-credentials
|
使用凭证 | 对元素的请求 将其 模式 设置为
"cors",并将其 凭证模式 设置为 "include"。
|
大多数受 CORS 设置属性 管辖的请求将通过 创建潜在 CORS 请求 算法进行。
对于更现代的功能,其中请求的 模式 始终为
"cors",某些 CORS
设置属性 已被重新定义为具有略有不同的含义,其中它们仅影响 请求的 凭证模式。为了进行此转换,我们定义 CORS 设置属性凭证模式 for a given CORS
settings attribute to be determined by switching on the attribute's state:
A 引荐政策属性 是一个 枚举属性。每个 引荐政策, 包括空字符串,都是该属性的关键字,对应一个同名的状态。
这些状态对各种 fetch 请求 的处理模型的影响在本规范中有更详细的定义,包括 Fetch和 Referrer Policy。 [FETCH] [REFERRERPOLICY]
几个信号可以影响用于给定 fetch 请求的处理模型; 引荐政策属性 只是其中之一。通常,这些信号的处理顺序为:
首先,存在一个 noreferrer
链接类型;
然后是 引荐政策属性的值;
最后是 `Referrer-Policy`
HTTP 头部。
所有当前引擎都支持。
A nonce 内容
属性表示一个加密 nonce(“仅使用一次的数字”),可以由 内容安全策略 用来决定是否允许给定的 fetch 请求继续进行。其值为文本。 [CSP]
具有 nonce 内容属性的元素
确保该加密 nonce 只暴露给脚本(而不会暴露给 CSS 属性选择器之类的侧信道),
其做法是从内容属性中取得值,将其移动到一个名为
[[CryptographicNonce]]的内部槽中,通过 HTMLOrSVGOrMathMLElement
接口混入将其暴露给脚本,并将内容属性设置为空字符串。除非另有规定,
该槽的值为空字符串。
element.nonce
返回为 element的加密 nonce 设置的值。如果未使用 setter,
则该值将是在 nonce
内容属性中最初找到的值。
element.nonce = value
更新 element的加密 nonce 值。
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,该行为就是在其中
引入的。
如果 element 未 include HTMLOrSVGOrMathMLElement,
则返回。
如果 localName 不是 nonce ,或
namespace 不为 null,则返回。
如果 value 为 null,则将 element的 [[CryptographicNonce]] 设置为 空字符串。
否则,将 element的 [[CryptographicNonce]] 设置为 value。
每当一个 including
HTMLOrSVGOrMathMLElement 变为
浏览上下文连接时,用户
代理必须对 element执行以下步骤:
令 CSP list 为 element的 shadow-including root的 policy container的 CSP list。
如果 CSP list 包含通过标头交付的 Content
Security Policy,并且
element 具有一个 nonce
内容属性
且其值不是空字符串,则:
令 nonce 为 element的 [[CryptographicNonce]]。
Set an attribute value for
element using "nonce"
and the empty
string.
将 element的 [[CryptographicNonce]] 设置为 nonce。
如果 element的 [[CryptographicNonce]] 未被恢复,那么它 此时将为空字符串。
The cloning steps for elements that
include HTMLOrSVGOrMathMLElement 的元素,给定
node、 copy和 subtree are to set copy的 [[CryptographicNonce]] 设置为
node的 [[CryptographicNonce]]。
所有当前引擎都支持。
一个 延迟加载属性 是一个 枚举属性 , 具有以下关键字和状态:
| 关键字 | 状态 | 简要描述 |
|---|---|---|
lazy
|
延迟 | 用于在满足某些条件之前推迟获取资源。 |
eager
|
立即 | 用于立即获取资源;默认状态。 |
该属性指示用户代理立即获取资源,或根据属性的当前状态,在满足与元素相关的一些条件之后再获取资源。
The will lazy load element steps, given an element element, are as follows:
每个 img、 audio、 video和 iframe 元素都有
关联的
惰性加载恢复步骤,初始为 null。
每个 video 元素
还关联有 海报惰性加载恢复步骤,
初始为 null。
对于 img、
audio、 video和 iframe 元素
将要惰性加载时,这些步骤会在
惰性加载交叉观察器的回调中触发,或者当它们的 惰性加载
属性 被设置为 Eager
状态时运行。这会使元素继续加载。对于 video 元素,也会同时运行 海报惰性加载恢复步骤 。
每个 Document 都有一个 延迟加载交叉观察器,最初设置为 null,但可以设置为一个 IntersectionObserver
实例。
要 开始交叉观察一个延迟加载元素 element,执行以下步骤:
将 doc 设为 element的 节点文档。
如果 doc的 延迟加载交叉观察器 为 null,
将其设置为一个新的
IntersectionObserver
实例,初始化如下:
意图是使用
IntersectionObserver
构造函数的原始值。然而,我们被迫使用本规范中的 JavaScript 暴露构造函数,直到 Intersection Observer
为规范中的使用提供低级钩子。请参见跟踪此问题的 bug w3c/IntersectionObserver#464
。 [INTERSECTIONOBSERVER]
The callback 为以下步骤,参数为 entries 和 observer:
对 entries 中的每一个 entry 需使用一种不会触发开发者可修改的数组访问器或迭代钩子的方法进行迭代:
令 resumptionSteps 为 null。
如果 entry.isIntersecting
为 true,则将 resumptionSteps 设为 entry.target的
惰性加载恢复步骤。
令 posterResumptionSteps 为 null。
如果 entry.isIntersecting
为 true 且 entry.target
是一个
video
元素,则将 posterResumptionSteps 设为该 video
元素的 海报惰性加载恢复步骤。
如果 resumptionSteps 为 null 且 posterResumptionSteps 为 null, 则返回。
Stop
intersection-observing a lazy loading element for
entry.target.
如果 resumptionSteps 不为 null,则:
如果 posterResumptionSteps 不为 null,则:
将该 video
元素的 海报惰性加载恢复步骤
设为 null。
调用 posterResumptionSteps。
这里的意图是使用
isIntersecting
和
target
getter 的原始值。详见 w3c/IntersectionObserver#464。
[INTERSECTIONOBSERVER]
The options 是一个 IntersectionObserverInit
字典,包含如下的字典成员:«[ "scrollMargin" → 惰性加载滚动边距 ]»
这样可以在滚动时获取图片,即便该图片尚未 —— 但即将 —— 与视口相交。
The 惰性加载滚动边距 建议意味着该
值可能动态变化,但 IntersectionObserver
API 并不支持更改滚动
边距。详见问题 w3c/IntersectionObserver#428。
调用 doc的 延迟加载交叉观察器的 observe
方法,以 element 作为参数。
意图是使用 observe
方法的原始值。参见 w3c/IntersectionObserver#464。
[INTERSECTIONOBSERVER]
要 停止交叉观察延迟加载元素 element,执行以下步骤:
将 doc 设为 element的 节点文档。
调用 doc的 延迟加载交叉观察器的 unobserve
方法,以 element 作为参数。
意图是使用 unobserve
方法的原始值。参见 w3c/IntersectionObserver#464。
[INTERSECTIONOBSERVER]
The 延迟加载滚动边距 是一个
实现定义 的值,但有以下建议供参考:
设置一个最小值,以便在正常使用模式下,大多数情况下,资源会在它们进入视口之前加载。
典型的滚动速度:对于具有较快典型滚动速度的设备,增加该值。
当前滚动速度或惯性:用户代理可以尝试预测滚动将在哪个位置停止,并相应调整该值。
网络质量:对于慢速或高延迟连接,增加该值。
用户偏好可能会影响该值。
为了 保护隐私 , 延迟加载滚动边距 不应泄露额外的信息。例如,当前设备的典型滚动速度可能不够精确,以免引入新的指纹识别向量。
A 阻塞属性 明确表示在获取外部资源时应阻止某些操作。这些操作可以被阻止的由 可能的阻塞令牌表示,这些令牌以字符串形式列于下表:
| 可能的阻塞令牌 | 描述 |
|---|---|
"render"
|
该元素是 可能阻塞渲染的。 |
将来可能会有更多的 可能的阻塞令牌。
一个 阻塞属性 必须具有一个值,该值是一个 唯一的以空格分隔的令牌无序集合,每个令牌都是 可能的阻塞令牌。一个 支持的令牌 of a blocking attribute are the 可能的阻塞令牌。任何元素最多只能有一个 阻塞属性。
The 阻塞令牌集 是针对一个元素 el 的以下步骤的结果:
让 value 为 el的 阻塞属性的值,如果不存在这样的属性,则为 空字符串。
将 value to value, ASCII 小写。
让 rawTokens 为 按 ASCII 空白字符分割 value on ASCII whitespace的结果。
返回一个包含 rawTokens 中所有 可能的阻塞令牌的集合。
An element is potentially render-blocking if its 阻塞令牌集
包含 "render",
或者如果它是
隐式潜在渲染阻塞的,这将在各个元素中定义。
默认情况下,元素不是 隐式潜在渲染阻塞的。
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 目的地. |
反射的构建块如下:
A 反射目标 是一个元素或 ElementInternals
对象。通常从上下文中可以清楚地确定,并且通常与
反射 IDL 属性的接口相同。当
反射目标是
ElementInternals
对象时,它总是与该接口相同。
A 反射 IDL 属性 是一个属性接口成员。
A 反射内容属性名称 是一个字符串。当 反射目标 是一个元素时,它表示一个内容属性的本地名称,其命名空间为
null。当 反射目标 是一个 ElementInternals
对象时,它表示 反射目标的 目标元素的 内部内容属性映射的一个键。
A 反射 IDL 属性 可以被定义为 反射 a 反射内容属性名称 的 反射目标。通常,这意味着 IDL 属性的 getter 返回内容属性的当前值,setter 则将内容属性的值更改为给定值。
反射目标 具有以下关联算法:
对于一个 反射目标 ,如果它是一个元素 element,这些算法定义如下:
对于一个 反射目标
,如果它是一个 ElementInternals
对象
elementInternals,这些算法定义如下:
这会导致
ElementInternals
对象出现一些冗余的数据结构,因为其 目标元素的 内部内容属性映射
不能直接操作,因此反射只发生在单向。这种方法尽管如此,仍被选择以减少定义在 反射目标 之间共享的 IDL 属性的错误,并从通用 API 语义中受益。
类型为 DOMString
或
DOMString?
的 IDL 属性如果 反射 枚举
内容属性,则可以
限制为仅已知值。
根据下面的处理模型,这些将导致这些 IDL 属性的 getter 仅返回这些枚举属性的关键字,或者空字符串或 null。
如果一个 反射的 IDL 属性 的
类型为 DOMString:
getter 的步骤是:
让 attributeDefinition 成为 element的内容属性的属性定义,该属性的命名空间为 null,局部名称为 反射内容属性名称。
如果 attributeDefinition 表示它是一个 枚举属性 并且 反射的 IDL 属性 被定义为 仅限于已知值:
如果 contentAttributeValue 不对应于 attributeDefinition 的任何状态(例如,它为 null 并且没有 缺失值默认值),或者如果它 在 attributeDefinition 的状态中没有关联的关键字值,则返回空字符串。
Return the canonical keyword for the state of attributeDefinition 对应于 contentAttributeValue corresponds to.
如果 contentAttributeValue 为 null,则返回空字符串。
返回 contentAttributeValue。
如果一个 反射的 IDL 属性 的类型是
DOMString?:
getter 的步骤是:
令 element 为运行 this的 get the element.
令 contentAttributeValue 为运行 this的 get the content attribute.
令 attributeDefinition 为 element的内容属性的属性定义,该内容属性的命名空间为 null,且局部名称为 reflected content attribute name.
如果 attributeDefinition 指示其为 枚举属性:
断言: contentAttributeValue 对应于 attributeDefinition.
如果 contentAttributeValue 对应于 attributeDefinition with no associated keyword value, then return null.
Return the canonical keyword for the state of attributeDefinition 中 contentAttributeValue corresponds to.
返回 contentAttributeValue.
如果 反射的IDL属性 的类型为 USVString,可选地
视为URL:
getter步骤如下:
如果 contentAttributeValue is null, then return the empty string.
令 urlString be the result of encoding-parsing-and-serializing a URL given contentAttributeValue,以 element的 节点文档.
如果 urlString 不是失败,则返回 urlString.
返回 contentAttributeValue, 转换为标量值字符串.
这对应于 布尔内容属性的规则。
If a 反射的 IDL 属性 的类型是 long,
可选地 限制为非负数 并且可选地具有 默认值
defaultValue:
getter 的步骤是:
如果 contentAttributeValue 不为 null:
让 parsedValue 成为 整数解析 contentAttributeValue 的结果,如果 反射的 IDL 属性 不是 限制为非负数;否则是 非负整数解析 contentAttributeValue的结果。
如果 parsedValue 不是错误且在 long
范围内,则返回 parsedValue。
如果 反射的 IDL 属性 具有 默认值,则返回 defaultValue。
如果 反射的 IDL 属性 是 限制为非负数,则返回 −1。
返回 0。
setter 的步骤是:
如果 反射的 IDL 属性 是 限制为非负数
且给定的值为负,则抛出一个
"IndexSizeError" DOMException。
如果一个 反射的 IDL 属性 的类型是 unsigned long,
可选地 限制为仅正数、 限制为仅正数(带回退),或 夹紧到范围
[clampedMin,
clampedMax],并且可选地具有 默认值 defaultValue:
getter 的步骤是:
让 minimum 为 0。
如果 反射的 IDL 属性 是 仅限正数 或 仅限正数(带回退),则将 minimum 设置为 1。
如果 反射的 IDL 属性 是 夹紧到范围,则将 minimum 设置为 clampedMin。
让 maximum 为 2147483647,如果 反射的 IDL 属性 不是 夹紧到范围;否则为 clampedMax。
如果 contentAttributeValue 不为 null:
让 parsedValue 成为 非负整数解析 contentAttributeValue的结果。
如果 parsedValue 不是错误且在范围 minimum 到 maximum(包含)内,则返回 parsedValue。
如果 parsedValue 不是错误且 反射的 IDL 属性 是 夹紧到范围:
如果 parsedValue 小于 minimum,则返回 minimum。
返回 maximum。
如果 反射的 IDL 属性 具有 默认值,则返回 defaultValue。
返回 minimum。
setter 的步骤是:
如果 反射的 IDL 属性 是 仅限正数
且给定值为 0,则抛出一个
"IndexSizeError" DOMException。
让 minimum 为 0。
如果 反射的 IDL 属性 是 仅限正数 或 仅限正数(带回退),则将 minimum 设置为 1。
让 newValue 为 minimum。
如果 反射的 IDL 属性 具有 默认值,则将 newValue 设置为 defaultValue。
如果给定值在范围 minimum 到 2147483647(包含)内,则将 newValue 设置为该值。
夹紧到范围 对 setter 步骤没有影响。
如果一个 反射的 IDL 属性 的类型是 double,
可选地 限制为仅正数
,并且可选地具有 默认值
defaultValue:
getter 的步骤是:
如果 contentAttributeValue 不为 null:
让 parsedValue 成为 浮点数解析 contentAttributeValue的结果。
如果 parsedValue 不是错误且大于 0,则返回 parsedValue。
如果 parsedValue 不是错误且 反射的 IDL 属性 不是 仅限正数,则返回 parsedValue。
如果 反射的 IDL 属性 具有 默认值,则返回 defaultValue。
返回 0。
setter 的步骤是:
如果 反射的 IDL 属性 是 仅限正数 且给定值不大于 0,则返回。
值 Infinity 和 Not-a-Number (NaN) 在设置时会抛出异常,如 Web IDL中定义。 [WEBIDL]
如果一个 反射的IDL属性 的类型为 DOMTokenList,
那么它的getter步骤是返回一个 DOMTokenList
对象,
其关联的元素为
this ,关联的属性的本地名称为 反射内容属性名称。
规范作者不能在
ElementInternals上反射这种类型的IDL属性。
如果一个 反射的IDL属性 的类型为
T?,
其中 T 是 Element
或继承自
Element的接口,那么以
attr 作为 反射内容属性名称:
它的 反射目标 有一个 显式设置的 attr-element, which is a weak reference to an element or null. It is initially null.
它的 反射目标 reflectedTarget 有一个 获取 attr-关联元素 的算法,执行以下步骤:
令 element 为运行 reflectedTarget的 获取元素.
令 contentAttributeValue 为运行 reflectedTarget的 获取内容属性.
如果 reflectedTarget的 显式设置的 attr-element 不为 null:
如果 reflectedTarget的 显式设置的 attr-element 是 element的任意一个shadow-including祖先的后代 ,则返回 reflectedTarget's shadow-including ancestors, then return reflectedTarget's 显式设置的 attr-element.
Return null.
否则,如果 contentAttributeValue 不为null,返回第一个满足以下条件的 candidate元素,按 树顺序:
如果没有这样的元素,则返回null。
返回null。
getter步骤是返回运行 this的 获取 attr-关联元素.
setter步骤是:
如果给定值为null,则:
设置 this的 显式设置的 attr-element to null.
返回。
设置 this的 显式设置的 attr-element to a weak reference to the given value.
仅对元素 反射目标 :以下 属性变更步骤,给定 element、 localName、 oldValue、 value和 namespace,用于在内容属性和IDL属性之间进行同步:
如果 localName 不是 attr 或 namespace is not null, then return.
设置 element的 显式设置的 attr-element to null.
这种类型的反射IDL属性
强烈建议其标识符以"Element"结尾,以保持一致性。
如果一个 反射的IDL属性 的类型为
FrozenArray<T>?,
其中 T 是
Element
或继承自 Element的接口,
那么以
attr 作为 反射内容属性名称:
它的 反射目标 有一个 显式设置的 attr-elements, which is either a list of weak references to elements or null. It is initially null.
它的 反射目标 有一个 缓存的 attr-关联元素, which is a list of elements. It is initially « ».
它的 反射目标 有一个 缓存的 attr-关联元素对象,
是一个 FrozenArray<T>?. It is
initially null.
它的 反射目标 reflectedTarget 有一个 获取 attr-关联元素 的算法,执行以下步骤:
令 elements 为一个空的 列表.
令 element 为运行 reflectedTarget的 获取元素.
如果 reflectedTarget的 显式设置的 attr-elements 不为 null:
遍历 reflectedTarget in reflectedTarget's 显式设置的 attr-elements:
如果 attrElement 不是 element的任意一个shadow-including祖先的后代 of any of element's shadow-including ancestors, then 继续.
将 attrElement 添加到 elements.
否则:
令 contentAttributeValue 为运行 reflectedTarget的 获取内容属性.
如果 contentAttributeValue is null, then return null.
令 tokens 为 contentAttributeValue, 按ASCII空白切分.
遍历 tokens 中的每个 id:
返回 elements。
getter步骤:
令 elements 为运行 this的 获取 attr-关联元素.
如果 elements 的内容与 this的 缓存的 attr-关联元素的内容相等,则返回 this的 缓存的 attr-关联元素对象.
令 elementsAsFrozenArray 为 elements, 转换为 to a
FrozenArray<T>?.
设置 this的 缓存的 attr-关联元素 为 elements.
设置 this的 缓存的 attr-关联元素对象 为 elementsAsFrozenArray.
返回 elementsAsFrozenArray。
这个额外的缓存层是为了保证
element.reflectedElements === element.reflectedElements的不变性。
仅对元素 反射目标 :以下 属性变更步骤,给定 element、 localName、 oldValue、 value和 namespace,用于在内容属性和IDL属性之间进行同步:
如果 localName 不是 attr 或 namespace is not null, then return.
设置 element的 显式设置的 attr-elements to null.
这种类型的反射IDL属性
强烈建议其标识符以"Elements"结尾,以保持一致性。
反射 可以通过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]
扩展属性
只能用于类型为 double
或 unsigned
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]
扩展属性
只能用于类型为 double、
long、
或 unsigned long的属性上。
当用于类型为 double的属性时,必须接受一个小数;否则接受一个整数。同时只能与
[Reflect]、
[ReflectNonNegative]、
[ReflectPositive]或
[ReflectPositiveWithFallback]一起使用。
带有 [ReflectDefault]
扩展属性 have a
default
value provided by the argument
provided to [ReflectDefault].
反射 主要是通过给开发者提供通过 反射的 IDL 属性类型访问内容属性,以改善开发者的使用体验。网页平台的最终事实来源是内容属性本身。也就是说,规范作者不能使用 反射的 IDL 属性 的 getter 或 setter 步骤,而应使用内容属性的存在和值。(或其上的抽象,如 枚举属性的状态。)
两个重要的例外是 反射的 IDL 属性 其类型是以下之一:
对于这些情况,规范作者必须使用 反射目标的 获取 attr-关联元素 和 获取 attr-关联元素的步骤。内容属性的存在和值不应使用,因为它们不能完全与 反射的 IDL 属性同步。
A 反射目标的 显式设置的 attr-元素、 显式设置的 attr-元素、 缓存的 attr-关联元素和 缓存的 attr-关联元素对象 应被视为内部实现细节,而不应基于它们进行构建。
The HTMLFormControlsCollection
和 HTMLOptionsCollection
interfaces
are collections derived from the
HTMLCollection
interface. The HTMLAllCollection
接口是一个 集合,但不是这样派生的。
HTMLAllCollection
接口The HTMLAllCollection
接口用于遗留的 document.all
属性。它的操作类似于
HTMLCollection;主要区别在于它允许各种不同的(滥用)方法返回一些内容,并且它可以作为函数调用,而不是属性访问。
所有 HTMLAllCollection
对象都根植于 Document
,并具有匹配所有元素的过滤器,因此 由集合表示 的元素 HTMLAllCollection
对象由根 Document的所有后代元素组成。
实现 HTMLAllCollection
接口的对象是 遗留平台对象
,具有附加的 [[Call]] 内部方法,如 下面部分所述。它们还具有
[[IsHTMLDDA]] 内部槽。
实现 HTMLAllCollection
接口的对象有几个不寻常的行为,因为它们具有 [[IsHTMLDDA]]
内部槽:
JavaScript 中的 ToBoolean 抽象操作在给定实现
HTMLAllCollection
接口的对象时返回 false。
The IsLooselyEqual abstract operation,
when given objects implementing the HTMLAllCollection
interface, returns true when
compared to the undefined 和 null 值比较时返回 true。 (使用 IsStrictlyEqual 抽象操作的比较以及与字符串或对象等其他值的 IsLooselyEqual 比较不受影响。)
The typeof
运算符时,返回字符串
"undefined" when applied to objects implementing the
HTMLAllCollection
interface.
这些特殊行为是为了兼容两类遗留内容:一类是使用 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 “全部”命名元素 由集合表示,按
树顺序,忽略后续的重复项,如果一个元素同时提供 id 和
name 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) 方法步骤是:
如果未提供 nameOrIndex ,则返回 null。
返回 获取“全部”索引或命名的元素 的结果 this给定 nameOrIndex。
以下元素是 “全部”命名元素:
a,
button,
embed,
form,
frame,
frameset,
iframe,
img,
input,
map,
meta,
object,
select,以及
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,执行以下步骤:
如果 name 是空字符串,则返回 null。
让 subCollection 成为一个 HTMLCollection
object rooted at the same
Document as
collection, whose filter matches only elements that are
either:
如果 subCollection中只有一个元素,则返回该元素。
否则,如果 subCollection 为空,则返回 null。
否则,返回 subCollection。
To get the "all"-indexed or named
element(s) from an HTMLAllCollection
collection given
nameOrIndex:
如果 nameOrIndex, 转换 为 JavaScript 字符串值,是一个 数组索引属性名称, return the result of getting the "all"-indexed element from nameOrIndex 表示的数字从 collection.
Return the result of getting the "all"-named element(s) from nameOrIndex 从 collection.
如果 argumentsList的 大小 为零,或者 argumentsList[0] 是 undefined,则返回 null。
Let result be the result of getting the "all"-indexed or named
element(s)
from this HTMLAllCollection
given nameOrIndex。
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。)
HTMLFormControlsCollection
接口The HTMLFormControlsCollection
接口用于
集合 of listed
elements in form
elements.
Support in all current engines.
Support in all current engines.
[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.
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
选择第一个值为 value 的 radioNodeList所代表的单选按钮。
このオブジェクトの 対応プロパティインデックス は、
HTMLCollection
オブジェクトに定義されているものと同じである。
The 対応プロパティ名 consist of the non-empty values of all
the id
および name
attributes of all the
elements represented by the collection, in ツリー順で並べられ、
後の重複は無視される。また、要素が両方を持ち、それぞれが異なり、どちらも以前のエントリと重複しない場合は、 id が
name
よりも先に来る。
The namedItem(name) メソッドは
次のアルゴリズムに従って動作しなければならない:
id
属性または name
属性が nameと等しいノードがちょうど 1 つだけ存在する場合、そのノードを返し、アルゴリズムを終了する。id
属性または name
属性が nameと等しいノードが存在しない場合、null を返してアルゴリズムを終了する。RadioNodeList
オブジェクトを作成する。このオブジェクトは ライブ
な HTMLFormControlsCollection
オブジェクトを表し、さらに RadioNodeList
オブジェクト内のノードは id
属性または name
属性が nameと等しいものだけに絞り込まれている。 RadioNodeList
オブジェクト内のノードは
ツリー順で並べること。
RadioNodeList
オブジェクトを返す。Members of the RadioNodeList
接口的成员从 NodeList
接口继承,必须像在 NodeList
对象上一样表现。
Support in all current engines.
The value IDL 属性在
RadioNodeList
对象上,获取时必须返回通过运行以下步骤返回的值:
让 element be the first element in tree order
represented by the RadioNodeList
object that is an input
元素,其
type
属性处于 单选按钮 状态并且其 已选中
状态为真。否则,让其为 null。
如果 element 为 null,则返回空字符串。
如果 element 是一个没有 value
属性的元素,则返回字符串 "on"。
否则,返回 element的 value
属性的值。
在设置时, value
IDL 属性必须运行以下步骤:
如果新值为字符串 "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。
如果 element 不为 null,则将其 已选中 状态设置为真。
HTMLOptionsCollection
接口支持所有当前引擎。
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 ID 或 name
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
的设置步骤为:
令 current 为 collection 表示的节点数。
如果给定值大于 current,则:
If the given value is greater than 100,000, then return.
设 n 为 value − current.
新的 option 元素追加 到 select
元素;该元素是
this is rooted given n.
如果给定值小于 current,则:
令 n 为 current - value。
从其父节点中移除集合中的最后 n 个节点。
设置 length
永远不会移除或添加任何 optgroup
元素,也不会向现有的
optgroup
元素中添加新的子节点(尽管它可以从中移除子节点)。
The 支持的属性名称 由所有非空值组成 id 和
name
属性的所有元素 由集合表示,按 树顺序,忽略后续的重复项,其中 id 的元素优先于其
name
如果它们同时贡献,它们彼此不同,并且都不是先前条目的重复项。
要将 新的 option 元素追加 to a select
元素
select given a non-negative integer count:
令 fragment 为一个新的 DocumentFragment
,
其 节点
文档 是 select的 节点文档。
将 count 个新的 option
元素追加到 fragment。
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:
如果 value is null, then remove an option from index ,从 collection and return.
令 length be the number of nodes represented by collection.
令 delta 为 index − length。
如果 delta is greater than 0, then 新的 option 元素追加 to
the select
element on which collection is rooted given
delta.
如果 delta is greater than or equal to 0, then 追加
collection 所根植的 select
元素。
否则,用 value is rooted. Otherwise, 替换
the collection中的第
index by value.
The add(element, before)
方法步骤是:
如果 element is an ancestor of the select
element on which
this is rooted, then throw a "HierarchyRequestError"
DOMException。
如果 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。
如果 element 和 before 是同一个元素,则返回。
令 reference 为 null。
如果 before 是一个节点,则将 reference 设置为 before。 否则,如果 before is an integer and there is a beforeth node in this中存在第 before to that node.
如果 reference 不为 null,则令 parent为 reference is
not null; otherwise the select
element on which this is rooted.
Pre-insert element into parent 节点中,位于 reference之前。
To remove an option from an
HTMLOptionsCollection
collection given an integer index:
If the number of nodes represented by collection is 0, then return.
如果 index is not a number greater than or equal to 0 and less than the number of nodes represented by collection, then return.
令 element 为 collection中的第 index个元素。
从其父节点中移除 element 。
The remove(index) method steps are
to remove an option from
this given index.
The selectedIndex
设置器步骤
是:将 this
所根植的 select
元素的
选中
索引 设置为给定值。
DOMStringList 接口所有当前引擎支持。
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.
所有主流引擎均支持。
所有主流引擎均支持。
The item(index) method steps are to
return the indexth item in 此对象关联列表中第
index plus one is greater than 此对象关联列表的 大小,则返回 null。
所有主流引擎均支持。
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]
/developer.mozilla.org/en-US/docs/Glossary/Serializable_object
/developer.mozilla.org/en-US/docs/Glossary/Serializable_object
/developer.mozilla.org/en-US/docs/Glossary/Serializable_object
/developer.mozilla.org/en-US/docs/Glossary/Serializable_object
/developer.mozilla.org/en-US/docs/Glossary/Serializable_object
/developer.mozilla.org/en-US/docs/Glossary/Serializable_object
/developer.mozilla.org/en-US/docs/Glossary/Serializable_object
可序列化对象 支持以独立于任何特定 realm的方式进行序列化和稍后反序列化。这使得它们可以存储在磁盘上并稍后恢复,或跨 代理 甚至 代理集群 边界进行克隆。
并非所有对象都是 可序列化对象, and not all aspects of objects that are serializable objects are necessarily preserved when they are serialized.
平台对象 可以是 可序列化对象
,如果它们的 主要接口 带有 [Serializable] IDL 扩展属性。这些接口还必须定义以下算法:
一组步骤,将 value 中的数据序列化为 serialized的字段。序列化到 serialized 中的结果数据必须独立于任何 realm。
如果序列化不可能,这些步骤可能会抛出异常。
这些步骤可能执行 子序列化 以序列化嵌套的数据结构。它们不应直接调用 StructuredSerialize ,因为这样做会遗漏重要的 memory 参数。
如果 forStorage 参数与算法无关,应在引入这些步骤时省略提及。
一组步骤,将 serialized中的数据反序列化,适当设置 value 。 value 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 ,因为这样做会遗漏重要的 targetRealm 和 memory 参数。
定义单个平台对象的数据在这些步骤中如何被序列化和反序列化是个体平台对象定义的责任。通常这些步骤是非常对称的。
The [Serializable]
扩展属性不得带有任何参数,并且只能出现在接口上。在一个接口上不得出现超过一次。
对于给定的 平台对象,只有对象的 主要接口
在(反)序列化过程中被考虑。因此,如果在定义接口时涉及继承,每个继承链中的 [Serializable]注释接口需要定义独立的 序列化步骤 和
反序列化步骤,包括考虑任何可能来自继承接口的重要数据。
假设我们定义了一个平台对象 Person,它关联了两部分数据:
一个名称值,它是一个字符串;和
一个最好朋友值,它可以是另一个 Person 实例或null。
然后我们可以通过将 Person instances to be serializable
objects by annotating the Person interface with the [Serializable] 扩展属性, and defining the
following accompanying algorithms:
JavaScript规范中定义的对象由 StructuredSerialize 抽象操作直接处理。
最初,本规范定义了“可克隆对象”的概念,可以从一个 realm 克隆到另一个realm。然而,为了更好地指定某些更复杂情况的行为,模型被更新为使序列化和反序列化显式化。
可转移对象 支持在 代理之间转移。转移实际上是重新创建对象,同时共享对底层数据的引用,然后分离被转移的对象。这对于转移昂贵资源的所有权非常有用。并非所有对象都是 可转移对象 and not all aspects of objects that are transferable objects are necessarily preserved when transferred.
转移是不可逆且非幂等的操作。一旦对象被转移,它不能再被转移,甚至不能再被使用。
平台对象 可以是 可转移对象
,如果它们的 主要接口 带有 [Transferable] IDL 扩展属性。这些接口还必须定义以下算法:
一组步骤,将 value 中的数据转移到 dataHolder的字段中。保存在 dataHolder 中的结果数据必须独立于任何 realm。
如果转移不可能,这些步骤可能会抛出异常。
一组步骤,接收 dataHolder中的数据,适当设置 value 。 value 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 抽象操作直接处理。
The StructuredSerializeInternal 抽象操作以一个 JavaScript 值 value 为输入,将其序列化为一个独立于 realm的形式,这里表示为一个 记录。这种序列化形式包含所有必要的信息,以便以后在不同的 realm 中反序列化为一个新的 JavaScript 值。
此过程可能会抛出异常,例如尝试序列化不可序列化的对象时。
如果未提供 memory ,则让 memory 成为空的 map。
The purpose of the memory map 的目的是避免对象被序列化两次。这最终保留了图中的循环和重复对象的身份。
如果 memory[value] 存在,则返回 memory[value]。
让 deep 为 false。
如果 value 是 undefined、null、 布尔值、 数字、 大整数,或 字符串,则返回 { [[Type]]: "primitive", [[Value]]: value }。
如果 value 是一个 Symbol,则抛出一个
“DataCloneError” DOMException。
让 serialized 成为一个未初始化的值。
如果 value 有 [[BooleanData]] 内部槽,则将 serialized 设置为 { [[Type]]: "Boolean", [[BooleanData]]: value.[[BooleanData]] }。
否则,如果 value 有 [[NumberData]] 内部槽,则将 serialized 设置为 { [[Type]]: "Number", [[NumberData]]: value.[[NumberData]] }。
否则,如果 value 有 [[BigIntData]] 内部槽,则将 serialized 设置为 { [[Type]]: "BigInt", [[BigIntData]]: value.[[BigIntData]] }。
否则,如果 value 有 [[StringData]] 内部槽,则将 serialized 设置为 { [[Type]]: "String", [[StringData]]: value.[[StringData]] }。
否则,如果 value 有 [[DateValue]] 内部槽,则将 serialized 设置为 { [[Type]]: "Date", [[DateValue]]: value.[[DateValue]] }。
否则,如果 value 有 [[RegExpMatcher]] 内部槽,则将 serialized 设置为 { [[Type]]: "RegExp", [[RegExpMatcher]]: value.[[RegExpMatcher]], [[OriginalSource]]: value.[[OriginalSource]], [[OriginalFlags]]: value.[[OriginalFlags]] }。
否则,如果 value 有 [[ArrayBufferData]] 内部槽,则:
如果 IsSharedArrayBuffer(value) 是 true,则:
如果 当前设置对象的 跨域隔离能力
为
false,则抛出 "DataCloneError"
DOMException。
此检查仅在序列化时需要(反序列化时不需要),因为 跨域隔离能力
不能随时间改变,且 SharedArrayBuffer
不能离开一个 agent 集群。
如果 forStorage 为 true,则抛出
"DataCloneError" DOMException。
如果 value 有 [[ArrayBufferMaxByteLength]] 内部槽,则将 serialized 设置为 { [[Type]]: "GrowableSharedArrayBuffer", [[ArrayBufferData]]: value.[[ArrayBufferData]], [[ArrayBufferByteLengthData]]: value.[[ArrayBufferByteLengthData]], [[ArrayBufferMaxByteLength]]: value.[[ArrayBufferMaxByteLength]], [[AgentCluster]]: 周围 agent的 agent 集群 }。
否则,将 serialized 设置为 { [[Type]]: "SharedArrayBuffer", [[ArrayBufferData]]: value.[[ArrayBufferData]], [[ArrayBufferByteLength]]: value.[[ArrayBufferByteLength]], [[AgentCluster]]: 周围 agent的 agent 集群 }。
否则:
如果 IsDetachedBuffer(value) 是
true,则抛出
"DataCloneError" DOMException。
让 size 为 value.[[ArrayBufferByteLength]]。
让 dataCopy 成为 ? CreateByteDataBlock(size)。
在分配失败时,这可能会抛出 RangeError
异常。
执行 CopyDataBlockBytes(dataCopy, 0, value.[[ArrayBufferData]], 0, size)。
如果 value 有 [[ArrayBufferMaxByteLength]] 内部槽,则将 serialized 设置为 { [[Type]]: "ResizableArrayBuffer", [[ArrayBufferData]]: dataCopy, [[ArrayBufferByteLength]]: size, [[ArrayBufferMaxByteLength]]: value.[[ArrayBufferMaxByteLength]] }。
否则,将 serialized 设置为 { [[Type]]: "ArrayBuffer", [[ArrayBufferData]]: dataCopy, [[ArrayBufferByteLength]]: size }。
否则,如果 value 有 [[ViewedArrayBuffer]] 内部槽,则:
如果 IsArrayBufferViewOutOfBounds(value) 是
true,则抛出
"DataCloneError" DOMException。
让 buffer 成为 value的 [[ViewedArrayBuffer]] 内部槽的值。
让 bufferSerialized 成为 ? StructuredSerializeInternal(buffer, forStorage, memory)。
断言: bufferSerialized.[[Type]] 是 "ArrayBuffer"、"ResizableArrayBuffer"、"SharedArrayBuffer" 或 "GrowableSharedArrayBuffer"。
如果 value 有 [[DataView]] 内部槽,则将 serialized 设置为 { [[Type]]: "ArrayBufferView", [[Constructor]]: "DataView", [[ArrayBufferSerialized]]: bufferSerialized, [[ByteLength]]: value.[[ByteLength]], [[ByteOffset]]: value.[[ByteOffset]] }。
否则:
断言: value 有 [[TypedArrayName]] 内部槽。
将 serialized 设置为 { [[Type]]: "ArrayBufferView", [[Constructor]]: value.[[TypedArrayName]], [[ArrayBufferSerialized]]: bufferSerialized, [[ByteLength]]: value.[[ByteLength]], [[ByteOffset]]: value.[[ByteOffset]], [[ArrayLength]]: value.[[ArrayLength]] }。
否则,如果 value 有 [[MapData]] 内部槽,则:
将 serialized 设置为 { [[Type]]: "Map", [[MapData]]: 一个新的空 列表 }。
将 deep 设置为 true。
否则,如果 value 有 [[SetData]] 内部槽,则:
将 serialized 设置为 { [[Type]]: "Set", [[SetData]]: 一个新的空 列表 }。
将 deep 设置为 true。
否则,如果 value 有 [[ErrorData]] 内部槽且 value 不是 平台对象,则:
令 name 为 ? Get(value, "name")。
如果 name 不是 "Error"、"EvalError"、"RangeError"、"ReferenceError"、 "SyntaxError"、"TypeError" 或 "URIError" 之一,则将 name 设置为 "Error"。
令 valueMessageDesc 为 ? value.[[GetOwnProperty]]("message")。
令 message 为 undefined,如果 IsDataDescriptor(valueMessageDesc) 为 false;否则为 ? ToString(valueMessageDesc.[[Value]])。
令 stack 为一个 实现定义的 字符串,表示 value.[[Stack]]。 [JSERRORSTACKACCESSOR] [JSERRORSTACKS]
将 serialized 设置为 { [[Type]]: "Error", [[Name]]: name, [[Message]]: message, [[Stack]]: stack }。
用户代理应将任何尚未指定的有意义伴随数据的序列化表示附加到 serialized。
否则,如果 value 是一个数组异类对象,则:
让 valueLenDescriptor 成为 ?
OrdinaryGetOwnProperty(value,
"length").
让 valueLen 成为 valueLenDescriptor.[[Value]]。
将 serialized 设置为 { [[Type]]: "Array", [[Length]]: valueLen, [[Properties]]: 一个新的空 列表 }。
将 deep 设置为 true。
否则,如果 value 是一个 平台对象 ,且是一个 可序列化对象:
如果 value 有一个值为 true 的 [[Detached]]
内部槽,则抛出 "DataCloneError" DOMException。
让 typeString 成为 主接口 of value.
将 serialized 设置为 { [[Type]]: typeString }。
将 deep 设置为 true。
否则,如果 value 是一个 平台对象,则抛出
"DataCloneError" DOMException。
否则,如果 IsCallable(value) 为 true,则抛出
"DataCloneError" DOMException。
否则,如果 value 有任何内部槽,除 [[Prototype]]、[[Extensible]] 或 [[PrivateElements]] 外,则抛出 "DataCloneError"
DOMException。
例如,一个 [[PromiseState]] 或 [[WeakMapData]] 内部槽。
否则,如果 value 是一个异类对象,且 value is not the
%Object.prototype% intrinsic object associated with any realm, then
throw a "DataCloneError" DOMException。
例如,一个代理对象。
否则:
将 serialized 设置为 { [[Type]]: "Object", [[Properties]]: 一个新的空 列表 }。
将 deep 设置为 true。
%Object.prototype% 将通过此步骤和后续步骤进行处理。最终结果是忽略其异类性,并且在反序列化后结果将是一个空对象(不是一个 不可变原型异类对象)。
设置 memory[value] 为 serialized。
如果 deep 为 true,则:
如果 value 有 [[MapData]] 内部槽,则:
让 copiedList 成为一个新的空 列表。
对于每个 记录 { [[Key]], [[Value]] } entry 在 copiedList中:
让 serializedKey 成为 ? StructuredSerializeInternal(entry.[[Key]], forStorage, memory)。
让 serializedValue 成为 ? StructuredSerializeInternal(entry.[[Value]], forStorage, memory)。
Append { [[Key]]: serializedKey, [[Value]]: serializedValue } to serialized.[[MapData]]。
否则,如果 value 有 [[SetData]] 内部槽,则:
否则,如果 value 是一个 平台对象 ,且是一个 可序列化对象, then perform the serialization steps for value的 主接口, given value、 serialized和 forStorage。
The 序列化步骤 可能需要执行 子序列化。这是一个以值 subValue为输入的操作,并返回 StructuredSerializeInternal(subValue, forStorage, memory)。(换句话说,一个 子序列化 是 StructuredSerializeInternal 在此次调用中的特化。)
Otherwise, for each key in ! EnumerableOwnProperties(value, key):
如果 ! HasOwnProperty(value, key) 为 true,则:
让 inputValue 成为 ? value.[[Get]](key, value)。
让 outputValue 成为 ? StructuredSerializeInternal(inputValue, forStorage, memory)。
Append { [[Key]]: key, [[Value]]: outputValue } to serialized.[[Properties]]。
返回 serialized。
需要注意的是, 记录 由 StructuredSerializeInternal 生成的可能包含指向其他记录的“指针”,这些指针会创建循环引用。例如,当我们将以下 JavaScript 对象传递给 StructuredSerializeInternal时:
const o = {};
o. myself = o;
它会生成以下结果:
{
[[Type]]: "Object",
[[Properties]]: «
{
[[Key]]: "myself",
[[Value]]: <a pointer to this whole structure>
}
»
}
返回 ? StructuredSerializeInternal(value, false)。
返回 ? StructuredSerializeInternal(value, true)。
The 结构化反序列化 抽象操作接受一个 记录 serialized作为输入,该记录之前由 结构化序列化 或 存储用结构化序列化生成,并将其反序列化为在 targetRealm中创建的新JavaScript值。
此过程可能会抛出异常,例如在尝试为新对象(尤其是 ArrayBuffer 对象)分配内存时。
如果未提供 memory ,则将 memory 设为空的 映射。
The purpose of the memory 映射的目的是避免对象的两次反序列化。这最终保留了图中循环和重复对象的身份。
如果 memory[serialized] 存在,则返回 memory[serialized]。
将 deep 设为false。
将 value 设为未初始化的值。
如果 serialized.[[Type]]是"primitive",则将 value 设为 serialized.[[Value]]。
否则,如果 serialized.[[Type]]是"Boolean",则将 value 设为在 targetRealm 中新的Boolean对象,其[[BooleanData]]内部槽值为 serialized.[[BooleanData]]。
否则,如果 serialized.[[Type]]是"Number",则将 value 设为在 targetRealm 中新的Number对象,其[[NumberData]]内部槽值为 serialized.[[NumberData]]。
否则,如果 serialized.[[Type]]是"BigInt",则将 value 设为在 targetRealm 中新的BigInt对象,其[[BigIntData]]内部槽值为 serialized.[[BigIntData]]。
否则,如果 serialized.[[Type]]是"String",则将 value 设为在 targetRealm 中新的String对象,其[[StringData]]内部槽值为 serialized.[[StringData]]。
否则,如果 serialized.[[Type]]是"Date",则将 value 设为在 targetRealm 中新的Date对象,其[[DateValue]]内部槽值为 serialized.[[DateValue]]。
否则,如果 serialized.[[Type]]是"RegExp",则将 value 设为在 targetRealm 中新的RegExp对象,其[[RegExpMatcher]]内部槽值为 serialized.[[RegExpMatcher]],其[[OriginalSource]]内部槽值为 serialized.[[OriginalSource]],其[[OriginalFlags]]内部槽值为 serialized.[[OriginalFlags]]。
否则,如果 serialized.[[Type]]是"SharedArrayBuffer",则:
如果 targetRealm对应的 代理集群 不是
serialized.[[AgentCluster]],则抛出
"DataCloneError" DOMException。
否则,将 value 设为在 targetRealm 中新的SharedArrayBuffer对象,其[[ArrayBufferData]]内部槽值为 serialized.[[ArrayBufferData]],其[[ArrayBufferByteLength]]内部槽值为 serialized.[[ArrayBufferByteLength]]。
否则,如果 serialized.[[Type]]是"GrowableSharedArrayBuffer",则:
如果 targetRealm对应的 代理集群 不是
serialized.[[AgentCluster]],则抛出
"DataCloneError" DOMException。
否则,将 value 设为在 targetRealm 中新的SharedArrayBuffer对象,其[[ArrayBufferData]]内部槽值为 serialized.[[ArrayBufferData]],其[[ArrayBufferByteLengthData]]内部槽值为 serialized.[[ArrayBufferByteLengthData]],其[[ArrayBufferMaxByteLength]]内部槽值为 serialized.[[ArrayBufferMaxByteLength]]。
否则,如果 serialized.[[Type]]是"ArrayBuffer",则将 value 设为在 targetRealm 中新的ArrayBuffer对象,其[[ArrayBufferData]]内部槽值为 serialized.[[ArrayBufferData]],其[[ArrayBufferByteLength]]内部槽值为 serialized.[[ArrayBufferByteLength]]。
如果这抛出了异常,捕获它,然后抛出
"DataCloneError" DOMException。
如果没有足够的内存可用来创建这样的ArrayBuffer对象,此步骤可能会抛出异常。
否则,如果 serialized.[[Type]]是"ResizableArrayBuffer",则将 value 设为在 targetRealm 中新的ArrayBuffer对象,其[[ArrayBufferData]]内部槽值为 serialized.[[ArrayBufferData]],其[[ArrayBufferByteLength]]内部槽值为 serialized.[[ArrayBufferByteLength]],其[[ArrayBufferMaxByteLength]]内部槽值为 serialized.[[ArrayBufferMaxByteLength]]。
如果这抛出了异常,捕获它,然后抛出
"DataCloneError" DOMException。
如果没有足够的内存可用来创建这样的ArrayBuffer对象,此步骤可能会抛出异常。
否则,如果 serialized.[[Type]]是"ArrayBufferView",则:
让 deserializedArrayBuffer 为? 结构化反序列化(serialized.[[ArrayBufferSerialized]], targetRealm, memory)。
如果 serialized.[[Constructor]]是"DataView",则将 value 设为在 targetRealm 中新的DataView对象,其[[ViewedArrayBuffer]]内部槽值为 deserializedArrayBuffer,其[[ByteLength]]内部槽值为 serialized.[[ByteLength]],其[[ByteOffset]]内部槽值为 serialized.[[ByteOffset]]。
否则,将 value 设为在 targetRealm中新的类型数组对象,使用 serialized.[[Constructor]]给定的构造函数,其[[ViewedArrayBuffer]]内部槽值为 deserializedArrayBuffer,其[[TypedArrayName]]内部槽值为 serialized.[[Constructor]],其[[ByteLength]]内部槽值为 serialized.[[ByteLength]],其[[ByteOffset]]内部槽值为 serialized.[[ByteOffset]],其[[ArrayLength]]内部槽值为 serialized.[[ArrayLength]]。
否则,如果 serialized.[[Type]]是"Map",则:
将 value 设为在 targetRealm 中新的Map对象,其[[MapData]]内部槽值为新的空 列表。
将 deep 设为true。
否则,如果 serialized.[[Type]]是"Set",则:
将 value 设为在 targetRealm 中新的Set对象,其[[SetData]]内部槽值为新的空 列表。
将 deep 设为true。
否则,如果 serialized.[[Type]]是"Array",则:
让 outputProto 为 targetRealm.[[Intrinsics]].[[%Array.prototype%]]。
将 value 设为! 数组创建(serialized.[[Length]], outputProto)。
将 deep 设为true。
否则,如果 serialized.[[Type]]是"Object",则:
将 value 设为在 targetRealm中的新对象。
将 deep 设为true。
否则,如果 serialized.[[Type]]是"Error",则:
让 prototype 为 %Error.prototype%。
如果 serialized.[[Name]]是"EvalError",则将 prototype 设为 %EvalError.prototype%。
如果 serialized.[[Name]]是"RangeError",则将 prototype 设为 %RangeError.prototype%。
如果 serialized.[[Name]]是"ReferenceError",则将 prototype 设为 %ReferenceError.prototype%。
如果 serialized.[[Name]]是"SyntaxError",则将 prototype 设为 %SyntaxError.prototype%。
如果 serialized.[[Name]]是"TypeError",则将 prototype 设为 %TypeError.prototype%。
如果 serialized.[[Name]]是"URIError",则将 prototype 设为 %URIError.prototype%。
让 message 为 serialized.[[Message]]。
将 value 设为 OrdinaryObjectCreate(prototype, « [[ErrorData]], [[Stack]] »)。
让 messageDesc 为 属性描述符 { [[Value]]: message, [[Writable]]: true, [[Enumerable]]: false, [[Configurable]]: true}。
如果 message 不为undefined,则执行!
普通定义自有属性(value, "message",
messageDesc)。
将 value.[[Stack]] 设置为 serialized.[[Stack]]。
任何附加到 serialized 上的有趣的附加数据都应该被反序列化并附加到 value上。
否则:
让 interfaceName 为 serialized.[[Type]]。
如果 interfaceName is not
exposed in targetRealm, then throw a
"DataCloneError" DOMException。
将 value 设为在 targetRealm中创建的由 interfaceName标识的接口的新实例。
将 deep 设为true。
设置 memory[serialized]为 value。
如果 deep 为true,则:
如果 serialized.[[Type]]是"Map",则:
否则,如果 serialized.[[Type]]是"Set",则:
否则,如果 serialized.[[Type]]是"Array"或"Object",则:
否则:
返回 value。
让 memory 为一个空的 map。
除了 StructuredSerializeInternal正常使用外,在这个算法中 memory 还用于确保 StructuredSerializeInternal 忽略 transferList中的项目,并让我们自己处理。
对于每个 transferable 的 transferList:
如果 transferable 既没有 [[ArrayBufferData]] 内部槽也没有
[[Detached]] 内部槽,则抛出
"DataCloneError" DOMException。
如果 transferable 具有 [[ArrayBufferData]] 内部槽且
IsSharedArrayBuffer(transferable) 为真,则抛出
"DataCloneError" DOMException。
如果 memory[transferable] 存在,则抛出 "DataCloneError" DOMException。
设置 memory[transferable] 为 {[[Type]]: 未初始化的值}。
transferable 尚未传输,因为传输有副作用,并且 StructuredSerializeInternal 需要先能够抛出。
让 serialized 为 ? StructuredSerializeInternal(value, false, memory)。
让 transferDataHolders 为一个新的空的 List。
对于每个 transferable 的 transferList:
如果 transferable 具有 [[ArrayBufferData]] 内部槽且
IsDetachedBuffer(transferable) 为真,则抛出
"DataCloneError" DOMException。
如果 transferable 具有 [[Detached]] 内部槽且
transferable.[[Detached]] 为真,则抛出
"DataCloneError" DOMException。
让 dataHolder 为 memory[transferable]。
如果 transferable 具有 [[ArrayBufferData]] 内部槽,则:
如果 transferable 具有 [[ArrayBufferMaxByteLength]] 内部槽,则:
将 dataHolder.[[Type]] 设为 "ResizableArrayBuffer"。
将 dataHolder.[[ArrayBufferData]] 设为 transferable.[[ArrayBufferData]]。
将 dataHolder.[[ArrayBufferByteLength]] 设为 transferable.[[ArrayBufferByteLength]]。
将 dataHolder.[[ArrayBufferMaxByteLength]] 设为 transferable.[[ArrayBufferMaxByteLength]]。
否则:
将 dataHolder.[[Type]] 设为 "ArrayBuffer"。
将 data Holder.[[ArrayBufferData]] 设为 transferable.[[ArrayBufferData]]。
将 dataHolder.[[ArrayBufferByteLength]] 设为 transferable.[[ArrayBufferByteLength]]。
执行 ? DetachArrayBuffer(transferable)。
规范可以使用 [[ArrayBufferDetachKey]] 内部槽来防止
ArrayBuffer被分离。例如,这在
WebAssembly JavaScript Interface中使用。 [WASMJS]
否则:
追加 dataHolder 到 transferDataHolders。
返回 { [[Serialized]]: serialized, [[TransferDataHolders]]: transferDataHolders }。
让 memory 为一个空的 map。
类似于 StructuredSerializeWithTransfer,除了正常被 StructuredDeserialize使用外,在这个算法中 memory 还用于确保 StructuredDeserialize 忽略 serializeWithTransferResult.[[TransferDataHolders]] 中的项目,让我们自己进行处理。
让 transferredValues 为一个新的空的 List。
对于每个 transferDataHolder 的 serializeWithTransferResult.[[TransferDataHolders]]:
让 value 为一个未初始化的值。
如果 transferDataHolder.[[Type]] 是 "ArrayBuffer",则将 value 设为在 targetRealm 中创建的新 ArrayBuffer 对象,其 [[ArrayBufferData]] 内部槽值为 transferDataHolder.[[ArrayBufferData]],且 [[ArrayBufferByteLength]] 内部槽值为 transferDataHolder.[[ArrayBufferByteLength]]。
在原始内存仍可访问的情况下,这一步骤不太可能抛出异常,因为不需要分配新的内存:[[ArrayBufferData]] 占用的内存只是被转移到新的 ArrayBuffer 中。这可能在源和目标领域在同一进程中时为真。
否则,如果 transferDataHolder.[[Type]] 是 "ResizableArrayBuffer",则将 value 设为在 targetRealm 中创建的新 ArrayBuffer 对象,其 [[ArrayBufferData]] 内部槽值为 transferDataHolder.[[ArrayBufferData]],[[ArrayBufferByteLength]] 内部槽值为 transferDataHolder.[[ArrayBufferByteLength]],以及 [[ArrayBufferMaxByteLength]] 内部槽值为 transferDataHolder.[[ArrayBufferMaxByteLength]]。
与前一步相同,这一步骤也不太可能抛出异常。
否则:
让 interfaceName 为 transferDataHolder.[[Type]]。
如果由 interfaceName 标识的接口在
targetRealm中不可用,则抛出 "DataCloneError"
DOMException。
将 value 设为在 targetRealm中创建的由 interfaceName标识的接口的新实例。
执行适当的 接收转移步骤 ,针对由 interfaceName 标识的接口,给定 transferDataHolder 和 value。
设置 memory[transferDataHolder] 为 value。
追加 value 到 transferredValues。
让 deserialized 为 ? StructuredDeserialize(serializeWithTransferResult.[[Serialized]], targetRealm, memory)。
返回 { [[Deserialized]]: deserialized, [[TransferredValues]]: transferredValues }。
其他规范可以使用此处定义的抽象操作。以下提供了一些关于每个抽象操作通常何时有用的指导,并附有示例。
将一个值克隆到另一个 realm,使用一个传输列表,但目标realm事先未知。在这种情况下,可以立即执行序列化步骤,而反序列化步骤则延迟到目标realm变得已知时再进行。
messagePort.postMessage()
使用这对抽象操作,因为直到
MessagePort
已被发送后,目标realm才会变得已知。
创建一个给定值的 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 StructuredSerialize、 StructuredSerializeForStorage或 StructuredSerializeWithTransfer 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 entry 和 incumbent 概念的操作。
window.postMessage()
在其参数上执行
StructuredSerializeWithTransfer
,但要小心立即在其算法的同步部分内执行。因此,它可以使用这些算法,而不需要 准备运行脚本 和
准备运行回调。
相比之下,一个假设的API,使用 StructuredSerialize 来定期序列化一些作者提供的对象,直接从 任务 在 事件循环上进行,将需要确保它事先执行适当的准备。截至目前,我们知道平台上没有这样的API;通常,提前进行序列化作为作者代码的同步结果会更简单。
result = self.structuredClone(value[, { transfer }])
获取输入值并通过执行结构化克隆算法返回一个深拷贝。
可转移对象 列在 transfer
数组中,这些对象被转移而不仅仅是克隆,这意味着它们在输入值中不再可用。
Throws a "DataCloneError" DOMException
if any part of
the input value is not serializable.
所有当前引擎都支持。
The structuredClone(value,
options) 方法步骤如下:
让 serialized 为 ?
StructuredSerializeWithTransfer(value,
options["transfer"])。
让 deserializeRecord 为 ? StructuredDeserializeWithTransfer(serialized, this的 相关realm)。
返回 deserializeRecord.[[Deserialized]]。
HTML UA中的每个XML和HTML文档都由一个 Document 对象表示。
[DOM]
该 Document 对象的 URL 在
DOM中定义。它在创建 Document 对象时被初始化设置,但在该 Document 对象的生命周期内可以更改;例如,当用户 导航 到页面上的 片段
时,以及调用 pushState() 方法并传入新的 URL时,它会发生变化。 [DOM]
交互式用户代理通常在其用户界面中公开 Document 对象的
URL 。这是用户判断某个站点是否试图冒充另一个站点的主要机制。
该 Document 对象的 origin 在
DOM中定义。它在创建 Document object is created,
and can
change during the lifetime of the Document only upon
setting document.domain. A Document的 origin 可以与其 URL 的 origin不同;例如,当创建一个 子可导航环境 is created, its 活动文档的 origin 会继承自其 父可导航环境的 活动文档的
origin,即使其 活动文档的 URL 为
about:blank。 [DOM]
当一个 Document 由 脚本 使用 createDocument()
或 createHTMLDocument()
方法创建时,
Document 会立即 准备好进行加载后任务 。
文档的引用者 是一个字符串(表示 URL),可以在 Document 创建时设置。如果未显式设置,则其值为空字符串。
Document 对象所有当前引擎支持。
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 元素,
初始为空。
DocumentOrShadowRoot
接口DOM 定义了 DocumentOrShadowRoot
mixin,本规范对此进行了扩展。
partial interface mixin DocumentOrShadowRoot {
readonly attribute Element ? activeElement ;
};
一个 Document 对象有关联的 内部祖先来源对象列表,初始值为 null。
The internal ancestor origin objects list creation
steps given a
Document 对象 document 和 推荐人策略
referrerPolicy are:
令 output 为 « »。
令 parentDoc 为 document的 容器文档。
如果 parentDoc 为 null,则返回 output。
令 ancestorOrigins 为 parentDoc的 内部祖先来源对象列表。
令 masked 为 false。
如果 referrerPolicy 为 "no-referrer",则将
masked 设为 true。
否则,如果 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" 的值也不需特殊处理,
因为此处至多暴露一个 来源 。
对于每个 ancestorOrigin 属于 ancestorOrigins:
返回 output。
A Document 对象有一个关联的 上级来源列表,
初始为 null。
The 上级来源列表创建步骤 给定一个 Document 对象
document 如下:
令 ancestorOrigins 为 document的 内部上级来源对象 列表。
断言: ancestorOrigins 不为 null。
令 output 为 « »。
对于 ancestorOrigins 中的每个 origin:
将 the serialization of origin to output。
返回一个新 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" »。
在此示例中,我们展示了顶层文档的来源不会被遮蔽,尽管 存在一个同源后代文档,其来源 确实 被遮蔽,因为其中夹着一个 跨源文档。
顶层页面,URL为 https://a.example/top
< iframe src = "https://b.example/child" ></ iframe >
关联的 祖先来源列表 是 « »。
子页面,URL为 https://b.example/child
< iframe src = "https://a.example/grandchild" ></ iframe >
关联的 祖先来源列表
是 « "https://a.example" »。
孙子页面,URL为 https://a.example/grandchild
< iframe src = "https://c.example/great-grandchild"
referrerpolicy = "no-referrer" ></ iframe >
关联的 祖先来源列表
是 « "https://b.example", "https://a.example" »。
曾孙页面,URL为 https://c.example/great-grandchild
关联的 祖先来源列表
是 « "null", "https://b.example",
"https://a.example" »。顶层来源未被遮蔽。
如果我们考虑前例,但顶层文档的 iframe
也包含
referrerpolicy="no-referrer",则每个文档关联的 祖先来源列表 将会是:
顶层页面:« »
子页面:« "null" »
孙子页面:« "https://b.example", "null"
»
曾孙页面:« "null","https://b.example","null" »。顶级来源被屏蔽,是因为子文档执行 内部祖先来源对象列表创建步骤时就已被屏蔽,
该结果又传递给了孙文档的
内部祖先来源对象列表创建步骤,
以此类推。
document.referrer
在所有当前引擎中均受支持。
返回用户从中导航到此文档的 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
。
在所有当前引擎中均受支持。
The cookie
属性表示文档的 URL所标识资源的
cookies。
使用同步的 document.cookie
API 可能会导致性能问题。可以改用 Cookie Store API ,因为它提供了一种异步处理 cookie 的方式以避免性能问题。有关更多信息,请参阅 Cookie Store API 介绍 。 [COOKIESTORE]
A Document 对象满足下列任一条件时,
为一个
回避 cookie 的 Document 对象:
在获取时,如果文档是一个 回避 cookie 的
Document 对象,
则用户代理必须返回空字符串。否则,如果该 Document的
origin
是一个 不透明来源,用户代理必须抛出一个
"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
对象,则用户代理不得执行任何操作。否则,如果该 Document的 origin
是一个 不透明来源,用户代理必须抛出一个 "SecurityError"
DOMException。
否则,用户代理在接收到针对该文档的 set-cookie-string 时应当采取相同的行为,作为“非 HTTP”API 对该文档的
URL 的处理,
新值应当以
UTF-8 编码。 [COOKIES] [ENCODING]
由于 cookie 属性可跨帧访问,
cookie 的路径限制仅是帮助管理哪些 cookie 被发送到站点的哪些部分的工具,并不构成任何安全特性。
The cookie
属性的 getter 和 setter 同步访问共享状态。由于没有锁机制,多进程的用户代理中的其他浏览上下文可能会在脚本运行时修改 cookie。例如,一个站点可能尝试读取一个
cookie,将其值递增,然后写回去,使用该新值作为会话的唯一标识;如果该站点在两个不同的浏览器窗口中同时这样做,可能会最终为两个会话使用相同的“唯一”标识,从而产生潜在的灾难性后果。
document.lastModified
在所有当前引擎中均受支持。
返回由服务器报告的该文档最后修改日期,格式为 "MM/DD/YYYY hh:mm:ss",使用用户的本地时区。
如果最后修改日期未知,则返回当前时间。
The lastModified 属性在获取时,必须返回该 Document源文件的最后修改日期和时间,
使用用户的本地时区,并采用以下格式:
日期的月份部分。
一个 U+002F SOLIDUS 字符 (/)。
日期的日部分。
一个 U+002F SOLIDUS 字符 (/)。
日期的年部分。
一个 U+0020 空格字符。
时间的小时部分。
一个 U+003A COLON 字符 (:)。
时间的分钟部分。
一个 U+003A COLON 字符 (:)。
时间的秒部分。
上述所有数值部分(年以外)必须用两个 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.
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 都有一个 当前文档准备状态,一个字符串,最初为“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.
To update the current document readiness for Document
document 更新当前文档准备状态为 readinessValue:
如果 document的 当前文档准备状态 等于 readinessValue,则返回。
将 document的 当前文档准备状态 设置为 readinessValue。
如果 document 与 HTML解析器相关联,则:
触发一个事件
,名为 readystatechange
在 document。
如果一个 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。
DOMHighResTimeStamp
值DOMHighResTimeStamp
值每个 Document 都有一个 渲染阻塞元素集合,这是一个 集合 ,初始为空集合。
如果 Document document
allows adding render-blocking elements
if document's 内容类型 是“text/html" and body元素 为null,则
document 允许添加渲染阻塞元素。
如果以下两个条件都为真,则 Document
document 被认为是
渲染阻塞 :
document的 渲染阻塞元素集合 非空,或者 document 允许添加渲染阻塞元素。
The current high resolution time given document的 当前高分辨率时间 尚未超过一个 实现定义 的超时值。
要 阻止渲染 元素 el:
令 document 为 el的 节点文档。
如果 document 允许添加渲染阻塞元素, then append el 附加到 document的 渲染阻塞元素集合中。
document.head
Support in all current engines.
返回 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 所给定的。
可以设置,以更新文档的标题。如果没有合适的元素可以更新,新值将被忽略。
Support in all current engines.
在获取时, title
属性必须运行以下算法:
如果 文档元素 是一个 SVG
svg 元素,则
令 value be the child
text content of the first SVG
title element that is a child of the 文档
元素的子元素。
否则,令 value be the child
text content of 该
title 元素, or the empty string if 该 title
元素 为 null,则为空字符串。
Strip and collapse ASCII whitespace in value.
返回 value。
设置时,必须运行以下列表中第一个匹配条件对应的步骤:
svg 元素If there is an SVG title element that is a child of the
document element, let element 为第一个这样的
元素。
否则:
令 element be the result of creating an
element given the 文档
元素的 节点
文档、"title" 和 SVG
命名空间.
将 element as the first child of the 文档 元素.
String replace all with the given value within element.
如果 该 title
元素 为 null,且 该
head
元素 为 null,则返回。
如果 该 title
元素 非 null,则令 element 为
该 title
元素。
否则:
String replace all with the given value within element.
不执行任何操作。
document.body [ = value ]
Support in all current engines.
返回 body 元素。
可以设置,以替换 body 元素。
如果新值不是 body 或 frameset 元素,这将抛出一个 "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)。在设置时,必须运行以下算法:
body 或 frameset 元素,则抛出一个
"HierarchyRequestError" DOMException。
HierarchyRequestError" DOMException。
由 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
所有当前引擎都支持。
返回一个 HTMLCollection
,其中包含 img 元素在
Document中。
document.embeds
所有当前引擎都支持。
document.plugins
所有当前引擎都支持。
返回一个 HTMLCollection
,其中包含 embed 元素在
Document中。
document.links
所有当前引擎都支持。
返回一个 HTMLCollection
,其中包含 a 和 area 元素在 Document 中具有 href
属性。
document.forms
所有当前引擎都支持。
返回一个 HTMLCollection
,包含在 form 元素的
Document中。
document.scripts
所有当前引擎都支持。
返回一个 HTMLCollection
,包含 script 元素在
Document中。
The images
属性必须返回一个根植于 HTMLCollection
在 Document 节点,过滤器仅匹配 img 元素。
The embeds
属性必须返回一个根植于 HTMLCollection
在 Document 节点,过滤器仅匹配 embed 元素。
The plugins
属性必须返回与 embeds
属性返回的对象相同的对象。
The forms
属性必须返回一个 HTMLCollection
的根节点在 Document 节点,过滤器仅匹配 form 元素。
The scripts
属性必须返回一个 HTMLCollection
的根节点在 Document 节点,过滤器仅匹配 script 元素。
collection = document.getElementsByName(name)
Support in all current engines.
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
Support in all current engines.
返回当前正在执行的 script
元素,或 SVG
script 元素,
前提是该元素表示一个 经典脚本。在
可重入脚本执行的情况下,返回那些尚未执行完成的元素中最近开始执行的那个。
如果 Document 当前没有
正在执行 script 或
SVG
script 元素(例如,因为正在运行的脚本是一个事件
处理器,或一个定时器),或者如果当前正在执行的 script 或 SVG
script 元素表示一个 模块脚本,则返回
null。
The currentScript 属性,在获取时,必须返回最近设置的值。当 Document 创建时, currentScript
必须初始化为
null。
此 API 在实现者和标准社区中已经失宠,因为它全局暴露 script 或 SVG script 元素。因此,它在较新的上下文中不可用,例如运行 模块脚本 或在 影子树中运行脚本时。我们正在研究在这种上下文中识别运行脚本的新解决方案,这不会使其全局可用:请参见 问题#1013。
接口 Document interface 支持命名属性。 支持的属性名称 在
Document 对象 document
的任何时刻包括以下内容,按贡献它们的元素的
树顺序 ,忽略后面的重复项,值来自 id
属性在来自 name 属性的值之前贡献相同时:
the value of the name content attribute for all
暴露的 embed, form, iframe,
img和 暴露的 object 元素,其
name content attribute and are in a document
tree with
document 作为其根 根;
the value of the id
content attribute for all
暴露的 object 元素,其
id content attribute
and are in a document tree with
document 作为其根 根;
the value of the id
content attribute for all
img 元素,其 id
内容属性的值不为空且其 name content attribute, and are in a
document tree with document 作为其根 根。
为了 确定命名属性
name 的值对于 Document,用户代理必须返回使用以下步骤获得的值:
让 elements be the list of named
elements with the name name 的 命名元素
的列表,这些元素在文档树中的
Document 作为其根 根。
会有至少一个这样的元素,因为该算法否则不会被 由 Web IDL 调用。
如果 elements 只有一个元素,并且该元素是 iframe
元素,并且该 iframe 元素的
内容可导航 不为
null,则返回该元素的 活动 WindowProxy of the
element's
content navigable.
否则,如果 elements 只有一个元素,则返回该元素。
否则,返回一个 HTMLCollection
的根节点在 Document node,
whose filter matches only named elements with
the name name.
命名元素 带有名称 name,对于上述算法而言,是那些要么是:
An embed 或 object 元素被称为 暴露的 如果它没有 暴露的 object 祖先,并且对于
object 元素,此外,还没有显示其 回退内容 或没有 object 或
embed 后代。
The dir
属性在
Document 接口中与 dir
内容属性一起定义。
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将更新渲染以显示进度的变化。
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 元素,例如:
“如模块A、B、C和D的图中所示...”
“在图27中...”(没有超链接)
“从‘简单模块图’图的内容中...”
“在下面的图中...”(但 不推荐这样做)
所有 HTML元素接口继承的基本接口,并且必须由没有其他要求的元素使用的是 HTMLElement 接口。
所有当前引擎支持。
Support in all current engines.
Support in all current engines.
Support in all current engines.
Support in all current engines.
所有当前引擎支持。
[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 的元素的 元素接口 确定如下:
如果 name 是 applet、 bgsound、 blink、
isindex、 keygen、 multicol、 nextid或
spacer,则返回 HTMLUnknownElement。
如果 name 是 acronym、 basefont、 big、
center、 nobr、 noembed、 noframes、
plaintext、 rb、 rtc、 strike或
tt,则返回 HTMLElement。
如果 name 是 listing 或 xmp,则返回
HTMLPreElement。
Otherwise, if this specification defines an interface appropriate for the element type corresponding to the local name name, then return that interface.
如果 其他适用规范 定义了 name的适当接口,则返回它们定义的接口。
如果 name 是 有效的自定义元素名称,则返回
HTMLElement。
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]
Support in one engine only.
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);
为了支持 自定义元素 功能,所有HTML元素都有特殊的构造函数行为。这是通过 [HTMLConstructor] IDL
扩展属性来表示的。它表明给定接口的接口对象在调用时将具有特定行为,详见以下定义。
The [HTMLConstructor]
扩展属性不得带有参数,并且只能出现在 构造函数操作上。它必须仅在构造函数操作上出现一次,并且接口必须仅包含单个带注释的构造函数操作,而没有其他的。带注释的构造函数操作必须声明为不带参数。
带有 [HTMLConstructor]
扩展属性的构造函数操作的接口具有以下
覆盖的构造函数步骤:
如果 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.
令 registry 为 null。
如果 surrounding agent的 active custom element constructor map[NewTarget] exists:
否则,将 registry 设置为 current global object的 associated
Document的 custom element registry。
令 definition 为 registry的 custom element
definition set with constructor 中构造函数等于
NewTarget的项目。如果没有这样的项目,则抛出 TypeError。
由于 registry的 custom element definition set with a constructor 中不可能有构造函数为 undefined 的项目,此步骤也防止 HTML element constructors 被作为函数调用(因为在那种情况下 NewTarget 将为 undefined)。
令 isValue 为 null。
如果 definition的 local name 等于 definition的 name (即 definition 用于 autonomous custom element):
如果 活动函数对象 不是 HTMLElement,则抛出
TypeError。
这种情况可能发生在定义不扩展任何本地名称但继承自非HTMLElement 类的自定义元素时:
customElements. define( "bad-2" , class Bad2 extends HTMLParagraphElement {});
在这种情况下,在构造 super() 实例时发生的(隐式) Bad2调用期间, 活动函数对象 是 HTMLParagraphElement,而不是
HTMLElement。
否则(即 definition 是 定制内建元素),则:
令 valid local names 为在本规范或 其他适用规范 中定义的使用 活动函数对象 作为其 元素接口的元素的本地名称列表。
如果 valid local names 不包含 definition的 本地名称,则抛出
TypeError。
这种情况可能发生在定义扩展给定本地名称但继承自错误类的自定义元素时:
customElements. define( "bad-3" , class Bad3 extends HTMLQuoteElement {}, { extends : "p" });
在这种情况下,在构造 super() 实例时发生的(隐式) Bad3调用期间, valid local names 是包含
q
和 blockquote的列表,但
definition的 本地名称 是 p,它不在该列表中。
将 isValue 设置为 definition的 名称。
如果 definition的 构造栈 为空,则:
令 element 为 内部创建一个实现接口的新对象 的结果,该接口与 活动函数对象 对应,给定 当前领域 和 NewTarget。
将 element的 节点文档 设置为
当前全局对象的 关联的
Document。
将 element的 命名空间前缀 设置为null。
将 element的 自定义元素注册表(custom element registry) 设为 registry。
将 element的 自定义元素状态 设置为“custom”。
将 element的 自定义元素定义 设置为 definition。
将 element的 is 值 设置为 isValue。
返回 element。
当作者脚本直接构造新的自定义元素时,例如通过 new MyCustomElement(),会发生这种情况。
如果 prototype 不是一个对象,则:
将 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 算法的类似行为保持一致。
令 element 为 definition的 构造栈中的最后一个条目。
如果 element 是一个 已构造 标记,则抛出一个 TypeError。
这种情况可能发生在 自定义元素构造函数 不合规 地在调用 super()之前构造另一个正在构造的类的实例时:
let doSillyThing = true ;
class DontDoThis extends HTMLElement {
constructor() {
if ( doSillyThing) {
doSillyThing = false ;
new DontDoThis();
// Now the construction stack will contain an already constructed marker.
}
// This will then fail with a TypeError:
super ();
}
}
执行? element.[[SetPrototypeOf]](prototype)。
返回 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 );
本规范中的每个元素都有一个定义,包含以下信息:
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.
规范性描述了必须作为子元素和后代元素包含的内容。
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 接口的规范性定义。
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.
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.
本规范中定义的每个元素都有一个内容模型:元素期望的 内容的描述。一个 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' ),
};
当一个元素的内容模型为 nothing时,该元素不得包含任何 Text
节点(除了 元素间空白)和任何元素节点。
大多数内容模型为“nothing”的HTML元素,为了方便起见,也是 空元素 (在 HTML语法 中没有 结束标签的元素)。然而,这些概念是完全独立的。
HTML中的每个元素属于一个或多个 类别 ,这些类别将具有相似特征的元素分组在一起。本规范中使用了以下广泛类别:
一些元素也属于其他类别,这些类别在本规范的其他部分定义。
这些类别的关系如下:
分区内容、标题内容、短语内容、嵌入内容和交互内容都是流内容的一种。元数据有时是流内容。元数据和交互内容有时是短语内容。嵌入内容也是一种短语内容,有时是交互内容。
其他类别也用于特定目的,例如,表单控件使用多个类别来定义通用要求。一些元素具有独特的要求,不属于任何特定类别。
元数据内容 是设置其余内容的呈现或行为,或者设置文档与其他文档之间的关系,或者传递其他“带外”信息的内容。
来自其他命名空间的元素,其语义主要与元数据相关(例如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序列化中,这是不可能的。
大多数在文档和应用程序主体中使用的元素被归类为 流内容。
aabbraddressarea (if it is a descendant of a
map element)
articleasideaudiobbdibdoblockquotebrbuttoncanvascitecodedatadatalistdeldetailsdfndialogdivdlemembedfieldsetfigurefooterformh1
h2
h3
h4
h5
h6
headerhgrouphriiframeimginputinskbdlabellink (如果它是 允许在body中)main (如果它是 层次结构正确的
main 元素)mapmarkmathmenumeta (如果存在 itemprop
属性)meternavnoscriptobjectoloutputppicturepreprogressqrubyssampscriptsearchsectionselectslotsmallspanstrongsubsupsvgtabletemplatetextareatimeuulvarvideowbr分节内容 是定义 header
和 footer 元素作用范围的内容。
标题内容 定义了一个部分的标题(无论是显式标记为 分节内容 元素,还是由标题内容本身隐含)。
内联内容 是文档的文本,以及在段内级别标记这些文本的元素。 内联内容 的连续部分形成 段落。
aabbrarea (if it is a descendant
of a map element)audiobbdibdobrbuttoncanvascitecodedatadatalistdeldfnemembediiframeimginputinskbdlabellink (if it is allowed
in the body)mapmarkmathmeta (if the itemprop
attribute is present)meternoscriptobjectoutputpictureprogressqrubyssampscriptselectselectedcontent
(如果它是 button 的后代,并且该
button
在
select)
slotsmallspanstrongsubsupsvgtemplatetextareatimeuvarvideowbr大多数被归类为短语内容的元素只能包含本身也是短语内容的元素,而不能包含任何流内容。
文本在内容模型的上下文中,意味着要么没有内容,要么包含 Text
节点。 文本 有时被单独用作内容模型,但也属于 短语内容,并且可以是 元素间空白 (如果 Text
节点是空的或仅包含 ASCII空白)。
Text
节点和属性值必须由 标量值组成,不包括 非字符和 控制字符 ,除
ASCII空白.
This specification includes extra constraints on the exact value of Text
节点和属性值的确切值提出了额外的约束。
嵌入内容 是将其他资源导入文档,或将来自其他词汇的内容插入文档的内容。
来自 HTML命名空间 以外的命名空间且传递内容但不传递元数据的元素,在本规范定义的内容模型中被视为 嵌入内容 。(例如,MathML或SVG。)
一些嵌入内容元素可以有 后备内容:当外部资源无法使用时(例如,由于格式不支持),使用的内容。元素定义会说明后备内容的情况(如果有的话)。
交互内容 是专为用户交互设计的内容。
a (如果存在 href 属性)audio (如果存在 controls 属性)buttondetailsembediframeimg (如果有 usemap 或 controls 属性)input (如果 type 属性 不 处于 状态)
labelselecttextareavideo (如果存在 controls 属性)作为一般规则,允许任何 流内容 或 短语内容 should have at least one node in its contents that is 可感知内容 ,并且未指定 属性。
可感知内容 通过提供一些后代非空的 文本, or else something
users can
hear (audio elements) or view
(video, img, or
canvas elements) or
otherwise interact with (for example, interactive form
controls).
这一要求并不是硬性规定,因为在许多情况下,元素可以合法地为空,例如用作占位符,稍后会由脚本填充,或当元素是模板的一部分时,在某些页面上通常会填充,但在其他页面上可能不相关。
鼓励符合性检查器为作者提供一种机制,帮助他们查找未满足此要求的元素,作为一种创作辅助工具。
以下元素是可感知内容:
aabbraddressarticleasideaudio (如果存在 controls 属性)bbdibdoblockquotebuttoncanvascitecodedatadeldetailsdfndivdl (如果元素的子元素包含至少一个名称-值组)emembedfieldsetfigurefooterformh1
h2
h3
h4
h5
h6
headerhgroupiiframeimginput (如果 type 属性 不 处于 状态)inskbdlabelmainmapmarkmathmenu (如果元素的子元素包含至少一个 li
元素)meternavobjectol (如果元素的子元素包含至少一个 li 元素)
outputppicturepreprogressqrubyssampsearchsectionselectsmallspanstrongsubsupsvgtabletextareatimeuul (如果元素的子元素包含至少一个 li 元素)
varvideo脚本支持元素 是那些本身不 表示 任何内容的元素(即它们不被渲染),而是用于支持脚本,例如为用户提供功能。
以下元素是脚本支持元素:
有些元素被描述为 透明;它们的内容模型描述中包含“透明”一词。一个 透明 元素的内容模型源自其父元素的内容模型:在透明部分所需的元素与透明元素所在的父元素内容模型中所需的元素相同。
在某些情况下,透明元素嵌套在彼此之中,需要迭代地应用此过程。
考虑以下标记片段:
< p >< object >< ins >< map >< a href = "/" > Apples</ a ></ map ></ ins ></ object ></ p >
要检查“Apples”是否允许在 a
元素内部,需要检查内容模型。 a
元素的内容模型是透明的, map
元素的内容模型也是透明的, ins
元素的内容模型也是透明的,
object
元素的内容模型也是透明的。
object 元素位于
p 元素中,其内容模型是
短语内容。因此,“Apples”是允许的,因为文本是短语内容。
当一个透明元素没有父元素时,其内容模型中“透明”的部分必须改为接受任何 流内容。
本节定义的 段落 术语不仅仅用于 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 >
在 流内容 中的段落相对于没有 a、 ins、 del和 map
元素的文档外观来定义,因为这些元素及其混合内容模型可以跨越段落边界,如下面的前两个示例所示。
通常,最好避免元素跨越段落边界。维护这样的标记可能很困难。
以下示例采用早期示例中的标记,并在一些标记周围放置 ins 和
del
元素,显示文本已更改(尽管在这种情况下,这些更改确实没有多大意义)。请注意,本示例与前一个示例具有完全相同的段落,尽管存在 ins 和 del 元素—— ins 元素跨越标题和第一个段落,
del 元素跨越两个段落之间的边界。
< section >
< ins >< h2 > Example of paragraphs</ h2 >
This is the < em > first</ em > paragraph in</ ins > this example< del > .
< p > This is the second.</ p ></ del >
<!-- This is not a paragraph. -->
</ section >
让 view be a view of the DOM that replaces all a、
ins、 del和 map elements in the document with their
contents. Then, in
view中,对于每个由其他类型内容不间断的兄弟 短语内容
节点组成的运行,在一个接受内容类型不仅限于 短语内容 以及 短语内容的元素中,令 first 为运行的第一个节点,令
last 为运行的最后一个节点。对于每个由至少一个既不是 嵌入内容 也不是 元素间空白的节点组成的运行,原始DOM中的一个段落存在于 first 之前到
last之后。(因此段落可以跨越 a、
ins、 del和 map 元素。)
符合性检查器可能会警告作者他们有段落相互重叠的情况(这种情况可能发生在 object、 video、 audio和
canvas
元素中,及通过允许HTML进一步嵌入其中的其他命名空间中的元素间接发生,如 SVG
svg 或 MathML
math)。
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 >
共有五个段落:
object 元素。第一个段落被其他四个段落重叠。支持“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 >
以下属性是所有 HTML元素 (即使那些未在本规范中定义的元素)共有的,并且可以在所有HTML元素上指定:
accesskey
autocapitalizeautocorrectautofocuscontenteditable
dirdraggableenterkeyhintheadingoffsetheadingresetinertinputmodeisitemiditemprop
itemrefitemscopeitemtypelangnoncepopoverspellcheckstyletabindextitletranslatewritingsuggestions
这些属性仅在本规范中定义为 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 >
Support in all current engines.
DOM 定义了用户代理对任何命名空间中的任何元素的 class、 id和 slot 属性的要求。
[DOM]
The class、 id和 slot 属性可以在所有 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空白字符。
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 role 和 aria-* 属性)。
[ARIA]
以下 事件处理程序内容属性 可以在任何 HTML元素上指定:
onauxclickonbeforeinput
onbeforematch
onbeforetoggle
onblur*oncanceloncanplayoncanplaythrough
onchangeonclickoncloseoncommandoncontextlost
oncontextmenu
oncontextrestored
oncopyoncuechangeoncutondblclickondragondragendondragenterondragleaveondragoverondragstartondropondurationchange
onemptiedonendedonerror*onfocus*onformdataoninputoninvalidonkeydownonkeypressonkeyuponload*onloadeddataonloadedmetadata
onloadstartonmousedownonmouseenteronmouseleaveonmousemoveonmouseoutonmouseoveronmouseuponpasteonpauseonplayonplayingonprogressonratechangeonresetonresize*onscroll*onscrollend*onsecuritypolicyviolation
onseekedonseekingonselectonslotchangeonstalledonsubmitonsuspendontimeupdateontoggleonvolumechange
onwaitingonwheel带星号的属性在
body
元素上指定时有不同的含义,因为这些元素公开具有相同名称的 事件处理程序 的
Window 对象。
虽然这些属性适用于所有元素,但并不是在所有元素上都有用。例如,只有 媒体元素 才会接收到由用户代理触发的 volumechange
事件。
自定义数据属性 (例如
data-foldername 或 data-msgid)可以在任何
HTML元素上指定,用于存储自定义数据、状态、注释等与页面相关的内容。
在 HTML文档中, HTML命名空间 中的元素可以指定
xmlns 属性,但仅当且仅当其值为http://www.w3.org/1999/xhtml时才可以。这不适用于 XML文档。
在 HTML 中, xmlns 属性完全没有任何作用。它基本上只是一个护身符。之所以允许它,仅仅是为了让与 XML 之间的迁移稍微容易一些。当由 HTML 解析器解析时,该属性最终不属于任何命名空间。在 XML
中,该属性是命名空间声明机制的一部分,并且始终位于 "http://www.w3.org/2000/xmlns/" 命名空间中。
XML 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.
title 属性在所有当前引擎中支持。
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 >
一些元素,如 link,
abbr,和 input,对 title
属性定义了额外的语义。
元素的 建议信息 是以下算法返回的值,一旦返回值,算法将终止。当算法返回空字符串时,则表示没有建议信息。
用户代理应在元素有 建议信息时通知用户,否则这些信息将不可发现。
lang 和 xml:lang
属性在所有当前引擎中支持。
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 命名空间 的元素使用该属性的值。
lang 属性
使用该属性的值。
使用该 语言 的 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).
如果结果值为空字符串,则必须将其解释为该节点的语言为 显式未知。
用户代理可以使用元素的语言来确定适当的处理或渲染(例如在选择适当的字体或发音,字典选择,或表单控件如日期选择器的用户界面)。
translate 属性在所有当前引擎中支持。
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.
以下属性是 可翻译属性:
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 on input elements with a
type attribute in the
Button 属性处于 Reset
Button 状态时。
其他规范可以定义其他也是 可翻译属性的属性。例如, 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 >
dir 属性Support in all current engines.
The dir attribute
是一个 枚举属性 ,具有以下关键字和状态:
| 关键字 | 状态 | 简要描述 |
|---|---|---|
ltr
|
LTR | 元素内容是明确方向隔离的从左到右文本。 |
rtl
|
RTL | 元素内容是明确方向隔离的从右到左文本。 |
auto
|
Auto | 元素内容是明确方向隔离的文本,但方向应通过程序根据元素内容确定(如下所述)。 |
The heuristic used by the Auto 状态使用的启发式方法非常粗略(它只看具有强方向性的第一个字符,类似于双向算法中的段落级确定)。建议作者仅在文本方向确实未知且无法应用更好的服务器端启发式方法时才使用此值。 [BIDI]
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'。
返回'rtl'。
让 result be the auto directionality of element.
如果 result 为null,则返回'ltr'。
返回 result。
bdi 元素让 result be the auto directionality of element.
如果 result 为null,则返回'ltr'。
返回 result。
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:
如果 element 是一个 自动方向性关联表单元素:
如果 element 是一个 slot 元素,且其 根 是一个
shadow root 并且 element的 已分配节点 不为空:
对于每个 node element of element's 已分配节点:
设 childDirection be null.
如果 child 是一个 Text
节点,则将 childDirection to
the text node
directionality of child.
否则:
将 childDirection to the contained text auto directionality of child with canExcludeRoot set to true.
如果 childDirection 不是 null,则返回 childDirection.
Return null.
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:
对于每个 node element of element's 后代节点,按 树顺序:
如果以下任意条件成立
属于以下类型之一
则 继续。
如果 descendant 是一个 slot 元素,并且其 根 是一个
shadow root,则返回该 方向性 of that shadow root's
host.
设 result be the text node directionality of descendant.
如果 result 不是 null,则返回 result.
Return null.
To compute the text node directionality given a Text
节点
text:
To compute the parent directionality given an element element:
设 parentNode 为 element's parent node.
如果 parentNode 是一个 shadow root, then return the 方向性 ,即 parentNode的 宿主.
如果 parentNode is an element, then return the directionality of parentNode.
返回 '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:
以下属性是 支持方向性的属性:
document.dir [ = value ]返回 the html
元素的 dir
属性的值(如果有)。
可以设置为"ltr"、"rtl"或"auto",以替换 the html 元素的
dir 属性的值。
如果没有 html
元素,则返回空字符串并忽略新值。
Support in all current engines.
Support in all current engines.
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?”出现在阿拉伯文本的左侧。
style 属性支持所有当前引擎。
所有 HTML元素 都可以设置 style 内容属性。这是一个 样式属性 ,定义在 CSS Style
Attributes中。 [CSSATTR]
在支持CSS的用户代理中,当添加或更改属性值时,必须按照 样式属性的规则解析该属性的值。 [CSSATTR]
但是,如果在执行 应该通过内容安全政策阻止元素的内联行为吗?
算法时返回“Blocked”,并在属性的 元素、“style attribute”和属性的值上执行,那么属性值中定义的样式规则不得应用于
元素。 [CSP]
使用任何元素的 style
属性的文档,即使这些属性被删除,也必须能够理解和使用。
特别是,使用 style
属性来隐藏和显示内容,或传达文档中未包含的意义,是不符合规范的。(要隐藏和显示内容,请使用
属性。)
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 >
data-*
属性
在所有当前引擎中支持。
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
在所有当前引擎中支持。
在所有当前引擎中支持。
返回一个 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的名称-值对,请运行以下算法:
让 list 成为空的名称-值对列表。
对于 DOMStringMap的
关联元素
上的每个内容属性,其前五个字符是字符串 "data-",其余字符(如果有)不包含任何 ASCII 大写字母,按这些属性在元素的 属性列表中列出的顺序,为
list 添加一个名称-值对,其名称为去掉前五个字符后的属性名称,其值为属性的值。
对于 list中的每个名称,对于名称中每个后面跟有一个 ASCII 小写字母的 U+002D 连字符,将 U+002D 连字符删除,并用相同字符 转换为 ASCII 大写字母替换其后的字符。
返回 list。
在任何时刻, 支持的属性名称 在 DOMStringMap
对象上,是从 获取
DOMStringMap的名称-值对 时返回的每对名称,在返回的顺序中。
要 确定命名属性的值
name ,对于 DOMStringMap,返回名称-值对列表中名称为
name in the list returned from getting the
DOMStringMap's name-value
pairs.
要 设置新命名属性的值 或
设置现有命名属性的值
对于 DOMStringMap,给定属性名称
name 和新值 value,运行以下步骤:
如果 name 包含一个后跟 ASCII
小写字母的 U+002D 连字符,则抛出一个 "SyntaxError"
DOMException。
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 小写字母。
Insert the string data- at the front of name.
如果 name 不是 有效属性本地名称(valid attribute local name),
则抛出
"InvalidCharacterError" DOMException。
Set an attribute value for the
DOMStringMap的
关联元素
using name and value.
要 删除现有命名属性
name 对于 DOMStringMap,运行以下步骤:
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 小写字母。
Insert the string data- at the front of name.
通过名称删除属性 给定
name 和 DOMStringMap的
关联元素。
此算法只会由 Web IDL 为 获取
DOMStringMap的名称-值对的早期算法给定的名称调用。 [WEBIDL]
如果一个网页希望一个元素代表一个飞船,例如作为游戏的一部分,它必须使用 class
属性以及 data-*
属性:
< div class = "spaceship" data-ship-id = "92432"
data-weapons = "laser 2" data-shields = "50%"
data- x = "30" data-y = "10" data-z = "90" >
< button class = "fire"
onclick = "spaceships[this.parentNode.dataset.shipId].fire()" >
Fire
</ button >
</ div >
请注意,连字符的属性名称在 API 中变为驼峰形式。
给定以下片段和具有类似结构的元素:
< img class = "tower" id = "tower5" data- x = "12" data-y = "5"
data-ai = "robotarget" data-hp = "46" data-ability = "flames"
src = "towers/rocket.png" alt = "Rocket Tower" >
...可以想象一个函数 splashDamage() 需要一些参数,第一个是要处理的元素:
function splashDamage( node, x, y, damage) {
if ( node. classList. contains( 'tower' ) && // checking the 'class' attribute
node. dataset. x == x && // reading the 'data-x' attribute
node. dataset. y == y) { // reading the 'data-y' attribute
var hp = parseInt( node. dataset. hp); // reading the 'data-hp' attribute
hp = hp - damage;
if ( hp < 0 ) {
hp = 0 ;
node. dataset. ai = 'dead' ; // setting the 'data-ai' attribute
delete node. dataset. ability; // removing the 'data-ability' attribute
}
node. dataset. hp = hp; // setting the 'data-hp' attribute
}
}
innerText 和 outerText 属性在所有当前引擎中支持。
element.innerText [ = value ]
返回元素的“渲染后”文本内容。
可以设置,替换元素的子节点为给定值,但换行符会转换为 br
元素。
element.outerText [ = value ]
返回元素的“渲染后”文本内容。
可以设置,替换元素为给定值,但换行符会转换为
br 元素。
The 获取文本步骤,给定 HTMLElement element,如下:
如果 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
被渲染的元素访问时,其所有未 被渲染 的子元素的文本内容将被忽略。
设 results 为一个新的空的 列表。
对于 element 的每个子节点 node:
令 current 为运行 列表 resulting from running the rendered text collection steps with node. Each item in results 中的每一项要么是 字符串 (string),要么是正整数(即 需要换行的计数)。
直观上,一个 需要的换行符计数 项表示在该点有一定数量的换行符,但它们可以与相邻的 需要的换行符计数 项的换行符合并,类似于 CSS 的边距折叠。
将 current 中的每一项附加到 results, append item to results.
移除 any items from results 中所有空字符串项。
移除 any runs of consecutive required line break count items at the start or end of results.
替换 每个剩余的连续的 需要的换行符计数 项,以包含与该 需要的换行符计数 项中的最大值相同数量的 U+000A LF 码点的字符串。
返回 results中字符串项的连接结果。
在所有当前引擎中支持。
The 渲染文本收集步骤,给定 节点 node,如下:
对 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 列表。
如果 node的 计算值 的 'visibility' 不是 'visible',则返回 items。
如果 node 未 被渲染,则返回 items。对于此步骤,如果 计算值 的 'display' 属性不是 'none',则以下元素必须按如下描述行为:
select
元素有一个关联的非替换型行内 CSS box
,
其子 box 只包括 optgroup
和 option
element
descendant nodes;
optgroup
元素有一个关联的非替换型块级 CSS
box ,其子 box 只包括 option
element descendant
nodes; and
items 可能由于 'display:contents' 而非空。
如果 node 是 Text
节点,则对于由
node生成的每个 CSS 文本框,按内容顺序,计算应用 CSS
'white-space' 处理规则和 'text-transform' 规则后的文本,将
items 设置为结果字符串的 列表 ,并返回 items。CSS 'white-space' 处理规则稍有修改:行尾的可折叠空格总是会被折叠,但只有当行是块的最后一行,或以 br
元素结尾时,才会被移除。软连字符应保留。
[CSSTEXT]
如果 node 是 br element, then append a string containing a single U+000A LF code point to
items添加包含单个 U+000A LF 码点的字符串。
如果 node的 计算值 的 'display' 是 'table-cell',且 node的 CSS 盒 is not the last 'table-cell' box of its enclosing 'table-row' 盒的最后一个 'table-cell' 盒,则向 items添加包含单个 U+0009 TAB 码点的字符串。
如果 node的 计算值 的 'display' 是 'table-row',且 node的 CSS 盒 is not the last 'table-row' box of the nearest ancestor 'table' 盒的最后一个 'table-row' 盒,则向 items添加包含单个 U+000A LF 码点的字符串。
如果 node 是 p element, then append 2 (a required line break count) at the beginning and end of
items.
如果 node的 使用值 的 'display' 是 块级 或 'table-caption', then append 1 (a required line break count) at the beginning and end of items. [CSSDISPLAY]
浮动和绝对定位的元素属于此类别。
返回 items。
请注意,大多数替换元素(例如 textarea、
input和 video —— 但不包括 button)的后代节点严格来说不会被
CSS 渲染,因此在此算法中没有 CSS 盒 。
此算法可以概括为适用于 范围。然后我们可以将其用作 Selection的字符串化的基础,甚至可以直接在
范围上公开它。请参阅 Bugzilla bug 10583。
The 设置内部文本步骤,给定 HTMLElement element和字符串 value ,如下:
设 fragment be the rendered text fragment for value given element的 渲染文本片段。
替换所有 with element 内的 fragment。
The innerText 的 setter
步骤是用 设置
inner
text 步骤 ,传递 此对象 和给定值。
The outerText 的 setter
步骤如下:
如果 此对象的父节点为 null,则抛出
"NoModificationAllowedError" DOMException。
令 fragment be the rendered text fragment for the given value given 此对象的 节点文档.
如果 fragment 没有 子节点,则
追加 一个新的
Text
节点,其 数据 为空字符串, 节点文档
为
此对象的 节点文档
到 fragment。
如果 next 非空且 next的 上一个兄弟节点 是一个
Text
节点,则 合并到下一个文本节点 ,传递
next的
上一个兄弟节点。
如果 previous 是一个 Text
节点,则 合并到下一个文本节点 ,传递 previous。
The 渲染文本片段 ,给定字符串 input 和
Document document
,运行以下步骤:
设 fragment 为一个新的 DocumentFragment
,其 节点文档 为
document。
设 position 为 位置变量 ,最初指向 input, initially pointing at the start of input.
设 text 为空字符串。
当 position 未越过 input的末尾时:
收集 从 input 给定 position开始的非 U+000A LF 或 U+000D CR 的一系列码点,并将 text 设置为结果。
如果 text 不是空字符串,则 追加
一个新的 Text
节点,其 数据 为
text ,其 节点文档 为
document 到 fragment。
当 position 未越过 input的末尾,且 position 处的码点为 U+000A LF 或 U+000D CR 时:
如果 position 处的码点为 U+000D CR 且下一个码点为 U+000A LF,则将 position 前移到 input的下一个码点。
将 position 前移到 input的下一个码点。
追加
the result of creating an
element given document、"br" 和 HTML
命名空间 创建的,追加到 fragment.
返回 fragment。
To 与下一个文本节点合并 ,给定 Text
节点 node:
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 交互不佳。
用户代理必须实现 Unicode 双向算法,以确定在渲染文档和文档部分时字符的正确排序。 [BIDI]
HTML 到 Unicode 双向算法的映射必须通过以下三种方式之一进行。用户代理必须实现 CSS,特别是 CSS 的 'unicode-bidi'、 'direction'和 'content' 属性,并且在其用户代理样式表中,必须包含在本规范的 渲染 部分中给出的使用这些属性的规则;或者,用户代理必须表现得像实现了上述属性,并且有一个包含所有上述规则的用户代理样式表,但不允许文档中指定的样式表覆盖它们;或者,用户代理必须实现另一种具有等效语义的样式语言。 [CSSGC]
以下元素和属性的要求由 渲染 部分定义,由于本节中的要求,这些要求对所有用户代理(不仅仅是那些 支持建议的默认渲染的用户代理)都是强制性的:
在 HTML 元素 上实现无障碍 API 语义的用户代理要求在 HTML Accessibility API Mappings中定义。除了那里规定的规则外,对于一个 自定义元素 element,默认的 ARIA 角色语义按如下方式确定: [HTMLAAM]
类似地,对于一个 自定义元素 element,默认的 ARIA 状态和属性语义,对于名为 stateOrProperty的状态或属性,按如下方式确定:
如果 element的 附加内部 不为空:
如果 element的 附加内部的 获取 stateOrProperty关联元素 存在,则返回运行结果。
如果 element的 附加内部的 获取 stateOrProperty关联元素 存在,则返回运行结果。
返回 stateOrProperty的默认值。
此处提到的“默认语义”有时在 ARIA中也称为“本机”、“隐式”或“主机语言”语义。 [ARIA]
这些定义的一个含义是默认语义可以随时间变化。这允许自定义元素具有与内置元素相同的表达能力;例如,比较 a
元素的默认 ARIA 角色语义在 href
属性添加或移除时如何变化。
有关实际应用的示例,请参见 自定义元素部分。
Conformance checker requirements for checking use of ARIA role 和 aria-* attributes on
HTML elements are defined in ARIA in
HTML中定义。
[ARIAHTML]
html
元素所有当前引擎均支持。
所有当前引擎均支持。
head 元素,后面跟着一个
body 元素。
html 元素的 开始标签 可以省略,
如果 html 元素内的第一个内容不是 注释。html 元素的 结束标签 可以省略,前提是 html 元素后面没有紧接着一个 注释。[Exposed =Window ]
interface HTMLHtmlElement : HTMLElement {
[HTMLConstructor ] constructor ();
// also has obsolete members
};
建议作者在根 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 >
head
元素支持所有当前的引擎。
支持所有当前的引擎。
html 元素中的第一个元素。iframe srcdoc 文档 或
如果从更高层协议中可以获得标题信息:零个或多个 元数据内容元素,其中最多一个是
title 元素,最多一个是 base 元素。
title 元素,最多一个是 base 元素。head 元素的 开始标签 可以省略,如果该元素为空,或者如果 head 元素中的第一个元素是一个元素。head 元素的 结束标签 可以省略,如果 head 元素后面没有紧接着 ASCII 空白字符
或
注释。
[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 元素。
title
element在所有当前引擎中均受支持。
在所有当前引擎中均受支持。
head 元素中包含的 title
元素。[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 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.
base
element支持所有当前引擎。
支持所有当前引擎。
head element containing
no other base elements.href — 文档基础 URL
target — Default navigable for 超链接 导航
和 表单提交
[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 属性,除
第一个外其余都会被忽略。
要 获取元素的目标,给定一个 a、 area或
form 元素
element,以及一个可选的字符串或 null target
(默认 null),运行以下步骤:
如果 target 为 null:
如果 target 不为 null,并且同时包含一个 ASCII 制表符
或换行符 和
U+003C (<),则将 target 设置为 "_blank"。
返回 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:
令 document 为 element的 节点文档。
令 urlRecord be the result of parsing the
value of document's href content attribute with
document的 fallback base
URL, and element's href. (Thus, the base
元素不会受到它自身影响。)
如果以下任一项为真:
urlRecord 为失败;
urlRecord的 方案 是
"data" 或 "javascript";或者
running Is base allowed for Document? on urlRecord
和
document returns "Blocked",
将 element的 冻结基础 URL 设置为 urlRecord。
Respond to base URL changes given document.
The href IDL
属性在获取时,必须返回运行以下算法的结果:
<!DOCTYPE html>
< html lang = "en" >
< head >
< title > This is an example for the < base> 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" 的链接。
link
元素支持所有当前引擎。
支持所有当前引擎。
Support in all current engines.
Support in all current engines.
noscript
元素中,该元素是 head 元素的子元素。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样式表集名称
[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,可能被空格包围。必须存在 href 或 imagesrcset
属性中的一个或两个。
如果 href 和 imagesrcset
属性都不存在,则该元素不定义链接。
链接的类型(关系)由 rel
属性的值给出,该属性(如果存在)必须具有一个 唯一的用空格分隔的标记的无序集合。 允许的关键字及其含义 在后面的部分定义。如果 rel
属性缺失、没有关键字,或使用的关键字都不符合本规范中的定义,则该元素不会创建任何链接。
rel的
支持的标记 是在
HTML 链接类型 中定义的关键字,这些关键字在 link
元素上是被允许的,会影响处理模型,并且由用户代理支持。可能的 支持的标记 包括
alternate、
dns-prefetch、
expect、
icon、
manifest、
modulepreload、
next、
pingback、
preconnect、
prefetch、
preload、
search和
stylesheet。
rel的 支持的标记 必须仅包括用户代理实现处理模型的标记。
理论上,用户代理可以支持 canonical 关键字的处理模型——如果它是执行
JavaScript 的搜索引擎。但实际上这非常不可能。因此,在大多数情况下, canonical 不应包含在 rel的 支持的标记中。
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
关键字),并且它们会受到其他属性(如 media 或 title)的不同影响。
例如,下面的 link 元素创建了两个 超链接 (指向相同的页面):
< link rel = "author license" href = "/about" >
这个元素创建的两个链接分别具有以下语义:一个是目标页面有关于当前页面作者的信息,另一个是目标页面有关于当前页面提供的许可证的信息。
Hyperlinks created with the link 元素及其
rel attribute apply to the whole
document. This contrasts with
the rel 属性在 a 和 area
元素中的作用不同,后者指示了链接的类型,其上下文由链接在文档中的位置决定。
与 a 和 area 元素创建的链接不同, 超链接 由 link 元素创建时,默认情况下不会在文档中显示(在支持 建议默认渲染的用户代理中)。即使通过 CSS 强制显示,它们也没有
激活行为。它们主要提供语义信息,可能被页面或其他使用页面内容的软件利用。此外,用户代理可以 提供自己的用户界面以跟随这些超链接。
The exact behavior for 外部资源链接 的确切行为取决于具体的关系,按相关 链接类型定义。
The crossorigin
属性是一个 CORS
设置属性。它旨在用于 外部资源链接。
The media
属性指定资源适用于哪些媒体。其值必须是一个 有效的媒体查询列表。
支持所有当前的浏览器。
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 属性且包含 stylesheet、 preload或 modulepreload
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 imagesrcset 和
href 属性(如果没有使用 宽度描述符 )共同构成 图像源 的 源集合。
如果 imagesrcset
attribute is present and has any
image candidate strings using a
宽度描述符, the imagesizes 属性也必须存在,并且是一个
sizes
属性。 imagesizes
属性贡献了 源大小 到 源集合。
The imagesrcset 和
imagesizes 属性只能在
link 元素上指定,这些元素具有 rel 属性,该属性指定 preload
keyword, as well as an as attribute in
the "image" state.
这些属性允许预加载适当的资源,稍后由具有相应值的
img 元素使用,其 srcset 和 sizes
属性如下:
< link rel = "preload" as = "image"
imagesrcset = "wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
imagesizes = "50vw" >
<!-- ... later, or perhaps inserted dynamically ... -->
< img src = "wolf.jpg" alt = "A rad wolf"
srcset = "wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
sizes = "50vw" >
注意我们省略了 href
属性,因为它仅在不支持 imagesrcset的浏览器中才相关,在那些情况下,它可能会导致错误的图像被预加载。
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
属性是一个 阻塞属性。它用于链接类型 stylesheet 和 expect,并且只能在具有包含这些关键字的 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
属性,例如使用 document.querySelector("link").removeAttribute("disabled"),将会获取并应用样式表:
< link disabled rel = "alternate stylesheet" href = "css/pooh" >
The fetchpriority 属性是一个 获取优先级属性 ,旨在与 外部资源链接一起使用,用于设置 请求优先级 ,该优先级在 获取和处理链接资源时使用。
对于 color 属性,没有反映的
IDL 属性,但这可能会在以后添加。
在所有当前引擎中支持。
The crossOrigin IDL 属性必须 反映 the
crossorigin
内容属性, 仅限于已知值。
HTMLLinkElement/referrerPolicy
所有当前引擎都支持。
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()
方法检查支持的 链接类型 。
media 属性如果链接是 超链接 ,那么 media
属性仅为建议性质,描述了文档设计的媒体类型。
然而,如果链接是 外部资源链接,那么
media 属性是规定性的。当
media 属性的值
匹配环境
且其他相关条件适用时,用户代理必须应用
外部资源,否则不得应用。
如果省略了 media 属性,则默认值为
"all",意味着默认情况下链接适用于所有媒体。
外部资源可能在该限制内定义了进一步的适用性限制。例如,CSS 样式表可能有一些 @media
块。本规范不会覆盖这些进一步的限制或要求。
type 属性如果 type
属性存在,则用户代理必须假设资源是给定类型的(即使那不是一个 有效的 MIME
类型字符串,例如空字符串)。如果属性被省略,但 外部资源链接 类型有一个默认类型定义,则用户代理必须假设资源是该类型。如果用户代理不支持给定的 MIME 类型 对于给定的链接关系,则用户代理应该 获取和处理链接资源;如果用户代理支持给定的 MIME 类型 对于给定的链接关系,则用户代理应该 获取和处理链接资源 ,按照为 外部资源链接特定类型指定的适当时间进行。如果属性被省略,而 外部资源链接
类型没有默认类型定义,但用户代理会 获取和处理链接资源
如果类型已知且被支持,则用户代理应该 获取和处理链接资源 ,假设它将被支持。
用户代理不得将 type 属性视为权威
— 在获取资源时,用户代理不得使用 type
属性来确定其实际类型。只有实际类型(如下一段定义)用于确定是否 应用 资源,而不是上述假设的类型。
如果 外部资源链接 类型定义了处理资源的 Content-Type 元数据的规则,则适用这些规则。否则,如果资源预期是图像,用户代理可以应用 图像嗅探规则, with the official type being the type determined from the resource's Content-Type 元数据确定的类型,并使用结果的 计算出的资源类型 ,就像它是实际类型一样。否则,如果这些条件都不适用或用户代理选择不应用图像嗅探规则,则用户代理必须使用资源的 Content-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,样式表 仍然会 被应用。
link
元素获取和处理资源所有的 外部资源链接 都有一个 获取和处理链接资源
算法,它接收一个
link
元素 el。它们还具有 链接资源获取设置步骤 ,它们接收一个 link
元素 el 和 请求 request。各个链接类型可能提供自己的 获取和处理链接资源
算法,但除非明确说明,否则它们使用 默认的获取和处理链接资源
算法。
同样,各个链接类型可能提供自己的 链接资源获取设置步骤,但除非明确说明,否则这些步骤仅返回
true。
The default fetch and process the linked resource,
given a link
元素
el, is as follows:
让 options be the result of creating link options from el.
让 request be the result of creating a link request given options.
如果 request 为 null,则返回。
设置 request的 同步标志。
运行 链接资源获取设置步骤,给定 el 和 request。如果结果为 false,则返回。
如果 el's initiator
type to "css" if el's rel
属性包含关键字 stylesheet;
"link"。
获取 request ,将 processResponseConsumeBody 设置为以下步骤,给定 响应 response 和 null、失败,或 字节序列 bodyBytes:
让 success 为 true。
如果以下任何一个为真:
则将 success 设置为 false。
注意,特定内容的错误,例如 CSS 解析错误或 PNG 解码错误,不会影响 success。
定义链接类型的 关键子资源 (例如 CSS)的规范,预计会描述如何获取和处理这些子资源。然而,由于目前这尚不明确,本规范描述了等待 链接资源的 关键子资源 被获取和处理,期望这样能正确完成。
Process the linked resource given el、 success、 response和 bodyBytes.
To create a link request given a 链接处理选项 options:
让 url be the result of encoding-parsing a URL given options的 编码解析 URL的结果,相对于 options的 基本 URL。
传递基本 URL 而不是文档或环境的问题由 issue #9715跟踪。
如果 url 失败,则返回 null。
让 request be the result of creating a potential-CORS request given url、 options的 创建潜在 CORS 请求的结果,以及 options's crossorigin。
返回 request。
用户代理可以选择仅在需要时尝试 获取和处理 这些资源,而不是主动获取所有未应用的 外部资源 。
类似于 获取和处理链接资源
算法,所有 外部资源链接
都有一个 处理链接资源 算法,该算法接受一个 link
元素 el,一个布尔值
success,一个 响应 response,以及一个
字节序列
bodyBytes。各个链接类型可以提供自己的
处理链接资源
算法,但除非明确声明,否则该算法不执行任何操作。
除非对给定的 rel
关键字另有说明,否则元素必须 延迟元素的加载事件 of the
element's node document until
all the attempts to 获取和处理链接资源
及其 关键子资源
完成。(用户代理尚未尝试获取和处理的资源,例如因为等待资源被需要,这些资源不会 延迟加载事件。)
Link`
头部所有可以作为 外部资源链接 的链接类型都定义了一个
处理链接头部 算法,该算法接收 链接处理选项。这个算法定义了这些链接在 HTTP `Link`
响应头部中出现时的反应方式。
对于大多数链接类型,这个算法不会执行任何操作。 总结表 是快速了解某个链接类型是否定义了 处理链接头部 步骤的良好参考。
link")DocumentDocumentAuto)
一个 链接处理选项 具有一个 基本 URL 和一个 href ,而不是解析后的 URL,因为 URL 可能是选项的 source set的结果。
要 根据元素创建链接选项 ,给定一个 link 元素
el:
令 document 为 el的 节点文档。
令 options 为一个新的 链接处理选项 ,其值为:
crossorigin
内容属性的状态referrerpolicy
内容属性的状态fetchpriority
内容属性的状态如果 el 有一个 integrity
属性,则将 options的 integrity 设置为 el的 integrity
内容属性的值。
断言: options的 href 不能为空字符串,或者 options的 source set 不能为 null。
A link element
with neither an href
属性,也没有
imagesrcset
does not represent a link.
返回 options。
要从头部中 提取链接 ,给定一个 头部列表 headers:
要 处理链接头部 ,给定一个 Document doc,一个 响应 response,以及一个
"pre-media" 或 "media" phase:
令 links be the result of extracting links from response的 头部列表.
对于每个 linkObject 在 links中:
令 rel 为 linkObject["relation_type"]。
令 attribs 为 linkObject["target_attributes"]。
令 expectedPhase 为 "media" 如果 "srcset",
"imagesrcset",
或 "media" 存在 于
attribs中;否则为 "pre-media"。
如果 expectedPhase 不是 phase,则 继续。
令 options 为一个新的 链接处理选项 ,其具有:
根据已解析的头属性应用链接选项 到 options , 传入 attribs 和 rel。如果返回值为 false,则直接返回。
如果 attribs["imagesrcset"]
存在 且 attribs["imagesizes"]
存在,则将 options的 源集 设置为结果 创建源集 的结果,给定
linkObject["target_uri"]、 attribs["imagesrcset"]、
attribs["imagesizes"],
和 null。
运行 处理链接头部 步骤,以 rel 和 options进行。
要 根据已解析的头属性应用链接选项 到一个 链接处理选项 options ,给定 attribs 和字符串 rel:
如果 rel 为"preload":
如果 destination 为null,则返回false。
设置 options的 destination 为 destination。
如果 attribs["crossorigin"]
存在
exists 且为 ASCII
不区分大小写 匹配任一 CORS
设置属性 关键字,
则将 options的 crossorigin 设置为
与该关键字对应的
CORS
设置属性 状态。
如果 attribs["integrity"]存在
exists,则将 options的 integrity 设置为 attribs["integrity"]。
如果 attribs["referrerpolicy"]
存在
exists 且为 ASCII
不区分大小写 匹配某个 referrer policy,则将 options的 referrer
policy 设置为该 referrer policy。
如果 attribs["nonce"]
存在
exists,则将 options的 nonce 设置为 attribs["nonce"]。
如果 attribs["type"]存在 exists,则将 options的 type 设置为 attribs["type"]。
如果 attribs["fetchpriority"]
存在
exists 且为 ASCII
不区分大小写 匹配某个 fetch priority
attribute 关键字,则将 options的 fetch priority 设置为该 fetch priority
attribute 关键字。
返回true。
早期提示 允许用户代理执行一些操作,例如在导航请求被服务器完全处理和响应码返回之前,推测性地加载文档可能会使用的资源。服务器可以通过在发送最终的 响应 之前,先发送一个状态码为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`
头部内容按顺序前置到 Document的 head 元素中。
让 earlyPolicyContainer 成为 创建策略容器从 fetch 响应 的结果,给定 response 和 reservedEnvironment。
这允许早期提示 响应 包含一个 内容安全策略 which would be enforced when fetching the early hint 请求.
让 earlyHints 成为空的 列表。
对于每个 linkObject 在 links中:
一旦我们收到早期提示链接头部,我们就开始 获取 earlyRequest。如果在
Document 创建之前返回,我们将
earlyResponse 设置为该 响应 of that fetch and
once the Document 被创建,我们就提交它(通过将其在 预加载资源映射 中可用,仿佛它是一个 link 元素)。如果
Document 首先被创建,一旦 响应 可用时立即提交。
让 rel 为 linkObject["relation_type"]。
让 options 成为一个新的 链接处理选项 ,包括
让 attribs 为 linkObject["target_attributes"]。
只有 as, crossorigin, integrity,和 type
属性作为早期提示处理的一部分。其他属性,特别是 blocking, imagesrcset, imagesizes和 media 只有在
Document 被创建后才适用。
根据已解析的头属性应用链接选项 到 options , 传入 attribs 和 rel。如果返回值为 false,则返回。
运行 处理链接头部 步骤给 rel 给定 options。
附加 options 到 earlyHints。
根据 Document
doc: 对于每个 options 在 earlyHints中:
如果 options的 on document ready 为 null,则将 options的 document 设置为 doc。
否则,使用 doc's on document ready with options.
link
元素创建的超链接进行访问的方式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:
rel
属性给出)title
属性给出)。href
属性给出)。hreflang
属性给出)。media
属性给出)。用户代理还可以包括其他信息,例如资源的类型(由 type
属性给出)。
meta
元素支持所有当前引擎。
支持所有当前引擎。
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
属性:
在期望 短语内容 的地方
。name —
元数据名称
http-equiv — 指令
content —
元素的值
charset — 字符编码声明
media —
适用的媒体
[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 元素 表示 各种无法通过 title,
base, link, style和 script 元素表示的元数据。
The meta 元素可以通过 name 属性表示文档级元数据,通过 http-equiv
属性表示指令,通过 字符编码声明 表示 HTML 文档在序列化为字符串形式(例如用于网络传输或磁盘存储)时的文件编码,并使用
charset
属性表示。
必须指定 name, http-equiv, charset和 itemprop
属性中的一个。
如果指定了 name, http-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
属性说明元数据适用的媒体。其值必须是 有效的媒体查询列表。除非
name 是 theme-color, media
属性对处理模型没有影响,作者不得使用。
Support in all current engines.
本规范定义了一些用于 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,因为标题可能包含与页面特定时间点相关的状态消息等信息,而不仅仅是应用程序的名称。
为了在给定语言列表(例如英国英语、美式英语和英语)中找到要使用的应用程序名称,用户代理必须执行以下步骤:
设 languages 为语言列表。
设 default language be the language of the
Document的 文档元素, if any, and if that language is not
unknown.
如果有 default language,并且该语言与 languages中的任何语言不同,则将其追加到 languages。
设 winning language 为 languages 中第一个有 meta element in
the Document where the
name attribute
value is an
ASCII case-insensitive match for
application-name
ASCII 不区分大小写匹配,并且其
语言 是相关语言。
如果没有语言具有这样的 meta
元素,则返回;没有给定的应用程序名称。
返回 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 >
...
许多搜索引擎不考虑此类关键字,因为这种功能历史上被不可靠甚至误导性地用于通过使用不适合用户的关键字来垃圾搜索引擎结果。
为了获取作者指定为页面适用的关键字列表,用户代理必须运行以下步骤:
当信息的可靠性不足时,用户代理不应使用此信息。
例如,内容管理系统在系统内页面中使用关键字信息来填充站点搜索引擎的索引是合理的,但大型内容聚合器使用此信息可能会发现某些用户会尝试通过使用不合适的关键字来操纵其排名机制。
referrer值必须是一个 referrer policy, which defines the default referrer
policy for the Document. [REFERRERPOLICY]
如果任何 meta
元素 element 被 插入到文档中,或其
name 或 content
属性发生变化,用户代理必须运行以下算法:
如果 element 未 在文档树中,则返回。
如果 element 没有 name
attribute whose value is an ASCII case-insensitive match for "referrer"
ASCII 不区分大小写匹配,则返回。
如果 element 没有 content
属性,或者该属性的值为空字符串,则返回。
设 value 为 element的 content
属性的值, 转换为
ASCII 小写。
如果 value 是以下表格第一列中的值之一,则将 value 设置为第二列中的值:
| 旧值 | 引用政策 |
|---|---|
never
|
no-referrer
|
default
|
the default referrer policy |
always
|
unsafe-url
|
origin-when-crossorigin
|
origin-when-cross-origin
|
由于历史原因,与其他标准元数据名称不同, referrer 的处理模型对元素移除不敏感,并且不使用
树顺序。只有最新插入或最近修改的 meta 元素在此状态下有效。
theme-color
值必须是与 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)" >
...
为了获取页面的主题颜色,用户代理必须运行以下步骤:
设 candidate elements 为满足以下条件的所有 meta 元素列表,按 树顺序排列:
该元素在 文档树中;
该元素具有一个 name attribute,
whose value
is an ASCII case-insensitive match for theme-colorASCII
不区分大小写匹配;
该元素具有 content
属性。
对于 candidate elements 中的每个 element:
返回无(页面没有主题颜色)。
如果任何 meta
元素被 插入到文档中 或 从文档中移除,或现有的
meta 元素的
name、 content或
media
属性发生变化,或者环境变化导致任何 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" >
为了获取 页面支持的颜色方案,用户代理必须运行以下步骤:
设 candidate elements 为满足以下条件的所有 meta 元素列表,按 树顺序排列:
该元素在 文档树中;
该元素具有一个 name attribute,
whose value
is an ASCII case-insensitive match for color-schemeASCII
不区分大小写匹配;
该元素具有 content
属性。
对于 candidate elements 中的每个 element:
content
属性的值。
返回 null。
如果任何 meta
元素被 插入到文档中 或 从文档中移除,或者现有的
meta 元素的
name 或 content
属性发生变化,用户代理必须重新运行上述算法。
由于这些规则会检查连续的元素直到找到匹配项,因此作者可以提供多个这样的值以处理旧版用户代理的回退。与 CSS 属性的回退方式相反,多个 meta 元素需要按旧版值在新值之后的顺序排列。
任何人都可以创建并使用他们自己的 扩展预定义的元数据名称集合。没有要求必须注册这些扩展。
但是,在以下任何情况下都不应创建新的元数据名称:
如果名称是 URL,或者其附带的 content 属性的值是 URL;在这些情况下,建议将其注册为 扩展预定义的链接类型集合 (而不是创建新的元数据名称)。
如果该名称用于期望在用户代理中具有处理要求的内容;在这种情况下,它应该被标准化。
此外,在创建和使用新的元数据名称之前,建议咨询 WHATWG Wiki MetaExtensions 页面 — 以避免选择已经在使用的元数据名称,避免重复已经在使用的元数据名称的目的,并避免新标准化名称与您选择的名称冲突。 [WHATWGWIKI]
任何人都可以随时编辑 WHATWG Wiki MetaExtensions 页面以添加元数据名称。新的元数据名称可以用以下信息来指定:
实际定义的名称。名称不应与任何其他定义的名称相似(例如,仅在大小写上不同)。
元数据名称含义的简短非规范性描述,包括值所需的格式。
具有完全相同处理要求的其他名称列表。作者不应使用定义为同义词的名称(它们仅用于允许用户代理支持旧内容)。任何人都可以删除实际上未使用的同义词;仅需要为了与旧内容兼容而处理为同义词的名称应以这种方式注册。
以下之一:
如果发现元数据名称与现有值重复,则应将其删除并列为现有值的同义词。
如果元数据名称在“已提议”状态下添加一个月或更长时间而未使用或未规范,则可以将其从 WHATWG Wiki MetaExtensions 页面中删除。
如果元数据名称在“已提议”状态下添加,并被发现与现有值重复,则应将其删除并列为现有值的同义词。如果元数据名称在“已提议”状态下添加并被发现有害,则应将其更改为“已停用”状态。
任何人都可以随时更改状态,但应仅按照上述定义进行更改。
当 http-equiv 属性在
meta 元素上指定时,该元素即为一个pragma指令。
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默认语言。
如果元素的 content
属性包含U+002C逗号字符(,),则返回。
令 input 为元素的 content 属性的值。
令 position 指向 input的第一个字符。
跳过ASCII空白 字符在 input 中给定 position。
收集一系列码点 ,这些码点不是 ASCII 空白字符 ,从 input 给定的 position。
令 candidate 为前一步骤结果的字符串。
如果 candidate 为空字符串,则返回。
将 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")
仅在一个引擎中支持。
更改首选CSS样式表集名称 ,名称为元素的 content 属性的值。
[CSSOM]
http-equiv="refresh")
此pragma充当定时重定向。
一个 Document 对象具有一个关联的
将声明性刷新 (一个布尔值)。最初为false。
令 input 为元素的 content 属性的值。
Run the shared declarative refresh steps with the
meta
元素的 节点文档、 input和 meta
element.
The shared declarative refresh steps, given a Document 对象
document、字符串 input和可选的 meta 元素
meta, are as follows:
如果 document的 将声明性刷新 为true,则返回。
令 position point at the first code point of input.
跳过ASCII空白 在 input 中给定 position。
令 time 为0。
收集一系列代码点 that are ASCII digits from input 中、从位置 position, and let timeString 。
如果 timeString 为空字符串,则:
If the code point in input 中 position is not U+002E (.), then return.
否则,将 time to the result of parsing timeString using the 解析非负整数的规则.
收集一系列码点 ,这些码点是 ASCII数字 和U+002E全停止字符(.)从 input 中给定 position。忽略任何收集到的字符。
令 urlRecord 为 document的 URL。
如果 position 不在 input的末尾,则:
If the code point in input 中 position is not U+003B (;), U+002C (,), or ASCII空白,则返回。
跳过ASCII空白 在 input 中给定 position。
If the code point in input 中 position is U+003B (;) or U+002C (,), then advance position 前进到下一个 码点。
跳过ASCII空白 在 input 中给定 position。
如果 position 不在 input的末尾,则:
令 urlString 为 input from the code point at position to the end of the string.
If the code point in input 中 position is U+0055 (U) or U+0075 (u), then advance position 前进到下一个 码点。否则,跳到标签为 skip quotes的步骤。
If the code point in input 中 position is U+0052 (R) or U+0072 (r), then advance position 前进到下一个 码点。否则,跳到标签为 parse的步骤。
If the code point in input 中 position is U+004C (L) or U+006C (l), then advance position 前进到下一个 码点。否则,跳到标签为 parse的步骤。
跳过ASCII空白 在 input 中给定 position。
If the code point in input 中 position is U+003D (=), then advance position 前进到下一个 码点。否则,跳到标签为 parse的步骤。
跳过ASCII空白 在 input 中给定 position。
跳过引号: If the code point in input 中 position is U+0027 (') or U+0022 ("), then let quote 为该 码点,并将 position 前进到下一个 码点。否则,令 quote 为空字符串。
将 urlString 设置为 input from the code point at position to the end of the string.
如果 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 码点 移除。
解析:将 urlRecord 设置为 编码解析URL 的结果给定 urlString,相对于 document。
如果 urlRecord 失败,则返回。
如果 urlRecord的 scheme(方案) 是
"javascript",则返回。
将 document的 将声明性刷新 设置为true。
执行以下一个或多个步骤:
在刷新到期后(定义如下),如果用户未取消重定向,并且如果给定 meta , document的 活动沙箱标志集 没有
沙箱自动功能浏览上下文标志 设置,则 导航
document的 节点可导航 至
urlRecord 使用
document, 历史处理
设置为"replace"。
为了上段的目的,刷新被认为是到期的,只要以下两个条件中的 较晚 一个发生:
此处使用 document 非常重要,而不是 meta的
节点文档,因为在初始步骤和刷新到期之间可能已更改,并且 meta 并不总是给定(在HTTPRefresh标头的情况下)。
什么都不做。
此外,用户代理可以像任何操作一样,通知用户其操作的任何和所有方面,包括定时器的状态、任何定时重定向的目的地等。
对于 meta 元素,其
http-equiv
属性处于 刷新状态,其
content 属性的值必须是以下之一:
URL"不区分大小写的匹配,后跟一个U+003D等号字符(=),后跟一个 有效的URL字符串
,该字符串不以文字U+0027撇号(')或U+0022引号(")字符开头。在前一种情况下,整数表示页面重新加载之前的秒数;在后一种情况下,整数表示页面替换为给定 URL页面之前的秒数。
新闻组织的首页可能会在页面的
head
元素中包含以下标记,以确保页面每五分钟自动从服务器重新加载一次:
< meta http-equiv = "Refresh" content = "300" >
一系列页面 可以用作自动幻灯片放映,每个页面使用类似以下的标记刷新到序列中的下一个页面:
< meta http-equiv = "Refresh" content = "20; URL=page4.html" >
http-equiv="set-cookie")
此pragma不符合规范且无效。
用户代理必须忽略此pragma。
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]
令 policy 为执行内容安全策略的 解析序列化内容安全策略 算法的结果,针对 meta 元素的
content
属性的值,来源为"meta",并且处置为"enforce"。
Remove all occurrences of the report-uri、
frame-ancestors和
sandbox
指令 from policy.
强制执行策略 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
元素处于任何特定状态。
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"?>
style
元素支持所有当前引擎。
支持所有当前引擎。
Support in all current engines.
noscript
element that is a child of a head element.media — 适用的媒体
blocking — 元素是否 可能阻碍渲染
title 属性在该元素上
具有特殊语义 :
CSS样式表集名称
[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
元素是样式处理模型的多个输入之一。该元素不 表示 用户内容。
支持所有当前引擎。
The disabled 设置器步骤如下:
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
属性是一个 阻碍属性。
仅在一个引擎中支持。
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 块 算法:
元素不在 开放元素栈 of an HTML parser or XML parser, and it 变为连接状态 或 变为断开状态。
The 更新 style 块 算法如下:
让 element 成为 style 元素。
如果 element 不是 连接状态,则返回。
如果 element的 type 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",将导致此算法提前返回。
如果 内容安全策略应阻止元素的内联行为吗?
algorithm returns "Blocked" when executed upon the
style
元素、"style"和 style 元素的
子文本内容, then return. [CSP]
创建一个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.
未设置。
已设置。
null
保持默认值。
保持未初始化状态。
如果 element 贡献了阻止脚本的样式表, append element to its 节点文档的 阻止脚本样式表集中。
如果 element的 media 属性的值
与环境匹配 ,且
element is
可能阻碍渲染,则 阻碍渲染 on
element.
一旦尝试获取样式表的 关键子资源(如果有)完成,或者,如果样式表没有 关键子资源,则一旦样式表已解析和处理,用户代理必须运行这些步骤:
获取 关键子资源 未明确定义;可能
问题#968 是对此的最佳解决方案。同时,任何 关键子资源 请求 should have its render-blocking set to whether or not the
style 元素是否 阻碍渲染.
该元素必须 延迟加载事件 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 >
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 贡献了阻止脚本的样式表 :
el 是由该 Document的解析器创建的。
el 要么是 style
element or a link
element that
was an external resource link that contributes to
the styling
processing model when the el was created by the parser.
el的 media 属性的值
与环境匹配。
el的样式表在元素创建时是启用的。
用户代理尚未放弃加载那个特定的样式表。用户代理可以在任何时候放弃加载样式表。
如果在样式表加载之前放弃样式表,则即使样式表最终加载,脚本也可能最终使用不正确的信息。例如,如果样式表将一个元素的颜色设置为绿色,但在样式表加载之前执行了检查结果样式的脚本,则脚本会发现元素是黑色(或其他默认颜色),可能因此做出错误的选择(例如,决定在页面其他地方使用黑色,而不是绿色)。实现者必须平衡脚本使用不正确信息的可能性与等待慢速网络请求完成时的不作为对性能的影响。
预计上述规则的对应规则也适用于
<?xml-stylesheet?>
处理指令。但是,这尚未彻底调查。
A Document 有一个 阻止脚本的样式表集,这是一个 有序集,最初为空。
如果以下步骤返回true,则 Document
document 有一个阻止脚本的样式表 :
如果一个 Document 没有阻止脚本的样式表 ,则它不
有一个阻止脚本的样式表。
Introduction_to_HTML/Document_and_website_structure#HTML_for_structuring_content
所有当前引擎支持。
body
元素所有当前引擎支持。
所有当前引擎支持。
html 元素中的第二个元素。body 元素内的第一个内容不是
start tag ,则可以省略 body element is not
ASCII whitespace or a comment, except if the
first thing inside the body
元素内的第一个内容是 meta、 noscript、
link、 script、 style或 template 元素。
body 元素后面不是紧跟一个 注释 ,则可以省略
body element is not
immediately followed by a comment.
onafterprint
onbeforeprint
onbeforeunload
onhashchange
onlanguagechange
onmessage
onmessageerror
onoffline
ononlineonpageswap
onpagehide
onpagereveal
onpageshow
onpopstate
onrejectionhandled
onstorage
onunhandledrejection
onunload[Exposed =Window ]
interface HTMLBodyElement : HTMLElement {
[HTMLConstructor ] constructor ();
// also has obsolete members
};
HTMLBodyElement includes WindowEventHandlers ;
在符合规范的文档中,只有一个 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 >
article 元素
在所有当前引擎中支持。
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 >
section element
所有当前浏览器均支持。
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 : 2 em ; }
section . chapter h2 { font : 2 em Roboto , Helvetica Neue , sans-serif ; }
section . appendix h2 { font : small-caps 2 em 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 >
nav
element在所有当前的引擎中都支持。
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 >
aside
element支持所有当前引擎。
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 >
h1, h2, h3, h4, h5, and h6
elements支持所有当前的浏览器引擎。
支持所有当前的浏览器引擎。
支持所有当前的浏览器引擎。
支持所有当前的浏览器引擎。
支持所有当前的浏览器引擎。
支持所有当前的浏览器引擎。
支持所有当前的浏览器引擎。
hgroup
元素的子元素。[Exposed =Window ]
interface HTMLHeadingElement : HTMLElement {
[HTMLConstructor ] constructor ();
// also has obsolete members
};
这些元素 代表 其部分的标题。
这些元素的语义和意义定义在 标题和大纲部分。
这些元素有一个 标题级别 ,由其名称中的数字给出。
标题
级别 对应于嵌套部分的级别。 h1
元素用于顶级部分, h2
用于子部分, h3
用于
子子部分,依此类推。
就各自的文档大纲(标题和部分结构)而言,这两个片段在语义上是等效的:
< body >
< h1 > Let's call it a draw(ing surface)</ h1 >
< h2 > Diving in</ h2 >
< h2 > Simple shapes</ h2 >
< h2 > Canvas coordinates</ h2 >
< h3 > Canvas coordinates diagram</ h3 >
< h2 > Paths</ h2 >
</ body >
< body >
< h1 > Let's call it a draw(ing surface)</ h1 >
< section >
< h2 > Diving in</ h2 >
</ section >
< section >
< h2 > Simple shapes</ h2 >
</ section >
< section >
< h2 > Canvas coordinates</ h2 >
< section >
< h3 > Canvas coordinates diagram</ h3 >
</ section >
</ section >
< section >
< h2 > Paths</ h2 >
</ section >
</ body >
作者可能会因为前一种风格的简洁性而偏好它,或者因为后一种风格的额外样式钩子而偏好它。哪种更好完全是作者个人风格的选择问题。
hgroup 元素所有当前引擎都支持。
p 元素,接着一个 h1、
h2、
h3、
h4、
h5或
h6
元素,之后跟零个或多个 p 元素,可能夹杂有 脚本支持元素。
HTMLElement.The hgroup 元素 表示 一个标题和相关内容。该元素可用于将一个或多个 h1–h6
元素与一个或多个包含子标题、替代标题或标语内容的
p 元素组合在一起。
以下是包含在 hgroup
元素中的一些有效标题示例。
< hgroup >
< h1 > The reality dysfunction</ h1 >
< p > Space is not the only void</ p >
</ hgroup >
< hgroup >
< h1 > Dr. Strangelove</ h1 >
< p > Or: How I Learned to Stop Worrying and Love the Bomb</ p >
</ hgroup >
header 元素所有当前引擎都支持。
header 或 footer 元素的后代。HTMLElement.The header 元素 表示 一组介绍性或导航辅助工具。
A header
元素通常旨在包含一个标题( h1–h6
元素或 hgroup
元素),但这不是强制要求的。 header
元素也可以用于包装一个部分的目录、一个搜索表单或任何相关的徽标。
以下是一些示例标题。第一个是为一个游戏设计的:
< header >
< p > Welcome to...</ p >
< h1 > Voidwars!</ h1 >
</ header >
下面的片段展示了如何使用该元素标记规范的头部:
< header >
< hgroup >
< h1 > Fullscreen API</ h1 >
< p > Living Standard — Last Updated 19 October 2015< p >
</ hgroup >
< dl >
< dt > Participate:</ dt >
< dd >< a href = "https://github.com/whatwg/fullscreen" > GitHub whatwg/fullscreen</ a ></ dd >
< dt > Commits:</ dt >
< dd >< a href = "https://github.com/whatwg/fullscreen/commits" > GitHub whatwg/fullscreen/commits</ a ></ dd >
</ dl >
</ header >
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" -->
...
footer element支持所有当前引擎。
header 或 footer 元素的后代。HTMLElement。The footer 元素 表示 它最近的祖先
分区内容 元素的页脚,或者如果没有这样的祖先,则为 主体元素 。页脚通常包含有关其部分的信息,如撰写者、相关文档的链接、版权数据等。
当 footer 元素包含整个部分时,它们
表示 附录、索引、长篇后记、详细的许可协议以及其他类似内容。
部分的作者或编辑的联系信息应放在
address 元素中,该元素可能位于一个
footer元素内部。署名和其他可能适合于
header 或 footer
的信息可以放在任意一个(或都不放)。这些元素的主要目的是帮助作者编写自解释的标记,易于维护和样式化;它们并不打算对作者强加特定的结构。
页脚不一定非得出现在部分的 末尾 ,尽管通常会这样。
当没有祖先 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 >
address element
所有当前浏览器都支持。
header、 footer或
address 元素的后代。
HTMLElement。The address 元素
表示 其最近的 article 或
body 元素祖先的联系信息。如果该祖先是 body 元素,则联系信息适用于整个文档。
例如,W3C 网站上的与 HTML 相关的页面可能包含以下联系信息:
< ADDRESS >
< A href = "../People/Raggett/" > Dave Raggett</ A > ,
< A href = "../People/Arnaud/" > Arnaud Le Hors</ A > ,
contact persons for the < A href = "Activity" > W3C HTML Activity</ A >
</ ADDRESS >
The address
元素不能用于表示任意地址(例如邮政地址),除非这些地址确实是相关的联系信息。(
p 元素是标记邮政地址的合适元素。)
The address
元素不得包含除联系信息以外的其他信息。
例如,以下是
address 元素的非规范用法:
< ADDRESS > Last Modified: 1999/12/24 23:37:50</ ADDRESS >
通常, address
元素会与其他信息一起包含在
footer 元素中。
节点 node 的联系信息是由以下列表中第一个适用条目定义的
address 元素的集合:
article 元素body 元素The contact information consists of all the address elements
that have node as an ancestor and do not have another body 或
article 元素祖先是
node的后代。
article 元素body 元素The contact information of node 的联系信息与最近的 article 或 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 >
h1–h6
元素具有 标题级别,其通过 获取元素的计算标题级别来确定。
这些元素 表示 标题。标题的 标题级别's heading level is, the fewer ancestor sections the heading has.
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 >
The headingoffset
内容属性允许作者为其后代标题级别进行偏移。
如果指定了 headingoffset
属性,则其值必须是 0 到 8(含)之间的 有效非负整数 。
The headingreset
内容属性是 布尔属性。它允许作者阻止标题偏移计算超出带有该属性的元素。
要 获取元素的计算标题级别,给定一个元素 element:
令 level 为 0。
如果 element的本地名称为 h1,
则将
level 设置为 1。
如果 element的本地名称为 h2,
则将
level 设置为 2。
如果 element的本地名称为 h3,
则将
level 设置为 3。
如果 element的本地名称为 h4,
则将
level 设置为 4。
如果 element的本地名称为 h5,
则将
level 设置为 5。
如果 element的本地名称为 h6,
则将
level 设置为 6。
断言: level 不为 0。
将 level 增加 获取元素的计算标题偏移量 给定 element的结果。
如果 level 大于 9,则返回 9。
返回 level。
要 获取元素的计算标题偏移量,给定一个元素 element, 执行以下步骤。返回一个非负整数。
令 offset 为 0。
令 inclusiveAncestor 为 element。
当 inclusiveAncestor 不为 null 时:
令 nextOffset 为 0。
如果 inclusiveAncestor 是一个 HTML 元素 并且
具有 headingoffset
属性,则使用 解析非负整数的规则解析其值。
如果解析结果不是错误,则将 nextOffset 设置为该值。
将 offset 增加 nextOffset。
如果 inclusiveAncestor 是一个 HTML 元素
且具有 headingreset
属性,则返回
offset。
如果 inclusiveAncestor的父级是一个 影子根, 则将 inclusiveAncestor 设置为该 影子根的 宿主 ,并 继续。
将 inclusiveAncestor 设置为 inclusiveAncestor的 父 元素。
返回 offset。
此示例展示了 headingoffset、
headingreset,
以及 aria-level
属性的组合,并通过注释演示各自的标题级别。此示例旨在说明多种组合方式,并非最佳实践示例。
< body >
< main >
< h1 > This is a heading level 1</ h1 >
< article headingoffset = "1" >
< h1 > This is a heading level 2</ h1 >
< section headingoffset = "1" >
< h1 > This is a heading level 3</ h1 >
< dialog headingreset >
< h1 > This is a heading level 1</ h1 >
</ dialog >
</ section >
</ article >
< h1 aria-level = "2" > This is a heading level 2</ h1 >
</ main >
</ body >
以下标记片段:
< body >
< hgroup id = "document-title" >
< h1 > HTML: Living Standard</ h1 >
< p > Last Updated 12 August 2016</ p >
</ hgroup >
< p > Some intro to the document.</ p >
< h2 > Table of contents</ h2 >
< ol id = toc > ...</ ol >
< h2 > First section</ h2 >
< p > Some intro to the first section.</ p >
</ body >
…结果产生了 3 个文档标题:
<h1>HTML: Living Standard</h1>
<h2>Table of contents</h2>.
<h2>First section</h2>.
渲染后的 大纲 可能如下所示:
首先,这里是一个文档,内容是一本章节非常短且包含子章节的书:
<!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 >
它的 大纲 可以如下所示:
一个文档可以包含多个顶级标题:
<!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 >
文档的 大纲 可以呈现如下:
<!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:
<!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:
<!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 >
文档的 大纲 可以呈现如下:
鼓励用户代理向用户暴露页面 大纲 ,以帮助导航。这对于非视觉媒体尤其重要,例如屏幕阅读器。
例如,用户代理可以将箭头键映射如下:
本节为非规范性内容。
| 元素 | 目的 |
|---|---|
| 示例 | |
body
|
文档的内容。 |
|
|
article
|
文档、页面、应用程序或站点中的一个完整或自包含的组成部分,原则上可以独立分发或重用,例如在联合发布中。这可以是论坛帖子、杂志或报纸文章、博客条目、用户提交的评论、互动小部件或工具,或任何其他独立的内容项。 |
|
|
section
|
文档或应用程序中的一个通用部分。在此上下文中,部分是内容的主题性分组,通常带有标题。 |
|
|
nav
|
一个链接到其他页面或页面内部部分的页面部分:一个包含导航链接的部分。 |
|
|
aside
|
一个页面部分,包含与围绕 aside
元素的内容间接相关的内容,且这些内容可以被认为是独立于该内容的。这些部分通常在印刷排版中表现为侧边栏。
|
|
|
h1–h6
|
一个标题 |
|
|
hgroup
|
一个标题及相关内容。该元素可用于将一个或多个 h1–h6
元素与一个或多个
p 元素组合在一起,这些元素包含表示子标题、替代标题或标语的内容。
|
|
|
header
|
一组引导性或导航性辅助工具。 |
|
|
footer
|
其最近祖先的 分区内容 元素的页脚,或者如果没有这样的祖先,则为 body元素 。页脚通常包含有关其部分的信息,例如作者、相关文档的链接、版权数据等。 |
|
本节为非规范性内容。
A section 是其他内容的一部分。
article
是一个独立的内容。但如何区分这两者呢?大多数情况下,真正的答案是“这取决于作者的意图”。
例如,可以想象一本书中有一章关于“格兰尼·史密斯”苹果,只提到“这些多汁的绿色苹果是制作苹果派的绝佳填料”;这将是一个 section
,因为还有很多其他章节(可能)讲述其他种类的苹果。
另一方面,可以想象一条推文或Reddit评论或Tumblr帖子或报纸分类广告只说了“格兰尼·史密斯。这些多汁的绿色苹果是制作苹果派的绝佳填料”;这将是 article,因为这就是全部内容。
对文章的评论不是其所在 article
的一部分,因此它是自己的 article。
p
元素在所有当前引擎中都支持。
在所有当前引擎中都支持。
hgroup
元素的子元素。p 元素的 结束标签 可以省略,如果该
p 元素后面紧跟着一个 address、 article、
aside、 blockquote、 details, dialog,
div、 dl、 fieldset、 figcaption、
figure、 footer、 form、 h1、
h2、
h3、
h4、
h5、
h6、
header、
hgroup、 hr、 main、 menu、 nav、
ol、 p、 pre、 search、 section、
table,或 ul 元素,或者如果父元素没有更多内容且父元素是一个 HTML
元素
(不是 a、 audio、 del、 ins、 map、
noscript,或 video 元素,或一个 自主自定义元素。
[Exposed =Window ]
interface HTMLParagraphElement : HTMLElement {
[HTMLConstructor ] constructor ();
// also has obsolete members
};
虽然段落通常在视觉媒体中通过与相邻块之间通过空行物理分隔的文本块表示,样式表或用户代理同样可以用不同的方式来呈现段落分隔,例如使用行内段落标记 (¶)。
以下示例是符合规范的 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 >
列表元素(特别是 ol
和 ul 元素)不能作为 p 元素的子元素。因此,当一个句子包含项目符号列表时,可能会想知道应该如何标记。
例如,这个精彩的句子有与以下内容相关的项目符号:
并在下面进一步讨论。
解决方案是认识到,在 HTML 术语中, 段落不是一个逻辑概念,而是一个结构概念。在上面的精彩例子中,实际上有 五个 段落 ,根据本规范定义:一个在列表之前,一个对应每个项目符号,以及一个在列表之后。
因此,上述示例的标记可以是:
< p > For instance, this fantastic sentence has bullets relating to</ p >
< ul >
< li > wizards,
< li > faster-than-light travel, and
< li > telepathy,
</ ul >
< p > and is further discussed below.</ p >
希望方便地为由多个“结构性”段落组成的这种“逻辑”段落设置样式的作者可以使用 div 元素,而不是 p
元素。
因此,上述示例可以变为如下:
< div > For instance, this fantastic sentence has bullets relating to
< ul >
< li > wizards,
< li > faster-than-light travel, and
< li > telepathy,
</ ul >
and is further discussed below.</ div >
这个示例仍然有五个结构段落,但现在作者可以只对
div 进行样式设置,而不必单独考虑示例的每个部分。
hr
element所有当前引擎均支持。
所有当前引擎均支持。
select 元素的后代。[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 >
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 >
pre
element所有当前引擎均支持。
所有当前引擎均支持。
[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 >
在以下片段中, samp 和 kbd 元素混合在一个 pre 元素的内容中,以展示 Zork I 的会话。
< pre >< samp > You are in an open field west of a big white house with a boarded
front door.
There is a small mailbox here.
></ samp > < kbd > open mailbox</ kbd >
< samp > Opening the mailbox reveals:
A leaflet.
></ samp ></ pre >
以下展示了一首现代诗,使用了 pre
元素来保留其独特的格式,这些格式是诗歌本身的固有部分。
< pre > maxling
it is with a heart
heavy
that i admit loss of a feline
so loved
a friend lost to the
unknown
(night)
~cdr 11dec07</ pre >
blockquote element支持所有当前的浏览器。
支持所有当前的浏览器。
cite —
链接到引用的来源或更多关于编辑的信息
cite。[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 >
下一个示例展示了 cite 与 blockquote一起使用的情况:
< p > His next piece was the aptly named < cite > Sonnet 130</ cite > :</ p >
< blockquote cite = "https://quotes.example.org/s/sonnet130.html" >
< p > My mistress' eyes are nothing like the sun,< br >
Coral is far more red, than her lips red,< br >
...
这个示例展示了一个论坛帖子如何使用 blockquote
来显示用户回复的帖子。每个帖子使用 article 元素来标记线程。
< article >
< h1 >< a href = "https://bacon.example.com/?blog=109431" > Bacon on a crowbar</ a ></ h1 >
< article >
< header >< strong > t3yw</ strong > 12 points 1 hour ago</ header >
< p > I bet a narwhal would love that.</ p >
< footer >< a href = "?pid=29578" > permalink</ a ></ footer >
< article >
< header >< strong > greg</ strong > 8 points 1 hour ago</ header >
< blockquote >< p > I bet a narwhal would love that.</ p ></ blockquote >
< p > Dude narwhals don't eat bacon.</ p >
< footer >< a href = "?pid=29579" > permalink</ a ></ footer >
< article >
< header >< strong > t3yw</ strong > 15 points 1 hour ago</ header >
< blockquote >
< blockquote >< p > I bet a narwhal would love that.</ p ></ blockquote >
< p > Dude narwhals don't eat bacon.</ p >
</ blockquote >
< p > Next thing you'll be saying they don't get capes and wizard
hats either!</ p >
< footer >< a href = "?pid=29580" > permalink</ a ></ footer >
< article >
< article >
< header >< strong > boing</ strong > -5 points 1 hour ago</ header >
< p > narwhals are worse than ceiling cat</ p >
< footer >< a href = "?pid=29581" > permalink</ a ></ footer >
</ article >
</ article >
</ article >
</ article >
< article >
< header >< strong > fred</ strong > 1 points 23 minutes ago</ header >
< blockquote >< p > I bet a narwhal would love that.</ p ></ blockquote >
< p > I bet they'd love to peel a banana too.</ p >
< footer >< a href = "?pid=29582" > permalink</ a ></ footer >
</ article >
</ article >
</ article >
这个示例展示了如何使用 blockquote 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...
如何表示对话的示例 会在后面的章节中展示;不适合使用 cite 和 blockquote
元素来实现这一目的。
ol
elementSupport in all current engines.
Support in all current engines.
li 元素: 可触及内容。li 元素和 支持脚本的
元素。reversed —
反向编号列表
start — 列表的 起始值 of the list
type — 列表标记的类型
reversed、 start、 type。
[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
元素按 树顺序排列。
Support in all current engines.
The reversed 属性是一个 布尔属性。如果存在,它表示列表是降序的(...,
3, 2, 1)。如果省略该属性,列表是升序的(1, 2, 3, ...)。
The start 属性如果存在,必须是一个 有效整数。它用于确定列表的 起始值 。
An ol 元素有一个 起始值,它是
按如下方式确定的整数:
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 >
ul
元素支持所有当前引擎。
支持所有当前引擎。
li 元素: 可感知内容。li 和 脚本支持
元素。[Exposed =Window ]
interface HTMLUListElement : HTMLElement {
[HTMLConstructor ] constructor ();
// also has obsolete members
};
The 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 >
menu 元素支持所有当前引擎。
支持所有当前引擎。
li 元素: 可感知内容。li 和 脚本支持
元素。[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 >
请注意,将其样式化为传统工具栏菜单的样式取决于应用程序。
li
元素支持所有当前引擎。
支持所有当前引擎。
ol 元素中。ul 元素中。menu 元素中。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.
ul 或 menu 元素的子元素: value — 列表项的 序数值 of the list item
value。
[Exposed =Window ]
interface HTMLLIElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions , Reflect ] attribute long value ;
// also has obsolete members
};
The li 元素 代表 列表项。如果它的父元素是
ol、 ul或 menu
元素,那么该元素就是父元素列表中的一项,如这些元素的定义所示。否则,该列表项与任何其他 li 元素没有定义的列表相关关系。
The value 属性(如果存在)必须是 有效整数. It is used to
determine the ordinal
value of the list item, when the li的 列表所有者 是
ol element.
To determine the ordinal value of each element owned by a given 列表所有者 owner, perform the following steps:
设 i 为 1。
如果 owner 是 ol
元素,则将 numbering 设置为
owner的 起始值。否则,将
numbering 设置为 1。
循环:如果 i is greater than the number of list items that owner owns的数量,则返回;所有 owner的 已拥有列表项 已分配 序数值。
如果 item is an li
element that has a value
attribute:
将 parsed 设置为 解析该属性的值为整数的结果。
如果 parsed 没有错误,则将 numbering 设置为 parsed。
The ordinal value of item is numbering。
如果 owner 是 ol
元素,且 owner 具有 reversed 属性,则将
numbering 减 1;否则,将 numbering 加 1。
将 i 加 1。
转到标记为 循环的步骤。
元素的 value IDL 属性并不直接对应于其 序数值;它仅仅 反射
the content attribute. For example, given this list:
< ol >
< li > Item 1
< li value = "3" > Item 3
< li > Item 4
</ ol >
以下示例中列出了前十名电影(按逆序)。请注意,通过使用 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.
dl
元素支持所有当前引擎。
支持所有当前引擎。
dt
元素组成,后跟一个或多个
dd 元素,可选地夹杂 脚本支持元素。
div 元素,可选地夹杂 脚本支持元素。[Exposed =Window ]
interface HTMLDListElement : HTMLElement {
[HTMLConstructor ] constructor ();
// also has obsolete members
};
The dl 元素 代表 一个关联列表,由零个或多个名称-值组(描述列表)组成。名称-值组由一个或多个名称(dt 元素,可能是 div 元素的子元素)后跟一个或多个值(dd 元素,可能是 div
元素的子元素),忽略除 dt 和 dd element children, and
dt 和 dd 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
元素列表,最初为空)。
设 groups 为一个空的名称-值组列表。
设 current 为一个新的名称-值组。
设 seenDd 为 false。
设 child 为 dl的 第一个子节点。
设 grandchild 为 null。
当 child 不为 null 时:
如果 child 是 div 元素,则:
设 grandchild 为 child的 第一个子节点。
当 grandchild 不为 null 时:
处理 dt 或
dd 以处理
grandchild。
将 grandchild 设置为 grandchild的 下一个兄弟节点。
否则, 处理 dt
或 dd 以处理
child。
将 child 设置为 child的 下一个兄弟节点。
如果 current 不为空,则将 current 追加到 groups。
返回 groups。
当名称-值组的名称或值为空列表时,通常是因为错误地在 dd 元素的位置使用了 dt
元素,反之亦然。一致性检查器可以发现此类错误,并可能建议作者如何正确使用标记。
在以下示例中,一个条目(“作者”)链接到两个值(“约翰”和“卢克”)。
< dl >
< dt > Authors
< dd > John
< dd > Luke
< dt > Editor
< dd > Frank
</ dl >
在以下示例中,一个定义链接到两个术语。
< dl >
< dt lang = "en-US" > < dfn > color</ dfn > </ dt >
< dt lang = "en-GB" > < dfn > colour</ dfn > </ dt >
< dd > A sensation which (in humans) derives from the ability of
the fine structure of the eye to distinguish three differently
filtered analyses of a view. </ dd >
</ dl >
以下示例展示了使用 dl
元素标记各种元数据。在示例的末尾,一个组有两个元数据标签(“作者”和“编辑”)和两个值(“Robert Rothman”和“Daniel Jackson”)。此示例还使用
div 元素将
dt 和 dd 元素组围起来,以帮助样式化。
< dl >
< div >
< dt > Last modified time </ dt >
< dd > 2004-12-23T23:33Z </ dd >
</ div >
< div >
< dt > Recommended update interval </ dt >
< dd > 60s </ dd >
</ div >
< div >
< dt > Authors </ dt >
< dt > Editors </ dt >
< dd > Robert Rothman </ dd >
< dd > Daniel Jackson </ dd >
</ div >
</ dl >
以下示例显示了使用 dl
元素来提供一组指令。这里指令的顺序很重要(在其他示例中,区块的顺序并不重要)。
< p > Determine the victory points as follows (use the
first matching case):</ p >
< dl >
< dt > If you have exactly five gold coins </ dt >
< dd > You get five victory points </ dd >
< dt > If you have one or more gold coins, and you have one or more silver coins </ dt >
< dd > You get two victory points </ dd >
< dt > If you have one or more silver coins </ dt >
< dd > You get one victory point </ dd >
< dt > Otherwise </ dt >
< dd > You get no victory points </ dd >
</ dl >
以下代码片段显示了使用 dl
元素作为词汇表。请注意使用 dfn 来表示正在定义的词。
< dl >
< dt >< dfn > Apartment</ dfn > , n.</ dt >
< dd > An execution context grouping one or more threads with one or
more COM objects.</ dd >
< dt >< dfn > Flat</ dfn > , n.</ dt >
< dd > A deflated tire.</ dd >
< dt >< dfn > Home</ dfn > , n.</ dt >
< dd > The user's login directory.</ dd >
</ dl >
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
元素不适合用于标记对话。请参阅一些 如何标记对话的示例。
dt
元素支持所有当前引擎。
dd 或 dt elements inside dl elements.dd 或 dt elements inside div elements that are children of a
dl element.
header、 footer、 分区内容或 标题内容 的后代。dt element's end tag can be omitted if the
dt element is immediately followed
by another dt 元素或
dd element.
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 >
dd
元素支持所有当前引擎。
dt 或 dd elements inside dl elements.dt 或 dd elements inside div elements that are children of a
dl element.
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.
HTMLElement。The dd 元素 表示 描述列表(dl 元素)中术语-描述组的描述、定义或值部分。
A dl
可以用于定义词汇表,就像在字典中一样。在以下示例中,每个条目由带有 dt 的 dfn给出,并有多个
dd,展示定义的各个部分。
< dl >
< dt >< dfn > happiness</ dfn ></ dt >
< dd class = "pronunciation" > /ˈhæpinəs/</ dd >
< dd class = "part-of-speech" >< i >< abbr > n.</ abbr ></ i ></ dd >
< dd > The state of being happy.</ dd >
< dd > Good fortune; success. < q > Oh < b > happiness</ b > ! It worked!</ q ></ dd >
< dt >< dfn > rejoice</ dfn ></ dt >
< dd class = "pronunciation" > /rɪˈdʒɔɪs/</ dd >
< dd >< i class = "part-of-speech" >< abbr > v.intr.</ abbr ></ i > To be delighted oneself.</ dd >
< dd >< i class = "part-of-speech" >< abbr > v.tr.</ abbr ></ i > To cause one to be delighted.</ dd >
</ dl >
figure 元素支持所有当前引擎。
figcaption 元素后跟 流内容。figcaption
元素。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
元素的内容是周围流的一部分。如果页面的目的是显示图形,例如图片共享网站上的照片,则可以使用
figure 和 figcaption
元素明确提供该图形的标题。对于仅与周围流略有相关或具有不同目的的内容,应使用 aside 元素(它本身可以包含 figure)。例如,重复来自
article 内容的拉引引用会更适合放在
aside
中,而不是
figure中,因为它不是内容的一部分,而是为了吸引读者或突出关键主题而重复内容。
此示例展示了使用 figure
元素来标记代码列表。
< p > In < a href = "#l4" > listing 4</ a > we see the primary core interface
API declaration.</ p >
< figure id = "l4" >
< figcaption > Listing 4. The primary core interface API declaration.</ figcaption >
< pre >< code > interface PrimaryCore {
boolean verifyDataLine();
undefined sendData(sequence< 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 >
figcaption 元素
支持所有当前引擎。
figure
元素的第一个或最后一个子元素。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 >
main
元素支持所有当前引擎。
main 元素。HTMLElement。A document must not have more than one main element that does not have
the attribute specified.
A 层次结构正确的 main 元素 是指其祖先元素仅限于 html、 body、 div, 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.5 em ; border : thin solid ; padding : 0.5 em ;
background : #EFF ; color : black ; box-shadow : 0 0 0.25 em #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
元素,并使用脚本使导航在不进行服务器往返的情况下工作,并为非当前元素设置 属性:
<!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 >
search 元素当前引擎不支持。
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 >
div
元素支持所有当前引擎。
支持所有当前引擎。
dl 元素的子元素。option 元素、 optgroup 元素,或
select 元素的后代。
dl 元素的子元素:一个或多个 dt 元素,后跟一个或多个
dd 元素,可选择性地混有 脚本支持
元素。
option 元素、
optgroup 元素,或 select 元素的后代: 透明。
[Exposed =Window ]
interface HTMLDivElement : HTMLElement {
[HTMLConstructor ] constructor ();
// also has obsolete members
};
The div 元素本身没有任何特殊含义。它 表示 其子元素。它可以与 class、 lang和 title 属性一起使用,以标记一组连续元素的语义。它还可以在 dl
元素中使用,包裹 dt 和
dd 元素的组。
强烈建议作者将 div
元素视为最后的手段,当没有其他合适的元素时才使用。使用更合适的元素而不是 div 元素,可以提高读者的可访问性,并且更易于作者维护。
例如,一篇博客文章可以使用 article来标记,一个章节可以使用
section来标记,一个页面的导航可以使用
nav来标记,一组表单控件可以使用 fieldset来标记。
另一方面, div
元素可以用于样式目的,或者用于包裹章节中的多个段落,这些段落都需要以类似的方式进行注释。在下面的例子中,我们看到 div
元素被用来一次设置两个段落的语言,而不是分别设置两个段落元素的语言:
< article lang = "en-US" >
< h1 > My use of language and my cats</ h1 >
< p > My cat's behavior hasn't changed much since her absence, except
that she plays her new physique to the neighbors regularly, in an
attempt to get pets.</ p >
< div lang = "en-GB" >
< p > My other cat, coloured black and white, is a sweetie. He followed
us to the pool today, walking down the pavement with us. Yesterday
he apparently visited our neighbours. I wonder if he recognises that
their flat is a mirror image of ours.</ p >
< p > Hm, I just noticed that in the last paragraph I used British
English. But I'm supposed to write in American English. So I
shouldn't say "pavement" or "flat" or "colour"...</ p >
</ div >
< p > I should say "sidewalk" and "apartment" and "color"!</ p >
</ article >
a
元素所有当前引擎支持。
所有当前引擎支持。
Support in all current engines.
Support in all current engines.
Support in all current engines.
href 属性: 交互内容。a 元素后代,或具有 tabindex 属性的后代。
href —
超链接
target — 可导航对象 用于 超链接 导航
download —
是否下载资源而不是导航到它,以及如果是则下载的文件名
ping — 要 ping 的 URL to ping
rel —
包含 超链接 的文档位置与目标资源之间的关系
hreflang —
链接资源的语言
type —
被引用资源的类型提示
referrerpolicy
— 元素发起的 引用策略 对 fetches initiated by the element
href 属性: 作者; 实现者。
href、 hreflang和 type,以及 导航 URL 属性
href。
[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 target、 download、 ping、
rel、 hreflang、 type和 referrerpolicy
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 href、 target、 download、 ping和 referrerpolicy
属性会影响当用户 跟随超链接
或 下载 使用 a
元素创建的超链接时会发生什么。 rel、 hreflang和 type
属性可用于在用户跟随链接之前向用户指示目标资源的可能性质。
a.textSame as textContent.
HTMLAnchorElement/referrerPolicy
支持所有当前的引擎。
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&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&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 >
em
元素支持所有当前引擎。
HTMLElement。特定内容的强调程度由其祖先
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 >
strong 元素Support in all current engines.
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 >
small
元素Support in all current engines.
HTMLElement.小字打印通常包括免责声明、警告、法律限制或版权声明。小字打印有时也用于归属,或满足许可要求。
The small
元素并不会“降低”或减少通过 em 元素强调的文本或通过 strong
元素标记为重要的文本的重要性。要标记文本为不强调或不重要,只需不要使用
em 或 strong 元素即可。
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 >
s
元素所有当前引擎均支持。
HTMLElement。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 >
cite
元素所有当前引擎均支持。
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 >
q
element在所有当前的引擎中均有支持。
cite —
链接到引用的来源或有关编辑的更多信息
HTMLQuoteElement.引用标点(如引号)不应立即出现在 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 >
dfn
元素所有当前引擎均支持。
dfn 元素的后代。title 属性 在此元素上具有特殊语义 :
术语的完整形式或缩写的扩展。
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.
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 >
< 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 >
abbr
元素在所有当前引擎中均受支持。
title 属性在此元素上具有 特殊语义 :缩写的完整术语或扩展
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 >
不必使用此元素来标记缩写。它在以下情况下被认为是有用的:
abbr 元素和 title 属性是一种替代方案,可以避免在文中直接包含扩展(例如括号中的内容)。
abbr 元素和 title 属性,或者在第一次使用缩写时在文本中直接包含扩展。abbr 元素而不带 title 属性。
在 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
元素都是独立的。
ruby
element在所有当前引擎中均受支持。
HTMLElement。The ruby 元素允许一个或多个短语内容的片段被标记为
ruby 注释。Ruby 注释是与基础文本并排显示的短文本片段,主要用于东亚排版,作为发音指南或包含其他注释。在
日语中,这种排版形式也被称为 furigana。
The content model of ruby
元素的内容模型由以下一种或多种
序列组成:
以下之一:
以下之一:
The ruby 和 rt
元素可以用于多种类型的注释,尤其包括(但不限于)下述描述的那些。有关特别是日语 Ruby 的更多细节,以及如何为日语渲染 Ruby,请参见
日语文本布局要求。 [JLREQ]
在撰写时,CSS 还未提供完全控制 HTML ruby
元素渲染的方式。希望 CSS 能在适当的时候扩展以支持下述样式。
一个或多个平假名或片假名字符(注音标注)与每个表意字符(基本文本)一起放置。这用于提供汉字字符的读音。
< ruby > B< rt > annotation</ 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 >
編集者
对应于多个基本字符的语音读音,因为一对一的映射将非常困难。(在英语中,“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 > の方角
東南 の方角
在没有 ruby 元素祖先的 ruby
元素中,内容被分段并分为三类:基本文本段、注释段和被忽略的段。被忽略的段不构成文档的语义(它们包含一些 元素间空白 和 rp
元素,后者用于不支持ruby的遗留用户代理)。基本文本段可以重叠(每个位置最多两个段重叠,且任何段具有早于重叠段的开始点也必须具有相同或更晚的结束点,任何段具有晚于重叠段的结束点也必须具有相同或更早的开始点)。注释段对应于
rt
元素。每个注释段可以与一个基本文本段相关联,每个基本文本段也可以有注释段关联。(在符合规范的文档中,每个基本文本段都与至少一个注释段相关联,每个注释段都与一个基本文本段相关联。) ruby 元素 表示 它包含的基本文本段的并集,以及这些基本文本段与注释段的映射。段的描述基于DOM范围;注释段范围始终由一个元素组成。 [DOM]
在任何特定时间, ruby
元素内容的分段和分类结果是运行以下算法得到的结果:
让 base text segments 成为一个空的基本文本段列表,每个段可能有一个基本文本子段列表。
让 annotation segments 成为一个空的注释段列表,每个段可能与一个基本文本段或子段相关联。
让 root 成为正在运行算法的 ruby 元素。
如果 root 有一个 ruby 元素祖先,则跳到标记为
结束的步骤。
让 current parent 为 root。
让 index 为0。
让 start index 为null。
让 saved start index 为null。
让 current base text 为null。
开始模式:如果 index 大于或等于 current parent中的子节点数量,则跳到标记为 结束模式的步骤。
将 start index 设置为 index的值。
基本模式:如果 current parent中的第 index 个节点是 ruby 元素,并且
current
parent 是与 root相同的元素,则 推送一个ruby层级 ,然后跳到标记为 开始模式的步骤。
如果 current parent中的第 index 个节点是
rt 或 rp 元素,则 设置当前基本文本 ,然后跳到标记为
注释模式的步骤。
将 index 增加1。
基本模式后递增:如果 index 大于或等于 current parent中的子节点数量,则跳到标记为 结束模式的步骤。
跳回到标记为 基本模式的步骤。
注释模式:如果 current parent中的第 index 个节点是 rt
元素,则 推送一个ruby注释 ,然后跳到标记为
注释模式递增的步骤。
如果 current parent中的第 index 个节点是
rp 元素,则跳到标记为
注释模式递增的步骤。
如果 current parent中的第 index 个节点不是
Text
node, or is a Text
node that is not inter-element
whitespace, then jump to the step labeled 基本模式的步骤。
注释模式递增:让 lookahead index 为 index 加1。
注释模式空白跳过:如果 lookahead index 等于 current parent 中的子节点数量,则跳到标记为 结束模式的步骤。
如果 lookahead index中的第 lookahead index 个节点是 rt 元素或 rp 元素,则将
index 设置为
lookahead
index ,并跳到标记为 注释模式的步骤。
如果 lookahead index中的第 lookahead index 个节点不是 Text
node, or is a Text
node that is not inter-element
whitespace, then jump to the step labeled 基本模式 的步骤(不再增加
index,所以到目前为止看到的 元素间空白 成为下一个基本文本段的一部分)。
将 lookahead index 增加1。
跳到标 记为 注释模式空白跳过的步骤。
结束模式:如果 current parent 不是与 root相同的元素,则 弹出一个ruby层级 ,并跳到标记为 基本模式后递增的步骤。
结束:返回 base text segments 和 annotation segments。 ruby
元素的任何内容如果没有被这两个列表中的段描述,则隐含在 被忽略的段中。
当上述步骤提到 设置当前基本文本时,意味着在算法中的那个点上执行以下步骤:
令 text range 为一个 DOM 范围,其 起始 is the boundary point (current parent, start index),且其 结束 is the boundary point (current parent, index).
令 new text segment 为由范围 text range描述的基础文本段。
将 new text segment 添加至 base text segments.
令 current base text 等于 new text segment.
令 start index be null.
当上述步骤提到 推送一个ruby层级时,意味着在算法中的那个点上执行以下步骤:
让 current parent 为 current parent中的第 index个节点。
让 index 为0。
将 saved start index 设置为 start index的值。
让 start index 为null。
当上述步骤提到 弹出一个ruby层级时,意味着在算法中的那个点上执行以下步骤:
让 index 为 current parent 在 root中的位置。
让 current parent 为 root。
将 index 增加1。
将 start index 设置为 saved start index的值。
让 saved start index 为null。
当上述步骤提到 推送一个ruby注释时,意味着在算法中的那个点上执行以下步骤:
让 rt 是 rt
元素,它是
current
parent的第 index个节点。
让 annotation range 是一个DOM范围,其 开始 是 边界点 (current parent, index),其 结束 是 边界点 (current parent, index 加一)(即,仅包含 rt)。
让 new annotation segment 是一个由范围 annotation range描述的注释段。
如果 current base text 不为null,将 new annotation segment 与 current base text关联。
将 new annotation segment 添加到 annotation segments中。
在这个例子中,日文文本 漢字 中的每个汉字都用平假名注释其读音。
...
< ruby > 漢< rt > かん</ rt > 字< rt > じ</ rt ></ ruby >
...
这可能会被渲染为:

In this example, each ideograph in the traditional Chinese text 漢字 is annotated with its bopomofo reading.
< ruby > 漢< rt > ㄏㄢˋ</ rt > 字< rt > ㄗˋ</ rt ></ ruby >
这可能会渲染成:

在这个例子中,每个简体中文文本 汉字 中的汉字都附有它的拼音注音。
...< ruby > 汉< rt > hàn</ rt > 字< rt > zì</ rt ></ ruby > ...
这可能会渲染成:
在这个更复杂的示例中,缩写“HTML”有四个注解:一个用于整个缩写,简要描述它是什么,一个用于字母“HT”,将其扩展为“Hypertext”,一个用于字母“M”,将其扩展为“Markup”,以及一个用于字母“L”,将其扩展为“Language”。
< ruby >
< ruby > HT< rt > Hypertext</ rt > M< rt > Markup</ rt > L< rt > Language</ rt ></ ruby >
< rt > An abstract language for describing documents and applications
</ ruby >
rt
element在所有当前引擎中都支持。
ruby 元素的子元素。
rt 元素的 结束标签 可以省略,如果该
rt 元素后面紧跟着一个 rt 或 rp 元素,或者如果父元素中没有更多内容。
HTMLElement。The rt 元素标记了
ruby 注释的 ruby 文本组件。当它是 ruby
元素的子元素时,它本身并不 代表
任何东西,但 ruby
元素使用它作为确定 它
代表什么的一部分。
An rt element that is not a child
of a ruby element
代表 与它的子元素相同的东西。
rp
elementSupport in all current engines.
ruby 元素的子元素,紧接在 rt 元素之前或之后。rp 元素的 结束标签 可以省略,如果该
rp 元素后面紧跟着一个 rt 元素或另一个 rp 元素,或者父元素中没有更多内容。
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.
data
element支持所有当前的浏览器。
支持所有当前的浏览器。
Support in all current engines.
value — 机器可读的值
value。[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 >
time
元素所有当前引擎的支持。
所有当前引擎的支持。
Support in all current engines.
datetime 属性: 短语内容.datetime — 机器可读值
datetime。
[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 元素必须符合以下之一的语法。
< 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 >
< time > 2011</ time >
< time > 0001</ time >
< time > PT4H18M3S</ time >
< time > 4h 18m 3s</ time >
元素内容的 机器可读等效 必须通过以下算法从元素的 datetime 值 获取:
If parsing a month string from the element's datetime 值 returns a 月份,那就是机器可读的等效;返回。
If parsing a date string from the element's datetime 值 returns a 日期,那就是机器可读的等效;返回。
If parsing a yearless date string from the element's datetime 值 returns a 无年份日期,那就是机器可读的等效;返回。
If parsing a time string from the element's datetime 值 returns a 时间,那就是机器可读的等效;返回。
If parsing a local date and time string from the element's datetime 值 returns a 本地日期和时间,那就是机器可读的等效;返回。
If parsing a time-zone offset string from the element's datetime 值 returns a 时区偏移,那就是机器可读的等效;返回。
If parsing a global date and time string from the element's datetime 值 returns a 全球日期和时间,那就是机器可读的等效;返回。
If parsing a week string from the element's datetime 值 returns a 周,那就是机器可读的等效;返回。
如果元素的 datetime 值 仅由 ASCII 数字组成,其中至少一个不是 U+0030 DIGIT ZERO (0),那么机器可读的等效是这些数字的十进制解释,代表一个年份;返回。
If parsing a duration string from the element's datetime 值 returns a 持续时间,那就是机器可读的等效;返回。
没有机器可读的等效。
上述提到的算法旨在设计成对于任何任意字符串 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 > .
code
元素所有当前引擎都支持。
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 >
以下示例展示了如何使用 pre
和 code 元素标记一段代码。
< pre >< code class = "language-pascal" > var i: Integer;
begin
i := 1;
end.</ code ></ pre >
在该示例中使用了一个类来指示所用的语言。
有关更多详细信息,请参见 pre
元素。
var
元素所有当前引擎都支持。
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 >
samp
元素所有当前引擎都支持。
HTMLElement.The samp 元素 表示 从另一个程序或计算系统中获取的示例或引用输出。
该元素可以与 output
元素进行对比,后者可用于提供 Web 应用程序中的即时输出。
此示例显示了 samp
元素的内联用法:
< p > The computer said < samp > Too much cheese in tray
two</ samp > but I didn't know what that meant.</ p >
第二个示例展示了来自控制台程序的示例输出块。嵌套的
samp 和 kbd 元素允许使用样式表对示例输出的特定元素进行样式设置。还有一些
samp
元素使用更详细的标记进行注释,以实现非常精确的样式设置。为此,使用了
span 元素。
< pre >< samp >< span class = "prompt" > jdoe@mowmow:~$</ span > < kbd > ssh demo.example.com</ kbd >
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown
< span class = "prompt" > jdoe@demo:~$</ span > < span class = "cursor" > _</ span ></ samp ></ pre >
第三个示例展示了一个输入块及其相应的输出。该示例使用了 code 和 samp 元素。
< pre >
< code class = "language-javascript" > console.log(2.3 + 2.4)</ code >
< samp > 4.699999999999999</ samp >
</ pre >
kbd
元素支持所有当前引擎。
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 >
sub and sup elements
所有当前浏览器均支持。
所有当前浏览器均支持。
sub
元素: 给作者; 给实施者。sup
元素: 给作者; 给实施者。HTMLElement。The sup
元素 表示 上标,而 sub
元素 表示 下标。
这些元素只能用于标记具有特定含义的排版约定,而不是为了排版效果而使用。例如,将 sub 和
sup
元素用于 LaTeX 文档准备系统的名称是不适当的。一般来说,作者应仅在
缺少 这些元素会改变内容的含义时使用这些元素。
在某些语言中,上标是某些缩写的排版约定的一部分。
< p > Their names are
< span lang = "fr" >< abbr > M< sup > lle</ sup ></ abbr > Gwendoline</ span > and
< span lang = "fr" >< abbr > M< sup > me</ sup ></ abbr > Denise</ span > .</ p >
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 来标记数学内容,但如果不需要详细的数学标记,作者可以选择使用 sub 和
sup
。 [MATHML]
< var > E</ var > =< var > m</ var >< var > c</ var >< sup > 2</ sup >
f(< var > x</ var > , < var > n</ var > ) = log< sub > 4</ sub >< var > x</ var >< sup >< var > n</ var ></ sup >
i
element所有当前引擎均支持。
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 元素中的内容不一定会被斜体显示。
b
element所有当前浏览器均支持。
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.
样式表可以用于格式化 b
元素,就像可以重新样式化任何其他元素一样。因此, b
元素中的内容不一定会被加粗。
u
element在所有当前引擎中都支持。
HTMLElement。The u 元素 表示 一段文本,该文本具有未明确表达但显式呈现的非文本注释,例如在中文文本中标记该文本为专有名称(中文专有名称标记),或标记该文本为拼写错误。
在大多数情况下,另一个元素可能更合适:用于标记强调的,应该使用 em
元素;用于标记关键词或短语,根据上下文应使用
b 元素或 mark 元素;用于标记书名,应该使用 cite
元素;用于带有明确文本注释的标记,应该使用
ruby
元素;用于技术术语、分类名称、音译、思想,或在西方文本中标记船名,应该使用 i
元素。
在视觉呈现中, u
元素的默认渲染与超链接(下划线)的传统渲染相冲突。建议作者避免在可能与超链接混淆的情况下使用 u 元素。
在这个示例中,使用了 u 元素来标记一个拼写错误的词:
< p > The < u > see</ u > is full of fish.</ p >
mark
element在所有当前引擎中都支持。
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 >
bdi
element支持所有当前的浏览器。
dir 全局属性在此元素上具有特殊语义。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”和句号。bdo
元素在所有当前引擎中都支持。
dir 全局属性在该元素上具有特殊语义。HTMLElement。The bdo 元素 表示 对其子元素的显式文本方向格式控制。它允许作者通过显式指定方向覆盖来覆盖 Unicode 双向算法。 [BIDI]
作者必须在该元素上指定 dir 属性,值为 ltr 以指定从左到右的覆盖,值为 rtl 以指定从右到左的覆盖。 auto 值不得指定。
该元素 具有涉及双向算法的渲染要求。
span
element在所有当前浏览器中均支持。
在所有当前浏览器中均支持。
[Exposed =Window ]
interface HTMLSpanElement : HTMLElement {
[HTMLConstructor ] constructor ();
};
The span 元素本身没有特定含义,但与 全局属性(例如
class、
lang或 dir)一起使用时非常有用。它
表示 其子元素。
在这个示例中,代码片段使用了 span 元素和
class 属性进行标记,以便通过 CSS
对其关键字和标识符进行颜色编码:
< pre >< code class = "lang-c" >< span class = "keyword" > for</ span > (< span class = "ident" > j</ span > = 0; < span class = "ident" > j</ span > < 256; < span class = "ident" > j</ span > ++) {
< span class = "ident" > i_t3</ span > = (< span class = "ident" > i_t3</ span > & 0x1ffff) | (< span class = "ident" > j</ span > << 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 >
br
element所有当前引擎的支持。
所有当前引擎的支持。
[Exposed =Window ]
interface HTMLBRElement : HTMLElement {
[HTMLConstructor ] constructor ();
// also has obsolete members
};
虽然换行符在视觉媒体中通常通过将后续文本物理移动到新行来表示,但样式表或用户代理同样可以将换行符以其他方式呈现,例如作为绿色点或额外的间距。
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 元素内部的内容
不应被视为周围文本的一部分。
这个元素 有涉及双向算法的呈现要求。
wbr
element支持所有当前引擎。
HTMLElement。在以下示例中,有人引用了某句话,这句话为了效果被写成了一个长单词。然而,为了确保文本可以以可读的方式换行,这句话中的单词使用了 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);
该元素 具有涉及双向算法的渲染要求。
本节为非规范性内容。
| 元素 | 用途 | 示例 |
|---|---|---|
a
|
超链接 |
|
em
|
强调重音 |
|
strong
|
重要性 |
|
small
|
附带评论 |
|
s
|
不准确的文本 |
|
cite
|
作品标题 |
|
q
|
引用 |
|
dfn
|
定义实例 |
|
abbr
|
缩写 |
|
ruby, rt, rp
|
注音标注 |
|
data
|
机器可读的等价物 |
|
time
|
日期或时间相关数据的机器可读等价物 |
|
code
|
计算机代码 |
|
var
|
变量 |
|
samp
|
计算机输出 |
|
kbd
|
用户输入 |
|
sub
|
下标 |
|
sup
|
上标 |
|
i
|
替代声音 |
|
b
|
关键词 |
|
u
|
注解 |
|
mark
|
高亮 |
|
bdi
|
文本方向隔离 |
|
bdo
|
文本方向格式化 |
|
span
|
其他 |
|
br
|
换行 |
|
wbr
|
换行机会 |
|
链接是一个概念性构造,通过 a、 area、
form和 link 元素创建,这些元素 表示
两个资源之间的连接,其中一个是当前的 Document。在 HTML 中有三种类型的链接:
这些链接指向需要用来增强当前文档的资源,通常由用户代理自动处理。所有 外部资源链接 都具有 获取和处理链接资源 算法,用于描述如何获取资源。
这些链接指向其他资源,通常由用户代理向用户公开,以便用户可以使用户代理 导航 到这些资源,例如访问它们或下载它们。
这些链接指向当前文档中的资源,用于赋予这些资源特殊的意义或行为。
对于具有 link 元素、 href 属性和
rel 属性的链接,必须为
rel 属性的关键字创建链接,这些关键字在 链接类型 部分中定义。
类似地,对于具有 a 和 area 元素、 href 属性和 rel 属性的链接,必须为
rel 属性的关键字创建链接,这些关键字在 链接类型 部分中定义。然而,与 link 元素不同的是,
a 和 area 元素如果具有 href
属性,但没有 rel 属性,或者其 rel 属性没有定义为指定 超链接的关键字,也必须创建一个 超链接。这种隐含的超链接没有特殊意义(它没有 链接类型),仅仅是将元素的 节点文档 链接到元素的 href 属性指定的资源。
类似地,对于具有 form 元素和 rel
属性的链接,必须为 rel
属性的关键字创建链接,这些关键字在 链接类型 section.
form elements that do not have a
rel attribute,
or whose rel 属性没有定义为指定 超链接的关键字,也必须创建一个 超链接。
一个 超链接 可以有一个或多个 超链接注解 ,这些注解修改该超链接的处理语义。
a 和 area 元素创建的链接The href
属性在 a
和 area
元素上必须具有一个 有效的 URL,可能被空格包围的值。
The href
属性在 a
和
area
元素上不是必需的;当这些元素没有 href
属性时,它们不会创建超链接。
The target
属性(如果存在)必须是 有效的可导航目标名称或关键字。它给出了将使用的 可导航目标 的名称。用户代理在 跟随超链接时使用此名称。
The download
属性(如果存在)表示作者打算将超链接用于 下载资源。该属性可以有一个值;如果有,该值指定作者建议用于在本地文件系统中标记资源的默认文件名。对允许的值没有限制,但作者应注意,大多数文件系统对文件名中支持的标点符号有限制,用户代理可能会相应地调整文件名。
所有当前引擎的支持。
The ping
属性(如果存在)提供了希望在用户跟随超链接时收到通知的资源的 URL。其值必须是一个 用空格分隔的令牌集合,每个令牌必须是一个 有效的非空 URL ,其 方案 必须是
HTTP(S) 方案。该值由用户代理用于 超链接审计。
The rel
属性在 a
和 area
元素上控制元素创建的链接类型。属性值必须是一个
无序的唯一空格分隔令牌集合。 允许的关键词及其含义 在下文定义。
rel的
支持的令牌 是 HTML
链接类型 中定义的允许在 a 和 area
元素上使用的关键词,这些关键词影响处理模型,并由用户代理支持。可能的 支持的令牌 包括 noreferrer、
noopener和
opener。
rel的
支持的令牌 必须仅包括用户代理实现处理模型的令牌。
The rel
属性没有默认值。如果省略该属性,或者属性中的值都未被用户代理识别,则文档与目标资源之间没有特定的关系,只是两个之间存在一个超链接。
The referrerpolicy 属性是一个 referrer 策略属性. Its purpose is to set the
referrer
policy used when
跟随超链接. [REFERRERPOLICY]
当 a 或
area
元素的 激活行为 被触发时,用户代理可以允许用户表示是否希望将超链接用于 导航 ,或者是否希望下载指定的资源。
在没有用户偏好的情况下,如果元素没有
download
属性,则默认行为应为导航;如果元素具有该属性,则默认行为应为下载指定的资源。
The activation behavior of an a 或 area element
element given an event event 时为:
如果 element 没有 href
属性,则返回。
将 hyperlinkSuffix 设为null。
如果 element 是 a 元素,并且
event的 目标
is an img with an
ismap
attribute specified:
将 userInvolvement 设为 event的 用户导航参与。
如果用户表示了下载超链接的偏好,则将
userInvolvement 设为"browser UI"。
即,如果用户表示了特定的下载偏好,这不再被视为仅仅是"activation"。
如果 element 具有 download
属性,或者用户表示了下载超链接的偏好,则 download
the hyperlink created by element with
hyperlinkSuffix 设为 hyperlinkSuffix ,将
userInvolvement 设为
userInvolvement。
否则, 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
所有当前浏览器均支持。
所有当前浏览器均支持。
返回超链接的 URL 来源。
hyperlink.protocol
所有当前引擎都支持。
所有当前引擎都支持。
返回超链接 URL 的 scheme。
可以设置,以更改 URL 的 scheme。
hyperlink.username
所有当前引擎均支持。
所有当前引擎均支持。
返回超链接的 URL 的用户名。
可以设置,以更改 URL 的用户名。
hyperlink.password
所有当前引擎均支持。
所有当前引擎均支持。
返回超链接的 URL 的密码。
可以设置,以更改 URL 的密码。
hyperlink.host
所有当前引擎均支持。
所有当前引擎均支持。
返回超链接的 URL 的主机和端口(如果与 scheme 的默认端口不同)。
可以设置,以更改 URL 的主机和端口。
hyperlink.hostname
所有当前引擎均支持。
所有当前引擎均支持。
返回超链接的 URL 的主机。
可以设置,以更改 URL 的主机。
hyperlink.port
所有当前引擎均支持。
所有当前引擎均支持。
返回超链接的 URL 的端口。
可以设置,以更改 URL 的端口。
hyperlink.pathname
所有当前引擎均支持。
所有当前引擎均支持。
返回超链接的 URL 的路径。
可以设置,以更改 URL 的路径。
hyperlink.search
所有当前引擎均支持。
所有当前引擎均支持。
返回超链接的 URL 的查询(包括前导的 "?",如果非空)。
可以设置,以更改 URL 的查询(忽略前导的 "?")。
hyperlink.hash
所有当前引擎均支持。
所有当前引擎均支持。
返回超链接的 URL 的片段(包括前导的 "#",如果非空)。
可以设置,以更改 URL 的片段(忽略前导的 "#")。
实现 HyperlinkElementUtils
mixin 的元素是 超链接
元素。
A 超链接元素 具有一个 关联的 url (null 或一个 URL)。它最初为 null。
A 超链接元素 必须具有一个 关联的 设置 url 算法。
A 超链接元素 具有一个 关联的 重新初始化 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 protocol
的 setter步骤如下:
基本URL解析
给定值,后接":",以 this的 url 为
url
,以 scheme start
state 为
state override。
因URL解析器会忽略多个连续冒号,若提供"https:"(甚至"https::::")与
提供"https"效果相同。
The username
的 setter步骤如下:
The password
的 setter步骤如下:
The host 的 getter步骤如下:
The host
的 setter步骤如下:
若 url 为 null 或 url 拥有 不透明路径,则返回。
基本URL解析 给定值,以 url 为 url , host state 为 state override。
The hostname 的 getter步骤如下:
The hostname
的 setter步骤如下:
若 url 为 null 或 url 拥有 不透明路径,则返回。
基本URL解析 给定值,以 url 为 url , hostname state 为 state override。
The port 的 getter步骤如下:
The port
的 setter步骤如下:
若 url 为 null 或 url 不可拥有用户名/密码/端口,则返回。
若给定值为空字符串,则令 url的 端口 为 null。
否则, 基本URL解析 给定值,以 url 为 url , port state 为 state override。
The pathname
的 setter步骤如下:
若 url 为 null 或 url 拥有 不透明路径,则返回。
设置 url的 路径 为空列表。
基本URL解析 给定值,以 url 为 url , path start state 为 state override。
The search 的 getter步骤如下:
The search 的
setter步骤如下:
若 url 为 null,则终止这些步骤。
若给定值为空字符串,则设置 url的 查询 为 null。
否则:
令 input 为给定值,若有单个前导"?"则移除。
设置 url的 查询 为空字符串。
基本URL解析 input,以 url 为 url , query state 为 state override。
The hash 的 getter步骤如下:
The hash
的 setter步骤如下:
若 url 为 null,则返回。
若给定值为空字符串,则设置 url的 片段 为 null。
否则:
令 input 为给定值,若有单个前导"#"则移除。
设置 url的 片段 为空字符串。
基本URL解析 input,以 url 为 url , fragment state 为 state override。
a 和 area 元素interface mixin HTMLHyperlinkElementUtils {
[CEReactions , ReflectSetter ] stringifier attribute USVString href ;
[CEReactions , Reflect ] attribute DOMString target ;
};
hyperlink.toString()hyperlink.href
在所有当前引擎中均受支持。
在所有当前引擎中均受支持。
在所有当前引擎中均受支持。
在所有当前引擎中均受支持。
返回超链接的 URL。
可以设置,以更改该 URL。
The href getter steps are:
The HTML
element insertion steps for a 和 area
elements, given insertedNode, are:
如果 insertedNode 未与文档 连接,则返回。
Consider speculative loads given insertedNode的 节点文档.
The HTML
element removing steps for a 和 area elements,
given removedNode, isSubtreeRoot, and oldAncestor are:
如果 oldAncestor 未与文档 连接,则返回。
Consider speculative loads given oldAncestor的 节点文档.
The HTML element
moving steps for a 和 area elements,
given movedNode, are:
Consider speculative loads given movedNode的 节点文档.
The following 属性更改步骤,给定 element、 localName、
oldValue、
value和 namespace, are used for all a and area
elements:
如果 namespace 非 null,则返回。
如果 oldValue 等于 value,则返回。
如果 localName 为 href,则
set the
url given element.
仅当为 blob:
URL 时可观察到这一点,因为对它们进行
解析 涉及对 Blob URL 存储
的查找。
如果 localName 为 href、 referrerpolicy或
rel,
then consider speculative loads given
element的 节点文档考虑推测性加载。
To update href for an HTMLAnchorElement 或
HTMLAreaElement
element, set the element's href
内容属性值设置为该元素的 url, 序列化后得到的结果。
The set the
url algorithm for
HTMLAnchorElement
和 HTMLAreaElement
elements is as follows:
这也被 表单提交 用于 form 元素。 a 元素的例外是为了与网页内容兼容。
To get an element's noopener, given an a、 area或
form 元素
element,
一个 URL 记录 url,
以及一个字符串 target,请执行以下步骤。该过程返回一个布尔值。
如果 element的 链接类型 包含 noopener 或 noreferrer
关键字,则返回 true。
如果 element的 链接类型
不包含 opener 关键字,并且
target is an
ASCII
case-insensitive match for "_blank", then return
true.
如果 url的 blob URL 条目 不为 null:
返回 false。
要 跟随由元素 created by an element
subject创建的超链接,给定一个可选的 hyperlinkSuffix
(默认值为 null)和一个可选的 userInvolvement (默认值为 "none"):
如果 subject 不能导航,则返回。
将 targetAttributeValue 设置为空字符串。
如果 subject 是 a
或 area 元素,则将
targetAttributeValue 设置为 获取元素的目标 的结果,给定 subject。
令 urlRecord 为对 编码-解析
URL 的结果,该结果是基于
subject的 href 属性值,相对于
subject的 节点文档.
如果 urlRecord is failure, then return.
令 noopener be the result of getting an element's noopener with subject、 urlRecord和 targetAttributeValue获取元素的 noopener 的结果。
令 targetNavigable be the first return value of applying the rules for choosing a navigable given targetAttributeValue、 subject's node navigable, and noopener。
如果 targetNavigable 为 null,则返回。
令 urlString be the result of applying the URL serializer to urlRecord.
如果 hyperlinkSuffix 不为 null,则将其附加到 urlString。
导航 targetNavigable 到 urlString ,使用 subject的 节点文档, 并将 referrerPolicy(引用策略) 设置为 subject的 超链接引用策略, userInvolvement(用户参与) 设置为 userInvolvement, sourceElement(源元素) 设置为 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:
如果 subject的 链接类型 包含 noreferrer
关键字,
则返回 "no-referrer".
返回 subject的 referrerpolicy
content attribute.
所有当前引擎都支持。
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
a 或 area element that creates the
download to that
resource.
此外,属性还可以指定一个值,以指定用户代理在将资源存储在文件系统中时应使用的文件名。这个值可以被Content-DispositionHTTP
头的文件名参数覆盖。
[RFC6266]
在跨源情况下, download
属性必须与Content-DispositionHTTP
头结合使用,特别是与
attachment 处置类型,以避免用户被警告可能的恶意活动。(这是为了保护用户免于在没有完全理解的情况下下载敏感的个人或机密信息。)
要 下载该超链接 ,由一个元素 subject创建,给定一个可选的 hyperlinkSuffix (默认为 null)和一个可选的 userInvolvement (默认为
"none")时:
如果 subject 无法导航,则返回。
如果 subject的 节点文档的 活动沙箱标志集 已设置 沙箱下载浏览上下文标志 ,则返回。
令 urlString be the result of encoding-parsing-and-serializing a
URL given subject的 href 属性值,
相对于 subject的 节点文档.
如果 urlString 为失败,则返回。
如果 hyperlinkSuffix 非空,则将其追加到 urlString。
如果 userInvolvement 不是"browser UI",则:
令 filename 为 subject的 download
属性的值。
令 continue 为 触发下载请求
navigate 事件 的结果,目标为
navigation , destinationURL
设为 urlString, userInvolvement 设为
userInvolvement, sourceElement
设为 subject, filename 设为
filename。
如果 continue 为false,则返回。
Inform the navigation API about aborting navigation given subject的 节点可导航性.
按照 并行运行以下步骤:
要 作为下载处理 一个 response response ,使用 可导航对象 navigable 和 导航 ID 或 null navigationId:
令 suggestedFilename be the result of getting the suggested filename for response.
令 download behavior be the result of WebDriver BiDi download will
begin with navigable 和一个新的 WebDriver BiDi 导航状态
whose id 为
navigationId, status 为
"pending",
url 为
response的 URL, suggestedFilename 为
suggestedFilename。
如果 download behavior 不为 null 且 download behavior的 allowed 为 false:
Invoke WebDriver BiDi download end with navigable
和一个新的
WebDriver BiDi 导航状态 ,
其中 id 为
navigationId, status 为 "canceled",
url 为
response的 URL.
返回。
如果 download behavior 不为 null,则令 destinationFolder 为 download behavior的 destinationFolder。
以下步骤 并行运行:
运行 实现自定义 步骤以保存 response 以便后续使用。 如果 destinationFolder 不为 null,用户代理应将文件保存到该路径。 如果用户代理需要文件名,则应使用 suggestedFilename。
如果以下任一条件成立:
下载被用户取消;
下载被用户代理取消;
发生错误(例如,网络错误、存储空间不足、目标文件夹不可用);
则:
Invoke WebDriver BiDi download end with
navigable 和一个新的
WebDriver BiDi 导航状态 ,
其中 id 为
navigationId, status 为
"canceled",
url
为 response的 URL.
返回。
When the download completes successfully, invoke WebDriver BiDi download
end with navigable 和一个新的 WebDriver BiDi 导航状态
,
其中 id 为
navigationId, status 为
"complete",
downloadedFilepath 为下载文件的绝对路径(如果有),否则为 null,
url 为
response的 URL.
为了 获取建议的文件名 对于一个 响应 response:
该算法旨在减轻从不信任的网站下载文件的安全风险,强烈建议用户代理遵循此算法。
设 filename be the undefined value.
如果 response 有一个 `Content-Disposition`
头部,该头部指定了
attachment 附件类型,并且该头部中包含文件名信息,则令 filename 取该头部指定的值,并跳转到下面标记为
sanitize 的步骤。 [RFC6266]
令 interface origin 为启动下载的 文档源 的源(
Document in which the download or navigate action resulting in the
download was initiated, if any.
令 response origin be the origin of the URL of
response, unless that URL's 方案 部分为
data,此时令 response origin 与
interface
origin, if any.
如果不存在 interface origin,则令 trusted operation 为 true;否则,当 response origin 与 interface origin is the same origin as trusted operation, and false otherwise.
如果 trusted operation 为 true 且 response 有一个 `Content-Disposition`
头部且该头部包含文件名信息,则令 filename 取该头部指定的值,并跳转到下面标记为 sanitize 的步骤。 [RFC6266]
如果下载不是由一个由 超链接 (由
a 或 area element, or if the
element of the hyperlink from
which it was initiated did not have a download
属性,或存在该属性但其值为空,则跳转到标记为 no proposed filename.
令 proposed filename 为触发下载的超链接元素上 download
attribute of the element of the
hyperlink that initiated the download at the
time the download was
initiated.
如果 trusted operation 为 true,则令 filename 为 proposed filename的值,并跳转到标记为 sanitize below.
如果 response 有一个 `Content-Disposition`
头部,并且该头部指定了 attachment 附件类型,则令 filename 为
proposed filename的值,并跳转到标记为 sanitize 的步骤。
[RFC6266]
No proposed filename:如果 trusted operation 为 true,或者用户指定了希望下载该响应,则令 filename have a value derived from the URL of response in an 实现定义的方式 派生的值,并跳转到标记为 sanitize below.
令 filename 设置为用户偏好的文件名或由用户代理选择的文件名,并跳转到标记为 sanitize below.
如果算法执行到此步骤,则说明下载是从与
response不同的源发起的,该源没有将文件标记为适合下载,并且下载不是由用户发起的。这可能是因为使用了 download
属性来触发下载,或者因为 response 的类型不是用户代理所支持的类型。
这可能会有危险,例如,一个敌意服务器可能试图诱使用户在不知情的情况下下载私人信息,然后将其重新上传到敌意服务器,通过使用户误以为数据来自敌意服务器。
因此,为符合用户利益,用户应被通知 response 来自一个完全不同的源,并且为了防止混淆,应忽略来自潜在敌意 interface origin 的任何建议文件名。
Sanitize:可选地,允许用户对 filename进行修改。例如,用户代理可以提示用户输入文件名,并可能以算法上确定的 filename as determined above as a default value.
调整 filename ,使其适合本地文件系统。
例如,这可能涉及移除文件名中非法的字符,或者去除首尾空白字符。
如果平台约定中完全不使用 扩展名 来判定文件系统中文件的类型,则返回 filename as the filename.
令 claimed type 为 response的 Content-Type 元数据给出的类型(如果已知)。令 named type 为 filename的 扩展名给出的类型(如果已知)。在本步骤中,一个 类型 指的是将一个 MIME 类型 映射到一个 扩展名.
如果 named type 与用户偏好一致(例如,因为 filename 是通过提示用户确定的),则返回 filename as the filename.
如果 claimed type 与 named type 是同一类型(即 response的 Content-Type 元数据 与 filename的 扩展名一致),则返回 filename as the filename.
如果 claimed type 已知,则修改 filename to add an extension corresponding to claimed type.
否则,如果已知 named type 是潜在危险的类型(例如,在平台约定中会被视作本机可执行文件、shell 脚本、HTML 应用程序或支持可执行宏的文档),则可选择修改
filename 以添加一个已知安全的 扩展名
(例如 ".txt")。
这最后一步会导致无法下载可执行文件,这可能不是理想的做法。如同以往一样,实施者必须在安全性和可用性之间做出权衡。
返回 filename as the filename.
对于本算法的目的,文件 扩展名
指的是文件名中任何由平台约定用于识别文件类型的部分。例如,许多操作系统使用文件名中最后一个点(".")之后的部分来确定文件的类型,并从中决定文件的打开或执行方式。
用户代理在决定将生成的文件存储在用户文件系统中的位置时,应忽略响应本身提供的任何目录或路径信息、其 URL以及任何 download
属性。
If a hyperlink created by an a 或 area 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运行这些步骤,忽略解析返回失败的情况:
如果 ping URL的 方案 不是 HTTP(S) 方案,则返回。
可选地,返回。(例如,用户代理可能希望根据用户表达的偏好忽略任何或所有 ping URL。)
让 request 成为一个新的 请求 ,其 URL 是 ping URL, 方法 是`POST`, 头部列表 是
« (`Content-Type`,
`text/ping`)
», 主体 是`PING`, 客户端 是
settingsObject, 目标
是空字符串, 凭证模式 是`include`, 引用者
是`no-referrer", and whose 使用URL凭证标志 被设置,且
发起者类型 是`ping`。
让 target URL be the result of encoding-parsing-and-serializing a
URL given the element's href 属性的值,相对于元素的 节点文档,
and then:
Document object
containing the hyperlink being audited and ping URL 具有 相同的来源
Document containing the
hyperlink being audited is not "https`
Ping-From`头部,其值为包含超链接的文档的
URL ,以及一个`Ping-To`
HTTP头部,其值为 target URL。
Ping-To`
HTTP头部,其值为
target URL。 request 不包含`Ping-From`头部。
获取 request。
这可以与主要获取操作 并行 进行,并且与该获取操作的结果无关。
用户代理应允许用户调整此行为,例如与禁用发送HTTP `Referer`(如所写)头部的设置结合使用。根据用户的偏好,用户代理可以完全
忽略
the ping
属性,或者有选择地忽略列表中的URL(例如,忽略任何第三方URL);这在上述步骤中已明确考虑。
用户代理必须忽略响应中返回的任何实体主体。一旦开始接收响应主体,用户代理可以提前关闭连接。
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 属性为用户提供了以下优势:
Ping-From` 和 `Ping-To` 头部`Ping-From` 和 `Ping-To` HTTP 请求头部包含在 超链接审计 请求中。它们的值是一个 URL, 序列化的。
所有当前引擎均支持。
下表总结了本规范定义的链接类型及其对应的关键词。此表为非规范性表格;实际的链接类型定义将在接下来的几节中给出。
在本节中,术语 引用文档 指的是由表示链接的元素标识的资源,而术语 当前文档 指的是表示链接的元素所在的资源。
要确定哪些链接类型适用于 link、 a、 area或 form 元素,必须对元素的
rel 属性进行 ASCII
空格分割。生成的令牌即为适用于该元素的链接类型的关键词。
除非另有说明,否则每个 rel 属性中不得指定重复的关键词。
一些表格下方的部分会列出某些关键词的同义词。所指示的同义词应按用户代理指定的方式处理,但不得在文档中使用(例如,关键词"copyright")。
关键词总是 ASCII 不区分大小写,并且必须按此方式进行比较。
因此, rel="next" 与 rel="NEXT"是相同的。
被标记为 body-ok 的关键词会影响 link 元素是否可以
出现在文档主体中。 body-ok 关键词包括
dns-prefetch、
modulepreload、
pingback、
preconnect、
prefetch、
preload和
stylesheet。
需要由网页浏览器实现的新链接类型将被添加到此标准中。其余类型可以 注册为扩展。
| 链接类型 | 对...的影响 | body-ok | 有 `Link`
处理 |
简要描述 | ||
|---|---|---|---|---|---|---|
link |
a 和 area |
form |
||||
alternate |
超链接 | 不允许 | · | · | 提供当前文档的替代表示。 | |
canonical |
超链接 | 不允许 | · | · | 提供当前文档的首选 URL。 | |
author |
超链接 | 不允许 | · | · | 提供指向当前文档或文章作者的链接。 | |
bookmark |
不允许 | 超链接 | 不允许 | · | · | 提供最近的祖先部分的永久链接。 |
dns-prefetch |
外部资源 | 不允许 | 是 | · | 指定用户代理应预先执行目标资源的 来源的 DNS 解析。 | |
expect |
内部资源 | 不允许 | · | · | 期望当前文档中会出现目标 ID 的元素。 | |
external |
不允许 | 注释 | · | · | 指示引用的文档不属于与当前文档相同的网站。 | |
help |
超链接 | · | · | 提供上下文相关帮助的链接。 | ||
icon |
外部资源 | 不允许 | · | · | 导入表示当前文档的图标。 | |
manifest |
外部资源 | 不允许 | · | · | 导入或链接到 应用程序清单。 [MANIFEST] | |
modulepreload
|
外部资源 | 不允许 | 是 | · | 指定用户代理必须预先 获取模块脚本 并将其存储在文档的 模块映射 中以供后续评估。可选地,模块的依赖项也可以被获取。 | |
license |
超链接 | · | · | 指示当前文档的主要内容受所引用文档中描述的版权许可证的覆盖。 | ||
next |
超链接 | · | · | 指示当前文档是一个系列的一部分,下一个文档是所引用的文档。 | ||
nofollow |
不允许 | 注释 | · | · | 指示当前文档的原始作者或发布者不认可所引用的文档。 | |
noopener |
不允许 | 注释 | · | · | 如果超链接会创建一个辅助的 顶级可遍历项
,则创建一个非辅助浏览上下文 (即具有合适的
target
属性值)。
|
|
noreferrer |
不允许 | 注释 | · | · | 不会包含 `Referer`
(sic) 头。此外,具有与 noopener相同的效果。 |
|
opener |
不允许 | 注释 | · | · | Creates an auxiliary
browsing context if the hyperlink would otherwise create
a top-level traversable with a
non-auxiliary browsing
context (i.e.,
has "_blank”作为 target
attribute value). |
|
pingback |
外部资源 | 不允许 | 是 | · | 提供处理当前文档的 pingback 的 pingback 服务器地址。 | |
preconnect |
外部资源 | 不允许 | 是 | 是 | 指定用户代理应预先连接到目标资源的 来源。 | |
prefetch |
外部资源 | 不允许 | 是 | · | 指定用户代理应预先 获取 并缓存目标资源,因为它可能会在后续的 导航中需要。 | |
preload |
外部资源 | 不允许 | 是 | 是 | 指定用户代理必须预先 获取 并缓存目标资源,以用于当前 导航
according to the preload destination
given by the as 属性给定的 预加载目的地 (以及与 对应 目的地)。 |
|
prev |
超链接 | · | · | 指示当前文档是一个系列的一部分,前一个文档是所引用的文档。 | ||
privacy-policy
|
超链接 | 不允许 | · | · | 提供有关当前文档适用的数据收集和使用实践的信息链接。 | |
search |
超链接 | · | · | 提供指向可用于搜索当前文档及其相关页面的资源的链接。 | ||
stylesheet |
外部资源 | 不允许 | 是 | · | 导入样式表。 | |
tag |
不允许 | 超链接 | 不允许 | · | · | 提供适用于当前文档的标签(由给定地址标识)。 |
terms-of-service
|
超链接 | 不允许 | · | · | 提供指向有关当前文档提供者与希望使用当前文档的用户之间的协议的信息的链接。 | |
alternate"仅在一个引擎中支持。
The alternate 关键字可以与
link、
a和 area 元素一起使用。
这个关键字的含义取决于其他属性的值。
link
元素且 rel
属性也包含 stylesheetThe alternate 关键字会修改 stylesheet
关键字的含义,如该关键字的描述所示。
alternate 关键字不会创建自己的链接。
这里,一组 link
元素提供了一些样式表:
<!-- a persistent style sheet -->
< link rel = "stylesheet" href = "default.css" >
<!-- the preferred alternate style sheet -->
< link rel = "stylesheet" href = "green.css" title = "Green styles" >
<!-- some alternate style sheets -->
< link rel = "alternate stylesheet" href = "contrast.css" title = "High contrast" >
< link rel = "alternate stylesheet" href = "big.css" title = "Big fonts" >
< link rel = "alternate stylesheet" href = "wide.css" title = "Wide screen" >
alternate 关键字与 type 属性的值设置为
application/rss+xml 或 application/atom+xml
这个关键字创建了一个 超链接 ,引用了一个聚合源(虽然不一定与当前页面聚合完全相同的内容)。
为了进行源自动发现,用户代理应考虑文档中所有使用 link
元素且 alternate 关键字的元素,以及其 type
属性设置为 application/rss+xml 或 application/atom+xml的元素。如果用户代理有默认的聚合源概念,第一个这样的元素(按 树顺序)应作为默认。
以下 link
元素为博客提供了聚合源:
< link rel = "alternate" type = "application/atom+xml" href = "posts.xml" title = "Cool Stuff Blog" >
< link rel = "alternate" type = "application/atom+xml" href = "posts.xml?category=robots" title = "Cool Stuff Blog: robots category" >
< link rel = "alternate" type = "application/atom+xml" href = "comments.xml" title = "Cool Stuff Blog: Comments" >
这样的 link
元素会被用于源自动发现,首先的元素(在适用情况下)作为默认。
以下示例提供了各种不同的聚合源给用户,使用了
a 元素:
< p > You can access the planets database using Atom feeds:</ p >
< ul >
< li >< a href = "recently-visited-planets.xml" rel = "alternate" type = "application/atom+xml" > Recently Visited Planets</ a ></ li >
< li >< a href = "known-bad-planets.xml" rel = "alternate" type = "application/atom+xml" > Known Bad Planets</ a ></ li >
< li >< a href = "unexplored-planets.xml" rel = "alternate" type = "application/atom+xml" > Unexplored Planets</ a ></ li >
</ ul >
这些链接不会用于 feed 自动发现。
该关键词创建一个引用当前文档的备用表示形式的 超链接 。
如果 alternate 关键词与 hreflang
属性一起使用,并且该属性的值与 文档元素的 语言不同,则表示引用的文档是一个翻译版本。
如果 alternate 关键词与 type
属性一起使用,则表示引用的文档是当前文档在指定格式中的重新表述。
The hreflang
和 type 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"链接类型的其他文档,那么,除了意味着这些文档是第一个文档的备用表示之外,还意味着这两个文档也是彼此的备用表示。
author"The author 关键字可以与 link、
a和 area 元素一起使用。这个关键字创建一个 超链接。
对于 a 和 area 元素, author
关键字表示所引用的文档提供有关定义超链接的元素最近的 article
元素祖先的更多信息(如果有的话),否则提供有关整个页面的信息。
对于 link 元素, author
关键字表示所引用的文档提供有关整个页面的作者的更多信息。
"引用的文档" 可以是(并且通常是)一个 mailto:
URL,提供作者的电子邮件地址。 [MAILTO]
同义词: For historical reasons, user agents must also treat
link、 a和 area elements that have a
rev attribute with the value "made" as having the author 关键字指定的链接关系。
bookmark"The bookmark 关键字可以与 a 和
area 元素一起使用。这个关键字创建一个 超链接。
该 bookmark
关键字为相关链接元素的最近祖先 article
元素提供一个永久链接;如果不存在祖先 article
元素,则为与该链接元素最密切关联的部分提供永久链接。
以下代码段有三个永久链接。用户代理可以通过查看永久链接的位置来确定哪个永久链接适用于规范的哪个部分。
...
< body >
< h1 > Example of permalinks</ h1 >
< div id = "a" >
< h2 > First example</ h2 >
< p >< a href = "a.html" rel = "bookmark" > This permalink applies to
only the content from the first H2 to the second H2</ a > . The DIV isn't
exactly that section, but it roughly corresponds to it.</ p >
</ div >
< h2 > Second example</ h2 >
< article id = "b" >
< p >< a href = "b.html" rel = "bookmark" > This permalink applies to
the outer ARTICLE element</ a > (which could be, e.g., a blog post).</ p >
< article id = "c" >
< p >< a href = "c.html" rel = "bookmark" > This permalink applies to
the inner ARTICLE element</ a > (which could be, e.g., a blog comment).</ p >
</ article >
</ article >
</ body >
...
canonical"The canonical 关键字可以与
link
元素一起使用。这个关键字创建一个 超链接。
The canonical
关键字表示由 href 属性给出的 URL 是当前文档的首选
URL。 这有助于搜索引擎减少重复内容,详细描述见 The Canonical
Link Relation。 [RFC6596]
dns-prefetch"The dns-prefetch
关键字可以与
link 元素一起使用。此关键字创建一个 外部资源链接。此关键字是 body-ok。
The dns-prefetch
关键字表示,预先为指定资源的 源 执行DNS解析可能是有益的,因为用户很可能需要位于该
源的资源,预先解决DNS解析的延迟成本将改善用户体验。
对于 dns-prefetch
关键字,没有默认的资源类型。
适合 获取和处理 此类链接的时间是:
当 外部资源链接 is
created on a link
element
that is already browsing-context connected.
When the href attribute
of the link
element of an external
resource link that is already browsing-context
connected is changed.
此类型链接资源的 获取和处理
步骤,给定一个 link 元素
el,如下:
让 url be the result of encoding-parsing a URL given
el的 href
属性值相对
el的 节点文档.
如果 url 解析失败,则返回。
让 partitionKey be the result of determining the network partition key given el的 节点文档的 相关设置对象.
The user agent should resolve an origin given partitionKey 和 url的 源.
由于此算法的结果可以被缓存,因此将来的获取可能会更快。
expect"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发生以下任何情况时:
一个 expect 内部资源链接 已经在
el上创建, el 已经 浏览上下文连接,并且
el的 href
属性被设置、更改或移除;
一个 expect 内部资源链接 已经在
el上创建, el 已经 浏览上下文连接,并且
el的 media
属性被设置、更改或移除;
然后 处理 el。
To process internal resource link given a link 元素 el,
run these steps:
让 doc 成为 el的 节点文档。
让 url be the result of encoding-parsing a URL given
el的 href
attribute's value, relative to
doc。
如果这失败,或者如果 url 不 等于 doc的 URL ,且 排除片段 set to true, then unblock rendering on el and return.
让 indicatedElement be the result of selecting the indicated part given doc 和 url.
如果以下所有条件都为真:
doc的 当前文档准备状态 是"loading";
el 创建了一个 内部资源链接;
el 是 浏览上下文连接的;
el 是 潜在的渲染阻塞;
indicatedElement 不是一个元素,或者位于一个
打开元素栈
的 HTML解析器 的堆栈上,其关联的
Document 是 doc,
然后 阻止渲染 on el。
否则, 取消阻止渲染 on el。
To process internal resource links given a Document doc:
以下的 属性更改步骤,给定 element(元素)、
localName(本地名称)、 oldValue(旧值)、
value(新值)和 namespace(命名空间),用于确保 expect link 元素能够响应动态的
id 和 name 更改:
external"The external 关键字可用于 a、
area和 form 元素。此关键字不会创建
超链接,但会 注释 由该元素创建的任何其他超链接(如果没有其他关键字创建,则为隐含超链接)。
The external
关键字表示该链接指向的文档不属于当前文档所在网站的一部分。
help"The help 关键字可用于
link、
a、 area和 form 元素。此关键字创建一个
超链接。
对于 a、 area和 form 元素, help
关键字表示引用的文档为定义超链接的元素的父元素及其子元素提供进一步的帮助信息。
在以下示例中,表单控件具有相关的上下文帮助。例如,当用户按下“帮助”或“F1”键时,用户代理可以使用此信息显示引用的文档。
< p >< label > Topic: < input name = topic > < a href = "help/topic.html" rel = "help" > (Help)</ a ></ label ></ p >
对于 link 元素, help 关键字表示引用的文档为整个页面提供帮助。
对于 a 和 area 元素,在某些浏览器中,
help 关键字会使链接使用不同的光标。
icon"Support in all current engines.
The icon 关键字可用于 link 元素。此关键字创建一个 外部资源链接。
指定的资源是代表页面或网站的图标,应该由用户代理在用户界面中代表页面时使用。
图标可以是听觉图标、视觉图标或其他类型的图标。如果提供了多个图标,用户代理必须根据
type、 media和 sizes 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图像提供的图标。
其他关键字必须进一步解析如下,以确定它们代表什么:
如果关键字不包含一个U+0078拉丁小写字母x或U+0058拉丁大写字母X字符,则此关键字不代表任何内容。返回该关键字。
令 width string 为"x"或"X"之前的字符串。
令 height string 为"x"或"X"之后的字符串。
如果 width string 或 height string 以U+0030数字零(0)字符开头或包含除 ASCII数字以外的任何字符,则此关键字不代表任何内容。返回该关键字。
应用 解析非负整数的规则 到 width string 以获得 width。
应用 解析非负整数的规则 到 height string 以获得 height。
关键字表示资源包含一个宽度为 width 设备像素、高度为 height 设备像素的位图图标。
The keywords specified on the sizes
属性中指定的关键字不得表示实际不可用的图标大小。
The linked resource
fetch setup steps for this type of linked resource, given a
link 元素 el 和 请求
request, are:
设置 request的 目的地
为"image"。
返回true。
这种类型的链接资源的 处理链接头 步骤不执行任何操作。
在没有带有 link 的
icon keyword, for
Document objects whose URL's
scheme is an HTTP(S) scheme对象,用户代理可以改为
并行运行以下步骤:
以下代码片段显示了带有多个图标的应用程序顶部部分。
<!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不区分大小写匹配。
license"The license 关键字可用于 link、
a、 area和 form 元素。此关键字创建一个
超链接。
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 关键字。
manifest"仅在一个引擎中支持。
The manifest 关键字可以用于
link 元素。这个关键字创建一个 外部资源链接。
The manifest
关键字指示提供与当前文档相关的元数据的清单文件。
由 manifest
关键字指定的资源没有默认类型。
当Web应用程序未 安装时,适当的时间来 获取和处理链接资源 类型的链接是当用户代理认为有必要时。例如,当用户选择 安装Web应用程序时。
对于已 安装的Web应用程序,适当的时间来 获取和处理链接资源 类型的链接是:
当 外部资源链接 is created on
a link element
that is already browsing-context connected.
When the href attribute of
the link
element of an external
resource link that is already browsing-context
connected is changed.
在任何情况下,只有第一个 link 元素在 树顺序 中,其 rel 属性包含 manifest 标记,才能被使用。
用户代理不得为了这种链接类型 延迟加载事件 。
The linked
resource fetch setup steps for this type of linked resource, given a
link 元素 el
和 请求
request, are:
如果 navigable 为空,则返回 false。
如果 navigable 不是 顶级可遍历,则返回 false。
将 request的 发起者
设置为
"manifest"。
将 request的 目标 设置为
"manifest"。
将 request的 模式 设置为
"cors"。
将 request的 凭据模式 to the CORS settings attribute credentials
mode for el的
crossorigin
content attribute.
返回 true。
要 处理这种类型的链接资源 给定一个
link 元素
el、布尔值 success、 响应 response和 字节序列
bodyBytes:
如果 response的 Content-Type元数据 不是 JSON MIME类型,则将 success 设置为 false。
如果 success 为 true:
对于这种类型的链接资源, 处理链接头 步骤是无操作。
modulepreload"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之类的技术或在服务器端进行监控,否则不会察觉。值得注意的是,适当的 load 或
error 事件将在指定模块被获取后发生,不会等待任何依赖关系。
用户代理不得为了这种链接类型 延迟加载事件 。
A 模块预加载目标 可以是 "json"、
"style"、"text",
或者是 类脚本目标。
适当的时间来 获取和处理链接资源 类型的链接是:
当 外部资源链接 is
created on a link
element
that is already browsing-context connected.
When the href
attribute of the link
element of an external
resource link that is already browsing-context
connected is changed.
与其他一些链接关系不同,更改这些 as、 crossorigin和
referrerpolicy)
of such a link
does not trigger a new fetch. This is because the document's 模块映射 已经被之前的获取填充,因此重新获取毫无意义。
The 获取和处理链接资源
算法用于 modulepreload
链接,给定一个 link
元素
el,其步骤如下:
如果 el的 href 属性的值为空字符串,则返回。
让 destination 成为 el的 as 属性的当前状态(一个 目标),或者如果它没有状态,则为 "script"。
如果 destination 不是 模块预加载目的地, then
queue an element task
on the 网络任务源 上针对
el
to 排入一个元素任务 named error at el, and
return.
如果 url 失败,则返回。
让 credentials mode be the CORS settings attribute credentials
mode for el的 crossorigin
attribute.
让 cryptographic nonce 成为 el.[[CryptographicNonce]]。
让 integrity metadata 成为 el的 integrity
属性的值,如果指定的话,否则为空字符串。
如果 el 没有 integrity
属性,则将 integrity metadata 设置为 解析模块完整性元数据 的结果,给定 url 和
settings object。
让 referrer policy 成为 el的 referrerpolicy
属性的当前状态。
让 fetch priority 成为 el的 fetchpriority
属性的当前状态。
让 options 成为 脚本获取选项 ,其 密码随机数 为
cryptographic
nonce, 完整性元数据 为
integrity
metadata, 解析器元数据 为
"not-parser-inserted", 凭据模式 为
credentials
mode, 引用策略 为 referrer
policy, 获取优先级 为
fetch
priority。
获取一个modulepreload模块脚本图 ,给定 url, destination, settings object, options,并使用以下步骤,给定 result:
对于这种类型的链接资源, 处理链接头 步骤是无操作。
以下代码段显示了具有多个模块预加载的应用程序的顶部部分:
<!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" >
...
假设应用程序的模块图如下所示:
这里我们看到应用程序开发人员使用 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 >
nofollow"The nofollow 关键字可以用于
a、
area和 form 元素。这个关键字不会创建一个
超链接,而是 注释 任何其他由元素创建的超链接(如果没有其他关键字创建超链接,则为隐含的超链接)。
The nofollow
关键字表示链接不被页面的原始作者或出版者认可,或者链接到引用的文档主要是由于两个页面的相关人员之间的商业关系而包含的。
noopener"所有当前引擎均支持。
所有当前引擎均支持。
The noopener 关键字可以用于
a、
area和 form 元素。这个关键字不会创建一个
超链接,而是 注释 任何其他由元素创建的超链接(如果没有其他关键字创建超链接,则为隐含的超链接)。
The keyword indicates that any newly created top-level traversable which results
from following the 超链接 will not contain an 辅助浏览上下文。例如,结果 Window的 opener
获取器将返回 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 >
noreferrer"
所有当前引擎均支持。
所有当前引擎均支持。
The noreferrer
关键字可以用于 a、
area和 form 元素。这个关键字不会创建一个
超链接,而是 注释 任何其他由元素创建的超链接(如果没有其他关键字创建超链接,则为隐含的超链接)。
它表示在跟随链接时不会泄露任何引用信息,并且还暗示在相同条件下 noopener
关键字的行为。
另见直接操作引用的 处理模型 。
<a href="..." rel="noreferrer" target="_blank">
与 <a href="..." rel="noreferrer noopener" target="_blank">具有相同的行为。
opener"The opener 关键字可以用于 a、
area和 form 元素。这个关键字不会创建一个
超链接,而是 注释 任何其他由元素创建的超链接(如果没有其他关键字创建超链接,则为隐含的超链接)。
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 >
pingback"The pingback 关键字可以用于
link
元素。这个关键字创建一个 外部资源链接。这个关键字是 body-ok。
关于 pingback 关键字的语义,请参见
Pingback 1.0。 [PINGBACK]
preconnect"
所有当前引擎均支持。
The preconnect
关键字可以用于 link
元素。这个关键字创建一个 外部资源链接。这个关键字是 body-ok。
The preconnect
关键字表示预先与指定资源的 源 建立连接可能是有利的,因为用户很可能需要位于该
源的资源,通过预先解决与建立连接相关的延迟成本可以改善用户体验。
没有资源类型的默认类型由 preconnect 关键字指定。
用户代理不得因这种链接类型 延迟加载事件 。
合适的 获取和处理 此类链接的时机是:
当 外部资源链接 is created
on a link element
that is already browsing-context connected.
When the href attribute
of the link
element of an external
resource link that is already browsing-context
connected is changed.
When the crossorigin
attribute of the
link element of an
external resource
link that is already browsing-context connected is set, changed, or
removed.
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:
如果 options的 href 为空字符串,则返回。
给定 options be the result of encoding-parsing a URL given options's href和 options的 基本URL.
将基本URL传递而不是文档或环境是由 issue #9715追踪的。
如果 url 解析失败,则返回。
如果 url的 方案 不是 HTTP(S) 方案,则返回。
给定 options 的 环境 ,确定网络分区键并得到 partitionKey's environment.
设定 useCredentials 为 true。
如果 options的 crossorigin 是 匿名 并且 options的 origin does not have the same origin as url的 origin不同源,则设定 useCredentials 为 false。
The user agent should obtain a connection given partitionKey、 url的 origin和 useCredentials.
此连接已获取但未直接使用。它将保留在 连接池 中以供后续使用。
用户代理应尽可能尝试启动预连接并执行完整的连接握手(HTTP 为 DNS+TCP,HTTPS 源为 DNS+TCP+TLS),但由于资源限制或其他原因,允许选择执行部分握手(HTTP 仅为 DNS,HTTPS 源为 DNS 或 DNS+TCP),或完全跳过。
每个源的最佳连接数取决于协商协议、用户当前的连接配置文件、可用设备资源、全局连接限制和其他特定上下文变量。因此,多少连接应打开的决定由用户代理决定。
prefetch"The prefetch 关键字可以用于
link
元素。这个关键字创建一个 外部资源链接。这个关键字是 body-ok。
The prefetch 关键字表示预先 获取 和缓存指定的资源或同站点文档可能是有益的,因为用户很可能会在将来导航中需要此资源。
没有资源类型的默认类型由 prefetch
关键字指定。
合适的 获取和处理 此类链接的时机是:
当 外部资源链接 is created on
a link element
that is already browsing-context connected.
When the href attribute of
the link
element of an external
resource link that is already browsing-context
connected is changed.
When the crossorigin
attribute of the
link element of an external resource
link that is already browsing-context connected is set, changed, or
removed.
The 获取和处理此类型链接资源
algorithm for prefetch
links, given a link
元素
el,如下:
如果 el的 href
属性的值为空字符串,则返回。
将 options 设为 creating link options from el.
将 request 设为 创建一个链接请求 并给定 options的结果。
如果 request 为 null,则返回。
设定 request的 initiator
为 "prefetch"。
将 processPrefetchResponse 设为以下步骤,给定 响应 response 和 null、失败或 字节序列 bytesOrNull:
用户代理应 获取 request,并将 processResponseConsumeBody 设为 processPrefetchResponse。用户代理可以延迟获取 request 以优先处理当前文档所需的其他请求。
The 处理链接头 步骤对于这种类型的链接资源是无操作。
preload"Support in one engine only.
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
关键字指定。
用户代理不得为了这种链接类型 延迟加载事件 。
合适的 获取和处理 此类链接的时机是:
当 外部资源链接 is created on
a link element
that is already browsing-context connected.
When the href attribute of
the link
element of an external
resource link that is already browsing-context
connected is changed.
When the as attribute of the
link
element of an external
resource link that is already browsing-context
connected is changed.
When the type attribute of
the link
element of an external
resource link that is already browsing-context
connected, but was previously not obtained due to the type 属性指定的请求
目的地不支持的类型导致资源未被获取。
When the media attribute
of the link
element of an external
resource link that is already browsing-context
connected, but was previously not obtained due to the media 属性不
匹配环境导致资源未被获取。
A Document 有一个 预加载资源的映射,这是一个
有序映射,初始为空。
same-origin"、"cors" 或
"no-cors"
要 消费一个预加载的资源 给 Window window,给定一个 URL
url、一个字符串 destination、一个字符串
mode、一个字符串 credentialsMode、一个字符串 integrityMetadata和
onResponseAvailable,这是一个接受 响应的算法:
让 key 成为一个 预加载键 ,其 URL 是 url, 目的地 是 destination, 模式 是 mode, 凭证模式 是 credentialsMode。
让 preloads 成为 window的 关联的 Document的 预加载资源的映射。
如果 key 不 存在 于 preloads中,则返回 false。
让 entry 成为 preloads[key]。
让 consumerIntegrityMetadata 成为 解析 integrityMetadata的结果。
如果以下条件都不适用:
consumerIntegrityMetadata 是 no metadata;
consumerIntegrityMetadata 等于 preloadIntegrityMetadata;
此比较将忽略未知的完整性选项。参见 问题 #116
则返回 false。
预加载与消费者之间完整性元数据不匹配,即使各自都符合数据要求,也会导致从网络额外请求资源。
非常重要的一点是, 网络错误 应被加入预加载缓存中,这样如果预加载请求出错,错误的响应就不会在后续重新从网络请求。此外,这也具有安全隐患;请设想一种情况:开发者在预加载请求上指定了子资源完整性元数据,而随后的资源请求中未指定。如果预加载请求未通过子资源完整性验证并被丢弃,则资源请求将直接从网络获取并消费一个未经完整性验证的、可能存在恶意的响应。 [SRI]
移除 preloads[key]。
否则,用 entry with entry's 响应.
返回 true。
在本节中,字符串 type 匹配 a 预加载目的地 destination ,当以下算法返回 true 时:
如果 type 是空字符串,则返回 true。
如果 destination 为 "fetch",则返回 true。
令 mimeTypeRecord 为 解析 type的结果。
如果 mimeTypeRecord 失败,则返回 false。
如果 mimeTypeRecord 不是由 用户代理支持,则返回 false。
如果下列任一条件为真:
destination 为 "script" 且
mimeTypeRecord 是 JavaScript MIME 类型;
destination 为 "image" 且
mimeTypeRecord 是 图片 MIME
类型;
destination 为 "font" 且
mimeTypeRecord 是 字体 MIME
类型;
则返回 true。
返回 false。
To create a preload key for a 请求 request, return a new 预加载键 ,其 URL 为 request的 URL, 目的地 为 request的 目的地, 模式 为 request的 模式,以及 凭证模式 为 request的 凭证模式。
A 预加载目的地 为 "fetch"、"font"、
"image"、"script"、"style" 或 "track"。
To translate a preload destination given a string destination:
要 预加载 给定一个 链接处理选项 options 和一个可选的 processResponse,这是一个接受 响应的算法:
如果 options的 目的地 是 "image" 并且 options的 源集 不是
null,则将 options的 href 设置为
选择一个图片源 从
options的 源集。
让 request 成为 创建一个链接请求 给定 options的结果。
如果 request 为 null,则返回。
让 unsafeEndTime 为 0。
让 key 成为 创建一个预加载键 给定 request的结果。
如果 options的 document 为 null,则将 request的 initiator type 设为 “early hint”。
让 controller 为 null。
让 reportTiming 给定一个 Document document 为
报告计时 给 document given document's 相关全局对象。
将 controller 设置为 获取 request的结果,其中 processResponseConsumeBody 设置为以下步骤,给定一个 响应 response 和 null、失败或一个 字节序列 bodyBytes:
如果 bodyBytes 是一个 字节序列,则将 response的 主体 设置为 bodyBytes 作为主体。
通过使用 processResponseConsumeBody,我们 提取了 整个 主体。这是为了确保预加载器从网络加载整个主体,无论预加载是否会被消费(在此时是不确定的)。此步骤然后将请求的主体重置为包含相同字节的新主体,以便其他规范可以在实际消费时读取它,尽管我们已经这样做了一次。
否则,将 response 设置为一个 网络错误。
将 unsafeEndTime 设置为 不安全共享当前时间。
如果 entry的 on response available 为null,则将 entry的 response 设置为 response;否则,调用 entry的 on response available 并传入 response。
如果给定 processResponse ,则调用 processResponse 使用 response。
让 commit 成为以下步骤,给定一个 Document
document:
如果 options的 文档 是 null,则将 options的 文档就绪时 设置为 commit。否则,调用 commit 给定 options的 文档。
The fetch and process the linked resource steps
for this type of linked resource,
given a link 元素
el,是:
Update the source set for el.
让 options 成为 从元素创建链接选项 from el.
如果 destination 为 null,则返回。
将 options的 destination 设置为 destination。
privacy-policy"The privacy-policy
关键字可用于
link、 a和 area 元素。该关键字创建一个
超链接。
The privacy-policy
关键字表示引用的文档包含关于适用于当前文档的数据收集和使用实践的信息,如 Additional Link Relation
Types中更详细描述的那样。引用的文档可以是独立的隐私政策,或者是某些更通用文档的特定部分。 [RFC6903]
search"The search 关键字可用于 link、
a、 area和 form 元素。该关键字创建一个
超链接。
The search
关键字表示引用的文档提供了一个专门用于搜索该文档及其相关资源的接口。
OpenSearch 描述文档可与 link 元素和 search 链接类型一起使用,以使用户代理能够自动发现搜索接口。
[OPENSEARCH]
stylesheet"
The stylesheet
关键字可用于 link
元素。此关键字创建一个 外部资源链接
,它有助于样式处理模型。此关键字是
body-ok。
指定的资源是一个 CSS 样式表 , 它描述了如何呈现文档。
仅支持一个引擎。
如果 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
样式表。
此类链接 获取和处理 的适当时机是:
When the href attribute
of the link
element of an 外部资源链接
的 browsing-context
connected is changed.
When the disabled attribute
of the
link element of an
external resource
link that is already
browsing-context
connected is set, changed, or removed.
When the crossorigin
attribute of the
link element of an
external resource
link that is already browsing-context connected is set, changed, or
removed.
When the type attribute
of the link
element of an external
resource link that is already browsing-context
connected is set or changed to a value that does not or no longer matches the Content-Type
元数据 不匹配时。
When the type attribute
of the link
element of an external
resource link that is already browsing-context
connected, but was previously not obtained due to the type
属性被移除或更改时,由于之前指定了不受支持的类型,导致未获取。
When the external resource link that is already 浏览上下文连接 changes from being 替代样式表 变为非替代样式表或反之时。
怪癖:如果文档已设置为 怪癖模式,
具有与外部资源的
相同来源 as the URL of the external resource,
and the 内容类型元数据 不是支持的样式表类型,
则用户代理必须将其视为 text/css。
此类链接资源的 链接资源获取设置步骤 ,给定一个
link 元素
el 和 请求
request,如下:
请参见 issue #968 ,了解使用CSSOM 获取CSS样式表 算法代替 默认获取和处理链接资源 算法的计划。
与此同时,任何 关键子资源 请求 应将其 渲染阻塞 设置为
link 元素当前是否
渲染阻塞。
要 处理此类型的链接资源
,
给定一个 link 元素
el,
布尔值 success, 响应 response,
和 字节序列
bodyBytes:
如果 el 不再创建一个贡献于样式处理模型的 外部资源链接 ,或者自从该资源被 获取以来,它变得适合再次 获取 ,那么:
如果 success 为true,那么:
创建一个CSS样式表 ,具有以下属性:
response的 URL列表[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同源,则设置;否则不设置。
null
保持默认值。
未初始化。
这似乎不对。大概我们应该使用 bodyBytes? 跟踪于 issue #2997。
CSS 环境编码 的结果是运行以下步骤的结果: [CSSSYNTAX]
如果 el 有一个 charset
属性,从该属性的值中
获取编码
。如果成功,返回结果编码。 [ENCODING]
如果 el 贡献了一个脚本阻塞样式表,则:
解除 on el的渲染阻塞。
此类链接资源的 处理链接头 步骤是不做任何事情。
tag"The tag 关键字可以与 a 和
area 元素一起使用。这个关键字创建一个 超链接。
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 >
terms-of-service"The terms-of-service
关键字可以与
link、 a和 area 元素一起使用。这个关键字创建一个
超链接。
The terms-of-service
关键字表示引用的文档包含关于当前文档提供者与希望使用当前文档的用户之间的协议的信息,如
Additional
Link Relation Types中更详细描述的那样。 [RFC6903]
某些文档是文档序列的一部分。
文档序列是指每个文档可以有一个 前一个兄弟文档 和一个 下一个兄弟文档。没有前一个兄弟文档的文档是其序列的起点,没有下一个兄弟文档的文档是其序列的终点。
一个文档可以属于多个序列。
next"The next 关键字可以与
link、
a、 area和 form 元素一起使用。这个关键字创建一个
超链接。
The next
关键字表示文档是一个序列的一部分,并且链接指向序列中下一个逻辑文档。
当 next 关键字与 link
元素一起使用时,用户代理应该处理这些链接,就像它们使用 dns-prefetch、 preconnect或
prefetch
关键字一样。用户代理希望使用哪个关键字取决于实现;例如,用户代理可能希望在节省数据、电池电量或处理能力时使用成本较低的 preconnect
处理模型,或者可能希望根据对类似场景中过去用户行为的启发式分析来选择一个关键字。
prev"The prev 关键字可以与
link、
a、 area和 form 元素一起使用。这个关键字创建一个
超链接。
The prev
关键字表示文档是一个序列的一部分,并且链接指向序列中上一个逻辑文档。
同义词:出于历史原因,用户代理还必须将关键字"previous"视为 prev 关键字。
预定义链接类型集的扩展 可以在 现有rel值的microformats页面上注册。 [MFREL]
任何人都可以随时编辑 现有rel值的microformats页面 以添加类型。扩展类型必须指定以下信息:
实际定义的值。该值不应与任何其他定义的值混淆相似(例如,仅在大小写上有所不同)。
如果该值包含U+003A冒号字符(:),则它还必须是一个 绝对URL。
link以下之一:
link 元素上指定关键字。
link
元素上指定关键字;它创建一个
超链接。
link
元素上指定关键字;它创建一个
外部资源链接。
a 和 area以下之一:
a 和 area 元素上指定关键字。a 和 area 元素上指定关键字;它创建一个
超链接。
a 和 area 元素上指定关键字;它创建一个 外部资源链接。a 和 area 元素上指定关键字;它 注释 由元素创建的其他 超链接
。form以下之一:
form 元素上指定关键字。
form
元素上指定关键字;它创建一个
超链接。
form
元素上指定关键字;它创建一个
外部资源链接。
form 元素上指定关键字;它 注释 由元素创建的其他 超链接 。关键字含义的简短非规范性描述。
更详细描述关键字语义和要求的链接。它可以是wiki上的另一页,也可以是链接到外部页面。
具有完全相同处理要求的其他关键字值列表。作者不应使用定义为同义词的值,它们仅用于允许用户代理支持旧版内容。任何人都可以删除未实际使用的同义词;仅那些需要与旧版内容兼容处理的名称应以这种方式注册。
以下之一:
如果发现关键字与现 有值冗余,则应将其移除并列为现有值的同义词。
如果关键字在一个月或更长时间内未使用或未指定,则可以从注册表中删除。
如果添加的关键字处于建议状态并发现与现有值冗余,则应将其移除并列为现有值的同义词。如果添加的关键字处于建议状态并发现有害,则应将其状态更改为停止使用。
任何人都可以随时更改状态,但应仅根据上述定义进行。
一致性检查器必须使用 现有rel值的microformats页面 上提供的信息来确定值是否被允许:本规范中定义的或标记为"建议"或"批准"的值在用于其描述的元素时必须被接受,而标记为"停止使用"或未在本规范或上述页面上列出的值必须被拒绝为无效。一致性检查器可以缓存此信息(例如,为了性能原因或避免使用不可靠的网络连接)。
当作者使用本规范或wiki页面未定义的新类型时,一致性检查器应提议将该值添加到wiki中,详情如上所述,状态为"建议"。
在 现有rel值的microformats页面
中以"建议"或"批准"状态定义的扩展类型,可以按照"对...的影响"字段所述的方式与
rel 属性一起用于 link、
a和 area
元素。 [MFREL]
ins
element所有当前引擎支持。
cite —
链接到引用的来源或有关编辑的更多信息
datetime —
更改的日期和(可选)时间
cite、 datetime。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 >
del
element所有当前引擎支持。
cite —
链接到引用的来源或有关编辑的更多信息
datetime —
更改的日期和(可选)时间
cite、 datetime。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 >
ins 和 del
元素的公共属性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 ins 和
del
元素必须实现
HTMLModElement
接口:
支持所有当前的引擎。
[Exposed =Window ]
interface HTMLModElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions , ReflectURL ] attribute USVString cite ;
[CEReactions , Reflect ] attribute DOMString dateTime ;
};
本节为非规范性内容。
由于 ins 和 del 元素不影响 段落划分, 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
元素中,甚至可以使一个段落的结尾、整个第二段和第三段的开始被同一个
ins 或 del 元素覆盖(尽管这非常混乱,并不被认为是好的做法):
< section >
This is the first paragraph. < ins > This sentence was
inserted.
< p > This second paragraph was inserted.</ p >
This sentence was inserted too.</ ins > This is the
third paragraph in this example.
<!-- (don't do this) -->
</ section >
然而,由于 隐含段落 的定义方式,无法使用同一个
ins 或 del
元素来标记一个段落的结尾和下一个段落的开始。你需要使用一个(或两个) p
元素和两个 ins 或
del 元素,例如:
< section >
< p > This is the first paragraph. < del > This sentence was
deleted.</ del ></ p >
< p >< del > This sentence was deleted too.</ del > That
sentence needed a separate < del> element.</ p >
</ section >
部分因为上述的混乱,强烈建议作者始终使用 p
element, instead of having ins 或
del elements that cross implied paragraphs
boundaries.
本节为非规范性内容。
The content models of the ol 和
ul 元素的内容模型不允许
ins 和 del 元素作为子元素。列表总是表示所有项目,包括那些本应标记为已删除的项目。
要指示某个项目已插入或删除,可以将 ins 或 del
元素包裹在 li 元素的内容周围。要指示某个项目已被另一个替换,可以在单个
li 元素中包含一个或多个
del 元素,后跟一个或多个 ins 元素。
在以下示例中,一个最初为空的列表随着时间的推移添加和删除了项目。示例中加重显示的部分显示了列表的“当前”状态。列表项编号没有考虑编辑。
< h1 > Stop-ship bugs</ h1 >
< ol >
< li >< ins datetime = "2008-02-12T15:20Z" > Bug 225:
Rain detector doesn't work in snow</ ins ></ li >
< li >< del datetime = "2008-03-01T20:22Z" >< ins datetime = "2008-02-14T12:02Z" > Bug 228:
Water buffer overflows in April</ ins ></ del ></ li >
< li >< ins datetime = "2008-02-16T13:50Z" > Bug 230:
Water heater doesn't use renewable fuels</ ins ></ li >
< li >< del datetime = "2008-02-20T21:15Z" >< ins datetime = "2008-02-16T14:25Z" > Bug 232:
Carbon dioxide emissions detected after startup</ ins ></ del ></ li >
</ ol >
在以下示例中,最初只有水果的列表被替换为只有颜色的列表。
< h1 > List of < del > fruits</ del >< ins > colors</ ins ></ h1 >
< ul >
< li >< del > Lime</ del >< ins > Green</ ins ></ li >
< li >< del > Apple</ del ></ li >
< li > Orange</ li >
< li >< del > Pear</ del ></ li >
< li >< ins > Teal</ ins ></ li >
< li >< del > Lemon</ del >< ins > Yellow</ ins ></ li >
< li > Olive</ li >
< li >< ins > Purple</ ins ></ li >
</ ul >
本节为非规范性内容。
表格模型中的元素有复杂的内容模型要求,不允许 ins 和
del 元素,因此指示对表格的编辑可能会很困难。
要指示整行或整列已被添加或删除,可以将该行或列中每个单元格的全部内容包裹在 ins 或 del
元素中。
这里,一个表格的行被添加了:
< table >
< thead >
< tr > < th > Game name < th > Game publisher < th > Verdict
< tbody >
< tr > < td > Diablo 2 < td > Blizzard < td > 8/10
< tr > < td > Portal < td > Valve < td > 10/10
< tr > < td > < ins > Portal 2</ ins > < td > < ins > Valve</ ins > < td > < ins > 10/10</ ins >
</ table >
这里,一列被删除了(删除时间和解释原因的页面链接也一并给出):
< table >
< thead >
< tr > < th > Game name < th > Game publisher < th > < del cite = "/edits/r192" datetime = "2011-05-02 14:23Z" > Verdict</ del >
< tbody >
< tr > < td > Diablo 2 < td > Blizzard < td > < del cite = "/edits/r192" datetime = "2011-05-02 14:23Z" > 8/10</ del >
< tr > < td > Portal < td > Valve < td > < del cite = "/edits/r192" datetime = "2011-05-02 14:23Z" > 10/10</ del >
< tr > < td > Portal 2 < td > Valve < td > < del cite = "/edits/r192" datetime = "2011-05-02 14:23Z" > 10/10</ del >
</ table >
一般来说,没有好的方法可以指示更复杂的编辑(例如,删除一个单元格,移动所有后续单元格向上或向左)。
picture 元素
支持所有当前引擎。
支持所有当前引擎。
source
元素,后跟一个 img
element,
optionally intermixed with script-supporting elements.[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 元素与类似的
video 和 audio 元素有些不同。虽然它们都包含 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.
source 元素支持所有当前引擎。
支持所有当前引擎。
picture 元素的子元素,在
img 元素之前。
track 元素之前。
type — 嵌入资源的类型
media —
适用的媒体
src (在 audio 或 video中)
— 资源地址
srcset (在 picture中) —
在不同情况下使用的图像,例如高分辨率显示器,小显示器等。
sizes (在 picture中) — 不同页面布局的图像大小
width (在 picture中) — 水平尺寸
height (在 picture中) — 垂直尺寸
[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 元素:
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 元素可以使用
width 和 height 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 属性时,必须满足以下至少一个条件:
指定了 media 属性,并且在
去除前导和尾随 ASCII 空白后, is not the empty
string and is not an ASCII
case-insensitive match for the string "all".
指定了 type 属性。
The src 属性不得存在。
source
元素的父元素是 media 元素The src
属性提供 URL 的 媒体资源。该值必须是 有效的非空 URL(可能被空格包围)。该属性必须存在。
The type 属性指定 媒体资源的类型,以帮助用户代理在获取之前确定是否可以播放此 媒体资源 。某些 MIME
类型定义的 codecs 参数可能需要指定资源的确切编码方式。
[RFC6381]
Dynamically modifying a source 元素的 src 或 type 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
属性的示例。
< source src = 'video.mp4' type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
< source src = 'video.mp4' type = 'video/mp4; codecs="avc1.58A01E, mp4a.40.2"' >
< source src = 'video.mp4' type = 'video/mp4; codecs="avc1.4D401E, mp4a.40.2"' >
< source src = 'video.mp4' type = 'video/mp4; codecs="avc1.64001E, mp4a.40.2"' >
< source src = 'video.mp4' type = 'video/mp4; codecs="mp4v.20.8, mp4a.40.2"' >
< source src = 'video.mp4' type = 'video/mp4; codecs="mp4v.20.240, mp4a.40.2"' >
< source src = 'video.3gp' type = 'video/3gpp; codecs="mp4v.20.8, samr"' >
< source src = 'video.ogv' type = 'video/ogg; codecs="theora, vorbis"' >
< source src = 'video.ogv' type = 'video/ogg; codecs="theora, speex"' >
< source src = 'audio.ogg' type = 'audio/ogg; codecs=vorbis' >
< source src = 'audio.spx' type = 'audio/ogg; codecs=speex' >
< source src = 'audio.oga' type = 'audio/ogg; codecs=flac' >
< source src = 'video.ogv' type = 'video/ogg; codecs="dirac, vorbis"' >
The source HTML element insertion
steps, given
insertedNode, are:
令 parent 为 insertedNode的 父节点.
如果 parent 是一个 媒体元素
,且该元素没有 src 属性,并且其 networkState 的值为
NETWORK_EMPTY,则调用该
媒体元素的 资源选择算法.
如果 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 元素移动步骤,
给定 movedNode、
isSubtreeRoot和 oldAncestor ,如下:
如果 isSubtreeRoot 为 true 且 oldAncestor 是 picture
元素,则 遍历 oldAncestor of
oldAncestor's 所有子节点:如果
child
是 img element, then
count this as a relevant
mutation for child.
The source HTML 元素移除步骤,
给定
removedNode、 isSubtreeRoot和 oldAncestor ,如下:
如果 isSubtreeRoot 为 true 且 oldAncestor 是 picture
元素,则 遍历 oldAncestor of
oldAncestor's 所有子节点:如果
child
是 img 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 >
img
element所有当前引擎支持。
所有当前引擎支持。
Support in all current engines.
Support in all current engines.
Support in all current engines.
Support in all current engines.
Support in all current engines.
usemap 或
controls 属性: 交互式内容。
picture
元素的子元素,在所有 source
元素之后。alt —
图像不可用时的替代文本
src — 资源地址
srcset —
不同情况下使用的图像,例如高分辨率显示器、小显示器等。
sizes —
不同页面布局的图像大小
crossorigin —
元素如何处理跨域请求
usemap — 要使用的
图像映射 的名称
ismap —
图像是否为服务器端图像映射
controls — 显示用户代理控件
width —
水平尺寸
height —
垂直尺寸
referrerpolicy
— 元素发起的 referrer policy 的 fetches initiated by the element
decoding —
处理此图像进行展示时使用的解码提示
loading — 用于确定加载延迟
fetchpriority —
为元素发起的 请求优先级 设置 fetches initiated by the element
alt
属性: 给作者; 给实现者。[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 元素有一个 维度属性源,初始设置为元素本身。
支持所有当前引擎。
支持所有当前引擎。
由 src
和 srcset 属性以及任何先前兄弟
source
元素的 srcset
属性(如果父元素是 picture
元素)给出的图像是嵌入的内容; alt
属性的值为那些无法处理图像或禁用图像加载的用户提供等效内容(即它是 img 元素的 回退内容)。
The requirements on the alt
属性值的要求在
一个单独的章节中描述。
At least one of the src 和 srcset 属性中至少要有一个存在。
如果存在 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 属性和
src 属性(如果未使用 宽度描述符 )会将 图片资源
贡献到 资源集合 中(如果没有选中任何 source 元素)。
如果 srcset 属性存在,并且有任何 图片候选字符串 使用了 宽度描述符,那么 sizes
属性也必须存在。
如果 srcset attribute is
not specified, and the
loading 属性处于 懒加载(Lazy) 状态,则可以将 sizes 属性指定为值 "auto"(ASCII 大小写不敏感)。 sizes 属性是一个 sizes 属性,它会将 资源尺寸 贡献到 资源集合
中(如果没有选中任何
source 元素)。
An img 元素 允许自动大小 如果:
loading 属性处于 Lazy 状态,并且
sizes
属性的值为“auto”(ASCII大小写不敏感),或以“auto,”(ASCII大小写不敏感)开头。支持所有当前引擎。
The crossorigin
属性是一个 CORS设置属性。其目的是允许具有跨源访问权限的第三方网站的图像与 canvas一起使用。
The referrerpolicy 属性是一个 引用策略属性。其目的是设置在 引用策略
时使用的 获取 图像。 [REFERRERPOLICY]
The decoding
属性表示 解码 此图像的首选方法。如果存在,该属性必须是一个 图像解码提示。此属性的 缺省值 和 无效值 都是 Auto 状态。
HTMLImageElement/fetchPriority
The fetchpriority 属性是一个 获取优先级属性。其目的是设置在 请求优先级 时使用的
获取 图像。
The loading 属性是一个 延迟加载属性。其目的是指示视口外图像的加载策略。
< img src = "1.jpeg" alt = "1" >
< img src = "2.jpeg" loading = eager alt = "2" >
< img src = "3.jpeg" loading = lazy alt = "3" >
< div id = very-large ></ div > <!-- Everything after this div is below the viewport -->
< img src = "4.jpeg" alt = "4" >
< img src = "5.jpeg" loading = lazy alt = "5" >
在上述示例中,图像按如下方式加载:
1.jpeg, 2.jpeg,
4.jpeg
这些图像急切加载,并延迟窗口的加载事件。
3.jpeg由于位于视口中,该图像在布局已知时加载,但不会延迟窗口的加载事件。
5.jpeg该图像仅在滚动到视口中时加载,不会延迟窗口的加载事件。
建议开发者在延迟加载的图像上通过 width 和 height
属性指定首选的纵横比,即使CSS设置了图像的宽度和高度属性,以防止页面布局在图像加载后发生变化。
The img HTML element insertion
steps, given insertedNode,
are:
如果 insertedNode的父元素是 picture element, then,
count this as
a relevant mutation for
insertedNode.
The img HTML 元素移动步骤,
给定 movedNode、
isSubtreeRoot和 oldAncestor ,如下:
如果 isSubtreeRoot 为 true 且 oldAncestor 是 picture
element, then count this as a relevant
mutation for
movedNode.
The img HTML 元素移除步骤,
给定 removedNode、
oldAncestor和 isSubtreeRoot ,如下:
如果 isSubtreeRoot 为 true 且 oldAncestor 是 picture
element, then count this as a relevant
mutation for
removedNode.
不应将 img 元素用作布局工具。特别是,不应使用 img
元素来显示透明图片,因为此类图片很少传达有意义的信息,也很少给文档增添任何有用的东西。
What an img 元素所表示的内容取决于 src
属性和 alt
属性。
src 属性已设置,而 alt 属性设置为空字符串该图片可能是装饰性的或补充内容,和文档中的其他信息重复。
如果图片是 可用的 且用户代理被配置为显示该图片,则该元素 表示 元素的图片数据。
否则,该元素 表示 无内容,可能会完全从渲染中省略。用户代理可能会通知用户有图片存在但已被省略。
src 属性已设置,而 alt 属性设置为非空值该图片是内容的关键部分; alt
属性提供了图片的文本等效或替代。
src 属性已设置,而 alt 属性未设置该图片可能是内容的关键部分,但没有可用的文本等效物。
在符合规范的文档中,缺少 alt
属性表示图片是内容的关键部分,但在生成图片时没有可用的文本替代。
如果图片是 可用的 且用户代理被配置为显示该图片,则该元素 表示 元素的图片数据。
如果图片有一个 src 属性,其值为空字符串,则该元素 表示
无内容。
否则,用户代理应显示某种指示,表明有一张图片未被渲染,并且如果用户请求,或用户代理配置为如此,或在响应导航时需要提供上下文信息,则提供图片的标题信息,按如下方式:
如果图片有一个 title 属性,其值非空字符串,则返回该属性的值。
如果图片是 figure
元素的后代,该元素有一个子
figcaption
元素,并且忽略 figcaption
元素及其后代,如果 figure
元素没有其他
流内容 后代,除了 元素间的空白 和 img 元素,则返回第一个这样的 figcaption
元素的内容。
返回无内容。(没有标题信息。)
src 属性未设置,而 alt 属性设置为空字符串或 alt
属性完全未设置该元素 表示 无内容。
The alt 属性不代表建议信息。
用户代理不得以与 alt 属性
内容相同的方式展示 title
属性的内容。
用户代理可以始终为用户提供显示任何图片或阻止显示任何图片的选项。用户代理也可以应用启发式方法来帮助用户在无法看到图片时利用图片,例如,由于视觉障碍或使用没有图形能力的文本终端。这些启发式方法可以包括,例如,对图片中找到的文本进行光学字符识别(OCR)。
虽然鼓励用户代理修复缺失的 alt
属性的情况,但作者不应依赖于这种行为。有关提供文本作为图片替代的 要求 详细描述如下。
The img 元素的 img
元素的内容(如果有的话)在渲染时将被忽略。
The usemap
属性(如果存在)可以指示该图片有一个相关的
图片地图。
The ismap 属性,当用于一个是
a 元素的
后代元素上,并且该 href
属性存在时,表示该元素提供访问服务器端图片地图的功能。这影响了在相应的 a
元素上的事件处理。
The ismap 属性是一个
布尔属性。
该属性不得在没有具有 a 元素且该元素
上没有 href 属性的元素上指定。
使用 usemap 和 ismap 属性可能会导致在与 source
元素及在 media
属性指定的 picture
元素一起使用时,行为可能会令人困惑。
The controls
属性是 布尔属性。如果
存在,则表示用户代理可以
向用户展示一个用户界面。没有 alt 属性,
或其
alt 属性值为空字符串的元素,
不得指定该属性。
如果存在 controls 属性,用户代理可
能会为图片提供控件(例如,提供全屏查看的控件)。具体提供哪些控件是 实现自定义的,并且可以依赖于平台或用户的偏好。
如果用户代理通过在 img
元素上显示控件来展示用户界面,则当用户代理在与该界面交互时,应该屏蔽任何用户交互事件。
Issue #12318 跟踪 图像控件与动画图片之间的交互。在该问题解决之前,用户代理不应为图片提供动画控件。
在所有当前引擎中支持。
The crossOrigin IDL 属性必须
反映 the crossorigin 内容属性,
限制为已知值。
HTMLImageElement/referrerPolicy
在所有当前引擎中支持。
The referrerPolicy IDL 属性必须
反映 the referrerpolicy
内容属性, 限制为已知值。
在所有当前引擎中支持。
在所有当前引擎中支持。
The fetchPriority IDL 属性
必须 反映 the fetchpriority 内容属性,
限制为已知值。
image.width [ = value ]
在所有当前引擎中都受支持。
image.height [ = value ]
在所有当前引擎中都受支持。
这些属性返回图像的实际渲染尺寸,如果尺寸未知则返回 0。
可以设置这些属性,以改变相应的内容属性。
image.naturalWidth
在所有当前引擎中都受支持。
image.naturalHeight
HTMLImageElement/naturalHeight
在所有当前引擎中都受支持。
这些属性返回图像的 密度校正后的自然宽度和高度 , 如果图像未 可用,则返回 0。
image.complete
在所有当前引擎中都受支持。
如果图像已经完全下载,或者没有指定图像,则返回 true;否则返回 false。
image.currentSrc
在所有当前引擎中都受支持。
返回图像的 绝对 URL。
image.decode()
在所有当前引擎中都受支持。
该方法使用户代理对图像进行 解码 ,以 并行方式进行解码, 返回一个在解码完成时会被兑现的 Promise。
如果图像无法解码,Promise 将被拒绝,并返回一个 "EncodingError"
DOMException
。
image = new Image([ width [, height ] ])
在所有当前引擎中都受支持。
To determine the dimensions of an img 元素
image:
如果 image 是 可用的 ,并且 具有 密度校正后的自然宽度和 高度,则返回其 密度校正后的自然宽度和 高度,以 CSS 像素为单位。
返回宽度 0 和高度 0。
The naturalWidth 和 naturalHeight getter
步骤为:
如果该图像不是 可用的,则 返回 0。
返回该图像的 密度校正后的自然宽度和 高度的相应分量,以 CSS 像素为单位。 [CSS]
由于图像的 密度校正后的自然宽度和高度
会考虑其元数据中指定的任何方向, naturalWidth 和 naturalHeight 反映的是
应用正确确定图像方向所需的任何
旋转之后的尺寸,而不管
'image-orientation' 属性的值如何。
The complete getter 步骤为:
The decode()
方法在调用时,必须执行以下步骤:
令 promise 为一个新的 promise。
排入一个微任务 以执行 以下步骤:
这样做是因为 更新 图像数据 也发生在一个微任务中。因此,为了使如下代码
img. src = "stars.jpg" ;
img. decode();
正确解码 stars.jpg,我们需要将任何处理延迟一个
微任务。
如果以下任一项为真:
then reject promise with an "EncodingError"
DOMException.
否则, 并行地等待以下情况之一 发生,并 执行相应操作:
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 契约的重要部分,并且如果可能就不应 被破坏。(通常,这只会在需要逐出已解码图像数据的低内存情况下, 或者当图像过大而无法在这段时间内保持解码 形式时被违反。)
动画图像只有在其所有帧都已加载后才会变为 完全 可用 。 因此,即使某个实现可以在此之前解码 第一帧,上述步骤也不会这样做,而是会等待直到所有 帧都可用。
返回 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)。当被调用时,遗留工厂函数必须执行以下步骤:
一张图片在不同的上下文中可能需要不同的替代文本。
在以下每种情况下,使用的是相同的图片,但 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 >
本节为非规范性内容。
要在 HTML 中嵌入图像,当只有一个图像资源时,使用 img
元素及其 src 属性。
< h2 > From today's featured article</ h2 >
< img src = "/uploads/100-marie-lloyd.jpg" alt = "" width = "100" height = "150" >
< p >< b >< a href = "/wiki/Marie_Lloyd" > Marie Lloyd</ a ></ b > (1870–1922)
was an English < a href = "/wiki/Music_hall" > music hall</ a > singer, ...
然而,有许多情况下,作者可能希望使用多个图像资源供用户代理选择:
不同的用户可能具有不同的环境特征:
用户的物理屏幕尺寸可能彼此不同。
一部手机的屏幕对角线可能为4英寸,而一台笔记本电脑的屏幕对角线可能为14英寸。
这仅在图像的呈现大小依赖于 视口 大小时相关。
用户的屏幕像素密度可能彼此不同。
无论物理屏幕尺寸如何,一部手机的屏幕每英寸的物理像素数量可能是另一部手机的三倍。
用户的缩放级别可能彼此不同,或者单个用户的缩放级别可能随着时间而变化。
用户可能会放大某张图像,以便获得更详细的视图。
缩放级别和屏幕像素密度(前一点)都可以影响每 CSS像素的物理屏幕像素数量。这个比例通常称为 设备像素比。
用户的屏幕方向可能彼此不同,或者单个用户的屏幕方向可能随着时间而变化。
平板电脑可以竖着或旋转90度,因此屏幕可以是“竖屏”或“横屏”。
用户的网络速度、网络延迟和带宽成本可能彼此不同,或者单个用户的网络条件可能随时间变化。
用户可能在工作时使用快速、低延迟且成本固定的连接,在家时使用慢速、低延迟且成本固定的连接,在其他地方使用可变速度、高延迟和可变成本的连接。
Authors might want to show the same image content but with different rendered size depending on, usually, the width of the viewport. This is usually referred to as 视口基于选择。
一个网页可能在顶部有一个横跨整个 视口 宽度的横幅。在这种情况下,图像的呈现大小取决于屏幕的物理大小(假设浏览器窗口最大化)。
另一个网页可能将图像分列,对于屏幕物理尺寸较小的设备使用一列,对于屏幕物理尺寸中等的设备使用两列,对于屏幕物理尺寸较大的设备使用三列,每种情况中的图像呈现大小会有所变化以填满 视口。在这种情况下,即使屏幕较小,一列布局中的图像也可能比两列布局中的图像要 大 。
作者可能希望根据图像的呈现大小显示不同的图像内容。这通常称为 艺术方向。
当网页在大物理尺寸的屏幕上查看时(假设浏览器窗口最大化),作者可能希望包括一些围绕图像关键部分的较少相关部分。当同一网页在小物理尺寸的屏幕上查看时,作者可能希望仅显示图像的关键部分。
作者可能希望使用不同的图像格式显示相同的图像内容,具体取决于用户代理支持哪些图像格式。这通常称为 图像格式基于选择。
一个网页可能有一些图像使用JPEG、WebP和JPEG XR图像格式,其中后两种格式具有比JPEG更好的压缩能力。由于不同的用户代理支持不同的图像格式,有些格式提供更好的压缩比,作者希望将更好的格式提供给支持这些格式的用户代理,同时为不支持这些格式的用户代理提供JPEG备选格式。
上述情况并不是相互排斥的。例如,将不同的资源结合使用来应对不同的 设备像素比 和不同的 艺术方向是合理的。
虽然可以通过脚本解决这些问题,但这样做会引入一些其他问题:
一些用户代理会在脚本有机会运行之前,主动下载HTML标记中指定的图像,以便更快地完成网页加载。如果脚本更改要下载的图像,用户代理可能会开始两个独立的下载,这可能会导致更糟糕的页面加载性能。
如果作者避免在HTML标记中指定任何图像,而是通过脚本实例化单个下载,这样可以避免上述的双重下载问题,但对于禁用脚本的用户,图像将完全不会下载,同时激进的图像下载优化也将被禁用。
考虑到这些问题,本规范引入了一些功能,以声明性的方式解决上述问题。
The src 和 srcset
属性可以用于 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
描述符指定的那样。
The srcset 和 sizes 属性可以使用 w
描述符来提供多种仅在尺寸上有所不同的图像(较小的图像是较大图像的缩小版)。
在此示例中,一个横幅图像占据整个 视口 的宽度(使用适当的 CSS)。
< h1 >< img sizes = "100vw" srcset = "wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
src = "wolf-400.jpg" alt = "The rad wolf" ></ h1 >
用户代理将根据指定的
w 描述符和 sizes
属性中指定的渲染尺寸来计算每个图像的实际像素密度。然后,它可以根据用户屏幕的像素密度、缩放级别以及其他可能的因素(如用户的网络条件)选择任何给定的资源。
如果用户的屏幕宽度为 320 CSS 像素 ,这相当于指定
wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x。另一方面,如果用户的屏幕宽度为 1200 CSS 像素
,这相当于指定 wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x。通过使用
w 描述符和 sizes
属性,用户代理可以选择正确的图像源进行下载,无论用户设备的大小如何。
为了向后兼容,在 img 元素的
src attribute. In new user agents,
the src attribute is ignored when
the srcset 属性使用
w descriptors.
在此示例中,网页有三种布局,取决于
视口的宽度。窄布局有一列图像(每个图像的宽度约为 100%),中间布局有两列图像(每个图像的宽度约为
50%),最宽布局有三列图像,并有一些页面边距(每个图像的宽度约为 33%)。在 视口 宽度分别为
30em 和 50em 时,会在这些布局之间切换。
< img sizes = "(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
srcset = "swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
src = "swing-400.jpg" alt = "Kettlebell Swing" >
The sizes 属性设置了在
30em 和 50em处的布局断点,并声明在这些断点之间的图像尺寸为 100vw、 50vw或
calc(33vw - 100px)。这些尺寸不一定要与 CSS 中指定的实际图像宽度完全匹配。
用户代理将从 sizes
属性中选择一个宽度,使用第一个返回值为真的 <media-condition> (括号中的部分),或者如果所有条件都评估为假,则使用最后一个值(calc(33vw -
100px))。
例如,如果 视口 宽度为 29em,则 (max-width: 30em)
评估为真,使用 100vw ,因此图像尺寸(用于资源选择)为 29em。如果 视口 宽度为 32em,则
(max-width: 30em) 评估为假,但
(max-width: 50em) 评估为真,使用 50vw ,因此图像尺寸(用于资源选择)为 16em (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 : 300 px ; height : 300 px }
@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 元素。
本节为非规范性内容。
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 : 300 px ; height : 150 px ; }
@ media ( max-width : 600px ) { # a { width : 100 px ; height : 100 px ; } }
</ 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
source 和
img 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 >
source、
img和
link
元素的共同属性
A srcset 属性 是一个在本节中定义了要求的属性。
如果存在,其值必须由一个或多个 图像候选字符串组成,每个字符串之间用 U+002C 逗号字符 (,) 分隔。如果一个 图像候选字符串 不包含描述符且 URL 后面没有 ASCII 空白字符 ,则下一个 图像候选字符串(如果有的话)必须以一个或多个 ASCII 空白字符开头。
一个 图像候选字符串 由以下组件组成,按顺序排列,并有以下列表中描述的进一步限制:
零个或多个 ASCII 空白字符。
一个 有效的非空 URL ,不能以 U+002C 逗号字符 (,) 开头或结尾,引用一个非交互式的、可选动画的图像资源,该资源既不是分页的也不是脚本化的。
零个或多个 ASCII 空白字符。
零个或一个以下项:
一个 宽度描述符,由以下部分组成: ASCII 空白字符,一个 有效的非负整数 ,表示一个大于零的数字,代表 宽度描述符值,以及一个 U+0077 拉丁小写字母 W 字符。
一个 像素密度描述符,由以下部分组成: ASCII 空白字符,一个 有效的浮点数 ,表示一个大于零的数字,代表 像素密度描述符值,以及一个 U+0078 拉丁小写字母 X 字符。
零个或多个 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 属性 ,那么该元素的所有 图像候选字符串 必须指定 宽度描述符 。
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 。
此外,强烈建议使用 width 和
height 属性或使用
CSS
指定尺寸。如果未指定尺寸,图像可能会以 300x150 的尺寸呈现,因为 sizes="auto" implies contain-intrinsic-size: 300px
150px in 渲染部分.
The <source-size-value> 提供了图像的预期布局宽度。作者可以使用 <media-condition>指定不同环境下的不同宽度。
在 <source-size-value>中不允许使用百分比,以避免混淆其相对参照。可以使用 'vw' 单位来表示相对于 视口 宽度的尺寸。
一个 img 元素有一个 当前请求 和一个 待处理请求。 当前请求 初始设置为一个新的 图像请求。 待处理请求 初始设置为
null。
一个 图像请求 有一个 状态、一个 当前 URL和一个 图像数据。
当一个 img 元素的 当前请求 为 可用时,该 img 元素提供一个 绘图源 ,其宽度为图像的 密度校正自然宽度 (如果有),高度为图像的 密度校正自然高度
(如果有),外观为图像的自然外观。
每个 img 元素都有一个
最后选择的源,其初始值必须为 null。
每个 图像请求 都有一个 当前像素密度,其初始值必须为 1。
每个 图像请求 都有 首选密度校正尺寸,它要么是包含宽度和高度的结构,要么为 null。初始值必须为 null。
确定 密度校正后的自然宽度和高度 的方法如下,针对 img 元素 img:
如果 dimensions 不为null,则将 dimensions的宽度设为 dimensions的宽度除以 density,高度设为 dimensions的高度除以 density,然后返回 dimensions, and return dimensions.
令 intrinsicWidth、 intrinsicHeight和 intrinsicRatio 依次为 img的 固有宽度、固有高度和固有宽高比(如有)。
如果 intrinsicWidth 存在,则将 intrinsicWidth 设为 intrinsicWidth 除以 density。
如果 intrinsicHeight 存在,则将 intrinsicHeight 设为 intrinsicHeight 除以 density。
返回应用 默认尺寸算法 的结果, 传入 intrinsicWidth、 intrinsicHeight和 intrinsicRatio,并使用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 像素.
一个 源集 是一个有序的零个或多个 图像源 和一个 源大小。
一个 图像源 是一个 URL,并且可以选择地包含一个 像素密度描述符或一个 宽度描述符。
一个 源大小 是一个 <source-size-value>。当一个 源大小 具有相对于 视口的单位时,必须相对于 img 元素的 节点文档的
视口进行解释。其他单位的解释与媒体查询中相同。
[MQ]
本节中的算法的 解析错误 表示输入和要求之间的非致命性不匹配。鼓励用户代理以某种方式公开 解析错误。
在确定图像的类型及其是否为有效图像时,图像是否成功获取(例如,响应状态是否为 成功状态)必须被忽略。
这允许服务器返回带有错误响应的图像,并使其显示出来。
用户代理应该应用 图像嗅探规则 来确定图像的类型,并且图像的 关联内容类型头 给出 official type。如果这些规则没有应用,那么图像的类型必须是图像的 关联内容类型头给出的类型。
用户代理不得使用 img
元素支持非图像资源(例如,其 文档元素 为 HTML 元素的 XML
文件)。用户代理不得运行嵌入图像资源中的可执行代码(例如,脚本)。用户代理只能显示多页资源的第一页(例如,PDF 文件)。用户代理不得允许资源以交互方式工作,但应尊重资源中的任何动画。
本规范没有指定支持哪些图像类型。
默认情况下,图像会立即获取。用户代理可以为用户提供按需获取图像的选项(例如,带宽受限的用户可能会使用此选项)。
在立即获取图像时,用户代理必须在每次创建元素或发生 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 元素的 当前请求的 状态 必须返回到 不可用。
The relevant mutations for an img element are as follows:
元素的 src
attribute is set to the same value as the previous value.
This must set the restart animation flag for the 更新图像数据 algorithm.
元素的 crossorigin
属性的状态发生变化。
元素的 referrerpolicy
属性的状态发生变化。
当 img 或 source HTML
元素插入步骤、
HTML
元素移除步骤和 HTML 元素移动步骤 时,将该突变计为 相关突变。
元素的父元素是 picture 元素,并且一个
source
元素作为前一个兄弟元素,其 srcset, sizes, media, type, width 或 height 属性被设置、改变或移除。
元素的 采用步骤 被执行。
如果元素 允许自动尺寸:元素开始或停止 被渲染,或其 具体对象尺寸 width changes. This must set the maybe omit events flag for the 更新图像数据 algorithm.
每个 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 ` 状态时使用该数据。
图像数据通常会被编码以减少文件大小。这意味着为了让用户代理将图像呈现到屏幕上,需要对数据进行解码。 解码 是将图像的媒体数据转换为适合屏幕呈现的位图形式的过程。请注意,这一过程相对于其他内容呈现过程可能较慢。因此,用户代理可以选择何时执行解码,以创建最佳的用户体验。
图像解码被称为同步解码如果它在完成之前阻止了其他内容的呈现。通常,这会使图像和其他内容同时原子性地呈现。然而,这种呈现会被解码所需的时间延迟。
图像解码被称为异步解码如果它不会阻止其他内容的呈现。这会使非图像内容的呈现更快。然而,直到解码完成之前,图像内容在屏幕上是缺失的。一旦解码完成,屏幕将更新为图像。
在同步和异步解码模式下,最终内容呈现到屏幕上所经过的时间相同。主要的区别在于用户代理是否在呈现最终内容之前呈现非图像内容。
为了帮助用户代理决定是否执行同步或异步解码,可以在 decoding 属性上设置在
img 元素上。 decoding 属性的可能值是以下 图像解码提示 关键字:
| 关键字 | 状态 | 描述 |
|---|---|---|
sync
|
同步 | 表示希望以同步方式 解码 图像,以便与其他内容原子性地呈现。 |
async
|
异步 | 表示希望以异步方式 解码 图像,以避免延迟其他内容的呈现。 |
auto
|
自动 | 表示对解码模式没有偏好(默认值)。 |
在 解码 图像时,用户代理应尊重 decoding
属性状态所指示的偏好。如果指示的状态是 自动,则用户代理可以自由选择任何解码行为。
也可以使用 decode()
方法来控制解码行为。由于 decode()
方法独立于负责内容呈现的过程进行 解码 ,因此不受 decoding 属性的影响。
此算法不能在运行 并行的步骤中调用。如果用户代理需要在运行 并行的步骤中调用此算法,则需要 排队 一个任务来实现。
当用户代理需要 更新图像数据 的 img 元素时,可能设置 重新启动动画
标志,可能设置 可能省略事件 标志,必须执行以下步骤:
继续 并行运行此算法。
等待直到元素的 节点文档 is fully active.
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.
排队一个微任务 以继续此算法。
如果用户代理无法支持图像,或其图像支持已被禁用,则 中止图像请求 为 当前请求 和 挂起请求,设置 当前请求的 状态 为 不可用,设置 挂起请求 为null,并返回。
让 selected source 为null, selected pixel density 为未定义。
如果元素不 使用
srcset 或 picture 并且它具有指定值不是空字符串的 src 属性,则将 selected
source 设置为元素的 src
属性的值,并将
selected
pixel density 设置为1.0。
将元素的 最后选择的源 设置为 selected source。
如果 selected source 不为null,则:
让 urlString 成为 编码-解析-序列化URL 的结果,给定 selected source,相对于元素的 节点文档。
如果 urlString 失败,则中止这组内部步骤。
让 key 成为一个包含 urlString, img
元素的 crossorigin
属性的模式的元组,并且,如果该模式不是 No
CORS,则是 节点文档的 来源。
如果 可用图像列表 中包含 key的条目,则:
为该条目设置 忽略更高级别缓存 标志。
Abort the image request for the 当前请求 和 挂起的请求.
将 挂起的请求 设为 null。
为展示准备 当前请求
for presentation ,作用于 img 元素。
Queue an element
task on the DOM
操作任务源
上,为 img
element and
the following steps:
终止 更新图像数据 算法。
如果在此实例之后为此 img
元素启动了该算法的另一个实例(即使它已中止且不再运行),则返回。
只有最后一个实例生效,以避免在例如依次设置 src、 srcset和 crossorigin
属性时出现多个请求。
让 selected source 和 selected pixel density 分别为 选择图像源的结果的URL和像素密度。
如果 selected source 为null,则:
让 urlString 成为 编码-解析-序列化URL 的结果,给定 selected source,相对于元素的 节点文档。
如果 urlString 失败,则:
如果 urlString 与 当前请求的 当前 URL 相同,并且 当前请求的 状态 为 部分可用:
Abort the image request for the 挂起请求.
如果 重启动画 is set, then queue an element task on the
DOM
manipulation task source given the img element to 重启动画。
返回。
如果 当前请求的 状态 为 不可用 或 损坏,则将 当前请求 设置为 image request。否则,将 挂起请求 设置为 image request。
让 request 成为 创建潜在的CORS请求 的结果,给定
urlString、"image",以及元素的 crossorigin
内容属性的当前状态。
如果元素 使用
srcset 或
picture,则将 request的 发起者
设置为"imageset"。
将 request的 引用策略 设置为元素的 referrerpolicy
属性的当前状态。
将 request的 优先级
设置为元素的 fetchpriority
属性的当前状态。
Let delay load event be true if the img的 懒加载属性 处于 Eager 状态,或
禁用脚本 用于 img, and
false otherwise.
If the will
lazy load element steps given the img return true:
开始观察懒加载元素的交叉点 用于
img 元素。
返回。
获取图像: 获取 request。从该算法返回,并作为获取的 处理响应 的一部分运行剩余步骤, 响应 response。
以这种方式获得的资源(如果有)是 image request的 图像数据。它可以是 CORS-相同来源 或
CORS-跨来源;这会影响图像与其他API的交互(例如,在
canvas上使用时)。
当 delay load event 为true时,获取图像必须 延迟元素的加载事件 of the element's node document until the task that is 排队 的任务在资源被获取后 网络任务源 上运行为止(定义如下)。
不幸的是,这可以用来对用户的本地网络执行一个简单的端口扫描(特别是在结合脚本时,尽管实际上不需要脚本来执行此攻击)。用户代理可能会实施比上述描述更严格的 跨来源 访问控制策略来减轻此攻击,但不幸的是,这些策略通常与现有的网络内容不兼容。
尽快跳转到以下列表中的第一个适用条目:
multipart/x-mixed-replace
下一个在图像被获取时由 网络任务源 that is 排队 的 任务 必须运行以下步骤:
如果 image request 是 挂起请求 ,并且至少一个体被完全解码,则 中止图像请求 为 当前请求,并 将挂起请求升级为当前请求。
否则,如果 image request 是 挂起请求 ,并且用户代理能够确定 image request的图像在某种致命的方式中损坏,以至于无法获取图像尺寸,则 中止图像请求 为 当前请求, 将挂起请求升级为当前请求,并将 当前请求的 状态 设置为 损坏。
否则,如果 image request 是 当前请求,其 状态 为 不可用,并且用户代理能够确定 image request的图像的宽度和高度,则将 当前请求的 状态 设置为 部分可用。
否则,如果 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:
下一个在图像被获取时由 网络任务源 that is 排队 的 任务 必须运行以下步骤:
如果用户代理能够确定 image request的图像的宽度和高度,并且 image request 是 挂起请求,则将 image request的 状态 设置为 部分可用。
否则,如果用户代理能够确定 image request的图像的宽度和高度,并且 image request 是 当前请求, 为展示准备 image
request
for
presentation 给定 img 元素,并将
image
request的
状态 设置为 部分可用。
否则,如果用户代理能够确定 image request的图像在某种致命的方式中损坏,以至于无法获取图像尺寸,并且 image request 是 挂起请求:
否则,如果用户代理能够确定 image request的图像在某种致命的方式中损坏,以至于无法获取图像尺寸,并且 image request 是 当前请求:
该 任务以及后续每个由 网络任务源 在获取图像期间 排入队列 的 任务 ,如果 image request 是 当前 请求,则必须适当地更新图像的呈现 (例如,如果图像是渐进式 JPEG,则每个数据包都可以提高图像的 分辨率)。
此外,一旦资源被获取,最后一个由 网络任务源 that is 排队 的 任务 必须额外运行这些步骤:
如果 image request 是 挂起请求,
中止图像请求
为 当前请求,
将挂起请求升级为当前请求,并
为展示准备 image
request
for
presentation ,给定 img 元素。
将 image request 设置为 完全可用 状态。
Add the image to the list of available images using the key key, with the 忽略更高层缓存 标志。
如果 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.
要 中止图像请求 对于一个 图像请求 或空的 image request ,意味着运行以下步骤:
要为一个 prepare an image for presentation 针对一个 图像请求 req 准备给定的图像元素 img以便呈现:
令 physicalWidth 和 physicalHeight 为从 req的 图像数据中取得的宽度和高度,由相关编解码器定义。
令 dimX 为 exifTagMap中标签 0xA002
(PixelXDimension) 的值。
令 dimY 为 exifTagMap中标签 0xA003
(PixelYDimension) 的值。
令 resX 为 exifTagMap中标签 0x011A
(XResolution) 的值。
令 resY 为 exifTagMap中标签 0x011B
(YResolution) 的值。
令 resUnit 为 exifTagMap中标签 0x0128
(ResolutionUnit) 的值。
如果以下所有条件都为真:
dimX 是正整数;
dimY 是正整数;
resX 是正的浮点数;
resY 是正的浮点数;
physicalWidth × 72 / resX 等于 dimX;
physicalHeight × 72 / resY 等于 dimY;
resUnit 为 2 (Inch),
则:
如果 req的 图像数据 为 CORS-cross-origin,则将 img的 natural dimensions 设置为 dimX 和 dimY,并相应地缩放 img的像素数据。
否则,将 req的 preferred density-corrected dimensions 设置为一个结构体,其宽度为 dimX ,高度为 dimY。
适当更新 req的 img 元素的呈现。
EXIF中的分辨率相当于 每英寸CSS点,因此72是根据分辨率计算大小的基础。
尚未规定如果EXIF在图像已经展示后到达的情况。见 问题#4929。
要 选择图像源 ,给定一个 img 元素 el:
Update the source set for el.
如果 el的 source set 为空,则返回null作为URL,并返回undefined作为像素密度。
Return the result of selecting an image from el的 源集合.
要 从source set中选择图像源 ,给定一个 source set sourceSet:
如果 sourceSet 中的条目 b has the same associated pixel density descriptor as an earlier entry a in a, then remove entry b。重复此步骤,直到 sourceSet 中的所有条目都不再具有与之前条目相同的关联 像素密度描述符 。
以 实现定义 manner, choose one image source from sourceSet. Let selectedSource 为该选择。
返回 selectedSource 及其关联的像素密度。
当被要求 创建一个source set ,给定字符串 default source、字符串 srcset、字符串 sizes以及元素或null的 img:
令 source set 为一个空的 source set。
如果 srcset 不是空字符串,则将 source set 设置为 解析 srcset的结果。
如果 default source 不是空字符串,并且 source set does not contain an image source with a 像素密度描述符 值为1的 图像源 ,并且没有具有 宽度描述符, append default source 附加到 source set。
规范化 of source set的源密度。
返回 source set。
When asked to update the source set for a given img 或
link 元素
el更新source
set时,用户代理必须执行以下操作:
将 el的 source set 设置为空的 source set。
令 elements 为« el »。
如果 el is an img element whose
parent node is a
picture
element, then 替换 the contents of
elements 的内容为 el的父节点的子元素,保留相对顺序。
如果 el be el if el is an img element,
otherwise null.
对于 elements 中的每个 child:
如果 child 是 el:
令 default source 为空字符串。
令 srcset 为空字符串。
令 sizes 为空字符串。
如果 el is an img element
that has a srcset attribute,
then set srcset 设置为该属性的值。
否则,如果 el is a link element
that has an imagesrcset
attribute, then set srcset 设置为该属性的值。
如果 el is an img element
that has a sizes attribute,
then set sizes 设置为该属性的值。
否则,如果 el is a link element
that has an imagesizes
attribute, then set sizes 设置为该属性的值。
如果 el is an img element
that has a src
attribute, then set default
source 设置为该属性的值。
否则,如果 el is a link element
that has an href attribute,
then set default
source 设置为该属性的值。
令 el的 source set to the result of creating a source set given default source、 srcset、 sizes和 img.
返回。
如果 el 是 link 元素,那么
elements
仅包含 el,因此此步骤将立即达到,算法的其余部分将不会运行。
解析 child的 srcset 属性 ,并令 source set 为返回的 source set。
解析 child的sizes属性 ,并将 source set, and let source set's source size 设置为返回的值。
如果 child 具有 width 或 height 属性,则将
el的 尺寸属性源 设置为
child。否则,将 el的 尺寸属性源 设置为
el。
规范化 of source set的源密度。
将 el的 source set 设置为 source set。
返回。
每个 img
元素单独考虑其前一个兄弟
source 元素加上 img 元素本身来选择 图像源, ignoring any other (invalid) elements,
including other img
elements in
the same picture
元素中的其他 source
元素,或作为相关 img
element.
当被要求从元素解析 srcset 属性 时,解析元素的 srcset 属性 的值如下:
令 input 为传递给此算法的值。
令 position 为 input中的指针,初始指向字符串的开头。
令 candidates 为初始为空的 source set。
分割循环: 收集 that are ASCII whitespace or U+002C COMMA characters from position 给定的 input. If any U+002C COMMA characters were collected, that is a 解析错误。
如果 position 已超过 input的末尾,返回 candidates。
收集一系列代码点 ,这些代码点不是 ASCII 空白 , 从给定位置 position 的 input中获取,并将结果赋值给 url 。
令 descriptors 为一个新的空列表。
如果 url 以U+002C (,)结尾,则:
从 url中移除所有尾随的U+002C 逗号字符。如果移除了多个字符,这是一个 解析错误。
否则:
描述符分词器: 跳过 由 position 给定的 input中的ASCII空白字符。
令 current descriptor 为空字符串。
令 state 为 在描述符中。
令 c 为 position处的字符。根据 state的值执行以下操作。对于此步骤的目的,“EOF”是一个特殊字符,表示 position 已超过 input的末尾。
根据 c的值执行以下操作:
如果 current descriptor 不为空,将 current descriptor 追加到 descriptors 中,并将 current descriptor 设为空字符串。将 state 设为 在描述符之后。
将 position 推进到 input中的下一个字符。如果 current descriptor 不为空,将 current descriptor 追加到 descriptors中。跳到标记为 描述符解析器的步骤。
将 c 追加到 current descriptor中。将 state 设为 在括号中。
如果 current descriptor 不为空,将 current descriptor 追加到 descriptors中。跳到标记为 描述符解析器的步骤。
将 c 追加到 current descriptor中。
根据 c的值执行以下操作:
将 c 追加到 current descriptor中。将 state 设为 在描述符中。
将 current descriptor 追加到 descriptors中。跳到标记为 描述符解析器的步骤。
将 c 追加到 current descriptor中。
根据 c的值执行以下操作:
保持在此状态。
跳到标记为 描述符解析器的步骤。
将 state 设为 在描述符中。将 position to the previous character in input.
将 position 推进到 input中的下一个字符。重复此步骤。
为了与将来的添加兼容,此算法支持多个描述符和带括号的描述符。
描述符解析器:令 error 为 否。
令 width 为 不存在。
令 density 为 不存在。
令 future-compat-h 为 不存在。
对于 descriptors中的每个描述符,执行以下列表中的相应步骤:
如果 future-compat-h 不是 不存在 且 width 是 不存在,令 error 为 是。
如果 error 仍然是 否, then append a new image source to candidates whose URL is url,宽度为 width (如果不是 不存在 ),像素密度为 density (如果不是 不存在)。否则,这是一个 解析错误。
返回到标记为 分割循环的步骤。
When asked to parse a sizes attribute from an element element,
with an
img 元素或null
img时:
令 unparsed sizes list 为 解析 from the value of element的 sizes 属性 (or the empty string, if the attribute is absent). [CSSSYNTAX]
令 size 为null。
对于 unparsed sizes list 中的每个 unparsed size:
Remove all consecutive <whitespace-token>s from the end of unparsed size. If unparsed size 现在为空,则这是一个 解析错误; 继续。
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函数都是无效的。否则,这是一个 解析错误; 继续。
如果 size 是 auto,并且
img
不是null,并且 img 正在 渲染,并且 img
允许自动尺寸,则将
size to the concrete object
size width of img, in CSS像素为单位。
如果 size 仍然是 auto,则它将被忽略。
Remove all consecutive <whitespace-token>s from the end of unparsed size. If unparsed size 现在为空:
Parse the remaining component values in unparsed size as a <media-condition>。如果它未正确解析,或者它正确解析但 <media-condition> 的结果为false, 继续. [MQ]
如果 size 不是 auto,则返回
size。否则,继续。
返回 100vw。
使用一个不带 <media-condition> 的裸 <source-size-value>
(作为一个 <length>)作为一个不在列表末尾的 <source-size-list> 条目是无效的。然而,解析
算法允许它出现在 <source-size-list>中的任何位置,并且如果列表中的前一个条目未被使用,则会立即接受它作为尺寸。这是为了支持将来的扩展,并防止简单的作者错误,例如最后的尾随逗号。一个裸的
auto
关键字被允许有其他条目跟在其后,以为遗留的用户代理提供回退。
An 图像源 可以有一个 像素密度描述符、一个 宽度描述符,或者伴随其URL没有任何描述符。规范化 源集 会给每个 图像源 一个 像素密度描述符。
当要求 规范化源密度 时,对于一个 源集合 source set,用户代理必须执行以下操作:
用户代理可以随时运行以下算法,以更新 img
元素的图像,以 应对环境变化。(用户代理 不需要
运行此算法;例如,如果用户不再查看页面,用户代理可能会等到用户返回页面后再确定使用哪个图像,以防在此期间环境再次变化。)
用户代理特别鼓励在用户更改 视口大小(例如,通过调整窗口大小或更改页面缩放),以及将 img 元素 插入到文档中时运行此算法,以使 密度校正后的自然宽度和高度 匹配新的 视口,并在涉及 艺术指导
时选择正确的图像。
⌛ 如果 img
element
does not use
srcset 或
picture, its 节点文档
未处于 fully active状态,或其拥有资源类型为
multipart/x-mixed-replace的图像数据,或其
pending request 不为
null,则返回。
⌛ 令 selected source 和 selected pixel density 分别为 选择图像源的URL和像素密度的结果。
⌛ 如果 selected source 为null,则返回。
⌛ 如果 selected source 和 selected pixel density 与元素的 最后选择的源 和 当前像素密度相同,则返回。
⌛ 令 urlString 为 编码、解析和序列化URL 的结果,给定 selected source,相对于元素的 节点文档。
⌛ 如果 urlString 失败,则返回。
⌛ 令 corsAttributeState 为元素的 crossorigin
内容属性的状态。
⌛ 令 key 为一个元组,包含 urlString、 corsAttributeState,如果 corsAttributeState 不为 无CORS,则包含 origin。
⌛ 将元素的 pending request 设为 image request。
如果 可用图像列表 中包含 key的条目,则将 image request的 图像数据 设置为该条目的图像数据。继续下一步。
否则:
令 request 为 创建潜在的 CORS 请求 ,参数为
urlString、"image" 和
corsAttributeState的结果。
将 request的 client 设为
client, request的 initiator 设为 "imageset",并设置
request的 同步标志。
将 request的
referrer policy(引用策略) 设为当前元素的 referrerpolicy
属性的当前值。
将 request的 priority(优先级) 设为当前元素的 fetchpriority
属性的当前值。
令 response 为 获取 request的结果。
如果 response的 不安全响应 是一个 网络错误
,或者图像格式不受支持(通过应用 图片嗅探规则,如前所述确定),或者用户代理能够确定 image
request的图像已损坏且无法获得图像尺寸,或者资源类型为
multipart/x-mixed-replace,则将
pending request 设为
null 并中止这些步骤。
否则, response的 不安全响应 即为 image request的 图像数据。它可以是
CORS-同源 或
CORS-跨源,这会影响图像与其他
API
的交互(例如用于 canvas时)。
将元素任务排队 到 DOM操作任务源 ,给定 img
元素和以下步骤:
如果 img
元素自算法开始以来经历了 相关变更
,则将 pending request
设为 null 并中止这些步骤。
将 img
元素的 last
selected source 设为 selected source ,并将 img
元素的 current
pixel
density 设为
selected pixel density。
Add the image to the list of available images using the key key, with the 忽略更高层缓存 标志。
除非另有规定, 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 >
有时,图形形式可以更清晰地表达某些内容,例如流程图、图解、图形或显示方向的简单地图。在这种情况下,可以使用 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
元素)。
文档可以包含图标形式的信息。图标旨在帮助视觉浏览器用户一眼就能识别功能。
在某些情况下,图标是传达相同意义的文本标签的补充。在这些情况下, 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.
有时,图像仅由文本组成,图像的目的是传达文本本身,而不是突出用于呈现文本的实际排版效果。
在这种情况下, 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!
如果字符可以达到相同的目的,则不应使用图像。只有当文本不能直接用文本表示时,例如由于装饰或没有适当的字符(如外字的情况),才应使用图像。
如果作者因为其默认系统字体不支持某个字符而想使用图像,那么网络字体比图像更好的解决方案。
在许多情况下,图像实际上只是补充,其存在只是加强了周围的文本。在这些情况下, alt
属性必须存在,但其值必须为空字符串。
一般来说,如果删除图像不会使页面的实用性降低,但包括图像会使视觉浏览器的用户更容易理解概念,那么图像就属于这一类。
以下是以图形形式重复前一段的流程图:
< p > The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</ p >
< p >< img src = "images/parsing-model-overview.svg" alt = "" ></ p >
在这些情况下,仅包含一个标题的替代文本是错误的。如果要包括标题,可以使用 title
属性,或者使用 figure
和 figcaption
元素。在后一种情况下,图像实际上是带有替代图形表示的短语或段落,因此需要替代文本。
<!-- Using the title="" attribute -->
< p > The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</ p >
< p > < img src = "images/parsing-model-overview.svg" alt = ""
title = "Flowchart representation of the parsing model." > </ p >
<!-- Using <figure> and <figcaption> -->
< p > The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</ p >
< figure >
< img src = "images/parsing-model-overview.svg" alt = "The Network leads to
the Input Stream Preprocessor, which leads to the Tokenizer, which
leads to the Tree Construction stage. The Tree Construction stage
leads to two items. The first is Script Execution, which leads via
document.write() back to the Tokenizer. The second item from which
Tree Construction leads is the DOM. The DOM is related to the Script
Execution." >
< figcaption > Flowchart representation of the parsing model.</ figcaption >
</ figure >
<!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
< p > The Network passes data to the Input Stream Preprocessor, which
passes it to the Tokenizer, which passes it to the Tree Construction
stage. From there, data goes to both the DOM and to Script Execution.
Script Execution is linked to the DOM, and, using document.write(),
passes data to the Tokenizer.</ p >
< p >< img src = "images/parsing-model-overview.svg"
alt = "Flowchart representation of the parsing model." ></ p >
<!-- Never put the image's caption in the alt="" attribute! -->
以下是以图形形式重复前一段的图表:
< p > According to a study covering several billion pages,
about 62% of documents on the web in 2007 triggered the Quirks
rendering mode of web browsers, about 30% triggered the Almost
Standards mode, and about 9% triggered the Standards mode.</ p >
< p >< img src = "rendering-mode-pie-chart.png" alt = "" ></ p >
有时,图像对内容并非至关重要,但也不是纯装饰或完全与文本重复。在这些情况下, 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 >
如果图像是装饰性的,但并不是特别针对页面的——例如作为整个网站设计方案的一部分——图像应该在网站的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 >
在某些情况下,图片是内容的关键部分。例如,在一个照片画廊页面中,图片是页面的整个 重点 。
如何为关键内容的图片提供替代文本取决于图片的来源。
当可以提供详细的替代文本时,例如图片是杂志评论中的一系列截图的一部分,或是漫画条的一部分,或是关于该照片的博客文章中的照片,必须在 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
属性可以省略,但还必须满足以下条件之一:
The img 元素位于一个
figure
元素中,该元素包含一个 figcaption
元素,该元素包含
除了 元素间空白之外的内容,并且忽略
figcaption
元素及其后代, figure
元素没有
流内容 后代,除了 元素间空白 和
img 元素。
The title 属性存在且具有非空值。
依赖于 title
属性目前不推荐使用,因为许多用户代理并不以本规范要求的可访问方式公开该属性(例如,需要鼠标等指针设备来触发工具提示的显示,这排除了仅使用键盘和仅使用触摸的用户,例如使用现代手机或平板电脑的用户)。
这种情况应保持在绝对最低限度。如果作者有可能提供真实的替代文本,那么省略 alt 属性是不被接受的。
在一个照片分享网站上,如果网站收到的图像没有任何元数据,只包含说明,可以这样标记:
< figure >
< img src = "1100670787_6a7c664aef.jpg" >
< figcaption > Bubbles traveled everywhere with us.</ figcaption >
</ figure >
然而,如果能够从用户那里获得图像的重要部分的详细描述并将其包含在页面上,那将更好。
一个盲人用户的博客中显示了一张由用户拍摄的照片。最初,用户可能不知道他们拍摄的照片展示了什么:
< article >
< h1 > I took a photo</ h1 >
< p > I went out today and took a photo!</ p >
< figure >
< img src = "photo2.jpeg" >
< figcaption > A photograph taken blindly from my front porch.</ figcaption >
</ figure >
</ article >
然而,用户最终可能会从他们的朋友那里获得图像的描述,并可以添加替代文本:
< article >
< h1 > I took a photo</ h1 >
< p > I went out today and took a photo!</ p >
< figure >
< img src = "photo2.jpeg" alt = "The photograph shows my squirrel
feeder hanging from the edge of my roof. It is half full, but there
are no squirrels around. In the background, out-of-focus trees fill the
shot. The feeder is made of wood with a metal grate, and it contains
peanuts. The edge of the roof is wooden too, and is painted white
with light blue streaks." >
< figcaption > A photograph taken blindly from my front porch.</ figcaption >
</ figure >
</ article >
有时,图像的全部意义在于无法提供文本描述,用户需要提供描述。例如,CAPTCHA 图像的目的就是查看用户是否能够字面上读取图形。这里是标记 CAPTCHA 的一种方式(注意 title 属性):
< p >< label > What does this image say?
< img src = "captcha.cgi?id=8934" title = "CAPTCHA" >
< input type = text name = captcha ></ label >
(If you cannot see the image, you can use an < a
href = "?audio" > audio</ a > test instead.)</ p >
另一个示例是显示图像并要求提供替代文本的软件,目的是然后编写具有正确替代文本的页面。这样的页面可以包含一个图像表格,如下所示:
< table >
< thead >
< tr > < th > Image < th > Description
< tbody >
< tr >
< td > < img src = "2421.png" title = "Image 640 by 100, filename 'banner.gif'" >
< td > < input name = "alt2421" >
< tr >
< td > < img src = "2422.png" title = "Image 200 by 480, filename 'ad3.gif'" >
< td > < input name = "alt2422" >
</ table >
请注意,即使在这个示例中,也尽可能多地在 title
属性中包含有用的信息。
由于一些用户根本无法使用图像(例如,因为他们的连接非常慢,或因为他们使用的是仅文本浏览器,或因为他们正在使用免提汽车语音网页浏览器来听页面内容,或仅仅因为他们是盲人), alt
属性只允许在没有替代文本且无法提供替代文本时省略,而不是提供替代文本,如上例所示。缺乏作者的努力不是省略 alt 属性的可接受理由。
一般来说,作者应避免将 img
元素用于显示图像以外的其他目的。
如果 img
元素用于显示图像以外的其他目的,例如作为页面浏览量统计的一部分,则 alt 属性必须为空字符串。
在这种情况下, width 和
height 属性应设置为零。
本节不适用于公开访问的文档,或其目标受众不一定为作者个人认识的人,例如网站上的文档、发送到公开邮件列表的电子邮件或软件文档。
当图像包含在针对特定且已知能够查看图像的个人的私人通信(例如HTML电子邮件)中时, alt
属性可以省略。然而,即使在这种情况下,仍强烈建议作者包括替代文本(根据图像的类型,如上所述),以便在用户使用不支持图像的邮件客户端时,电子邮件仍然可以使用,或者在文档被转发给其他可能不易查看图像的用户时,文档仍然可用。
标记生成器(如所见即所得的创作工具)应尽可能从用户那里获取替代文本。然而,认识到在许多情况下,这可能不可行。
对于作为链接唯一内容的图像,标记生成器应检查链接目标,以确定目标的标题或目标的URL,并使用以这种方式获得的信息作为替代文本。
对于有标题的图像,标记生成器应使用 figure 和
figcaption
元素,或 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浏览器)使用的内容中生成替代文本。
这是因为一旦页面生成,它通常不会被更新,而随后读取页面的浏览器可以由用户更新,因此浏览器可能会比标记生成器在生成页面时具有更为最新和精确的启发式规则。
一致性检查器必须报告缺少 alt
属性为错误,除非符合以下列出的条件之一:
The img
element is in a figure
element that satisfies the conditions described above.
一致性检查器已配置为假设文档是针对特定且已知能够查看图像的个人的电子邮件或文档。
The img
元素有一个(不符合规范的) generator-unable-to-provide-required-alt
属性,其值为空字符串。一个不报告缺少 alt
属性为错误的一致性检查器,也不得报告存在空 generator-unable-to-provide-required-alt
属性为错误。(这种情况不代表文档符合规范,只是生成器无法确定适当的替代文本——验证器在这种情况下不需要显示错误,因为这样的错误可能会促使标记生成器仅仅为了消除验证器的警告而包含虚假的替代文本。当然,一致性检查器
可以 报告缺少 alt 属性的错误,即使存在 generator-unable-to-provide-required-alt
属性;例如,可能有用户选项报告 所有 合规错误,即使这些错误可能是使用标记生成器的更或少不可避免的结果。)
iframe 元素
在所有当前引擎中支持。
在所有当前引擎中支持。
Support in all current engines.
Support in all current engines.
Support in all current engines.
src — 资源地址
srcdoc — 在 iframe
name — 可导航内容
sandbox — 嵌套内容的安全规则
allow — Permissions
policy to be applied to the iframe's contents
allowfullscreen
— 是否允许 iframe内容使用
requestFullscreen()
width — 水平方向尺寸
height — 垂直方向尺寸
referrerpolicy
— 元素发起的 引用策略 的 fetches initiated by the element
loading — 用于确定加载延迟
[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 src 属性提供了该元素的
URL
,该页面将被该元素的 可导航内容 包含。该属性(如果存在)必须是一个 有效的非空 URL,可能被空格包围。如果 itemprop
属性在一个
iframe 元素上指定,则
src 属性也必须被指定。
在所有当前引擎中支持。
The srcdoc
属性提供了该元素的 可导航内容 的页面内容。该属性的值用于 构建 一个 iframe srcdoc 文档,它是一个 Document ,其
URL 匹配 about:srcdoc。
The srcdoc
属性(如果存在)必须使用 HTML 语法 ,由以下语法组件按给定顺序组成:
html 元素的形式。上述要求也适用于 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="/gallery?mode=cover&amp;page=1">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;me on the next cover." ></ iframe >
</ article >
请注意引号必须被转义的方式(否则 srcdoc
属性会提前结束),以及在沙盒内容中提到的原始符号(例如在URL或文本中)必须
双重 转义的方式——一次是为了在最初解析 srcdoc
属性时保留符号,另一次是为了防止在解析沙盒内容时误解符号。
此外,请注意,由于 DOCTYPE
在
iframe
srcdoc 文档中是可选的,并且 html、
head和 body 元素具有 可选的
起始标签和结束标签,并且 title
元素在 iframe
srcdoc
文档中也是可选的,因此 srcdoc
属性中的标记尽管表示的是整个文档,也可以相对简洁,因为在语法中只需要按字面出现
body 元素的内容。其他元素仍然
存在,但只是通过隐含的方式存在。
在 HTML 语法中,作者只需记住使用
U+0022 引号字符 (") 包裹属性内容,然后转义所有的 U+0026 符号 (&) 和 U+0022 引号 (") 字符,并指定 sandbox
属性,以确保内容安全嵌入。(记得在引号之前转义符号,以确保引号变成 " 而不是 &quot;。)
在 XML 中,U+003C 小于号字符 (<) 也需要转义。为了防止 属性值规范化,一些 XML 的空白字符——特别是 U+0009 制表符 (tab)、U+000A 换行符 (LF) 和 U+000D 回车符 (CR)——也需要转义。 [XML]
如果 src
属性和 srcdoc
属性同时指定,则 srcdoc
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的情况下,如下:
如果 insertedNode 有 sandbox
attribute, then parse the sandboxing
directive given the attribute's value and insertedNode的
iframe
沙盒标志集.
Create a new child navigable for insertedNode.
处理
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):
如果 element的 srcdoc 属性已指定,则:
将 element的 current navigation was lazy loaded 布尔值设为 false。
如果 will lazy load element steps 给定 element 返回 true,则:
将 element的 lazy load resumption steps 设置为从标记为 navigate to the srcdoc resource的步骤开始的算法的其余部分。
将 element的 current navigation was lazy loaded 布尔值设为 true。
Start intersection-observing a lazy loading element for element.
返回。
Navigate to the srcdoc resource: Navigate an iframe 或
frame given element, about:srcdoc,空字符串和
element的 srcdoc
属性的值。
生成的 Document 必须被视为 一个
iframe srcdoc 文档。
否则:
让 url be the result of running the shared attribute
processing steps
for iframe and frame elements given element 和
initialInsertion.
如果 url 为 null,则返回。
如果 url 匹配
about:blank 且
initialInsertion 为 true,则:
运行 iframe 加载事件步骤 ,给定 element。
返回。
让 referrerPolicy 成为 element的 referrerpolicy
内容属性的当前状态。
将 element的 current navigation was lazy loaded 布尔值设为 false。
如果 will lazy load element steps 给定 element 返回 true,则:
将 element的 lazy load resumption steps 设置为从标记为 navigate的步骤开始的算法的其余部分。
将 element的 current navigation was lazy loaded 布尔值设为 true。
Start intersection-observing a lazy loading element for element.
返回。
Navigate: Navigate an iframe 或
frame
,给定 url和 referrerPolicy, and referrerPolicy.
The shared attribute processing steps
for iframe 和 frame 元素的共享属性处理步骤, given an element
element and a boolean initialInsertion, are:
令 url 为 URL 记录 about:blank。
如果 element 指定了 src 属性,并且其值不是空字符串,则:
If the inclusive ancestor navigables of element的 节点可导航 contains a 可导航 ,其 活动文档的 URL 等于 url ,且 排除片段 设置为 true,则返回 null。
如果 url 匹配
about:blank ,且
initialInsertion 为 true,则执行 URL
和历史记录更新步骤
,给定 element的 可导航内容的 活动文档 和 url。
如果 url 是类似 about:blank?foo的内容,这是必要的。如果
url 只是纯粹的 about:blank,这将不做任何事情。
返回 url。
要 导航一个 iframe 或 frame ,需给定元素
element, URL url, referrer
policy(引用者策略)
referrerPolicy,一个可选的 string-or-null 类型 srcdocString (默认为 null),以及一个可选的布尔值
initialInsertion (默认为 false):
令 historyHandling 为 "auto"。
如果 element的 内容
可导航对象的 活动文档 未 完全加载,则将
historyHandling 设置为 "replace"。
如果 element 是一个 iframe:
将 element的 待处理资源计时开始时间 to the current high resolution time given element的 节点文档的 相关全局对象.
将 element的 待处理资源计时 URL 设置为 url。
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:
如果 childDocument 设置了其 抑制 iframe 加载 标志,则 返回。
如果 element的 待处理资源计时开始时间 不为 null,则:
断言: element的 待处理资源计时 URL 不为 null。
令 fallbackTimingInfo 为一个新的 fetch 计时信息 , 其 开始时间 为 element的 待处理资源计时开始 时间 , 且其 响应 结束时间 is the current high resolution time given global.
Mark resource timing given fallbackTimingInfo、 解析 element的
待处理资源计时 URL所得结果、
"iframe"、
global、空字符串、一个新的
响应体信息, and 0.
将 element的 待处理资源计时开始 时间 设置为 null。
将 element的 待处理资源计时 URL 设置为 null。
设置 childDocument的 iframe 加载进行中 标志。
取消设置 childDocument的 iframe 加载进行中 标志。
这与脚本一起使用时,可以用于探测本地网络 HTTP 服务器的 URL 空间。用户代理可能会实现比上述描述更严格的 跨源 访问控制策略以减轻此攻击,但不幸的是,这些策略通常与现有的网页内容不兼容。
如果某个元素类型 可能延迟加载事件,则对于该类型的每个元素 element ,用户代理必须 延迟 of element的 节点文档 的加载事件,如果 element的 内容可导航 非 null,并且以下任意条件为真:
element的 内容可导航的 活动文档 不 准备好执行后加载任务;
element的 内容可导航的 正在延迟 load
事件 为真;或者
每个 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.
所有当前浏览器均支持。
The sandbox
属性在指定时,会对由
iframe托管的任何内容启用一组额外的限制。其值必须是
无序的唯一空格分隔的标记集合 ,且这些标记是 ASCII
不区分大小写。允许的值包括:
allow-downloads
allow-forms
allow-modals
allow-orientation-lock
allow-pointer-lock
allow-popups
allow-popups-to-escape-sandbox
allow-presentation
allow-same-origin
allow-scripts
allow-top-navigation
allow-top-navigation-by-user-activation
allow-top-navigation-to-custom-protocols
当设置了该属性时,内容会被视为来自一个唯一的 不透明源,表单、脚本以及各种可能令人烦恼的 API 会被禁用,且链接被防止指向其他 可导航对象。 allow-same-origin
关键字使内容被视为来自其真实源,而不是强制其成为一个 不透明源; allow-top-navigation
关键字允许内容 导航 其 可遍历的可导航对象; allow-top-navigation-by-user-activation
keyword behaves similarly but allows such navigation only
when the
browsing context's 活动窗口 具有 临时激活; the allow-top-navigation-to-custom-protocols
重新启用对非 fetch 协议 的导航,允许 交给外部软件;而 allow-forms、
allow-modals、
allow-orientation-lock、
allow-pointer-lock、
allow-popups、
allow-presentation、
allow-scripts、
和 allow-popups-to-escape-sandbox
关键字分别重新启用表单、模态对话框、屏幕方向锁定、指针锁 API、弹出窗口、展示 API、脚本和未沙箱化的 辅助浏览上下文 的创建。 allow-downloads
关键字允许内容执行下载。 [POINTERLOCK] [SCREENORIENTATION]
[PRESENTATION]
The allow-top-navigation
和 allow-top-navigation-by-user-activation
关键字不能同时指定,因为这样做是多余的;在这种不符合规范的标记中,只有 allow-top-navigation
会有效。
类似地,如果指定了 allow-top-navigation-to-custom-protocols
关键字,则不能指定 allow-top-navigation
或 allow-popups
关键字,因为这样做是多余的。
要在沙箱内容中允许 alert()、 confirm()和 prompt() 函数,必须同时指定 allow-modals
和 allow-same-origin
关键字,并且加载的 URL 需要与 同源 ,与 顶级源相同。没有 allow-same-origin
关键字,内容总是被视为跨源的,跨源内容 无法显示简单对话框。
Setting both the allow-scripts
和 allow-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-origin
和 allow-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 allow 和 allowfullscreen
都不能向一个
iframe 元素的 内容可导航对象 中的特性授予访问权限,如果该元素的 节点
文档 本身尚未被允许使用该特性。
要确定一个 Document 对象
document
是否 被允许使用 策略控制特性 feature,
运行以下
步骤:
如果 document的 浏览 上下文 为 null,则返回 false。
如果 document 不是 完全活动的, 则返回 false。
If the result of running is feature enabled in
document
for origin on feature、 document和 document的 源 is "Enabled",则返回
true。
返回 false。
Because they only influence the permissions policy of the content
navigable's active document, the allow 和 allowfullscreen
属性只影响
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
元素的策略。
Descendants of iframe
元素的后代不表示任何内容。(在不支持 iframe
元素的旧版用户代理中,其内容会被解析为可作为
后备内容的标记。)
The HTML 解析器 将
iframe 元素内的标记视为
文本。
支持所有当前的引擎。
The srcdoc 获取器步骤如下:
The srcdoc 设置器步骤如下:
让 compliantString 为调用 获取受信任的类型符合字符串
算法的结果,参数为 TrustedHTML、
this的
相关全局对象、给定值、“HTMLIFrameElement srcdoc” 和
“script”。
The 受支持的标记
对于 sandbox的 DOMTokenList
是在 sandbox
属性中定义的允许值,并且用户代理支持的值。
HTMLIFrameElement/referrerPolicy
所有当前引擎都支持。
The referrerPolicy IDL 属性必须
反映 the referrerpolicy
内容
属性, 仅限已知值。
HTMLIFrameElement/contentDocument
所有当前引擎都支持。
HTMLIFrameElement/contentWindow
所有当前引擎都支持。
以下是一个使用 iframe
来包含来自广告经纪人的广告的页面示例:
< iframe src = "https://ads.example.com/?customerid=923513721&format=banner"
width = "468" height = "60" ></ iframe >
embed
element支持所有当前引擎。
支持所有当前引擎。
src —
资源的地址
type —
嵌入资源的类型
width —
水平尺寸
height — 垂直尺寸
[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 元素被称为
潜在活动 :
元素在 文档中 ,或在上次 文档中 the last time the event loop reached 步骤1。
元素的 src
属性要么不存在,要么其值不是空字符串。
元素不是 媒体元素的后代。
The element is not a descendant of an object element that is
not showing its
fallback content.
元素 正在渲染, or was being rendered the last time the event loop reached 步骤1.
每当一个 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 如下:
如果另一个 任务 已排队运行
the
embed element setup steps 给定 element,则返回。
如果 element 设置了 src 属性,则:
让 url 成为 编码解析
URL 的结果,给定
element的 src
属性的值,相对于
element的 节点文档。
如果 url 失败,则返回。
让 request 成为一个新的 请求 ,其
URL 是 url, 客户端 是
element的 节点文档的 相关设置对象, 目的地
是
"embed",
凭证模式 是 "include", 模式 是 "navigate", 启动类型 是 "embed",并且其 使用 URL 凭证标志
设置。
获取 request,设置 处理响应 的步骤,给定 响应 response:
如果另一个 任务 已排队运行
the
embed element setup steps 给定 element,则返回。
让 type 成为确定 内容类型 的结果,给定 element 和 response。
切换 type:
否则, 不显示插件 给 element。
To determine the type of the content given an
embed 元素
element 和 响应 response,
run the following steps:
如果 element 设置了 type attribute, and that
attribute's value is a type that a plugin supports, then
return the value of the
type 属性的值。
If the path component of response的 url 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。
如果 response has explicit Content-Type metadata, and that value is a type that a plugin supports, then return that value.
返回 null。
上面的算法有意允许 response 具有非OK 状态。这允许服务器即使在错误响应中(例如,HTTP 500 内部服务器错误代码仍然可以包含插件数据)返回数据给插件。
To display no plugin for an embed 元素
element:
销毁一个子可导航内容 给定 element。
Display an indication that no plugin could be found for element, as the contents of element的内容。
element 现在 表示 什么都没有。
每当一个 embed
元素 潜在活动 stops being potentially
active, any
plugin that had been instantiated for that element must be
unloaded.
object 元素所有当前引擎均支持。
所有当前引擎均支持。
Support in all current engines.
Support in all current engines.
Support in all current engines.
data — 资源地址
type — 嵌入资源类型
name — 内容可导航
form —
将元素与 form 元素关联
width —
水平尺寸
height — 垂直尺寸
[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.
每当发生以下情况 之一时:
object
元素显示或隐藏其
后备内容,
classid
属性被设置、更改或移除,
classid
属性不存在,并且其 data
属性被设置、更改或移除,
classid 属性和
data 属性都不存在,并且其 type
属性被设置、更改或移除,
...用户代理必须 排队一个元素任务 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 排队 或正在运行时,必须 延迟元素的加载事件 在其 节点文档中。
如果用户表示希望显示此 object 元素的 后备内容 而不是元素的通常行为,那么跳转到下面标记为
后备的步骤。
例如,用户可以要求显示元素的 后备内容 ,因为该内容使用用户觉得更容易访问的格式。
如果元素有一个祖先 媒体元素,或有一个祖先
object element
that is not showing its 后备内容,或者元素不在其 文档中 ,其 浏览上下文 为非空,或者元素的 节点文档
is not fully
active, or if the element is still in the 打开元素栈 的
HTML 解析器 或 XML 解析器中,或者元素未 渲染,则跳转到下面标记为 后备的步骤。
如果 data
属性存在且其值不为空字符串,则:
如果 type
属性存在且其值不是用户代理支持的类型,则用户代理可以跳过获取内容以检查其真实类型,直接跳转到下面标记为
后备 的步骤。
令 request 为一个新的 请求 ,其
URL 为 url, 客户端 为元素的 节点文档的
相关设置对象, 目标
为
"object",
凭证模式 为 "include", 模式 为 "navigate", 发起者类型 为 "object",并且其 使用 URL 凭证标志 被设置。
获取 request。
获取资源必须 延迟元素的加载事件 在其 节点文档 until the task that is queued by the 网络任务源 once the resource has been fetched (defined next) has been run.
如果资源尚不可用(例如,由于资源未在缓存中,因此需要通过网络请求来加载资源),则跳转到下面标记为 后备. 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.
如果加载失败(例如,出现 HTTP 404 错误,DNS 错误), 触发一个事件 名为 error
在元素上,然后跳转到下面标记为 后备的步骤。
确定 resource type,如下所示:
令 resource type 为未知。
如果用户代理配置为严格遵守此资源的 Content-Type 标头,并且资源有 关联的 Content-Type 元数据,则令 resource type 为在 资源的 Content-Type 元数据中指定的类型,并跳转到下面标记为 处理程序的步骤。
这可能引入一个漏洞,其中站点试图嵌入使用特定类型的资源,但远程站点覆盖了它,并为用户代理提供了触发不同类型内容的资源,具有不同的安全特性。
运行以下列表中的适当步骤集:
令 binary 为假。
如果在 资源的
Content-Type 元数据 中指定的类型是 "text/plain",并且应用
文本或二进制资源判别规则 到资源的结果是资源不是
text/plain,则将
binary 设置为真。
如果在 资源的
Content-Type 元数据 中指定的类型是 "application/octet-stream",则将
binary 设置为真。
如果 binary 为假,则令 resource type 为在 资源的 Content-Type 元数据中指定的类型,并跳转到下面标记为 处理程序的步骤。
如果在 type
属性存在于
object
元素上,并且其值不是 application/octet-stream,则运行以下步骤:
如果属性的值是以 "image/" 开头的类型,而不是 XML MIME 类型,则令 resource type
为在 type
属性中指定的类型。
跳转到下面标记为 处理程序的步骤。
如果在 type
属性存在于
object
元素上,则令 tentative type 为在 type
属性中指定的类型。
否则,令 tentative type 为 资源的计算类型。
如果 tentative type is not
application/octet-stream,则令
resource type 为
tentative type 并跳转到下面标记为
处理程序的步骤。
如果应用 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 仍然未知。在这两种情况下,下一步将触发后备。
处理程序:根据以下第一个匹配的情况处理内容:
image/" 开头如果 object
元素的 内容可导航 为 null,则
为元素创建一个新的子可导航内容 。
如果 response的 URL 不
匹配
about:blank,则使用该元素的
节点文档 将该元素的 内容可导航对象 导航至
response的 URL using
the element's
node document, with historyHandling 设置为 “replace”。
The data attribute of
the
object
element doesn't get updated if the 内容可导航 进一步 导航 到其他位置。
image/" 开头,并且未禁用图像支持销毁一个子可导航内容
给定 object
元素。
应用 图像嗅探规则 以确定图像的类型。
如果图像无法渲染,例如因为它格式错误或格式不受支持,跳转到下面标记为 后备的步骤。
给定的 resource type 不受支持。跳转到下面标记为 后备的步骤。
如果上一步结束时 resource type 仍然未知,这就是触发的情况。
元素的内容不是 object 元素表示的一部分。
如果 object
元素不表示其 内容可导航,则在资源完全加载后, 排队一个元素任务 on the
DOM
manipulation task source given the object element to
触发一个事件 名为 load
在元素上。
If the element does represent its 内容可导航,则在创建的 Document is completely finished
loading.
返回。
后备: object 元素 表示 元素的子元素。这是元素的 后备内容。 销毁一个子可导航内容 给定元素。
由于上述算法, object 元素的内容充当
后备内容,仅在引用的资源无法显示时使用(例如返回 404
错误)。这允许多个 object
元素嵌套在一起,针对具有不同能力的多个用户代理,用户代理选择它支持的第一个。
The form 属性用于显式关联
object 元素与其
表单所有者。
HTMLObjectElement/contentDocument
所有当前引擎均支持。
HTMLObjectElement/contentWindow
所有当前引擎均支持。
The willValidate、
validity和 validationMessage
属性,以及 checkValidity()、 reportValidity()和
setCustomValidity()
方法,是
约束验证 API的一部分。
form IDL
属性是元素的表单
API 的一部分。
在此示例中,使用 object
元素将 HTML 页面嵌入到另一个页面中。
< figure >
< object data = "clock.html" ></ object >
< figcaption > My HTML Clock</ figcaption >
</ figure >
video 元素所有当前引擎均支持。
所有当前引擎均支持。
controls 属性:
Interactive
content.
src
属性:零个或多个 track
elements, then
transparent, but with no media element descendants.
src 属性:零个或多个 source 元素,然后是零个或多个 track
elements, then
transparent, but with no media element descendants.
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 — 垂直尺寸
[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 src, crossorigin,
preload, autoplay,
loop, muted,和 controls attributes are the attributes common to all
media elements.
The poster
属性提供一个图像文件的 URL ,用户代理可以在没有视频数据时显示该图像。如果存在此属性,则必须包含一个 有效的非空 URL,可能被空格包围。
如果要使用指定的资源,那么,当元素被创建时,或者当 poster 属性被设置、
更改或移除时,用户代理必须
运行以下步骤,以确定该元素的 海报帧 (无论该元素的 显示海报标志的值如何):
如果 poster
属性的值为空字符串,
或者该属性不存在:
将 video
元素的 海报延迟加载恢复步骤 设置为
null。
不存在 海报帧;返回。
令 url be the result of encoding-parsing a URL given the poster 属性的值,
相对于该元素的 节点
文档.
如果 url 为失败,则返回。 不存在 海报 帧。
令 request 为一个新的 请求 ,其 URL 为 url, 客户端 为该元素的 节点文档的
相关设置
对象, 目标
为“image”, 发起者类型 为“video”,
凭证模式 为“include”,且其
use-URL-credentials 标志 被设置。
If the will lazy
load element steps given the video return
true:
令 posterResumptionSteps 为此算法中从标记为 Fetch的步骤开始的其余部分。
将 video
元素的 海报延迟加载恢复步骤 设置为
posterResumptionSteps。
返回。
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 属性
为任何
后续值但 媒体资源
没有视频通道)
video 元素 表示 其 海报帧(如果有),
否则表示没有 透明黑色 且没有 自然
尺寸。video
元素 已暂停, 当前播放
位置 为视频的第一帧,
且该元素的 显示海报标志 被设置时video 元素 表示 其 海报帧(如果有),
否则表示视频的第一帧。video
元素 已暂停,且对应于 当前播放
位置 的视频帧不可用时(例如因为视频正在寻址或缓冲)video
元素既不是 可能正在
播放 也不是 已暂停 时(例如在
寻址或停滞时)video 元素 表示 已被渲染的视频的最后一帧。video
元素 已暂停video 元素 表示 对应于 当前播放
位置的视频帧。video
元素有视频通道并且 可能正在
播放)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
所有当前引擎均支持。
video.videoHeight
所有当前引擎均支持。
这些属性返回视频的自然尺寸,如果尺寸未知则返回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 步骤为:
如果 this的 readyState
属性是
HAVE_NOTHING,
则返回 0。
The videoHeight getter 步骤为:
如果 this的 readyState
属性是
HAVE_NOTHING,
则返回 0。
每当视频的 自然宽度
或 自然
高度 发生变化
(包括例如因为 选中的视频
轨道 发生了变化),如果该元素的 readyState
属性不是 HAVE_NOTHING, the
user agent must
queue a media element
task given the 媒体元素 to 触发一个事件 名为 resize 的事件,目标为该 媒体元素。
在没有相反样式规则的情况下,视频内容应被渲染在元素的播放区域内, 使视频内容在播放区域中居中显示,并以能够完全适配其中的最大可能大小显示,同时 保持视频内容的宽高比。因此,如果播放区域的宽高比与 视频的宽高比不匹配,则视频将以上下加黑边或左右加黑边的方式显示。元素播放区域中 不包含视频的区域不表示任何内容。
在实现 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 >
audio 元素支持所有当前引擎。
支持所有当前引擎。
controls 属性:
交互内容。
controls
属性: 可感知内容。src
属性:零个或多个 track
元素,然后
透明,但没有 媒体元素 后代。
src 属性:零个或多个 source 元素,然后零个或多个 track
元素,然后
透明,但没有 媒体元素 后代。
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 — 用于
决定加载延迟
[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 src、 crossorigin、
preload、 autoplay、
loop、 muted、 controls和 loading 属性是 所有媒体元素共有的
属性。
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.mp3、 2.mp3、 5.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 ])
支持所有当前引擎。
返回一个新的 audio
element, with the src
attribute set to the value passed in the argument, if applicable.
为创建 HTMLAudioElement
对象提供了一个传统的工厂函数(除了
DOM 的工厂方法如 createElement()外):
Audio(src)。调用传统工厂函数时,必须执行以下步骤:
track
元素支持所有当前引擎。
支持所有当前引擎。
Support in all current engines.
kind —
文本轨道的类型
src —
资源的地址
srclang — 文本轨道的语言
label — 用户可见标签
default — 如果没有其他 文本轨道 更合适,则启用该轨道
[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
属性被设置时,执行以下步骤:
令 trackURL 失败。
令 value 为元素的 src 属性值。
如果 value 不是空字符串,则将 trackURL 设置为 编码、解析和序列化 URL 的结果,给定 value,相对于元素的 节点文档。
Set the element's 轨道 URL 设置为 trackURL ;否则设为空字符串。
如果元素的 轨道 URL 指定了 WebVTT
资源,并且元素的 kind 属性不在 章节元数据 或 元数据 状态中,则 WebVTT 文件必须是
使用提示文本的 WebVTT 文件。 [WEBVTT]
The srclang
属性提供文本轨道数据的语言。值必须是有效的 BCP 47 语言标签。如果元素的 kind
属性处于 字幕 状态,则必须存在此属性。
[BCP47]
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
属性都缺失或有相同值。
The default
属性是一个 布尔属性,如果指定,表示如果用户的偏好不表明另一个轨道更合适,则启用该轨道。
每个 媒体元素 不能有超过一个
track 子元素,其 kind 属性处于
字幕 或 字幕 状态,且
default 属性已指定。
每个 媒体元素 不能有超过一个
track 子元素,其 kind 属性处于
描述 状态,且 default
属性已指定。
每个 媒体元素 不能有超过一个
track 子元素,其 kind 属性处于
章节元数据 状态,且 default
属性已指定。
对于 track 元素,其
kind 属性处于 元数据 状态且
default 属性已指定的数量没有限制。
track.readyState返回 文本轨道就绪状态,用以下列表中的数字表示:
track.trackThe readyState 属性必须返回对应于 文本轨道就绪状态 of the track element's
text track, as defined by the following list:
此视频包含多种语言的字幕:
< 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 属性指定。)
HTMLMediaElement 对象(在本规范中audio 和 video)被简单地称为 媒体元素。
支持所有当前引擎。
Support in all current engines.
Support in all current engines.
Support in all current engines.
Support in all current engines.
Support in all current engines.
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 媒体元素属性、 src、 crossorigin、 preload、 autoplay、
loop、 muted、 controls和 loading,适用于所有 媒体元素。这些属性在本节中定义。
The loading
属性是一种 惰性加载属性。其作用是指示对视口外媒体资源的加载策略。
当 loading
属性的状态被更改为
Eager 状态时,用户代理必须执行下列步骤:
令 posterResumptionSteps 为 null。
如果 媒体元素 是 video 元素,则将
posterResumptionSteps 设为该 video 元素的 海报惰性加载恢复步骤。
如果 resumptionSteps 为 null 且 posterResumptionSteps 为 null,则返回。
如果 resumptionSteps 不为 null,则:
如果 posterResumptionSteps 不为 null,则:
将 video
元素的 海报惰性加载恢复步骤 设为 null。
调用 posterResumptionSteps。
当 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 audio 和
video 元素都可以用于音频或视频。
二者的主要区别仅在于 audio
元素没有用来显示可视内容(如视频或字幕)的播放区域,而 video
元素有。
每个 媒体元素 都有唯一的 媒体元素事件任务源。
To queue a media element task with a 媒体元素 element 和一系列步骤 steps, queue an element task on the 媒体元素的 媒体元素事件任务源 given element 和 steps。
支持所有当前的引擎。
media.error
支持所有当前的引擎。
返回一个 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
支持所有当前的引擎。
返回当前错误的错误代码,见下表。
media.error.message
支持所有当前的引擎。
返回有关遇到的错误情况的具体诊断信息。消息和消息格式在不同的用户代理之间通常并不统一。如果没有这样的消息可用,则返回空字符串。
每个 MediaError 对象都有一个 消息,它是一个字符串,还有一个 代码,它是以下之一:
MEDIA_ERR_ABORTED (数值1)MEDIA_ERR_NETWORK (数值2)MEDIA_ERR_DECODE (数值3)MEDIA_ERR_SRC_NOT_SUPPORTED (数值4)src
attribute or 分配的媒体提供对象 不适用。要 创建一个 MediaError,给定一个错误代码,它是上述值之一,返回一个新的 MediaError 对象,其
代码 是给定的错误代码,其 消息
是包含用户代理能够提供的关于错误情况原因的任何详细信息的字符串,如果用户代理无法提供这些详细信息,则为空字符串。此消息字符串不得仅包含通过提供的错误代码已经可用的信息;例如,它不得只是将代码翻译为字符串格式。如果没有比错误代码提供的更多的附加信息,则
消息 必须设置为空字符串。
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 元素。)
支持所有当前的引擎。
The crossOrigin IDL 属性必须 反映
the crossorigin
内容属性, 仅限于已知值。
A 媒体提供对象 是一个可以表示 媒体资源的对象,与 URL分开。 MediaStream
对象,
MediaSource
对象和 Blob
对象都是 媒体提供对象。
每个 媒体元素 都有一个 分配的媒体提供者对象,它是一个 媒体提供者 对象 或 null,初始为 null。
media.srcObject [ = source ]
仅一个引擎支持。
media.currentSrc
所有当前引擎均支持。
The currentSrc IDL 属性最初必须被设置为空
字符串。其值会由下文定义的 资源
选择算法 更改。
The srcObject getter 的步骤是返回 this的
已分配媒体提供者对象。
The srcObject
setter 的步骤是:
将 this的 已分配媒体提供者对象 设置为 给定 值。
有三种方式可以指定 媒体资源:
srcObject
IDL
属性、 src
内容属性,以及 source 元素。
IDL
属性优先级最高,其次是内容属性,再次是这些元素。
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)
支持所有当前引擎。
根据用户代理是否有信心播放给定类型的媒体资源,返回空字符串(否定回应)、"maybe"或"probably"。
The canPlayType(type) 方法必须返回
空字符串 ,如果 type 是 用户代理已知无法渲染的类型 ,
或者是类型 "application/octet-stream";
it must return "probably" if
the user agent is confident that the type represents a 媒体资源 ,且与此 audio 或
video 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 元素的
media.networkState
支持所有当前引擎。
返回元素的当前网络活动状态,以下列表中的代码之一。
当 媒体元素 与网络交互时,它们的当前网络活动由 networkState 属性表示。获取时,它必须返回元素的当前网络状态,该状态必须是以下值之一:
NETWORK_EMPTY (数值 0)NETWORK_IDLE (数值 1)NETWORK_LOADING (数值 2)NETWORK_NO_SOURCE (数值 3)The 资源选择算法 在下文定义,描述了
networkState
属性何时更改值以及触发哪些事件以指示此状态的变化。
media.load()
在所有当前引擎中都支持。
导致元素重置并开始从头选择和加载新的 媒体资源 。
所有 媒体元素 都具有一个 可以自动播放标志,其初始状态必须为 true,以及一个 延迟加载事件标志,其初始状态必须为 false。 当 延迟加载事件标志 为 true 时,该元素必须 延迟其文档的加载事件 。
当 load()
方法在 媒体元素 上被调用时,
用户代理必须运行下列步骤:
每个 媒体元素 有一个关联的布尔值 当前是否停顿,初始为 false。
The 媒体元素加载算法 包含下列步骤:
将此元素的 当前是否停顿 设为 false。
中止任何已为此元素运行的 资源选择算法 的已在运行的实例。
令 pending tasks 为该 任务 列表中属于该 媒体元素的 媒体元素事件任务源 的所有任务,这些任务位于某个 任务队列中。
对于 pending tasks 中每个会 解决待定播放承诺 或 拒绝待定播放承诺的任务,按相应任务被排入队列的顺序,立即解决或拒绝那些承诺。
从其 任务队列 中移除 pending tasks 中的每个 任务。
基本上,当媒体元素开始加载新资源时,待定的事件和回调会被丢弃,而正在进行中的将要被解决/拒绝的承诺会被立即处理。
如果该 媒体元素的 networkState
被设置为 NETWORK_LOADING
或 NETWORK_IDLE,
则
排队一个媒体元素任务
给该 媒体元素 ,用于 触发一个名为
named abort
的事件 于该 媒体元素上。
如果该 媒体元素的 networkState
未被设置为 NETWORK_EMPTY,则:
排队一个媒体元素任务 给该 媒体元素 ,用于 触发一个名为
named emptied
的事件 于该 媒体元素上。
如果有一个获取过程正在为该 媒体元素进行,用户代理应该停止它。
如果该 媒体元素的 已分配的媒体提供者对象 是一个
MediaSource
对象,则 将其从元素分离 。
如果 readyState
未被设置为 HAVE_NOTHING,
则将其设为该状态。
如果 paused
属性
为 false,则:
将 paused
属性设为 true。
取得待定播放承诺 and reject pending play promises
with the result and an "AbortError"
DOMException.
如果 seeking 为
true,则将其设为 false。
将 当前播放位置 设为 0。
将 正式播放位置 设为 0。
如果这导致 正式播放位置改变,则 排队一个媒体元素任务 给该 媒体元素 ,用于 触发一个名为
named timeupdate
的事件 于该 媒体元素上。
将 时间线偏移 设为 Not-a-Number (NaN)。
将 duration
属性更新为 Not-a-Number (NaN)。
用户代理 不会 为这一次的时长变化触发 durationchange
事件。
将 playbackRate
属性设为 defaultPlaybackRate
属性的值。
之前正在播放的任何该元素的 媒体资源 的播放将停止。
The 资源选择算法 用于 媒体元素 ,如下所示。此 算法始终作为 任务的一部分被调用,但该算法最开始的步骤之一 是返回,并继续 并行运行其余步骤。 此外,此算法与 事件循环 机制紧密 交互;特别是,它有 同步 区段 (作为 事件循环 算法的一部分被触发)。此类区段中的步骤以 ⌛ 标记。
将该元素的 networkState
属性设置为 NETWORK_NO_SOURCE
值。
将该元素的 显示海报 标志 设置为 true。
如果 媒体元素的 延迟加载 属性 处于 Eager 状态,或者 脚本 被禁用,则将 媒体 元素的 延迟 load 事件标志 设置为 true(这会 延迟 load 事件)。
等待稳定 状态,允许调用此算法的 任务 继续执行。 同步 区段 由此算法剩余的所有步骤组成,直到该算法说明 同步区段 已结束。( 同步区段 中的步骤以 ⌛ 标记。)
⌛ 如果 媒体元素的 blocked-on-parser 标志为 false, 则 填充待处理文本轨道列表。
⌛ 令 mode 为 null。
⌛ 令 candidate 为 null。
⌛ 如果 媒体元素的 已分配媒体提供者对象 不是 null,则将 mode 设置为 object。
⌛ 否则,如果 媒体
元素 有 source 元素
子元素,则将 mode 设置为 children ,并将 candidate to the first
source
element child in tree order.
⌛ 否则:
⌛ 将 networkState
设置为 NETWORK_EMPTY。
⌛ 将该元素的 延迟 load 事件标志 设置为 false。这会停止 延迟 load 事件。
结束 同步 区段 并返回。
⌛ 将 媒体元素的 networkState
设置为 NETWORK_LOADING。
⌛ 排队一个
媒体元素任务 ,以在 媒体元素 上
触发 名为 loadstart
at the media element.
运行以下列表中相应的步骤:
⌛ 将 currentSrc
属性设置为
空字符串。
Run the resource fetch algorithm with the 已分配媒体提供者对象. If that algorithm returns without aborting 此 算法的情况下返回,则加载失败。
因媒体提供者而失败:到达此步骤表示媒体 资源加载失败。 取得待处理的 play promise and queue a media element task given the 媒体元素 to run the 专用媒体 源失败步骤 。
等待上一步排队的 任务 执行完毕。
返回。该元素在此算法再次触发之前不会尝试加载另一个 资源。
⌛ 令 urlRecord 为 以编码方式解析 URL
的结果;
给定 src
attribute's value, relative to the
media element's node
document when the src attribute
was last changed.
⌛ 如果 urlRecord 不是 failure,则将 currentSrc
attribute to the result of applying the URL
serializer to urlRecord.
如果 urlRecord is not failure, then run the resource fetch algorithm with urlRecord. If that algorithm returns without aborting 此 算法的情况下返回,则 加载失败。
因属性而失败:到达此步骤表示媒体资源 加载失败,或者 urlRecord 为 failure。 取得待处理的 play promise and queue a media element task given the 媒体 元素 to run the 专用媒体源 失败步骤 。
等待上一步排队的 任务 执行完毕。
返回。该元素在此算法再次触发之前不会尝试加载另一个 资源。
⌛ 令 pointer 为 媒体元素子列表中由两个相邻节点定义的位置,将列表开头(列表中第一个 子节点之前,如有)和列表末尾(列表中最后一个子节点之后,如有)视为 自身也是节点。一个节点是 pointer之前的节点,另一个 节点是 pointer之后的节点。最初,令 pointer 为 candidate 节点与 下一个节点之间的位置(如果有下一个节点),如果它是最后一个节点,则为列表末尾。
当节点被 插入、 移除,以及 移动 到 媒体元素中时, pointer 必须按如下方式更新:
其他更改不会影响 pointer。
⌛ 处理候选项:如果 candidate 没有
src
属性,或者其 src
属性的值为空字符串,则结束
同步
区段,并跳到下面的 因元素而失败 步骤。
⌛ 如果 candidate 有一个 media
属性,且其值不 匹配
环境,则结束 同步区段,并跳到下面的
因元素而失败 步骤。
⌛ 令 urlRecord 为 以编码方式解析 URL
的结果;
给定 candidate的 src
attribute's value,
relative to candidate's node
document when the src attribute
was last changed.
⌛ 如果 urlRecord 为 failure,则结束 同步 区段,并跳到下面的 因元素而失败 步骤。
⌛ 如果 candidate 有一个 type
属性,且其值在被解析为 MIME
类型 (包括由 codecs 参数描述的任何编解码器,对于
定义了该参数的类型)时,表示 一种用户代理已知其无法
渲染的类型,则结束 同步区段,并跳到下面的
因元素而失败 步骤。
⌛ 将 currentSrc
attribute to
the result of applying the URL serializer to
urlRecord.
Run the resource fetch algorithm with urlRecord. If that algorithm returns without aborting 此 算法的情况下返回, 则加载失败。
因元素而失败: Queue a media element task given
the
媒体元素 to 触发 名为
error at
candidate.
等待稳定 状态。 同步区段 由此算法剩余的所有步骤组成,直到该算法说明 同步 区段 已结束。( 同步区段 中的步骤以 ⌛ 标记。)
⌛ 查找下一个候选项:令 candidate 为 null。
⌛ 搜索循环:如果 pointer 之后的节点是 列表末尾,则跳到下面的 等待 步骤。
⌛ 如果 pointer 之后的节点是 source
元素,
则令 candidate 为该元素。
⌛ 推进 pointer ,使得 pointer 之前的节点现在为 原本在 pointer之后的节点,而 pointer 之后的节点为原本在 pointer之后的那个节点之后的节点(如果有)。
⌛ 如果 candidate 为 null,则跳回 搜索 循环 步骤。否则,跳回 处理候选项 步骤。
⌛ 等待:将该元素的 networkState
属性设置为 NETWORK_NO_SOURCE
值。
⌛ 将该元素的 显示海报标志 设置为 true。
⌛ Queue a media element task given the 媒体元素 to set the element's 延迟 load 事件标志 设置为 false。这会停止 延迟 load 事件。
等待直到 pointer 之后的节点为列表末尾以外的节点。 (此步骤可能会永远等待。)
等待稳定 状态。 同步区段 由此算法剩余的所有步骤组成,直到该算法说明 同步 区段 已结束。( 同步区段 中的步骤以 ⌛ 标记。)
⌛ 将该元素的 延迟 load 事件标志 重新 设置为 true(这会再次 延迟 load 事件 ,以防它尚未 触发)。
⌛ 将 networkState
重新设置为 NETWORK_LOADING。
⌛ 跳回上面的 查找下一个候选项 步骤。
The dedicated media source failure steps with a list of promises promises are the following steps:
将 error
attribute
to the result of
creating a
MediaError with MEDIA_ERR_SRC_NOT_SUPPORTED.
将该元素的 networkState
属性设置为 NETWORK_NO_SOURCE
值。
将该元素的 显示 海报标志 设置为 true。
触发 名为
error at
the
media element.
Reject pending play promises with
promises 和
"NotSupportedError" DOMException.
将该元素的 延迟 load 事件标志 设置为 false。这会停止 延迟 load 事件。
To verify a media response given a response
response、一个 media
resource resource,以及 "entire resource" 或一个
(number, number 或 "until end") 元组 byteRange:
如果 response 是一个 网络错误,则返回 false。
如果 byteRange 是 "entire resource",则返回
true。
令 internalResponse 为 response的 unsafe response。
如果 internalResponse的 status 为 200,则返回 true。
如果 internalResponse的 status 不是 206,则返回 false。
If the result of extracting content-range values from internalResponse is failure, then return false.
注意,提取出的值并未被使用,特别地并没有与 byteRange进行比较。因此这一步起到对 `Content-Range`
头的语法验证作用,但如果响应上的 `Content-Range`
值与请求上的 `Range`
值不匹配,则这并不被视为失败。
令 origin 为 "rewritten" 如果
internalResponse的 URL 为 null;
否则为
internalResponse的 URL的
origin。
令 previousOrigin 为 resource的 origin。
如果以下任一为真:
previousOrigin 为 "none";
origin 与 previousOrigin 均为 "rewritten";或
origin 与 previousOrigin 均为 origins,且 origin is same origin with previousOrigin,
则将 resource的 origin 设为 origin。
否则,如果 response 是 CORS-cross-origin,则返回 false。
否则,将 resource的 origin 设为
"multiple"。
这确保了带有范围头的不可见响应(opaque responses)不会通过与来自不同源的其他响应拼接在一起而泄露信息。
返回 true。
The 资源获取算法 用于 媒体元素 和给定的 URL 记录 或 媒体提供者 对象 ,如下所示:
If the will lazy load element steps given the 媒体元素 return true:
令 resumptionSteps 为此算法从标有 令 mode 为 remote的步骤 开始的其余部分。
Start intersection-observing a lazy loading element for the 媒体 元素.
返回。
令 mode 为 remote。
如果该算法是以 媒体提供者对象调用的,则将 mode 设置为 local。
否则:
令 isTopLevelSelfFetch 为 false。
如果以下所有条件都为 true:
则将 isTopLevelSelfFetch 设置为 true。
如果 isTopLevelSelfFetch be "top-level-self-fetch" if
stringOrEnvironment is true; otherwise settingsObject。
令 object be the result of obtaining a blob object using the URL 记录的 blob URL 条目 和 stringOrEnvironment.
如果 object 是 媒体提供者对象,则将 mode 设置为 local。
如果 mode 为 remote,则令 当前媒体资源 为传递给此 算法的 URL 记录 给出的资源;否则,令 当前媒体资源 为 媒体提供者 对象给出的资源。无论哪种情况, 当前媒体资源 现在都是该元素的 媒体 资源。
Remove all media-resource-specific text tracks from the 媒体 元素的 待处理文本轨道列表, if any.
运行以下列表中相应的步骤:
可选地,运行以下子步骤。如果用户代理打算在用户明确请求之前不尝试获取资源
(例如作为实现 preload
属性的 none
关键字的一种方式),这就是预期行为。
将 networkState
设置为 NETWORK_IDLE。
Queue a media element task
given the 媒体
元素 to
触发
一个事件 ,该事件名为 suspend
。
Queue a media element task given the 媒体 元素 to set the element's 延迟 load 事件标志 设置为 false。这会停止 延迟 load 事件。
等待该任务运行。
等待一个 实现定义的 事件(例如,用户请求 媒体元素开始播放)。
将该元素的 延迟 load 事件标志 重新设置为 true(这会再次 延迟 load 事件 ,以防 它尚未被触发)。
将 networkState
设置为 NETWORK_LOADING。
Let destination be "audio" if the 媒体
元素 是 audio
element, or "video"。
令 request be the result of creating a potential-CORS
request given
current media resource的 URL 记录、
destination和 媒体
元素的
crossorigin
content attribute.
将 request的 initiator type 设置为 destination。
令 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)元组。
如果 byteRange 不是 "entire resource":
如果 byteRange[1] 是 "until end", then
add a range header to byteRange [0],向
request[0].
Otherwise, add a range header to byteRange [0] 和 byteRange[1],向 request[1].
获取 request,并将 processResponse 设置为给定 响应 response的以下步骤:
令 updateMedia be to queue a media element task given the 媒体元素 to run the first appropriate steps from the 媒体数据处理步骤 列表 中第一个适用的步骤。(这里使用新任务, 以便下面描述的工作相对于适当的 媒体元素事件任务 源 发生,而不是使用 网络任务源。)
令 processEndOfMedia 为以下步骤:如果获取过程 已无错误地完成,包括媒体数据解码,并且所有数据 都可供用户代理在无需网络访问的情况下使用,则用户代理必须继续执行下面的 最终步骤 。这可能永远不会发生,例如在流式传输无限 资源(如网络广播)时,或者如果资源长度超出用户代理缓存数据的能力。
If the result of verifying current media resource 和 byteRange and response 的结果为 false,则中止这些步骤。
Otherwise, incrementally read updateMedia's body given processEndOfMedia、一个空算法和 global, an empty algorithm, and response.
Update the media data with
the contents of response的
unsafe response
obtained in this fashion. response 可以是
CORS-same-origin
或 CORS-cross-origin;这会影响 媒体数据 中引用的字幕是否暴露在 API 中,并且对于
video
元素,还会影响视频绘制到 canvas
上时该 canvas 是否被污染。
The 媒体元素停滞超时 是一个 实现定义的 时长,应该约为 三秒。 当一个 媒体元素 正在主动尝试获取 媒体 数据 ,但在等于 媒体元素 停滞超时, the user agent must queue a media element task given the 媒体元素 to:
用户代理可以允许用户选择性地阻止或减慢 媒体数据 下载。 当 媒体元素的 下载被完全阻止时,用户代理必须 表现得好像它已停滞(而不是表现得好像连接已关闭)。下载速率 也可以由用户代理自动限速,例如为了在共享相同带宽的其他连接之间平衡下载。
用户代理可以随时决定不再下载更多内容,
例如在为一小时的媒体资源缓冲五分钟后,在等待用户
决定是否播放该资源时,在交互式资源中等待用户输入时,或者当用户离开页面时。当 媒体
元素'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:
只要用户代理可能仍然需要网络访问来获取 媒体 资源的部分内容,用户代理就必须停留在此步骤。
例如,如果用户代理已经丢弃了视频的前半部分,
那么即使 播放已经
结束,用户代理仍会停留在此步骤,因为始终存在用户可能回退定位到开头的可能性。
事实上,在这种情况下,一旦 播放已经结束,用户代理
最终会触发一个 suspend
事件,如前文所述。
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 媒体数据处理步骤列表 如下:
DNS 错误、HTTP 4xx 和 5xx 错误(以及其他协议中的等价错误),以及在用户代理确定 current media resource 是否可用之前发生的其他致命网络错误,连同文件使用不受支持的 容器格式,或者所有数据都使用不受支持的编解码器,必须导致用户代理 执行以下步骤:
用户代理应取消获取过程。
中止此子算法,返回到 资源选择算法。
创建一个 AudioTrack 对象来
表示该音频轨道。
Update the 媒体
元素的 audioTracks
属性的 AudioTrackList
object with the new AudioTrack object.
令 enable 为 unknown。
如果 媒体 资源 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 环绕声音频轨道而不是立体声音频轨道触发。
如果 enable 仍为 unknown,则如果 媒体 元素 尚未具有 已启用 的音频轨道,则将 enable 设置为 true,否则,将 enable 设置为 false。
如果 enable 为 true,则启用此音频轨道, 否则,不启用此音频轨道。
触发一个
事件 ,该事件名为 addtrack
at this AudioTrackList
object,
using TrackEvent,
并将 track
属性初始化为新的 AudioTrack 对象。
创建一个 VideoTrack
对象来表示该视频轨道。
Update the 媒体
元素的 videoTracks
属性的 VideoTrackList
object with the new VideoTrack object.
令 enable 为 unknown。
如果 媒体 资源 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。
这同样可能由 媒体片段语法触发。
如果 enable 仍为 unknown,则如果 媒体 元素 尚未具有 已选中 的视频轨道,则将 enable 设置为 true,否则,将 enable 设置为 false。
如果 enable 为 true,则选中此轨道并取消选中任何
先前选中的视频轨道;否则,不选中此视频轨道。如果其他轨道
被取消选中,则 会触发一个 change 事件。
触发一个
事件 ,该事件名为 addtrack
at this VideoTrackList
object,
using TrackEvent,
并将 track
属性初始化为新的 VideoTrack 对象。
这表明该资源可用。用户代理必须遵循以下子步骤:
将 时间线 偏移 更新为与上一步建立的 媒体 时间线 中零 时间对应的日期和时间,如果有的话。如果 媒体资源没有给出 显式时间和日期,则 时间线 偏移 必须设置为 Not-a-Number(NaN)。
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
。
对于 video
元素,设置 videoWidth
和 videoHeight
attributes, and 排队一个媒体
元素任务 ,以在该 媒体元素 上
触发一个
事件 ,该事件名为 resize
at the media element.
如果尺寸随后发生变化,还会触发后续的 resize
事件。
将 readyState
属性设置为 HAVE_METADATA。
作为将 loadedmetadata
属性设置为新值的一部分,
会触发 一个 readyState
DOM 事件。
令 jumped 为 false。
令 初始播放位置 为 0。
如果 媒体 资源 or the URL of the current media resource indicate a particular start time, then set the 初始播放位置 设置为该时间,并且如果 jumped 仍为 false,则 定位 到该时间。
如果没有 已启用 的音频轨道,则
启用一个音频轨道。这 会导致触发一个 change 事件。
如果没有 已选中 的视频轨道,
则选中一个视频轨道。这 会导致触发一个 change 事件。
一旦 readyState
属性达到 HAVE_CURRENT_DATA,
在 loadeddata 事件被触发后,将该
元素的 延迟 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),发生的致命网络错误
必须导致用户代理执行
以下步骤:
用户代理应取消获取过程。
将 error
attribute to the result of
creating a
MediaError with MEDIA_ERR_NETWORK.
将该元素的 networkState
属性
设置为 NETWORK_IDLE
值。
将该元素的 延迟 load 事件标志 设置为 false。这会停止 延迟 load 事件。
触发一个
事件 ,该事件名为 error at
the media element.
中止整个 资源选择 算法。
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:
用户代理应取消获取过程。
将 error
attribute to the result of
creating a
MediaError with MEDIA_ERR_DECODE.
将该元素的 networkState
属性
设置为 NETWORK_IDLE
值。
将该元素的 延迟 load 事件标志 设置为 false。这会停止 延迟 load 事件。
触发一个
事件 ,该事件名为 error at
the media element.
中止整个 资源选择 算法。
获取过程被用户中止,例如因为用户
按下了“停止”按钮,用户代理必须执行以下步骤。如果 load() 方法本身
在这些步骤运行时被调用,则不遵循这些步骤,因为上面的步骤会处理那种特定的中止。
用户代理应取消获取过程。
将 error
attribute to the result of
creating a
MediaError with MEDIA_ERR_ABORTED.
触发一个
事件 ,该事件名为 abort at
the media element.
如果 媒体元素的
readyState
属性的值等于 HAVE_NOTHING,
则将
该元素的 networkState
属性设置为
NETWORK_EMPTY
值,将该元素的
显示海报标志 设置为
true,并在该元素上 触发一个
事件 ,该事件名为 emptied
。
否则,将该元素的 networkState
属性设置为 NETWORK_IDLE
值。
将该元素的 延迟 load 事件标志 设置为 false。这会停止 延迟 load 事件。
中止整个 资源选择 算法。
服务器返回部分可用但无法以最佳方式渲染的数据时,必须 导致用户代理只渲染其能够处理的部分,并忽略其余部分。
如果 媒体数据 是 CORS-same-origin,则使用相关数据运行 暴露媒体资源特定文本轨道的步骤 。
跨源视频不会暴露其字幕,因为那会允许 攻击,例如恶意站点读取用户 内网上机密视频的字幕。
最终步骤:如果用户代理曾到达此步骤(只有在整个资源 被加载并保持可用时才可能发生):中止整个 资源选择算法。
当 媒体元素 要 忘记媒体元素的
媒体资源特定
轨道时,用户代理必须从 媒体元素的 文本
轨道列表 中移除所有 媒体资源特定
文本轨道,然后清空 媒体
元素的 audioTracks
属性的 AudioTrackList 对象,
然后清空 媒体元素的 videoTracks
属性的 VideoTrackList 对象。
作为此过程的一部分,不会触发任何事件(特别是不会触发 removetrack
事件);由调用此算法的那些算法触发的 error 和 emptied
事件可以代替使用。
The preload
属性是 枚举属性 ,具有以下关键字及状态:
| 关键字 | 状态 | 简要描述 |
|---|---|---|
auto
|
自动 | 提示用户代理可在不影响服务器的前提下优先考虑用户需求,可以乐观地下载整个资源。 |
none
|
无 | 提示用户代理,作者不期望用户需要该媒体资源,或服务器希望最小化不必要的流量。 该状态不会提示一旦开始缓冲时该如何积极地实际下载媒体资源(比如用户点击“播放”以后)。 |
metadata
|
元数据 | 提示用户代理作者不期望用户需要完整媒体资源,但获取资源元数据(尺寸、轨道列表、时长等),甚至前几帧是合理的。
如果用户代理严格只获取元数据,则 媒体元素 的 readyState
属性会被设为 HAVE_METADATA;
但通常会加载一些帧,因此更可能是 HAVE_CURRENT_DATA
或 HAVE_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 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.
在 audio 和 video 元素中,
如果 脚本可用, loading 属性
可以延迟 preload 属性
暗示的行为,直到该元素的
惰性加载恢复步骤 被运行。
media.buffered
所有主流引擎均支持。
返回一个 TimeRanges 对象,
表示用户代理已经缓冲的 媒体资源 的各个区间。
The buffered getter 步骤是返回一个新的
经规范化的
TimeRanges 对象 ,该对象表示
this的 媒体资源中(如有)用户代理已缓冲的范围。
用户
代理必须准确确定可用的范围,即使对于只能通过繁琐检查才能确定这些范围的媒体流也是如此。
通常,这只是从零点开始的连续区间,但若用户代理在 seek 时用 HTTP Range 请求,也可能出现多个区间。
用户代理可以丢弃先前缓冲的数据。
因此,某一时刻由 buffered
属性返回的对象包含的时间区间,
可能在稍后该属性返回的区间中消失。
每次都返回新对象不适合属性 getter,这里只是由于改变代价太高才保留此规则,不建议新接口效仿。
media.duration
所有当前引擎支持。
返回 媒体资源, in seconds, assuming that the start of the media resource is at time zero.
如果持续时间不可用,则返回 NaN。
对于无限流,返回 Infinity。
media.currentTime [ = value ]
所有当前引擎支持。
返回 官方播放位置,以秒为单位。
可以设置,以跳到指定时间。
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 属性必须,在获取时,返回
媒体元素的 默认播放起始位置,除非该值为零,在这种情况下它必须返回元素的 官方播放位置。返回值必须以秒为单位表示。在设置时,如果 媒体元素的 readyState
为 HAVE_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 最早可能位置的部分,则用户代理可以 排队一个媒体元素任务 ,将该 媒体元素 给定以运行这些步骤:
从 audioTracks
属性的 AudioTrackList
对象或 videoTracks
属性的 VideoTrackList
对象中移除该轨道(根据需要)。
触发一个名为
named removetrack
at the 媒体元素的 AudioTrackList 或
VideoTrackList
object, using
TrackEvent, with the
track
属性为代表轨道的 AudioTrack 或
VideoTrack 对象。
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
属性是一个 布尔属性 ,如果指定,表示 媒体元素 在到达 媒体资源 的末尾时应回到开始。
media.readyState
所有当前引擎支持。
返回一个值,该值表示元素当前相对于渲染 当前播放位置的状态,从以下列表中的代码中选择。
媒体元素 有一个 就绪状态,描述了它在 当前播放位置准备渲染的程度。可能的值如下;任何特定时间媒体元素的就绪状态是描述元素状态的最大值:
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
状态描述的所有条件,并且满足以下条件之一:
playbackRate推进,在播放到达
媒体资源末尾之前不会超过可用数据。
实际上, HAVE_METADATA 和 HAVE_CURRENT_DATA
之间的区别是微不足道的。真正唯一相关的区别是在将 video
元素绘制到
canvas上时,它区分了会绘制某些内容的情况(HAVE_CURRENT_DATA
或更高)与不会绘制任何内容的情况(HAVE_METADATA 或更低)。同样,
HAVE_CURRENT_DATA
(仅当前帧)和 HAVE_FUTURE_DATA
(至少当前帧和下一帧)之间的区别可能是微不足道的(在极端情况下,仅一个帧)。这种区别真正重要的唯一时间是页面提供“逐帧”导航接口时。
当 媒体元素 的
networkState 不为
NETWORK_EMPTY
时,其就绪状态发生变化时,用户代理必须按照以下步骤操作:
从以下列表中应用第一个适用的子步骤集:
HAVE_NOTHING,而新就绪状态是
HAVE_METADATA
排队一个媒体元素任务 ,将该 媒体元素 给定以 触发一个名为 named loadedmetadata
的事件。
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_DATA
或 HAVE_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 的事件。
HAVE_ENOUGH_DATA
如果之前的就绪状态是 HAVE_CURRENT_DATA
或更低,用户代理必须
排队一个媒体元素任务 ,将该 媒体元素 给定以 触发一个名为 named canplay 的事件,并且,如果元素的
paused 属性为
false,
通知关于播放
。
用户代理必须 排队一个媒体元素任务 ,将该 媒体元素 给定以 触发一个名为 named
canplaythrough
的事件。
如果元素不 符合自动播放条件,则用户代理必须中止这些子步骤。
用户代理可以运行以下子步骤:
paused
属性设置为
false。play 的事件。
或者,如果元素是 video
元素,用户代理可以开始观察元素是否 与视口相交。当元素开始 与视口相交时,如果元素仍然 符合自动播放条件,运行上述子步骤。可选地,当元素停止 与视口相交时,如果 可自动播放标志 仍然为真并且 autoplay 属性仍然指定,运行以下子步骤:
pause 的事件。
随着元素开始或停止 与视口相交,播放和暂停的子步骤可以多次运行,只要 可自动播放标志 为真。
用户代理不需要支持自动播放,建议用户代理尊重用户对该问题的偏好。建议作者使用 autoplay
属性而不是使用脚本强制视频播放,以便允许用户在需要时覆盖行为。
媒体元素的就绪状态可能会不连续地在这些状态之间跳跃。例如,媒体元素的状态可以直接从 HAVE_METADATA 跳到 HAVE_ENOUGH_DATA
,而不经过 HAVE_CURRENT_DATA
和 HAVE_FUTURE_DATA
状态。
The readyState IDL 属性在获取时必须返回上述描述的值,表示 媒体元素的当前就绪状态。
The autoplay 属性是一个 布尔属性。当存在时,用户代理(如本文中描述的算法所述)将自动开始播放 媒体资源 ,只要它可以在不停止的情况下进行。
建议作者使用 autoplay
属性,而不是使用脚本触发自动播放,因为这允许用户在不需要时覆盖自动播放,例如使用屏幕阅读器时。作者还被鼓励考虑完全不使用自动播放行为,而是让用户代理等待用户显式启动播放。
media.paused
在所有当前引擎中支持。
如果播放已暂停,则返回 true;否则返回 false。
media.ended
在所有当前引擎中支持。
如果播放已达到 媒体资源的结束,则返回 true。
media.defaultPlaybackRate [ = value ]
HTMLMediaElement/defaultPlaybackRate
在所有当前引擎中支持。
Returns the default rate of playback, for when the user is not fast-forwarding or reversing through the media resource.
可以设置此属性来更改默认的播放速率。
默认速率对播放没有直接影响,但如果用户切换到快进模式,当他们返回到正常播放模式时,预计播放速率将恢复为默认播放速率。
media.playbackRate [ = value ]
在所有当前引擎中支持。
返回当前的播放速率,其中 1.0 为正常速度。
可以设置此属性来改变播放速率。
media.preservesPitch
HTMLMediaElement/preservesPitch
如果使用了保持音调算法,当 playbackRate
不等于 1.0 时返回 true。默认值为 true。
可以设置为 false,使 媒体资源的音频音调随 playbackRate改变。这对审美和性能方面都有帮助。
media.played返回一个 TimeRanges 对象,表示用户代理已播放的
媒体资源 的范围。
media.play()
所有当前引擎均支持。
将 paused
属性设置为 false,如果需要的话,加载
媒体资源 并开始播放。如果播放已经结束,将从头开始重新播放。
media.pause()
所有当前引擎均支持。
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 对象具有 临时激活时允许播放,但可以做出例外,允许在 静音时播放。
当以下条件满足时, 媒体元素 被认为是 播放结束 :
元素的 readyState
属性为 HAVE_METADATA
或更高,并且
要么:
或者:
当 媒体元素 的
因错误而停止 ,是指该元素的 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_DATA
或 HAVE_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_DATA
或 HAVE_ENOUGH_DATA,
并且用户代理暂停了 媒体资源 的播放,
以便播放与 媒体资源 时间锚定且长度非零的内容,
或播放与 媒体资源 某段时间锚定但长度大于该段的内容。
一个 媒体元素 被认为是 因带内内容暂停 的一个例子是当用户代理正在播放来自外部 WebVTT 文件的 音频描述 时,而为某个提示生成的合成语音的时间长于 文本轨道提示开始时间 和 文本轨道提示结束时间之间的时间。
当 当前播放位置 达到 媒体资源 的末尾时,且 播放方向 为前向,用户代理必须遵循以下步骤:
如果 媒体元素 指定了
loop
属性,则 跳转 到 最早可能的位置
of the media resource and
return.
排队一个媒体元素任务 ,给定 媒体元素 和以下步骤:
当 当前播放位置 达到
最早可能的位置 的
媒体资源 时,如果 播放方向 为后向,则用户代理仅需 排队一个媒体元素任务
,给定
媒体元素 ,以 触发一个事件 ,事件名为 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;在设置时,用户代理必须遵循以下步骤:
如果给定值不被用户代理支持,则抛出
“NotSupportedError” DOMException。
将 playbackRate
设置为新值,如果元素处于 可能正在播放状态,则更改播放速度。
当 defaultPlaybackRate
或 playbackRate
属性值发生变化(无论是由脚本设置还是由用户代理直接更改,例如响应用户控制时),用户代理必须 排队一个媒体元素任务 ,给定 媒体元素 ,以
触发一个事件 ,事件名为 ratechange
,在 媒体元素上。用户代理必须平滑地处理属性更改,不能引入任何可感知的间隙或静音。
The preservesPitch 的获取步骤是,如果在播放期间应用了保持音高的算法,则返回
true。设置步骤是相应地开启或关闭保持音高的算法,而不引入任何可感知的间隙或静音。默认情况下,必须启用这种保持音高的算法(即,获取器将初始返回 true)。
The played
getter 步骤是返回一个新的 经规范化的 TimeRanges 对象 that
represents the ranges of points on the media timeline of this的
当前播放
位置 通常的单调递增所到达的, this的
current playback
position 上的点的范围(如有)。
每次返回一个新对象是一种不良的属性获取器模式,仅在这里被保留,因为改变它会很麻烦。这不应被复制到新的 API 中。
每个 媒体元素 都有一个 待处理播放承诺的列表,该列表最初必须是空的。
要 获取待处理播放承诺 对于一个 媒体元素,用户代理必须执行以下步骤:
让 promises 成为一个空的承诺列表。
将 媒体元素的 待处理播放承诺的列表 复制到 promises。
清空 媒体元素的 待处理播放承诺的列表。
要 解决待处理播放承诺 对于一个 媒体元素 和一个承诺列表 promises,用户代理必须用未定义值解决 promises 中的每个承诺。
要 拒绝待处理播放承诺 对于一个 媒体元素 和一个承诺列表 promises 及一个异常名称 error,用户代理必须用 error 拒绝 promises中的每个承诺。
要 通知播放状态 对于一个 媒体元素,用户代理必须执行以下步骤:
获取待处理播放承诺 并将结果赋值给 promises 。
排队一个媒体元素任务 给定该元素和以下步骤:
When the play()
method on a media element is
invoked, the user agent must run the following
steps:
如果 媒体元素 不被 允许播放,则返回
一个被拒绝的承诺 ,拒绝原因是 "NotAllowedError"
DOMException。
如果 媒体元素的 error 属性不为 null 并且其 code 为 MEDIA_ERR_SRC_NOT_SUPPORTED,则返回
一个被拒绝的承诺 ,拒绝原因是 "NotSupportedError"
DOMException。
如果 resumptionSteps 不为 null,则:
令 promise 为一个新的 Promise,并将 promise 添加到 待定播放 Promise 列表。
Run the internal play steps for the 媒体元素.
返回 promise。
The internal play steps for a media element are as follows:
如果该 media element的 networkState
属性的值为 NETWORK_EMPTY,
则调用该 media element的
资源选择算法。
如果 播放已结束 且 播放方向 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上。
如果该 media element的 paused 属性为 true,则:
将 paused
的值改为 false。
如果 show poster flag 为 true,则将该元素的 show poster flag 设为 false 并运行 time marches on 步骤。
排队一个媒体元素任务 给该 media element ,以便 触发一个名为
named play
的事件
于该元素上。
如果该 media element的
readyState
属性的值为 HAVE_NOTHING、
HAVE_METADATA,
或 HAVE_CURRENT_DATA,
则
排队一个媒体元素任务 给该 media element ,以便 触发一个名为
named waiting
的事件 于该元素上。
否则,该 media element的 readyState
属性的值为 HAVE_FUTURE_DATA
或 HAVE_ENOUGH_DATA:
则对该元素执行
notify about
playing
操作。
否则,如果该 media
element的 readyState
属性的值为 HAVE_FUTURE_DATA
或 HAVE_ENOUGH_DATA,
则
取得待定播放承诺 并 排队一个媒体元素任务 给该 media element
来 解决待定播放承诺 并返回结果。
媒体元素已经在播放。然而,有可能在排队任务运行之前, promise 会被 拒绝 。
将该 media element的 can autoplay flag 设为 false。
当 pause()
方法被调用,或当用户代理被要求暂停该 media element时,
用户代理必须运行下列步骤:
如果该 media element的 networkState
属性的值为 NETWORK_EMPTY,
则调用该 media element的
资源选择算法。
Run the internal pause steps for the media element.
The internal pause steps for a media element are as follows:
将该 media element的 can autoplay flag 设为 false。
如果该 media element的 paused 属性为
false,则运行下列步骤:
将 paused
的值改为 true。
取得待定播放承诺 并令 promises 为结果。
排队一个媒体元素任务 给该 media element ,并执行下列步骤:
触发一个名为 named timeupdate
的事件 于该元素上。
以 with
promises 和一个
"AbortError" DOMException拒绝
待定播放承诺。
将 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 element的 cues in that text track时,该文本轨道的所有 cue 列表 must be added to the media element的 新引入 Cue 列表中。当某个 media element的 新引入 Cue 列表 在该 media element的 show 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 element的 show 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 步骤如下:
令 current cues 为一列 cues,初始化为包含该 media element 的所有处于 或 showing text tracks of the media element (not the disabled 的那些)中,且其 开始时间 小于或等于 current playback position 且其 结束时间 大于 current playback position.
令 other cues 为一列 cues,初始化为包含该 media element 中所有处于 和 showing text tracks of the media element that are not present in current cues.
令 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.
如果自上次运行此算法以来, current playback position 只是通过正常播放期间的单调增加变化,则令 missed cues be the list of cues in other cues 中那些其 开始时间 大于或等于 last time 且其 结束时间 小于或等于当前的 current playback position. Otherwise, let missed cues 为空列表。
Remove all the cues in missed cues that are also in the media element的 新引入 Cue 列表, and then empty the element's 新引入 Cue 列表。
如果该时间是通过正常播放期间 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 更新比用户代理在解码视频时能舒适处理的更频繁。
If all of the cues in current cues 中的所有 cues 的 text track cue active flag 都已设置,且 other cues have their text track cue active flag 被设置,且 missed cues 为空,则返回。
如果该时间是通过正常播放期间 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的结束时间,也不会因该 cue 的 text track cue pause-on-exit flag 被设置而暂停播放。
令 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:
令 track be the text track with which the text track cue target is associated.
将新创建的该 任务 添加到 events中,并与时间 time、 text track track以及该 text track cue target相关联。
将 track 添加到 affected tracks中。
For each text track cue in
missed cues, 准备一个
名为 enter
的事件,针对该
TextTrackCue 对象,时间为该 text track cue
start time。
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中的较晚者。
For each text track cue in
current cues 中每个尚未设置其 text track cue active flag set, 准备一个 名为 enter 的事件,针对该
TextTrackCue
对象,时间为其 text
track
cue start time。
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 事件的任务之前。
任务 (按列表顺序),为该 media element for each 排队一个媒体元素任务 in events, in list order.
将 affected tracks 按这些 text tracks 在该 media element的 文本轨道列表中的出现顺序进行排序,并去重。
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
元素上触发同名事件。
Set the text track cue active flag of all the cues in the current cues中所有 cues 的 text track cue active flag ,并取消设置 other cues.
Run the rules for updating the text track rendering of each of the text tracks in affected tracks 中所有处于 showing, providing the text track的 text 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 element的 node document 不再是一个 fully active 文档,则播放将 停止 ,直到该文档再次处于活动状态为止。
当某个 media element 被 从
Document时,用户代理必须运行下列步骤:
等待稳定状态, allowing
the task
that removed the media element
from the
Document to continue. The 同步段
包含本算法剩余的所有步骤。( 同步段
中的步骤以 ⌛ 标记。)
⌛ 如果该 media element 仍 处于文档中,则返回。
⌛ Run the internal pause steps for the media element.
media.seeking如果用户代理当前正在寻找,则返回 true。
media.seekable
所有当前引擎均支持。
返回一个 TimeRanges 对象,表示用户代理能够寻找到的 媒体资源 的范围。
media.fastSeek(time)
尽可能快速地寻找到接近给定 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 标志,这意味着用户代理必须执行以下步骤。该算法与 事件循环 机制紧密交互;特别是,它具有 一个 同步部分 (作为 事件循环 算法的一部分触发)。该部分的步骤用 ⌛ 标记。
如果 媒体元素的 readyState
为 HAVE_NOTHING,则返回。
如果元素的 seeking
IDL属性为true,则表示此算法的另一个实例正在运行。终止该算法的另一个实例,而无需等待其运行的步骤完成。
将 seeking IDL属性设置为true。
如果搜索是响应DOM方法调用或设置IDL属性,则继续脚本。其余步骤必须 并行运行。除了标有⌛的步骤外,这些步骤随时可能被另一个实例调用而中止。
如果 new playback position 小于 最早可能的位置,则将其设为该位置。
如果(可能现在已更改的) new playback position 不在 seekable 属性提供的范围之一内,则将其设为 seekable 属性提供的最接近 new
playback
position的范围中的位置。如果两个位置都满足该约束(即 new playback position 正好位于 seekable 属性中的两个范围之间),则使用最接近 当前播放位置的位置。如果 seekable 属性中没有给定范围,则将
seeking IDL属性设置为false并返回。
如果设置了 approximate-for-speed 标志,则调整 new playback position 以允许快速恢复播放。如果此步骤之前的 new playback position 在 当前播放位置之前,则调整后的 new playback position 也必须在 当前播放位置之前。同样,如果此步骤之前的 new playback position 在 当前播放位置之后,则调整后的 new playback position 也必须在 当前播放位置之后。
例如,用户代理可以捕捉到附近的关键帧,以便在恢复播放之前不必花时间解码然后丢弃中间帧。
排队一个媒体元素任务
,给定 媒体元素 去 触发一个事件 ,名为 seeking 在该元素上。
将 当前播放位置 设置为 new playback position。
如果 媒体元素 在开始搜索之前是 潜在播放
状态,但搜索导致其 readyState
属性变为低于 HAVE_FUTURE_DATA的值,则将在该元素上触发一个
waiting 事件 。 at the element.
此步骤设置 当前播放位置,因此可以立即触发其他条件,例如播放何时达到媒体资源的末尾的规则(处理循环的一部分逻辑),即使在用户代理实际上能够渲染该位置的媒体数据之前(如下一步所确定)。
The currentTime 属性返回 官方播放位置,而不是 当前播放位置,因此在脚本执行之前独立于此算法进行更新。
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.
⌛ 将 seeking IDL属性设置为false。
⌛ 运行 时间向前推进 步骤。
⌛ 排队一个媒体元素任务 ,给定 媒体元素 去 触发一个事件 ,名为 timeupdate 在该元素上。
⌛ 排队一个媒体元素任务 ,给定 媒体元素 去
触发一个事件 ,名为 seeked 在该元素上。
The seekable getter 步骤是返回一个新的
经规范化的
TimeRanges 对象 ,该对象表示
this的 媒体资源中(如有)用户代理能够
seek
到的范围。
如果用户代理可以在 媒体资源中的任意位置进行寻找到,例如,因为这是一个简单的电影文件且用户代理和服务器支持 HTTP Range
请求,那么属性将返回一个具有一个范围的对象,该范围的开始是第一个帧的时间( 最早可能的位置,通常为零),结束时间是第一个帧的时间加上 duration 属性的值(这将等于最后一个帧的时间,可能为正无穷)。
该范围可能会不断变化,例如,如果用户代理在无限流上缓存滑动窗口。这在 DVR 观看直播电视时会看到。
每次返回一个新对象是属性获取器的一个糟糕模式,只在此处被铭记,因为改变它的成本很高。这不应被复制到新的 API 中。
用户代理应采取非常宽松和乐观的寻找到视图。用户代理还应在可能的情况下缓冲最近的内容,以使寻找到过程更快。
例如,考虑一个在没有 HTTP Range 请求支持的 HTTP 服务器上提供的大型视频文件。一个浏览器 可以 实现为只缓冲当前帧和获取后续帧的数据,从不允许寻找到,除了通过重启播放来寻找到开始。但是,这将是一个不好的实现。高质量的实现将缓冲最近几分钟的内容(或更多,如果有足够的存储空间),允许用户快速跳回并重新观看令人惊讶的内容而没有任何延迟,并且如果必要的话,还会允许通过从头开始重新加载文件来进行任意寻找到,这会更慢但仍然比仅仅重启视频并全部观看一遍来获取早期未缓冲的点更方便。
媒体资源 可能是内部脚本化的或交互式的。因此,一个 媒体元素 可能以非线性的方式播放。如果发生这种情况,用户代理必须在 寻找到 算法被使用时表现得好像当前播放位置 变化 是不连续的(以便相关事件被触发)。
一个 媒体资源 可以包含多个嵌入的音频和视频轨道。例如,除了主要的视频和音频轨道外,一个 媒体资源 还可以包含外语配音、导演评论、音频描述、备用角度或手语覆盖层。
media.audioTracks
所有当前引擎均支持。
返回一个 AudioTrackList
对象,表示在
媒体资源中可用的音频轨道。
media.videoTracks
所有当前引擎均支持。
返回一个 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 媒体资源 被加载到元素中:这些对象会被重用。(不过, AudioTrack
和 VideoTrack
对象则不会。)
AudioTrackList
和 VideoTrackList
对象支持所有当前的引擎。
支持所有当前的引擎。
支持所有当前的引擎。
The AudioTrackList
和 VideoTrackList
接口由前面章节中定义的属性使用。
支持所有当前的引擎。
支持所有当前的引擎。
[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
支持所有当前引擎。
media.videoTracks.length
支持所有当前引擎。
返回列表中的轨道数量。
audioTrack = media.audioTracks[index]
videoTrack = media.videoTracks[index]
返回指定的 AudioTrack 或
VideoTrack
对象。
audioTrack = media.audioTracks.getTrackById(id)
支持所有当前引擎。
videoTrack = media.videoTracks.getTrackById(id)
支持所有当前引擎。
返回具有给定标识符的 AudioTrack 或
VideoTrack
对象,如果没有具有该标识符的轨道,则返回 null。
audioTrack.id
支持所有当前引擎。
videoTrack.id
支持所有当前引擎。
返回给定轨道的 ID。如果格式支持 片段 if the format supports media
fragment
syntax, and that can be used with the getTrackById() 方法一起使用,则这是可使用的 ID。
audioTrack.kind
支持所有当前引擎。
videoTrack.kind
支持所有当前引擎。
返回给定轨道所属的类别。下面给出了 可能的轨道类别 。
audioTrack.label
支持所有当前引擎。
videoTrack.label
支持所有当前引擎。
返回给定轨道的标签(如果已知),否则返回空字符串。
audioTrack.language
支持所有当前引擎。
videoTrack.language
支持所有当前引擎。
返回给定轨道的语言(如果已知),否则返回空字符串。
audioTrack.enabled [ = value ]
支持所有当前引擎。
如果给定轨道处于活动状态,则返回 true,否则返回 false。
可以设置,以更改轨道是否已启用。如果同时启用多个音轨,则它们会混合。
media.videoTracks.selectedIndex
支持所有当前引擎。
返回当前选定轨道的索引(如果有),否则返回 −1。
videoTrack.selected [ = value ]
支持所有当前引擎。
如果给定轨道处于活动状态,则返回 true,否则返回 false。
可以设置,以更改轨道是否已选择。可以选择零个或一个视频轨道;在选择新轨道时,取消选择先前的轨道。
一个 AudioTrackList
对象表示一个动态列表,包含零个或多个音轨,其中零个或多个可以同时启用。每个音轨由一个
AudioTrack
对象表示。
一个 VideoTrackList
对象表示一个动态列表,包含零个或多个视频轨道,其中每次只能选择零个或一个。每个视频轨道由一个
VideoTrack
对象表示。
Tracks in AudioTrackList
和 VideoTrackList
对象中的轨道必须保持一致的顺序。如果 媒体资源
的格式定义了顺序,则必须使用该顺序;否则,顺序必须是轨道在 媒体资源中声明的相对顺序。使用的顺序称为列表的 自然顺序
。
因此,这些对象中的每个轨道都有一个索引;第一个索引为 0,每个后续轨道的编号比前一个高一。 如果 媒体资源 动态添加或删除音轨或视频轨道,则轨道的索引将动态更改。如果 媒体资源 完全更改,则所有先前的轨道将被删除并替换为新轨道。
The AudioTrackList
length 和 VideoTrackList
length
属性的获取器必须返回其对象在获取时表示的轨道数量。
The 支持的属性索引 of AudioTrackList
和
VideoTrackList
对象在任何时刻的支持的属性索引是从零到各自对象表示的轨道数量减一的数字(如果表示任何轨道)。如果一个
AudioTrackList
或 VideoTrackList
对象不表示任何轨道,则它没有
支持的属性索引。
To determine the value of an indexed property for
a
given index index 在 AudioTrackList
或 VideoTrackList
对象 list, the user agent must return the AudioTrack 或
VideoTrack
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
AudioTrackList
或 VideoTrackList
object (respectively) whose identifier
is equal to the value of the id 参数的值(如上定义的列表的自然顺序)。当没有轨道与给定参数匹配时,方法必须返回 null。
The AudioTrack
和 VideoTrack
对象表示
媒体资源的特定轨道。每个轨道可以有一个标识符、类别、标签和语言。
这些轨道的各个方面在轨道的生命周期内是永久的;即使从 媒体资源的 AudioTrackList
或 VideoTrackList
对象中移除这些轨道,这些方面也不会改变。
此外, AudioTrack
对象可以启用或禁用;这是音轨的 启用状态。创建 AudioTrack 时,其
启用状态
必须设置为 false(禁用)。 资源获取算法 可以覆盖此设置。
类似地,每个 VideoTrack 对象的
VideoTrackList
对象
中可以选择一个,这就是视频轨道的 选择状态。创建 VideoTrack 时,其
选择状态 必须设置为 false(未选择)。 资源获取算法 可以覆盖此设置。
The AudioTrack id 和 VideoTrack id 属性
必须返回轨道的标识符(如果有),否则返回空字符串。如果 媒体资源 的格式支持 媒体片段语法,则返回的特定轨道的标识符必须与使用该标识符作为该轨道在轨道维度中的名称时相同,从而启用该轨道 片段。 [INBAND]
例如,在 Ogg 文件中,这将是轨道的 Name 头字段。 [OGGSKELETONHEADERS]
The AudioTrack kind 和 VideoTrack kind 属性
必须返回轨道的类别(如果有),否则返回空字符串。
轨道的类别是下表第一列中根据第二列和第三列中的定义最适合该轨道的字符串,如由 媒体资源中的元数据确定。表中某一行第三列中的单元格说明了该行第一列中给定类别适用的对象;某个类别仅在适用于音轨时才适用于音轨,仅在适用于视频轨道时才适用于视频轨道。类别必须仅返回
AudioTrack
对象,如果它们适用于音频,并且必须仅返回 VideoTrack
对象,如果它们适用于视频。
对于 Ogg 文件,轨道的 Role 头字段提供了相关元数据。对于 DASH 媒体资源, Role 元素传达了信息。对于 WebM,目前只有
FlagDefault 元素映射到一个值。 从媒体容器到 HTML 的带内媒体资源轨道的来源 有更多细节。
[OGGSKELETONHEADERS] [DASH] [WEBMCG] [INBAND]
| 类别 | 定义 | 适用于... | 示例 |
|---|---|---|---|
"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 label 和 VideoTrack label
属性必须返回轨道的标签(如果有),否则返回空字符串。 [INBAND]
The AudioTrack language 和
VideoTrack
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 AudioTrackList
和 VideoTrackList
interfaces:
| 事件处理程序 | 事件处理程序事件类型 |
|---|---|
onchange
支持所有当前引擎。 Firefox🔰
33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? 支持所有当前引擎。 Firefox31+Safari7+Chrome33+
Opera?Edge79+ Edge (旧版)18Internet Explorer不支持 Firefox Android?Safari iOS?Chrome Android?WebView Android4.4+Samsung Internet?Opera Android? 支持所有当前引擎。 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
支持所有当前引擎。 Firefox🔰
33+Safari7+Chrome🔰
37+
Opera?Edge🔰 79+ Edge (旧版)不支持Internet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? 支持所有当前引擎。 Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer11 Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ 支持所有当前引擎。 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
|
The audioTracks
和 videoTracks
属性允许脚本选择应该播放的轨道,但也可以通过在 片段 中指定特定轨道,以声明方式选择特定轨道
,即通过指定
URL 的 媒体资源。
片段 的格式取决于 MIME类型 of the
media
resource. [RFC2046] [URL]
在这个例子中,一个使用支持 媒体片段语法 的格式的视频被嵌入,以便启用标记为“Alternative”的替代角度,而不是默认的视频轨道。
< video src = "myvideo#track=Alternative" ></ video >
A 媒体元素 可以有一组相关的 文本轨迹,称为 媒体元素的 文本轨迹列表。 文本轨迹 按以下顺序排序:
对应于 text tracks corresponding to track
element children of the 媒体元素的 树顺序中。
Any text tracks added using the addTextTrack()
method, in the order they were added,
oldest first.
任何 特定于媒体资源的文本轨迹 (文本轨迹 对应于 媒体资源中的数据),按 媒体资源的格式规范中定义的顺序排列。
A 文本轨道 是一个 TextTrack 对象,并由以下组成:
这决定了用户代理如何处理轨迹。类型由一个字符串表示。可能的字符串包括:
subtitles
captions
descriptions
chapters
metadata
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中暴露轨迹之外,用户代理将忽略文本轨迹。没有提示激活,没有事件触发,用户代理不会尝试获取轨迹的提示。
表示文本轨迹已激活,但用户代理未主动显示提示。如果尚未尝试获取轨迹的提示,用户代理将立即尝试。用户代理维护一个活跃提示的列表,并相应触发事件。
表示文本轨道是活跃的。如果尚未尝试获取轨道的提示,用户代理将立即进行此尝试。用户代理正在维护一个列表,记录哪些提示是活跃的,并相应地触发事件。此外,对于 类型
为 subtitles
或 captions的文本轨道,提示适当地叠加在视频上;对于
类型 为 descriptions的文本轨道,用户代理以非视觉方式向用户提供提示;对于
类型 为 chapters的文本轨道,用户代理提供一种机制,使用户可以通过选择提示在
媒体资源 中的任何一点进行导航。
一个 文本轨迹提示的列表,以及更新文本轨迹渲染的 规则。例如,对于WebVTT, 更新WebVTT文本轨迹显示的规则. [WEBVTT]
每个 媒体元素 都有一个 待处理文本轨迹列表,该列表必须最初为空,还有一个 被解析器阻塞 标志,该标志必须最初为假,以及一个 是否执行了自动轨迹选择 标志,该标志也必须最初为假。
当要求用户代理 填充 待处理文本轨道列表 (属于某个 媒体元素)时,用户代理必须将该 元素的 待处理 文本 轨道列表 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。
每个 媒体元素 都有一个 待处理文本轨道变更通知标志, 其初始时必须未设置。
每当一个 文本轨道 位于某个 媒体元素的 文本 轨道列表 中,并且其 文本轨道模式 改变 值时,用户代理必须为该 媒体元素运行 以下步骤:
如果该 媒体元素的 待处理文本轨道变更通知 标志 已设置,则返回。
设置该 媒体元素的 待处理文本轨道变更通知 标志。
Queue a media element task given the 媒体元素 to run these steps:
取消设置该 媒体元素的 待处理文本轨道变更 通知 标志。
Fire an event named change at the 媒体元素的 textTracks
属性的 TextTrackList
object.
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.
此外,每个 文本轨道提示 都有两 项动态信息:
该标志初始时必须未设置。该标志用于确保在提示变为活动或非活动时 适当地触发事件,并确保渲染正确的提示。
每当 文本轨道提示 从其 文本轨道的 文本轨道提示列表中
移除时;每当
文本轨道 本身从其 媒体元素的 文本
轨道列表 中移除,或其 文本轨道
模式 更改为 禁用时;
以及每当 媒体元素的 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 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]
A 媒体资源特定文本轨迹 是一个 文本轨迹 ,对应于在 媒体资源中找到的数据。
处理和渲染此类数据的规则由相关规范定义,例如,如果 媒体资源 是视频,则由视频格式规范定义。一些遗留格式的详细信息可以在 从媒体容器中获取嵌入式媒体资源轨迹到HTML中找到。 [INBAND]
当 媒体资源 包含用户代理识别并支持作为 文本轨迹的数据时,用户代理将执行 暴露媒体资源特定文本轨迹的步骤 the steps to expose a media-resource-specific text track with the relevant data, as follows.
将相关数据与一个新的 文本轨道相关联。该 文本 轨道 是一个 媒体资源特定的文本轨道。
根据相关规范定义的相关 数据语义,设置新的 文本轨道的 种类、 标签、 语言和 标识符 。 如果该数据中没有标签,则 标签 必须设置为 空字符串。
如果 媒体资源 采用的 格式支持 媒体片段 语法,则 标识符 必须与 在这种 片段的轨道维度中 用作轨道名称时会启用该轨道的标识符相同。
将 文本轨道提示列表 与适用于所涉格式的 用于更新 文本轨道渲染的规则 相关联。
如果新的 文本轨道的 种类 是 chapters
或 metadata,
then set the text track in-band
metadata track dispatch type as follows, based on the type of the 媒体
资源:
CodecID 元素的值。 [WEBMCG]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 box 有 mett 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]
将新的 文本轨道的 模式 设置为 与用户偏好以及相关规范对该数据的要求一致的模式。
例如,如果没有其他活动字幕,并且这是一个强制 字幕轨道(即在音轨的主要语言中给出字幕的字幕轨道,但 仅用于实际上使用另一种语言的音频),那么这些字幕可能会在 此处被激活。
Fire an event
named addtrack
at the 媒体元素的 textTracks
属性的 TextTrackList
对象上,
使用 TrackEvent, with the
track
属性初始化为该 文本
轨道。
The 文本轨迹类型 由元素的 kind
属性的状态确定,依据下表;对于第一列中的状态, 类型
是第二列中给定的字符串:
| 状态 | 字符串 |
|---|---|
| Subtitles | subtitles
|
| Captions | captions
|
| Descriptions | descriptions
|
| Chapters metadata | chapters
|
| Metadata | metadata
|
随着 kind、
label、
srclang和
id 属性
被设置、更改或移除, 文本
轨道 必须按照上述定义相应地更新。
对 轨迹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
元素被添加到
媒体元素的 文本轨迹列表时,用户代理必须 将媒体元素任务排入队列 ,给定 媒体元素 ,按以下步骤运行
媒体元素:
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:
When the steps above say to perform automatic text track selection for one or more 文本轨迹类型, it means to run the following steps:
令 candidates be a list consisting of the text tracks in the 媒体元素的 文本轨迹列表 中, 文本轨迹 的类型是传递给算法的类型之一(如果有),按 文本轨迹列表中给定的顺序。
如果 candidates 为空,则返回。
If any of the text tracks in candidates have a 文本轨迹模式 设置为 显示,则返回。
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
元素,它必须运行以下算法。此算法与 事件循环 机制密切互动;特别是,它有一个
同步部分
(在 事件循环
算法的一部分触发)。该部分的步骤标有⌛。
在允许导致这些步骤运行的情况下, 并行运行剩余步骤。
⌛如果 track
元素的父元素是 媒体元素,则令
corsAttributeState 为父 媒体元素的 crossorigin
内容属性的状态。否则,令
corsAttributeState 为 无CORS。
如果 URL 不为空字符串,则:
令 request 为 创建一个潜在的CORS请求 的结果,给定
URL、“track”和 corsAttributeState,并设置
同源回退标志 。
将 request的 启动器类型 设置为“track”。
获取 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
元素上。
跳到标记为 顶部的步骤。
每当 track
元素的 src
属性被设置、更改或删除时,用户代理必须 立即 清空该元素的 文本轨迹的 文本轨迹提示列表。(这也会导致上面的算法停止从以前给定的URL获取的资源中添加提示,如果有的话。)
特定格式的文本轨迹提示如何解释,以便由HTML用户代理进行处理,由该格式定义。在缺乏此类规范的情况下,本节提供了一些限制,以便实现可以尝试一致地暴露这些格式。
为了支持 文本轨迹 模型, 每个定时数据单元被转换为一个 文本轨迹提示。 当 格式的特性与 文本轨迹提示 的 方面在本规范中没有定义时,实现必须 确保映射与上述 文本轨迹提示 的 方面的定义一致,并符合以下限制:
如果格式没有明显的类似物,应设置为空字符串。
应设置为false。
在所有当前引擎中都支持。
[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
所有当前引擎均支持。
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)
所有当前引擎均支持。
返回具有给定标识符的 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 文本轨道列表中的顺序相同。
所有当前引擎均支持。
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.
所有当前引擎均支持。
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.kind
所有当前引擎均支持。
返回 文本轨道种类 字符串。
textTrack.label
所有当前引擎均支持。
返回 文本轨道标签;如果存在 一个,则返回它,否则返回空字符串 (表示如果该对象暴露给用户,可能需要根据该 对象的其他属性生成一个自定义标签)。
textTrack.language
所有当前引擎均支持。
返回 文本轨道语言 字符串。
textTrack.id
所有当前引擎均支持。
返回给定轨道的 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
返回 文本轨道带内元数据轨道分派 类型 字符串。
textTrack.mode [ = value ]
所有当前引擎均支持。
返回 文本轨道模式,由 以下列表中的字符串表示:
可以设置,以更改模式。
textTrack.cues
所有当前引擎均支持。
返回 文本轨道
提示列表,作为一个 TextTrackCueList
对象。
textTrack.activeCues
所有当前引擎均支持。
Returns the text track cues from the 文本轨道
提示列表 that are currently active (i.e. that start before the 当前播放
位置 之前开始并在其之后结束的提示),作为一个 TextTrackCueList 对象。
textTrack.addCue(cue)
所有当前引擎均支持。
将给定提示添加到 textTrack的 文本轨道 提示列表中。
textTrack.removeCue(cue)
所有当前引擎均支持。
从 textTrack的 文本轨道 提示列表中移除给定提示。
The addTextTrack(kind, label,
language) method of media
elements,
when invoked, must run the following steps:
创建一个新的 文本轨道,并将其 文本轨道种类 设置为 kind,其 文本轨道标签 设置为 label,其 文本轨道 语言 设置为 language,其 文本轨道就绪状态 设置为 文本轨道已加载 状态,其 文本轨道模式 设置为 模式,并将其 文本轨道提示列表 设置为空列表。
初始时, 文本轨道 提示列表 不与任何 用于更新文本轨道渲染的规则相关联。当一个 文本轨道提示 被添加到其中时, 该 文本轨道 提示列表 的规则会相应地被永久设置。
Queue a media element
task given the 媒体元素 , fire an event named addtrack at the 媒体元素的 textTracks 属性的
TextTrackList 对象上,
使用 TrackEvent, with the track
属性初始化为新的 文本轨道。
返回新的 文本轨道。
The id getter
步骤
是返回 this的 identifier。
The inBandMetadataTrackDispatchType
getter 步骤是返回 this的 带内元数据轨道分派类型。
The cues
getter
步骤是:
返回一个 实时 TextTrackCueList 对象,该对象
表示 this的
文本轨道提示列表
的子集,
其中 结束时间 出现在 脚本启动时最早可能
位置或之后,并按 文本轨道提示顺序排列。
对于每个 TextTrack 对象,当一个对象
被返回时,每次都必须返回同一个
TextTrackCueList 对象。
The 脚本启动时最早可能位置 is whatever the earliest possible position was the last time the 事件循环 reached step 1.
The activeCues getter 步骤是:
返回一个 实时 TextTrackCueList 对象,该对象
表示 this的
文本轨道提示列表 的子集,其中 脚本启动时活动标志已设置,
并按 文本
轨道提示顺序排列。
对于每个 TextTrack 对象,当一个对象
被返回时,每次都必须返回同一个
TextTrackCueList 对象。
如果一个 文本轨道提示's active flag was set when the script started if its 文本轨道提示活动 标志 在 事件循环 上一次到达 步骤 1.
The addCue(cue) 方法步骤是:
如果 list 尚未有任何关联的 用于更新文本 轨道渲染的规则,则将 list with the rules for updating the text track rendering appropriate to cue.
如果 list关联的 用于更新文本轨道
渲染的规则
are not the same rules for updating the text track
rendering as appropriate for
cue, then throw an "InvalidStateError"
DOMException。
如果给定的 cue 位于某个 文本轨道提示列表, then remove cue from that 文本轨道提示列表.
将 cue 添加到 list。
The removeCue(cue) 方法步骤是:
如果给定的 cue 不在 this的 文本轨道
提示列表中,则抛出一个 "NotFoundError"
DOMException。
在这个例子中,使用一个 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();
}
Support in all current engines.
[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
对象表示一个按特定顺序动态更新的 文本轨道提示 列表。
所有主流引擎均支持。
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.
所有主流引擎均支持。
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。
所有当前引擎都支持。
[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.trackReturns 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。
可设置。
所有当前引擎都支持。
所有当前引擎都支持。
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 文本
轨道提示标识符 必须设置为新值。
所有当前引擎都支持。
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.
所有当前引擎都支持。
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.
所有当前引擎都支持。
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
文本轨道
提示退出时暂停标志 ,否则必须
取消设置。
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
所有当前引擎都支持。 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
所有当前引擎都支持。 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
所有当前引擎都支持。 Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ |
exit
|
本节为非规范性内容。
文本轨道可以用于存储与媒体数据相关的数据,用于交互或增强视图。
例如,显示体育直播的页面可以包含当前比分的信息。假设一个机器人比赛正在直播,图像可以覆盖分数,如下所示:
为了使得比分显示在用户任意快进视频时都能正确渲染,元数据文本轨道提示需要根据比分的适当长度设置。例如,在上面的框架中,可能会有一个持续整个比赛时间的提示,给出比赛编号,一个提示持续到蓝方联盟的分数变化,一个提示持续到红方联盟的分数变化。如果视频只是现场直播流,右下角的时间可能会根据当前视频时间自动派生,而不是基于提示。然而,如果视频只是精彩片段,那么这些时间也可能会在提示中给出。
以下显示了在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
事件是有速率限制的。)
需要使用 URL to identify the return values of
the AudioTrack kind or
VideoTrack kind
IDL属性的其他规范或格式,或者识别 文本轨道类型,必须使用
about:html-kind
URL。
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 ]
所有当前引擎支持。
返回当前播放音量,范围为0.0到1.0,其中0.0是最安静的,1.0是最响亮的。
可以设置以更改音量。
如果新值不在0.0到1.0的范围内,则抛出 "IndexSizeError" DOMException
。
media.muted [ = value ]
所有当前引擎支持。
如果音频被静音,返回true,覆盖 volume
属性;如果 volume 属性被尊重,返回false。
可以设置,以更改音频是否被静音。
一个 媒体元素 具有一个 播放音量,它是范围 0.0(静音)到 1.0(最大声)内的一个分数。 初始时,音量应为 1.0,但用户代理可以在会话之间记住最后设置的值, 以每站点为基础或其他方式记住,因此音量可以从其他值开始。
To set the playback volume of a 媒体元素 element to a number value:
如果 element的 播放 音量 等于 value,则返回。
将 element的 播放 音量 设置为 value。
如果 element 不 允许 播放, then run the internal pause steps for element.
排队一个媒体元素
任务 ,以在 element 上 触发一个事件 ,其名称为 volumechange at
element.
The volume setter 步骤是:
如果给定值不在 0.0 到 1.0(含)范围内,则抛出一个
"IndexSizeError" DOMException。
Set the playback volume of this to the given value.
如果以下任一项为真,则 媒体元素 is 已静音 :
其 静音状态 为 true。
The 播放方向 为 向后。
其 playbackRate
低到或高到使用户代理无法有用地播放音频。
每个 媒体元素 都有一个 静音
状态,它要么是 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:
如果 element的 静音状态 等于 value,则返回。
将 element的 静音状态 设置为 value。
如果 element 不 允许 播放, then run the internal pause steps for element.
排队一个媒体元素
任务 ,以在 element 上 触发一个事件 ,其名称为 volumechange
at element.
The muted setter steps are to set the muted
state of this to the given value.
用户代理具有一个关联的 音量锁定 (布尔值)。其值是 实现定义的 ,并确定 播放音量 是否生效。
元素的 有效媒体 音量 按如下方式确定:
如果用户已指示用户代理要覆盖该元素的音量, 则返回用户期望的音量。
如果用户代理的 音量锁定 为 true, 则返回系统 音量。
如果元素 已静音,则 返回 0。
令 volume be the playback volume of the audio portions of the 媒体 元素, in range 0.0 (silent) to 1.0 (loudest).
返回 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 >
所有当前引擎支持。
实现 TimeRanges 接口的对象表示一系列时间范围(期间)。
[Exposed =Window ]
interface TimeRanges {
readonly attribute unsigned long length ;
double start (unsigned long index );
double end (unsigned long index );
};
media.length
所有当前引擎支持。
返回对象中的范围数。
time = media.start(index)
所有当前引擎支持。
返回给定索引的范围的开始时间。
如果索引超出范围,则抛出 "IndexSizeError" DOMException
。
time = media.end(index)
所有当前引擎支持。
返回给定索引的范围的结束时间。
如果索引超出范围,则抛出 "IndexSizeError" DOMException
。
一个 TimeRanges 对象具有 范围,它是由零个或多个
列表 构成的
时间范围。
A 时间范围 是一个具有以下 结构体 with the following 项的:
一个 起点,一个以秒为单位的数字。
一个 终点,一个以秒为单位的数字。
The start(index) 方法步骤是:
如果 index 大于或等于 this的 范围的
大小,则抛出
"IndexSizeError" DOMException。
The end(index) 方法步骤是:
如果 index 大于或等于 this的 范围的
大小,则抛出
"IndexSizeError" DOMException。
一个 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 buffered、 seekable和
played IDL attributes of media
elements must be that element's 媒体时间线。
TrackEvent 接口所有当前引擎支持。
[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
所有当前引擎支持。
返回事件相关的轨道对象(TextTrack, AudioTrack,
或
VideoTrack)。
The track
属性必须返回它初始化时的值。它代表事件的上下文信息。
本节为非规范性内容。
在 媒体元素 上触发以下事件,作为上述处理模型的一部分:
| 事件名称 | 接口 | 触发时机... | 前提条件 |
|---|---|---|---|
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
所有当前引擎支持。 Firefox9+Safari3.1+Chrome3+
Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ |
Event
|
用户代理在 媒体数据 完全下载之前停止获取,但不是由于错误。 | error 是一个代码为 MEDIA_ERR_ABORTED的对象。
networkState
等于 NETWORK_EMPTY
或
NETWORK_IDLE,取决于何时中止下载。
|
error
所有当前引擎支持。 Firefox6+Safari3.1+Chrome3+
Opera11.6+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android?Samsung Internet?Opera Android12+ |
Event
|
在获取 媒体数据 时发生错误或资源类型不支持媒体格式。 | error 是一个代码为 MEDIA_ERR_NETWORK
或更高的对象。 networkState 等于 NETWORK_EMPTY 或
NETWORK_IDLE,取决于何时中止下载。
|
emptied
HTMLMediaElement/emptied_event 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ |
Event
|
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).
|
networkState 为
NETWORK_EMPTY;所有IDL属性都在其初始状态。
|
stalled
HTMLMediaElement/stalled_event 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ |
Event
|
用户代理尝试获取 媒体数据,但数据意外未到达。 | networkState 为
NETWORK_LOADING。
|
loadedmetadata
HTMLMediaElement/loadedmetadata_event 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ |
Event
|
用户代理刚刚确定了 媒体资源 的持续时间和维度,并且 文本轨道已准备好。 | readyState 首次等于或大于
HAVE_METADATA 。
|
loadeddata
HTMLMediaElement/loadeddata_event 所有当前引擎支持。 Firefox3.5+Safari3.1+Chrome3+
Opera10.5+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android11+ |
Event
|
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
所有当前引擎支持。 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
所有当前引擎支持。 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
所有当前引擎支持。 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
所有当前引擎支持。 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 defaultPlaybackRate
或
playbackRate
属性刚刚更新。
|
|
resize
|
Event
|
One or both of the videoWidth 和 videoHeight 属性之一或两者刚刚更新。
|
媒体元素 是 video 元素; readyState 不为 HAVE_NOTHING
|
volumechange
HTMLMediaElement/volumechange_event 所有当前引擎支持。 Firefox6+Safari3.1+Chrome3+
Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer9+ Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+ |
Event
|
Either the volume 属性或 muted 属性已更改。在相关属性的setter返回后触发。
|
以下事件会在 source 元素上触发:
| 事件名称 | 接口 | 触发时机 |
|---|---|---|
error
|
Event
|
在获取 媒体数据 时发生错误或资源类型不是支持的媒体格式。 |
以下事件会在 AudioTrackList、 VideoTrackList和
TextTrackList 对象上触发:
| 事件名称 | 接口 | 触发时机 |
|---|---|---|
change
所有当前引擎支持。 Firefox🔰
33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+ Edge (旧版)NoInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? 所有当前引擎支持。 Firefox31+Safari7+Chrome33+
Opera?Edge79+ Edge (旧版)18Internet ExplorerNo Firefox Android?Safari iOS?Chrome Android?WebView Android4.4+Samsung Internet?Opera Android? 所有当前引擎支持。 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
所有当前引擎支持。 Firefox🔰
33+Safari7+Chrome🔰 37+
Opera?Edge🔰 79+ Edge (旧版)NoInternet Explorer10+ Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android? 所有当前引擎支持。 Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer11 Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android? 所有当前引擎支持。 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+ 所有当前引擎支持。 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
所有当前引擎支持。 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
所有当前引擎支持。 Firefox31+Safari6+Chrome23+
Opera12.1+Edge79+ Edge (旧版)12+Internet Explorer10+ Firefox Android?Safari iOS7+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+ |
Event
|
提示已停止活动。 |
The main security and privacy implications of the video 和 audio
元素的主要安全和隐私影响来自跨源嵌入媒体的能力。威胁可以从两个方向流动:从恶意内容到受害页面,以及从恶意页面到受害内容。
如果受害页面嵌入恶意内容,威胁在于内容可能包含脚本代码,试图与嵌入内容的 Document
交互。为避免这种情况,用户代理必须确保内容无法访问嵌入页面。在使用DOM概念的媒体内容的情况下,嵌入的内容必须被视为在其自己无关的 顶级可遍历中。
例如,如果在 video
元素中嵌入一个SVG动画,用户代理不会给予它访问外部页面DOM的权限。从SVG资源中的脚本视角来看,SVG文件将显得处于一个没有父级的单独顶级可遍历中。
如果恶意页面嵌入受害内容,威胁在于嵌入页面可能会从内容中获取其本不会访问的信息。API确实暴露了一些信息:媒体的存在、其类型、其持续时间、其大小及其主机的性能特征。这些信息已经可能带来问题,但实际上可以通过 img
元素获取到差不多的信息,因此被认为是可以接受的。
然而,如果用户代理进一步暴露内容中的元数据,如字幕,则可能获得显著更敏感的信息。因此,只有在视频资源使用CORS时才暴露这些信息。 crossorigin
属性允许作者启用CORS。 [FETCH]
没有这个限制,攻击者可能会欺骗在企业网络内运行的用户访问一个试图从企业内联网泄露位置加载视频的网站。如果这样的影片包含新产品的机密计划,那么能够读取字幕将造成严重的机密泄露。
本节为非规范性内容。
在小型设备(如机顶盒或手机)上播放音视频资源通常受到设备硬件资源有限的限制。例如,一个设备可能只支持同时播放三个视频。因此,当媒体元素 media
elements 播放完毕时,通过非常谨慎地移除对该元素的所有引用并允许其被垃圾回收,或者更好的方法是将元素的 src
属性设置为空字符串,来释放资源。如果设置了 srcObject
,则将 srcObject
设置为null。
同样地,当播放速率不完全是1.0时,硬件、软件或格式限制可能会导致视频帧丢失和音频断断续续或静音。
本节为非规范性内容。
实现 media element API的各个方面的准确程度被认为是实现质量问题。
例如,在实现 buffered
属性时,报告已缓冲范围的精确程度取决于用户代理检查数据的仔细程度。由于API以时间报告范围,但数据是以字节流获取的,因此接收可变比特率流的用户代理可能只能通过实际解码所有数据来确定精确时间。然而,用户代理不需要这样做;他们可以返回估计值(例如基于到目前为止看到的平均比特率),这些估计值会随着更多信息的出现而进行修正。
作为一般规则,用户代理应保守而非乐观。例如,报告所有内容都已缓冲但实际上并没有缓冲完全是有害的。
另一个实现质量问题是当编解码器仅设计用于前向播放(例如关键帧很少且间隔很远,并且中间帧仅具有前一帧的增量)时,反向播放视频。用户代理可能会表现不佳,例如只显示关键帧;然而,更好的实现会做更多的工作,从而表现得更好,例如实际前向解码视频部分,存储完整帧,然后反向播放这些帧。
同样,实现可以随时丢弃缓冲数据(没有要求用户代理在媒体元素的生命周期内保留所有获取的媒体数据),这也是实现质量问题:有足够资源的用户代理被鼓励保留所有数据,因为这可以提供更好的用户体验。例如,如果用户在观看直播,用户代理可以只允许用户观看直播视频;然而,更好的用户代理会缓冲所有内容,并允许用户浏览早期材料,暂停,前后播放等。
当一个 media element 暂停时被 从文档中移除 并且在 事件循环 到达 步骤1之前未重新插入,实现资源受限的用户代理被鼓励利用这个机会释放所有由 media element使用的硬件资源(如视频平面、网络资源和数据缓冲区)。(用户代理仍需跟踪播放位置等,以防以后重新开始播放。)
map
元素所有当前引擎都支持。
所有当前引擎都支持。
name — Name of image map to reference from the usemap 属性引用图像地图的名称
[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 >
area
元素所有当前引擎都支持。
所有当前引擎都支持。
Support in all current engines.
Support in all current engines.
map
元素祖先时。alt — 在图像不可用时使用的
替代文本
coords — 在 图像映射
shape — 在 图像映射
href —
超链接
target — Navigable for 超链接 导航
download —
是否下载资源而不是导航到该资源,以及如果下载时使用的文件名
ping — 要 ping 的 URL to ping
rel — 包含 超链接 的文档中的位置与目标资源之间的关系
referrerpolicy
— Referrer policy for 获取 initiated by the element
hreflang —
被链接资源的语言
type — 被引用资源的
类型提示
href 属性: 面向作者; 面向实现者。href。
[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 元素具有
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 属性。
在这两种情况下, shape 和
coords 属性指定该区域。
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 元素的 href、 target、 download和 ping 属性决定了链接的跟随方式。 rel
属性可用于向用户指示在用户跟随链接之前目标资源的可能性质。
The target、 download、 ping、
rel、 referrerpolicy、
hreflang和
type attributes must be
omitted if the href
attribute is not present.
如果 itemprop
属性在
area 元素上指定,则还必须指定 href 属性。
HTMLAreaElement/referrerPolicy
所有当前引擎都支持。
ID属性 referrerPolicy 必须 反映 the referrerpolicy
内容属性, 仅限于已知值。
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 >
如果 img 元素有指定 usemap
属性,用户代理必须按如下方式处理:
使用 解析哈希名称引用规则
将属性的值解析为一个 map
元素,以该元素作为上下文节点。此操作将返回一个元素(即 map)或 null。
如果返回 null,则直接返回。表明该图像并未与任何图像映射关联。
Otherwise, the user agent must collect all the area 元素。令
areas. Let areas be that list.
在获得组成图像映射的 area
元素列表( areas)后,交互式用户代理必须根据意图以以下两种方式之一处理该列表。
如果用户代理打算显示 img
元素所代表的文本,则必须使用以下步骤:
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.
Each remaining area element in
areas represents a
超链接。这些超链接应以与 img的文本相关的方式提供给用户。
在这种情况下,用户代理可以以 area 和 img 元素没有指定
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:
找到该元素的 shape
属性所代表的状态。
使用 解析浮点数列表规则 来解析元素的
coords
属性(如果存在),并将结果赋值给
coords 列表。如果该属性不存在,则令 coords 列表为空列表。
如果 coords 列表中的项目数少于当前状态下 area
元素的最小数量,则形状为空;返回。
| 状态 | 最小项目数 |
|---|---|
| 圆形状态 | 3 |
| 默认状态 | 0 |
| 多边形状态 | 6 |
| 矩形状态 | 4 |
Check for excess items in the coords list as per the entry in the
following list corresponding to the shape attribute's
state:
现在,由元素表示的形状是下面列表中与 shape
属性状态对应的条目所描述的形状:
令 x 为 coords列表中的第一个数字, y 为第二个数字, r 为第三个数字。
形状是一个完全覆盖整个图像的矩形。
令 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 N 是 coords中的条目数。
该形状是一个多边形,其顶点由 coordinates给出,其内部通过奇偶规则确定。 [GRAPHICS]
令 x1 为 coords中的第一个数字, y1 为第二个数字, x2 为第三个数字, y2 为第四个数字。
该形状是一个矩形,其左上角由坐标(x1, y1)给出,右下角由坐标(x2, y2)给出,这些坐标以 CSS像素 为单位,从图像的左上角测量。
由于历史原因,坐标必须相对于
显示 后的图像解释,即CSS 'width' 和
'height' 属性(或者,对于非CSS浏览器,图像元素的
width 和 height 属性——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发生变化,用户代理必须像重新运行图像映射算法一样处理 。
HTML/HTML5/HTML5_Parser#Inline_SVG_and_MathML_support
支持所有当前引擎。
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 >
HTML/HTML5/HTML5_Parser#Inline_SVG_and_MathML_support
支持所有当前引擎。
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()
The getSVGDocument() 方法的步骤如下:
如果 document 非空,并且因为 页面加载处理模型针对 XML
文件 部分创建了它,因为在 资源的计算类型 在 导航 算法中是
image/svg+xml,那么返回
document。
返回 null。
作者要求: The width and
height attributes on img、 iframe、
embed、 object、 video、 source 元素上,
当其父元素是 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 width 和
specified height 分别是 width 和 height 属性的值。
如果相关资源没有 自然宽度 和 自然高度,则必须省略这两个属性。
如果两个属性都为0,这表示该元素不打算用于用户(例如,它可能是一个用于计数页面浏览量的服务的一部分)。
尺寸属性不应用于拉伸图像。
用户代理要求:用户代理应使用这些属性 作为渲染的提示。
对于 iframe、 embed 和 object ,IDL
属性类型为 DOMString;
对于 video 和
source ,IDL 属性类型为
unsigned
long。
对于 img 和
input 元素,
相应的 IDL 属性在这些各自元素的部分中定义,因为它们更具体地与这些元素的其他行为相关。
table
element支持所有当前引擎。
支持所有当前引擎。
caption
元素,随后零个或多个
colgroup 元素,随后可选的
thead 元素,随后零个或多个 tbody
元素或一个或多个 tr
元素,随后可选的 tfoot
元素,可选地夹杂一个或多个
脚本支持元素。
[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
|
可能是布局表格 |
使用不符合规范的 cellspacing 和
cellpadding
属性,值为 0
|
可能是布局表格 |
使用 caption、
thead或 th 元素
|
可能是非布局表格 |
使用 headers 和 scope 属性
|
可能是非布局表格 |
使用不符合规范的 border
属性,值为非0
|
可能是非布局表格 |
| 使用 CSS 设置的显式可见边框 | 可能是非布局表格 |
使用 summary 属性
|
不是一个好的指标(历史上,布局表格和非布局表格都设置了这个属性) |
以上建议很可能是错误的。强烈建议实现者提供反馈,详细说明他们尝试创建布局表格检测启发式方法的经验。
如果一个 table 元素有一个(不符合规范的)
summary
属性,并且用户代理未将其分类为布局表格,则用户代理可以向用户报告该属性的内容。
table.caption [ = value ]
支持所有当前引擎。
返回表格的 caption 元素。
可设置,以替换 caption
元素。
caption = table.createCaption()
HTMLTableElement/createCaption
支持所有当前引擎。
确保表格有一个 caption
元素,并返回它。
table.deleteCaption()
HTMLTableElement/deleteCaption
支持所有当前引擎。
确保表格没有 caption 元素。
table.tHead [ = value ]
支持所有当前引擎。
返回表格的 thead 元素。
可设置,以替换 thead
元素。如果新值不是
thead 元素,则抛出
"HierarchyRequestError"
DOMException。
thead = table.createTHead()
支持所有当前引擎。
确保表格有一个 thead 元素,并返回它。
table.deleteTHead()
支持所有当前引擎。
确保表格没有 thead 元素。
table.tFoot [ = value ]
支持所有当前引擎。
返回表格的 tfoot 元素。
可设置,以替换 tfoot
元素。如果新值不是
tfoot 元素,则抛出
"HierarchyRequestError"
DOMException。
tfoot = table.createTFoot()
支持所有当前引擎。
确保表格有一个 tfoot 元素,并返回它。
table.deleteTFoot()
支持所有当前引擎。
确保表格没有 tfoot 元素。
table.tBodies
支持所有当前引擎。
返回一个 HTMLCollection
,包含表格的 tbody 元素。
tbody = table.createTBody()
支持所有当前引擎。
创建一个 tbody
元素,将其插入表格中,并返回它。
table.rows
支持所有当前引擎。
返回一个 HTMLCollection
,包含表格的 tr 元素。
tr = table.insertRow([ index ])
支持所有当前引擎。
创建一个 tr 元素,必要时同时创建 tbody ,按给定的位置将其插入表格中,并返回
tr。
位置相对于表中的行。默认省略参数时,索引 -1 相当于插入到表格末尾。
如果给定位置小于 -1 或大于行数,则抛出
"IndexSizeError" DOMException。
table.deleteRow(index)
支持所有当前引擎。
移除表中给定位置的 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 设置器步骤
为:
The createCaption() 方法步骤为:
The tHead 设置器步骤为:
如果给定值既不是 null 也不是一个 thead 元素,则抛出
一个
"HierarchyRequestError" DOMException。
如果给定值不是 null,则将其插入到 this 的第一个既不是 caption 元素也不是 colgroup
元素的元素子节点之前,如果有这样的子节点;否则将其插入到 this的末尾。
The createTHead() 方法步骤为:
The tFoot 设置器步骤为:
如果给定值既不是 null 也不是一个 tfoot 元素,则抛出
一个
"HierarchyRequestError" DOMException。
如果给定值不是 null,则将其插入到 this的末尾。
The createTFoot() 方法步骤为:
The tBodies
getter steps are to return an HTMLCollection
,
其过滤器仅匹配作为 this子节点的 tbody
elements that are children of this.
The createTBody() 方法步骤为:
The rows
getter steps are to return an HTMLCollection
rooted at this, whose
filter matches only tr 元素,
这些元素要么是 this的子节点,要么
是 thead、 tbody或 tfoot 元素的子节点,而这些元素本身
是 this的子节点。集合中的元素必须按以下方式排序:
父元素为 thead 的那些元素首先包含,按
树
顺序排列,随后是父元素为 this 或
tbody 元素的那些元素,同样按
树顺序排列,最后是
父元素为 tfoot
元素的那些元素,仍然按 树顺序排列。
The insertRow(index) 方法步骤为:
如果 index 小于 −1 或大于
rows 集合中的元素数量,则抛出
一个
"IndexSizeError" DOMException。
否则,如果 rows
集合中有零个元素,
则将 tr to the last tbody element in
this.
否则,如果 index 为 −1 或等于 rows 集合中的项数,则将
tr to the parent of the
last tr element in the
rows
collection.
否则,将 tr immediately before the index个 tr
element in the rows
collection, in the same
parent.
返回 tr。
The deleteRow(index) 方法步骤为:
如果 index 小于 −1 或大于等于 rows
集合中的
元素数量,则抛出一个
"IndexSizeError" DOMException。
如果 index 为 −1,则从其父节点 移除
the last element in the rows 集合中的最后一个元素,或者
如果 rows
集合为空,则不执行任何操作。
否则,从其父节点 移除 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.4 em ; width : 1.4 em ; 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 >
对于不仅仅由第一行和第一列包含标题的单元格网格组成的表格,以及任何读者可能难以理解内容的表格,作者应包括介绍表格的解释信息。这些信息对所有用户都有用,但对无法看到表格的用户尤其有用,例如屏幕阅读器用户。
这样的解释信息应介绍表格的目的,概述其基本单元格结构,突出任何趋势或模式,并一般性地教用户如何使用表格。
例如,以下表格:
| 负面 | 特征 | 正面 |
|---|---|---|
| 悲伤 | 心情 | 快乐 |
| 失败 | 成绩 | 通过 |
...可能需要描述说明表格的布局方式,比如“特征在第二列给出,负面在左列,正面在右列”。
有多种方法可以包含这些信息,例如:
< p > In the following table, characteristics are given in the second
column, with the negative side in the left column and the positive
side in the right column.</ p >
< table >
< caption > Characteristics with positive and negative sides</ caption >
< thead >
< tr >
< th id = "n" > Negative
< th > Characteristic
< th > Positive
< tbody >
< tr >
< td headers = "n r1" > Sad
< th id = "r1" > Mood
< td > Happy
< tr >
< td headers = "n r2" > Failing
< th id = "r2" > Grade
< td > Passing
</ table >
caption< table >
< caption >
< strong > Characteristics with positive and negative sides.</ strong >
< p > Characteristics are given in the second column, with the
negative side in the left column and the positive side in the right
column.</ p >
</ caption >
< thead >
< tr >
< th id = "n" > Negative
< th > Characteristic
< th > Positive
< tbody >
< tr >
< td headers = "n r1" > Sad
< th id = "r1" > Mood
< td > Happy
< tr >
< td headers = "n r2" > Failing
< th id = "r2" > Grade
< td > Passing
</ table >
caption中,使用
details
元素
< table >
< caption >
< strong > Characteristics with positive and negative sides.</ strong >
< details >
< summary > Help</ summary >
< p > Characteristics are given in the second column, with the
negative side in the left column and the positive side in the right
column.</ p >
</ details >
</ caption >
< thead >
< tr >
< th id = "n" > Negative
< th > Characteristic
< th > Positive
< tbody >
< tr >
< td headers = "n r1" > Sad
< th id = "r1" > Mood
< td > Happy
< tr >
< td headers = "n r2" > Failing
< th id = "r2" > Grade
< td > Passing
</ table >
figure< figure >
< figcaption > Characteristics with positive and negative sides</ figcaption >
< p > Characteristics are given in the second column, with the
negative side in the left column and the positive side in the right
column.</ p >
< table >
< thead >
< tr >
< th id = "n" > Negative
< th > Characteristic
< th > Positive
< tbody >
< tr >
< td headers = "n r1" > Sad
< th id = "r1" > Mood
< td > Happy
< tr >
< td headers = "n r2" > Failing
< th id = "r2" > Grade
< td > Passing
</ table >
</ figure >
figure的 figcaption
< figure >
< figcaption >
< strong > Characteristics with positive and negative sides</ strong >
< p > Characteristics are given in the second column, with the
negative side in the left column and the positive side in the right
column.</ p >
</ figcaption >
< table >
< thead >
< tr >
< th id = "n" > Negative
< th > Characteristic
< th > Positive
< tbody >
< tr >
< td headers = "n r1" > Sad
< th id = "r1" > Mood
< td > Happy
< tr >
< td headers = "n r2" > Failing
< th id = "r2" > Grade
< td > Passing
</ table >
</ figure >
作者还可以使用其他技术,或组合以上技术,视情况而定。
当然,最好的选择不是写一段描述解释表格的布局方式,而是调整表格,使其不需要任何解释。
对于上面示例中使用的表格,只需简单地重新排列表格,使标题在顶部和左侧,即可消除解释的需要,同时也不需要使用 headers 属性:
< table >
< caption > Characteristics with positive and negative sides</ caption >
< thead >
< tr >
< th > Characteristic
< th > Negative
< th > Positive
< tbody >
< tr >
< th > Mood
< td > Sad
< td > Happy
< tr >
< th > Grade
< td > Failing
< td > Passing
</ table >
良好的表格设计是使表格更具可读性和可用性的关键。
在视觉媒体中,提供列和行边框以及交替的行背景可以非常有效地使复杂表格更具可读性。
对于包含大量数字内容的表格,使用等宽字体可以帮助用户看到模式,特别是在用户代理不渲染边框的情况下。(不幸的是,由于历史原因,不渲染表格边框是一种常见的默认设置。)
在语音媒体中,可以通过在读取单元格内容之前报告相应的标题,以及允许用户以网格方式导航表格,而不是按源顺序串行化整个表格的内容,来区分表格单元格。
鼓励作者使用CSS来实现这些效果。
用户代理在页面未使用CSS且表格未被分类为布局表格时,建议使用这些技术渲染表格。
caption 元素
Support in all current engines.
Support in all current engines.
table 元素的第一个子元素。
table 元素的后代。caption
element's
end tag can be omitted if
the caption element
is not immediately followed by ASCII whitespace
or a
comment.
[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 | 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 |
colgroup 元素
支持所有当前引擎。
支持所有当前引擎。
table
元素的子元素,在任何
caption 元素之后,并且在任何
thead、
tbody、 tfoot和 tr
元素之前。
span
属性存在: 无内容。span
属性不存在:零个或多个 col 和 template 元素。
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。
[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
属性参与 表格模型。
col
元素支持所有当前引擎。
colgroup
元素的子元素,该元素没有 span 属性。span —
元素跨越的列数
span。HTMLTableColElement,如在 colgroup
元素中定义的那样。如果 col 元素有一个父元素,而该父元素是一个 colgroup
元素,该元素本身有一个父元素是一个 table 元素,则该
col 元素
表示 one or more columns in the column group represented by that colgroup中的一列或多列。
该元素可以指定一个 span
内容属性,其值必须是一个
有效的非负整数
,大于零且小于或等于 1000。
tbody
元素在所有当前引擎中支持。
在所有当前引擎中支持。
table
元素的子元素,在任何
caption、 colgroup和
thead 元素之后,但前提是没有
tr 元素是
table 元素的子元素。
tr 和 支持脚本
元素。tbody element's start tag can be omitted
if the first thing inside the tbody element is a tr 元素,并且该元素前面没有省略了结束标签的 tbody、 thead或
tfoot 元素,则可以省略 开始标签 。(如果元素是空的,则不能省略。)
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.
[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
接口也用于 thead 和
tfoot 元素。
The tbody 元素 表示 一个 块 的 行
,它由父 table 元素的数据主体组成,如果
tbody 元素有一个父元素并且它是一个 table。
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) 方法必须按如下方式操作:
如果 index 小于 −1 或大于
rows 集合中的元素数量,则抛出一个
"IndexSizeError" DOMException。
如果 index 为 −1 或等于 rows collection, then append table
row to this element.
Otherwise, insert table
row as a
child of this element, immediately before the index个 tr element in the
rows collection.
返回 table row。
The deleteRow(index) 方法在调用时必须按如下操作:
如果 index 小于 -1 或大于等于 rows
集合中的元素数量,则抛出
"IndexSizeError" DOMException。
如果 index 为 -1,则从此元素中 移除
the last element in the rows 集合中的最后一个元素,或者如果 rows 集合为空,则不执行任何操作。
Otherwise, remove the
indexth element
in the rows collection from
this element.
thead
元素在所有当前引擎中支持。
table
元素的子元素,在任何
caption和 colgroup
元素之后,在任何 tbody、 tfoot和
tr 元素之前,但前提是没有其他
thead 元素是
table 元素的子元素。
tr 和 支持脚本
元素。thead element's end tag can be omitted if
the thead element is
immediately followed by a tbody 或
tfoot element.
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。
这个例子展示了 thead element
being used.
Notice the use of both
th 和 td 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 >
tfoot
元素在所有当前引擎中支持。
table
元素的子元素,在任何
caption、 colgroup、 thead、
tbody和 tr 元素之后,但前提是没有其他 tfoot 元素是
table 元素的子元素。
tr 和 支持脚本
元素。tfoot 元素的 结束标签 。HTMLTableSectionElement,如
tbody
元素中定义的。
The tfoot 元素 表示 由列摘要(表尾)组成的 块 的 行
that consist of
the column summaries (footers) for the parent table element, if the
tfoot 元素有一个父元素并且它是一个 table。
tr
元素在所有当前引擎中支持。
在所有当前引擎中支持。
thead
元素的子元素。tbody
元素的子元素。tfoot
元素的子元素。table
元素的子元素,在任何
caption、 colgroup和 thead
元素之后,但前提是没有 tbody 元素是 table
元素的子元素。
td、 th和 支持脚本
元素。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.
[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.
tr.rowIndex
在所有当前引擎中支持。
返回该行在表格 rows
列表中的位置。
如果该元素不在表格中,则返回 −1。
tr.sectionRowIndex
返回该行在表格节的 rows 列表中的位置。
如果该元素不在表格节中,则返回 −1。
tr.cells返回一个 HTMLCollection
,其中包含该行的 td 和 th 元素。
cell = tr.insertCell([ index ])
HTMLTableRowElement/insertCell
在所有当前引擎中支持。
创建一个 td 元素,将其插入到表格行中的给定位置,并返回
td。
位置相对于行中的单元格。如果省略参数,默认值 -1 等同于插入到行的末尾。
如果给定的位置小于 -1 或大于单元格数量,则抛出
"IndexSizeError" DOMException。
tr.deleteCell(index)
位置相对于行中的单元格。索引 -1 等同于删除行的最后一个单元格。
如果给定的位置小于 -1 或大于最后一个单元格的索引,或者如果没有单元格,则抛出 "IndexSizeError"
DOMException。
The rowIndex 属性必须,如果该元素有一个父
table 元素,或者一个父
tbody、 thead或
tfoot 元素和一个
祖父 table
元素,返回该 tr 元素在该 table 元素的 rows 集合中的索引。如果没有这样的
table 元素,则属性必须返回 -1。
The sectionRowIndex 属性必须,如果该元素有一个父 table、 tbody、 thead或 tfoot 元素,返回该 tr 元素在父元素的 rows
集合中的索引(对于表格,这是 HTMLTableElement的
rows 集合;对于表格节,这是
HTMLTableSectionElement的
rows
集合)。如果没有这样的父元素,则属性必须返回 -1。
The cells
attribute must return an HTMLCollection
rooted at this tr element, whose
filter matches only td 和 th elements that are children of the
tr element.
The insertCell(index) 方法必须按如下方式操作:
如果 index 小于 −1 或大于 cells 集合中的元素数量,则抛出一个
"IndexSizeError" DOMException。
令 table cell 为调用 创建一个元素 的结果,传入该 tr
元素的 节点文档、“td” 和 HTML 命名空间。
如果 index 等于 −1 或等于 cells collection, then append table cell to this tr
元素。
Otherwise, insert table cell as a
child of this tr element,
immediately before the index个 td
或 th element in the cells collection.
返回 table cell。
The deleteCell(index) 方法必须按如下方式操作:
如果 index 小于 -1 或大于等于 cells 集合中的元素数量,则抛出
"IndexSizeError" DOMException。
如果 index 为 -1,则从其父元素中 移除
the last element in the cells
集合中的最后一个元素,或者如果 cells
集合为空,则不执行任何操作。
Otherwise, remove the
indexth element
in the cells collection from its
parent.
td
元素在所有当前引擎中支持。
在所有当前引擎中支持。
tr 元素的子元素。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 —
该单元格的表头单元格
colspan、 headers、 rowspan。
[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 元素及其 colspan、 rowspan和 headers
属性参与 表模型。
用户代理,尤其是在非视觉环境中或在显示表格为二维网格不切实际的情况下,可能会在渲染单元格内容时为用户提供单元格的上下文;例如,给出其在 表模型中的位置,或列出单元格的表头单元格(由 分配表头单元格的算法确定)。当列出单元格的表头单元格时,用户代理可以使用这些表头单元格上的 abbr
属性值(如果有),而不是表头单元格的内容。
在这个例子中,我们看到一个由可编辑单元格组成的网格(本质上是一个简单的电子表格)的网页应用片段。一个单元格被配置为显示其上方单元格的总和。三个单元格被标记为表头,使用 th 元素而不是
td 元素。一个脚本会附加事件处理程序到这些元素上以维护总数。
< table >
< tr >
< th >< input value = "Name" >
< th >< input value = "Paid ($)" >
< tr >
< td >< input value = "Jeff" >
< td >< input value = "14" >
< tr >
< td >< input value = "Britta" >
< td >< input value = "9" >
< tr >
< td >< input value = "Abed" >
< td >< input value = "25" >
< tr >
< td >< input value = "Shirley" >
< td >< input value = "2" >
< tr >
< td >< input value = "Annie" >
< td >< input value = "5" >
< tr >
< td >< input value = "Troy" >
< td >< input value = "5" >
< tr >
< td >< input value = "Pierce" >
< td >< input value = "1000" >
< tr >
< th >< input value = "Total" >
< td >< output value = "1060" >
</ table >
th
元素在所有当前引擎中支持。
tr 元素的子元素。header, footer,
分节内容或 标题内容 的后代元素。
th element's end tag can be omitted if the
th element is immediately followed
by a td 或 th element,
or if there is no more content in the parent element.
colspan —
单元格跨越的列数
rowspan —
单元格跨越的行数
headers —
该单元格的表头单元格
scope —
指定表头单元格应用于哪些单元格
abbr —
在其他上下文中引用该单元格时使用的替代标签
abbr、 colspan、 headers、 rowspan、 scope。
HTMLTableCellElement,如 td 元素所定义。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 元素及其 colspan、 rowspan、 headers和
scope 属性参与 表格模型。
以下示例展示了 scope 属性的 rowgroup 值如何影响
表头单元格适用哪些
数据单元格。
下面是一个展示表格的标记片段:
< table >
< thead >
< tr > < th > ID < th > Measurement < th > Average < th > Maximum
< tbody >
< tr > < td > < th scope = rowgroup > Cats < td > < td >
< tr > < td > 93 < th > Legs < td > 3.5 < td > 4
< tr > < td > 10 < th > Tails < td > 1 < td > 1
< tbody >
< tr > < td > < th scope = rowgroup > English speakers < td > < td >
< tr > < td > 32 < th > Legs < td > 2.67 < td > 4
< tr > < td > 35 < th > Tails < td > 0.33 < td > 1
</ table >
这会得到如下表格:
| ID | 测量项 | 平均值 | 最大值 |
|---|---|---|---|
| 猫 | |||
| 93 | 腿 | 3.5 | 4 |
| 10 | 尾巴 | 1 | 1 |
| 说英语者 | |||
| 32 | 腿 | 2.67 | 4 |
| 35 | 尾巴 | 0.33 | 1 |
第一行中的表头全都直接向下适用于其所在列中的各行。
带有 scope 属性且
处于 行组
状态的表头,适用于其行
组中除第一列单元格之外的所有单元格。
其余表头仅适用于其右侧的单元格。
td 和 th 元素的共有属性The td 和
th 元素可以有一个
colspan
内容属性,该属性的值必须是大于零且小于或等于1000的
有效非负整数 。
The td 和
th 元素还可以有一个
rowspan
内容属性,该属性的值必须是小于或等于65534的 有效非负整数 。对于该属性,值为零表示单元格将跨越行组中的所有剩余行。
这些属性分别给出了单元格要跨越的列数和行数。如 表模型描述的那样,这些属性不得用于重叠单元格。
The td 和
th 元素可以有一个
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 td 或 th 元素(如 表模型).
A th
元素,
被认为是由同一 table id
is
said to be directly targeted by all td 和 th elements
in the
same table that have
headers
属性值包含
以该 ID id作为其中一个 token。 th 元素
A is said to be targeted by a th 或 td 元素
B if either A is 指向 ,如果 A 被
B that is itself
直接指向 ,或者存在一个元素 C ,
该元素本身被 B is 指向 ,且 A.
A th
元素不得自 目标 自身。
The colspan、
rowspan和
headers
属性参与 表模型。
cell.cellIndex返回单元格在行的 cells
列表中的位置。这不一定对应单元格在表中的 x位置,因为前面的单元格可能覆盖了多个行或列。
如果元素不在行中,则返回-1。
各种表格元素及其内容属性共同定义了 表模型。
一个 表格 由在二维网格
槽 上的对齐单元格组成,具有坐标(x, y)。网格是有限的,并且是空的或有一个或多个槽。如果网格有一个或多个槽,则
x 坐标始终在范围
0 ≤x<xwidth, y
坐标始终在范围 0 ≤y<yheight内。如果
xwidth 和 yheight 之一或两者为零,则该表为空(没有槽)。表对应于 table 元素。
一个 单元格 是锚定在槽(cellx,
celly)上的一组槽,并具有特定的 width 和 height ,使单元格覆盖所有具有坐标(x,
y)的槽,其中
cellx≤x<cellx+width
和
celly≤y<celly+height。单元格可以是 数据单元格
或 标题单元格。数据单元格对应于 td
元素,标题单元格对应于 th
元素。两种类型的单元格都可以有零个或多个关联的标题单元格。
在某些错误情况下,可能会出现两个单元格占据同一个槽的情况。
一个 行 是从 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 < xwidth 和
groupy ≤ y < groupy+height。行组对应于
tbody、 thead和 tfoot 元素。并非每一行都必须在一个行组中。
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+width
和 0 ≤ y < yheight。列组对应于 colgroup
元素。并非每一列都必须在一个列组中。
一个 单元格 不能覆盖两个或多个 行组的槽。然而,一个单元格可以位于多个 列组中。一个单元格的所有槽要么是零个,要么是一个 行组 的一部分,并且是零个或多个 列组的一部分。
除了 单元格、 列、 行、 行组和 列组, 表格 可以有一个 caption
元素与之关联。这为表格提供了标题或说明。
A 表模型错误 是指由 table
元素及其后代表示的数据错误。文档中不应有表模型错误。
To determine which elements correspond to which slots in a table associated with a table element, to determine the
dimensions of the table (xwidth 和 yheight),以及确定是否存在 表模型错误,用户代理必须使用以下算法:
令 xwidth 为 0。
令 yheight 为 0。
令 the table be the table
represented
by the table element.
The xwidth 和 yheight 变量给出了 the
table的尺寸。 the table 最初是空的。
如果 table 元素没有子元素,则返回
the
table (它将是空的)。
将第一个 caption
元素子元素与 table element
with
the table. If there are no such children, then it has no associated
caption 元素。
令 current element 为
table 元素的第一个子元素。
如果算法中的某个步骤需要将 current element to be 推进到 table
,而没有这样的下一个子元素,那么用户代理必须跳到算法结尾附近标记为 end的步骤。
当 current element is not one of the following elements, advance the current element to the next
child of the table的下一个子元素:
如果 current element 是 colgroup,请按照以下子步骤进行:
列组:根据下面的适当情况处理 current element :
col 元素子元素按照以下步骤进行:
令 xstart have the value of xwidth.
令 current column be the first col element child
of the colgroup
element.
列:如果 current column col 元素具有 span 属性,则使用
解析非负整数的规则解析其值。
如果解析结果不是错误或零,则令 span 为该值。
否则,如果 col
元素没有 span
属性,或者尝试解析属性的值导致错误或零,则令 span 为1。
如果 span 大于1000,则令其为1000。
将 xwidth 增加 span。
如果 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 列的步骤。
Let all the last columns in
the
table from x=xstart 到
x=xwidth-1 form a new 列组,锚定在位置 (xstart, 0),宽度为
xwidth-xstart,对应于 colgroup
元素。
col 元素子元素
当 current element is not one of the following elements, advance the
current element to the
next child of the table的下一个子元素:
如果 current element 是 colgroup
元素,跳到上面标记为 列组 的步骤。
令 ycurrent 为 0。
令 list of downward-growing cells 为空列表。
行:当 current element is not one of the following
elements, advance the
current element to the next child of the table的下一个子元素:
如果 current element 是 tr,则运行 行处理算法, advance the current
element to the next child
of the table的下一个子元素,并返回到标记为
行的步骤。
运行 行组结束算法。
如果 current element 是 tfoot,则将该元素添加到
pending tfoot
元素,
advance the current
element to the next
child of the table的下一个子元素,并返回到标记为
行的步骤。
当前元素 current element 是 thead 或
tbody。
运行 行组处理算法。
Advance the current
element to
the next child of the table的下一个子元素。
返回到标记为 行的步骤。
结束: For each tfoot element in the list
of pending
tfoot
elements, in 树顺序运行 行组处理算法。
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 表模型错误。
返回 the table。
当上述算法要求用户代理运行 行组结束算法时,用户代理必须遵循以下步骤:
当 ycurrent 小于 yheight时,执行以下步骤:
运行 向下生长的单元算法。
将 ycurrent 增加1。
清空 list of downward-growing cells。
上述算法调用的 行处理算法, which is invoked by the set of
steps above for
processing tr elements, is:
如果 yheight 等于 ycurrent,则将 yheight 增加1。(ycurrent is never greater than yheight。)
令 xcurrent 为0。
运行 向下生长的单元算法。
如果正在处理的 tr 元素没有 td 或 th
元素子元素,则将 ycurrent 增加1,中止此步骤集,并返回到上面的算法。
令 current cell be the first td 或 th element child
in the tr element being
processed.
单元格:当 xcurrent 小于 xwidth 且坐标为(xcurrent, ycurrent)的槽已经有单元格分配给它时,将 xcurrent 增加1。
如果 xcurrent 等于 xwidth,则将 xwidth 增加1。(xcurrent is never greater than xwidth。)
如果 current cell 有 colspan
属性,则 解析该属性的值,并令 colspan 为结果。
如果解析该值失败或返回零,或者该属性不存在,则令 colspan 为1。
如果 colspan 大于1000,则令其为1000。
如果 current cell 有 rowspan
属性,则 解析该属性的值,并令 rowspan 为结果。
如果解析该值失败或该属性不存在,则令 rowspan 为1。
如果 rowspan 大于65534,则令其为65534。
令 cell grows downward be false.
如果 rowspan 为零,则将 cell grows downward 设为真,并将 rowspan to 1.
如果 xwidth < xcurrent+colspan,则令 xwidth 为 xcurrent+colspan。
如果 yheight < ycurrent+rowspan,则令 yheight 为 ycurrent+rowspan。
让坐标为(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 元素,请使用下一节中描述的 分配标题单元格的算法 。
如果 cell grows downward 为真,则将元组{c, xcurrent, colspan}添加到 list of downward-growing cells。
将 xcurrent 增加 colspan。
如果 current cell is the last td 或 th element child in
the tr element being
processed, then increase ycurrent 增加1,中止此步骤集,并返回到上面的算法。
令 current cell be the next td 或 th element child
in the tr element being
processed.
返回到标记为 单元格的步骤。
当上述算法要求用户代理运行 向下生长的单元算法时,用户代理必须对list of downward-growing cells中的每个{ cellx, width, width}元组,如果有,将 单元 cell 扩展,以便它还覆盖坐标为(x, ycurrent), where cellx ≤ x < cellx+width.
每个单元格可以分配零个或多个标题单元格。将 标题单元格分配算法 分配给单元格 principal cell 的过程如下。
令 header list 为空单元格列表。
令(principalx, principaly)为 principal cell 锚定的槽的坐标。
headers
属性取 principal cell的 headers
属性值并 按ASCII空白字符分割,得到 id list 。
对于 id list中的每个令牌,如果 Document with an ID equal to
the token is a cell in the same 表格中的单元格,并且该单元格不是
principal
cell,则将该单元格添加到 header
list。
headers
属性令 principalwidth 为 principal cell的宽度。
令 principalheight 为 principal cell的高度。
对于从 y from principaly 到 principaly+principalheight-1, run the 扫描和分配标题单元格的内部算法,使用 principal cell、 header list、初始坐标(principalx, y)和增量 Δx=−1 和 Δy=0。
对于从 x from principalx 到 principalx+principalwidth-1, run the 扫描和分配标题单元格的内部算法,使用 principal cell、 header list、初始坐标(x, principaly)和增量 Δx=0 和 Δy=−1。
如果 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中。
如果 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中。
Remove all the empty cells from the header list.
从 header list中移除所有重复项。
如果 principal cell 在 header list 中,则将其移除。
将 header list 中的标题分配给 principal cell。
The 扫描和分配标题单元格的内部算法,给定一个 principal cell、一个 header list、初始坐标(initialx, initialy)和Δx 和Δy 增量,过程如下:
令 x 等于 initialx。
令 y 等于 initialy。
令 opaque headers 为空单元格列表。
令 in header block 为true,并令 headers from current header block 为包含 principal cell的单元格列表。
令 in header block 为false,并令 headers from current header block 为空单元格列表。
循环:将 x 增加Δx;将 y 增加Δy。
对于此算法的每次调用,Δx 和Δy 中的一个将为-1,另一个将为0。
如果 x 或 y 小于0,则中止此内部算法。
如果没有单元格覆盖槽(x, y),或者有多个单元格覆盖槽(x, y),则返回到标记为 循环的子步骤。
令 current cell 为覆盖槽(x, y)的单元格。
设置 in header block 为true。
将 current cell 添加到 headers from current header block中。
令 blocked 为false。
如果 blocked 为false,则将 current cell 添加到 header list中。
设置 in header block 为false。将 headers from current header block 中的所有单元格添加到 opaque headers 列表中,并清空 headers from current header block 列表。
返回到标记为 循环的步骤。
锚定在坐标(x, y)、宽度为 width 、高度为 height 的槽上的标题单元格,如果符合以下任一条件,则称为 列标题 :
锚定在坐标(x, y)、宽度为 width 、高度为 height 的槽上的标题单元格,如果符合以下任一条件,则称为 行标题 :
本节为非规范性内容。
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 mm or 2 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 >
该表可能如下所示:
| 等级。 | 屈服点。 | 极限抗拉强度 | 延伸率。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% |
所有当前引擎均支持。
本节为非规范性内容。
表单是网页的一个组件,包含表单控件,如文本框、按钮、复选框、范围选择器或颜色选择器控件。用户可以与这些表单进行交互,提供数据,然后可以将这些数据发送到服务器进行进一步处理(例如返回搜索或计算的结果)。在许多情况下,不需要客户端脚本,尽管提供了一个API,以便脚本可以增强用户体验或将表单用于提交数据到服务器以外的目的。
编写表单包括几个步骤,这些步骤可以按任何顺序执行:编写用户界面、实现服务器端处理以及配置用户界面与服务器通信。
本节为非规范性内容。
为了简单介绍,我们将创建一个披萨订购表单。
任何表单都从一个 form
元素开始,控件放在其中。大多数控件由 input
元素表示,该元素默认提供文本控件。要为控件添加标签,使用 label
元素;标签文本和控件本身放在 label
元素内。表单的每个部分都被视为一个
段落,通常使用 p
元素与其他部分分隔。结合这些元素,下面是如何询问客户姓名的示例:
< form >
< p >< label > Customer name: < input ></ label ></ p >
</ form >
为了让用户选择披萨的大小,我们可以使用一组单选按钮。单选按钮也使用 input 元素,这次带有值为
type 属性为 radio。为了使单选按钮作为一组工作,它们使用
name
属性赋予一个共同的名称。为了将一批控件组合在一起,例如在这种情况下的单选按钮,可以使用
fieldset
元素。这样一组控件的标题由 fieldset中的第一个元素给出,该元素必须是
legend 元素。
< form >
< p >< label > Customer name: < input ></ label ></ p >
< fieldset >
< legend > Pizza Size </ legend >
< p >< label > < input type = radio name = size > Small </ label ></ p >
< p >< label > < input type = radio name = size > Medium </ label ></ p >
< p >< label > < input type = radio name = size > Large </ label ></ p >
</ fieldset >
</ form >
从上一步的变化已突出显示。
为了选择配料,我们可以使用复选框。这些使用 input 元素,其 type
属性值为 checkbox:
< form >
< p >< label > Customer name: < input ></ label ></ p >
< fieldset >
< legend > Pizza Size </ legend >
< p >< label > < input type = radio name = size > Small </ label ></ p >
< p >< label > < input type = radio name = size > Medium </ label ></ p >
< p >< label > < input type = radio name = size > Large </ label ></ p >
</ fieldset >
< fieldset >
< legend > Pizza Toppings </ legend >
< p >< label > < input type = checkbox > Bacon </ label ></ p >
< p >< label > < input type = checkbox > Extra Cheese </ label ></ p >
< p >< label > < input type = checkbox > Onion </ label ></ p >
< p >< label > < input type = checkbox > Mushroom </ label ></ p >
</ fieldset >
</ form >
这个披萨店总是出错,所以需要一种方法联系客户。为此,我们可以使用专门用于电话号码的表单控件(input 元素,其 type
属性设置为 tel)和电子邮件地址(input
元素,其 type 属性设置为
email):
< form >
< p >< label > Customer name: < input ></ label ></ p >
< p >< label > Telephone: < input type = tel ></ label ></ p >
< p >< label > Email address: < input type = email ></ label ></ p >
< fieldset >
< legend > Pizza Size </ legend >
< p >< label > < input type = radio name = size > Small </ label ></ p >
< p >< label > < input type = radio name = size > Medium </ label ></ p >
< p >< label > < input type = radio name = size > Large </ label ></ p >
</ fieldset >
< fieldset >
< legend > Pizza Toppings </ legend >
< p >< label > < input type = checkbox > Bacon </ label ></ p >
< p >< label > < input type = checkbox > Extra Cheese </ label ></ p >
< p >< label > < input type = checkbox > Onion </ label ></ p >
< p >< label > < input type = checkbox > Mushroom </ label ></ p >
</ fieldset >
</ form >
我们可以使用 input
元素,其 type
属性设置为 time
来询问送货时间。许多这些表单控件都有属性来精确控制可以指定的值;在这种情况下,特别感兴趣的三个属性是 min, max和 step。这些设置了最小时间、最大时间和允许值之间的间隔(以秒为单位)。这家披萨店只在上午11点到晚上9点之间送货,不承诺超过15分钟的增量,可以如下标记:
< form >
< p >< label > Customer name: < input ></ label ></ p >
< p >< label > Telephone: < input type = tel ></ label ></ p >
< p >< label > Email address: < input type = email ></ label ></ p >
< fieldset >
< legend > Pizza Size </ legend >
< p >< label > < input type = radio name = size > Small </ label ></ p >
< p >< label > < input type = radio name = size > Medium </ label ></ p >
< p >< label > < input type = radio name = size > Large </ label ></ p >
</ fieldset >
< fieldset >
< legend > Pizza Toppings </ legend >
< p >< label > < input type = checkbox > Bacon </ label ></ p >
< p >< label > < input type = checkbox > Extra Cheese </ label ></ p >
< p >< label > < input type = checkbox > Onion </ label ></ p >
< p >< label > < input type = checkbox > Mushroom </ label ></ p >
</ fieldset >
< p >< label > Preferred delivery time: < input type = time min = "11:00" max = "21:00" step = "900" ></ label ></ p >
</ form >
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 >
本节为非规范性内容。
编写服务器端处理器的具体细节不在本规范范围内。为了介绍的目的,我们假设
https://pizza.example.com/order.cgi 上的脚本配置为接受使用
application/x-www-form-urlencoded
格式的提交,期望在HTTP
POST主体中发送以下参数:
custnamecusttelcustemailsizesmall, medium或 largetoppingbacon,
cheese, onion和 mushroom
deliverycomments本节为非规范性内容。
表单提交通过多种方式暴露给服务器,最常见的是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=
Support in all current engines.
本节为非规范性内容。
表单可以进行注释,以便用户代理在表单提交之前检查用户的输入。服务器仍然需要验证输入是否有效(因为恶意用户可以轻松绕过表单验证),但这允许用户避免仅由服务器检查用户输入所带来的等待。
最简单的注释是 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
事件。这对于显示表单问题的摘要很有用,因为通常浏览器本身只会一次报告一个问题。
本节为非规范性内容。
一些浏览器尝试通过自动填充表单控件来帮助用户,而不是每次都让用户重新输入他们的信息。例如,一个请求用户电话号码的字段可以自动填充用户的电话号码。
为了帮助用户代理实现这一点,可以使用 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 >