HTML - 09 链接标签

本教程原出处：网道
本教程文档在原作基础上进行了一定的补充、修改和完善，以满足个人学习、工作中的需要，亦可作为个人口袋书使用。
本教程文档中的原文部分，其版权仍归原作者所有。
本教程文档仅作个人学习、教学和工作使用，任何他人、或机构、组织不得恶意传播、复制本文档，或将本教程文档用做商用

链接标签

• 链接（hyperlink）是互联网的核心。它允许用户在页面上，从一个网址跳转到另一个网址，从而把所有资源联系在一起。
• URL 是链接指向的地址。链接不仅可以指向另一个网页，也可以指向文本、图像、文件等资源。可以这样说，所有互联网上的资源，都可以通过链接访问。
• <a>
  

• href
  
• hreflang
  
• title
  
• target
  
• rel
  
• referrerpolicy

• referrerpolicy属性用于精确设定点击链接时，浏览器发送 HTTP 头信息的Referer字段的行为。
  该属性可以取下面八个值：no-referrer、no-referrer-when->>>* downgrade、origin、origin-when-cross-origin、unsafe-url、same-origin、strict-origin、strict-origin-when-cross-origin。
• 其中，no-referrer表示不发送Referer字段，same-origin表示同源时才发送Referer字段，origin表示只发送源信息（协议+域名+端口）。其他几项的解释，请查阅 HTTP 文档。

• ping属性指定一个网址，用户点击的时候，会向该网址发出一个 POST 请求，通常用于跟踪用户的行为。
• type
  
• download
  

• 邮件链接
  
• 电话链接
  
• <link>
  

• rel 属性
  rel属性表示外部资源与当前文档之间的关系，是标签的必需属性。它可以但不限于取以下值。
  alternate：文档的另一种表现形式的链接，比如打印版。
  author：文档作者的链接。
  dns-prefetch：要求浏览器提前执行指定网址的 DNS 查询。
  help：帮助文档的链接。
  icon：加载文档的图标文件。
  license：许可证链接。
  next：系列文档下一篇的链接。
  pingback：接收当前文档 pingback 请求的网址。
  preconnect：要求浏览器提前与给定服务器，建立 HTTP 连接。
  prefetch：要求浏览器提前下载并缓存指定资源，供下一个页面使用。它的优先级较低，浏览器可以不下载。
  preload：要求浏览器提前下载并缓存指定资源，当前页面稍后就会用到。它的优先级较高，浏览器必须立即下载。
  prerender：要求浏览器提前渲染指定链接。这样的话，用户稍后打开该链接，就会立刻显示，感觉非常快。
  prev：表示当前文档是系列文档的一篇，这里给出上一篇文档的链接。
  search：提供当前网页的搜索链接。
  stylesheet：加载一张样式表。
• 下面是一些示例：

<!-- 作者信息 -->
<link rel="author" href="humans.txt">

<!-- 版权信息 -->
<link rel="license" href="copyright.html">

<!-- 另一个语言的版本 -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">

<!-- 联系方式 -->
<link rel="me" href="https://google.com/profiles/someone" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">

<!-- 历史资料 -->
<link rel="archives" href="http://example.com/archives/">

<!-- 目录 -->
<link rel="index" href="http://example.com/article/">

<!-- 导航 -->
<link rel="first" href="http://example.com/article/">
<link rel="last" href="http://example.com/article/?page=42">
<link rel="prev" href="http://example.com/article/?page=1">
<link rel="next" href="http://example.com/article/?page=3">

• 资源预加载

• 某些情况下，你需要浏览器预加载某些资源，也就是先把资源缓存下来，等到使用的时候，就不用再从网上下载了，立即就能使用。预处理指令可以做到这一点。
  

• media属性
  
• 其他属性

• <link>标签的其他属性如下。
  crossorigin：加载外部资源的跨域设置。
  href：外部资源的网址。
  referrerpolicy：加载时Referer头信息字段的处理方法。
  as：rel="preload"或rel="prefetch"时，设置外部资源的类型。
  type：外部资源的 MIME 类型，目前仅用于rel="preload"或rel="prefetch"的情况。
  title：加载样式表时，用来标识样式表的名称。
  sizes：用来声明图标文件的尺寸，比如加载苹果手机的图标文件。

• <script>

• <script>还有下面一些其他属性，大部分跟 JavaScript 语言有关，可以参考相关的 JavaScript 教程。

• async：该属性指定 JavaScript 代码为异步执行，不是造成阻塞效果，JavaScript 代码默认是同步执行。
• defer：该属性指定 JavaScript 代码不是立即执行，而是页面解析完成后执行。
• crossorigin：如果采用这个属性，就会采用跨域的方式加载外部脚本，即 HTTP 请求的头信息会加上origin字段。
• integrity：给出外部脚本的哈希值，防止脚本被篡改。只有哈希值相符的外部脚本，才会执行。
• nonce：一个密码随机数，由服务器在 HTTP 头信息里面给出，每次加载脚本都不一样。它相当于给出了内嵌脚本的白名单，只有在白名单内的脚本才能执行。
• referrerpolicy：HTTP 请求的Referer字段的处理方法。

• <noscript>