<link>标签定义了当前文档与 Web 集合中其他文档的关系。link 元素是一个空元素,它仅包含属性。此元素只能存在于 head 部分,不过它可出现任何次数。
在 html 中,<link> 标签没有结束标签。在 XHTML 中,<link> 标签必须被正确的关闭。 除了HTML的标准通用属性之外,link元素还包括很多可选属性: charset, href, hreflang, media, rel, rev, target, title和type。这些属性中,target只允许在Transitional和Frameset两种DTD中使用,其它都可在Strict, Transitional和Frameset三种DTD中使用。 这些属性中,rel属性是核心。
本文将介绍一些自己知道的rel属性,以及在wordpress中对一些link元素的处理,适合新手朋友学习。
1. 调用外部样式表
(1). 显示器样式表。 link标签最多的使用就是用来调用外部样式表,例如下面这样:
1: <link rel="stylesheet" href="style.CSS" type="text/css" media="screen" />
其中href是目标文档的URL, type则规定了目标URL的MIME类型,而media规定了文档将显示在什么设备上。
(2). 打印设备样式表。 下面这个webdesignerwall的样式表调用就规定了文档显示在打印设备上时的CSS样式 :
1: <link rel="stylesheet" href="print.css" type="text/css" media="print" />
(3). 可替换样式表。你可能还会在一些网页中看到诸如下面的样式表调用代码:
1: <link rel="alertnate stylesheet" href="red.css" type="text/css" media="screen" />
这段代码定义了一个可替换的样式表,它和第一个link元素同时使用,第一个定义了首选样式,而这个则让用户可选择替换的样式。但这个替换操作需要浏览器支持,但很多浏览器比如IE都是不支持的。 所以使用到替换样式的网页,一般都用一些样式表切换的JS,让用户可以自由切换界面样式。这个应该大家都见过,一些网站会给网页定义多种配色。 WordPress用户有兴趣的话,可以下载Small Potato的WPDesigner7这款wordpress主题试用研究一下,它利用一个简单的JS和多个可替换样式,让用户可对网页改变配色。稍高阶的一些,还可以利用JS弄成随时间变化样式的,比如白天的时候显示成明色,晚上的时候显示成暗色。
注释: 为首选样式指定media=”all”,再添加一个打印样式,会比较符合Web标准(尽管对于普通网站来说,不会有几个人想要打印你的网页)。
注释: 是否使用可替换样式是个值得斟酌的问题。如果仅改变配色,整体主调还是不变,那可以接受。但有一些朋友,比如WordPress用户,会启用多个完全不同风格的主题,再利用插件让用户自由变换。这看上去似乎挺酷的,但我的建议是千万别这么做。是否影响seo且不谈,但会让人对你的网站缺乏一种固定形象的认知感。
2. 定义网站收藏夹图标
关于favicon收藏夹图标的详细介绍可以查看百度百科,使用下面的代码调用即可。
1: <link rel="shortcut icon" href="favicon.ico" type="images/x-icon" />
2: <link rel="icon" href="favicon.png" type="images/png" />
关于这个调用我自己也还有些迷糊,我实验的结果是: IE只支持ico格式的favicon; rel属性必须包含shortcut, 才会在IE下显示; 我在制作透明格式的ico时总出问题,总会出现黑底,就算弄了IE下非黑底了,在Chrome下又变成黑底。于是,制作一个透明的ico和一个透明的png, 第一段供IE浏览器调用,第二段供其它浏览器调用;
注释: 你也可以不使用这个link元素,而直接制作一个favicon.ico文件,并放到网站根目录。 顺便分享: 为你的网站添加Apple Touch图标 iphone或iPad设备允许用户添加网站的链接到主屏上,使用下面的代码可以为你的网站指定一个Apple Touch图标:
1: <link rel="apple-touch-icon" href="ipad_72_72.png" />
该图标的尺寸是5757~7272不等的PNG格式,如果不是,会自动缩放,而且一定不要弄成iPhone/iPad风格那种漂亮的圆角,iPhone/iPad会自动按它的风格把图标弄成圆角渐变的。
3. WordPress中的link元素
(1). RSS地址和Pingback地址。下面是WordPress默认主题对RSS2地址,Atom地址和Pingback地址的定义。
1: <link rel="alternate" type="application/rss+xml" title="&lt;?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
2: <link rel="alternate" type="application/atom+xml" title="&lt;?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
3: <link rel="pingback" href="&lt;?php bloginfo('pingback_url'); ?>" />
(2). 用于远程发布的link元素 如果你的主题中有<?php wp_head(); ?>这个函数,下面这两个link元素就会出现:
1: <link rel="EditURI" type="application/rsd+xml" title="RSD" href="xmlrpc.php?rsd" />
2: <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="wlwmanifest.xml" />
这两个元素主要供远程发布使用,比如你使用Windows Live Write等桌面博客编辑器来发布文章。如果你并不需要这个功能,那完全可以把这两个元素删除,删除的方法是,打开你WordPress主题的functions.php, 在最底部的<?php } ?> 或者 ?> 标签之前,插入下面的代码:
1: remove_action('wp_head', 'rsd_link');
2: remove_action('wp_head', 'wlwmanifest_link');
注释: 你可能在想,既然是<?php wp_head(); ?>函数生成了这两个东西,把它删除不就可以了。是的,如果你预计你其它任何插件都不会需要到这个函数,那就删吧。
4. 防止重复内容的canonical属性
Canonical属性主要作用是为网页指定权威链,以解决重复内容问题。例如本页面中就含有:
1: <link rel="canonical" href="http://javier.sinaapp.com/link-attr/" />
关于这个属性的详细介绍请看谷歌中文网站管理员中的指定您的URL范式。
5. link的可选属性
DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.
| 属性 | 值 | 描述 | DTD |
|---|---|---|---|
| charset | _charset_ | 定义被链接文档的字符编码方式。 | STF |
| href | _URL_ | 定义被链接文档的位置。 | STF |
| hreflang | _language_code_ | 定义被链接文档中文本的语言。 | STF |
| media |
|
规定被链接文档将显示在什么设备上。 | STF |
| rel |
|
定义当前文档与被链接文档之间的关系。 | STF |
| rev |
|
定义被链接文档与当前文档之间的关系。 | STF |
| target |
|
定义在何处加载被链接文档。 | TF |
| type | _MIME_type_ | 规定被链接文档的 MIME 类型。 | STF |