©
本文檔使用 php中文網手册 發布
HTML中<link>元素指定了外部资源与当前文档的关系. 这个元素的使用方法包括为导航定义关系框架.这个元素经常用来链接css文件。属性允许的值可在链接类型找到。
内容类别 | Metadata content。如果使用了 |
|---|---|
允许的内容 | 没有，这是一个空的元素。 |
标记省略 | 由于它是空白元素，所以开始标记必须存在，并且结束标记不能出现 |
允许父级 | 任何接受元数据元素的元素。如果存在itemprop，则是任何接受phrasing content的元素。 |
允许ARIA角色 | 没有 |
DOM界面 | HTMLLinkElement |
属性
这个元素包含全局属性。
as
这个属性仅在<link>元素设置了 rel="preload" 时才能使用。它指定了由<link>加载的内容的类型，这对于内容优先化，请求匹配，应用正确的内容安全策略以及设置正确的{{ httpheader（“Accept”） }}请求头是必需的。
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属性, 但在HTMLLinkElementDOM 对象中确实存在 disabled 属性.
使用 disabled 作为 HTML 属性是非标准的, 并且只有部分浏览器使用 (W3 #27677).
不要使用它. 要达到类似的效果, 可以选用以下方法:
如果
disabled属性已经直接加入到页面元素中, 可以改为不引入这个<link>元素;
通过脚本为该
样式表DOM 对象设置disabled属性.
href该属性指定被链接资源的URL. URL 可以是绝对的或相对的.
hreflang该属性指明了被链接资源的语言. 其意义仅供参考. 可取的值参见 BCP47. 仅当设置了href属性时才应设置该属性.
integrity包含行内元数据, 它是一个你用浏览器获取的资源文件的哈希值,以base64编码的方式加的密,这样用户能用它来验证一个获取到的资源,在传送时未被非法篡改, 详情查看Subresource Integrity
media这个属性指定了连接资源提供的媒体类型。它的值一定得是一个媒体查询。这个属性在允许浏览器为设备选择最合适的连接样式表时比较有作用。
使用注意：
在HTML 4中，它只能是一些由空白符分开的媒体描述文字, i.e., 媒体类型，定义以及允许这些值作为它的属性，例如print， screen， aural， braille。HTML5扩展了它的属性值，使其有任何类型的媒体查询, HTML5扩展了它在HTML4中允许的属性值。
浏览器不支持 CSS3 媒体查询的话将不会很影响它识别（使用link的媒体查询的）合适的连接，不要忘了设置回退link属性（原文是fallback links），即那些定义在HTML4中的媒体查询中的有限的属性。
methods此属性的值提供了有关可能在对象上执行的功能的信息。这些值通常由HTTP协议在使用时给出，但它可能（出于类似于title属性的原因）在链接中预先包含有用的咨询信息。例如，浏览器可以根据指定的方法选择不同的链接呈现方式; 可搜索的东西可能会得到不同的图标，或者外部链接可能会呈现离开当前网站的指示。即使通过定义的浏览器Internet Explorer 4，也不能很好地理解和支持此属性。
prefetch此属性标识下一个导航可能需要的资源，并且用户代理应检索该资源。这使得用户代理将来在请求资源时可以更快地响应。
referrerpolicy一个字符串，指示在获取资源时使用哪个引用者：
'no-referrer'这意味着Referer头部不会被发送。
'no-referrer-when-downgrade'意味着在没有TLS (HTTPS)的情况下导航到一个源时不会发送任何引用头。如果没有指定任何策略，这是用户代理的默认行为。
'origin'这意味着引用者将成为页面的来源，即大致的 scheme，主机和端口。
'origin-when-cross-origin'这意味着导航到的其他来源将被限制在协议，主机和端口，而同一来源的导航将包括引用路径。
'unsafe-url'这意味着引用者将包括来源和路径（但不包括片段，密码或用户名）。这种情况是不安全的，因为它可以将来自TLS保护的资源的起点和路径泄漏到不安全的起点。
rel
该属性命名链接文档与当前文档的关系。该属性必须是空格分隔的链接类型值列表。此属性最常用的用途是指定一个指向外部样式表的链接：将rel属性设置为stylesheet，并将href属性设置为外部样式表的URL来格式化页面。
网络电视还支持使用rel的值next预加载下一个页面的文件系列。rev此属性的值显示当前文档与链接文档的关系，如href属性所定义。
因此，这个属性因此定义了相比于rel属性相反的关系。 链接类型的值 与rel有相似的一些值。
用法说明：该属性在HTML5中已过时。不要使用它。要达到它的效果，请使用rel具有相反链接类型值的属性，例如made应该被替换为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>给出。尺寸列表中的每一个尺寸都必须包含在资源里。
使用说明：
大多数图标格式只能存储一个图标; 因此大部分时间
sizes只包含一个条目。MS的ICO格式，以及苹果的ICNS。ICO更无处不在，你应该使用它。
苹果的iOS不支持此属性，因此苹果的iPhone和iPad上使用特殊的，非标准的链接类型值来定义图标将被用作网络剪辑或启动占位符：
apple-touch-icon和apple-touch-startup-icon。
target定义具有已定义链接关系的框架或窗口名称，或将显示任何链接资源的呈现。
title
该title属性在<link>元素上有特殊的语义。当用于<link rel="stylesheet">它时，它定义了一个首选或另一个样式表。错误地使用它可能会导致样式表被忽略。
type该属性用于定义链接到的内容的类型。该属性的值应该是MIME类型，如text / html，text / css等等。此属性的常用用法是定义链接的样式表的类型，最常见的当前值是text / css，它表示层叠样式表格式。它也用于rel="preload"链接类型，以确保浏览器只下载它支持的文件类型。
例子
包括一个样式表
要在页面中包含样式表，请使用以下语法：
<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">
样式表加载事件
你可以通过观察一个load事件来确定样式表何时被加载; 同样，您可以通过观察error事件来处理样式表时检测是否发生错误：
<script>function sheetLoaded() { // Do something interesting; the sheet has been loaded}function sheetError() {
console.log("An error occurred loading the stylesheet!");}</script><link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()"
onerror="sheetError()">注：该load事件触发一次样式表和它的所有导入的内容已经被加载和分析，并立即开始被应用到内容的样式之前。
预加载示例
您可以在rel =“preload”中预加载内容中找到一些<link rel =“preload”>示例。
注意
<link>标签可以出现无论是在头部元件或所述主体元件（或两者），这取决于它是否有是body-ok的链路类型。例如，stylesheet链接类型是正文，因此<link rel="stylesheet">在主体中被允许。
HTML 3.2仅为链接元素定义了href，rel，rev和title属性。
HTML 2 为元素定义了href，methods，rel，rev，title和urn属性
<link>。该方法和瓮属性后来从规范中删除。
HTML和XHTML规范定义了
<link>元素的事件处理程序，但不清楚如何使用它们。
在XHTML 1.0下，空的元素，例如
<link>需要一个斜线：<link />。
规范
Specification | Status | Comment |
|---|---|---|
Preload | Working Draft | Defines <link rel="preload">, and the as attribute. |
Subresource IntegrityThe definition of '<script>' in that specification. | Recommendation | Added the integrity attribute. |
HTML Living StandardThe definition of '<link>' in that specification. | Living Standard | No changes from latest snapshot |
HTML5The definition of '<link>' in that specification. | Recommendation | Added crossorigin and sizes attributes; extended values of media to any media queries; added numerous new values for rel. |
HTML 4.01 SpecificationThe definition of '<link>' in that specification. | Recommendation | |
Resource HintsThe definition of 'prefetch' in that specification. | Working Draft | Added dns-prefetch, preconnect, prefetch, and prerender. |
浏览器兼容性
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic Support | 1.0 | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
charset | 1.0 | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
crossorigin | 25.0 | No | 18.0 | No | 15.0 | ? |
disabled | No | (Yes) | No | (Yes) | No | No |
href | 1.0 | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
hreflang | 1.0 | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
integrity | 45.0 | No | ? | No | ? | No |
media | 1.0 | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
methods | No | ? | No | 4.0 | No | No |
prefetch | 56.0 | ? | ? | No | 43.0 | ? |
referrerpolicy | 58.0 | No | 50.0 | ? | ? | ? |
rel | 1.0 | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
rev | 1.0 | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
sizes | No | No | No1 | No | No | No |
target | 1.0 | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
title | 1.0 | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
type | 1.0 | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
Basic Support | (Yes) | (Yes) | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
charset | (Yes) | (Yes) | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
crossorigin | ? | (Yes) | No | 18.0 | No | ? | ? |
disabled | No | No | (Yes) | No | ? | No | No |
href | (Yes) | (Yes) | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
hreflang | (Yes) | (Yes) | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
integrity | 45.0 | 45.0 | No | ? | No | ? | No |
media | (Yes) | (Yes) | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
methods | No | No | ? | No | 4.0 | No | No |
prefetch | 56.0 | 56.0 | ? | ? | No | 43.0 | ? |
referrerpolicy | 58.0 | 58.0 | No | 50.0 | ? | ? | ? |
rel | (Yes) | (Yes) | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
rev | (Yes) | (Yes) | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
sizes | No | No | No | No1 | No | No | No |
target | (Yes) | (Yes) | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
title | (Yes) | (Yes) | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |
type | (Yes) | (Yes) | (Yes) | 1.0 | (Yes) | (Yes) | (Yes) |