link标签的属性
我们知道标签就是定义文档与外部的关系，它最常见的的用途是链接样式表。通常写的时候它只存在head部分中，不过它可以出现任何次数。接下来我们具体的分析一下link标签中的属性：
href
规定被连接文档的位置
<link rel=’stylesheet’ href=’./ease.css’ type=’text/css’ />
1
hreflang
规定被链接文档中文本的语言
*几乎没有主流浏览器支持
media
规定被链接文档被显示在什么设备上
属性值
值 描述
screen 计算机屏幕（默认）。
tty 电传打字机以及类似的使用等宽字符网格的媒介。
tv 电视机类型设备（低分辨率、有限的滚屏能力）。
projection 放映机。
handheld 手持设备（小屏幕、有限带宽）。
print 打印预览模式/打印页面。
braille 盲人点字法反馈设备。
aural 语音合成器。
all 适用于所有设备。
*rel
规定当前文档与被链接文档之间的关系
1.pingback
pingback是网志中常用的用来通知网志系统文章被引用情况的一种手段，当其他人链接至Web作者的网页时，Web作者将获取通知。这个方法使得Web作者可以追踪什么人链接至他的文章。
<link rel=”pingback” href=”xwenw.com/xmlrpc.php” />
1
2.profile
<link rel=”profile” href=”http://gmpg.org/xfn/11″>
1
我们经常在模板中经常会看到如下 link 标签，这个到底有什么用呢？
不同浏览器可以根据自己设定的默认样式来呈现网页，比如你把朋友定义成“friend”，而我要按照拼音来定义成“pengyou”，彼此之间无法统一，该 功能就变得没有丝毫的意义。所以我们在HTML文档的标签中使用 profile 属性引入一个声明，声明在这个HTML文档中使用了 XML Friends Network (XFN) 微格式，然后按照这份XFN微格式中约定的方式来描述关系网络，于是即使是不同用户代理器访问这些数据只要其遵循XFN的约定即可正确的读取出其中的关系 数据。
3.canonical
移动站rel=”canonical”标签是为了解决网站由于网站url链接不一样但网页内容是一样而造成百度重复收录的问题，对于这样的情况，如果不采用百度rel=”canonical”标签，后果将导致百度对两个相同的网页收录和排名的问题上不知情，久而久之，当网站存在大量这样的网页的时候，可能导致网站大量重复内容而被降权、不收录甚至被K。
使用rel=”canonical”标签的基本样式：<link rel=”canonical”
href=”网页权威链接”/>
1
2
写好这段代码之后，将其放入非权威的网页的头部中即可。
4.dns-prefetch
浏览器主动去执行域名解析的功能,DNS预获取 dns-prefetch 提升页面载入速度
DNS Prefetch，即DNS预获取，是前端优化的一部分。一般来说，在前端优化中与 DNS 有关的有两点： 一个是减少DNS的请求次数，另一个就是进行DNS预获取 。
<link rel=”dns-prefetch” href=”//api.xiaowenweb.com”>
1
5.preconnect
浏览器要建立一个连接，一般需要经过DNS查找，TCP三次握手和TLS协商（如果是https的话），这些过程都是需要相当的耗时的，所以preconnet，就是一项使浏览器能够预先建立一个连接，等真正需要加载资源的时候就能够直接请求了。
<link rel=”preconnect” href=”//xiaowenweb.com”>
1
6.prefetch
能够让浏览器预加载一个资源（HTML，JS，CSS或者图片等），可以让用户跳转到其他页面时，响应速度更快。
<link rel=”prefetch” href=”/library.js” as=”script”>
1
7.prerender
prerender不仅会加载资源，还会解执行页面，进行预渲染，但是这都是根据浏览器自身进行判断。
浏览器可能会
1.分配少量资源对页面进行预渲染
2.挂起部分请求直至页面可见时
3.可能会放弃预渲染，如果消耗资源过多
<link rel=”prerender” href=”//xiaowenweb.com/next-page.html”>
1
8.alternate
在PC站点当中,在前加入
<link rel=”alternate” href=”http://m.abc.com/”>
1
在对应的移动站点中前加入
<link rel=”canonical” href=”http://www.abc.com/”>
1
9.stylesheet
文档的外部样式表。
<link rel=’stylesheet’ href=’style.min.css’ type=’text/css’ media=’all’ />
1
10.icon
为网页标题添加自定义图标
<link rel=”icon” href=”https://xiaowenweb.com/wp-content/uploads/2019/12/VidMate-fav.png” sizes=”192×192″ />
1
type 属性
type 属性规定被链接文档的 MIME 类型。
该属性最常见的 MIME 类型是 “text/css”，该类型描述样式表。
<link rel=”stylesheet” type=”text/css” href=”theme.css” />
评论(0)