一直在使用link標簽,這幾天接觸到了less預處理器之后,怎么定義link都出現了一些問題,在網上查了一些資料,最終是這樣定義link的:
<link rel="stylesheet/less" type="text/css" href="css/less.less">
此時,頁面上已經可以正常顯示css了。我才發現我還并不了解link的機制是什么樣子的,天吶~(需要用心鉆研了)
上w3c查詢link可以看到link標簽共有9個屬性(平時也用不到這么多,所以就解剖以下以上link中的三個屬性,剩下的就當是科普一下吧 ~_~)
1:charset? char_encoding HTML5 中不支持。
2:href? URL 規定被鏈接文檔的位置。
3:hreflang? language_code 規定被鏈接文檔中文本的語言。
4:media? media_query 規定被鏈接文檔將被顯示在什么設備上。??
5:rel? alternate? author? help? icon? licence? next? pingback? prefetch? prev? search? sidebar? stylesheet? tag 規定當前文檔與被鏈接文檔之間的關系。(因為rel的屬性就是確定當前頁面與鏈接內容關系的,屬性什么的自然就多了許多)
6:rev reversed relationship HTML5 中不支持。
7:sizes heightxwidth any 規定被鏈接資源的尺寸。僅適用于 rel="icon"。
8:target _blank _self _top _parent frame_name HTML5 中不支持。
9:type MIME_type 規定被鏈接文檔的 MIME 類型。
看到一對理論性的東西,就莫名的頭大!話不多說直接開搞。
1. rel
值??????????????????? 描述
alternate???????? 文檔的替代版本(比如打印頁、翻譯或鏡像)。
stylesheet?????? 文檔的外部樣式表。
start??????????????? 集合中的第一個文檔。
next??????????????? 集合中的下一個文檔。
prev??????????????? 集合中的上一個文檔。
contents???????? 文檔的目錄。
index????????????? 文檔的索引。
glossary????????? 在文檔中使用的詞匯的術語表(解釋)。
copyright??????? 包含版權信息的文檔。
chapter?????????? 文檔的章。
section??????????? 文檔的節。
subsection????? 文檔的小節。
appendix??????? 文檔的附錄。
help??????????????? 幫助文檔。
bookmark?????? 相關文檔。
看到這里基本上就明白了rel當中的值的作用了,其實stylesheet的作用就是為了 標明當前文檔與link鏈接的文檔的關系而已。例如<link rel="stylesheet">就是說明了link鏈接的文檔屬于當前的文檔的外部鏈接樣式表。
例中stylesheet后添加了一個/less的作用,就是為了說明此鏈接文檔是less文檔
(這么規定的,照做就行了~)
2. type
值?????????????????????? 描述
MIME_type???????? 被鏈接文檔的 MIME 類型。
type表面上看似很簡單,只有一個MIME_type的值,實際上MIME_type 代表了所有的文檔類型,有興趣的話,可以自己了解了解,反正我看了之后只覺得幾百種類型,我才用過幾種,如果牽扯到ajax的話,相對來說會用的比較多了。(附上w3c中能夠用到的script類型MIME_type?)
3. href
值???????????? 描述
URL?????????? 超鏈接的 URL。可能的值:
??????????????? 絕對 URL - 指向另一個站點(比如 href="http://www.example.com?
??????????????? /theme.css")
??????????????? 相對 URL - 指向站點內的某個文件(href="/themes/theme.css")
href屬性就比較簡單了,它是用來確定你link文件的路徑,當然了只要是路徑都有絕對相對的,就看你把它放在哪里找出來就是了。
想必大家也用過target這個屬性,我也是剛剛看到這個屬性居然在h5中不支持了,我的天,這是什么鬼!不過,在測試中,ie8+、firfox、geogle依然能夠使用該屬性,也就是說,沒毛病,可以放心的使用。
好了,link標簽中常用的屬性就這3個了,剩下的屬性因為有默認值的存在,也就不需要你再動手去填寫了,但是如果你有特殊要求的話,肯定也不會是看我這篇文章的人了吧~_~。
補充一句(script標簽同理的,我懶,我就不背鍋了!!!)