1. 4 HTML 元素
    1. 4.1 文档元素
      1. 4.1.1 html 元素
    2. 4.2 文档元数据
      1. 4.2.1 head 元素
      2. 4.2.2 title 元素
      3. 4.2.3 base 元素
      4. 4.2.4 link 元素
        1. 4.2.4.1 处理 media 属性
        2. 4.2.4.2 处理 type 属性
        3. 4.2.4.3link 元素获取和处理资源
        4. 4.2.4.4 处理 `Link` 协议头
        5. 4.2.4.5 为用户提供一种跟随使用 link 元素创建的超链接的方式
      5. 4.2.5 meta 元素
        1. 4.2.5.1 标准元数据名
        2. 4.2.5.2 其他元数据名称
        3. 4.2.5.3 Pragma directives
        4. 4.2.5.4 Specifying the document's character encoding
      6. 4.2.6 The style element
      7. 4.2.7 Interactions of styling and scripting

4 HTML 元素

4.1 文档元素

4.1.1 html 元素

Element/html

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox AndroidYesSafari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

HTMLHtmlElement

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+
类别
无。
该元素可用的上下文
作为文档的 文档元素
复合文档中允许子文档片段的地方。
内容模型
head 元素紧接着 body 元素。
text/html 中的标签省略
An html element's start tag can be omitted if the first thing inside the html element is not a comment.
An html element's end tag can be omitted if the html element is not immediately followed by a comment.
内容属性
全局属性
manifestApplication cache manifest
DOM 接口
[HTMLConstructor]
interface HTMLHtmlElement : HTMLElement {};

html 元素 表示 HTML 文档的根。

鼓励作者在根 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>

4.2 文档元数据

4.2.1 head 元素

Element/head

Support in all current engines.

Firefox1+SafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

HTMLHeadElement

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+
类别
无。
该元素可用的上下文
作为 html 元素的第一个元素。
内容模型
如果该文档是 iframe srcdoc 文档, 或者如果在更高级协议上有标题信息可用:大于等于0个 元数据内容 元素,其中不多于一个 title 元素, 不多于一个 base 元素。
否则:一个或更多 元数据内容 元素,其中恰好一个是 title 元素, 且不多于一个 base 元素。
text/html 中的标签省略
A 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.
A head element's end tag can be omitted if the head element is not immediately followed by ASCII whitespace or a comment.
内容属性
全局属性
DOM 接口
[HTMLConstructor]
interface HTMLHeadElement : HTMLElement {};

head 元素 表示 Document 的元数据集合。

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 元素。

4.2.2 title 元素

Element/title

Support in all current engines.

Firefox1+Safari1+Chrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer1+
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

HTMLTitleElement

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+
类别
元数据内容
该元素可用的上下文
在不包含 titlehead 元素中。
内容模型
元素间空白文本内容
text/html 中的标签省略
哪个标签都不能省略。
内容属性
全局属性
DOM 接口
[HTMLConstructor]
interface HTMLTitleElement : HTMLElement {
  [CEReactions] attribute DOMString text;
};

title 元素 表示 文档的标题或名称。 作者应该使用标识其文档的标题,这个标题在其他上下文中也会被使用,例如在用户的历史、书签,或搜索结果中。 文档的标题常常与第一个标题元素不同,因为第一个标题不需要在上下文之外有意义。

每个文档不得有多个 title 元素。

如果 Document 没有标题是合理的,则可能不要求有 title 元素。在 head 元素的内容模型中描述了何时该元素是必须的。

title . 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 元素的 方向 设置用户界面中该文档标题的方向。

4.2.3 base 元素

HTMLBaseElement

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+
类别
元数据内容
该元素可用的上下文
不包含其他 base 元素的 head 元素中。
内容模型
text/html 中的标签省略
哪个标签都不能省略。
内容属性
全局属性
hrefDocument base URL
target — Default browsing context for hyperlink navigation and form submission
DOM 接口
[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 元素,则忽略除第一个之外的。

给定 aarea, 或 form 元素 element, 要 获得元素的 target,执行这些步骤:

  1. 如果 elementtarget 属性,则返回该属性的值。

  2. 如果 element节点文档 包含一个 有 target 属性的 base 元素, 则返回第一个这样的 base 元素的这一 target 属性的值。

  3. 返回空字符串。


在文档树中 第一个有 href 内容属性的 base 元素元素有一个 冻结的 base URL。当下列情况发生时, 必须 立即 设置 元素的 冻结的 base URL

为元素 element 设置冻结的 base URL 步骤如下:

  1. documentelement节点文档

  2. urlRecord 为用 documentfallback base URL, 以及 document字符编码 解析 elementhref 内容属性的值的结果。 (因此 base 元素不影响它自己。)

  3. 如果 urlRecord 是失败或者 在 结果 URL 记录document 上执行 Document 是否允许 base? 返回了 "Blocked", 则设置 element冻结的 base URLdocumentfallback base URL;否则设置为 urlRecord

在读取时,href IDL 属性必须返回运行以下算法的结果:

  1. documentelement节点文档

  2. url 该元素的 href 属性的值, 如果没有则为空字符串。

  3. urlRecord 为用 documentfallback base URL, 以及 document字符编码 解析 elementhref 内容属性的值的结果。 (因此 base 元素不影响它自己。)

  4. 如果 urlRecord 是失败,则返回 url

  5. 返回 urlRecord序列化

在设置 href IDL 属性时,必须设置 href 内容属性为给定的新值。

target IDL 属性必须 反映 同名的内容属性。

在这个例子中,用一个 base 元素来设置 文档的 base URL

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is an example for the &lt;base&gt; element</title>
        <base href="https://www.example.com/news/index.html">
    </head>
    <body>
        <p>Visit the <a href="archives.html">archives</a>.</p>
    </body>
</html>

上面例子中的链接地址是 "https://www.example.com/news/archives.html"。

HTMLLinkElement

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+
类别
元数据内容
如果 body 中允许 该元素:流式内容
如果 body 中允许 该元素:短语内容
该元素可用的上下文
期望 元数据内容 的地方。
head 中的 noscript 元素中。
如果 body 中允许 该元素: 期望 短语内容 的地方。
内容模型
text/html 中的标签省略
哪个标签都不能省略。
内容属性
全局属性
href — Address of the hyperlink
crossorigin — How the element handles crossorigin requests
rel — Relationship between the document containing the hyperlink and the destination resource
media — Applicable media
integrity — Integrity metadata used in Subresource Integrity checks [SRI]
hreflang — Language of the linked resource
type — Hint for the type of the referenced resource
referrerpolicyReferrer policy for fetches initiated by the element
sizes — 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")
asPotential 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 disabled
此外,在该元素上 title 属性 有特殊的语义。 — Title of the link — CSS style sheet set name
可访问性相关
使用者版本
实现者版本
DOM 接口
[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。 必须存在 hrefimagesrcset 属性。

如果 hrefimagesrcset 属性都不存在,那么该元素就不包含链接的定义。

crossorigin 属性是一个 CORS 设置属性,用于 外部资源链接

链接指示的类型(关系)由 rel 属性的值给出。该属性如果出现则它的值必须是一个 由空格分隔的唯一令牌的无序集合允许的关键字及其含义 定义在后续章节中。 如果 rel 属性缺失, 不包含关键字,或者没有出现(根据本规范中的定义)允许的关键字, 则该元素不创建任何链接。

rel 支持的令牌HTML 链接类型 中定义的, link 元素上允许的,影响处理模型的,用户代理支持的关键字。 可能的 支持的令牌 包括 alternatedns-prefetchiconmodulepreload, nextpingbackpreconnectprefetchpreloadprerendersearch,和 stylesheetrel支持的令牌 必须只包含这个列表中用户代理实现了相应处理模型的令牌。

理论上用户代理可能会支持 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 关键字)创建了一个 外部资源链接, 它们分别受其他属性(例如 mediatitle)的影响。

例如下面的 link 元素创建了两个 超链接 (指向同一页面):

<link rel="author license" href="/about">

该元素创建的这两个链接,一个的语义是目标页面具有关于当前页面作者的信息, 另一个的语义是目标页面具有提供当前页面的授权信息。

link 元素和它的 rel 属性创建的 超链接 适用于整个文档。 这区别于 aarea 元素的 rel 属性,它们指定了链接的类型, 链接的上下文由链接在文档中的位置给出。

外部资源链接 的确切行为取决于由相关的 链接类型 定义的具体关系。

media 属性指定了该资源适用哪种媒体。 它的值必须是 合法的媒体查询列表

nonce 属性表示一个加密随机数 ("一次性数字")用于 Content Security Policy 来确定 该链接指定的外部资源 是否会被加载和应用于该文档。它的值是文本。 [CSP]

integrity 属性表示该元素负责的请求的 integrity 元信息。 值为文本。该属性只能用于 rel 属性包含 stylesheetpreloadmodulepreload 关键字的 link 元素。[SRI]

link 元素上的 hreflang 属性与 a 元素上的 hreflang 属性 具有相同的语义。

type 属性给出了被链接资源的 MIME 类型。它纯属建议性的。它的值必须是 合法的 MIME 类型

对于 外部资源链接type 属性用于提示用户代理避免获取它们不支持的资源。

referrerpolicy 属性是一个 引荐策略属性。 它用于 外部资源链接, 帮助设置 获取和处理 该外部资源时的 引荐策略[REFERRERPOLICY]

title 属性给出了链接的标题。 有一个特例中,它是纯建议性的。它的值是文本。 特例是 在文档树 中的样式表链接, 对它而言 title 属性定义了 CSS 样式表集合

link 元素上的 title 属性 与多数其他元素的全局 title 属性不同, 没有标题的链接不继承父元素的标题:它只是没有标题。


imagesrcset 属性可以是一个 srcset 属性

imagesrcsethref 属性(如果没有使用 宽度描述符) 一起给 source set 提供 图片源

如果 imagesrcset 属性存在且有任一个 图片候选字符串 使用了 宽度描述符imagesizes 属性就必须存在,且是一个 尺寸属性imagesizes 属性给 source set 提供 源尺寸

imagesrcsetimagesizes 属性只能用于 rel 属性指定了 preload 关键字,且 as 属性在处于 "image" 状态的 link 元素上。

这些属性运行预加载适当的资源, 后续 img 被使用 srcsetsizes 属性:

<link rel="preload" as="image"
      imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
      imagesizes="50vw">

<!-- ... later, or perhaps inserted dynamically ... -->
<img src="wolf.jpg" alt="A rad wolf"
     srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
     sizes="50vw">

注意我们忽略了 href 属性,因为它会在不支持 imagesrcset 的浏览器中起作用,可能会预加载错误的图片。

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">

HTMLLinkElement/rel

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

IDL 属性 hrefhreflangintegritymedianoncerelscopesizestype,和 disabled 都必须 反映 对应的同名内容属性。

color 属性没有相应的 IDL 属性,但今后可能会增加。

HTMLLinkElement/as

Support in all current engines.

Firefox56+Safari10+Chrome50+
Opera37+Edge79+
Edge (Legacy)17+Internet ExplorerNo
Firefox Android56+Safari iOS10+Chrome Android50+WebView Android50+Samsung Internet5.0+Opera Android37+

as IDL 属性必须 反映 as 内容属性, 并限制为已知的值

crossOrigin IDL 属性必须 反映 crossorigin 内容属性。

HTMLLinkElement/referrerPolicy

Support in all current engines.

Firefox50+Safari14.1+Chrome58+
Opera45+Edge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox Android50+Safari iOS14.5+Chrome Android58+WebView Android58+Samsung Internet7.0+Opera Android43+

referrerPolicy IDL 属性必须 反映 referrerpolicy 内容属性,并 限制到已知的值

The imageSrcset IDL 属性必须 反映 imagesrcset 内容属性。

The imageSizes IDL 属性必须 反映 the imagesizes 内容属性。

HTMLLinkElement/relList

Support in all current engines.

Firefox30+Safari9+Chrome50+
Opera37+Edge79+
Edge (Legacy)17+Internet ExplorerNo
Firefox Android30+Safari iOS9+Chrome Android50+WebView Android50+Samsung Internet5.0+Opera Android37+

relList IDL 属性必须 反映 rel 内容属性。

4.2.4.1 处理 media 属性

如果该链接是 超链接 那么 media 属性就是纯建议性的, 描述了该文档是为哪种媒体设计的。

但如果该链接是 外部资源链接,则 media 属性则是指定的。 当 media 属性值 匹配当前环境 以及其他相关条件时, 用户代理必须应用这一外部资源。其他情况不得应用该资源。

如果忽略 media 属性, 默认值是 "all",表示默认情况下链接适用于所有媒体。

外部资源可能会在此限制范围内限定其适用性。 例如,CSS样式表可能有一些 @media 块。 本规范不会覆盖这些进一步的限制或要求。

4.2.4.2 处理 type 属性

如果存在 type 属性,那么用户代理必须假定 该资源属于给定的类型(即使它不是 合法的 MIME 类型, 例如空字符串)。 如果忽略了该属性,但 外部资源链接 类型定义有默认值,则用户代理必须假定该资源属于那种类型。 如果 UA 对指定的链接关系不支持给定的 MIME 类型, 那么 UA 不应 获取和处理 该资源;如果 UA 对指定的链接关系支持给定的 MIME 类型, 那么 UA 应该按照 外部资源链接 的特定类型所指定的 适当时机 获取和处理 该资源。 如果忽略了该属性,且 外部资源链接 类型没有定义默认值,但如果已知类型且支持的话用户代理会 获取和处理 该资源, 那么用户代理就应该假设支持该资源并且 获取和处理 它。

用户代理不得将 type 属性当做权威的 — 也就是说获取该资源时用户代理不得使用 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 元素 el默认的获取和处理链接资源 如下:

  1. 如果 href 属性的值是空字符串,则中止这些步骤。

  2. 给定 href 属性,相对于该元素的 节点文档 解析 URL。如果失败则返回。否则,令 url结果 URL 记录

  3. corsAttributeState 为该元素的 crossorigin 内容属性的当前状态。

  4. request 为给定 url,空字符串,以及 corsAttributeState 创建一个可能跨域的请求 的结果。

  5. 设置 request异步标志

  6. 设置requestclientlink 元素的 节点文档相关设置对象

  7. 设置requestnonce 元数据link 元素的 [[CryptographicNonce]] 内部槽的当前值。

  8. 设置request完整性元数据link 元素的 integrity 内容属性的当前值。

  9. 设置requestreferrer policylink 元素的 referrerpolicy 属性的为当前状态。

  10. 执行 链接资源获取配置步骤 并传入 elrequest。如果结果为 false 就返回。

  11. 并行地 执行以下步骤:

    1. response获取 request 的结果。

    2. success 为 true。

    3. 如果 response网络错误 或它的 状态 不是 OK, 这是 success 为 false。

      注意内容相关错误比如 CSS 解析错误或 PNG 解码错误不影响 success

    4. 如果 success 为 true,等待 链接资源关键子资源 结束加载。

      定义链接类型的 关键子资源 的标准(比如 CSS) 应该描述这些如何获取和处理这些子资源。本标准描述描述等待 链接资源关键子资源 获取和处理时,假设它得到了正确地处理。

    5. 网络任务源入队 一个元素为 el 的元素任务,用来 处理链接资源( 给它传入 elsuccessresponse)。

用户代理在需要这些资源时才会去 获取和处理, 而不是预先获取所有未应用的 外部资源

获取和处理链接资源 算法类似,所有 外部资源链接 都有对应的 处理链接资源 算法, 接受一个 link 元素 el,布尔值 success响应 response。 除非个别链接类型提供了它自己的 处理链接资源 算法, 就是用给定 link 元素 el 和布尔值 success (忽略 response)的 默认的处理链接资源 算法:

  1. 如果 success 为 true,在 el触发 名为 load 的事件。

  2. 否则,在 el触发 名为 error 的事件。

除非给定的 rel 关键字另有说明, 在获取该资源及其 关键子资源 的所有尝试完成之前, 必须 推迟 该元素的 节点文档 的 load 事件。 (用户代理还没尝试获取的资源不会 推迟 load 事件,比如因为它在等待需要的资源。)

如果支持 HTTP `Link` 协议头, 则必须假定它们在文档的 link 之前,按照在 HTTP 消息中的顺序到达。 这些头将会按照相关规范给出的规则进行处理。 [HTTP] [WEBLINK]

HTTP `Link` 中的关系类型注册 与 HTML link 类型 不同, 因此它们与同名 HTML 类型的语义也可能不同。

交互式的用户代理可能会在用户界面里为用户提供一种 跟随 使用 link 元素创建的超链接的方式。 本规范没有定义具体的界面,但是它可以对文档中每个由 link 元素创建的 hyperlink, 包含某种形式的(可能会被简化)以下信息(从元素的属性获取,下文有相应定义):

用户代理也可以包含其他信息,比如资源类型(由 type 属性给出)。

创建 超链接link 元素的 激活行为 就是如下步骤:

  1. 如果 link 元素的 节点文档 没有 完全激活,则中止这些步骤。

  2. 跟随link 元素创建的超链接。

4.2.5 meta 元素

Element/meta

Support in all current engines.

Firefox1+SafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

HTMLMetaElement

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+
类别
元数据内容
如果有 itemprop 属性: 流式内容
如果有 itemprop 属性: 短语内容
该元素可用的上下文
如果有 charset 属性,或者元素的 http-equiv 属性处于 编码声明状态:在 head 元素中。
如果有 http-equiv 属性但不在 编码声明状态:在 head 元素中。
如果有 http-equiv 属性但不在 编码声明状态:在 head 元素的 noscript 子元素中。
如果有 name 属性:期望 元数据内容 的地方。
如果有 itemprop 属性: 期望元数据内容 的地方。
如果有 itemprop 属性: 期望短语内容 的地方。
内容模型
text/html 中的标签省略
哪个标签都不能省略。
内容属性
全局属性
name — Metadata name
http-equiv — Pragma directive
content — Value of the element
charsetCharacter encoding declaration
DOM 接口
[HTMLConstructor]
interface HTMLMetaElement : HTMLElement {
  [CEReactions] attribute DOMString name;
  [CEReactions] attribute DOMString httpEquiv;
  [CEReactions] attribute DOMString content;
};

meta 元素 表示 很多不能用 titlebaselinkstyle, 和 script 元素表达的元数据。

meta 元素可以通过 name 属性表示文档级别的元数据, 通过 http-equiv 属性表示编译指示, 通过 charset 属性表示 HTML 文档序列化为字符串时(例如用于网络传输或者磁盘存储时) 文件的 字符编码声明

必须指定这些属性中的一个:namehttp-equivcharset, 和 itemprop

如果指定了 namehttp-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 对的值的部分是空字符串。

namecontent IDL 属性必须 反映 相应的同名内容属性。IDL 属性 httpEquiv 必须 反映 http-equiv 内容属性。

4.2.5.1 标准元数据名

本规范为 meta 元素的 name 属性定义了一些名字。

名字是大小写不敏感的,必须以 ASCII 大小写不敏感 的方式进行比较

application-name

值必须是一个简短的格式自由的字符串,给出本页面表示的 Web 应用的名字。 如果该页面不是一个 Web 应用,不得使用 application-name 元数据名。 必须使用 lang 属性来指定该 Web 应用的每个名字的语言。

给定一个 language,一个文档中不得有多个 name 属性设为 application-namemeta 元素。

用户代理可能会在 UI 中使用应用名来取代 title,因为标题可能包含某一特定时刻页面的状态信息。

为了从给定语言的应用名有序列表(比如 British English, American English, 和 English)中选取要用的应用名, 用户代理必须执行以下步骤:

  1. languages 为语言列表。

  2. default languageDocument文档元素语言,如果有并且那个语言不是未知的话。

  3. 如果有一个 default language, 并且如果它与 languages 中的语言都不同, 把它追加到 languages 上。

  4. winning languagelanguages 中的第一个满足这个条件的语言: 在 Document 中存在一个 name 属性设为 application-namelanguage 是那个语言的 meta 元素。

    如果所有语言都没有对应的 meta 元素,那么中止这些步骤;没有给定的应用名。

  5. 返回 content 属性的值。 Document按照树序 的第一个 name 属性为 application-namelanguagewinning languagemeta 元素。

浏览器需要页面名字时可能会使用本算法,比如设置书签的标签时。 提供给本算法的语言列表可能来自用户的偏好设置。

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>
  ...

很多搜索引擎不会考虑这些关键字,因为该特性是不可靠的甚至会导致垃圾结果,对用户并没有帮助。

为了获得作者指定的关键字列表,用户代理必须执行以下步骤:

  1. keywords 为一个空列表。

  2. 对每一个 name 属性的值是 keywords, 且有一个 content 属性的 meta 元素:

    1. 用逗号 分割该元素的 content 属性的值

    2. 把得到的结果添加到 keywords,如果有的话。

  3. keywords 移除所有重复。

  4. 返回 keywords。这就是作者指定的页面关键字列表。

对值的可靠性没有足够的信心时,用户代理不应使用这一信息。

例如,内容管理系统可能会使用页面关键字来填充站内搜索引擎的索引, 但使用这一信息进行大规模的内容聚合时可能会发现某些用户会尝试利用不合适的关键字来对排序机制作弊。

referrer

值必须是 引荐策略, 它为 Document 定义了默认的 引荐策略[REFERRERPOLICY]

如果有 meta 元素 插入文档从文档中移除,或者现有的 meta 元素的 namecontent 属性变化, 用户代理必须执行以下算法:

  1. candidate elements 为所有符合以下条件的 meta 元素的列表,按照 树序 排列:

  2. candidate elements 中的每一个 element

    1. valueelementcontent 属性 转化为 ASCII 小写 后的值。

    2. 如果 value 的值属于下表中第一列,则设置 value 为第二列的值:

      遗留的值 引荐策略
      never no-referrer
      default no-referrer-when-downgrade
      always unsafe-url
      origin-when-crossorigin origin-when-cross-origin
    3. 如果 value 是一个 引荐策略, 则设置 element节点文档引荐策略policy

    对每个元素应用这些步骤使得 旧的用户代理仍然可以使用这些值[REFERRERPOLICY]

theme-color

Element/meta/name/theme-color

Support in one engine only.

FirefoxNoSafariNoChrome🔰 73+
OperaNoEdge🔰 79+
Edge (Legacy)NoInternet ExplorerNo
Firefox AndroidNoSafari iOSNoChrome Android80+WebView AndroidNoSamsung Internet6.2+Opera AndroidNo

值必须是匹配 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">
...

用户代理必须执行以下步骤来获取页面的主题颜色:

  1. candidate elements 为所有符合以下条件的 meta 元素, 按照 树序 排列:

  2. candidate elements 中每一个 element

    1. value 为把 elementcontent 属性的值 移除前后 ASCII 空白 后的结果。

    2. 如果 value 可以解析为 CSS 颜色值, 返回解析后的值。

  3. 如果到达了这一步,该页面没有主题颜色。

如果有任何 meta 元素 插入到文档中 或者 从文档中移除, 或者现有 meta 元素的 namecontent 属性发生了改变,用户代理必须重新执行以上算法,并应用所有影响 UI 的结果。

在 UI 中使用主题颜色时,用户代理可能会调整具体的实现细节。例如,如果用户代理要用主题色作背景在上面显示白色的文字, 则可能会在 UI 的这一部分使用主题颜色的较暗变体,以确保充分的对比度。

4.2.5.2 其他元数据名称

任何人都可以 对预定义元数据名称集的扩展, 创建和使用自己的元数据。而且无需注册此类扩展。

但是在以下任何情况下,都不应创建新的元数据名:

另外,在创建和使用新的元数据名称之前,建议查阅 WHATWG Wiki MetaExtensions 页面 — 来避免选择已经在使用的元数据名,以及与既有元数据名的用途冗余, 以及避免新标准化的名称与你选择的冲突。 [WHATWGWIKI]

任何人在任何时候都可以编辑 WHATWG Wiki MetaExtensions 页面,添加想要的元数据名称。 新的元数据名称可以用下列信息来说明:

关键字

要定义的实际名称。名称不应与任何其他定义的名称混淆相似(比如,仅区分大小写)。

简要说明

对这个元数据名称的含义的一个简短的非规范的描述,包括它的取值所需的格式。

规范
指向关于该元数据名称的语义和要求的更详细的描述的链接。它可以是 Wiki 上的另一页,也可以是一个外部页面。
同义词

具有完全相同的处理要求的其他名称的列表。 作者不应使用定义为同义词的名称(它们只是用于允许用户代理支持遗留内容)。 任何人都可以移除实践中不再使用的同义词;只有需要当做同义词做兼容处理的名称才能以这种方式注册。

状态

以下之一:

已提出
该名称还没有得到广泛的 peer review 和 approval。有人提出了它并且正在用或者现在或马上就要使用。
已批准
该名称已经接受了广泛的 peer review 和 approval。它有一个明确定义了如何处理使用该名称的页面的规范,包括当它们以不正确的方式使用该名称时。
已终止
该名称已经接受了广泛同行的 peer review 并且被认为是有用的。现有页面正在使用此元数据名称,但新页面应避免使用此名称。“简要说明”和“规范”条目将给出作者应该使用什么的细节,如果有的话。

如果一个元数据名称与其他现存的值冗余,那么应该把它移除并列为那个现存值的同义词。

如果一个元数据名称添加到 “已提议” 状态经过一个多月的时间并未被使用或标准化, 那么应该把它从 WHATWG Wiki MetaExtensions 页面移除。

如果一个元数据名称添加到 “已提议” 状态,并且发现与现存的值冗余, 就应该把它移除并列为该现存值的同义词。 如果一个名称被添加到 “已提议” 状态但被发现有害,则应该把它改为 “已终止” 状态。

任何人都可以随时更新状态,但应该根据上述定义进行更新。

4.2.5.3 Pragma directives

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:

Content language state (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.

  1. If the meta element has no content attribute, then return.

  2. If the element's content attribute contains a U+002C COMMA character (,) then return.

  3. Let input be the value of the element's content attribute.

  4. Let position point at the first character of input.

  5. Skip ASCII whitespace within input given position.

  6. Collect a sequence of code points that are not ASCII whitespace from input given position.

  7. Let candidate be the string that resulted from the previous step.

  8. If candidate is the empty string, return.

  9. 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]

Encoding declaration state (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.

Default style state (http-equiv="default-style")

This pragma sets the name of the default CSS style sheet set.

  1. If the meta element has no content attribute, or if that attribute's value is the empty string, then return.

  2. Change the preferred CSS style sheet set name with the name being the value of the element's content attribute. [CSSOM]

Refresh state (http-equiv="refresh")

This pragma acts as timed redirect.

A Document object has an associated will declaratively refresh (a boolean). It is initially false.

  1. If the meta element has no content attribute, or if that attribute's value is the empty string, then return.

  2. Let input be the value of the element's content attribute.

  3. 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:

  1. If document's will declaratively refresh is true, then return.

  2. Let position point at the first code point of input.

  3. Skip ASCII whitespace within input given position.

  4. Let time be 0.

  5. Collect a sequence of code points that are ASCII digits from input given position, and let the result be timeString.

  6. If timeString is the empty string, then:

    1. If the code point in input pointed to by position is not U+002E (.), then return.

  7. Otherwise, set time to the result of parsing timeString using the rules for parsing non-negative integers.

  8. Collect a sequence of code points that are ASCII digits and U+002E FULL STOP characters (.) from input given position. Ignore any collected characters.

  9. Let urlRecord be document's URL.

  10. If position is not past the end of input, then:

    1. If the code point in input pointed to by position is not U+003B (;), U+002C (,), or ASCII whitespace, then return.

    2. Skip ASCII whitespace within input given position.

    3. If the code point in input pointed to by position is U+003B (;) or U+002C (,), then advance position to the next code point.

    4. Skip ASCII whitespace within input given position.

  11. If position is not past the end of input, then:

    1. Let urlString be the substring of input from the code point at position to the end of the string.

    2. 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.

    3. 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.

    4. 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.

    5. Skip ASCII whitespace within input given position.

    6. 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.

    7. Skip ASCII whitespace within input given position.

    8. 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.

    9. Set urlString to the substring of input from the code point at position to the end of the string.

    10. 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.

    11. Parse: Parse urlString relative to document. If that fails, return. Otherwise, set urlRecord to the resulting URL record.

  12. Set document's will declaratively refresh to true.

  13. Perform one or more of the following steps:

    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:

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">
Set-Cookie state (http-equiv="set-cookie")

This pragma is non-conforming and has no effect.

User agents are required to ignore this pragma.

X-UA-Compatible state (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.

Content security policy state (http-equiv="content-security-policy")

This pragma enforces a Content Security Policy on a Document. [CSP]

  1. If the meta element is not a child of a head element, return.

  2. If the meta element has no content attribute, or if that attribute's value is the empty string, then return.

  3. 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".

  4. Remove all occurrences of the report-uri, frame-ancestors, and sandbox directives from policy.

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

4.2.5.4 Specifying the document's character encoding

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"?>

4.2.6 The style element

Element/style

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera3.5+Edge79+
Edge (Legacy)12+Internet Explorer3+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android10.1+

HTMLStyleElement

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+
Categories:
Metadata content.
Contexts in which this element can be used:
Where metadata content is expected.
In a noscript element that is a child of a head element.
Content model:
Text that gives a conformant style sheet.
text/html 中的标签省略
哪个标签都不能省略。
Content attributes:
Global attributes
media — Applicable media
Also, the title attribute has special semantics on this element: CSS style sheet set name.
Accessibility considerations:
For authors.
For implementers.
DOM interface:
[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 update a style block algorithm is as follows:

  1. Let element be the style element.

  2. If element has an associated CSS style sheet, remove the CSS style sheet in question.

  3. If element's root is neither a shadow root nor a document, then return.

  4. 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.

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

  6. Create a CSS style sheet with the following properties:

    type

    text/css

    owner node

    element

    media

    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.

    title

    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.

    alternate flag

    Unset.

    origin-clean flag

    Set.

    location
    parent CSS style sheet
    owner CSS rule

    null

    disabled flag

    Left at its default value.

    CSS rules

    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:

  1. Let element be the style element associated with the style sheet in question.

  2. Let success be true.

  3. 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.

  4. Queue an element task on the networking task source given element and the following steps:

    1. If success is true, fire an event named load at element.

    2. Otherwise, fire an event named error at element.

    3. If element contributes a script-blocking style sheet:

      1. Assert: element's node document's script-blocking style sheet counter is greater than 0.

      2. 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]

HTMLStyleElement/media

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android4+Safari iOS1+Chrome Android18+WebView Android1+Samsung Internet1.0+Opera Android12.1+

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>

4.2.7 Interactions of styling and scripting

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:

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.