1. 4.6 链接
      1. 4.6.1 简介
      2. 4.6.2aarea 元素创建的链接
      3. 4.6.3 aarea 元素的 API
      4. 4.6.4 下载资源
      5. 4.6.5 超链接审计
        1. 4.6.5.1 `Ping-From` 和 `Ping-To` 头部
      6. 4.6.6 链接类型
        1. 4.6.6.1 链接类型 "alternate"
        2. 4.6.6.2 链接类型 "author"
        3. 4.6.6.3 链接类型 "bookmark"
        4. 4.6.6.4 链接类型 "canonical"
        5. 4.6.6.5 链接类型 "dns-prefetch"
        6. 4.6.6.6 链接类型 "expect"
        7. 4.6.6.7 链接类型 "external"
        8. 4.6.6.8 链接类型 "help"
        9. 4.6.6.9 链接类型 "icon"
        10. 4.6.6.10 链接类型 "license"
        11. 4.6.6.11 链接类型 "manifest"
        12. 4.6.6.12 链接类型 "modulepreload"
        13. 4.6.6.13 链接类型 "nofollow"
        14. 4.6.6.14 链接类型 "noopener"
        15. 4.6.6.15 链接类型 "noreferrer"
        16. 4.6.6.16 链接类型 "opener"
        17. 4.6.6.17 链接类型 "pingback"
        18. 4.6.6.18 链接类型 "preconnect"
        19. 4.6.6.19 链接类型 "prefetch"
        20. 4.6.6.20 链接类型 "preload"
        21. 4.6.6.21 链接类型 "privacy-policy"
        22. 4.6.6.22 链接类型 "search"
        23. 4.6.6.23 链接类型 "stylesheet"
        24. 4.6.6.24 链接类型 "tag"
        25. 4.6.6.25 链接类型 "terms-of-service"
        26. 4.6.6.26 顺序链接类型
          1. 4.6.6.26.1 链接类型 "next"
          2. 4.6.6.26.2 链接类型 "prev"
        27. 4.6.6.27 其他链接类型

4.6.1 简介

链接是一种概念性结构,由 aareaformlink 元素创建,用于表示两个资源之间的连接,其中一个资源是当前的 Document。HTML 中有三种链接

指向外部资源的链接

这些链接指向旨在用于增强当前文档的资源,通常由用户代理自动处理。所有 指向外部资源的链接 都有一个 获取并处理链接资源 算法,该算法描述了如何获取资源。

超链接

这些链接指向其他资源,通常由用户代理向用户展示,以便用户能够让用户代理 导航 到这些资源,例如在浏览器中访问它们或下载它们。

指向内部资源的链接

这些链接指向当前文档内的资源,用于为这些资源赋予特殊含义或行为。

对于具有 link 元素和 href 属性以及 rel 属性,必须为 rel 属性的关键字创建链接,如 链接类型 部分中定义的那样。

类似地,对于具有 aarea 元素和 href 属性以及 rel 属性,必须为 rel 属性的关键字创建链接,如 链接类型 部分中定义的那样。但是,与 link 元素不同,aarea 元素具有 href 属性,但没有 rel 属性,或者其 rel 属性没有定义为指定 超链接 的关键字,也必须创建 超链接。这个隐含的超链接没有特殊含义(它没有 链接类型),除了将元素的 节点文档 链接到元素的 href 属性指定的资源。

类似地,对于具有 form 元素和 rel 属性,必须为 rel 属性的关键字创建链接,如 链接类型 部分中定义的那样。 form 元素没有 rel 属性,或者其 rel 属性没有定义为指定 超链接 的关键字,也必须创建 超链接

超链接 可以有一个或多个 超链接注释,用于修改该超链接的处理语义。

href 属性在 aarea 元素中必须具有一个值为 有效 URL,可能被空格包围 的值。

href 属性在 aarea 元素中不是必需的;当这些元素没有 href 属性时,它们不会创建超链接。

target 属性(如果存在)必须是 有效的可导航目标名称或关键字。它给出了将要使用的 可导航 的名称。

download 属性(如果存在)表示作者意图将超链接用于 下载资源。该属性可以有一个值;该值(如果有)指定作者建议用于在本地文件系统中标记资源的默认文件名。对允许的值没有限制,但作者需要注意的是,大多数文件系统对文件名中支持的标点符号有限制,用户代理可能会相应地调整文件名。

Element/a#attr-ping

在所有当前引擎中支持。

Firefox🔰 1+Safari6+Chrome12+
Opera?Edge79+
Edge (Legacy)17+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android≤37+Samsung Internet?Opera Android?

ping 属性(如果存在)提供对用户跟踪超链接感兴趣的资源的 URL。该值必须是 一组用空格分隔的标记,每个标记都必须是 有效的非空 URL,其 方案HTTP(S) 方案

HTMLAnchorElement/relList

在所有当前引擎中支持。

Firefox30+Safari9+Chrome65+
Opera?Edge79+
Edge (Legacy)18Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

rel 属性在 aarea 元素中控制元素创建的链接类型。该属性的值必须是 一组唯一的用空格分隔的标记允许的关键字及其含义 在下面定义。

rel支持的标记 是在 HTML 链接类型 中定义的,这些类型在 aarea 元素上允许,会影响处理模型,并且受用户代理支持。可能的 支持的标记noreferrernoopeneropenerrel支持的标记 只能包含用户代理为其实现处理模型的此列表中的标记。

rel 属性没有默认值。如果省略该属性,或者属性中的任何值都没有被用户代理识别,那么文档与目标资源之间没有任何特定关系,除了两者之间存在超链接之外。

hreflang 属性在创建超链接a 元素上,如果存在,则表示链接资源的语言。它纯粹是建议性的。该值必须是有效的 BCP 47 语言标签。[BCP47]

type 属性,如果存在,则表示链接资源的MIME 类型。它纯粹是建议性的。该值必须是有效的 MIME 类型字符串

referrerpolicy 属性是一个引用策略属性。它的目的是设置遵循超链接时使用的引用策略[REFERRERPOLICY]


aarea 元素的激活行为被调用时,用户代理可能会允许用户指示一个偏好,即超链接是用于导航,还是用于下载它指定的资源。

在没有用户偏好的情况下,如果元素没有download 属性,则默认应该是导航;如果存在,则默认应该下载指定的资源。

aarea 元素element给定事件event激活行为

  1. 如果element没有href 属性,则返回。

  2. hyperlinkSuffix 为 null。

  3. 如果element是一个a 元素,并且event目标是一个带有指定ismap 属性的img,则

    1. xy 为 0。

    2. 如果eventisTrusted 属性被初始化为 true,则将x 设置为从图像的左边缘到点击位置的CSS 像素距离,并将y 设置为从图像的顶边缘到点击位置的CSS 像素距离。

    3. 如果x 为负,则将x 设置为 0。

    4. 如果y 为负,则将y 设置为 0。

    5. hyperlinkSuffix 设置为 U+003F (?)、用ASCII 数字表示的x 值的十进制整数、U+002C (,) 和用ASCII 数字表示的y 值的十进制整数的串联。

  4. userInvolvementevent用户导航参与

  5. 如果用户已表示偏好下载超链接,则将userInvolvement 设置为 "浏览器 UI"。

    也就是说,如果用户已表示对下载的特定偏好,这不再仅仅被视为 "激活"。

  6. 如果elementdownload 属性,或者用户已表示偏好下载超链接,则下载element 创建的超链接,并将hyperlinkSuffix 设置为hyperlinkSuffix,并将userInvolvement 设置为userInvolvement

  7. 否则,遵循element 创建的超链接,并将hyperlinkSuffix 设置为hyperlinkSuffix,并将userInvolvement 设置为userInvolvement

4.6.3 aarea 元素的 API

hyperlink.toString()
hyperlink.href

返回超链接的 URL。

可以设置,以更改 URL。

hyperlink.origin

返回超链接 URL 的来源。

hyperlink.protocol

返回超链接 URL 的方案。

可以设置,以更改 URL 的方案。

hyperlink.username

返回超链接 URL 的用户名。

可以设置,以更改 URL 的用户名。

hyperlink.password

返回超链接 URL 的密码。

可以设置,以更改 URL 的密码。

hyperlink.host

返回超链接 URL 的主机和端口(如果与方案的默认端口不同)。

可以设置,以更改 URL 的主机和端口。

hyperlink.hostname

返回超链接 URL 的主机。

可以设置,以更改 URL 的主机。

hyperlink.port

返回超链接 URL 的端口。

可以设置,以更改 URL 的端口。

hyperlink.pathname

返回超链接 URL 的路径。

可以设置,以更改 URL 的路径。

hyperlink.search

返回超链接 URL 的查询(如果非空,则包含前导 "?")。

可以设置,以更改 URL 的查询(忽略前导 "?")。

hyperlink.hash

返回超链接 URL 的片段(如果非空,则包含前导 "#")。

可以设置,以更改 URL 的片段(忽略前导 "#")。

4.6.4 下载资源

HTMLAnchorElement/download

在所有当前引擎中支持。

Firefox20+Safari10.1+Chrome15+
Opera?Edge79+
Edge (Legacy)13+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

在某些情况下,资源用于以后使用,而不是立即查看。为了指示资源是用于以后下载使用,而不是立即使用,可以在创建指向该资源的超链接aarea 元素上指定download 属性。

此外,可以为该属性指定一个值,以指定用户代理在文件系统中存储资源时使用的文件名。该值可以被`Content-Disposition` HTTP 标头的文件名参数覆盖。[RFC6266]

在跨域情况下,必须将download 属性与`Content-Disposition` HTTP 标头结合使用,特别是与attachment 处理类型结合使用,以避免用户收到有关可能恶意活动的警告。(这样做是为了保护用户不被误导下载敏感的个人或机密信息,而没有充分的了解。)

ping 属性与现有的技术(如 HTTP 重定向和 JavaScript)冗余,这些技术允许网页跟踪哪些非网站链接最受欢迎,或者允许广告商跟踪点击率。

然而,与这些替代方案相比,ping 属性为用户提供了以下优势

因此,虽然可以在没有此功能的情况下跟踪用户,但鼓励作者使用ping 属性,以便用户代理可以使用户体验更透明。

4.6.5.1 `Ping-From` 和 `Ping-To` 标头

`Ping-From` 和 `Ping-To` HTTP 请求标头包含在超链接审核请求中。它们的值是URL序列化后的。

4.6.6 链接类型

Link_types

在所有当前引擎中支持。

Firefox1+Safari1+Chrome1+
Opera9+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

Link_types

下表汇总了本规范定义的链接类型,按其对应的关键字进行分类。该表是非规范性的;链接类型的实际定义在接下来的几节中给出。

在本节中,术语“引用文档”指的是由表示链接的元素标识的资源,而术语“当前文档”指的是包含表示链接的元素的资源。

除非另有说明,否则每个rel 属性中不能指定关键字超过一次。

下表后面的某些部分列出了某些关键字的同义词。在文档中不能使用指示的同义词(例如,关键字“copyright”)。

关键字始终不区分大小写

因此,rel="next" 等同于 rel="NEXT"

属于body-ok 的关键字会影响link 元素是否允许在正文中使用body-ok 关键字包括 dns-prefetchmodulepreloadpingbackpreconnectprefetchpreloadstylesheet

将由网络浏览器实施的新链接类型将添加到此标准中。其余部分可以注册为扩展

4.6.6.1 链接类型 "alternate"

Alternative_style_sheets

仅在单一引擎中受支持。

Firefox3+Safari?Chrome1–48
OperaYesEdgeNo
Edge (Legacy)?Internet Explorer8+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

alternate 关键字可与 linkaarea 元素一起使用。

此关键字的含义取决于其他属性的值。

如果该元素是 link 元素,并且 rel 属性还包含关键字 stylesheet

alternate 关键字以针对该关键字描述的方式修改 stylesheet 关键字的含义。alternate 关键字不会创建自己的链接。

在这里,一组 link 元素提供了一些样式表

<!-- a persistent style sheet -->
<link rel="stylesheet" href="default.css">

<!-- the preferred alternate style sheet -->
<link rel="stylesheet" href="green.css" title="Green styles">

<!-- some alternate style sheets -->
<link rel="alternate stylesheet" href="contrast.css" title="High contrast">
<link rel="alternate stylesheet" href="big.css" title="Big fonts">
<link rel="alternate stylesheet" href="wide.css" title="Wide screen">
如果 alternate 关键字与 type 属性一起使用,该属性的值设置为 application/rss+xmlapplication/atom+xml

该关键字创建一个指向 syndication feed 的超链接(尽管不一定与当前页面完全相同的内容进行 syndication)。

以下 link 元素为博客提供 syndication feed

<link rel="alternate" type="application/atom+xml" href="posts.xml" title="Cool Stuff Blog">
<link rel="alternate" type="application/atom+xml" href="posts.xml?category=robots" title="Cool Stuff Blog: robots category">
<link rel="alternate" type="application/atom+xml" href="comments.xml" title="Cool Stuff Blog: Comments">

这些 link 元素将被参与 feed 自动发现的用户代理使用,第一个是默认值(如果适用)。

以下示例使用 a 元素为用户提供各种不同的 syndication feed

<p>You can access the planets database using Atom feeds:</p>
<ul>
 <li><a href="recently-visited-planets.xml" rel="alternate" type="application/atom+xml">Recently Visited Planets</a></li>
 <li><a href="known-bad-planets.xml" rel="alternate" type="application/atom+xml">Known Bad Planets</a></li>
 <li><a href="unexplored-planets.xml" rel="alternate" type="application/atom+xml">Unexplored Planets</a></li>
</ul>

这些链接不会在 feed 自动发现中使用。

否则

该关键字创建一个指向当前文档的备用表示形式的超链接

引用文档的性质由 hreflangtype 属性给出。

如果 alternate 关键字与 hreflang 属性一起使用,并且该属性的值与文档元素语言不同,则表示引用文档是翻译。

如果 alternate 关键字与 type 属性一起使用,则表示引用文档是当前文档以指定格式的重新表述。

hreflangtype 属性可以在与 alternate 关键字一起指定时组合。

以下示例显示了如何指定使用备用格式的页面版本、针对其他语言的页面版本以及针对其他媒体的页面版本

<link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML">
<link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML">
<link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print title="English HTML (for printing)">
<link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)">
<link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="English PDF">
<link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF">

这种关系是可传递的 - 也就是说,如果一个文档链接到另外两个文档,链接类型为 "alternate",那么除了意味着这些文档是第一个文档的备用表示形式之外,还意味着这两个文档彼此是备用表示形式。

关键词 author 可与 linkaarea 元素一起使用。此关键词创建一个 超链接

对于 aarea 元素,关键词 author 表示所引用文档提供有关定义超链接的元素的最近父 article 元素(如果有)的作者的更多信息,否则提供有关整个页面的作者的更多信息。

对于 link 元素,关键词 author 表示所引用文档提供有关整个页面的作者的更多信息。

“所引用文档”可以是(通常是)一个 mailto: URL,该 URL 提供作者的电子邮件地址。 [MAILTO]

关键词 bookmark 可与 aarea 元素一起使用。此关键词创建一个 超链接

关键词 bookmark 为所链接元素的最近祖先 article 元素提供永久链接,或者如果不存在祖先 article 元素,则提供 所链接元素最紧密关联的部分 的永久链接。

以下代码段包含三个永久链接。用户代理可以通过查看永久链接的位置来确定哪个永久链接适用于规范的哪个部分。

 ...
 <body>
  <h1>Example of permalinks</h1>
  <div id="a">
   <h2>First example</h2>
   <p><a href="a.html" rel="bookmark">This permalink applies to
   only the content from the first H2 to the second H2</a>. The DIV isn't
   exactly that section, but it roughly corresponds to it.</p>
  </div>
  <h2>Second example</h2>
  <article id="b">
   <p><a href="b.html" rel="bookmark">This permalink applies to
   the outer ARTICLE element</a> (which could be, e.g., a blog post).</p>
   <article id="c">
    <p><a href="c.html" rel="bookmark">This permalink applies to
    the inner ARTICLE element</a> (which could be, e.g., a blog comment).</p>
   </article>
  </article>
 </body>
 ...

关键词 canonical 可与 link 元素一起使用。此关键词创建一个 超链接

关键词 canonical 表示 href 属性给出的 URL 是当前文档的首选 URL。这有助于搜索引擎减少重复内容,如 The Canonical Link Relation 中的更详细描述。 [RFC6596]

Link_types/dns-prefetch

Firefox3+Safari?Chrome46+
Opera?Edge79+
Edge (Legacy)NoInternet Explorer?
Firefox Android?Safari iOS?Chrome AndroidYesWebView Android46+Samsung Internet?Opera Android?

关键词 dns-prefetch 可与 link 元素一起使用。此关键词创建一个 外部资源链接。此关键词是 body-ok

关键词 dns-prefetch 表示提前执行指定资源的 来源 的 DNS 解析可能是有益的,因为它很有可能用户会需要位于该 来源 的资源,并且通过提前执行与 DNS 解析相关的延迟成本,可以改善用户体验。

关键词 dns-prefetch 给出的资源没有默认类型。

获取和处理此类型链接的适当时间是

此类型链接资源的获取和处理步骤(给定一个 link 元素 el)是

  1. url 为使用 elhref 属性的值(相对于 el节点文档)进行 URL 编码解析的结果。

  2. 如果 url 为失败,则返回。

  3. partitionKey 为使用 el节点文档 的相关设置对象进行 确定网络分区键 的结果。

  4. 用户代理应该使用 partitionKeyurl来源 进行 解析来源

    由于该算法的结果可以被缓存,因此未来的获取可能更快。

关键词 expect 可与 link 元素一起使用。此关键词创建一个 内部资源链接

由关键词 expect 创建的 内部资源链接 可用于 阻止渲染,直到它 指示 的元素连接到文档并完全解析。

关键词 expect 给出的资源没有默认类型。

无论何时 link 元素 el 发生以下任何情况

处理 el

给定一个 link 元素 el处理内部资源链接 运行以下步骤

  1. docel节点文档

  2. url 为使用 elhref 属性的值(相对于 doc)进行 URL 编码解析的结果。

  3. 如果失败,或者 url等于 docURL(在 排除片段 设置为 false 的情况下),则在 el取消阻止渲染 并返回。

  4. indicatedElement 为使用 docurl 进行 选择所指示的部分 的结果。

  5. 如果以下所有条件都为真

    则在 el阻止渲染

  6. 否则,在 el取消阻止渲染

给定一个 Document doc处理内部资源链接

  1. 对于 doc阻止渲染元素集 中的每个 expect link 元素 link处理 link

以下的属性更改步骤,给定elementlocalNamevaluenamespace,用于确保expectlink元素响应动态idname更改。

  1. 如果namespace不为 null,则返回。

  2. 如果element位于HTML 解析器打开元素堆栈中,则返回。

  3. 如果以下任何一项为真

    处理内部资源链接,给定element节点文档

external关键字可与aareaform元素一起使用。此关键字不创建超链接,但注释由元素创建的任何其他超链接(如果其他关键字没有创建,则为隐含的超链接)。

external关键字表示链接指向当前文档所属网站之外的文档。

help关键字可与linkaareaform元素一起使用。此关键字创建超链接

对于aareaform元素,help关键字表示引用的文档提供了定义超链接的元素的父级及其子级的更多帮助信息。

在以下示例中,窗体控件具有相关的上下文敏感帮助。例如,用户代理可以使用此信息,如果用户按下“帮助”或“F1”键,则显示引用的文档。

 <p><label> Topic: <input name=topic> <a href="help/topic.html" rel="help">(Help)</a></label></p>

对于link元素,help关键字表示引用的文档提供了整个页面的帮助。

对于aarea元素,在某些浏览器中,help关键字会导致链接使用不同的光标。

4.6.6.9 链接类型 "icon"

Link_types#icon

在所有当前引擎中支持。

Firefox2+Safari3.1+Chrome4+
Opera9+Edge79+
Edge (Legacy)12+Internet Explorer11
Firefox Android4+Safari iOSNoChrome Android18+WebView Android38+Samsung Internet4.0+Opera AndroidNo
caniuse.com 表格

icon关键字可与link元素一起使用。此关键字创建外部资源链接

图标可以是听觉图标、视觉图标或其他类型的图标。

sizes关键字以原始像素(与CSS 像素相反)表示图标大小。

宽度为 50 个CSS 像素,旨在用于每个CSS 像素具有两个设备像素密度的显示器(2x,192dpi)的图标将具有 100 个原始像素的宽度。此功能不支持指示对小型高分辨率图标与大型低分辨率图标(例如,50×50 2x 与 100×100 1x)使用不同的资源。

any关键字表示资源包含可缩放图标,例如,由 SVG 图像提供。

sizes属性上指定的关键字不得表示链接资源中实际不可用的图标大小。

以下代码段显示了应用程序顶部的几个图标。

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>lsForums — Inbox</title>
  <link rel=icon href=favicon.png sizes="16x16" type="image/png">
  <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
  <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
  <link rel=icon href=iphone.png sizes="57x57" type="image/png">
  <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
  <link rel=stylesheet href=lsforums.css>
  <script src=lsforums.js></script>
  <meta name=application-name content="lsForums">
 </head>
 <body>
  ...

出于历史原因,icon关键字之前可能带有关键字“shortcut”。如果存在“shortcut”关键字,则rel属性的整个值必须与字符串“shortcut icon”(标记之间只有一个 U+0020 SPACE 字符,没有其他ASCII 空格)进行ASCII 不区分大小写匹配。

license关键字可与linkaareaform元素一起使用。此关键字创建超链接

license关键字表示引用的文档提供了当前文档主要内容提供的版权许可条款。

本规范未指定如何区分文档的主要内容和不视为该主要内容一部分的内容。应向用户明确说明这种区别。

考虑一个照片共享网站。该网站上的一个页面可能描述并显示一张照片,并且该页面可能以如下方式标记。

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>Exampl Pictures: Kissat</title>
  <link rel="stylesheet" href="/style/default">
 </head>
 <body>
  <h1>Kissat</h1>
  <nav>
   <a href="../">Return to photo index</a>
  </nav>
  <figure>
   <img src="/pix/39627052_fd8dcd98b5.jpg">
   <figcaption>Kissat</figcaption>
  </figure>
  <p>One of them has six toes!</p>
  <p><small><a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a></small></p>
  <footer>
   <a href="/">Home</a> | <a href="../">Photo index</a>
   <p><small>© copyright 2009 Exampl Pictures. All Rights Reserved.</small></p>
  </footer>
 </body>
</html>

在这种情况下,license仅适用于照片(文档的主要内容),而不是整个文档。特别是,不适用于页面本身的设计,该设计受文档底部给出的版权保护。这可以在样式中更清楚地说明(例如,将许可链接突出显示在照片附近,而将页面版权以浅色小文字放置在页面底部)。

Link_types/manifest

仅在单一引擎中受支持。

Firefox?Safari?ChromeNo
Opera?EdgeNo
Edge (Legacy)?Internet Explorer?
Firefox Android?Safari iOS?Chrome Android39+WebView Android?Samsung Internet?Opera Android?

manifest关键字可与link元素一起使用。此关键字创建外部资源链接

manifest关键字表示提供与当前文档关联的元数据的清单文件。

Link_types/modulepreload

Firefox115+Safari?Chrome66+
Opera?Edge79+
Edge (Legacy)NoInternet Explorer?
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

modulepreload关键字可与link元素一起使用。此关键字创建外部资源链接。此关键字是body-ok

modulepreload关键字是preload关键字的专用替代方案,具有面向预加载模块脚本的处理模型。特别是,它使用模块脚本的特定获取行为(包括例如对crossorigin属性的不同解释),并将结果放入适当的模块映射以供以后评估。相比之下,使用preload关键字的类似外部资源链接会将结果放置在预加载缓存中,而不会影响文档的模块映射

此外,实现可以利用模块脚本按顺序声明其依赖关系这一事实来获取指定模块的依赖关系。这是为了优化机会,因为用户代理知道,在所有可能性中,这些依赖关系稍后也会被需要。在不使用诸如服务工作者之类的技术或在服务器端进行监控的情况下,通常不会观察到这一点。值得注意的是,适当的loaderror事件将在指定模块获取后发生,并且不会等待任何依赖项。

与某些其他链接关系不同,更改相关属性(例如ascrossoriginreferrerpolicy)此类link不会触发新的获取。这是因为文档的模块映射已由之前的获取填充,因此重新获取将毫无意义。

以下代码段显示了应用程序顶部的几个预加载模块。

<!DOCTYPE html>
<html lang="en">
<title>IRCFog</title>

<link rel="modulepreload" href="app.mjs">
<link rel="modulepreload" href="helpers.mjs">
<link rel="modulepreload" href="irc.mjs">
<link rel="modulepreload" href="fog-machine.mjs">

<script type="module" src="app.mjs">
...

假设应用程序的模块图如下所示。

The module graph is rooted at app.mjs, which depends on irc.mjs and fog-machine.mjs. In turn, irc.mjs depends on helpers.mjs.

这里我们看到应用开发者使用了 modulepreload 来声明其模块图中的所有模块,确保用户代理为它们启动获取。如果没有这种预加载,用户代理可能需要经历多次网络往返才能发现 helpers.mjs,除非使用诸如 HTTP/2 服务器推送之类的技术。这样,modulepreload link 元素可以被用作应用程序模块的“清单”。

以下代码展示了如何将 modulepreload 链接与 import() 结合使用,确保网络获取提前完成,以便在调用 import() 时,模块已经在 模块映射 中准备就绪(但未评估)。

<link rel="modulepreload" href="awesome-viewer.mjs">

<button onclick="import('./awesome-viewer.mjs').then(m => m.view())">
  View awesome thing
</button>

nofollow 关键字可与 aareaform 元素一起使用。此关键字不会创建 超链接,但会 注释 元素创建的任何其他超链接(如果没有任何其他关键字创建超链接,则为隐式超链接)。

nofollow 关键字表示该链接未得到页面原始作者或发布者的认可,或者链接到引用的文档主要是由于与两个页面相关的人员之间的商业关系所致。

Link_types/noopener

在所有当前引擎中支持。

Firefox52+Safari10.1+Chrome49+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

Link_types/noopener

在所有当前引擎中支持。

Firefox52+Safari10.1+Chrome49+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

noopener 关键字可与 aareaform 元素一起使用。此关键字不会创建 超链接,但会 注释 元素创建的任何其他超链接(如果没有任何其他关键字创建超链接,则为隐式超链接)。

该关键字表示,通过遵循 超链接 产生的任何新创建的 顶级可遍历元素 将不包含 辅助浏览上下文。例如,结果 Windowopener 获取器将返回 null。

这通常会创建一个具有 辅助浏览上下文顶级可遍历元素(假设没有现有 可导航元素目标名称 为“example”)。

<a href=help.html target=example>Help!</a>

这会创建一个具有非 辅助浏览上下文顶级可遍历元素(假设相同的事物)。

<a href=help.html target=example rel=noopener>Help!</a>

这些是等效的,并且只导航 父可导航元素

<a href=index.html target=_parent>Home</a>
<a href=index.html target=_parent rel=noopener>Home</a>

Link_types/noreferrer

在所有当前引擎中支持。

Firefox33+Safari5+Chrome16+
Opera?Edge79+
Edge (Legacy)13+Internet Explorer🔰 11
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet1.5+Opera Android?

Link_types/noreferrer

在所有当前引擎中支持。

Firefox33+Safari5+Chrome16+
Opera?Edge79+
Edge (Legacy)13+Internet Explorer🔰 11
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet1.5+Opera Android?

noreferrer 关键字可与 aareaform 元素一起使用。此关键字不会创建 超链接,但会 注释 元素创建的任何其他超链接(如果没有任何其他关键字创建超链接,则为隐式超链接)。

它表示在遵循链接时不泄露任何推荐信息,并且在相同条件下还隐含了 noopener 关键字的行为。

<a href="..." rel="noreferrer" target="_blank"><a href="..." rel="noreferrer noopener" target="_blank"> 的行为相同。

opener 关键字可与 aareaform 元素一起使用。此关键字不会创建 超链接,但会 注释 元素创建的任何其他超链接(如果没有任何其他关键字创建超链接,则为隐式超链接)。

该关键字表示,通过遵循 超链接 产生的任何新创建的 顶级可遍历元素 将包含 辅助浏览上下文

在以下示例中,opener 用于允许帮助页面弹出窗口导航其打开者,例如,如果用户要查找的内容可以在其他地方找到。另一种方法可能是使用命名目标而不是 _blank,但这有可能与现有名称冲突。

<a href="..." rel=opener target=_blank>Help!</a>

pingback 关键字可与 link 元素一起使用。此关键字创建一个 外部资源链接。此关键字是 body-ok

有关 pingback 关键字的语义,请参见 Pingback 1.0[PINGBACK]

Link_types/preconnect

在所有当前引擎中支持。

Firefox39+Safari11.1+Chrome46+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet4.0+Opera Android?

preconnect 关键字可与 link 元素一起使用。此关键字创建一个 外部资源链接。此关键字是 body-ok

preconnect 关键字表示预先启动到指定资源的 来源 的连接可能是有益的,因为它很有可能用户需要位于该 来源 的资源,并且通过抢先建立连接的延迟成本,用户体验会得到改善。

preconnect 关键字没有资源的默认类型。

用户代理不得 延迟此链接类型的加载事件

获取和处理此类型链接的适当时间是

对于此类型的链接资源,给定 link 元素 el获取和处理链接资源 步骤是,从 el创建链接选项,并根据结果 预连接

对于此类型的链接资源,给定 链接处理选项 options处理链接头 步骤是,根据 options 预连接

预连接,给定 链接处理选项 options

  1. 如果 optionshref 为空字符串,则返回。

  2. url 为给定 optionshref 相对于 options基本 URL编码解析 URL 的结果。

    传递基本 URL 而不是文档或环境由 问题 #9715 跟踪。

  3. 如果 url 为失败,则返回。

  4. 如果 url方案 不是 HTTP(S) 方案,则返回。

  5. partitionKey 为给定 options环境确定网络分区键 的结果。

  6. useCredentials 为 true。

  7. 如果 optionscrossorigin匿名optionsoriginurl相同来源 不一致,则将 useCredentials 设置为 false。

  8. 用户代理应根据 partitionKeyurl来源useCredentials 获取连接

    此连接已获取,但未直接使用。它将保留在 连接池 中以供后续使用。

    用户代理应尽可能尝试启动预连接并执行完整的连接握手(HTTP 的 DNS+TCP 和 HTTPS 来源的 DNS+TCP+TLS),但允许选择执行部分握手(HTTP 的 DNS 以及 HTTPS 来源的 DNS 或 DNS+TCP)或完全跳过握手,原因可能是资源限制或其他原因。

    每个来源的最佳连接数取决于协商的协议、用户当前的连接配置文件、可用的设备资源、全局连接限制以及其他特定于上下文的变量。因此,关于应打开多少连接的决定留给用户代理。

Link_types/prefetch

Firefox2+SafariChrome8+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer11
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet1.5+Opera Android?

prefetch 关键字可与 link 元素一起使用。此关键字创建一个 外部链接。此关键字为 body-ok

prefetch 关键字表示抢先 获取 并缓存指定的资源或同站文档可能会有益,因为用户很可能在将来的导航中需要此资源。

prefetch 关键字没有资源的默认类型。

获取和处理此类型链接的适当时间是

针对 prefetch 链接的 获取并处理链接资源 算法(给定 link 元素 el)如下:

  1. 如果 elhref 属性的值为空字符串,则返回。

  2. options 为从 el 创建链接选项 的结果。

  3. optionsdestination 设置为空字符串。

  4. request 为给定 options 创建链接请求 的结果。

  5. 如果 request 为 null,则返回。

  6. request发起者 设置为 "prefetch"。

  7. processPrefetchResponse 为以下步骤,给定 响应 response 以及 null、失败或 字节序列 bytesOrNull

    1. 如果 response网络错误,则在 el触发 名称为 error 的事件。

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

  8. 用户代理应使用 processResponseConsumeBody 设置为 processPrefetchResponse 获取 request。用户代理可能会延迟获取 request,以优先处理当前文档所需的 other 请求。

针对此类链接资源的 处理链接标头 步骤是不执行任何操作。

Link_types/preload

仅在单一引擎中受支持。

Firefox85+SafariChrome🔰 50+
Opera37+Edge🔰 79+
Edge (Legacy)NoInternet Explorer?
Firefox AndroidSafari iOSChrome AndroidWebView Android50+Samsung Internet5.0+Opera Android

preload 关键字可与 link 元素一起使用。此关键字创建一个 外部链接。此关键字为 body-ok

preload 关键字表示用户代理会抢先根据 as 属性给出的 潜在目标fetchpriority 属性给出的 优先级 获取 并缓存指定的资源,因为用户很可能在当前导航中需要此资源。

当资源加载时,用户代理可能会执行其他操作,例如抢先 解码图像创建样式表。但是,这些其他操作不能产生可观察到的效果。

preload 关键字没有资源的默认类型。

用户代理不得 延迟此链接类型的加载事件

以下时间段适合针对此类链接的 获取并处理链接资源

Document 具有 预加载资源映射,它是一个 有序映射,最初为空。

预加载键 是一个 结构。它具有以下

URL
一个 URL
destination
一个字符串
mode
一个 请求模式,可以是 "same-origin"、"cors" 或 "no-cors"
credentials mode
一个凭证模式

一个预加载条目是一个结构体。它具有以下

完整性元数据
一个字符串
响应
空值或一个响应
响应可用时
空值,或者一个接受响应或空值的算法

为了使用预加载的资源,对于Window window,给定一个URL url,一个字符串destination,一个字符串mode,一个字符串credentialsMode,一个字符串integrityMetadataonResponseAvailable,它是一个接受响应的算法

  1. key为一个预加载键,其URLurl目标destination模式mode凭证模式credentialsMode

  2. preloadswindow关联的Document预加载资源映射

  3. 如果keypreloads不存在,则返回false。

  4. entrypreloads[key]。

  5. consumerIntegrityMetadata解析integrityMetadata的结果。

  6. preloadIntegrityMetadata解析entry完整性元数据的结果。

  7. 如果以下条件都不适用

    则返回false。

    预加载和消费者之间的完整性元数据不匹配,即使两者都与数据匹配,也会导致从网络进行额外的获取。

    重要的是将网络错误添加到预加载缓存中,以便如果预加载请求导致错误,则不会稍后从网络重新请求错误的响应。这还具有安全影响;考虑开发人员在预加载请求上指定子资源完整性元数据,但在随后的资源请求上未指定的情况。如果预加载请求失败子资源完整性验证并被丢弃,则资源请求将从网络获取并使用可能恶意的响应,而不会验证其完整性。 [SRI]

  8. 删除preloads[key]。

  9. 如果entry响应为空值,则将entry响应可用时设置为onResponseAvailable

  10. 否则,使用entry响应调用onResponseAvailable

  11. 返回true。

出于本节的目的,一个字符串type匹配一个字符串destination,如果以下算法返回true

  1. 如果type为空字符串,则返回true。

  2. 如果destination为"fetch",则返回true。

  3. mimeTypeRecord解析type的结果。

  4. 如果mimeTypeRecord为失败,则返回false。

  5. 如果mimeTypeRecord不是受用户代理支持的,则返回false。

  6. 如果以下任一为真

    则返回true。

  7. 返回false。

为了创建一个预加载键,对于一个请求 request,返回一个新的预加载键,其URLrequestURL目标request目标模式request模式凭证模式request凭证模式

为了翻译一个预加载目标,给定一个字符串destination

  1. 如果destination不是"fetch"、"font"、"image"、"script"、"style"或"track",则返回null。

  2. 返回翻译destination的结果。

为了预加载,给定一个链接处理选项 options和一个可选的processResponse,它是一个接受响应的算法

  1. 如果options类型匹配options目标,则返回。

  2. 如果options目标为"image"且options源集不为空值,则将optionshref设置为从options源集选择一个图像源的结果。

  3. request 为给定 options 创建链接请求 的结果。

  4. 如果 request 为 null,则返回。

  5. unsafeEndTime为0。

  6. entry为一个新的预加载条目,其完整性元数据options完整性

  7. key创建预加载键给定request的结果。

  8. 如果options文档为"pending",则将request发起者类型设置为"early hint"。

  9. controller为null。

  10. reportTiming给定一个Document document报告时间,对于controller,给定document相关全局对象

  11. controller设置为获取request的结果,其中processResponseConsumeBody设置为以下步骤,给定一个响应 response和空值、失败或一个字节序列 bodyBytes

    1. 如果bodyBytes是一个字节序列,则将response主体设置为bodyBytes作为主体

      通过使用processResponseConsumeBody,我们已经提取了整个主体。这对于确保预加载程序从网络加载整个主体是必要的,无论预加载是否会被使用(目前尚不确定)。然后,此步骤将请求的主体重置为包含相同字节的新主体,以便其他规范可以在实际使用时从它读取,即使我们已经读取过一次。

    2. 否则,将response设置为一个网络错误

    3. unsafeEndTime设置为不安全的共享当前时间

    4. 如果options文档不为空值,则使用options文档调用reportTiming

    5. 如果entry响应可用时为空值,则将entry响应设置为response;否则使用response调用entry响应可用时

    6. 如果给定了processResponse,则使用response调用processResponse

  12. commit为以下步骤,给定一个Document document

    1. 如果entry响应不为空值,则使用document调用reportTiming

    2. document预加载资源映射[key]设置为entry

  13. 如果options文档为空值,则将options文档就绪时设置为commit。否则,使用options文档调用commit

对于此类型的链接资源,给定一个link元素el获取并处理链接的资源步骤为

  1. 更新源集,对于el

  2. options 为从 el 创建链接选项 的结果。

  3. 预加载 options,以下步骤针对一个响应 response

    1. 如果 response 是一个网络错误,在 el触发一个名为 error 的事件。否则,在 el触发一个名为 load 的事件。

      实际浏览器的行为与这里的规范不同,改变行为的可行性尚未调查。参见issue #1142

针对这种链接类型,给定一个链接处理选项 options处理链接头步骤为预加载 options

关键字 privacy-policy 可以与 linkaarea 元素一起使用。此关键字创建一个超链接

关键字 privacy-policy 表示所引用的文档包含有关当前文档适用的数据收集和使用实践的信息,如其他链接关系类型中更详细地描述。所引用的文档可以是独立的隐私政策,也可以是某个更通用文档的特定部分。 [RFC6903]

关键字 search 可以与 linkaareaform 元素一起使用。此关键字创建一个超链接

关键字 search 表示所引用的文档提供了专门用于搜索文档及其相关资源的界面。

OpenSearch 描述文档可以与 link 元素和 search 链接类型一起使用,使用户代理能够自动发现搜索界面。 [OPENSEARCH]

关键字 stylesheet 可以与 link 元素一起使用。此关键字创建一个外部资源链接,该链接有助于样式处理模型。此关键字是body-ok

指定的资源是CSS 样式表,用于描述如何呈现文档。

Alternative_style_sheets

仅在单一引擎中受支持。

Firefox3+Safari?Chrome1–48
OperaYesEdgeNo
Edge (Legacy)?Internet Explorer8+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

如果 alternate 关键字也指定在 link 元素上,那么该链接是备用样式表;在这种情况下,title 属性必须指定在 link 元素上,且具有非空值。

关键字 stylesheet 指定的资源的默认类型为 text/css

如果此类型 link 元素是由其节点文档 的解析器创建的,则该元素隐式地可能是渲染阻塞的

关键字 tag 可以与 aarea 元素一起使用。此关键字创建一个超链接

关键字 tag 表示所引用的文档所代表的标签适用于当前文档。

因为它表示标签适用于当前文档,因此在标签云的标记中使用此关键字是不合适的,标签云列出了跨一组页面的热门标签。

本文档是关于一些宝石的,因此它被标记为“https://en.wikipedia.org/wiki/Gemstone”,以明确地将其归类为适用于“宝石”类型的宝石,而不是例如美国的城镇、Ruby 包格式或瑞士机车类别

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>My Precious</title>
 </head>
 <body>
  <header><h1>My precious</h1> <p>Summer 2012</p></header>
  <p>Recently I managed to dispose of a red gem that had been
  bothering me. I now have a much nicer blue sapphire.</p>
  <p>The red gem had been found in a bauxite stone while I was digging
  out the office level, but nobody was willing to haul it away. The
  same red gem stayed there for literally years.</p>
  <footer>
   Tags: <a rel=tag href="https://en.wikipedia.org/wiki/Gemstone">Gemstone</a>
  </footer>
 </body>
</html>

本文档中,有两篇文章。但是,"tag" 链接适用于整个页面(无论它位于何处,包括它是否位于 article 元素内)。

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <title>Gem 4/4</title>
 </head>
 <body>
  <article>
   <h1>801: Steinbock</h1>
   <p>The number 801 Gem 4/4 electro-diesel has an ibex and was rebuilt in 2002.</p>
  </article>
  <article>
   <h1>802: Murmeltier</h1>
   <figure>
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b0/Trains_de_la_Bernina_en_hiver_2.jpg"
         alt="The 802 was red with pantographs and tall vents on the side.">
    <figcaption>The 802 in the 1980s, above Lago Bianco.</figcaption>
   </figure>
   <p>The number 802 Gem 4/4 electro-diesel has a marmot and was rebuilt in 2003.</p>
  </article>
  <p class="topic"><a rel=tag href="https://en.wikipedia.org/wiki/Rhaetian_Railway_Gem_4/4">Gem 4/4</a></p>
 </body>
</html>

关键字 terms-of-service 可以与 linkaarea 元素一起使用。此关键字创建一个超链接

关键字 terms-of-service 表示所引用的文档包含有关当前文档提供者与希望使用当前文档的用户之间协议的信息,如其他链接关系类型中更详细地描述。 [RFC6903]

一些文档构成文档序列的一部分。

文档序列是指每个文档可以具有前一个同级下一个同级的序列。没有前一个同级的文档是其序列的开头,没有下一个同级的文档是其序列的结尾。

一个文档可能属于多个序列。

关键字 next 可以与 linkaareaform 元素一起使用。此关键字创建一个超链接

关键字 next 表示该文档是序列的一部分,并且该链接指向序列中下一个逻辑文档。

关键字 prev 可以与 linkaareaform 元素一起使用。此关键字创建一个超链接

关键字 prev 表示该文档是序列的一部分,并且该链接指向序列中上一个逻辑文档。

对预定义链接类型集的扩展可以在现有的 rel 值的微格式页面上注册。 [MFREL]

任何人都可以随时编辑现有的 rel 值的微格式页面以添加类型。扩展类型必须以以下信息指定

关键字

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

如果该值包含 U+003A COLON 字符 (:),则它也必须是绝对 URL

对... 的影响 link

以下之一

不允许
关键字不得指定在 link 元素上。
超链接
关键字可以指定在 link 元素上;它创建一个超链接
外部资源
关键字可以指定在 link 元素上;它创建一个外部资源链接
对... 的影响 aarea

以下之一

不允许
关键字不得指定在 aarea 元素上。
超链接
关键字可以指定在 aarea 元素上;它创建一个超链接
外部资源
关键字可以指定在 aarea 元素上;它创建一个外部资源链接
超链接注释
关键字可以指定在 aarea 元素上;它注释该元素创建的其他超链接
对...的影响 表单

以下之一

不允许
关键字不能在 表单 元素上指定。
超链接
关键字可以在 表单 元素上指定;它创建一个 超链接
外部资源
关键字可以在 表单 元素上指定;它创建一个 外部资源链接
超链接注释
关键字可以在 表单 元素上指定;它 注释 其他由该元素创建的 超链接
简要描述

对关键字含义的简短非规范性描述。

规范

指向对关键字语义和要求的更详细描述的链接。它可能是维基上的另一个页面,或者指向外部页面的链接。

同义词

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

状态

以下之一

已提出
关键字尚未获得广泛的同行评审和批准。有人提出了它,并且正在使用它,或者很快就会使用它。
已批准
关键字已获得广泛的同行评审和批准。它有一个规范,明确定义了如何处理使用该关键字的页面,包括在它们以不正确的方式使用它时。
已停止
关键字已获得广泛的同行评审,并且发现它存在缺陷。现有的页面正在使用此关键字,但新的页面应避免使用它。“简要描述”和“规范”条目将提供有关作者应该使用什么(如果有的话)的详细信息。

如果发现关键字与现有值冗余,则应将其删除并列为现有值的同义词。

如果一个关键字在“已提出”状态下注册了一个月或更长时间而没有被使用或指定,则可以从注册表中删除它。

如果一个关键字以“已提出”状态添加,并且发现它与现有值冗余,则应将其删除并列为现有值的同义词。如果一个关键字以“已提出”状态添加,并且发现它有害,则应将其更改为“已停止”状态。

任何人都可以在任何时候更改状态,但应仅根据上述定义进行更改。

现有 rel 值的微格式页面 中定义为扩展的类型,其状态为“已提出”或“已批准”,可以在 链接a区域 元素上与“对...的影响”字段一致地使用 rel 属性。 [MFREL]