一直在使用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标签同理的,我懒,我就不背锅了!!!)