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” />

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。