达维营-前端网在看Wordpress主题源码的时候，发现这样一行代码：
<link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”http://xzl52199.blog.163.com/blog/<?php bloginfo(‘rss2_url’); ?>” />
大概意思我是了解的，可看到有好几条这样的<link>标签，有好几个不是很清楚。于是搜索了一下这方面的信息定义了。
原来rel只是<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) 显示器样式表
link标签最多的使用就是用来调用外部样式表，例如下面这样:
<link rel=”stylesheet” href=”http://www.zijin5.com/wp-content/ themes/style.CSS” type=”text/css” media=”screen” />
其中href是目标文档的URL， type则规定了目标URL的MIME 类型，而media规定了文档将显示在什么设备上。
2)打印设备样式表
下面这个webdesignerwall的 样式表调用就规定了文档显示在打印设备上时的CSS样式 :
<link rel=”stylesheet” href=”http://www.webdesignerwall.com/ wp-content/themes/wdw/print.css” type=”text/css” media=”print” />
3)可替换样式表
你可能还会在一些网页中看到诸如下面的样式表调用代码:
<link rel=”alertnate stylesheet” href=”http://www.zijin5.com /wp-content/themes/red.css” type=”text/css” media=”screen” />
这段代码定义了一个可替换的样式表，它和第一个link元素同时使用，第一个定义了首选样式，而这个则让用户可选择替换的样式。但这个替换操作需要 浏览器支持，但很多浏览器比如IE都是不支持的。
所以使用到替换样式的网页，一般都用一些样式表切换的JS，让用户可以自由切换界面样式。这个应该大家都见过，一些网站会给网页定义多种配色。 稍高阶的一些，还可以利用 JS弄成随时间变化样式的，比如白天的时候显示成明色，晚上的时候显示成暗色。
定义网站收藏夹图标
<link rel=”shortcut icon” href=”http://www.zijin5.com/ wp-content/themes/images/favicon.ico” type=”images/x-icon”/> <link rel=”icon” href=”http://www.zijin5.com/ wp-content/themes/images/favicon.png” type=”images/png”/>
关于这个调用我自己也还有些迷糊，我实验的结果是:
IE只支持ico格式的favicon;
rel属性必须包含shortcut, 才会在IE下显示;
我在制作透明格式的ico时总出问题，总会出现黑底，就算弄了IE下非黑底了，在Chrome下又变成黑底。
于是，制作一个透明的ico和一个透明的png, 第一段供IE浏览器调用，第二段供其它浏览器调用;
注释: 你也可以不使用这个link元素，而直接制作一个favicon.ico文件，并放到网站根目录。
顺定分享: 为你的网站添加Apple Touch图标
iphone或iPod Touch设备允许用户添加网站的链接到主屏上，使用下面的代码可以为你的网站指定一个Apple Touch图标:
<link rel=”apple-touch-icon” href=”http://www.zijin5.com/ wp-content/themes/images/apple-touch-icon.png” />
对于国内的用户来说，使用iPhone的人还不多，即使很多，会把你网站放到主屏？那恐怕不是我们这些一般的小网站能够做到的。
WordPress中的link元素
1) RSS地址和Pingback地址
下面是WordPress默认主题对RSS2地址，Atom地址和Pingback地址的定义。具体原理俺觉得很深奥很复杂，就不研究了。反正你的 博客需要它，Atom好像不要也可以？
<link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”http://xzl52199.blog.163.com/blog/<?php bloginfo(‘rss2_url’); ?>” /> <link rel=”alternate” type=”application/atom+xml” title=”<?php bloginfo(‘name’); ?> Atom Feed” href=”http://xzl52199.blog.163.com/blog/<?php bloginfo(‘atom_url’); ?>” /> <link rel=”pingback” href=”http://xzl52199.blog.163.com/blog/<?php bloginfo(‘pingback_url’); ?>” />
2) 用于远程发布的link元素
如果你的主题中有<?php wp_head(); ?>这个函数，下面这两个link元素就会出现:
<link rel=”EditURI” type=”application/rsd+xml” title=”RSD” href=”http://localhost/wordpress/xmlrpc.php?rsd” /> <link rel=”wlwmanifest” type=”application/wlwmanifest+xml” href=”http://localhost/wordpress/wp-includes/wlwmanifest.xml” />
这两个元素主要供远程发布使用，比如你使用Windows Live Write等桌面博客编辑器来发布文章。如果你并不需要这个功能，那完全可以把这两个元素删除，删除的方法是，打开你WordPress主题的 functions.php, 在最底部的<?php } ?> 或者 ?> 标签之前，插入下面的代码:
remove_action(‘wp_head’, ‘rsd_link’); remove_action(‘wp_head’, ‘wlwmanifest_link’);
注释: 你可能在想，既然是<?php wp_head(); ?>函数生成了这两个东西，把它删除不就可以了。是的，如果你预计你其它任何插件都不会需要到这个函数，那就删吧。
防止内容重复的canonical属性
谷歌、雅虎和live search在今年2月左右宣布支持Link的一个新属性Canonical，主要作用 是为网页指定权威链，以解决重复内容问题。
关于这个属性的详细介绍请看谷歌中文网站管理员中的指定您的URL范式。
这里主要为WordPress用户推荐两个插件来实现添加此属性到你的head部份: SEO No Duplicate或Canonical URL’s。用哪个随便吧。