link
HTML中<link>
元素指定了外部资源与当前文档的关系. 这个元素的使用方法包括为导航定义关系框架.这个元素经常用来链接css文件。属性允许的值可在链接类型找到。
内容类别 |
Metadata content。如果使用了 |
---|---|
允许的内容 | 没有,这是一个空的元素。 |
标记省略 | 由于它是空白元素,所以开始标记必须存在,并且结束标记不能出现 |
允许父级 | 任何接受元数据元素的元素。如果存在itemprop,则是任何接受phrasing content的元素。 |
允许ARIA角色 | 没有 |
DOM界面 | HTMLLinkElement |
属性
这个元素包含全局属性。
使用注意: 该属性已废弃并不能再被使用. 要达到同样的效果, 在被链接资源的 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
包含行内元数据, 它是一个你用浏览器获取的资源文件的哈希值,以base64编码的方式加的密,这样用户能用它来验证一个获取到的资源,在传送时未被非法篡改, 详情查看Subresource Integrity
media
这个属性指定了连接资源提供的媒体类型。它的值一定得是一个媒体查询。这个属性在允许浏览器为设备选择最合适的连接样式表时比较有作用。
使用注意:
- 浏览器不支持 CSS3 媒体查询的话将不会很影响它识别(使用link的媒体查询的)合适的连接,不要忘了设置回退link属性(原文是fallback links),即那些定义在HTML4中的媒体查询中的有限的属性。
methods
此属性的值提供了有关可能在对象上执行的功能的信息。这些值通常由HTTP协议在使用时给出,但它可能(出于类似于title属性的原因)在链接中预先包含有用的咨询信息。例如,浏览器可以根据指定的方法选择不同的链接呈现方式; 可搜索的东西可能会得到不同的图标,或者外部链接可能会呈现离开当前网站的指示。即使通过定义的浏览器Internet Explorer 4,也不能很好地理解和支持此属性。请参阅方法属性(MSDN)。
prefetch
此属性标识下一个导航可能需要的资源,并且用户代理应检索该资源。这使得用户代理将来在请求资源时可以更快地响应。
referrerpolicy
一个字符串,指示在获取资源时使用哪个引用者:
'no-referrer'
这意味着Referer
头部不会被发送。
'no-referrer-when-downgrade'
意味着在没有TLS (HTTPS)的情况下导航到一个源时不会发送任何引用头。如果没有指定任何策略,这是用户代理的默认行为。
'origin'
这意味着引用者将成为页面的来源,即大致的 scheme,主机和端口。
'origin-when-cross-origin'
这意味着导航到的其他来源将被限制在协议,主机和端口,而同一来源的导航将包括引用路径。
'unsafe-url'
这意味着引用者将包括来源和路径(但不包括片段,密码或用户名)。这种情况是不安全的,因为它可以将来自TLS保护的资源的起点和路径泄漏到不安全的起点。
用法说明:该属性在HTML5中已过时。不要使用它。要达到它的效果,请使用rel
具有相反链接类型值的属性,例如made
应该被替换为author
。此外,这个属性并不意味着修订版本,也不能与版本号一起使用,(不幸的是很多网页都是这么做的)
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
。
例子
包括一个样式表
要在页面中包含样式表,请使用以下语法:
<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) |
本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com