HTML中rel屬性分析_HTML/Xhtml_網頁製作

由於發現有同學在微博轉播和收藏這篇文章,所以回頭來再審視下這篇隨性翻譯的文章,後來發現w3cschools.com.cn已經有了對照的中文譯文,所以這裡我就繼續完善下這篇文章吧,讓它顯得更有價值點。最初想到翻譯這篇文件源自於http://vanessa.b3log.org/research-a-rel-value這篇文章,發現rel屬性擁有非常多不常見的語意化值,原文著重是想列舉這些屬性值的使用場景,覺得非常有必要透過這樣的方式來了解rel屬性。

範例

帶有rel屬性的連接:

<a rel="external" href="http://www.xxoo.com/">ooxx</a>

瀏覽器支援

rel屬性在所有主流瀏覽器都得到了支援

 

<strong>注:</strong>浏览器渲染时会忽略此属性,然而搜索引擎可以从它获得更多的信息(a标签仅在href属性存在时有效)。

定義和使用

rel屬性指定了目前文件和被連接文件之間的關係

文法

<a rel="value">

HTML 4.01 與 HTML 5 之間的差異

已刪除的值：appendix, chapter, contents, copyright, glossary, index, section, start, subsection。

新的值：archives, author, bookmark, external, first, index, last, license, nofollow, noreferrer, search, sidebar, tag,up。

屬性值

值	描述	場景|範例	HTML4.01	HTML5
appendix	連結到文件的附錄頁
alternate	連結到一個備選的來源(例如:列印頁, 譯本和鏡像)	head標籤內設定網站的atom,feed
shortcut icon	快捷方式 小圖示	指定標題列,網址列,收藏列小圖示
archives	連結到文件集或歷史資料	<link rel='archives' href='http://www.ooxx.com/2012/07' />
author	連結到文件的作者	head標籤內申明文件作者
canonical	權威,典範	讓搜尋引擎知道目前網站中的重複或相似網頁中，哪一個頁面才是站長想讓其抓取與收錄的 <link rel="canonical" href="http://xxoo.com/" /> canonical屬性值通常在，rel屬性中出現 引用網址:http://www.xxoo.com/xhtml/rel_canonical/ canonical從功能上來講，可理解為301永久重定向的輔助功能 canonical可以與相對連結或絕對連結一起使用，但建議使用絕對連結 Google對canonical的定義是：規範網頁是一組內容高度相似的網頁的首選版本 canonical：中文"典範"的意思
stylesheet	文件的外聯樣式表	<link rel="stylesheet" href="base.css">
home	連接到網站的主頁	<link href="http://www.ooxx.com" rel="home" />
first	連結到集合中的首個文件	<link rel="first" href="index.html">
start	連結到目前文件的第一頁	<link rel="start" href="about:blank">
next	連結到集合中的下一個文件	<link rel="next" href="about:blank">
prev	連結到集合中的前一個文件	<link rel="chapter" href="about:blank">
last	連結到集合中最後的文件	<link rel="last" href="index.html">
up	提供指向一個文件的連結。該文件提供目前文件的上下文關係
search	連結到文件的搜尋工具
sidebar	連結到應該在瀏覽器側邊欄中顯示的文件
contents	連結到目前文件的內容目錄	一般放在文件主內容的側邊欄,方便在當前頁面各主題之間跳轉
index	連結到目前文件的索引
glossary	連結到目前文件術語表
copyright	連結到目前文件的版權或隱私權頁面	網站底部版權
chapter	從目前文件連結到一個章節
section	連結到文件清單中的一個小節
subsection	連結到目前文件清單中的子小節。 （一個小節可擁有多個子小節。）
head	連結到集合中的頂級文件
toc	連結到集合的目錄
parent	連結到來源上面的文件
child	連結到來源下面的文件
help	連結到說明文件	<link rel="help" href="http://www.xxoo.net/help.html" />
bookmark	用作書籤的永久 URL	列表標題
external	連結到外部文件	文章中引用到的外部連結
nofollow	連結到未經認可的文檔，例如付費連結 Google 使用 "nofollow" 來規定其搜尋蜘蛛不追蹤該連結	站內相關文章，站內隨機文章，評論回复，列表及文章頁面中的評論、瀏覽和作者鏈接，側邊欄的評論地址，首頁導航中的“首頁”鏈接，評論最多文章，訪問最多文章
noreferrer	規定當使用者跟隨該超連結時，瀏覽器不應發送 HTTP referer 頭
license	連結到文件的版權資訊
tag	目前文件標籤（關鍵字）	側邊欄中的標籤雲，文章中的標籤，列表中的標籤，標籤頁面的標籤
friend	贊助	友情鏈接，底部的 themes by

 

由于本人水平有限,难免存在一些错误,看官们如果觉得有不妥或者需要补充的地方,请留言指出,谢谢!

參考

http://www.w3schools.com/TAGS/att_a_rel.asp

http://vanessa.b3log.org/research-a-rel-value

http://www.w3school.com.cn/htmldom/prop_anchor_rel.asp

不得不提的rel-author 標籤

HTML rel canonical 屬性值

link標籤rel 屬性的意義

關於 rel="canonical"(google 網站站長工具)