HTML <a> 元素

HTML <a> 元素 （或 anchor（锚点） 元素） 创建一个到其他网页，文件，同一页面中的位置，电子邮件地址或任何其他 URL 的超链接。

链接到蜜蜂教程 ：

<a href="https://www.mifengjc.com">访问蜜蜂教程!</a>

尝试一下 »

特性

内容类别	流式内容，短语内容，交互内容，可触知内容。
允许的内容	透明内容模型，包括流式内容（不包括 交互内容）或短语内容。
标签省略	不允许，开始标签和结束标签都不能省略。
允许的父元素	接受短语内容的任何元素，或接受流式内容的任何元素，但总是排除 <a> 元素（根据对称的逻辑原则，如果 <a> 标签作为父元素，则不能包含交互内容，同样的，<a> 不能将 <a> 标签作为其父元素）。
允许的 ARIA 角色	button，checkbox，menuitem，menuitemcheckbox，menuitemradio，option，radio，switch，tab，treeitem
DOM 接口	Anchor 对象

属性

该元素包含了全局属性。

download

HTML5

该属性指示浏览器去下载链接的 URL 而不是导航到 URL ，因此用户点击时，将提示用户保存为本地文件。如果该属性有值，则在保存的提示框中将其用作为预设的文件名称（用户仍然可以根据需要更改文件名）。该属性允许值没有限制，但是 / 和 \ 会转换为下划线。大多数文件系统限制文件名中的一些标点符号，浏览器会相应地调整建议的名称。

注意：

• 该属性仅适用于同源 URLs。
• 该属性可用来下载 JavaScript 生成的 blob: URL 和 data: URLs 内容，例如在Web应用程序的图像编辑器中创建的图片。
• 如果 HTTP 头的 Content-Disposition 的文件名称和该属性不一样，则优先使用 HTTP 头。
• 如果 Content-Disposition: 设置为 inline, Firefox 优先使用 Content-Disposition 头，而 Chrome 优先使用 download 属性。

href

包含超链接指向的 URL 或 URL 片段。

URL 片段是以哈希标记（#）开头的名称，它指向当前文档的一个内部目标位置（一个 HTML 元素的 ID）。URL 不限于基于 Web(HTTP) 的文档，它还可以使用浏览器支持的任何协议。例如，file:，ftp: 和 mailto: 在大多数浏览器中都有效。

在 HTML5 时，使用 <a> 元素来创建占位符链接时，该属性是可以忽略的。占位符链接类似于传统的超链，但它没有设置 href 属性来链接到其他地方。

提示： 你可以使用 href="#top" 或空的片段 href="#" 来链接到当前页面的头部。这种行为在 HTML5 中有提到。

提示： 如果没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属性。

hreflang

该属性指示了链接资源的人类语言。它仅提供建议，没有内置的功能。允许的值由 BCP47 决定。

media

HTML5

规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。

referrerpolicy

实验性

一个字符串，指示在访问 URL 时使用哪种 Referrer 头：

• no-referrer: 将不发送 Referer 头。
• no-referrer-when-downgrade: 如果图片的源站不是 TLS（HTTPS）时，不会发送 Referer 头。如果没有指定任何策略，则这是用户代理的默认行为。
• origin: Referer 头会包括页面的协议、主机和端口。
• origin-when-cross-origin: 导航到其他源时，将限制所包含数据只有协议，主机和端口，而导航到相同的源将包含来源者的完整路径。
  同时从相同的起点导航将包括引荐来源的完整路径。
• unsafe-url: Referer 头将包含源站和路径，但不包括片段（fragment），密码或用户名。这种情况是不安全的，因为它可能会将受 TLS 保护的资源中的源和路径，泄露到不安全的源。

rel

该属性指定了目标对象到链接对象的关系。该值是空格分隔的链接类型。

target

指定显示链接的 URL 的位置。它是一个 浏览上下文 的名称或关键字：一个选项卡，窗口或 <iframe>。以下关键字有特殊含义：

• _self: 将 URL 加载到与当前 URL 相同的浏览上下文中。这是默认行为。
• _blank: 将 URL 加载到新的浏览上下文中。这通常是一个选项卡，但用户可以配置浏览器来使用新窗口打开。
• _parent: 将 URL 加载到当前的父级浏览上下文中。如果没有父级，那么它的行为方式与 _self 相同。
• _top: 将 URL 加载到顶级浏览上下文中（即当前流量上下文的“最上级”的浏览上下文，并且没有父级)。如果没有父级，那么它的行为方式与 _self 相同。

注意： 使用 target 时，请考虑添加 rel="noopener noreferrer" 以防止针对 window.opener API的恶意行为。

type

指定链接的 URL 对应 MIME type 中的媒体类型。

过时的属性

charset

已过时 HTML5

该属性定义了链接的 URL 的字符编码。该值是一个空格- 和/或逗号分隔的 RFC 2045 中定义的字符集列表。默认值是 ISO-8859-1。

使用注意： 该属性在 HTML5 中已经过时了，不应该被使用。要实现其效果，在链接到的 URL 使用 HTTP Content-Type: 头来实现。

coords

仅限 HTML 4，已过时 HTML5

与下面的 shape 属性一起使用，该属性使用逗号分隔的数字列表来定义页面上链接的坐标。

name

仅限 HTML 4，已过时 HTML5

该属性原来是用于锚点在页面中定义可能的目标位置。在 HTML 4.01 中，只要具有相同的值就可以在 <a> 元素上同时使用 id 和 name。

使用注意: 该属性在 HTML5 中已经过时了，使用全局属性 id 来代替。

rev

仅限 HTML 4，已过时 HTML5

该属性指定了反向的链接，和 rel 属性是相反的关系。由于非常令人困惑，它已被弃用。

shape

仅限 HTML 4，已过时 HTML5

该属性用于定义超链接的区域以创建图像映射。它的值可以是 circle，default，polygon 或 rect。coords 属性的格式取决于形状的值。

• 对于圆（circle），该值是 x,y,r，其中 x 和 y 为圆心像素坐标，r 是像素值半径。
• 对于矩形（rect），coords 属性的值应该是 x,y,w,h。其中 x,y 值定义的矩形的左上角的位置，而 w 和 h 分别定义宽度和高度。
• 对于多边形形状（polygon）的值需要 x1,y1,x2,y2,... 的值来定义coords。每对 x,y 定义多边形的一个点，连续点由直线接合和，最后一个点连接到第一个点。
• 形状的默认值是指整个封闭的区域，通常是一张图像。

注意： 应使用 <img> 元素的 usemap 属性 和关联的 <map> 元素来定义热点，而不是使用 shape 属性。

事件属性

<a> 元素支持 HTML 的事件属性。

实例

链接到外部地址

<a href="https://www.mifengjc.com">外部链接</a>

尝试一下 »

在新的浏览器窗口打开链接

本例演示如何在新窗口打开一个页面，这样的话访问者就无需离开您的站点了。

<a href="https://www.mifengjc.com/" target="_blank">访问蜜蜂教程！</a>

<p>如果你将 target 属性设置为 &quot;_blank&quot;，链接将在新窗口打开。</p>

尝试一下 »

链接到本页的某个部分

使用锚跳转到同一个页面的不同位置。本例演示如何使用锚的 id 属性跳转到页面的不同位置（ HTML5 不支持 name 属性）。

<style>
  .long-text {
    height: 1500px;
    background: lightblue;
  }
</style>

<h2><a id="top">这是标题，底部链接可以链接到这</a></h2>

<div class="long-text">
  蜜蜂教程 - 有问题，找小蜜！
</div>

<a href="#top">链接到标题</a>

尝试一下 »

创建一个可点击的图片

此实例使用图像链接到蜜蜂教程主页。主页将在新的浏览上下文中打开，即新页面或新标签页。

图像作为链接: <a href="https://mifengjc.com">
<img border="0" alt="mifengjc" src="//uploads-10001577.cos.ap-shanghai.myqcloud.com/images/logo.png" width="100">
</a>

尝试一下 »

创建电子邮件链接

创建一个链接，可以将用户的电子邮件程序打开，让他们发送新邮件，这是很常见的情况。
通过 mailto: 能够完成。下面是一个简单的例子：（本例在安装邮件客户端程序后才能工作。）

<p>
  这是一个电子邮件链接：
  <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
</p>

<p><b>注意：</b>单词之间的空格需要使用%20来表示，以确保浏览器能真正解析空格。</p>

尝试一下 »

创建电子邮件链接 2

本例演示更加复杂的邮件链接。可以通过 href 属性传递抄送人，密送人，标题，内容等信息。

<p>
  这是另一个电子邮件链接：
  <a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发邮件!</a>
</p>

<p>
  <b>注意：</b>单词之间的空格需要使用%20来表示，以确保浏览器能真正解析空格。
</p>

尝试一下 »

关于 mailto URL 协议的更多细节，例如如何加上标题，内容，或其他预定内容，参考邮件链接或 RFC 6068.

创建电话链接

提供电话链接有助于用户点击链接来实现一键拨号的功能。

<a href="tel:+491570156">+49 157 0156</a>

尝试一下 »

关于 tel URL 协议的更多细节，参考 RFC 2806 和 RFC 2396。

使用 download 属性将 <canvas> 保存为 PNG

如果你想允许用户下载一个 HTML 画布（ <canvas> 元素），你可以创建一个有 download 属性的链接，将画布数据作为文件 URL：

<canvas id="my-canvas"></canvas>
<a id="my-anchor" href="" download="我的画布.png">下载图片</a>

<script>
  var canvas = document.getElementById('my-canvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(0, 0, 80, 100);
  
  var link = document.getElementById('my-anchor');
  link.addEventListener('click', function (ev) {
    link.href = canvas.toDataURL();
  }, false);
</script>

尝试一下 »

你还可以在这里查看其他例子 jsfiddle.net/codepo8/V6ufG/2/。

注意

HTML 3.2 只定义了 name，href，rel，rev 和 title 属性。

默认外观

在所有浏览器中，链接的默认外观如下：

• 未被访问的链接带有下划线而且是蓝色的
• 已被访问的链接带有下划线而且是紫色的
• 激活状态的链接（如鼠标点下）带有下划线而且是红色的

无障碍建议

锚点标签通常会和 onclick 事件一起滥用，通过设置 href 为 "#" 或 "javascript:void(0)" 来创建伪按钮，以防止点击后页面刷新。设置为这些值后，在复制/拖动链接时，在新的标签/窗口中打开链接、书签时，当 JavaScript 还在下载、出错或被禁用时，就会出现意外的行为。这也向辅助技术（例如，屏幕阅读器）传达不正确的语义。在这种情况下，建议使用 <button> 来代替。一般来说，您应该只导航到正确的 URL 地址时，才使用锚点。

点击和焦点

在不同的浏览器和系统中，点击 <a> 是否会获得焦点的结果是不一样的。

在桌面浏览器中，点击 <a> 是否能获得焦点？

桌面浏览器	Windows 8.1	OS X 10.9
Firefox 30.0	Yes	Yes
Chrome ≥39 (Chromium bug 388666)	Yes	Yes
Safari 7.0.5	N/A	只有设置了 tabindex 才会
Internet Explorer 11	Yes	N/A
Presto (Opera 12)	Yes	Yes

在移动桌面浏览器中，点击 <a> 是否能获得焦点？

移动浏览器	iOS 7.1.2	Android 4.4.4
Safari Mobile	只有设置了 tabindex 才会	N/A
Chrome 35	???	只有设置了 tabindex 才会

规范

规范	状态	备注
Referrer Policy referrer attribute 的定义	编者的草案	增加了 referrer 属性。
HTML Living Standard <a> 的定义	现行的标准	-
HTML5 <a> 的定义	推荐	-
HTML 4.01 Specification <a> 的定义	推荐	-

桌面浏览器兼容性

移动浏览器兼容性

1. 从 Firefox 41 开始，没有设置 href 属性的 <a> 不再被分类为交互式内容：点击 <label> 里面的 <a> 将激活标签内容（bug 1167816）。

2. 在 Edge v14 (build 14357) 之前，尝试下载数据 URI 会导致其崩溃。

3. 该特性由 browser.send_pings 首选项控制（需要设置为 true）。要更改 Firefox 中的首选项，请访问 about:config。

相关链接

• 其他传递文本级语义的元素：<abbr>，<em>，<strong>，<small>，<cite>，<q>，<dfn>，<time>，<code>，<var>，<samp>，<kbd>，<sub>，<sup>，<b>，<i>，<mark>，<ruby>，<rp>，<rt>，<bdo>，<span>，<br>，<wbr>。
• HTML 教程：HTML 链接