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 为用户提供使用 link 元素创建的超链接的方法
      5. 4.2.5 meta 元素
        1. 4.2.5.1 标准元数据名称
        2. 4.2.5.2 其他元数据名称
        3. 4.2.5.3 编译指示
        4. 4.2.5.4 指定文档的字符编码
      6. 4.2.6 style 元素

4 HTML 元素

4.1 文档元素

4.1.1 html 元素

元素/html

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer
Firefox AndroidSafari iOSChrome AndroidWebView AndroidSamsung InternetOpera Android12.1+
类别:
无。
可以使用此元素的上下文:
作为文档的 文档元素
在复合文档中允许子文档片段的任何位置。
内容模型:
一个 head 元素,后跟一个 body 元素。
text/html 中的标签省略:
如果 html 元素内部的第一件事不是 注释,则可以省略 html 元素的 开始标签
如果 html 元素后面没有紧跟着 注释,则可以省略 html 元素的 结束标签
内容属性:
全局属性
可访问性注意事项:
针对作者.
针对实施者.
DOM 接口:
使用 HTMLHtmlElement

html 元素 表示 HTML 文档的根。

鼓励作者在根 html 元素上指定 lang 属性,以提供文档的语言。这有助于语音合成工具确定要使用什么发音,翻译工具确定要使用什么规则,等等。

以下示例中的 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 元素

元素/head

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+
OperaEdge79+
Edge(旧版)12+Internet Explorer
Firefox AndroidSafari iOSChrome AndroidWebView AndroidSamsung InternetOpera Android
类别:
无。
可以使用此元素的上下文:
作为 html 元素中的第一个元素。
内容模型:
如果文档是 iframe srcdoc 文档,或者如果从更高级别的协议可以获得标题信息:零个或多个 元数据内容 元素,其中最多一个为 title 元素,最多一个为 base 元素。
否则:一个或多个 元数据内容 元素,其中正好一个为 title 元素,最多一个为 base 元素。
text/html 中的标签省略:
如果元素为空,或者 head 元素内部的第一件事是元素,则可以省略 head 元素的 开始标签
如果 head 元素后面没有紧跟着 ASCII 空格注释,则可以省略 head 元素的 结束标签
内容属性:
全局属性
可访问性注意事项:
针对作者.
针对实施者.
DOM 接口:
使用 HTMLHeadElement

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 元素在大多数情况下是必需的子元素,但是当更高级别的协议提供标题信息时,例如,在使用 HTML 作为电子邮件创作格式时,电子邮件主题行中,可以省略 title 元素。

4.2.2 title 元素

元素/title

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+
OperaEdge79+
Edge(旧版)12+Internet Explorer1+
Firefox AndroidSafari iOSChrome AndroidWebView AndroidSamsung InternetOpera Android
类别:
元数据内容.
可以使用此元素的上下文:
在不包含其他 title 元素的 head 元素中。
内容模型:
文本,它不是 元素间空格
text/html 中的标签省略:
两个标签都不能省略。
内容属性:
全局属性
可访问性注意事项:
针对作者.
针对实施者.
DOM 接口:
使用 HTMLTitleElement

title 元素 表示 文档的标题或名称。作者应使用能够识别其文档的标题,即使这些文档是在脱离上下文的情况下使用,例如在用户的历史记录或书签中,或在搜索结果中。文档的标题通常与其第一个标题不同,因为第一个标题在脱离上下文时不必独立存在。

每个文档中最多只能有一个 title 元素。

如果 Document 没有标题是合理的,则可能不需要 title 元素。有关何时需要此元素的说明,请参阅 head 元素的内容模型。

title.text [ = value ]

返回元素的 子文本内容

可以设置,以使用给定值替换元素的子元素。

以下是一些适当标题的示例,与在同一页面上可能使用的顶级标题形成对比。

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

下一页可能是同一网站的一部分。请注意,标题如何明确地描述主题内容,而第一个标题则假设读者知道上下文是什么,因此不会怀疑舞蹈是莎莎舞还是华尔兹

  <title>Dances used during bee mating rituals</title>
    ...
  <h1>The Dances</h1>

用作文档标题的字符串由 document.title IDL 属性给出。

4.2.3 base 元素

元素/base

所有当前引擎都支持。

Firefox1+Safari3+Chrome1+
OperaEdge79+
Edge(旧版)12+Internet Explorer
Firefox AndroidSafari iOSChrome AndroidWebView AndroidSamsung InternetOpera Android
类别:
元数据内容.
可以使用此元素的上下文:
在不包含其他 base 元素的 head 元素中。
内容模型:
.
text/html 中的标签省略:
结束标签
内容属性:
全局属性
href文档基本 URL
target超链接 导航表单提交的默认 可导航对象
可访问性注意事项:
针对作者.
针对实施者.
DOM 接口:
使用 HTMLBaseElement

base 元素允许作者指定用于解析 URL文档基本 URL,以及用于 跟随超链接 的默认 可导航对象 的名称。此元素除了这些信息之外,不表示任何内容。

每个文档中最多只能有一个 base 元素。

base 元素必须具有 href 属性、target 属性或两者。

如果指定了 href 内容属性,则必须包含 可能被空格包围的有效 URL

如果 base 元素具有 href 属性,则它必须位于树中任何其他定义为采用 URL 的属性的元素之前,除了 html 元素(其 manifest 属性不受 base 元素的影响)。

如果指定了target 属性,则其必须包含一个有效的可导航目标名称或关键字,该名称或关键字指定在超链接表单Document中导致导航时要使用的默认可导航对象

如果base 元素具有target 属性,则它必须位于树中表示超链接的任何元素之前。

在此示例中,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”的链接。

元素/链接

所有当前引擎都支持。

Firefox1+Safari4+Chrome1+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer
Firefox AndroidSafari iOSChrome AndroidWebView AndroidSamsung InternetOpera Android12.1+
类别:
元数据内容.
如果元素允许在主体中使用流内容
如果元素允许在主体中使用短语内容
可以使用此元素的上下文:
在预期元数据内容的位置。
noscript 元素中,该元素是head 元素的子元素。
如果元素允许在主体中使用:在预期短语内容的位置。
内容模型:
.
text/html 中的标签省略:
没有结束标签
内容属性:
全局属性
href超链接的地址
crossorigin — 元素如何处理跨源请求
rel — 包含超链接的文档与目标资源之间的关系
media — 适用的媒体
integrity — 在子资源完整性检查中使用的完整性元数据 [SRI]
hreflang — 链接资源的语言
type — 引用的资源类型的提示
referrerpolicy — 由元素发起的获取引用者策略
sizes — 图标的大小(对于rel="icon")
imagesrcset — 在不同情况下使用的图像,例如高分辨率显示器、小型显示器等(对于rel="preload")
imagesizes — 不同页面布局的图像大小(对于rel="preload")
as — 预加载请求的潜在目标(对于rel="preload" 和 rel="modulepreload")
blocking — 元素是否可能阻塞渲染
color — 在自定义站点图标时使用的颜色(对于rel="mask-icon")
disabled — 链接是否已禁用
fetchpriority — 设置由元素发起的获取优先级
此外,title 属性在此元素上具有特殊语义:链接的标题;CSS 样式表集名称
可访问性注意事项:
针对作者.
针对实施者.
DOM 接口:
使用 HTMLLinkElement

link 元素允许作者将其文档链接到其他资源。

链接的地址由href 属性给出。如果存在href 属性,则其值必须是有效的非空 URL,可能由空格包围。必须存在hrefimagesrcset 属性之一或两者。

指示的链接类型(关系)由rel 属性的值给出,如果存在,则其值必须是唯一空格分隔标记的无序集合允许的关键字及其含义在后面的部分中定义。

link 元素必须具有rel 属性或itemprop 属性,但不能同时具有两者。

如果link 元素具有itemprop 属性,或具有rel 属性,且该属性仅包含body-ok关键字,则称该元素允许在主体中使用。这意味着可以在预期短语内容的位置使用该元素。

如果使用rel 属性,则该元素有时只能在页面body 中使用。当与itemprop 属性一起使用时,该元素可以在head 元素和页面body 中使用,但要遵守微数据模型的约束。


可以使用link 元素创建两类链接:指向外部资源的链接超链接链接类型部分定义特定链接类型是外部资源还是超链接。一个link 元素可以创建多个链接(其中一些可能是外部资源链接,一些可能是超链接);创建哪些链接以及创建多少个链接取决于rel 属性中给出的关键字。用户代理必须基于每个链接进行处理,而不是基于每个元素进行处理。

link 元素创建的每个链接都单独处理。例如,如果存在两个具有rel="stylesheet"link 元素,则它们分别计为单独的外部资源,并且每个元素都独立受其自身属性的影响。类似地,如果单个link 元素的rel 属性值为next stylesheet,则它既创建了一个超链接(对于next 关键字)又创建了一个外部资源链接(对于stylesheet 关键字),并且它们受其他属性(如mediatitle)的影响不同。

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

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

此元素创建的两个链接之一的语义是目标页面包含有关当前页面作者的信息,另一个的语义是目标页面包含有关提供当前页面的许可证的信息。

使用link 元素及其rel 属性创建的超链接适用于整个文档。这与aarea 元素的rel 属性形成对比,后者指示链接类型的上下文由链接在文档中的位置给出。

与由aarea元素创建的超链接不同,由link元素创建的超链接默认情况下不会显示为文档的一部分,前提是用户代理支持建议的默认渲染方式。即使使用 CSS 强制显示,它们也没有激活行为。相反,它们主要提供语义信息,这些信息可能会被页面或其他使用页面内容的软件使用。此外,用户代理可以提供自己的 UI 来跟踪使用 link 元素创建的超链接

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


crossorigin属性是CORS 设置属性。它旨在与外部资源链接一起使用。

media属性指定资源适用的媒体。该值必须是有效的媒体查询列表

子资源完整性

所有当前引擎都支持。

Firefox43+Safari11.1+Chrome45+
OperaEdge79+
Edge(旧版)17+Internet Explorer不支持
Firefox AndroidSafari iOSChrome AndroidWebView AndroidSamsung InternetOpera Android

integrity属性表示此元素负责的请求的完整性元数据。该值是文本。此属性只能在具有包含stylesheetpreloadmodulepreload关键字的rel属性的link元素上指定。[SRI]

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

type属性给出链接资源的MIME 类型。它纯粹是建议性的。该值必须是有效的 MIME 类型字符串

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

referrerpolicy属性是引用者策略属性。它旨在与外部资源链接一起使用,它有助于在获取和处理链接资源时设置使用的引用者策略[REFERRERPOLICY]

title属性给出链接的标题。除一个例外,它纯粹是建议性的。该值是文本。例外情况是位于文档树中的样式表链接,其中title属性定义CSS 样式表集

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


imagesrcset属性可以存在,并且是srcset 属性

imagesrcsethref属性(如果未使用宽度描述符)共同为源集提供图像源

如果imagesrcset属性存在并且有任何使用宽度描述符图像候选字符串,则imagesizes属性也必须存在,并且是sizes 属性imagesizes属性为源集提供源大小

imagesrcsetimagesizes属性只能在具有rel属性(指定preload关键字)以及as属性处于“image”状态的link元素上指定。

这些属性允许预加载稍后由具有其srcsetsizes属性对应值的img元素使用的适当资源。

<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 不区分大小写的。每个值必须是字符串“any”的ASCII 不区分大小写匹配,或者是一个由两个有效的非负整数组成的值,这些整数没有前导 U+0030 数字零 (0) 字符,并且由单个 U+0078 拉丁文小写字母 X 或 U+0058 拉丁文大写字母 X 字符分隔。此属性只能在具有rel属性(指定icon关键字或apple-touch-icon关键字)的link元素上指定。

apple-touch-icon关键字是预定义链接类型集的注册扩展,但用户代理无需以任何方式支持它。


as属性指定由href属性给出的资源的预加载请求的潜在目标。它是一个枚举属性。每个潜在目标都是此属性的关键字,映射到同名的状态。此属性必须在具有包含preload关键字的rel属性的link元素上指定。它可以在具有包含modulepreload关键字的rel属性的link元素上指定;在这种情况下,它必须具有一个值为脚本式目标。对于其他link元素,不得指定此属性。

此属性没有缺少值默认值无效值默认值,这意味着属性的无效值或缺少值不会映射到任何状态。这在处理模型中已考虑在内。对于preload链接,这两种情况都是错误;对于modulepreload链接,缺少的值将被视为“script”。


blocking属性是阻塞属性。它由链接类型stylesheetexpect使用,并且只能在具有包含这些关键字的rel属性的链接元素上指定。


color属性与mask-icon链接类型一起使用。此属性只能在具有包含mask-icon关键字的rel属性的link元素上指定。该值必须是与 CSS <color> 产生式匹配的字符串,定义用户代理可以用来自定义用户在固定站点时看到的图标显示的建议颜色。

本规范对color属性没有任何用户代理要求。

mask-icon关键字是预定义链接类型集的注册扩展,但用户代理无需以任何方式支持它。


link 元素有一个关联的 显式启用 布尔值。它最初为 false。

disabled 属性是一个 布尔属性,用于 样式表 链接类型。该属性必须仅指定在具有包含 样式表 关键字的 rel 属性的 link 元素上。

每当 disabled 属性被移除时,将 link 元素的 显式启用 属性设置为 true。

动态移除 disabled 属性,例如,使用 document.querySelector("link").removeAttribute("disabled"),将获取并应用样式表。

<link disabled rel="alternate stylesheet" href="css/pooh">

HTMLLinkElement/fetchPriority

FirefoxSafari🔰 预览+Chrome102+
Opera?Edge102+
Edge(旧版)?Internet Explorer
Firefox AndroidSafari iOSChrome AndroidWebView AndroidSamsung InternetOpera Android

fetchpriority 属性是一个 获取优先级属性,旨在与 外部资源链接 一起使用,用于设置 获取和处理链接资源时 使用的 优先级

交互式用户代理可以为用户提供一种方法来 跟随 使用 link 元素创建的超链接,在其用户界面中的某个位置。此类对 跟随超链接 算法的调用必须将 userInvolvement 参数设置为 "浏览器 UI"。此规范未定义确切的界面,但它可以包含以下信息(从元素的属性中获取,如下所述),以某种形式或另一种形式(可能已简化),用于使用每个 link 元素在文档中创建的每个 超链接

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

4.2.5 meta 元素

Element/meta

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer
Firefox AndroidSafari iOSChrome AndroidWebView AndroidSamsung InternetOpera Android12.1+
类别:
元数据内容.
如果 itemprop 属性存在:流内容
如果 itemprop 属性存在:短语内容
可以使用此元素的上下文:
如果 charset 属性存在,或者元素的 http-equiv 属性处于 编码声明状态:在 head 元素中。
如果 http-equiv 属性存在,但不在 编码声明状态:在 head 元素中。
如果 http-equiv 属性存在,但不在 编码声明状态:在 noscript 元素中,它是 head 元素的子元素。
如果 name 属性存在:在预期 元数据内容 的位置。
如果 itemprop 属性存在:在预期 元数据内容 的位置。
如果 itemprop 属性存在:在预期 短语内容 的位置。
内容模型:
.
text/html 中的标签省略:
没有 结束标签
内容属性:
全局属性
name — 元数据名称
http-equiv — 编译指示
content — 元素的值
charset字符编码声明
media — 适用媒体
可访问性注意事项:
针对作者.
针对实施者.
DOM 接口:
使用 HTMLMetaElement

meta 元素 表示 各种无法使用 titlebaselinkstylescript 元素表达的各种元数据。

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

必须指定 namehttp-equivcharsetitemprop 属性之一。

如果指定了 namehttp-equivitemprop,则还必须指定 content 属性。否则,必须省略它。

charset 属性指定文档使用的 字符编码。这是一个 字符编码声明。如果存在该属性,则其值必须与字符串 "utf-8" 不区分大小写地 匹配。

charset 属性在 meta 元素上对 XML 文档没有影响,但在 XML 文档中允许使用它,以方便迁移到和从 XML 迁移。

每个文档中,具有 charset 属性的 meta 元素不能超过一个。

content 属性在元素用于这些目的时提供文档元数据或编译指示的值。允许的值取决于确切的上下文,如本规范后续部分所述。

如果 meta 元素具有 name 属性,则它设置文档元数据。文档元数据以名称-值对的形式表达,meta 元素上的 name 属性提供名称,同一元素上的 content 属性提供值。名称指定要设置的元数据的哪个方面;有效名称及其值的含义在以下部分中描述。如果 meta 元素没有 content 属性,则元数据名称-值对的值部分为空字符串。

media 属性说明元数据适用的媒体。该值必须是 有效的媒体查询列表。除非 nametheme-color,否则 media 属性对处理模型没有影响,并且作者不得使用它。

4.2.5.1 标准元数据名称

Element/meta/name

所有当前引擎都支持。

Firefox1+Safari4+Chrome1+
Opera12.1+Edge79+
Edge(旧版)12+Internet Explorer6+
Firefox AndroidSafari iOSChrome AndroidWebView AndroidSamsung InternetOpera Android12.1+

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

名称不区分大小写,并且必须以 不区分大小写地 方式进行比较

application-name

该值必须是简短的自由格式字符串,表示页面所表示的 Web 应用程序的名称。如果页面不是 Web 应用程序,则不得使用 application-name 元数据名称。可以使用 lang 属性指定每个名称的语言,从而提供 Web 应用程序名称的翻译。

每个文档中,对于给定的`language`以及`name属性值与`application-name进行ASCII不区分大小写匹配的`meta元素,最多只能有一个。

作者

该值必须是一个自由格式的字符串,用于提供页面作者之一的姓名。

描述

该值必须是一个自由格式的字符串,用于描述页面。该值必须适合用于页面目录中,例如搜索引擎。每个文档中,`name属性值与`description进行ASCII不区分大小写匹配的`meta元素,最多只能有一个。

生成器

该值必须是一个自由格式的字符串,用于识别用于生成文档的软件包之一。此值不得用于标记未由软件生成的页面的页面,例如由用户在文本编辑器中编写的页面的页面。

以下是一个名为“Frontweaver”的工具在其输出中包含的内容,在页面的`head元素中,用于识别自身为生成页面的工具。

<meta name=generator content="Frontweaver 8.2">
关键词

该值必须是一系列用逗号分隔的标记,每个标记都是与页面相关的关键词。

此关于英国高速公路上的字体的页面使用一个`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>
  ...

许多搜索引擎不考虑此类关键词,因为此功能在历史上一直不可靠地甚至误导性地用作以一种对用户无益的方式来垃圾邮件搜索引擎结果的方式。

推荐来源

该值必须是推荐来源策略,它定义了Document的默认推荐来源策略[REFERRERPOLICY]

主题颜色

元素/元数据/名称/主题颜色

Firefox不支持Safari15+Chrome🔰 73+
Opera不支持Edge🔰 79+
Edge(旧版)?Internet Explorer
Firefox AndroidSafari iOSChrome Android80+WebView Android不支持Samsung Internet6.2+Opera Android不支持

该值必须是与CSS <color> 产生式匹配的字符串,定义用户代理应用来自定义页面显示或周围用户界面的建议颜色。例如,浏览器可能会使用指定的值为页面的标题栏着色,或在选项卡栏或任务切换器中将其用作颜色突出显示。

在HTML文档中,`media属性值在所有`name属性值与`theme-color进行ASCII不区分大小写匹配的`meta元素中必须是唯一的。

此标准本身使用“WHATWG绿色”作为其主题颜色。

<!DOCTYPE HTML>
<title>HTML Standard</title>
<meta name="theme-color" content="#3c790a">
...

可以使用`media属性来描述应使用提供的颜色的上下文。

如果我们只想在暗模式下使用“WHATWG绿色”作为此标准的主题颜色,我们可以使用prefers-color-scheme媒体功能。

<!DOCTYPE HTML>
<title>HTML Standard</title>
<meta name="theme-color" content="#3c790a" media="(prefers-color-scheme: dark)">
...

在UI中使用主题颜色时,用户代理可能会以特定于实现的方式调整它,以使其更适合于相关的UI。例如,如果用户代理打算将主题颜色用作背景并在其上显示白色文本,则它可能会在UI的该部分使用主题颜色的较暗变体,以确保足够的对比度。

颜色方案

为了帮助用户代理立即以所需的颜色方案呈现页面背景(而不是等待页面中的所有CSS加载),可以在`meta元素中提供'color-scheme'值。

该值必须是与CSS 'color-scheme' 属性值语法匹配的字符串。它确定页面的支持颜色方案

每个文档中,`name属性值与`color-scheme进行ASCII不区分大小写匹配的`meta元素,最多只能有一个。

以下声明表示页面知道并可以处理具有深色背景颜色和浅色前景颜色的颜色方案。

<meta name="color-scheme" content="dark">

由于这些规则会检查连续的元素,直到找到匹配项,因此作者可以提供多个此类值来处理旧版用户代理的回退。与CSS属性的回退工作方式相反,多个meta元素需要以较新值之后的旧值排列。

4.2.5.2 其他元数据名称

任何人都可以创建和使用他们自己对预定义的元数据名称集的扩展。没有要求注册此类扩展。

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

此外,在创建和使用新的元数据名称之前,鼓励咨询WHATWG Wiki MetaExtensions页面——以避免选择已在使用的元数据名称,并避免重复任何已在使用的元数据名称的目的,并避免新的标准化名称与您选择的名称冲突。[WHATWGWIKI]

任何人都可以随时编辑WHATWG Wiki MetaExtensions页面以添加元数据名称。可以使用以下信息指定新的元数据名称。

关键词

正在定义的实际名称。名称不应与任何其他已定义的名称混淆(例如,仅在大小写上有所不同)。

简短描述

对元数据名称含义的简短非规范性描述,包括值需要采用哪种格式。

规范
指向对元数据名称的语义和要求进行更详细描述的链接。它可以是wiki上的另一个页面,或指向外部页面的链接。
同义词

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

状态

以下之一

建议
该名称尚未得到广泛的同行评审和批准。有人提出了它并且正在使用它或很快就会使用它。
批准
该名称已获得广泛的同行评审和批准。它有一个规范,明确定义了如何处理使用该名称的页面,包括在它们以不正确的方式使用它时。
已停止
元数据名称已获得广泛的同行评审,并且发现它不尽如人意。现有的页面正在使用此元数据名称,但新页面应避免使用它。“简短描述”和“规范”条目将详细说明作者应该改用什么(如果有)。

如果发现元数据名称与现有值冗余,则应将其删除并列为现有值的同义词。

如果以“建议”状态添加元数据名称一个月或更长时间而未被使用或指定,则可以将其从WHATWG Wiki MetaExtensions页面中删除。

如果以“建议”状态添加元数据名称并发现与现有值冗余,则应将其删除并列为现有值的同义词。如果以“建议”状态添加元数据名称并发现它有害,则应将其更改为“已停止”状态。

任何人都可以随时更改状态,但只能根据上述定义进行更改。

4.2.5.3 编译指令

当在`meta元素上指定http-equiv属性时,该元素为编译指令。

`http-equiv属性是具有以下关键词和状态的枚举属性

关键词状态简短描述
内容类型 编码声明 设置`charset的另一种形式。
默认样式 默认样式 设置默认CSS样式表集名称
刷新 刷新 充当定时重定向。
x-ua-兼容 X-UA-兼容 在实践中,鼓励Internet Explorer更密切地遵循规范。
内容安全策略 内容安全策略

强制执行 Document 上的 内容安全策略
编码声明状态 (http-equiv="content-type")

编码声明状态 只是设置 charset 属性的另一种形式:它是一个 字符编码声明

对于具有 编码声明状态meta 元素,content 属性的值必须与以下字符串进行 不区分大小写的 ASCII 匹配:"text/html;",后面可以跟任意数量的 ASCII 空格,然后是 "charset=utf-8"。

文档中不能同时包含具有 编码声明状态meta 元素和存在 charset 属性的 meta 元素。

编码声明状态 可用于 HTML 文档,但具有该状态下 http-equiv 属性的元素不能用于 XML 文档

默认样式状态 (http-equiv="default-style")

替代样式表

仅在一个引擎中支持。

Firefox3+Safari?Chrome1–48
OperaEdge
Edge(旧版)?Internet Explorer8+
Firefox AndroidSafari iOSChrome AndroidWebView AndroidSamsung InternetOpera Android

此 pragma 设置默认 CSS 样式表集名称

刷新状态 (http-equiv="refresh")

此 pragma 充当定时重定向。

Document 对象具有关联的 将声明性刷新(一个布尔值)。最初为 false。

对于具有 刷新状态meta 元素,content 属性的值必须由以下内容组成

在前一种情况下,整数表示页面重新加载之前的秒数;在后一种情况下,整数表示页面被给定 URL 上的页面替换之前的秒数。

新闻机构的首页可以在页面的 head 元素中包含以下标记,以确保页面每五分钟自动从服务器重新加载

<meta http-equiv="Refresh" content="300">

可以通过使每个页面刷新到序列中的下一个页面来使用一系列页面作为自动幻灯片放映,使用以下标记

<meta http-equiv="Refresh" content="20; URL=page4.html">
X-UA-Compatible 状态 (http-equiv="x-ua-compatible")

在实践中,此 pragma 鼓励 Internet Explorer 更严格地遵循规范。

对于具有 X-UA-Compatible 状态meta 元素,content 属性的值必须与字符串 "IE=edge" 进行 不区分大小写的 ASCII 匹配

用户代理必须忽略此 pragma。

内容安全策略状态 (http-equiv="content-security-policy")

此 pragma 强制执行 Document 上的 内容安全策略[CSP]

对于具有 内容安全策略状态meta 元素,content 属性的值必须包含 有效的 Content Security Policy,但不能包含任何 report-uriframe-ancestorssandbox 指令。在 content 属性中给出的 内容安全策略 将在当前文档上 强制执行[CSP]

在将 meta 元素插入到文档时,某些资源可能已经获取。例如,图像可能存储在 可用图像列表 中,然后再动态插入具有 内容安全策略状态meta 元素。已经获取的资源不能保证会被 内容安全策略 阻止,该策略在后期 强制执行

页面可能会选择通过阻止执行内联 JavaScript 以及阻止所有插件内容来降低跨站点脚本攻击的风险,使用如下策略

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'">

文档中一次只能有一个具有任何特定状态的 meta 元素。

4.2.5.4 指定文档的字符编码

字符编码声明 是一种机制,用于指定用于存储或传输文档的 字符编码

编码标准要求使用 UTF-8 字符编码,并要求使用 "utf-8" 编码标签 来识别它。这些要求需要文档的 字符编码声明(如果存在)使用与 "utf-8" 进行 不区分大小写的 ASCII 匹配编码标签。无论 字符编码声明 是否存在,用于编码文档的实际 字符编码 必须为 UTF-8[ENCODING]

以下限制也适用

此外,由于对 meta 元素的一些限制,每个文档只能有一个基于 meta 的字符编码声明。

如果一个HTML 文档没有以 BOM 开头,并且其编码没有通过Content-Type 元数据明确给出,并且该文档不是一个iframesrcdoc文档,则必须使用带有meta元素的charset属性或带有meta元素的http-equiv属性在编码声明状态中指定编码。

即使所有字符都在 ASCII 范围内,也需要字符编码声明(在Content-Type 元数据中或在文件中明确声明),因为需要字符编码来处理用户在表单中输入的非 ASCII 字符、脚本生成的 URL 等。

使用非 UTF-8 编码可能会对表单提交和 URL 编码产生意外的结果,因为默认情况下,表单提交和 URL 编码使用文档的字符编码

如果文档是一个iframesrcdoc文档,则该文档不得具有字符编码声明。(在这种情况下,源已解码,因为它包含了iframe的文档的一部分。)

在 XML 中,如果需要,应使用 XML 声明进行内联字符编码信息。

在 HTML 中,要声明字符编码为UTF-8,作者可以在文档顶部附近(在head元素中)包含以下标记

<meta charset="utf-8">

在 XML 中,将改为使用 XML 声明,位于标记的最顶部

<?xml version="1.0" encoding="utf-8"?>

4.2.6 style 元素

元素/样式

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+
Opera3.5+Edge79+
Edge(旧版)12+Internet Explorer3+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+
类别:
元数据内容.
可以使用此元素的上下文:
在预期元数据内容的地方。
noscript元素中,该元素是head元素的子元素。
内容模型:
文本,提供符合规范的样式表
text/html 中的标签省略:
两个标签都不能省略。
内容属性:
全局属性
media — 适用的媒体
blocking — 元素是否可能阻塞渲染
此外,title属性在此元素上具有特殊语义CSS 样式表集名称
可访问性注意事项:
针对作者.
针对实施者.
DOM 接口:
使用HTMLStyleElement

style元素允许作者在其文档中嵌入 CSS 样式表。style元素是样式处理模型的多个输入之一。该元素不代表用户的内容。

HTMLStyleElement/disabled

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge(旧版)13+Internet Explorer5.5+
Firefox AndroidSafari iOSChrome AndroidWebView AndroidSamsung InternetOpera Android12.1+

disabled获取器的步骤是

  1. 如果this没有关联的 CSS 样式表,则返回 false。

  2. 如果this关联的 CSS 样式表disabled 标志已设置,则返回 true。

  3. 返回 false。

disabled设置器的步骤是

  1. 如果this没有关联的 CSS 样式表,则返回。

  2. 如果给定值为 true,则设置this关联的 CSS 样式表disabled 标志。否则,取消设置this关联的 CSS 样式表disabled 标志

重要的是,disabled属性赋值仅在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

media属性表示样式适用于哪些媒体。该值必须是有效的媒体查询列表

如果省略了media属性,则默认值为“all”,这意味着默认情况下样式适用于所有媒体。

blocking属性是阻塞属性

替代样式表

仅在一个引擎中支持。

Firefox3+Safari?Chrome1–48
OperaEdge
Edge(旧版)?Internet Explorer8+
Firefox AndroidSafari iOSChrome AndroidWebView AndroidSamsung InternetOpera Android

title属性在style元素上定义CSS 样式表集。如果style元素没有title属性,则它没有标题;祖先的title属性不适用于style元素。如果style元素不在文档树中,则忽略title属性。[CSSOM]

title属性在style元素上,类似于title属性在link元素上,与全局title属性的不同之处在于,没有标题的style块不会继承父元素的标题:它只是没有标题。

style元素的子文本内容必须是符合规范的样式表

如果元素由其节点文档的解析器创建,则style元素隐式地可能阻塞渲染


本规范未指定样式系统,但大多数 Web 浏览器预计支持 CSS。[CSS]

此元素也实现了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>