<a>

链接通过<a>标签表示，用户点击后，浏览器会跳转到指定的网址。下面就是一个典型的链接。

  1. <a href="https://wikipedia.org/">维基百科</a>

上面代码就定义了一个超级链接。浏览器显示“维基百科”，文字下面默认会有下划线，表示这是一个链接。用户点击后，浏览器跳转到href属性指定的网址。

<a>标签内部不仅可以放置文字，也可以放置其他元素，比如段落、图像、多媒体等等。

  1. <a href="https://www.example.com/">
  2.   <img src="https://www.example.com/foo.jpg">
  3. </a>

上面代码中，<a>标签内部就是一个图像。用户点击图像，就会跳转到指定网址。

<a>标签有如下属性。

（1）href

href属性给出链接指向的网址。它的值应该是一个 URL 或者锚点。

上文已经给出了完整 URL 的例子，下面是锚点的例子。

  1. <a href="#demo">示例</a>

上面代码中，href属性的值是#加上锚点名称。点击后，浏览器会自动滚动，停在当前页面里面demo锚点所在的位置。

（2）hreflang

hreflang属性给出链接指向的网址所使用的语言，纯粹是提示性的，没有实际功能。

  1. <a
  2.   href="https://www.example.com"
  3.   hreflang="en"
  4. >示例网址</a>

上面代码表明，href属性指向的网址的语言是英语。

该属性的值跟通用属性lang一样，语言代码可以参考《属性》一章的lang属性的介绍。

（3）title

title属性给出链接的说明信息。鼠标悬停在链接上方时，浏览器会将这个属性的值，以提示块的形式显示出来。

  1. <a
  2.   href="https://www.example.com/"
  3.   title="hello"
  4. >示例</a>。

上面代码中，用户鼠标停留在链接上面，会出现文字提示hello。

（4）target

target属性指定如何展示打开的链接。它可以是在指定的窗口打开，也可以在<iframe>里面打开。

  1. <p><a href="http://foo.com" target="test">foo</a></p>
  2. <p><a href="http://bar.com" target="test">bar</a></p>

上面代码中，两个链接都在名叫test的窗口打开。首先点击链接foo，浏览器发现没有叫做test的窗口，就新建一个窗口，起名为test，在该窗口打开foo.com。然后，用户又点击链接bar，由于已经存在test窗口，浏览器就在该窗口打开bar.com，取代里面已经打开的foo.com。

target属性的值也可以是以下四个关键字之一。

  • _self：当前窗口打开，这是默认值。
  • _blank：新窗口打开。
  • _parent：上层窗口打开，这通常用于从父窗口打开的子窗口，或者<iframe>里面的链接。如果当前窗口没有上层窗口，这个值等同于_self。
  • _top：顶层窗口打开。如果当前窗口就是顶层窗口，这个值等同于_self。
  1. <a
  2.   href="https://www.example.com"
  3.   target="_blank"
  4. >示例链接</a>

上面代码点击后，浏览器会新建一个窗口，在该窗口打开链接，并且新窗口没有名字。

注意，使用target属性的时候，最好跟rel="noreferrer"一起使用，这样可以避免安全风险。

（5）rel

rel属性说明链接与当前页面的关系。

  1. <a href="help.html" rel="help">帮助</a>

上面代码的rel属性，说明链接是当前页面的帮助文档。

下面是一些常见的rel属性的值。

  • alternate：当前文档的另一种形式，比如翻译。
  • author：作者链接。
  • bookmark：用作书签的永久地址。
  • external：当前文档的外部参考文档。
  • help：帮助链接。
  • license：许可证链接。
  • next：系列文档的下一篇。
  • nofollow：告诉搜索引擎忽略该链接，主要用于用户提交的内容，防止有人企图通过添加链接，提高该链接的搜索排名。
  • noreferrer：告诉浏览器打开链接时，不要将当前网址作为 HTTP 头信息的Referer字段发送出去，这样可以隐藏点击的来源。
  • noopener：告诉浏览器打开链接时，不让链接窗口通过 JavaScript 的window.opener属性引用原始窗口，这样就提高了安全性。
  • prev：系列文档的上一篇。
  • search：文档的搜索链接。
  • tag：文档的标签链接。

（6）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 文档。

（7）ping

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

（8）type

type属性给出链接 URL 的 MIME 类型，比如到底是网页，还是图像或文件。它也是纯粹提示性的属性，没有实际功能。

  1. <a
  2.   href="smile.jpg"
  3.   type="image/jpeg"
  4. >示例图片</a>

上面代码中，type属性提示这是一张图片。

（9）download

download属性表明当前链接用于下载，而不是跳转到另一个 URL。

  1. <a href="demo.txt" download>下载</a>

上面代码点击后，会出现下载对话框。

注意，download属性只在链接与网址同源时，才会生效。也就是说，链接应该与网址属于同一个网站。

如果download属性设置了值，那么这个值就是下载的文件名。

  1. <a
  2.   href="foo.exe"
  3.   download="bar.exe"
  4. >点击下载</a>

上面代码中，下载文件的原始文件名是foo.exe。点击后，下载对话框提示的文件名是bar.exe。

注意，如果链接点击后，服务器的 HTTP 回应的头信息设置了Content-Disposition字段，并且该字段的值与download属性不一致，那么该字段优先，下载时将显示其设置的文件名。

download属性还有一个用途，就是有些地址不是真实网址，而是数据网址，比如data:开头的网址。这时，download属性可以为虚拟网址指定下载的文件名。

  1. <a href="data:,Hello%2C%20World!">点击</a>

上面链接点击后，会打开一个虚拟网页，上面显示Hello World!。

  1. <a
  2.   href="data:,Hello%2C%20World!"
  3.   download="hello.txt"
  4. >点击</a>

上面链接点击后，下载的hello.txt文件内容就是“Hello, World!”。