<link>
标签定义文档与外部资源之间的关系,该元素是空元素,它仅包含属性。且该元素只能位于head 部分,但可以出现任何次数。
而<link>
的rel
属性规定当前文档与被链接文档/资源之间的关系。只有当使用href
属性时,才能使用rel
属性。
(1)语法
<link rel="value">
(2)属性值
值 | 描述 |
---|---|
alternate | 提供指向文档备用版本的链接(即打印页面,已翻译或镜像)。 例如: <link rel="alternate" type="application/atom+xml" title="JC2182 News" href="/blog/news/atom"> |
author | 提供指向文档作者的链接。 |
help | 提供指向帮助文档的链接。 例如: <link rel="help" href="/help/"> |
icon | 导入表示该文档的图标。 例如: <link rel="icon" href="/favicon.ico" type="image/x-icon"> |
license | 提供文档版权信息的链接。 |
prev | 表示该文档是集合中的一部分,提供指向集合中上一个文档的链接。 |
next | 表示该文档是集合中的一部分,提供指向集合中下一个文档的链接。 |
search | 链接到针对文档的搜索工具。 |
dns-prefetch | 指定浏览器应抢先执行目标资源源的DNS解析。 |
preconnect | 指定浏览器应抢先连接到目标资源的源。 |
prefetch | 规定应该对目标资源进行缓存。 |
preload | 指明哪些资源是在页面加载完成后即刻需要的。 |
stylesheet | 要导入的样式表的 URL。 |
(3)preload VS prefetch
preload | Prefetch | |
---|---|---|
语法 | <link rel="preload" href="bg-image-narrow.png"> | <link rel="prefetch" href="bg-image-narrow.png" /> |
适用场景 | 本页面接下来大概率要使用的资源 | 下个页面的资源。下个页面很可能会去访问 |
浏览器支持情况 | 一般 | 较高 |
加载时间 | 立即加载(一般而言,跟as有关) | 浏览器闲置的时候才会加载(一般而言) |