<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

This attribute specifies the media which the linked resource applies to. Its value must be a media query. This attribute is mainly useful when linking to external stylesheets by allowing the user agent to pick the best adapted one for the device it runs on.

Usage note:

• In HTML 4, this can only be a simple white-space-separated list of media description literals, i.e., media types and groups, where defined and allowed as values for this attribute, such as print, screen, aural, braille. HTML5 extended this to any kind of media queries, which are a superset of the allowed values of HTML 4.
• Browsers not supporting the CSS3 Media Queries won't necessarily recognize the adequate link; do not forget to set fallback links, the restricted set of media queries defined in HTML 4.

methods

The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the title attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; 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).

rel

This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of the link types values. The most common use of this attribute is to specify a link to an external style sheet: the rel attribute is set to stylesheet, and the href attribute is set to the URL of an external style sheet to format the page. WebTV also supports the use of the value next for rel to preload the next page in a document series.

rev

The value of this attribute 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.

Usage note: This attribute is obsolete in HTML5. Do not use it. To achieve its effect, use the rel attribute 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.

sizes

This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the rel contains the icon link types value. It may have the following values:

• any, meaning that the icon can be scaled to any size as it is in a vectorial format, like image/svg+xml.
• a white-space separated list of sizes, each in the format <width in pixels>x<height in pixels> or <width in pixels>X<height in pixels>. Each of these sizes must be contained in the resource.

Usage note:

• Most icon format are only able to store one single icon; therefore most of the time the sizes contains only one entry. MS's ICO format does, as well as Apple's ICNS. ICO being more ubiquitous, you should use it.
• Apple's iOS does not support this attribute, hence Apple's iPhone and iPad use special, non-standard link types values to define icon to be used as Web Clip or start-up placeholder: apple-touch-icon and 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

This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as text/html, text/css, and so on. The common use of this attribute is to define the type of style sheet linked and the most common current value is text/css, which indicates a Cascading Style Sheet format.

例子

引入一个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">

Stylesheet load events

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:

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

Notes

• A <link> tag can occur only in the head element; however, there can be multiple occurrences of <link>.
• HTML 3.2 defines only the href, rel, rev, and title attributes for the link element.
• HTML 2 defines the href, methods, rel, rev, title, and urn attributes for the <link> element. The methods and urn attributes were later removed from the specifications.
• The HTML and XHTML specifications define event handlers for the <link> element, but it is unclear how they would be used.
• Under XHTML 1.0, empty elements such as <link> require a trailing slash: <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