html
元素Support in all current engines.
Support in all current engines.
head
元素紧接着 body
元素。html
element's start tag can be omitted
if the first thing inside the html
element is not a comment.html
element's end tag can be omitted if
the html
element is not immediately followed by a comment.manifest
— Application cache manifest[HTMLConstructor] interface HTMLHtmlElement : HTMLElement {};
鼓励作者在根 html
元素上指定 lang
属性,
给出文档的语言。这可以帮助语音合成工具确定要使用的发音,帮助翻译工具确定要使用的规则,
等等。
manifest
属性给出文档的
应用缓存
manifest 的地址,如果有的话。
如果出现了该属性,其值必须是一个
可能被空格包裹的合法的非空URL。
manifest
属性是是遗留的
"离线 Web 应用" 特性的一部分,
该特性正在从 Web 平台移除。(这是一个很长的过程,可能持续很多年。)
现在强烈不推荐使用 manifest
属性。
使用 service workers 来替代。 [SW]
manifest
属性只在文档加载的早期阶段
起作用。
因此动态改变该属性没有效果(因此没有为该属性提供任何 DOM API)。
应用缓存选择 中,后续的 base
元素影响不了 manifest
属性的
URL 解析,因为在还没看到这些元素时就进行了这些属性的处理。
window.applicationCache
IDL
属性提供了对离线 应用缓存 机制的脚本访问。
下面例子中的 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
元素Support in all current engines.
Support in all current engines.
html
元素的第一个元素。iframe
srcdoc
文档,
或者如果在更高级协议上有标题信息可用:大于等于0个 元数据内容 元素,其中不多于一个 title
元素,
不多于一个 base
元素。title
元素,
且不多于一个 base
元素。head
element's start tag can be omitted if
the element is empty, or if the first thing inside the head
element is an
element.head
element's end tag can be omitted if
the head
element is not immediately followed by ASCII whitespace or a
comment.[HTMLConstructor] interface HTMLHeadElement : HTMLElement {};
head
元素中的元数据集合可大可小。这里有一个非常小的例子:
<!doctype html> <html lang=en> <head> <title>A document with a short head</title> </head> <body> ...
这是一个更长的例子:
<!DOCTYPE HTML> <HTML LANG="EN"> <HEAD> <META CHARSET="UTF-8"> <BASE HREF="https://www.example.com/"> <TITLE>An application with a long head</TITLE> <LINK REL="STYLESHEET" HREF="default.css"> <LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text"> <SCRIPT SRC="support.js"></SCRIPT> <META NAME="APPLICATION-NAME" CONTENT="Long headed application"> </HEAD> <BODY> ...
title
元素在多数场景下都是必须的子元素,但是当更高级协议提供了标题信息时,
例如在 e-mail 中使用 HTML 作为编写格式,有标题行时就可以忽略 title
元素。
title
元素Support in all current engines.
Support in all current engines.
title
的 head
元素中。[HTMLConstructor] interface HTMLTitleElement : HTMLElement { [CEReactions] attribute DOMString text; };
title
元素 表示 文档的标题或名称。
作者应该使用标识其文档的标题,这个标题在其他上下文中也会被使用,例如在用户的历史、书签,或搜索结果中。
文档的标题常常与第一个标题元素不同,因为第一个标题不需要在上下文之外有意义。
每个文档不得有多个 title
元素。
如果 Document
没有标题是合理的,则可能不要求有
title
元素。在 head
元素的内容模型中描述了何时该元素是必须的。
text
[ = value ]返回该元素的 子文本内容。
设置时用给定的值替换该元素的子内容。
text
IDL 属性必须返回
title
元素的 子文本内容。
当设置时,必须与 textContent
IDL 属性的表现一致。
这是一些合适的标题的例子,以及同一页面中可能有的顶层标题。
<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...
The next page might be a part of the same site。 Note how the title describes the subject matter unambiguously,while the first heading assumes the reader knows what the context is and therefore won't wonder if the dances are Salsa or Waltz:
<title>Dances used during bee mating rituals</title> ... <h1>The Dances</h1>
document.title
IDL 属性用作文档的标题。
当用户代理在其用户界面中引用文档时,应该使用该文档的标题。
当这样使用 title
元素的内容时,
应该使用该 title
元素的 方向
设置用户界面中该文档标题的方向。
base
元素Support in all current engines.
base
元素的 head
元素中。href
— Document base URLtarget
— Default browsing context for hyperlink navigation and form submission[Exposed=Window, HTMLConstructor] interface HTMLBaseElement : HTMLElement { [CEReactions] attribute USVString href; [CEReactions] attribute DOMString target; };
base
元素允许作者指定用于 解析 URL 的
文档基 URL,
以及用于 跟随超链接 的默认
浏览上下文 的名称。
该元素不 表示 超出该信息的任何内容。
每个文档中不得包含多个 base
元素。
base
元素有一个 href
属性,
或者 target
属性,或者两者都有。
如果指定了 href
内容属性,
必须包含一个 可能被空白包裹的合法的 URL。
如果 base
元素有 href
属性,
则必须出现在树中的任何使用 URL 的其他元素之前,
html
元素除外(其 manifest
属性不受
base
元素的影响)。
如果有多个有 href
属性的 base
元素,
则忽略除第一个之外的。
如果指定了 target
属性,则必须包含一个
合法的浏览上下文名称或关键字,
它指定了当 Document
中的 超链接 和
表单 产生 导航 时默认使用哪个
浏览上下文。
base
元素如果有 target
属性,
必须出现在树中表示 超链接 的其他元素之前。
如果有多个有 target
属性的
base
元素,则忽略除第一个之外的。
给定 a
, area
, 或 form
元素 element,
要 获得元素的 target,执行这些步骤:
如果 element 有 target
属性,则返回该属性的值。
如果 element 的 节点文档 包含一个
有 target
属性的 base
元素,
则返回第一个这样的 base
元素的这一
target
属性的值。
返回空字符串。
在文档树中 第一个有
href
内容属性的 base
元素元素有一个
冻结的 base URL。当下列情况发生时,
必须 立即 设置
元素的 冻结的 base URL:
base
元素成为其 Document
中按照
树序 的第一个有
href
内容属性的 base
元素。base
元素是 Document
中按照
树序 的第一个有
href
内容属性的 base
元素,
它的 href
内容属性发生了变化。为元素 element 设置冻结的 base URL 步骤如下:
令document 为 element的 节点文档。
令urlRecord 为用 document 的 fallback base URL,
以及 document的 字符编码
解析
element的 href
内容属性的值的结果。
(因此 base
元素不影响它自己。)
如果 urlRecord 是失败或者
在 结果 URL 记录 和 document 上执行
Document 是否允许 base? 返回了 "Blocked
",
则设置 element 的 冻结的 base URL 为
document 的 fallback base URL;否则设置为 urlRecord。
在读取时,href
IDL 属性必须返回运行以下算法的结果:
令document 为 element的 节点文档。
令url 该元素的 href
属性的值,
如果没有则为空字符串。
令urlRecord 为用 document 的 fallback base URL,
以及 document的 字符编码
解析
element的 href
内容属性的值的结果。
(因此 base
元素不影响它自己。)
如果 urlRecord 是失败,则返回 url。
返回 urlRecord 的 序列化。
在设置 href
IDL 属性时,必须设置 href
内容属性为给定的新值。
target
IDL 属性必须
反映 同名的内容属性。
在这个例子中,用一个 base
元素来设置 文档的 base URL:
<!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.
head
中的 noscript
元素中。href
— Address of the hyperlinkcrossorigin
— How the element handles crossorigin requestsrel
— Relationship between the document containing the hyperlink and the destination resourcemedia
— Applicable mediaintegrity
— Integrity metadata used in Subresource Integrity checks [SRI]hreflang
— Language of the linked resourcetype
— Hint for the type of the referenced resourcereferrerpolicy
— Referrer policy for fetches initiated by the elementsizes
— Sizes of the icons (for rel
="icon
")imagesrcset
— Images to use in different situations, e.g., high-resolution displays, small monitors, etc. (for rel
="preload
")imagesizes
— Image sizes for different page layouts (for rel
="preload
")as
— Potential destination for a preload request (for rel
="preload
" and rel
="modulepreload
")color
— Color to use when customizing a site's icon (for rel
="mask-icon
")disabled
— Whether the link is disabledtitle
属性 有特殊的语义。 — Title of the link — CSS style sheet set name[Exposed=Window]
interface HTMLLinkElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute USVString href;
[CEReactions] attribute DOMString? crossOrigin;
[CEReactions] attribute DOMString rel;
[CEReactions] attribute DOMString as; // (default "")
[SameObject,PutForwards=value] readonly attribute DOMTokenList relList;
[CEReactions] attribute DOMString media;
[CEReactions] attribute DOMString integrity;
[CEReactions] attribute DOMString hreflang;
[CEReactions] attribute DOMString type;
[SameObject,PutForwards=value] readonly attribute DOMTokenList sizes;
[CEReactions] attribute USVString imageSrcset;
[CEReactions] attribute DOMString imageSizes;
[CEReactions] attribute DOMString referrerPolicy;
[CEReactions] attribute boolean disabled;
// also has obsolete members
};
HTMLLinkElement includes LinkStyle;
link
元素允许作者把他们的文档链接到其他资源。
链接的地址由 href
属性给出。
如果存在 href
属性,那么它的值必须是一个
可能由空格包裹的合法的非空 URL。
必须存在 href
或 imagesrcset
属性。
如果 href
和 imagesrcset
属性都不存在,那么该元素就不包含链接的定义。
crossorigin
属性是一个 CORS 设置属性,用于 外部资源链接。
链接指示的类型(关系)由 rel
属性的值给出。该属性如果出现则它的值必须是一个
由空格分隔的唯一令牌的无序集合。
允许的关键字及其含义 定义在后续章节中。
如果 rel
属性缺失,
不包含关键字,或者没有出现(根据本规范中的定义)允许的关键字,
则该元素不创建任何链接。
rel
支持的令牌 是
HTML 链接类型 中定义的,
link
元素上允许的,影响处理模型的,用户代理支持的关键字。
可能的 支持的令牌 包括
alternate
,
dns-prefetch
,
icon
,
modulepreload
,
next
,
pingback
,
preconnect
,
prefetch
,
preload
,
prerender
,
search
,和
stylesheet
。
rel
的
支持的令牌 必须只包含这个列表中用户代理实现了相应处理模型的令牌。
理论上用户代理可能会支持
canonical
关键字的处理模型,
比如用户代理是一个执行 JavaScript 的搜索引擎的话。虽然实践中基本不会发生。
所以大多数场景下,canonical
不应属于
rel
支持的令牌。
link
元素必须有一个 rel
属性或者 itemprop
属性,但不能同时有这两个。
如果 link
元素有一个 itemprop
属性,
或者有一个只包含 body-ok 关键字的 rel
属性,
则称该元素 允许出现在 body 中。
这意味着该元素可以用于期望 短语内容 的地方。
如果用了 rel
属性,
该元素只能用于页面中的 body
部分。如果用了 itemprop
属性,该元素既可以用于页面中的
head
元素也可以用于 body
元素,取决于元数据模型的约束。
使用 link
元素可以创建两类链接: 外部资源链接 和 超链接。
链接类型一章 定义了
特定的链接类型是外部资源还是超链接。
一个 link
元素可以创建多个链接(其中有些可能是
外部资源链接,有些可能是
超链接);具体创建了哪种链接,创建了多少个取决于
rel
属性中给出的关键字。
用户代理必须逐链接而不是逐元素进行处理。
为 link
元素创建的每个链接都会被单独处理。
例如,如果有两个有 rel="stylesheet"
的 link
元素,
它们每个都被当做独立的外部资源,每个都会独立地受自己的属性影响。
类似地,如果单个 link
元素有一个
值为 next stylesheet
rel
属性,
它(为 next
关键字)创建了一个
超链接,同时也
(为 stylesheet
关键字)创建了一个
外部资源链接,
它们分别受其他属性(例如 media
或
title
)的影响。
例如下面的 link
元素创建了两个 超链接
(指向同一页面):
<link rel="author license" href="/about">
该元素创建的这两个链接,一个的语义是目标页面具有关于当前页面作者的信息, 另一个的语义是目标页面具有提供当前页面的授权信息。
link
元素和它的 rel
属性创建的
超链接 适用于整个文档。
这区别于 a
和 area
元素的
rel
属性,它们指定了链接的类型,
链接的上下文由链接在文档中的位置给出。
外部资源链接 的确切行为取决于由相关的 链接类型 定义的具体关系。
media
属性指定了该资源适用哪种媒体。
它的值必须是 合法的媒体查询列表。
nonce
属性表示一个加密随机数
("一次性数字")用于 Content Security Policy 来确定
该链接指定的外部资源
是否会被加载和应用于该文档。它的值是文本。 [CSP]
integrity
属性表示该元素负责的请求的 integrity 元信息。
值为文本。该属性只能用于 rel
属性包含
stylesheet
,
preload
或
modulepreload
关键字的 link
元素。[SRI]
link
元素上的 hreflang
属性与 a
元素上的 hreflang
属性 具有相同的语义。
type
属性给出了被链接资源的
MIME 类型。它纯属建议性的。它的值必须是
合法的 MIME 类型。
对于 外部资源链接,
type
属性用于提示用户代理避免获取它们不支持的资源。
referrerpolicy
属性是一个
引荐策略属性。
它用于 外部资源链接,
帮助设置 获取和处理 该外部资源时的
引荐策略。 [REFERRERPOLICY]。
title
属性给出了链接的标题。
有一个特例中,它是纯建议性的。它的值是文本。
特例是 在文档树 中的样式表链接,
对它而言 title
属性定义了
CSS 样式表集合。
link
元素上的 title
属性
与多数其他元素的全局 title
属性不同,
没有标题的链接不继承父元素的标题:它只是没有标题。
imagesrcset
属性可以是一个 srcset 属性。
imagesrcset
和 href
属性(如果没有使用 宽度描述符)
一起给 source set 提供 图片源。
如果 imagesrcset
属性存在且有任一个
图片候选字符串 使用了 宽度描述符,
imagesizes
属性就必须存在,且是一个
尺寸属性。imagesizes
属性给
source set 提供 源尺寸。
imagesrcset
和 imagesizes
属性只能用于
rel
属性指定了 preload
关键字,且
as
属性在处于 "image
" 状态的
link
元素上。
这些属性运行预加载适当的资源,
后续 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
的浏览器中起作用,可能会预加载错误的图片。
imagesrcset
属性可以和
media
属性一起使用来预加载适当的资源
picture
元素选择的资源,来实现 美术设计:
<link rel="preload" as="image"
imagesrcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
media="(max-width: 800px)">
<link rel="preload" as="image"
imagesrcset="dog-wide-1x.jpg, dog-wide-2x.jpg 2x"
media="(min-width: 801px)">
<!-- ... later, or perhaps inserted dynamically ... -->
<picture>
<source srcset="dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
media="(max-width: 800px)">
<img src="dog-wide-1x.jpg" srcset="dog-wide-2x.jpg 2x"
alt="An awesome dog">
</picture>
sizes
属性给出了
视觉媒体的图标大小。它的值(如果存在的话)只是建议性的。
用户代理可以根据它的值来在多个可用的图标中选择使用哪个。
如果指定了,这个属性的值必须是 ASCII 大小写不敏感 的
空格分隔的无序不重复令牌集合。
每个值必须 ASCII 大小写不敏感 地匹配字符串
"any
",或包含两个
合法的非负整数 且不得有前导 U+0030 DIGIT ZERO (0) 字符,
并以单个 U+0078 LATIN SMALL LETTER X 或 U+0058 LATIN CAPITAL LETTER X 字符分隔。
该属性只能用于 rel
属性指定了
icon
关键字或 apple-touch-icon
关键字的 link
元素。
apple-touch-icon
关键字是一个已注册的 链接类型的预定义集合扩展,但不要求用户代理支持它。
as
属性为
href
指定的资源的预加载请求指定了
可能的地址。
这是一个 枚举属性。
每个 可能的地址 是一个关键字,
映射为一个同名的状态。该属性必须指定在
rel
属性包含 preload
关键字的
link
元素上。也可以指定在
rel
属性包含 modulepreload
关键字的
link
元素上;这种情况下它的值必须是
script-like 地址。
其他 link
元素不能使用这个属性。
如何使用 as
属性的处理模型在
每个 link 类型的 获取和处理链接资源 算法中给出。
该属性没有 缺失值默认 或 非法值默认,意味着非法值或缺失值不映射到任何状态。 这在处理模型中有所解释。
color
属性用于 mask-icon
链接类型。该属性不得指定在
rel
属性不包含 mask-icon
关键字的
link
元素上。它的值必须是一个匹配 CSS <color> 生成式的字符串,
用于定义一个用户代理在用户固定一个网站时用来自定义图标展示的建议颜色。
本规范在 color
属性上对用户代理没有任何要求。
mask-icon
关键字是一个已注册的 链接类型的预定义集合扩展,但不要求用户代理支持。
link
元素有一个关联的 explicitly enabled 布尔。它默认为假。
disabled
属性是一个 布尔属性,用在 stylesheet
链接类型上。该属性只能用在
rel
属性包含 stylesheet
关键字的 link
元素上。
只要 disabled
属性被移除,就设置
link
元素的 explicitly enabled 属性为真。
动态地移除 disabled
属性,例如用
document.querySelector("link").removeAttribute("disabled")
,会去获取并应用样式:
<link disabled rel="alternate stylesheet" href="css/pooh">
Support in all current engines.
IDL 属性
href
,
hreflang
,
integrity
,
media
,
nonce
,
rel
,
scope
,
sizes
,
type
,和
disabled
都必须 反映 对应的同名内容属性。
对 color
属性没有相应的 IDL 属性,但今后可能会增加。
Support in all current engines.
as
IDL 属性必须 反映
as
内容属性,
并限制为已知的值。
crossOrigin
IDL 属性必须
反映 crossorigin
内容属性。
HTMLLinkElement/referrerPolicy
Support in all current engines.
referrerPolicy
IDL 属性必须
反映 referrerpolicy
内容属性,并 限制到已知的值。
The imageSrcset
IDL 属性必须
反映 imagesrcset
内容属性。
The imageSizes
IDL 属性必须
反映 the imagesizes
内容属性。
Support in all current engines.
media
属性如果该链接是 超链接 那么
media
属性就是纯建议性的,
描述了该文档是为哪种媒体设计的。
但如果该链接是 外部资源链接,则 media
属性则是指定的。
当 media
属性值
匹配当前环境 以及其他相关条件时,
用户代理必须应用这一外部资源。其他情况不得应用该资源。
如果忽略 media
属性,
默认值是 "all
",表示默认情况下链接适用于所有媒体。
外部资源可能会在此限制范围内限定其适用性。
例如,CSS样式表可能有一些 @media
块。
本规范不会覆盖这些进一步的限制或要求。
type
属性如果存在 type
属性,那么用户代理必须假定
该资源属于给定的类型(即使它不是 合法的 MIME 类型,
例如空字符串)。 如果忽略了该属性,但
外部资源链接 类型定义有默认值,则用户代理必须假定该资源属于那种类型。
如果 UA 对指定的链接关系不支持给定的 MIME 类型,
那么 UA 不应 获取和处理 该资源;如果 UA
对指定的链接关系支持给定的 MIME 类型,
那么 UA 应该按照 外部资源链接 的特定类型所指定的
适当时机 获取和处理 该资源。
如果忽略了该属性,且 外部资源链接
类型没有定义默认值,但如果已知类型且支持的话用户代理会
获取和处理 该资源,
那么用户代理就应该假设支持该资源并且 获取和处理 它。
用户代理不得将 type
属性当做权威的
— 也就是说获取该资源时用户代理不得使用 type
属性来决定实际的类型。只能用实际的类型(定义在下一段)而不是前述的假设的类型
来决定是否应用该资源。
如果 外部资源链接 类型定义了处理该资源的 Content-Type 元数据 的规则,那么应用那些规则。 否则,如果该资源期望是一张图片,用户代理可以应用 图片嗅探规则, 其中 official type 为从该资源的 Content-Type 元数据 确定的类型, 然后把 计算得到的资源类型 当做实际的类型使用。 否则,如果上述条件都不符合或者用户代理选择不应用图片嗅探规则,那么用户代理必须使用该资源的 Content-Type 元数据 来确定资源类型。 如果没有类型元数据,但 外部资源链接 类型定义有默认值, 那么该用户代理必须假设该资源是那种类型。
stylesheet
链接类型定义了处理资源的
Content-Type 元数据 的规则。
一旦用户代理建立了该资源的类型,而且这是一个支持的类型并满足其他相关条件,就必须应用该资源。 否则就必须忽略该资源。
如果一个文档包含如下标记的样式表链接:
<link rel="stylesheet" href="A" type="text/plain">
<link rel="stylesheet" href="B" type="text/css">
<link rel="stylesheet" href="C">
那么一个只支持 CSS 样式表的满足规范的 UA 会获取 B 和 C 文件,
并跳过 A (因为 text/plain
不是 CSS 样式表的 MIME type)。
对于文件 B 和 C,它会检查服务器返回的实际类型。对于作为 text/css
发送的,
它将会应用样式,但对于标记为 text/plain
或其他类型则不会。
如果这两个文件中的一个返回时没有 Content-Type 元数据,
或者有一个语法错误的类型比如 Content-Type: "null"
,
那么就使用 stylesheet
链接的默认类型。
因为这个默认类型是 text/css
,所以这个样式表 将会 被应用。
link
元素获取和处理资源所有 外部资源链接
都有一个 获取和处理链接资源 算法,
该算法接受一个 link
元素 el 作为参数。
还有一个 链接资源获取配置步骤,
它接受 link
元素 el 和 请求 request。
每个链接类型可能提供它们自己的 获取和处理链接资源 算法,
但除非特别说明,它们都使用 默认的获取和处理链接资源 算法。
类似地,每个链接类型也可能提供它自己的 链接资源获取配置步骤,
但除非特别说明,这些步骤只返回 true。
给定 link
元素 el,
默认的获取和处理链接资源 如下:
如果 href
属性的值是空字符串,则中止这些步骤。
给定 href
属性,相对于该元素的 节点文档
解析 URL。如果失败则返回。否则,令 url 为
结果 URL 记录。
令 corsAttributeState 为该元素的 crossorigin
内容属性的当前状态。
令request 为给定 url,空字符串,以及 corsAttributeState 创建一个可能跨域的请求 的结果。
设置 request 的 异步标志。
设置request 的
nonce 元数据 为
link
元素的 [[CryptographicNonce]] 内部槽的当前值。
设置request的
referrer policy 为
link
元素的 referrerpolicy
属性的为当前状态。
执行 链接资源获取配置步骤 并传入 el 和 request。如果结果为 false 就返回。
并行地 执行以下步骤:
令 response 为 获取 request 的结果。
令 success 为 true。
如果 response 是 网络错误 或它的 状态 不是 OK, 这是 success 为 false。
注意内容相关错误比如 CSS 解析错误或 PNG 解码错误不影响 success。
如果 success 为 true,等待 链接资源 的 关键子资源 结束加载。
定义链接类型的 关键子资源 的标准(比如 CSS) 应该描述这些如何获取和处理这些子资源。本标准描述描述等待 链接资源 的 关键子资源 获取和处理时,假设它得到了正确地处理。
用户代理在需要这些资源时才会去 获取和处理, 而不是预先获取所有未应用的 外部资源。
和 获取和处理链接资源 算法类似,所有
外部资源链接 都有对应的
处理链接资源 算法,
接受一个 link
元素 el,布尔值 success 和 响应 response。
除非个别链接类型提供了它自己的 处理链接资源 算法,
就是用给定 link
元素 el 和布尔值 success (忽略 response)的
默认的处理链接资源 算法:
除非给定的 rel
关键字另有说明,
在获取该资源及其 关键子资源 的所有尝试完成之前,
必须 推迟 该元素的
节点文档 的 load 事件。
(用户代理还没尝试获取的资源不会 推迟 load 事件,比如因为它在等待需要的资源。)
Link
` 协议头如果支持 HTTP `Link
` 协议头,
则必须假定它们在文档的 link 之前,按照在 HTTP 消息中的顺序到达。
这些头将会按照相关规范给出的规则进行处理。 [HTTP] [WEBLINK]
HTTP `Link
` 中的关系类型注册
与 HTML link 类型 不同,
因此它们与同名 HTML 类型的语义也可能不同。
link
元素创建的超链接的方式交互式的用户代理可能会在用户界面里为用户提供一种 跟随 使用 link
元素创建的超链接的方式。
本规范没有定义具体的界面,但是它可以对文档中每个由
link
元素创建的 hyperlink,
包含某种形式的(可能会被简化)以下信息(从元素的属性获取,下文有相应定义):
rel
属性给出)之间的关系。title
属性给出)。href
属性给出)。hreflang
属性给出)。media
属性给出)。用户代理也可以包含其他信息,比如资源类型(由 type
属性给出)。
创建 超链接 的 link
元素的
激活行为 就是如下步骤:
meta
元素Support in all current engines.
Support in all current engines.
itemprop
属性: 流式内容。itemprop
属性: 短语内容。charset
属性,或者元素的 http-equiv
属性处于 编码声明状态:在 head
元素中。http-equiv
属性但不在 编码声明状态:在 head
元素中。http-equiv
属性但不在 编码声明状态:在 head
元素的 noscript
子元素中。name
属性:期望 元数据内容 的地方。itemprop
属性: 期望元数据内容 的地方。itemprop
属性: 期望短语内容 的地方。name
— Metadata namehttp-equiv
— Pragma directivecontent
— Value of the elementcharset
— Character encoding declaration[HTMLConstructor] interface HTMLMetaElement : HTMLElement { [CEReactions] attribute DOMString name; [CEReactions] attribute DOMString httpEquiv; [CEReactions] attribute DOMString content; };
meta
元素 表示 很多不能用
title
,base
,link
,style
,
和 script
元素表达的元数据。
meta
元素可以通过 name
属性表示文档级别的元数据,
通过 http-equiv
属性表示编译指示,
通过 charset
属性表示 HTML 文档序列化为字符串时(例如用于网络传输或者磁盘存储时)
文件的 字符编码声明。
必须指定这些属性中的一个:name
,http-equiv
,charset
,
和 itemprop
。
如果指定了 name
,http-equiv
,
或 itemprop
,那么必须也指定 content
属性。
否则必须忽略它。
charset
属性指定了文档使用的字符编码。
这是一个 字符编码声明。如果在
XML 文档 上指定了该属性,其值必须
ASCII 大小写不敏感地 匹配 "utf-8
"
(且该文档必须使用 UTF-8 作为它的编码)。
meta
元素上 charset
属性
对 XML 文档不起作用,允许它只是为了方便与 XML 之间进行迁移。
每个文档必须存在不少于一个有 charset
属性的 meta
元素。
content
属性给出了文档元数据或编译指令的值。
允许的值取决于确切的上下文,见本规范的后续章节的描述。
如果 meta
元素有一个 name
属性,
它设置了文档元数据。文档元数据以 name-value 对表达,meta
元素的
name
属性给出了名字,同一元素的 content
属性
给出了值。名字指定了要设置哪方面的元数据;合法的名字连同它的值的含义在后续章节描述。
如果 meta
元素没有 content
属性,那么 name-value 对的值的部分是空字符串。
name
和 content
IDL 属性必须 反映
相应的同名内容属性。IDL 属性 httpEquiv
必须 反映
http-equiv
内容属性。
名字是大小写不敏感的,必须以 ASCII 大小写不敏感 的方式进行比较。
application-name
值必须是一个简短的格式自由的字符串,给出本页面表示的 Web 应用的名字。
如果该页面不是一个 Web 应用,不得使用 application-name
元数据名。
必须使用 lang
属性来指定该 Web 应用的每个名字的语言。
给定一个 language,一个文档中不得有多个
name
属性设为 application-name
的 meta
元素。
用户代理可能会在 UI 中使用应用名来取代 title
,因为标题可能包含某一特定时刻页面的状态信息。
为了从给定语言的应用名有序列表(比如 British English, American English, 和 English)中选取要用的应用名, 用户代理必须执行以下步骤:
令 languages 为语言列表。
如果有一个 default language, 并且如果它与 languages 中的语言都不同, 把它追加到 languages 上。
令 winning language 为 languages 中的第一个满足这个条件的语言:
在 Document
中存在一个
name
属性设为 application-name
且 language 是那个语言的 meta
元素。
如果所有语言都没有对应的 meta
元素,那么中止这些步骤;没有给定的应用名。
返回 content
属性的值。
Document
中 按照树序 的第一个
name
属性为 application-name
且 language 是 winning language 的 meta
元素。
浏览器需要页面名字时可能会使用本算法,比如设置书签的标签时。 提供给本算法的语言列表可能来自用户的偏好设置。
author
值必须是格式自由的字符串,给出了本页面的作者的名字。
description
值必须是描述本页面的格式自由的字符串,必须适合用于页面字典,例如搜索引擎。
每个文档中不得有多个 meta
元素的 name
属性设为 description
。
generator
值必须是一个表示用于产生该文档的软件包的格式自由的字符串。 这个值不得用于不是由软件产生的页面上,例如用户在文本编辑器上编写的页面。
这是一个名为 "Frontweaver" 的工具在页面 head
元素中的输出,来标识该页面是由它这个工具生成的:
<meta name=generator content="Frontweaver 8.2">
keywords
值必须是一个 逗号分隔的令牌集合, 其中每一项都是页面的关键字。
关于英国高速公路的字体的页面使用 meta
元素来指定一些关键字(用户可能用这些关键字来查找该页面):
<!DOCTYPE HTML> <html lang="en-GB"> <head> <title>Typefaces on UK motorways</title> <meta name="keywords" content="british,type face,font,fonts,highway,highways"> </head> <body> ...
很多搜索引擎不会考虑这些关键字,因为该特性是不可靠的甚至会导致垃圾结果,对用户并没有帮助。
为了获得作者指定的关键字列表,用户代理必须执行以下步骤:
令 keywords 为一个空列表。
对每一个 name
属性的值是 keywords
,
且有一个 content
属性的 meta
元素:
用逗号 分割该元素的 content
属性的值。
把得到的结果添加到 keywords,如果有的话。
从 keywords 移除所有重复。
返回 keywords。这就是作者指定的页面关键字列表。
对值的可靠性没有足够的信心时,用户代理不应使用这一信息。
例如,内容管理系统可能会使用页面关键字来填充站内搜索引擎的索引, 但使用这一信息进行大规模的内容聚合时可能会发现某些用户会尝试利用不合适的关键字来对排序机制作弊。
referrer
值必须是 引荐策略, 它为 Document
定义了默认的
引荐策略。 [REFERRERPOLICY]
如果有 meta
元素 插入文档 或 从文档中移除,或者现有的 meta
元素的
name
或 content
属性变化,
用户代理必须执行以下算法:
对 candidate elements 中的每一个 element:
令 value 为 element 的 content
属性
转化为 ASCII 小写 后的值。
如果 value 的值属于下表中第一列,则设置 value 为第二列的值:
遗留的值 | 引荐策略 |
---|---|
never
| no-referrer
|
default
| no-referrer-when-downgrade
|
always
| unsafe-url
|
origin-when-crossorigin
| origin-when-cross-origin
|
对每个元素应用这些步骤使得 旧的用户代理仍然可以使用这些值。 [REFERRERPOLICY]
theme-color
值必须是匹配 CSS <color> 生成式的字符串, 为用户代理定义了一个建议的颜色, 用来自定义该页面或周边 UI 的显示。例如,浏览器可能会用指定的颜色渲染页面的标题栏, 或者把它作为任标签栏或务栏的高亮颜色。
每个文档至少要有一个 meta
元素的 name
属性设为
theme-color
。
This standard itself uses "WHATWG green" as its theme color:
<!DOCTYPE HTML> <title>HTML Standard</title> <meta name="theme-color" content="#3c790a"> ...
用户代理必须执行以下步骤来获取页面的主题颜色:
令 candidate elements 为所有符合以下条件的 meta
元素,
按照 树序 排列:
name
属性,其值为 theme-color
content
属性对 candidate elements 中每一个 element:
令 value 为把
element 的 content
属性的值
移除前后 ASCII 空白
后的结果。
如果 value 可以解析为 CSS 颜色值, 返回解析后的值。
如果到达了这一步,该页面没有主题颜色。
如果有任何 meta
元素 插入到文档中 或者 从文档中移除, 或者现有 meta
元素的
name
或 content
属性发生了改变,用户代理必须重新执行以上算法,并应用所有影响 UI 的结果。
在 UI 中使用主题颜色时,用户代理可能会调整具体的实现细节。例如,如果用户代理要用主题色作背景在上面显示白色的文字, 则可能会在 UI 的这一部分使用主题颜色的较暗变体,以确保充分的对比度。
任何人都可以 对预定义元数据名称集的扩展, 创建和使用自己的元数据。而且无需注册此类扩展。
但是在以下任何情况下,都不应创建新的元数据名:
如果名称或它的 content
属性值是 URL;在着这些情况下,建议把它注册为一个 超链接预定义类型的扩展(而不是创建一个新的元数据名称)。
如果该名称需要用户代理进行处理,那么它应该被标准化。
另外,在创建和使用新的元数据名称之前,建议查阅 WHATWG Wiki MetaExtensions 页面 — 来避免选择已经在使用的元数据名,以及与既有元数据名的用途冗余, 以及避免新标准化的名称与你选择的冲突。 [WHATWGWIKI]
任何人在任何时候都可以编辑 WHATWG Wiki MetaExtensions 页面,添加想要的元数据名称。 新的元数据名称可以用下列信息来说明:
要定义的实际名称。名称不应与任何其他定义的名称混淆相似(比如,仅区分大小写)。
对这个元数据名称的含义的一个简短的非规范的描述,包括它的取值所需的格式。
具有完全相同的处理要求的其他名称的列表。 作者不应使用定义为同义词的名称(它们只是用于允许用户代理支持遗留内容)。 任何人都可以移除实践中不再使用的同义词;只有需要当做同义词做兼容处理的名称才能以这种方式注册。
以下之一:
如果一个元数据名称与其他现存的值冗余,那么应该把它移除并列为那个现存值的同义词。
如果一个元数据名称添加到 “已提议” 状态经过一个多月的时间并未被使用或标准化, 那么应该把它从 WHATWG Wiki MetaExtensions 页面移除。
如果一个元数据名称添加到 “已提议” 状态,并且发现与现存的值冗余, 就应该把它移除并列为该现存值的同义词。 如果一个名称被添加到 “已提议” 状态但被发现有害,则应该把它改为 “已终止” 状态。
任何人都可以随时更新状态,但应该根据上述定义进行更新。
When the http-equiv
attribute is specified on a
meta
element, the element is a pragma directive.
The http-equiv
attribute is an enumerated
attribute. The following table lists the keywords defined for this attribute. The states
given in the first cell of the rows with keywords give the states to which those keywords map.
Some of the keywords are non-conforming, as noted in the last
column.
State | Keyword | Notes |
---|---|---|
Content Language | content-language
| Non-conforming |
Encoding declaration | content-type
| |
Default style | default-style
| |
Refresh | refresh
| |
Set-Cookie | set-cookie
| Non-conforming |
X-UA-Compatible | x-ua-compatible
| |
Content security policy | content-security-policy
|
When a meta
element is inserted
into the document, if its http-equiv
attribute is
present and represents one of the above states, then the user agent must run the algorithm
appropriate for that state, as described in the following list:
http-equiv="content-language
"
)
This feature is non-conforming. Authors are encouraged to use the lang
attribute instead.
This pragma sets the pragma-set default language. Until such a pragma is successfully processed, there is no pragma-set default language.
If the element's content
attribute contains a
U+002C COMMA character (,) then return.
Let input be the value of the element's content
attribute.
Let position point at the first character of input.
Skip ASCII whitespace within input given position.
Collect a sequence of code points that are not ASCII whitespace from input given position.
Let candidate be the string that resulted from the previous step.
If candidate is the empty string, return.
Set the pragma-set default language to candidate.
If the value consists of multiple space-separated tokens, tokens after the first are ignored.
This pragma is almost, but not quite, entirely unlike the HTTP `Content-Language
` header of the same name. [HTTP]
http-equiv="content-type
"
)
The Encoding declaration state is
just an alternative form of setting the charset
attribute: it is a character encoding declaration. This state's user
agent requirements are all handled by the parsing section of the specification.
For meta
elements with an http-equiv
attribute in the Encoding declaration
state, the content
attribute must have a value
that is an ASCII case-insensitive match for a string that consists of: the literal
string "text/html;
", optionally followed by any number of ASCII
whitespace, followed by the literal string "charset=utf-8
".
A document must not contain both a meta
element with an http-equiv
attribute in the Encoding declaration state and a
meta
element with the charset
attribute
present.
The Encoding declaration state may be
used in HTML documents, but elements with an http-equiv
attribute in that state must not be used in
XML documents.
http-equiv="default-style
"
)
This pragma sets the name of the default CSS style sheet set.
If the meta
element has no content
attribute, or if that attribute's value is the empty string, then return.
Change the preferred CSS style sheet set name with the name being the value
of the element's content
attribute. [CSSOM]
http-equiv="refresh
"
)
This pragma acts as timed redirect.
A Document
object has an associated will declaratively
refresh (a boolean). It is initially false.
If the meta
element has no content
attribute, or if that attribute's value is the empty string, then return.
Let input be the value of the element's content
attribute.
Run the shared declarative refresh steps with the meta
element's node document, input, and the meta
element.
The shared declarative refresh steps, given a Document
object
document, string input, and optionally a meta
element
meta, are as follows:
If document's will declaratively refresh is true, then return.
Let position point at the first code point of input.
Skip ASCII whitespace within input given position.
Let time be 0.
Collect a sequence of code points that are ASCII digits from input given position, and let the result be timeString.
If timeString is the empty string, then:
If the code point in input pointed to by position is not U+002E (.), then return.
Otherwise, set time to the result of parsing timeString using the rules for parsing non-negative integers.
Collect a sequence of code points that are ASCII digits and U+002E FULL STOP characters (.) from input given position. Ignore any collected characters.
Let urlRecord be document's URL.
If position is not past the end of input, then:
If the code point in input pointed to by position is not U+003B (;), U+002C (,), or ASCII whitespace, then return.
Skip ASCII whitespace within input given position.
If the code point in input pointed to by position is U+003B (;) or U+002C (,), then advance position to the next code point.
Skip ASCII whitespace within input given position.
If position is not past the end of input, then:
Let urlString be the substring of input from the code point at position to the end of the string.
If the code point in input pointed to by position is U+0055 (U) or U+0075 (u), then advance position to the next code point. Otherwise, jump to the step labeled skip quotes.
If the code point in input pointed to by position is U+0052 (R) or U+0072 (r), then advance position to the next code point. Otherwise, jump to the step labeled parse.
If the code point in input pointed to by position is U+004C (L) or U+006C (l), then advance position to the next code point. Otherwise, jump to the step labeled parse.
Skip ASCII whitespace within input given position.
If the code point in input pointed to by position is U+003D (=), then advance position to the next code point. Otherwise, jump to the step labeled parse.
Skip ASCII whitespace within input given position.
Skip quotes: If the code point in input pointed to by position is U+0027 (') or U+0022 ("), then let quote be that code point, and advance position to the next code point. Otherwise, let quote be the empty string.
Set urlString to the substring of input from the code point at position to the end of the string.
If quote is not the empty string, and there is a code point in urlString equal to quote, then truncate urlString at that code point, so that it and all subsequent code points are removed.
Parse: Parse urlString relative to document. If that fails, return. Otherwise, set urlRecord to the resulting URL record.
Set document's will declaratively refresh to true.
Perform one or more of the following steps:
After the refresh has come due (as defined below), if the user has not canceled the
redirect and, if meta is given, document's active sandboxing
flag set does not have the sandboxed automatic features browsing context
flag set, then navigate
document's browsing context to
urlRecord, with historyHandling set to "replace
" and the source browsing context set to
document's browsing context.
For the purposes of the previous paragraph, a refresh is said to have come due as soon as the later of the following two conditions occurs:
It is important to use document here, and not meta's
node document, as that might have changed between the initial set of steps and
the refresh coming due and meta is not always given (in case of the HTTP
`Refresh
` header).
Provide the user with an interface that, when selected, navigates a browsing context to urlRecord, with document's browsing context as the source browsing context.
Do nothing.
In addition, the user agent may, as with anything, inform the user of any and all aspects of its operation, including the state of any timers, the destinations of any timed redirects, and so forth.
For meta
elements with an http-equiv
attribute in the Refresh state, the content
attribute must have a value consisting either of:
URL
",
followed by a U+003D EQUALS SIGN character (=), followed by a valid URL string
that does not start with a literal U+0027 APOSTROPHE (') or U+0022 QUOTATION MARK (")
character.In the former case, the integer represents a number of seconds before the page is to be reloaded; in the latter case the integer represents a number of seconds before the page is to be replaced by the page at the given URL.
A news organization's front page could include the following markup in the page's
head
element, to ensure that the page automatically reloads from the server every
five minutes:
<meta http-equiv="Refresh" content="300">
A sequence of pages could be used as an automated slide show by making each page refresh to the next page in the sequence, using markup such as the following:
<meta http-equiv="Refresh" content="20; URL=page4.html">
http-equiv="set-cookie
"
)
This pragma is non-conforming and has no effect.
User agents are required to ignore this pragma.
http-equiv="x-ua-compatible
"
)
In practice, this pragma encourages Internet Explorer to more closely follow the specifications.
For meta
elements with an http-equiv
attribute in the X-UA-Compatible state, the
content
attribute must have a value that is an
ASCII case-insensitive match for the string "IE=edge
".
User agents are required to ignore this pragma.
http-equiv="content-security-policy
"
)
This pragma enforces a Content Security
Policy on a Document
. [CSP]
If the meta
element is not a child of a head
element,
return.
If the meta
element has no content
attribute, or if that attribute's value is the empty string, then return.
Let policy be the result of executing Content Security Policy's parse
a serialized Content Security Policy algorithm on the meta
element's
content
attribute's value, with a source of "meta",
and a disposition of "enforce".
Remove all occurrences of the report-uri
, frame-ancestors
, and sandbox
directives from policy.
Enforce the 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 upon the current document. [CSP]
A page might choose to mitigate the risk of cross-site scripting attacks by preventing the execution of inline JavaScript, as well as blocking all plugin content, using a policy such as the following:
<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'">
There must not be more than one meta
element with any particular state in the
document at a time.
A character encoding declaration is a mechanism by which the character encoding used to store or transmit a document is specified.
The Encoding standard requires use of the UTF-8 character
encoding and requires use of the "utf-8
" encoding label
to identify it. Those requirements necessitate that the document's character encoding
declaration, if it exists, specifies an encoding label using an ASCII
case-insensitive match for "utf-8
". Regardless of whether a
character encoding declaration is present or not, the actual character encoding used to encode the document must be
UTF-8. [ENCODING]
To enforce the above rules, authoring tools must default to using UTF-8 for newly-created documents.
The following restrictions also apply:
In addition, due to a number of restrictions on meta
elements, there can only be
one meta
-based character encoding declaration per document.
If an HTML document does not start with a BOM, and its
encoding is not explicitly given by Content-Type
metadata, and the document is not an iframe
srcdoc
document, then the encoding must be specified
using a meta
element with a charset
attribute
or a meta
element with an http-equiv
attribute in the Encoding declaration
state.
A character encoding declaration is required (either in the Content-Type metadata or explicitly in the file) even when all characters are in the ASCII range, because a character encoding is needed to process non-ASCII characters entered by the user in forms, in URLs generated by scripts, and so forth.
Using non-UTF-8 encodings can have unexpected results on form submission and URL encodings, which use the document's character encoding by default.
If the document is an iframe
srcdoc
document, the document must not have a character encoding declaration. (In
this case, the source is already decoded, since it is part of the document that contained the
iframe
.)
In XML, the XML declaration should be used for inline character encoding information, if necessary.
In HTML, to declare that the character encoding is UTF-8, the author could
include the following markup near the top of the document (in the head
element):
<meta charset="utf-8">
In XML, the XML declaration would be used instead, at the very top of the markup:
<?xml version="1.0" encoding="utf-8"?>
style
elementSupport in all current engines.
Support in all current engines.
noscript
element that is a child of a head
element.media
— Applicable mediatitle
attribute has special semantics on this element: CSS style sheet set name.[Exposed=Window]
interface HTMLStyleElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute DOMString media;
// also has obsolete members
};
HTMLStyleElement includes LinkStyle;
The style
element allows authors to embed CSS style sheets in their documents.
The style
element is one of several inputs to the styling processing
model. The element does not represent content for the
user.
The media
attribute
says which media the styles apply to. The value must be a valid media query list.
The user agent must apply the styles when the media
attribute's value matches the environment and
the other relevant conditions apply, and must not apply them otherwise.
The styles might be further limited in scope, e.g. in CSS with the use of @media
blocks. This specification does not override such further restrictions or
requirements.
The default, if the media
attribute is omitted, is "all
", meaning that by default styles apply to all
media.
The title
attribute on style
elements defines
CSS style sheet sets. If the style
element
has no title
attribute, then it has no title; the title
attribute of ancestors does not apply to the style
element. If the style
element is not in a document tree, then the title
attribute is ignored. [CSSOM]
The title
attribute on style
elements, like the title
attribute on link
elements, differs from the global title
attribute in that a
style
block without a title does not inherit the title of the parent element: it
merely has no title.
The child text content of a style
element must be that of a
conformant style sheet.
The user agent must run the update a style
block algorithm whenever
one of the following conditions occur:
The element is popped off the stack of open elements of an HTML parser or XML parser.
The element is not on the stack of open elements of an HTML parser or XML parser, and it becomes connected or disconnected.
The element's children changed steps run.
The update a style
block algorithm is as follows:
Let element be the style
element.
If element has an associated CSS style sheet, remove the CSS style sheet in question.
If element's root is neither a shadow root nor a document, then return.
If element's type
attribute is present and
its value is neither the empty string nor an ASCII case-insensitive match for
"text/css
", then return.
In particular, a type
value with
parameters, such as "text/css; charset=utf-8
", will cause this algorithm
to return early.
If the Should element's inline behavior be blocked by Content Security
Policy? algorithm returns "Blocked
" when executed upon the
style
element, "style
", and the style
element's child text content, then return. [CSP]
Create a CSS style sheet with the following properties:
element
The media
attribute of element.
This is a reference to the (possibly absent at this time) attribute, rather than a copy of the attribute's current value. CSSOM defines what happens when the attribute is dynamically set, changed, or removed.
The title
attribute of element, if
element is in a document tree, or the empty string otherwise.
Again, this is a reference to the attribute.
Unset.
Set.
null
Left at its default value.
Left uninitialized.
This doesn't seem right. Presumably we should be using the element's child text content? Tracked as issue #2997.
Once the attempts to obtain the style sheet's critical subresources, if any, are complete, or, if the style sheet has no critical subresources, once the style sheet has been parsed and processed, the user agent must run these steps:
Let element be the style
element associated with the style sheet
in question.
Let success be true.
If the attempts to obtain any of the style sheet's critical subresources failed for any reason (e.g., DNS error, HTTP 404 response, a connection being prematurely closed, unsupported Content-Type), set success to false.
Note that content-specific errors, e.g., CSS parse errors or PNG decoding errors, do not affect success.
Queue an element task on the networking task source given element and the following steps:
If success is true, fire an event
named load
at element.
Otherwise, fire an event named error
at element.
If element contributes a script-blocking style sheet:
Assert: element's node document's script-blocking style sheet counter is greater than 0.
Decrement element's node document's script-blocking style sheet counter by 1.
The element must delay the load event of the element's node document until all the attempts to obtain the style sheet's critical subresources, if any, are complete.
This specification does not specify a style system, but CSS is expected to be supported by most web browsers. [CSS]
Support in all current engines.
The media
IDL
attribute must reflect the content attribute of the same name.
The LinkStyle
interface is also implemented by this element. [CSSOM]
The following document has its stress emphasis styled as bright red text rather than italics text, while leaving titles of works and Latin words in their default italics. It shows how using appropriate elements enables easier restyling of documents.
<!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 immediately made available to script; otherwise, the style rules must only be
made available to script once the event loop reaches its update the
rendering step.
An element el in the context of a
Document
of an HTML parser or XML parser contributes a
script-blocking style sheet if all of the following conditions are true:
el was created by that Document
's parser.
el is either a 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.
If the el is a link
element, it's media
attribute's value matches the
environment.
el's style sheet was enabled when the element was created by the parser.
The last time the event loop reached step 1,
el's root was that Document
.
The user agent hasn't given up on loading that particular style sheet yet. A user agent may give up on loading a style sheet at any time.
Giving up on a style sheet before the style sheet loads, if the style sheet eventually does still load, means that the script might end up operating with incorrect information. For example, if a style sheet sets the color of an element to green, but a script that inspects the resulting style is executed before the sheet is loaded, the script will find that the element is black (or whatever the default color is), and might thus make poor choices (e.g., deciding to use black as the color elsewhere on the page, instead of green). Implementers have to balance the likelihood of a script using incorrect information with the performance impact of doing nothing while waiting for a slow network request to finish.
It is expected that counterparts to the above rules also apply to
<?xml-stylesheet?>
PIs and HTTP `Link
` headers.
However, this has not yet been thoroughly investigated.
A Document
has a script-blocking style sheet counter, which is a
number, initially 0.
A Document
has a style sheet that is blocking scripts if its
script-blocking style sheet counter is greater than 0, or if that
Document
has a non-null browsing context
whose container document is non-null and has a
script-blocking style sheet counter greater than 0.
A Document
has no style sheet that is blocking scripts if it does not
have a style sheet that is blocking
scripts as defined in the previous paragraph.