link标签介绍

定义

HTML外部资源链接元素 (<link>) 规定了当前文档与外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标(比如PC端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。

 

link标签属性

属性	值	描述
as	audio、document、 embed、fetch、 font、image、 object、script、 style、track、 video、worker	该属性仅在<link>元素设置了 rel="preload" 时才能使用。它规定了<link>元素加载的内容的类型，对于内容的优先级、请求匹配、正确的内容安全策略的选择以及正确的 Accept请求头的设置，这个属性是必需的。
crossorigin	anonymous use-credentials ""	此枚举属性指定在加载相关资源时是否必须使用 CORS. 设置一个空的值，如 crossorigin 或 crossorigin=""，和设置 anonymous 的效果一样    在获取需要用户凭据的 manifest 时，属性值必须设置为 use-credentials。即使是同源的情况。 <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">  github <link rel="manifest" href="/manifest.json">  优酷 参考
disabled	Boolean	disabled 的Boolean属性指示是否应加载所描述的样式表并将其应用于文档。 如果在加载HTML时在HTML中指定了Disabled，则在页面加载期间不会加载样式表。 相反，如果禁用属性更改为false或删除时，样式表将按需加载。注意跟StyleSheet（dom）更改disabled属性不一样，将其更改为true会将样式表从文档的document.styleSheets 列表中删除，并且在切换回false时不会自动重新加载样式表，而更改styleSheets的disabled属性只是启用和禁用应用于文档的样式表表单。
charset	char_encoding	HTML5 不支持该属性。 定义被链接文档的字符编码方式。
href	URL	此属性指定被链接资源的URL。 URL 可以是绝对的，也可以是相对的。
hreflang	language_code	此属性指明了被链接资源的语言. 仅当设置了 href 属性时才应设置该属性。
importance	auto|high|low	只有存在rel=“preload”或rel=“prefetch”时，importance属性才能用于<link>元素。
integrity		包含行内元数据，它是一个你用浏览器获取的资源文件的哈希值，以base64编码的方式加的密，这样用户能用它来验证一个获取到的资源,在传送时未被非法篡改， 使用链接
title		当用于<link rel="stylesheet">时，它定义了一个首选样式表或备用样式表。
media	media_query	规定被链接文档将显示在什么设备上。
rel	alternate archives author bookmark help icon mask-icon fluid-icon first last next prev license manifest modulepreload pingback prefetch preload preconnect search sidebar stylesheet	必需。定义当前文档与被链接文档之间的关系。   link标签只有rel为dns-prefetch, modulepreload, pingback, preconnect, prefetch, preload, prerender, and stylesheet这几个值的时候，标签可以放在body里面，其它时候需要放在head标签内。 （https://html.spec.whatwg.org/multipage/links.html#body-ok） https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types  链接类型
sizes	HeightxWidth any	定义了链接属性大小，只对属性 rel="icon" 起作用。 eg: <link rel="icon" sizes="any" mask href="//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg">
target	_blank _self _top _parent frame_name	HTML5 不支持该属性。 定义在何处加载被链接文档。非标准属性
type	MIME_type	规定被链接文档的 MIME 类型。

 

rel属性详解

rel=stylesheet

定义要用作样式表的外部资源。如果没有设置 type，在进一步检查之前，浏览器应该假定它是 text/css 样式表。
如果与 alternate 关键字结合使用，则定义一个 可选样式表 ;在这种情况下，title 属性必须出现，而不能是空字符串。

rel=alternate 

参考：https://www.zhangxinxu.com/wordpress/2019/02/link-rel-alternate-website-skin/  

此属性主要用于换肤，上面参考文章有对应的通过更改link标签的disabled属性来切换，另外firefox浏览器可以通过顶部菜单栏

 View>Page Style 的子菜单中进行切换，chrome没有找到对应的菜单。

• 如果是<link>元素，并且rel属性包括stylesheet, 则这个link定义为alternate样式表;那样的话 title 属性不能为空.
• 如果type设置为application/rss+xml或者application/atom+xml, 则link被定义为syndication feed. 页面中第一个被定义的为默认的。(rss订阅  http://www.ruanyifeng.com/blog/ 阮一峰的博客有使用rss)
• 其它情况link定义为alternate页面:
  • 另一种介质,例如手持设备(如果设置了 media 属性),
  • 另一种语言 (如果设置了hreflang 属性),
  • 另一种格式, 例如PDF (如果设置了type 属性),
  • 或者是以上这些的集合.

（译注：link的alternate定义了一个可替换的样式表，它和第一个link元素同时使用，第一个定义了首选样式，而alternate则让用户可选择替换的样式。但这个替换操作需要 浏览器支持，但很多浏览器比如IE都是不支持的。

所以使用到替换样式的网页，一般都用一些样式表切换的JS，让用户可以自由切换界面样式。这个应该大家都见过，一些网站会给网页定义多种配色。 稍高阶的一些，还可以利用 JS弄成随时间变化样式的，比如白天的时候显示成明色，晚上的时候显示成暗色。）

<link href="reset.css" rel="stylesheet" type="text/css">
                
<link href="default.css" rel="stylesheet" type="text/css" title="默认">
<link href="red.css" rel="alternate stylesheet" type="text/css" title="红色">
<link href="green.css" rel="alternate stylesheet" type="text/css" title="绿色">

rel=canonical 

参考：http://www.webkaka.com/tutorial/zhanzhang/2018/071978/

使用 rel=canonical 为类似网页或重复网页指定权威网页。

<link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html">

rel=author

定义一个超链接到一个描述作者信息的页面或者提供一个方法联系作者。
Note: 这个方法可能是mailto:邮箱链接, 但不推荐这样，这样可能导致机器人发送大量的垃圾邮件到这个邮箱. 这种情况下，最好带一个包含联系方法的页面.。    

<link rel="author" href="humans.txt">

rel=icon

定义一个在用户界面上代表这个页面的资源，通常是一个图标（包括声音和图像）
media, type and sizes 属性允许浏览器选择其上下文中最合适的图标.如果多种资源符合条件，浏览器会选择最后一个。

Note: 苹果iOS不支持此链接类型, 也不支持 sizes属性, 就像其他移动端浏览器一样，为了Web Clip或者启动点位符选择一个页面图标。分别可使用不是标准方法的apple-touch-icon 和apple-touch-startup-image 替代.

<!-- 在之前，经常可以看到shortcut,但他不是标准的，应该不再使用。 -->

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

<link href="//img.alicdn.com/tfs/TB1XlF3RpXXXXc6XXXXXXXXXXXX-16-16.png" rel="shortcut icon" type="image/x-icon">

<link rel="mask-icon" href="https://github.githubassets.com/pinned-octocat.svg" color="#000000">
<link rel="alternate icon" class="js-site-favicon" type="image/png" href="https://github.githubassets.com/favicons/favicon-dark.png">
<link rel="icon" class="js-site-favicon" type="image/svg+xml" href="https://github.githubassets.com/favicons/favicon-dark.svg">

rel=fluid-icon

Fluid是一种运行Web应用程序的方式，就好像它们是本机Mac应用程序一样。流畅图标是在扩展坞的Mac上显示的图标。

   这个是添加后github的效果。

<link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">

rel=mask-icon

参考：https://blog.ecdo.cn/post/582/%E4%B8%BA%E7%BD%91%E7%AB%99%E5%A2%9E%E5%8A%A0%E6%BC%82%E4%BA%AE%E7%9A%84mask-icon/

<link rel="mask-icon" href="https://github.githubassets.com/pinned-octocat.svg" color="#000000">

rel= search

表示超链接引用了一个文档，该文档的接口专门设计用于在此文档或站点及其资源中进行搜索。

如果将type属性设置为application/opensearchdescription+xml，则该资源是OpenSearch 插件，可以轻松将其添加到Firefox或Internet Explorer等某些浏览器的界面中。

<!-- title值需要跟href中的xml文件的shortName一致 如果你的网站提供多个插件, 你能为他们每一个都支持自动搜寻功能.-->
<link rel="search" type="application/opensearchdescription+xml" href="/content-search.xml" title="百度搜索" />

<link rel="search" type="application/opensearchdescription+xml" href="https://static.zhihu.com/static/search.xml" title="知乎">

<link title="天猫Tmall.com" href="//g.alicdn.com/mui/global/1.2.35/file/search.xml" type="application/opensearchdescription+xml" rel="search">    https://www.tmall.com/

rel=manifest

表示链接到的文件是 Web App Manifest。manifest.json里面定义了pwa应用添加到主屏幕的显示以及启动相关配置等。

pwa应用实例： web.dev 和 squoosh.app ，饿了么等。（饿了么的 PWA 升级实践）

rel=modulepreload

更早和更高优先级的加载模块脚本。预先获取type=module类型的js并存储在document的module map内，还可以选择获取模块的依赖项。

rel=first, prev, next,last

表明该超链接指向当前页面所在序列中的第一个、前一个、下一个和最后一个

<!-- 示例 -->
<link rel="first" href="https://example.com/atomFeed.php">
<link rel="next" href="https://example.com/atomFeed.php?page=4">
<link rel="prev" href="https://example.com/atomFeed.php?page=2">
<link rel="last" href="https://example.com/atomFeed.php?page=147">

rel=shortlink

shortlink 规范
来自维基百科: URL shortening
一些网站创建短链接，使通过即时消息共享链接更容易。

 

rel预加载相关  （关联文章）

rel=dns-prefetch

提示浏览器该资源需要在用户点击链接之前进行DNS查询和协议握手.

<link rel="dns-prefetch" href="//g.alicdn.com" />
<link rel="dns-prefetch" href="//img.alicdn.com" />
<link rel="dns-prefetch" href="//tce.alicdn.com" />
<link rel="dns-prefetch" href="//gm.mmstat.com" />

rel=preconnect

向浏览器提供提示，建议浏览器提前打开与链接网站的连接，而不会泄露任何私人信息或下载任何内容，以便在跟随链接时可以更快地获取链接内容。

rel=prefetch

建议浏览器提前获取链接的资源，因为它很可能会被用户请求。 从Firefox 44开始，考虑了crossorigin属性的值，从而可以进行匿名预取。

注意：Link Prefetch FAQ详细说明了可以预取的链接以及替代方法。

rel=preload

告诉浏览器下载资源，因为在当前导航期间稍后将需要该资源。有关详细信息，请参见 Preloading content with rel="preload"

<!--  youtube -->
<link rel="preload" href="https://i.ytimg.com/generate_204" as="fetch"> 

如果你已经有了一个可以正确工作的CORS设置，那么你也可以同样成功的预加载那些跨域资源，只需要你在<link>元素中设置好crossorigin属性即可。

一个有趣的情况是，如果你需要获取的是字体文件，那么即使是非跨域的情况下，也需要应用这一属性。因为各种各样的原因，这些获取请求必须使用以匿名模式使用CORS（如果你对其中的细节感兴趣，可以查看Font fetching requirements一文）。

rel=prerender

建议浏览器事先获取链接的资源，并建议将预取的内容显示在屏幕外，以便在需要时可以将其快速呈现给用户。

demo示例：

  <!-- 之前用于包含 icon 链接，但已被废弃并不再使用 -->
    <link rel="shortlink" href="https://example.com/?p=42">
    <!-- 链接到当前文档的一个 AMP HTML 版本 -->
    <link rel="amphtml" href="https://example.com/path/to/amp-version.html">
    <!-- 表明一个 CSS 样式表 -->
    <link rel="stylesheet" href="https://example.com/styles.css">
    <!-- 链接到一个指定 Web 应用程序“安装”证书的 JSON 文件 -->
    <link rel="manifest" href="manifest.json">

    <!-- 指向一个适用于链接内容的版权申明 -->
    <link rel="copyright" href="copyright.html">
    <!-- 给出可能的你的另一种语言的文档位置参考 -->
    <link rel="alternate" href="https://es.example.com/" hreflang="es">
    <!-- 提供了关于作者或其他人的信息 -->
    <link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
    <link rel="me" href="mailto:name@example.com">
    <link rel="me" href="sms:+15035550125">
    <!-- 链接到一个文档，包含当前文档的一个归档链接 -->
    <link rel="archives" href="https://example.com/2003/05/" title="May 2003">
    <!-- 链接到层次结构中的顶级资源 -->
    <link rel="index" href="https://example.com/" title="DeWitt Clinton">
    <!-- 给出该文档的起点 -->
    <link rel="start" href="https://example.com/photos/pattern_recognition_1_about/" title="Pattern Recognition 1">
    <!-- 引导当前文档的前述资源序列 -->
    <link rel="prev" href="https://example.com/opensearch/opensearch-and-openid-a-sure-way-to-get-my-attention/" title="OpenSearch and OpenID? A sure way to get my attention.">
    <!-- 给出一个自我参考 - 当文档有多个可能的参考时非常有用 -->
    <link rel="self" type="application/atom+xml" href="https://example.com/atomFeed.php?page=3">
    <!-- 分别是在一系列文件中的第一个、下一个、上一个和最后一个 -->
    <link rel="first" href="https://example.com/atomFeed.php">
    <link rel="next" href="https://example.com/atomFeed.php?page=4">
    <link rel="pre" href="https://example.com/atomFeed.php?page=2">
    <link rel="last" href="https://example.com/atomFeed.php?page=147">
    <!-- 当使用第三方服务来维护 blog 时使用 -->
    <link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">
    <!-- 当另一个 WordPress 博客链接到你的 WordPress 博客或文章时形成一个自动化的评论 -->
    <link rel="pingback" href="https://example.com/xmlrpc.php">
    <!-- 当你在自己的页面上链接到一个 url 时通知它 -->
    <link rel="webmention" href="https://example.com/webmention">
    <!-- 加载一个外部的 HTML 文件到当前 HTML 文件中 -->
    <link rel="import" href="component.html">
    <!-- 打开搜索 -->
    <link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">
    <!-- Feeds -->
    <link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
    <link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">
    <!-- 预取，预载，预浏览 -->
    <link rel="dns-prefetch" href="//example.com/">
    <link rel="preconnect" href="https://www.example.com/">
    <link rel="prefetch" href="https://www.example.com/">
    <link rel="prerender" href="https://example.com/">
    <link rel="preload" href="image.png" as="image">
    <!-- 更多信息：https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
    <!--icon图标 ico大小一般16*16  -->
　  <link rel="icon" href="path/to/favicon.ico">
    <!--Touch Bar区域显示的网站图标 -->
    <link rel="mask-icon" href="https://github.githubassets.com/pinned-octocat.svg" color="#000000">
    <!--fluid-icon -->
    <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
    <!-- rss订阅 -->
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />