web基础(link标签的用法)

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分: 全局属性 1.1 html全局属性 1. class: 类 2. style: 行内样式 3. tit...
    岁月静好_不负此生阅读 850评论 0 2
  • 今天被gay友庆文问了一个问题怎么给地址栏加小图标,看到了他们上课的一个关于MIME type的ppt,发现自己基...
    6J阅读 1,217评论 3 3
  • 1.根元素 元素 表示一个HTML文档的根(顶级元素),所以它也被称为根元素。所有其他元素必须是此元素的后代。 l...
    简默丶XS阅读 1,943评论 0 6
  • HTML标签: /*告诉搜索引擎爬虫, 我们的网站是关于什么内容的,en:代表...
    寻梦者er阅读 515评论 2 0
  • 我已经连续没有三天背唐诗诗了。因为我这几天是在阿姨家玩,没有回家。把妈妈吩咐过的事给忘了一干二净。结果,今...
    王宾宾小王子阅读 267评论 0 1