link 标签
说到 link 标签，估计大家的第一反应和我一样，就是引入外部CSS样式文件的，不错，这是 link 标签最最常用的功能。不过它还有很多别的用处，比如这是浏览器 favicon 图标，touch图标等等。
<!-- 有助于防止出现内容重复的问题 --> <link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html"> <!-- 之前用于包含 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="author" href="humans.txt"> <!-- 指向一个适用于链接内容的版权申明 --> <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="previous" 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/ -->
具体说明查看：https://css-tricks.com/prefetching-preloading-prebrowsing/
