<link>

HTML 中<link>元素指定了外部资源与当前文档的关系. 这个元素的使用方法包括为导航定义关系框架.这个元素经常用来链接css文件。

属性

这个元素包含 全局属性.

charset

该属性定义了被链接资源的字符编码. 其取值参见 RFC 2045, 并以空格和/或逗号分隔. 默认值为 iso-8859-1.

使用注意: 该属性已废弃并不能再被使用. 要达到同样的效果, 在被链接资源的 HTTP 头中设置相应的 Content-Type.

crossorigin

该枚举属性指定在加载相关图片时是否必须使用 CORS. 启用 CORS 的图片 可以在 <canvas> 元素中使用, 并避免其被污染. 可取的值如下:

"anonymous"

会发起一个跨域请求(即包含 Origin: HTTP 头). 但不会发送任何认证信息 (即不发送 cookie, X.509 证书和 HTTP 基本认证信息). 如果服务器没有给出源站凭证 (不设置 Access-Control-Allow-Origin: HTTP 头), 这张图片就会被污染并限制使用.

"use-credentials"

会发起一个带有认证信息 (发送 cookie, X.509 证书和 HTTP 基本认证信息) 的跨域请求 (即包含 Origin: HTTP 头). 如果服务器没有给出源站凭证 (不设置 Access-Control-Allow-Origin: HTTP 头), 这张图片就会被污染并限制使用.

当不设置该属性时, 资源将会不使用 CORS 加载 (即不发送 Origin: HTTP 头), 这将阻止其在 <canvas> 元素中进行使用. 若设置了非法的值, 则视为使用 anonymous. 前往 CORS settings attributes 获取更多信息.

disabled

该属性被用于禁用链接关系. 配合脚本使用, 该属性可以用来启用或禁用多个样式表链接.

使用注意: 虽然在 HTML 标准中没有 disabled 属性, 但在 HTMLLinkElement DOM 对象中确实存在 disabled 属性.

使用 disabled 作为 HTML 属性是非标准的, 并且只有部分浏览器使用 (W3 #27677). 不要使用. 要达到类似的效果, 可以选用以下方法:

• 如果 disabled 属性已经直接加入到页面元素中, 可以改为不引入这个 <link> 元素;
• 通过脚本为该样式表 DOM 对象设置 disabled 属性.

href

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

hreflang

该属性指明了被链接资源的语言. 其意义仅供参考. 可取的值参见 BCP47. 仅当设置了 href 属性时才应设置该属性.

integrity

Contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. See Subresource Integrity.

media

这个属性指定了连接资源提供的媒体类型。它的值一定得是一个媒体查询。这个属性在允许浏览器为设备选择最合适的连接样式表时比较有作用。

使用注意：

• 在HTML 4中，它只能是一些由空白符分开的媒体描述文字, i.e., 媒体类型，定义以及允许这些值作为它的属性，例如print， screen， aural， braille。HTML5扩展了它的属性值，使其有任何类型的媒体查询, HTML5扩展了它在HTML4中允许的属性值。
• 浏览器不支持 CSS3 媒体查询的话将不会很影响它识别（使用link的媒体查询的）合适的连接，不要忘了设置回退link属性（原文是fallback links），即那些定义在HTML4中的媒体查询中的有限的属性。

methods

这个属性的值提供了将会发生在一个对象上的函数的信息。这些值通常由在使用时由HTTP协议给定，但是它也可能（和title属性相同的原因）有用当提前在link中包含查询信息。例如，浏览器可能会选择一个不同的翻译（？没明白意思）something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4. See Methods Property (MSDN).

prefetch

This attribute identifies a resource that might be required by the next navigation and that the user agent should retrieve it. This allows the user agent to respond faster when the resource is requested in the future.

referrerpolicy

A string indicating which referrer to use when fetching the resource:

• 'no-referrer' meaning that the Referer header will not be sent.
• 'no-referrer-when-downgrade' meaning that no Referer header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.
• 'origin' meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.
• 'origin-when-cross-origin' meaning that navigating to other origins will be limited to the scheme, the host and the port, while navigating on the same origin will include the referrer's path. 
• 'unsafe-url' meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.

rel

这个属性表明了链接的文档对于当前文档的关系。这个属性一定得是一个由空格分开的链接类型值的列表. 这个属性最通常的用法是指向一个连接到外部样式表的链接：将rel的值设置为stylesheet，href属性设置为外部样式表的URL来构造网页。网络电视还支持使用下一个rel的值在一系列页面中预加载下一个页面。

rev

这个属性的值显示了当前的文档对于设置href 属性值的链接的文档的关系。这个属性因此定义了相比于rel属性相反的关系。 链接类型的值 与rel有相同的一些值。

使用注意： 这个属性在HTML5中被废弃，请不要使用它。 为了达到和它相同的效果，使用相反的link types valuesrel 属性，例如，使用mader来替换author。同样这个属性并不意味着调整，并且禁止使用版本编号 （不幸的是很多网页都是这么做的）。

sizes

这个属性定义了包含相应资源的可视化媒体中的icons的大小。它只有在rel包含icon的link类型值。它可能有如下的规则。

• any，意味着这个icon能够被缩放到任意尺寸当它是矢量形式，比如image/svg+xml。
• 一个由空白符分隔的尺寸列表。每一个都以<width in pixels>x<height in pixels> 或 <width in pixels>X<height in pixels>给出。尺寸列表中的每一个尺寸都必须包含在资源里。

用法注意：

• 大多数的icon格式只能存储一个icon。因此绝大多数使用 sizes时只包含一个值。微软的ICO格式和苹果的ICNS格式都是这样，ICO使用得更加广泛，推荐你使用它。
• 苹果的IOS系统并不支持这个属性，于是苹果的IPhone以及IPad使用特殊的、非标准的 link类型值去定义作为Web Clip或开始占位符：apple-touch-icon 和 apple-touch-startup-icon。

target

Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.

type

这个属性被用于定义链接的内容的类型。这个属性的值应该是像text/html，text/css等MIME类型。这个属性常用的用法是定义链接的样式表，最常用的值是表明了CSS的text/css。

例子

引入一个css文件

用下面的语法来引入一个css文件

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

提供可替换的css文件

你可以指定 可替换的外部样式表.

用户可以在浏览器菜单 查看>页面样式 来选择网页的样式. 用户可以通过这种方式来查看网页的不同样式.

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

样式表加载事件

你能够通过监听发生在样式表上的事件知道什么时候样式表加载完毕。同样的，你能够通过监听error事件检测到是否在加载样式表的过程中出现错误。

<script>
function sheetLoaded() {
  // Do something interesting; the sheet has been loaded
}
function sheetError() {
  alert("An error occurred loading the stylesheet!");
}
</script>
<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()">

•  <link> 标签只能出现在head元素中，然而可以出现多个<link>标签。
• HTML 3.2只为link元素定义了href, methods, rel，rev，title，和urn属性。
• HTML 2为link标签定义了 href, methods，rel，rev，title，和 urn 属性，methods 和 urn随后从规范中移除。
• HTML和XHTML规范为link定义了事件处理，但是并不清楚它们将会怎样被使用。
• 在XHTML 1.0中，空元素link要求有尾随斜线，像这样<link />。

Specifications

Browser compatibility

[1] WebKit bug 148363 tracks WebKit implementation of Subresource Integrity (which includes the integrity attribute).

See also

• Ryan Grove's <script> and <link> node event compatibility chart