關於HTML中rel屬性的分析

這篇文章主要介紹了HTML中rel屬性分析,需要的朋友可以參考下

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

範例

帶有rel屬性的連接:

瀏覽器支援

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

」註:<strong>瀏覽器渲染時會忽略此屬性,然而搜尋引擎可以從它獲得更多的資訊(a標籤僅在href屬性存在時有效)。 </strong>

定義並使用

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

語法

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.01HTML5appendix連結到文件的附錄頁  # alternate連結到一個備選的來源(例如:列印頁, 譯本和鏡像)head標籤內配置網站的atom,feed   shortcut icon捷徑小圖示#指定標題列,網址列,收藏欄小圖示  archives#連結到文件集或歷史資料  ##home連接到網站的首頁 first連結到集合中的首個文件  #start## 連結到集合中的前一個文件last##連結到集合中最後的文件 #   ##連結到應該在瀏覽器側邊欄中顯示的文件   #contents連結到目前文件的內容目錄#一般放在文檔主內容的側邊欄,方便在目前頁面各主題之間跳轉 # index連結到目前文件的索引   glossary連結到目前文件術語表   #copyright連結到目前文件的版權或隱私權頁面 #網站底部版權  #chapter#從目前文件連結到一個章節   section連結到文件清單中的一個小節 #  subsection連結到目前文件清單中的子小節。 （一個小節可擁有多個子小節。）      

				##
		author 連結到文件的作者 head標籤內申明文檔作者     canonical 權威,典範 讓搜尋引擎知道目前網站中的重複或相似網頁中，哪一個頁面才是站長想讓其抓取與收錄的 canonical屬性值通常在，rel屬性中出現 #引用網址:http://www.xxoo.com/xhtml/rel_canonical/## ##########canonical從功能上來講，可理解為301永久重定向的輔助功能############canonical可以與相對連結或絕對連結一起使用，但是建議使用絕對連結############Google對canonical的定義是：規範網頁是一組內容高度相似的網頁的首選版本###########canonical：中文"典範"的意思###
#stylesheet	文件的外接樣式表	#<link rel="stylesheet" href="base.css">	#
##連結到目前文件的第一頁
			#next	連結到集合中的下一個文件
				prev
			#
			#up	提供指向一個文件的連結。此文件提供目前文件的上下文關係
				#連結到文件的搜索工具
			#sidebar
		head##連結到集合中的頂層文件
	toc	#連結到集合的目錄	#
	#parent	連結到來源上面的文件		#
	child ###連結到來源下面的文件###### ###### ############################################## ############help######連結到幫助文件################### ###### ############bookmark######用作書籤的永久URL ######清單標題###### ###### #############external######連結到外部文件######文章中引用到的外部連接###### ###### #############nofollow######連結到未經認可的文檔，例如付費連結###Google 使用"nofollow" 來規定其搜尋蜘蛛不跟踪該鏈接	站內相關文章，站內隨機文章，評論回复，列表及文章頁面中的評論、瀏覽和作者鏈接，側邊欄的評論地址，首頁導航中的“首頁”鏈接，評論最多文章，訪問最多文章		#
noreferrer	#規定當當使用者跟隨該超連結時，瀏覽器不應發送HTTP referer 頭		#
license	連結到文件的版權資訊
tag	目前文件標籤（關鍵字）	側邊欄的標籤雲，文章中的標籤，清單中的標籤，標籤頁的標籤
friend	贊助	友情鏈接，底部的themes by	#

 由於本人水平有限,難免存在一些錯誤,看官們如果覺得有不妥或者需要補充的地方,請留言指出,謝謝!

#以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！

相關推薦：

去掉HTML中Inline-Block的空白的方法

html頁面中meta的作用以及頁面的快取與不快取設定的解析

#

以上是關於HTML中rel屬性的分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！