HTML教程-link標(biāo)記的rel屬性

2020-03-24 18:16:19

字體：大中小

供稿：網(wǎng)友

link 標(biāo)簽定義了當(dāng)前文檔與 Web 集合中其他文檔的關(guān)系。link 元素是一個(gè)空元素，它僅包含屬性。此元素只能存在于 head 部分，不過(guò)它可出現(xiàn)任何次數(shù)。在 HTML 中， link 標(biāo)簽沒(méi)有結(jié)束標(biāo)簽。在 XHTML 中， link 標(biāo)簽必須被正確的關(guān)閉。除了HTML的標(biāo)準(zhǔn)通用屬性之外，link元素還包括很多可選屬性: charset, href, hreflang, media, rel, rev, target, title和type。這些屬性中，target只允許在Transitional和Frameset兩種DTD中使用，其它都可在Strict, Transitional和Frameset三種DTD中使用。這些屬性中，rel屬性是核心。本文里面，網(wǎng)頁(yè)教學(xué)網(wǎng)就介紹一些自己知道的rel屬性，以及在WordPress中對(duì)一些link元素的處理，適合新手朋友學(xué)習(xí)。1. 調(diào)用外部樣式表(1). 顯示器樣式表link標(biāo)簽最多的使用就是用來(lái)調(diào)用外部樣式表，例如下面這樣: link rel= stylesheet href= http://paranimage.com/wp-content/themes/v5/style.css type= text/css media= screen / 其中href是目標(biāo)文檔的URL， type則規(guī)定了目標(biāo)URL的MIME類(lèi)型，而media規(guī)定了文檔將顯示在什么設(shè)備上。(2). 打印設(shè)備樣式表下面這個(gè)webdesignerwall的樣式表調(diào)用就規(guī)定了文檔顯示在打印設(shè)備上時(shí)的CSSyangshi_10628_1.html' target='_blank'>CSS樣式 : link rel= stylesheet href= http://www.webdesignerwall.com/wp-content/themes/wdw/print.css type= text/css media= print / (3). 可替換樣式表你可能還會(huì)在一些網(wǎng)頁(yè)中看到諸如下面的樣式表調(diào)用代碼: link rel= alertnate stylesheet href= http://paranimage.com/wp-content/themes/v5/red.css type= text/css media= screen / 這段代碼定義了一個(gè)可替換的樣式表，它和第一個(gè)link元素同時(shí)使用，第一個(gè)定義了首選樣式，而這個(gè)則讓用戶(hù)可選擇替換的樣式。但這個(gè)替換操作需要瀏覽器支持，但很多瀏覽器比如IE都是不支持的。所以使用到替換樣式的網(wǎng)頁(yè)，一般都用一些樣式表切換的JS，讓用戶(hù)可以自由切換界面樣式。這個(gè)應(yīng)該大家都見(jiàn)過(guò)，一些網(wǎng)站會(huì)給網(wǎng)頁(yè)定義多種配色。WordPress用戶(hù)有興趣的話(huà)，可以下載Small Potato的WPDesigner7這款WordPress主題試用研究一下(或查看DEMO)，它利用一個(gè)簡(jiǎn)單的JS和多個(gè)可替換樣式，讓用戶(hù)可對(duì)網(wǎng)頁(yè)改變配色。稍高階的一些，還可以利用JS弄成隨時(shí)間變化樣式的，比如白天的時(shí)候顯示成明色，晚上的時(shí)候顯示成暗色。注釋: 為首選樣式指定media= all ，再添加一個(gè)打印樣式，會(huì)比較符合Web標(biāo)準(zhǔn)(盡管對(duì)于普通網(wǎng)站來(lái)說(shuō)，不會(huì)有幾個(gè)人想要打印你的網(wǎng)頁(yè))。帕蘭映像就沒(méi)有定義打印樣式，稍后抽時(shí)間搞搞注釋: 是否使用可替換樣式是個(gè)值得斟酌的問(wèn)題。如果僅改變配色，整體主調(diào)還是不變，那可以接受。但有一些朋友，比如WordPress用戶(hù)，會(huì)啟用多個(gè)完全不同風(fēng)格的主題，再利用插件讓用戶(hù)自由變換。這看上去似乎挺酷的，但我的建議是千萬(wàn)別這么做。是否影響SEO且不談，但會(huì)讓人對(duì)你的網(wǎng)站缺乏一種固定形象的認(rèn)知感。2. 定義網(wǎng)站收藏夾圖標(biāo)關(guān)于favicon/收藏夾圖標(biāo)的詳細(xì)介紹可以查看百度百科(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)于這個(gè)調(diào)用我自己也還有些迷糊，我實(shí)驗(yàn)的結(jié)果是: IE只支持ico格式的favicon; rel屬性必須包含shortcut, 才會(huì)在IE下顯示; 我在制作透明格式的ico時(shí)總出問(wèn)題，總會(huì)出現(xiàn)黑底，就算弄了IE下非黑底了，在Chrome下又變成黑底。于是，制作一個(gè)透明的ico和一個(gè)透明的png, 第一段供IE瀏覽器調(diào)用，第二段供其它瀏覽器調(diào)用; 注釋: 你也可以不使用這個(gè)link元素，而直接制作一個(gè)favicon.ico文件，并放到網(wǎng)站根目錄。順定分享: 為你的網(wǎng)站添加Apple Touch圖標(biāo)iPhone或iPod Touch設(shè)備允許用戶(hù)添加網(wǎng)站的鏈接到主屏上，使用下面的代碼可以為你的網(wǎng)站指定一個(gè)Apple Touch圖標(biāo): link rel= apple-touch-icon href= http://paranimage.com/wp-content/themes/v5/images/apple-touch-icon.png / 該圖標(biāo)的尺寸是57*57的PNG格式，如果不是，會(huì)自動(dòng)縮放，且如果我沒(méi)搞錯(cuò)的話(huà)，不一定要弄成iPhone風(fēng)格那種漂亮的圓角，iPhone會(huì)自動(dòng)按它的風(fēng)格把圖標(biāo)弄成圓角漸變的，比如last.fm的apple touch icon。對(duì)于國(guó)內(nèi)的用戶(hù)來(lái)說(shuō)，使用iPhone的人還不多，即使很多，會(huì)把你網(wǎng)站放到主屏？那恐怕不是我們這些一般的小網(wǎng)站能夠做到的。不過(guò)好玩嘛，我還是為我的網(wǎng)站制作了一個(gè)并添加了這個(gè)link元素。3. WordPress中的link元素(1). RSS地址和Pingback地址下面是WordPress默認(rèn)主題對(duì)RSS2地址，Atom地址和Pingback地址的定義。具體原理俺覺(jué)得很深?yuàn)W很復(fù)雜，就不研究了。反正你的博客需要它，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'); ? /

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：在html中，如何用style添加屬性

下一篇：HTML5的新特性(1)