HTML - ＜a＞

目次
1.简介
2.属性
2.1 href
2.2 hreflang
2.3 title
2.4 target
2.5 rel
2.6 referrerpolicy
2.7 ping
2.8 type
2.9 download
3.邮件链接
4.电话链接

---

1.简介

链接（hyperlink）是互联网的核心。它允许用户在页面上，从一个网址跳转到另一个网址，从而把全部资源接洽在一起。
<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>标签内部就是一个图像。用户点击图像，就会跳转到指定网址。
2.属性

<a>标签有如下属性。
2.1 href

href属性给出链接指向的网址。它的值应该是一个 URL 大概锚点。
上文已经给出了完备 URL 的例子，下面是锚点的例子。

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

复制代码

上面代码中，href属性的值是#加上锚点名称。点击后，欣赏器会主动滚动，停在当前页面内里demo锚点所在的位置。
2.2 hreflang

hreflang属性给出链接指向的网址所利用的语言，纯粹是提示性的，没有现实功能，紧张供搜刮引擎利用。

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

复制代码

上面代码表明，href属性指向的网址的语言是英语。
假如某个资源有多种语言的差别版本，可以将hreflang设为x-default，体现哪一个链接是默认版本。

1. <a href="https://example.com" hreflang="x-default">English</a>
2. <a href="https://example.com/de" hreflang="de">German</a>

复制代码

上面示例中，hreflang设为x-defalut体现该链接为默认版本。
hreflang属性所用的语言代码，跟通用的lang属性一样，可以参考《属性》一章的lang属性的先容。
2.3 title

title属性给出链接的阐明信息。鼠标悬停在链接上方时，欣赏器会将这个属性的值，以提示块的情势体现出来。

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

复制代码

上面代码中，用户鼠标停顿在链接上面，会出现笔墨提示hello。
2.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"一起利用，如允许以克制安全风险。
2.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：文档的标签链接。
  

2.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 文档。
2.7 ping

ping属性指定一个网址，用户点击的时间，会向该网址发出一个 POST 哀求，通常用于跟踪用户的举动。

1. <a href="http://localhost:3000/other" ping="http://localhost:3000/log">
2.   Go to Other Page
3. </a>

复制代码

上面示例中，用户点击链接时，除了发生跳转，还会向http://localhost:3000/log发送一个 POST 哀求。服务端收到这个哀求以后，就会知道用户点击了这个链接。
这个哀求的 HTTP 标头，包罗了ping-from属性（点击举动发生的页面）和ping-to属性（href属性所指向的页面）。

1. headers: {
2.   'ping-from': 'http://localhost:3000/',
3.   'ping-to': 'http://localhost:3000/other'
4.   'content-type': 'text/ping'
5.   // ...other headers
6. },

复制代码

注意，ping属性只对链接有效，对其他的交互举动无效，比如按钮点击或表单提交。别的，Firefox 欣赏器不支持该属性。而且，也无法让它发送任何的自界说数据。
2.8 type

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

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

复制代码

上面代码中，type属性提示这是一张图片。
2.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!”。
3.邮件链接

链接也可以指向一个邮件所在，利用mailto协议。用户点击后，欣赏器会打开本机默认的邮件步调，让用户向指定的所在发送邮件。

1. <a href="mailto:[email protected]">联系我们</a>

复制代码

上面代码中，链接就指向邮件所在。点击后，欣赏器会打开一个邮件所在，让你可以向[email protected]发送邮件。
除了邮箱，邮件协议还允许指定其他几个邮件要素。

• subject：主题
  
• cc：抄送
  
• bcc：密送
  
• body：邮件内容
  

利用方法是将这些邮件要素，以查询字符串的方式，附加在邮箱所在背面。

1. <a
2.   href="mailto:[email protected][email protected]&subject=The%20subject&body=The%20body"
3. >发送邮件</a>

复制代码

上面代码中，邮件链接内里不但包罗了邮箱所在，还包罗了cc、subject、body等邮件要素。这些要素的值必要颠末 URL 转义，比如空格转成%20。
不指定邮箱也是允许的，就像下面如许。这时用户自己在邮件步调内里，填写想要发送的邮箱，通常用于邮件分享网页。

1. <a href="mailto:">告诉朋友</a>

复制代码

4.电话链接

假如是手机欣赏的页面，还可以利用tel协议，创建电话链接。用户点击该链接，会唤起电话，可以举行拨号。

1. <a href="tel:13312345678">13312345678</a>

复制代码

上面代码在手机中，点击链接会唤起拨号界面，可以直接拨打指定号码。