W3C HTML5标准阅读笔记 – link元素

标准原文:http://www.w3.org/TR/html5/document-metadata.html#the-link-element

在HTML文档中,link元素作为元数据元素,可放置在head标签内用于定义当前文档与其它资源的关系。使用link标签时无需将标签闭合。

除了通用的全局属性,link元素还可以拥有以下特有属性:

rel

rel属性定义当前文档与link元素所链接的其它资源之间的关系类型。比较常用的rel值有icon和stylesheet等。这一属性是必需的,且其值必须从标准的几个关键词中选。在定义rel属性值时,也可以同时使用多个关键词,关键词之间用空格隔开即可 -- 这样做可以用一个link元素来创建多个链接。比如,以下代码用一个link元素创建了2个链接,第一个链接将当前文档的作者信息链接到/about,第二个链接则将当前文档的许可证信息链接到/about:

<link rel="author license" href="/about">  

rel属性所定义的链接类型分为2大类:

  1. icon、stylesheet等对外部资源的引用。
  2. next、prev等对其它URL的超链接。

如果link元素所链接的是外部资源(rel值为icon或stylesheet等),则浏览器一般会在对当前文档的渲染显示过程中使用这些资源;如果link元素所链接的是URL超链接(rel值为next、prev、author等),则标准规定浏览器可以在软件UI上添加一些控件从而让用户能使用这些超链接。但在经过一些小实验之后,我发现目前的浏览器对此完全没有任何支持。倒是Google的搜索引擎在处理HTML文档的时候,会参考这些在link元素中定义的URL关系。

值得注意的是,在link元素中定义的URL超链接关系影响的是整个文档,而不仅仅是这个定义所在的link元素。

href

href属性定义link元素所链接的其它资源的地址。link元素的href属性是必需的,如果href属性缺失或者其值为空,则该link无效。

crossorigin

如果link元素所链接的是对外部资源的引用,且这一外部资源存在跨域的情况,则可以通过使用crossorigin属性来设置CORS跨域请求过程中的参数。如果crossorigin值为“anonymous”,则相应的CORS请求会忽略用户名密码等调取凭证信息;如果crossorigin值为“use-credentials”,则相应的CORS会要求用户名密码等信息;如果crossorigin值为空字符串或者别的什么值,则其效果与“anonymous”相同。

media

media属性定义在何种文档访问环境下,link元素所链接的其它资源是有效的。media属性的值必须是合法的media query值。如果link元素所链接的是URL超链接,则这种media限定仅仅只是建议性的,对浏览器行为不具强制性;但如果link元素所链接的是外部资源,则这种media限定是强制的。比如,以下代码限定当在屏幕上查阅文档时使用s.css样式表,而在打印机中打印文档时则使用p.css样式表:

<link rel="stylesheet" href="s.css" media="screen">  
<link rel="stylesheet" href="p.css" media="print">  

如果media属性缺失,则其默认值为“all”,意为在所有的访问环境下均有效。

type

type属性定义所链接的其它资源的文件类型(MIME Type)。浏览器首先检查type值,如果type值缺失则浏览器会从rel值推算出该外部资源的MIME Type(如rel值为stylesheet时,对应的MIME Type为text/css);如果浏览器并不支持这个MIME Type,则该链接会被放弃 -- 这一点比较好理解,如果某个资源浏览器无法识别,那么也就无需再去加载了。当浏览器加载外部资源后,浏览器会检测从服务器端返回过来的该外部资源的MIME Type,并将此服务端MIME Type与先前浏览器所要求的MIME Type进行对比,如果不一致则以服务器端所返回的MIME Type为准。如果服务器端没有返回MIME Type,或者返回的MIME Type值非法,则此时浏览器会使用该资源,并认为其MIME Type就是发送请求获取资源前所要求的那个MIME Type。以下面的代码为例,如果浏览器仅支持text/css的MIME Type,则浏览器只会加载B和C,而不会加载A。与此同时,对于B和C,只有当其Response中的MIME Type为text/css,或者Response MIME Type缺失/非法的情况下,才能生效;如果B的Response MIME Type值为text/plain,则B不生效。

<link rel="stylesheet" href="A" type="text/plain">  
<link rel="stylesheet" href="B" type="text/css">  
<link rel="stylesheet" href="C">  

hreflang

hreflang属性定义所链接的其它资源的自然语言。

sizes

当rel值为icon时,sizes属性定义文档图标的尺寸,该属性仅在rel值为icon时才合法;其用法为sizes="16x16"或者sizes="32x48"等。

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!