主頁 > 知識庫 > HTML link標記的rel屬性

HTML link標記的rel屬性

熱門標簽:南寧銷售外呼系統(tǒng)線路商 天津銷售電銷機器人公司 電銷機器人外呼失敗怎么回事 縣域地圖標注點 齊齊哈爾地圖標注地點 400電話座機怎么辦理 400電話申請好不好 邵陽市地圖標注app 吃雞地圖標注設(shè)置

<link>標簽定義了當前文檔與 Web 集合中其他文檔的關(guān)系。link 元素是一個空元素,它僅包含屬性。此元素只能存在于 head 部分,不過它可出現(xiàn)任何次數(shù)。在 HTML 中,<link> 標簽沒有結(jié)束標簽。在 XHTML 中,<link> 標簽必須被正確的關(guān)閉。

除了HTML的標準通用屬性之外,link元素還包括很多可選屬性: charset, href, hreflang, media, rel, rev, target, title和type。這些屬性中,target只允許在Transitional和Frameset兩種DTD中使用,其它都可在Strict, Transitional和Frameset三種DTD中使用。

這些屬性中,rel屬性是核心。本文里面,腳本之家就介紹一些自己知道的rel屬性,以及在WordPress中對一些link元素的處理,適合新手朋友學習。

1. 調(diào)用外部樣式表

(1). 顯示器樣式表

link標簽最多的使用就是用來調(diào)用外部樣式表,例如下面這樣:

<link rel="stylesheet" href="http://paranimage.com/wp-content/themes/v5/style.css" type="text/css" media="screen" />

其中href是目標文檔的URL, type則規(guī)定了目標URL的MIME類型,而media規(guī)定了文檔將顯示在什么設(shè)備上。

(2). 打印設(shè)備樣式表

下面這個webdesignerwall的樣式表調(diào)用就規(guī)定了文檔顯示在打印設(shè)備上時的CSS樣式 :

<link rel="stylesheet" href="http://www.webdesignerwall.com/wp-content/themes/wdw/print.css" type="text/css" media="print" />

(3). 可替換樣式表

你可能還會在一些網(wǎng)頁中看到諸如下面的樣式表調(diào)用代碼:

<link rel="alertnate stylesheet" href="http://paranimage.com/wp-content/themes/v5/red.css" type="text/css" media="screen" />

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

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

注釋: 為首選樣式指定media=”all”,再添加一個打印樣式,會比較符合Web標準(盡管對于普通網(wǎng)站來說,不會有幾個人想要打印你的網(wǎng)頁)。帕蘭映像就沒有定義打印樣式,稍后抽時間搞搞

注釋: 是否使用可替換樣式是個值得斟酌的問題。如果僅改變配色,整體主調(diào)還是不變,那可以接受。但有一些朋友,比如WordPress用戶,會啟用多個完全不同風格的主題,再利用插件讓用戶自由變換。這看上去似乎挺酷的,但我的建議是千萬別這么做。是否影響SEO且不談,但會讓人對你的網(wǎng)站缺乏一種固定形象的認知感。

2. 定義網(wǎng)站收藏夾圖標

關(guān)于favicon/收藏夾圖標的詳細介紹可以查看百度百科(1, 2),使用下面的代碼調(diào)用即可。

<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"/>

關(guān)于這個調(diào)用我自己也還有些迷糊,我實驗的結(jié)果是:

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

注釋: 你也可以不使用這個link元素,而直接制作一個favicon.ico文件,并放到網(wǎng)站根目錄。

順定分享: 為你的網(wǎng)站添加Apple Touch圖標

iPhone或iPod Touch設(shè)備允許用戶添加網(wǎng)站的鏈接到主屏上,使用下面的代碼可以為你的網(wǎng)站指定一個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。

對于國內(nèi)的用戶來說,使用iPhone的人還不多,即使很多,會把你網(wǎng)站放到主屏?那恐怕不是我們這些一般的小網(wǎng)站能夠做到的。不過好玩嘛,我還是為我的網(wǎng)站制作了一個并添加了這個link元素。

3. WordPress中的link元素

(1). RSS地址和Pingback地址

下面是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'); ?>" />

(2). 用于遠程發(fā)布的link元素

如果你的主題中有<?php wp_head(); ?>這個函數(shù),下面這兩個link元素就會出現(xiàn):

<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" />

這兩個元素主要供遠程發(fā)布使用,比如你使用Windows Live Write等桌面博客編輯器來發(fā)布文章。如果你并不需要這個功能,那完全可以把這兩個元素刪除,刪除的方法是,打開你WordPress主題的functions.php, 在最底部的<?php } ?> 或者 ?> 標簽之前,插入下面的代碼:

remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');

注釋: 你可能在想,既然是<?php wp_head(); ?>函數(shù)生成了這兩個東西,把它刪除不就可以了。是的,如果你預計你其它任何插件都不會需要到這個函數(shù),那就刪吧。

4. 防止重復內(nèi)容的canonical屬性

谷歌、雅虎和live search在今年2月左右宣布支持Link的一個新屬性Canonical,主要作用是為網(wǎng)頁指定權(quán)威鏈,以解決重復內(nèi)容問題。

關(guān)于這個屬性的詳細介紹請看谷歌中文網(wǎng)站管理員中的指定您的URL范式。

這里主要為WordPress用戶推薦兩個插件來實現(xiàn)添加此屬性到你的head部份: SEO No DuplicateCanonical URL’s。用哪個隨便吧。

說了是全解析,其實僅僅是說一些常用的,對大多數(shù)人來說都已經(jīng)足夠了,如果你還知道其它比較重要和常用的rel屬性,也歡迎分享出來。

標簽:衡水 濟寧 寧波 ???/a> 延安 寧夏 日照 贛州

巨人網(wǎng)絡(luò)通訊聲明:本文標題《HTML link標記的rel屬性》,本文關(guān)鍵詞  HTML,link,標,記的,rel,屬性,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTML link標記的rel屬性》相關(guān)的同類信息!
  • 本頁收集關(guān)于HTML link標記的rel屬性的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章