 |
VOOZH | about |
|
VOOZH | about |
開發php語言的網站，<head>里link標籤這樣：<linkhref="xmlrpc.php?rsd=1"title="rsd"type="application/rsd+xml"rel="edituri">，本文主要探究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標籤最多的使用就是用來調用外部樣式表，例如下面這樣:
<linkrel="stylesheet"href="http://paranimage.com/wp-content/themes/v5/style.css"type="text/css"media="screen"/
其中href是目標文檔的URL，type則規定了目標URL的MIME類型，而media規定了文檔將顯示在什麼設備上。
下面這個webdesignerwall的樣式表調用就規定了文檔顯示在列印設備上時的CSS樣式 :
<"http://www.webdesignerwall.com/wp-content/themes/wdw/print.css"type="text/css"media="print"/
你可能還會在一些網頁中看到諸如下面的樣式表調用代碼:
<linkrel="alertnate
stylesheet"href="http://paranimage.com/wp-content/themes/v5/red.css"type="text/css"media="screen"/
這段代碼定義了一個可替換的樣式表，它和第一個link元素同時使用，第一個定義了首選樣式，而這個則讓用戶可選擇替換的樣式。但這個替換操作需要瀏覽器支持，但很多瀏覽器比如IE都是不支持的。
所以使用到替換樣式的網頁，一般都用一些樣式表切換的JS，讓用戶可以自由切換界面樣式。這個應該大家都見過，一些網站會給網頁定義多種配色。WordPress用戶有興趣的話，可以下載Small Potato的WPDesigner7這款WordPress主題試用研究一下(或查看DEMO)，它利用一個簡單的JS和多個可替換樣式，讓用戶可對網頁改變配色。稍高階的一些，還可以利用JS弄成隨時間變化樣式的，比如白天的時候顯示成明色，晚上的時候顯示成暗色。
注釋: 為首選樣式指定media=」all」，再添加一個列印樣式，會比較符合Web標準(儘管對於普通網站來說，不會有幾個人想要列印你的網頁)。帕蘭映像就沒有定義列印樣式，稍後抽時間搞搞
注釋: 是否使用可替換樣式是個值得斟酌的問題。如果僅改變配色，整體主調還是不變，那可以接受。但有一些朋友，比如WordPress用戶，會啟用多個完全不同風格的主題，再利用插件讓用戶自由變換。這看上去似乎挺酷的，但我的建議是千萬別這麼做。是否影響SEO且不談，但會讓人對你的網站缺乏一種固定形象的認知感。
2. 定義網站收藏夾圖標關於favicon/收藏夾圖標的詳細介紹可以查看百度百科(12)，使用下面的代碼調用即可。
<linkrel="shortcut
icon"href="http://paranimage.com/wp-content/themes/v5/images/favicon.ico"type="images/x-icon"/>
<linkrel="icon"href="http://paranimage.com/wp-content/themes/v5/images/favicon.png"type="images/png"/
關於這個調用我自己也還有些迷糊，我實驗的結果是:
注釋: 你也可以不使用這個link元素，而直接製作一個favicon.ico文件，並放到網站根目錄。
iPhone或iPod Touch設備允許用戶添加網站的連結到主屏上，使用下面的代碼可以為你的網站指定一個Apple Touch圖標:
<linkrel="apple-touch-icon"href="http://paranimage.com/wp-content/themes/v5/images/apple-touch-icon.png"/
該圖標的尺寸是57*57的PNG格式，如果不是，會自動縮放，且如果我沒搞錯的話，不一定要弄成iPhone風格那種漂亮的圓角，iPhone會自動按它的風格把圖標弄成圓角漸變的，比如last.fm的apple touch icon。
對於國內的用戶來說，使用iPhone的人還不多，即使很多，會把你網站放到主屏？那恐怕不是我們這些一般的小網站能夠做到的。不過好玩嘛，我還是為我的網站製作了一個並添加了這個link元素。
3. WordPress中的link元素下面是WordPress默認主題對RSS2地址，Atom地址和Pingback地址的定義。具體原理俺覺得很深奧很複雜，就不研究了。反正你的博客需要它，Atom好像不要也可以？
<linkrel="alternate" type="application/rss+xml"title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <linkrel="alternate"
type="application/atom+xml"title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<linkrel="pingback"href="<?php bloginfo('pingback_url'); ?>" />
如果你的主題中有<?php wp_head; ?>這個函數，下面這兩個link元素就會出現:
<linkrel="EditURI"type="application/rsd+xml"title="RSD"href="http://localhost/wordpress/xmlrpc.php?rsd"/>
<linkrel="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; ?>函數生成了這兩個東西，把它刪除不就可以了。是的，如果你預計你其它任何插件都不會需要到這個函數，那就刪吧。
4. 防止重複內容的canonical屬性谷歌、雅虎和live search在今年2月左右宣布支持Link的一個新屬性Canonical，主要作用是為網頁指定權威鏈，以解決重複內容問題。
關於這個屬性的詳細介紹請看谷歌中文網站管理員中的指定您的URL範式。
這裡主要為WordPress用戶推薦兩個插件來實現添加此屬性到你的head部份:SEO No Duplicate或Canonical URL’s。用哪個隨便吧。