1. Web
  2. HTML
  3. 参考
  4. 属性
  5. rel

HTML 属性：rel

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

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

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

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

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

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

值

交替

表示当前文档的替代表示。对于 <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" />

  • 否则，它会创建一个超链接，引用当前文档的替代表示，其性质由 hreflang 和 type 属性给出。

    • 如果 hreflang 与 alternate 一起给出，并且 hreflang 的值与当前文档的语言不同，则表示被引用文档是翻译。
    • 如果 type 与 alternate 一起给出，则表示被引用文档是另一种格式（例如 PDF）。
    • hreflang 和 type 属性可以同时与 alternate 一起给出。
    html
    <link
  rel="alternate"
  href="/en-US/html/print"
  hreflang="fr"
  type="text/html"
  media="print"
  title="French HTML (for printing)" />
<link
  rel="alternate"
  href="/en-US/pdf"
  hreflang="fr"
  type="application/pdf"
  title="French PDF" />
author

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

对于 <a> 和 <area>，它表示链接文档（或 mailto:）提供了有关最近的 <article> 祖先（如果存在）的作者信息，否则是整个文档。

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

注意：出于历史原因，已废弃的属性值 rev="made" 被视为 rel="author"。

bookmark

作为 <a> 和 <area> 元素的 rel 属性值相关。如果存在最近的祖先 <article> 元素，则提供其永久链接。如果没有祖先 <article> 元素，则提供链接元素最密切相关的章节的永久链接。

canonical

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

compression-dictionary

对于 <link> 有效，它定义了一个压缩字典，可用于压缩此网站上资源的未来下载，从而使这些资源的下载大小小于标准压缩。

dns-prefetch

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

external

与 <form>、<a> 和 <area> 相关，它表示被引用文档不属于当前站点。这可以与属性选择器一起使用，以样式化外部链接，从而向用户表明他们将离开当前站点。

expect

允许页面渲染阻塞，直到文档的基本部分被解析，以便一致地渲染。请注意，渲染阻塞仅在补充了 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">，浏览器会根据它们的 media、type 和 sizes 属性选择最合适的图标。如果几个图标同样合适，则使用最后一个。如果后来发现最合适的图标不合适，例如因为它使用了不支持的格式，浏览器会继续选择下一个最合适的图标，依此类推。

注意：基于 Chromium 的浏览器不支持 rel="icon" 的 crossorigin 属性。参见开放的 Chromium 问题。

注意：苹果的 iOS 不使用此链接类型，也不使用 sizes 属性（不像其他移动浏览器那样），来为 Web Clip 或启动占位符选择网页图标。相反，它分别使用非标准的 apple-touch-icon 和 apple-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

如果超链接原本会创建非辅助浏览上下文的顶级浏览上下文（即 target 属性值为 "_blank"），则创建一个辅助浏览上下文。实际上，与 noopener 相反。

pingback

给出处理当前文档的 pingback 服务器地址。参见 Pingback 规范。

preconnect

向浏览器提供提示，建议其预先打开与链接网站的连接，而不披露任何私人信息或下载任何内容，以便在跟踪链接时更快地获取链接内容。

prefetch

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

preload

指定用户代理必须根据 as 属性给出的潜在目的地（以及与相应目的地相关的优先级）预先获取并缓存当前导航的目标资源。参见 preload 值页面。

prerender

指定用户代理应预先获取目标资源并以有助于未来更快响应的方式进行处理，例如通过获取其子资源或执行一些渲染。此功能已被 Speculation Rules API 取代。

prev

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

注意：同义词 previous 是不正确的，不应使用。

privacy-policy

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

与 <form>、<link>、<a> 和 <area> 元素相关，search 关键词表示超链接引用了一个界面专门用于搜索当前文档、站点和相关资源的文档，提供了可用于搜索的资源的链接。

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

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

html.elements.a.rel

html.elements.area.rel

html.elements.form.rel

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者 于 修改。

在 GitHub 上查看此页面 • 报告此内容的问题