翻译正在进行中。

HTML <link>元素规定了外部资源与当前文档的关系。 这个元素可用来为导航定义一个关系框架。这个元素最常于链接样式表

内容类型 元数据。如果使用了 itemprop 属性, 则为 flow content 和 phrasing content.
允许的元素内容 无,这是一个空元素
标签省略 鉴于这是一个空元素,开始标签必须存在,结束标签必须不存在。
允许的父元素 任何可以接受元数据的元素.。如果使用了 itemprop属性,,则其父元素可以是任何可接受 phrasing content 的元素。
DOM接口 HTMLLinkElement

属性

这个元素可以使用 全局属性.

as
该属性仅在<link>元素设置了 rel="preload" 时才能使用。它规定了<link>元素加载的内容的类型,对于内容的优先级、请求匹配、正确的内容安全策略的选择以及正确的 Accept请求头的设置,这个属性是必需的。
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
包含行内元数据,它是一个你用浏览器获取的资源文件的哈希值,以base64编码的方式加的密,这样用户能用它来验证一个获取到的资源,在传送时未被非法篡改,详情查看Subresource Integrity
media
这个属性规定了外部资源适用的媒体类型。它的值必须是"媒体查询"。这个属性使得用户代理能选择最适合设备运行的媒体类型。
使用注意:
  • 在HTML 4中,该属性只能是一组以空白符作为分隔的媒体描述文字,比如"媒体类型"规定了该元素可取的属性,如print、screen、aural、braille。HTML5将该属性值扩展为任意类型的"媒体查询","媒体查询"将HTML4的属性值都包括在内。
  • 不支持"CSS3 媒体查询"的浏览器并不会强行识别这些链接,因此忘了设置备用link,即那些可用于HTML4的link。
methods
该属性的值提供了可能发生在一个对象上的函数的信息。在使用过程中这些值通常由HTTP协议给定,但是它(出于某些和title属性相同的原因)也可用于提前在link中提供查询信息。例如,浏览器可能会根据"methods"中指定的函数选择不同的方式渲染link;某些可搜索的属性可能会得到一个不同的图标,抑或外部链接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。

已淘汰的属性

charset
该属性规定了外部文件字符编码方式。The value is a space- and/or comma-delimited list of character sets as defined in RFC 2045. 默认值为iso-8859-1。

使用说明:该属性已淘汰且禁止使用。要实现相同效果,可在外链资源中使用Content-Type HTTP header。

rev
这个属性的值显示了当前的文档对于设置 href 属性值的链接的文档的关系。这个属性因此定义了相比于rel属性相反的关系。 链接类型的值 与rel有相同的一些值。shows the relationship of the current document to the linked document, as defined by the href attribute. The attribute thus defines the reverse relationship compared to the value of the rel attribute. Link types values for the attribute are similar to the possible values for rel.

使用说明:该属性已被淘汰。请不要使用这个属性。要实现相同效果,可以使用 rel 属性 with the opposite link types values, e.g. made should be replaced by author. Also this attribute doesn't mean revision and must not be used with a version number, which is unfortunately the case on numerous sites.

注意:在W3C HTML 5.2标准中 rev 不再是"已淘汰属性",然而WHATWG标准仍然把它标记为"已淘汰"。在这点差异被消除之前,你仍应把 rev 属性看作"已淘汰"的。

例子

引入一个css文件

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

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

提供可替换的样式表

你也可以指定"可替换的外部样式表"。

用户可以在浏览器菜单 "查看>页面样式" 来选择网页的样式。通过这一办法,可以用多种样式浏览网页。

<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()">
注意: 当样式表以及它引用的部分全部加载完毕,load事件就会在样式表应用到内容之前立即触发。

 

预加载例子

你可以在Preloading content with rel="preload"找到<link rel="preload">的详细例子。

 

注意

 

 

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

标准规范

Specification Status Comment
Preload Candidate Recommendation Defines <link rel="preload">, and the asattribute.
Subresource Integrity
<script>
Recommendation Added the integrityattribute.
HTML Living Standard
<link>
Living Standard No changes from latest snapshot
HTML5
<link>
Recommendation Added crossorigin and sizes attributes; extended values of media to any media queries; added numerous new values for rel.
HTML 4.01 Specification
<link>
Recommendation  
Resource Hints
prefetch
Working Draft Added dns-prefetchpreconnectprefetch, and prerender.
 

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes1 Yes Yes Yes
charset1 Yes1 Yes Yes Yes
crossorigin25 No18 No15 ?
disabled No Yes No Yes No No
href1 Yes1 Yes Yes Yes
hreflang1 Yes1 Yes Yes Yes
integrity45 No ? No ? No
media1 Yes1 Yes Yes Yes
methods No ? No4 No No
prefetch56 ? ? No43 ?
referrerpolicy58 No50 ? ? ?
rel1 Yes1 Yes Yes Yes
rel: Alternative stylesheets. ? ?3 ? Yes ?
rel.dns-prefetch46 ?3 ? ? ?
rel.manifest No ? ? ? ? ?
rel.modulepreload66 ? ? ?53 ?
rel.noopener49 No52 No3610.1
rel.preconnect46 No391 No ? No
rel.prefetch ? ? ? ? ? ?
rel.preload50 ?56 — 572 ? ? ?
rel.prerender ? ? ? ? ? ?
rev1 Yes1 Yes Yes Yes
sizes No No No3 No No No
target1 Yes1 Yes Yes Yes
title1 Yes1 Yes Yes Yes
type1 Yes1 Yes Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes4 Yes Yes Yes
charset Yes Yes Yes4 Yes Yes Yes
crossorigin ? Yes No18 ? ? Yes
disabled No No Yes No No No No
href Yes Yes Yes4 Yes Yes Yes
hreflang Yes Yes Yes4 Yes Yes Yes
integrity4545 No ? ? No5.0
media Yes Yes Yes4 Yes Yes Yes
methods No No ? No No No No
prefetch5656 ? ?43 ?6.0
referrerpolicy5858 No50 ? ?7.0
rel Yes Yes Yes4 Yes Yes Yes
rel: Alternative stylesheets. ? ? ?4 ? ? ?
rel.dns-prefetch46 Yes ?4 ? ? Yes
rel.manifest3939.09 ? ? ? ?4.0
rel.modulepreload6666 ? ?53 ? ?
rel.noopener4949 No523210.35.0
rel.preconnect4642 No391 ? No4.0
rel.prefetch ? ? ? ? ? ? ?
rel.preload5050 ?56 — 572 ? ?5.0
rel.prerender ? ? ? ? ? ? ?
rev Yes Yes Yes4 Yes Yes Yes
sizes No No No No3 No No No
target Yes Yes Yes4 Yes Yes Yes
title Yes Yes Yes4 Yes Yes Yes
type Yes Yes Yes4 Yes Yes Yes

1. Before Firefox 41, it doesn't obey the crossorigin attribute.

2. Disabled due to various web compatibility issues (e.g. bug 1405761). An improved version that works for non-cacheable resources is expected to land soon.

3. See bug 441770.

 

请参阅

文档标签和贡献者

最后编辑者: zhangqiangoffice,