HTML link標記的rel屬性_HTML/Xhtml_網頁製作

標籤定義了目前文件與 Web 集合中其他文件的關係。 link 元素是一個空元素，它只包含屬性。此元素只能存在於 head 部分，不過它可出現任何次數。在 HTML 中， 標籤沒有結束標籤。在 XHTML 中， 標籤必須被正確的關閉。

除了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標籤最多的使用就是用來呼叫外部樣式表，例如下面這樣:

<code><span class="start-tag">link</span><span class="attribute-name"> <span style="COLOR: #ff9900">rel</span></span><span style="COLOR: #ff9900">=</span><span class="attribute-value"><span style="COLOR: #ff9900">"stylesheet"</span> </span><span class="attribute-name">href</span>=<font face="Arial"><span class="attribute-value">"http://paranimage.com/wp-content/themes/v5/style.css" </span><span class="attribute-name">type</span></font>=<font face="Arial"><span class="attribute-value">"text/css" </span><span class="attribute-name">media</span></font>=<font face="Arial"><span class="attribute-value">"screen" </span><span class="error"><span class="attribute-name">/</span></span></font>></code>

其中href是目標文件的URL， type則規定了目標URL的MIME類型，而media規定了文件將顯示在什麼設備上。

(2). 列印設備樣式表

下面這個webdesignerwall的樣式表呼叫就規定了文件顯示在列印設備上時的CSS樣式 :

<code><span class="start-tag">link</span><span class="attribute-name"> <span style="COLOR: #ff9900">rel</span></span><span style="COLOR: #ff9900">=</span><span class="attribute-value"><span style="COLOR: #ff9900">"stylesheet"</span> </span><span class="attribute-name">href</span>=<font face="Arial"><span class="attribute-value">"http://www.webdesignerwall.com/wp-content/themes/wdw/print.css" </span><span class="attribute-name">type</span></font>=<font face="Arial"><span class="attribute-value">"text/css" </span><span style="COLOR: #ff9900"><span class="attribute-name">media</span>=</span><span class="attribute-value"><span style="COLOR: #ff9900">"print"</span> </span><span class="error"><span class="attribute-name">/</span></span></font>></code>

(3). 可替換樣式表

你可能也會在一些網頁中看到諸如下面的樣式表呼叫程式碼:

<code><span class="start-tag">link</span><span class="attribute-name"> <span style="COLOR: #ff9900">rel</span></span><span style="COLOR: #ff9900">=</span><span class="attribute-value"><span style="COLOR: #ff9900">"alertnate stylesheet"</span> </span><span class="attribute-name">href</span>=<font face="Arial"><span class="attribute-value">"http://paranimage.com/wp-content/themes/v5/red.css" </span><span class="attribute-name">type</span></font>=<font face="Arial"><span class="attribute-value">"text/css" </span><span class="attribute-name">media</span></font>=<font face="Arial"><span class="attribute-value">"screen" </span><span class="error"><span class="attribute-name">/</span></span></font>></code>

這段程式碼定義了一個可替換的樣式表，它和第一個link元素同時使用，第一個定義了首選樣式，而這個則讓使用者可選擇替換的樣式。但這個替換操作需要瀏覽器支持，但很多瀏覽器例如IE都是不支援的。

所以使用到替換樣式的網頁，通常會用一些樣式表切換的JS，讓使用者可以自由切換介面樣式。這個應該大家都看過，有些網站會為網頁定義多種配色。 WordPress使用者有興趣的話，可以下載Small Potato的WPDesigner7這款WordPress主題試用研究一下(或查看DEMO)，它利用一個簡單的JS和多個可替換樣式，讓使用者可對網頁改變配色。稍高階的一些，還可以利用JS弄成隨時間變化樣式的，例如白天的時候顯示成明色，晚上的時候顯示成暗色。

註釋: 為首選樣式指定media=”all”，再添加一個打印樣式，會比較符合Web標準(儘管對於普通網站來說，不會有幾個人想要打印你的網頁)。帕蘭映像就沒有定義列印樣式，稍後再抽空搞

註解: 是否使用可替換樣式是個值得斟酌的問題。如果只改變配色，整體主調還是不變，那可以接受。但有一些朋友，像是WordPress用戶，會啟用多個完全不同風格的主題，再利用外掛讓用戶自由變換。這看起來似乎挺酷的，但我的建議是千萬別這麼做。是否影響SEO且不談，但會讓人對你的網站缺乏一種固定形象的認知感。

2. 定義網站收藏圖示

關於favicon/收藏夾圖示的詳細介紹可以查看百度百科(1, 2)，使用下面的程式碼呼叫即可。

<code><span class="start-tag">link</span><span class="attribute-name"> <span style="COLOR: #ff9900">rel</span></span><span style="COLOR: #ff9900">=</span><span class="attribute-value"><span style="COLOR: #ff9900">"shortcut icon"</span> </span><span class="attribute-name">href</span>=<font face="Arial"><span class="attribute-value">"http://paranimage.com/wp-content/themes/v5/images/favicon.ico" </span><span class="attribute-name">type</span></font>=<font face="Arial"><span class="attribute-value">"images/x-icon"</span><span class="error"><span class="attribute-name">/</span></span></font>>
<span class="start-tag">link</span><span class="attribute-name"> <span style="COLOR: #ff9900">rel</span></span><span style="COLOR: #ff9900">=</span><span class="attribute-value"><span style="COLOR: #ff9900">"icon"</span> </span><span class="attribute-name">href</span>=<font face="Arial"><span class="attribute-value">"http://paranimage.com/wp-content/themes/v5/images/favicon.png" </span><span class="attribute-name">type</span></font>=<font face="Arial"><span class="attribute-value">"images/png"</span><span class="error"><span class="attribute-name">/</span></span></font>></code>

關於這個呼叫我自己也還有些迷糊，我實驗的結果是:

• IE只支援ico格式的favicon;
• rel屬性必須包含shortcut, 才會在IE下顯示;
• 我在製作透明格式的ico時總出問題，總是會出現黑底，就算弄了IE下非黑底了，在Chrome下又變成黑底。
• 於是，製作一個透明的ico和一個透明的png, 第一段供IE瀏覽器調用，第二段供其它瀏覽器調用;

註解: 你也可以不使用這個link元素，而直接製作一個favicon.ico文件，並放到網站根目錄。

順定分享: 為你的網站加入Apple Touch圖示

iPhone或iPod Touch裝置允許使用者新增網站的連結到主畫面上，使用下面的程式碼可以為你的網站指定一個Apple Touch圖示:

<code><span class="start-tag">link</span><span class="attribute-name"> <span style="COLOR: #ff9900">rel</span></span><span style="COLOR: #ff9900">=</span><span class="attribute-value"><span style="COLOR: #ff9900">"apple-touch-icon"</span> </span><span class="attribute-name">href</span>=<font face="Arial"><span class="attribute-value">"http://paranimage.com/wp-content/themes/v5/images/apple-touch-icon.png" </span><span class="error"><span class="attribute-name">/</span></span></font>></code>

該圖示的尺寸是57*57的PNG格式，如果不是，會自動縮放，而且如果我沒搞錯的話，不一定要弄成iPhone風格那種漂亮的圓角，iPhone會自動按它的風格把圖示弄成圓角漸層的，例如last.fm的apple touch icon。

对于国内的用户来说，使用iPhone的人还不多，即使很多，会把你网站放到主屏？那恐怕不是我们这些一般的小网站能够做到的。不过好玩嘛，我还是为我的网站制作了一个并添加了这个link元素。

3. WordPress中的link元素

(1). RSS地址和Pingback地址

下面是WordPress默认主题对RSS2地址，Atom地址和Pingback地址的定义。具体原理俺觉得很深奥很复杂，就不研究了。反正你的博客需要它，Atom好像不要也可以？

<code><link style="COLOR: #ff9900">
<font face="Arial">rel="alternate" type="application/rss+xml"</font> title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link style="COLOR: #ff9900">
<font face="Arial">rel="alternate" type="application/atom+xml"</font> title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link>
<font face="Arial">rel="pingback"</font> href="<?php bloginfo('pingback_url'); ?>" /></code>

(2). 用于远程发布的link元素

如果你的主题中有这个函数，下面这两个link元素就会出现:

<code><span class="start-tag">link</span><span class="attribute-name"> <span style="COLOR: #ff9900">rel</span></span><span style="COLOR: #ff9900">=</span><span class="attribute-value"><span style="COLOR: #ff9900">"EditURI"</span> </span><span class="attribute-name">type</span>=<font face="Arial"><span class="attribute-value">"application/rsd+xml" </span><span class="attribute-name">title</span></font>=<font face="Arial"><span class="attribute-value">"RSD" </span><span class="attribute-name">href</span></font>=<font face="Arial"><span class="attribute-value">"http://localhost/wordpress/xmlrpc.php?rsd" </span><span class="error"><span class="attribute-name">/</span></span></font>>
<span class="start-tag">link</span><span class="attribute-name"> <span style="COLOR: #ff9900">rel</span></span><span style="COLOR: #ff9900">=</span><span class="attribute-value"><span style="COLOR: #ff9900">"wlwmanifest"</span> </span><span class="attribute-name">type</span>=<font face="Arial"><span class="attribute-value">"application/wlwmanifest+xml" </span><span class="attribute-name">href</span></font>=<font face="Arial"><span class="attribute-value">"http://localhost/wordpress/wp-includes/wlwmanifest.xml" </span><span class="error"><span class="attribute-name">/</span></span></font>></code>

这两个元素主要供远程发布使用，比如你使用Windows Live Write等桌面博客编辑器来发布文章。如果你并不需要这个功能，那完全可以把这两个元素删除，删除的方法是，打开你WordPress主题的functions.php, 在最底部的 或者 ?> 标签之前，插入下面的代码:

<code>remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');</code>

注释: 你可能在想，既然是函数生成了这两个东西，把它删除不就可以了。是的，如果你预计你其它任何插件都不会需要到这个函数，那就删吧。

4. 防止重复内容的canonical属性

谷歌、雅虎和live search在今年2月左右宣布支持Link的一个新属性Canonical，主要作用是为网页指定权威链，以解决重复内容问题。

关于这个属性的详细介绍请看谷歌中文网站管理员中的指定您的URL范式。

这里主要为WordPress用户推荐两个插件来实现添加此属性到你的head部份: SEO No Duplicate或Canonical URL’s。用哪个随便吧。

说了是全解析，其实仅仅是说一些常用的，对大多数人来说都已经足够了，如果你还知道其它比较重要和常用的rel属性，也欢迎分享出来。