<link>: The External Resource Link element

<link> HTML 元素指定当前文档和外部资源之间的关系。该元素最常用于链接到 stylesheets，但也用于建立网站图标（"favicon" 样式图标以及主屏幕和移动设备上的应用的图标）等。

¥The <link> HTML element specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.

Try it

要链接外部样式表，你需要在 <head> 中包含一个 <link> 元素，如下所示：

¥To link an external stylesheet, you'd include a <link> element inside your <head> like this:

html

<link href="main.css" rel="stylesheet" />

这个简单的示例提供了 href 属性和值为 stylesheet 的 rel 属性内样式表的路径。rel 代表 "relationship"，是 <link> 元素的关键特性之一 — 该值表示链接到的项目与包含文档的关系。

¥This simple example provides the path to the stylesheet inside an href attribute, and a rel attribute with a value of stylesheet. The rel stands for "relationship", and is one of the key features of the <link> element — the value denotes how the item being linked to is related to the containing document.

你还会遇到许多其他常见类型。例如，指向网站图标的链接：

¥There are a number of other common types you'll come across. For example, a link to the site's favicon:

html

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

还有许多其他图标 rel 值，主要用于指示在各种移动平台上使用的特殊图标类型，例如：

¥There are a number of other icon rel values, mainly used to indicate special icon types for use on various mobile platforms, e.g.:

html

<link
  rel="apple-touch-icon"
  sizes="114x114"
  href="apple-icon-114.png"
  type="image/png" />

sizes 属性指示图标大小，而 type 包含所链接资源的 MIME 类型。这些提供了有用的提示，允许浏览器选择最合适的可用图标。

¥The sizes attribute indicates the icon size, while the type contains the MIME type of the resource being linked. These provide useful hints to allow the browser to choose the most appropriate icon available.

你还可以在 media 属性内提供媒体类型或查询；仅当媒体条件为真时才会加载该资源。例如：

¥You can also provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is true. For example:

html

<link href="print.css" rel="stylesheet" media="print" />
<link
  href="mobile.css"
  rel="stylesheet"
  media="screen and (max-width: 600px)" />

<link> 元素中还添加了一些有趣的新性能和安全功能。举个例子：

¥Some interesting new performance and security features have been added to the <link> element too. Take this example:

html

<link
  rel="preload"
  href="myFont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous" />

rel 值 preload 指示浏览器应预加载此资源（有关更多详细信息，请参阅 rel="preload"），而 as 属性指示要获取的特定内容类别。crossorigin 属性指示是否应通过 CORS 请求获取资源。

¥A rel value of preload indicates that the browser should preload this resource (see rel="preload" for more details), with the as attribute indicating the specific class of content being fetched. The crossorigin attribute indicates whether the resource should be fetched with a CORS request.

其他使用注意事项：

¥Other usage notes:

<link> 元素可以出现在 <head> 或 <body> 元素中，具体取决于它是否具有 body-ok 的链接类型。例如，stylesheet 链接类型是 body-ok，因此 <link rel="stylesheet"> 在 body 中是允许的。然而，这并不是一个值得遵循的好习惯。将 <link> 元素与正文内容分开并放入 <head> 中更有意义。
当使用 <link> 为网站建立网站图标时，并且你的网站使用内容安全策略 (CSP) 来增强其安全性，该策略将应用于网站图标。如果你遇到图标未加载的问题，请验证 Content-Security-Policy 标头的 img-src 指令是否不会阻止对其进行访问。
HTML 和 XHTML 规范定义了 <link> 元素的事件处理程序，但尚不清楚如何使用它们。
在 XHTML 1.0 下，void elements（例如 <link>）需要尾部斜杠：<link />。
WebTV 支持使用值 next 代表 rel 来预加载文档系列中的下一页。

属性

¥Attributes

该元素包括全局属性。

¥This element includes the global attributes.

as

当在 <link> 元素上设置 rel="preload" 时，此属性是必需的；当设置 rel="modulepreload" 时，此属性是可选的，否则不应使用。它指定 <link> 加载的内容类型，这是请求匹配、应用正确的内容安全政策以及设置正确的 Accept 请求头所必需的。

此外，rel="preload" 将此用作请求优先级的信号。下表列出了该属性的有效值以及它们适用的元素或资源。

值	适用于
audio	`<audio>` elements
document	`<iframe>` and `<frame>` elements
embed	`<embed>` elements
fetch	获取，XHR ¥fetch, XHR Note: This value also requires `<link>` to contain the crossorigin attribute, see CORS-enabled fetches.
font	CSS @font-face Note: This value also requires `<link>` to contain the crossorigin attribute, see CORS-enabled fetches.
image	`<img>` and `<picture>` elements with srcset or imageset attributes, SVG `<image>` elements, CSS `*-image` rules
object	`<object>` elements
script	`<script>` elements, Worker `importScripts`
style	`<link rel=stylesheet>` elements, CSS `@import`
track	`<track>` elements
video	`<video>` elements
worker	工作者、共享工作者

blocking Experimental

此属性明确指示在获取外部资源时应阻止某些操作。它只能在 rel 属性包含 expect 或 stylesheet 关键字时使用。要阻止的操作必须是下面列出的以空格分隔的阻止标记列表。

render：屏幕上内容的呈现被阻止。

crossorigin

该 enumerated 属性指示在获取资源时是否必须使用 CORS。支持 CORS 的镜像可以在 <canvas> 元素中重复使用而不会被污染。允许的值为：

anonymous: 执行跨源请求（即带有 Origin HTTP 标头），但不发送任何凭证（即没有 cookie、X.509 证书或 HTTP 基本身份验证）。如果服务器不向源站点提供凭据（通过不设置 Access-Control-Allow-Origin HTTP 标头），资源将被污染且其使用受到限制。
use-credentials: 跨源请求（即带有 Origin HTTP 标头）与发送的凭证一起执行（即执行 cookie、证书和/或 HTTP 基本身份验证）。如果服务器不向源站点提供凭据（通过 Access-Control-Allow-Credentials HTTP 标头），资源将被污染且其使用受到限制。

如果该属性不存在，则无需 CORS 请求（即不发送 Origin HTTP 标头）即可获取资源，从而防止其不受污染的使用。如果无效，则按照使用枚举关键字 anonymous 的方式进行处理。请参阅 CORS 设置属性了解更多信息。

disabled

仅对于 rel="stylesheet"，disabled 布尔属性指示是否应加载所描述的样式表并将其应用到文档。如果加载时在 HTML 中指定了 disabled，则在页面加载期间不会加载样式表。相反，如果 disabled 属性更改为 false 或删除，样式表将按需加载。

在 DOM 中设置 disabled 属性会导致样式表从文档的 Document.styleSheets 列表中删除。

fetchpriority

提供获取预加载资源时要使用的相对优先级的提示。允许值：

high: 表示相对于相同类型的其他资源的高优先级获取。
low: 表示相对于相同类型的其他资源的低优先级获取。
auto: 默认：表示自动确定相对于相同类型的其他资源的获取优先级。

href

该属性指定链接资源的 URL。URL 可以是绝对的或相对的。

hreflang

该属性指示链接资源的语言。这纯粹是建议性的。允许的值由 RFC 5646: Tags for Identifying Languages (also known as BCP 47) 指定。仅当 href 属性存在时才使用此属性。

imagesizes

仅对于 rel="preload" 和 as="image"，imagesizes 属性是尺寸属性，指示预加载 img 元素使用的适当资源及其 srcset 和 sizes 属性的相应值。

imagesrcset

仅对于 rel="preload" 和 as="image"，imagesrcset 属性是源集属性，指示预加载 img 元素使用的适当资源及其 srcset 和 sizes 属性的相应值。

integrity

包含内联元数据 - 你告诉浏览器获取的资源（文件）的 Base64 编码的加密哈希。浏览器可以使用它来验证所获取的资源是否已交付而没有意外操作。仅当将 rel 属性指定为 stylesheet、preload 或 modulepreload 时，才必须指定该属性。参见子资源完整性。

media

该属性指定链接资源适用的媒体。它的值必须是媒体类型/媒体查询。该属性在链接到外部样式表时主要有用 - 它允许用户代理为其运行的设备选择最适合的样式表。

referrerpolicy

指示获取资源时使用哪个引用者的字符串：

no-referrer 表示不会发送 Referer 标头。
no-referrer-when-downgrade 表示导航到不带 TLS (HTTPS) 的源时不会发送 Referer 标头。如果没有另外指定策略，这是用户代理的默认行为。
origin 表示引用者将是页面的来源，大致是方案、主机和端口。
origin-when-cross-origin 意味着导航到其他源将仅限于方案、主机和端口，而导航到同一源将包括引用者的路径。
unsafe-url 表示引荐来源网址将包括来源和路径（但不包括片段、密码或用户名）。这种情况是不安全的，因为它可能会将受 TLS 保护的资源的来源和路径泄漏到不安全的来源。

rel

该属性命名链接文档与当前文档的关系。该属性必须是空格分隔的链接类型值列表。

sizes

此属性定义资源中包含的视觉媒体的图标大小。仅当 rel 包含 icon 值或非标准类型（例如 Apple 的 apple-touch-icon）时，它才必须存在。它可能具有以下值：

any，意味着图标可以缩放到任意大小，因为它是矢量格式，如 image/svg+xml。
以空格分隔的大小列表，每个大小的格式为 <width in pixels>x<height in pixels> 或 <width in pixels>X<height in pixels>。这些大小中的每一个都必须包含在资源中。

注意：大多数图标格式只能存储一个图标；因此，大多数时候，sizes 属性只包含一个条目。Microsoft 的 ICO 格式和 Apple 的 ICNS 格式可以在一个文件中存储多种图标大小。ICO 具有更好的浏览器支持，因此如果跨浏览器支持是一个问题，则应使用此格式。

¥Note: Most icon formats are only able to store one single icon; therefore, most of the time, the sizes attribute contains only one entry. Microsoft's ICO format and Apple's ICNS format can store multiple icon sizes in a single file. ICO has better browser support, so you should use this format if cross-browser support is a concern.

title

title 属性对 <link> 元素具有特殊语义。当用在 <link rel="stylesheet"> 上时，它定义了默认或备用样式表。

type

该属性用于定义链接到的内容的类型。该属性的值应该是 MIME 类型，例如 text/html、text/css 等。该属性的常见用途是定义所引用的样式表类型（例如 text/css），但考虑到 CSS 是 Web 上使用的唯一样式表语言，不仅可以省略 type 属性，而且实际上现在推荐练习。它还用于 rel="preload" 链接类型，以确保浏览器仅下载其支持的文件类型。

非标准属性

¥Non-standard attributes

target Deprecated: 定义具有定义的链接关系或将显示任何链接资源的呈现的框架或窗口名称。

过时的属性

¥Obsolete attributes

charset Deprecated: 该属性定义链接资源的字符编码。该值是以空格和/或逗号分隔的字符集列表，如 RFC 2045 中所定义。默认值为 iso-8859-1。

注意：要产生与此过时属性相同的效果，请在链接资源上使用 Content-Type HTTP 标头。

¥Note: To produce the same effect as this obsolete attribute, use the Content-Type HTTP header on the linked resource.
rev Deprecated: 该属性的值显示当前文档与链接文档的关系，如 href 属性所定义。因此，与 rel 属性的值相比，该属性定义了相反的关系。属性的链接类型值与 rel 的可能值类似。

注意：你应该使用 rel 属性和相反的链接类型值，而不是 rev。例如，要为 made 建立反向链路，请指定 author。此外，此属性不代表 "revision"，并且不能与版本号一起使用，即使许多站点以这种方式滥用它。

¥Note: Instead of rev, you should use the rel attribute with the opposite link type value. For example, to establish the reverse link for made, specify author. Also, this attribute doesn't stand for "revision" and must not be used with a version number, even though many sites misuse it in this way.

示例

¥Examples

包括样式表

¥Including a stylesheet

要在页面中包含样式表，请使用以下语法：

¥To include a stylesheet in a page, use the following syntax:

html

<link href="style.css" rel="stylesheet" />

提供替代样式表

¥Providing alternative stylesheets

你还可以指定替代样式表。

¥You can also specify alternative style sheets.

用户可以通过从“视图”>“页面样式”菜单中选择要使用的样式表。这为用户提供了一种查看页面的多个版本的方法。

¥The user can choose which style sheet to use by choosing it from the View > Page Style menu. This provides a way for users to see multiple versions of a page.

html

<link href="default.css" rel="stylesheet" title="Default Style" />
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
<link href="basic.css" rel="alternate stylesheet" title="Basic" />

为不同的使用环境提供图标

¥Providing icons for different usage contexts

你可以在同一页面上包含指向多个图标的链接，浏览器将使用 rel 和 sizes 值作为提示来选择最适合其特定上下文的图标。

¥You can include links to several icons on the same page, and the browser will choose which one works best for its particular context using the rel and sizes values as hints.

html

<!-- iPad Pro with high-resolution Retina display: -->
<link
  rel="apple-touch-icon"
  sizes="167x167"
  href="/apple-touch-icon-167x167.png" />
<!-- 3x resolution iPhone: -->
<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="/apple-touch-icon-180x180.png" />
<!-- non-Retina iPad, iPad mini, etc.: -->
<link
  rel="apple-touch-icon"
  sizes="152x152"
  href="/apple-touch-icon-152x152.png" />
<!-- 2x resolution iPhone and other devices: -->
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png" />
<!-- basic favicon -->
<link rel="icon" href="/favicon.ico" />

有关为 Apple 图标选择什么 sizes 的信息，请参阅 Apple 关于配置 Web 应用的文档和引用的 Apple 人机界面指南。通常，提供一个大图片（例如 192x192）就足够了，然后让浏览器根据需要缩小它，但你可能希望为不同尺寸提供不同细节级别的图片，正如 Apple 设计指南所建议的那样。为较低分辨率提供较小的图标也可以节省带宽。

¥For information about what sizes to choose for Apple icons, see Apple's documentation on configuring web applications and the referenced Apple human interface guidelines. Usually, it is sufficient to provide a large image, such as 192x192, and let the browser scale it down as needed, but you may want to provide images with different levels of detail for different sizes, as the Apple design guideline recommends. Providing smaller icons for lower resolutions also saves bandwidth.

可能根本不需要提供 <link> 元素。例如，浏览器会自动从站点的根目录请求 /favicon.ico，Apple 也会自动请求 /apple-touch-icon-[size].png、/apple-touch-icon.png 等。但是，提供显式链接可以保护你免受这些约定更改的影响。

¥It may not be necessary to provide <link> elements at all. For example, browsers automatically request /favicon.ico from the root of a site, and Apple also automatically requests /apple-touch-icon-[size].png, /apple-touch-icon.png, etc. However, providing explicit links protects you against changes to these conventions.

使用媒体查询有条件地加载资源

¥Conditionally loading resources with media queries

你可以在 media 属性内提供媒体类型或查询；仅当媒体条件为真时才会加载该资源。例如：

¥You can provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is true. For example:

html

<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="all" />
<link
  href="desktop.css"
  rel="stylesheet"
  media="screen and (min-width: 600px)" />
<link
  href="highres.css"
  rel="stylesheet"
  media="screen and (min-resolution: 300dpi)" />

样式表加载事件

¥Stylesheet load events

你可以通过观察 load 事件触发来确定样式表何时已加载；同样，你可以通过观察 error 事件来检测处理样式表时是否发生错误：

¥You can determine when a style sheet has been loaded by watching for a load event to fire on it; similarly, you can detect if an error has occurred while processing a style sheet by watching for an error event:

html

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />

<script>
  const stylesheet = document.getElementById("my-stylesheet");

  stylesheet.onload = () => {
    // Do something interesting; the sheet has been loaded
  };

  stylesheet.onerror = () => {
    console.log("An error occurred loading the stylesheet!");
  };
</script>

注意：一旦加载并解析了样式表及其所有导入的内容，并且在样式开始应用于内容之前，就会触发 load 事件。

¥Note: The load event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content.

预加载示例

¥Preload examples

你可以在使用 rel="preload" 预加载内容中找到许多 <link rel="preload"> 的示例。

¥You can find a number of <link rel="preload"> examples in Preloading content with rel="preload".

阻塞渲染直到获取资源

¥Blocking rendering till a resource is fetched

你可以在 blocking 属性中包含 render 令牌；页面的渲染将被阻止，直到资源被获取。例如：

¥You can include render token inside a blocking attribute; the rendering of the page will be blocked till the resource is fetched. For example:

html

<link blocking="render" rel="stylesheet" href="example.css" crossorigin />

技术总结

¥Technical summary

内容类别	元数据内容。如果 `itemprop` 存在：流量内容和措辞内容。
允许的内容	没有任何;这是 void element。
标签遗漏	必须有开始标记，并且不能有结束标记。
允许的父级	任何接受元数据元素的元素。如果 itemprop 存在：任何接受措辞内容的元素。
隐式 ARIA 角色	`link` 具有 `href` 属性
允许的 ARIA 角色	不允许 `role`
DOM 接口	`HTMLLinkElement`

规范

Specification
HTML Standard # the-link-element

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also

Link HTTP 标头
integrity 属性于 150daysofhtml.com (2021)