除了html的標准通用屬性之外,link元素還包括很多可選屬性: charset, href, hreflang, media, rel, rev, target, title和type 。這些屬性中,target只允許在transitional和frameset兩種dtd中使用,其它都可在strict, transitional和frameset三種dtd中使用。
這些屬性中,rel屬性是核心。本文裡面,網頁設計就介紹一些自己知道的rel屬性,以及在wordpress中對一些link元素的處理,適合新手朋友學習。
link標籤最多的使用就是用來調用外部樣式表,例如下面這樣:
<link rel=stylesheet href=http://paranimage.com/wp-content/themes/v5/style.css type=text/css media=screen />其中href是目標文檔的url, type則規定了目標url的mime類型,而media規定了文檔將顯示在什麼設備上。
下面這個webdesignerwall的樣式表調用就規定了文檔顯示在打印設備上時的css樣式:
<link rel=stylesheet href=http://www.webdesignerwall.com/wp-content/themes/wdw/print.css type=text/css media=print />你可能還會在一些網頁中看到諸如下面的樣式表調用代碼:
<link rel=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且不談,但會讓人對你的網站缺乏一種固定形象的認知感。關於favicon/收藏夾圖標的詳細介紹可以查看百度百科(1, 2),使用下面的代碼調用即可。
<link rel=shortcut icon href=http://paranimage.com/wp-content/themes/v5/images/favicon.ico type=images/x-icon/><link rel=icon href=http://paranimage.com/wp-content/themes/v5/images/favicon.png type=images/png/>關於這個調用我自己也還有些迷糊,我實驗的結果是:
iphone或ipod touch設備允許用戶添加網站的鏈接到主屏上,使用下面的代碼可以為你的網站指定一個apple touch圖標:
<link rel=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元素。
下面是wordpress默認主題對rss2地址,atom地址和pingback地址的定義。具體原理俺覺得很深奧很複雜,就不研究了。反正你的博客需要它,atom好像不要也可以?
<link rel=alternate type=application/rss+xml title=<?php bloginfo('name'); ?> rss feed href=<?php bloginfo('rss2_url'); ?> /><link rel=alternate type=application/atom+xml title=<?php bloginfo('name'); ?> atom feed href=<?php bloginfo('atom_url'); ?> /><link rel=pingback href=<?php bloginfo('pingback_url'); ?> />如果你的主題中有<?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(); ?>函數生成了這兩個東西,把它刪除不就可以了。是的,如果你預計你其它任何插件都不會需要到這個函數,那就刪吧。谷歌、雅虎和live search在今年2月左右宣布支持link的一個新屬性canonical ,主要作用是為網頁指定權威鏈,以解決重複內容問題。
關於這個屬性的詳細介紹請看谷歌中文網站管理員中的指定您的url範式。
這裡主要為wordpress用戶推薦兩個插件來實現添加此屬性到你的head部份: seo no duplicate或canonical url 's。用哪個隨便吧。
說了是全解析,其實僅僅是說一些常用的,對大多數人來說都已經足夠了,如果你還知道其它比較重要和常用的rel屬性,也歡迎分享出來。