HTML 属性:rel

rel 属性定义了链接资源与当前文档之间的关系。在 <link><a><area><form> 上有效,支持的值取决于该属性所在的元素。

关系类型由 rel 属性的值给出,如果存在,该值必须是一组唯一的以空格分隔的关键字的无序集合。与不表达语义的 class 名称不同,rel 属性必须表达对机器和人类都具有语义有效性的标记。rel 属性可能值的当前注册表是 IANA 链接关系注册表HTML 活跃标准 和微格式 wiki 中可自由编辑的 existing-rel-values 页面如活跃标准中所建议。如果使用了上述三个来源中都不存在的 rel 属性,则某些 HTML 验证器(例如 W3C 标记验证服务)将生成警告。

下表列出了一些最重要的现有关键字。空格分隔的值中的每个关键字都应在该值中唯一。

rel 描述 <link> <a><area> <form>
alternate 当前文档的备用表示形式。 链接 链接 不允许
author 当前文档或文章的作者。 链接 链接 不允许
bookmark 最近祖先部分的永久链接。 不允许 链接 不允许
canonical 当前文档的首选 URL。 链接 不允许 不允许
dns-prefetch 告诉浏览器抢先为目标资源的来源执行 DNS 解析。 外部资源 不允许 不允许
external 引用的文档不属于与当前文档相同的站点。 不允许 注释 注释
expect 允许页面在解析文档的基本部分之前被 渲染阻塞,以便其一致地渲染。 链接 不允许 不允许
help 链接到上下文相关的帮助。 链接 链接 链接
icon 表示当前文档的图标。 外部资源 不允许 不允许
license 指示当前文档的主要内容受引用的文档中描述的版权许可证的约束。 链接 链接 链接
manifest Web 应用清单。 链接 不允许 不允许
me 指示当前文档代表拥有链接内容的人。 链接 链接 不允许
modulepreload 告诉浏览器抢先获取脚本并将其存储在文档的模块映射中以供以后评估。可选地,还可以获取模块的依赖项。 外部资源 不允许 不允许
next 指示当前文档是系列的一部分,并且该系列中的下一个文档是引用的文档。 链接 链接 链接
nofollow 指示当前文档的原始作者或发布者不认可引用的文档。 不允许 注释 注释
noopener 如果超链接最初会创建任何这些(即具有适当的 target 属性值),则创建一个不是辅助浏览上下文的顶级浏览上下文。 不允许 注释 注释
noreferrer 不会包含 Referer 标头。此外,具有与 noopener 相同的效果。 不允许 注释 注释
opener 如果超链接原本会创建不是辅助浏览上下文的顶级浏览上下文(即 target 属性值为“_blank”),则创建一个辅助浏览上下文。 不允许 注释 注释
pingback 提供处理对当前文档的 pingback 的 pingback 服务器的地址。 外部资源 不允许 不允许
preconnect 指定用户代理应抢先连接到目标资源的来源。 外部资源 不允许 不允许
prefetch 指定用户代理应抢先获取并缓存目标资源,因为它很可能需要后续导航。 外部资源 不允许 不允许
preload 指定用户代理必须根据 as 属性给出的潜在目标(以及与相应目标关联的优先级)抢先获取并缓存目标资源以进行当前导航。 外部资源 不允许 不允许
prerender 指定用户代理应该抢先获取目标资源并在未来帮助提供更快响应的方式下处理它。 外部资源 不允许 不允许
prev 指示当前文档是系列的一部分,并且该系列中的前一个文档是引用的文档。 链接 链接 链接
privacy-policy 提供指向有关适用于当前文档的数据收集和使用实践的信息的链接。 链接 链接 不允许
search 提供指向可用于搜索当前文档及其相关页面的资源的链接。 链接 链接 链接
stylesheet 导入样式表。 外部资源 不允许 不允许
tag 提供适用于当前文档的标签(由给定地址标识)。 不允许 链接 不允许
terms-of-service 指向文档提供者与希望使用文档的用户之间协议或服务条款的链接。 链接 链接 不允许

rel 属性与 <link><a><area><form> 元素相关,但某些值仅与这些元素的子集相关。像所有 HTML 关键字属性值一样,这些值不区分大小写。

rel 属性没有默认值。如果省略该属性或该属性中的任何值都不受支持,则文档与目标资源之间除了存在超链接之外没有特定的关系。在这种情况下,在 <link><form> 上,如果 rel 属性不存在、没有关键字,或者不是上面一个或多个空格分隔的关键字,则该元素不会创建任何链接。<a><area> 仍将创建链接,但没有定义的关系。

alternate

指示当前文档的替代表示形式。对于 <link><a><area> 有效,其含义取决于其他属性的值。

  • <link> 上使用 stylesheet 关键字时,它会创建一个 备用样式表
    html
    <!-- a persistent style sheet -->
    <link rel="stylesheet" href="default.css" />
    <!-- alternate style sheets -->
    <link
      rel="alternate stylesheet"
      href="highcontrast.css"
      title="High contrast" />
    
  • 如果具有与文档语言不同的 hreflang 属性,则表示翻译。
  • 如果 type 属性值为 "application/rss+xml""application/atom+xml",则它会创建一个引用联合供稿的超链接。
    html
    <link
      rel="alternate"
      type="application/atom+xml"
      href="posts.xml"
      title="Blog" />
    
  • 否则,它将创建一个引用当前文档的替代表示形式的超链接,其性质由 hreflangtype 属性给出。
    • 如果 hreflangalternate 一起给出,并且 hreflang 的值与当前文档的语言不同,则表示引用的文档是翻译。
    • 如果 typealternate 一起给出,则表示引用的文档是替代格式(例如 PDF)。
    • hreflangtype 属性都可能与 alternate 一起给出。
    html
    <link
      rel="alternate"
      href="/fr/html/print"
      hreflang="fr"
      type="text/html"
      media="print"
      title="French HTML (for printing)" />
    <link
      rel="alternate"
      href="/fr/pdf"
      hreflang="fr"
      type="application/pdf"
      title="French PDF" />
    
author

指示引用的文档提供有关当前文档或文章作者的更多信息。与 <link><a><area> 元素相关。

对于 <a><area>,它表示如果存在最近的 <article> 祖先,则链接的文档(或 mailto:)提供有关该祖先的信息,否则提供整个文档的信息。

对于 <link>,它表示整个文档的作者。

注意:由于历史原因,已弃用的属性值 rev="made" 被视为 rel="author"

bookmark

<a><area> 元素的 rel 属性值相关。为最近的祖先 <article> 元素提供永久链接(如果存在)。如果没有祖先 <article> 元素,则为链接元素最密切关联的部分提供永久链接。

canonical

对于 <link> 有效,它定义了当前文档的首选 URL,这有助于搜索引擎减少重复内容。

dns-prefetch

<link> 元素在 <body><head> 中的相关性,它告诉浏览器抢先对目标资源的来源执行 DNS 解析。对于用户可能需要的资源很有用,它有助于减少延迟,从而在用户访问资源时提高性能,因为浏览器抢先对指定资源的来源执行了 DNS 解析。请参阅 dns-prefetch资源提示 中的描述。

external

<form><a><area> 相关,它表示引用的文档不是当前站点的一部分。这可以与属性选择器一起使用,以一种向用户指示他们将离开当前站点的方式来设置外部链接的样式。

expect Experimental

允许页面在解析文档的基本部分之前被 渲染阻止,以便它能够一致地渲染。请注意,渲染阻止仅在与 blocking="render" 属性一起使用时才会发生。

注意:有关其用法的更多信息,请参阅 稳定页面状态以使跨文档转换保持一致

help

<form><link><a><area> 相关,help 关键字表示链接到的内容提供上下文相关的帮助,为定义超链接的元素的父级及其子级提供信息。当在 <link> 中使用时,帮助针对整个文档。当与 <a><area> 一起使用并得到支持时,默认的 cursor 将为 help 而不是 pointer

icon

<link> 中有效,链接的资源代表图标,用于在用户界面中表示当前文档的资源。

icon 值最常见的用途是 favicon。

html
<link rel="icon" href="favicon.ico" />

如果有多个 <link rel="icon">,则浏览器会使用它们的 mediatypesizes 属性来选择最合适的图标。如果几个图标同样合适,则使用最后一个图标。如果发现最合适的图标后来不合适,例如因为它使用了不受支持的格式,则浏览器将继续使用下一个最合适的图标,依此类推。

注意:Chromium 基于浏览器的 rel="icon" 不支持 crossorigin 属性。请参阅 打开的 Chromium 问题

注意:Apple 的 iOS 不会像其他移动浏览器那样使用此链接类型或 sizes 属性来选择网页剪辑或启动占位符的网页图标。相反,它分别使用非标准的 apple-touch-iconapple-touch-startup-image

注意:shortcut 链接类型通常在 icon 之前出现,但此链接类型不符合规范,被忽略,并且**网页作者不得再使用它**。

license

<a><area><form><link> 元素上有效,license 值表示超链接指向描述许可信息的文档;当前文档的主要内容受引用的文档中描述的版权许可证的约束。如果不位于 <head> 元素内,则标准不会区分应用于文档特定部分或整个文档的超链接。只有页面上的数据可以指示这一点。

html
<link rel="license" href="#license" />

注意:虽然已识别,但同义词 copyright 是不正确的,必须避免。

manifest

Web 应用清单。需要使用 CORS 协议进行跨源获取。

modulepreload

对提高性能很有用,并且与文档中任何位置的 <link> 相关,设置 rel="modulepreload" 会告诉浏览器抢先获取脚本(和依赖项)并将其存储在文档的模块映射中以供以后评估。modulepreload 链接可以确保在模块在模块映射中准备好(但未评估)之前完成网络获取。另请参阅 modulepreload

next

<form><link><a><area> 相关,next 值指示当前文档是系列的一部分,并且该系列中的下一个文档是引用的文档。当包含在 <link> 中时,浏览器可能会假设该文档将作为下一步获取,并将其视为资源提示。

nofollow

<form><a><area> 相关,nofollow 关键字告诉搜索引擎蜘蛛忽略链接关系。nofollow 关系可能表明当前文档的所有者不认可引用的文档。它通常由搜索引擎优化人员包含在内,假装他们的链接农场不是垃圾邮件页面。

noopener

<form><a><area> 相关,如果超链接会创建其中任何一个(即,具有适当的 target 属性值),则它会创建一个不是辅助浏览上下文的顶级浏览上下文。换句话说,它使链接的行为就像 window.opener 为 null 并且 target="_parent" 已设置一样。

这与 opener 相反。

noreferrer

<form><a><area> 相关,包含此值会使推荐来源未知(不会包含 Referer 标头),并创建顶级浏览上下文,就像 noopener 也已设置一样。

opener

如果超链接原本会创建不是辅助浏览上下文的顶级浏览上下文(即,具有“_blank”作为 target 属性值),则会创建辅助浏览上下文。实际上,与 noopener 相反。

pingback

提供处理对当前文档的 pingback 的 pingback 服务器的地址。请参阅 Pingback 规范

preconnect

向浏览器提供一个提示,建议它预先打开与链接网站的连接,而无需泄露任何私人信息或下载任何内容,以便在遵循链接时可以更快地获取链接内容。

prefetch

指定用户代理应该抢先获取并缓存目标资源,因为它很可能需要后续导航。有关更多信息,请参阅 prefetch

preload

指定用户代理必须根据 as 属性给出的潜在目标(以及与相应目标关联的优先级)抢先获取并缓存目标资源,以进行当前导航。请参阅 preload 值的页面。

prerender Deprecated Non-standard

指定用户代理应该抢先获取目标资源并以有助于将来提供更快响应的方式处理它,例如通过获取其子资源或执行一些渲染。

prev

类似于 next 关键字,与 <form><link><a><area> 相关,prev 值指示当前文档是系列的一部分,并且该链接引用该系列中的前一个文档是引用的文档。

注意:同义词 previous 是不正确的,不应使用。

privacy-policy

对于 <a><area><link> 元素有效,privacy-policy 值表示引用的文档是隐私政策,其中描述了当前文档的数据收集和使用实践。

<form><link><a><area> 元素相关,search 关键字表示超链接引用一个其界面专门设计用于在当前文档、站点和相关资源中搜索的文档,提供指向可用于搜索的资源的链接。

如果 type 属性设置为 application/opensearchdescription+xml,则该资源是 OpenSearch 插件,可以轻松添加到 Firefox 的界面中。

stylesheet

对于 <link> 元素有效,它导入外部资源用作样式表。type 属性如果为 text/css 样式表则不需要,因为这是默认值。如果不是类型为 text/css 的样式表,最好声明类型。

虽然此属性将链接定义为样式表,但与其他属性以及 rel 值内的其他关键术语的交互会影响是否下载和/或使用样式表。

当与alternate 关键字一起使用时,它定义了一个备用样式表。在这种情况下,请包含一个非空的title

如果媒体与media 属性的值不匹配,则外部样式表将不会被使用甚至下载。

需要使用 CORS 协议进行跨源获取。

tag

适用于<a><area> 元素,它提供了一个标签(由给定的地址标识),该标签应用于当前文档。标签值表示链接指向描述应用于其所在文档的标签的文档。此链接类型不适用于标签云中的标签,因为这些标签应用于一组页面,而rel 属性的tag 值则用于单个文档。

terms-of-service

适用于 <a><area><link> 元素,terms-of-service 值表示引用的文档是服务条款,描述了当前文档提供者与希望使用所提供文档的用户之间的协议。

非标准值

apple-touch-icon

指定 iOS 设备上 Web 应用的图标。

规范

规范
HTML 标准
# linkTypes
HTML 标准
# attr-hyperlink-rel
HTML 标准
# attr-form-rel

浏览器兼容性

html.elements.link.rel

BCD 表格仅在浏览器中加载

html.elements.a.rel

BCD 表格仅在浏览器中加载

html.elements.area.rel

BCD 表格仅在浏览器中加载

html.elements.form.rel

BCD 表格仅在浏览器中加载

另请参阅