HTML <a> 元素  (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。

内容分类 流内容、文字内容、交互内容、可触摸内容。
允许的内容  可见的内容(Transparent),包含流内容(不包括交互式内容)或文字内容(phrasing content)。
标签省略 不允许,开始标签和结束标签都不能省略。
允许的父元素 接受短语内容的任何元素或接受流内容的任何元素,但始终不接受<a>元素(根据对称的逻辑原理,如果<a>标记作为父元素,不能具有交互内容,则相同的<a>内容不能具有<a>标记作为其父元素)。
Permitted ARIA roles button, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, switch, tab, treeitem
DOM接口 HTMLAnchorElement

属性

该元素支持全局属性

download HTML5
此属性指示浏览器下载URL而不是导航到它,因此将提示用户将其保存为本地文件。如果属性有一个值,那么它将在Save提示符中作为预填充的文件名使用(如果用户需要,仍然可以更改文件名)。此属性对允许的值没有限制,但是/和\会被转换为下划线。大多数文件系统限制了文件名中的标点符号,故此,浏览器将相应地调整建议的文件名。
注意:
  • 此属性仅适用于同源 URLs
  • 尽管HTTP URL需要位于同一源中,但是可以使用 blob: URLs 和 data: URLs ,以方便用户下载 JavaScript 方式生成的内容(例如使用在线绘图的Web应用创建的照片)。
  • 如果HTTP头的Content-Disposition赋予了一个不同于此属性的文件名,HTTP头属性Content-Disposition优先于此属性。
  • 如果HTTP头属性Content-Disposition被设置为inline(即Content-Disposition='inline'),那么Firefox优先考虑HTTP头Content-Disposition属性,就像文件名的情况,而Chrome优先考虑download属性。
href

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

URL片段是哈希标记(#)前面的名称,哈希标记指定当前文档中的内部目标位置(HTML元素的ID)。URLs不限于基于Web(HTTP)的文档,也可以使用浏览器支持的任何协议。例如,在大多数浏览器中正常工作的file:、ftp:和mailto:。

注意: 可以使用 href="#top" 或者 href="#" 链接返回到页面顶部。这种行为是HTML5的特性

hreflang

该属性用于指定链接文档的人类语言。其仅提供建议,并没有内置的功能。hreflang 允许的值取决于HTML5 BCP47

 

ping
包含一个以空格分隔的url列表,当跟随超链接时,将由浏览器(在后台)发送带有正文PING的POST请求。通常用于跟踪。

 

</font></font>referrerpolicy<font><font>
表明在获取URL时发送哪个提交者(referrer):
  • "no-referrer" 表示 Referer: 头将不会被发送。
  • "no-referrer-when-downgrade" 表示当从使用HTTPS的页面导航到不使用 TLS(HTTPS)的来源 时不会发送 Referer: 头。如果没有指定策略,这将是用户代理的默认行为。
  • "origin" 表示 referrer将会是页面的来源,大致为这样的组合:主机和端口(不包含具体的路径和参数的信息)。
  • "origin-when-cross-origin" 表示导航到其它源将会限制为这种组合:主机 + 端口,而导航到相同的源将会只包含 referrer的路径。
  • 'strict-origin-when-cross-origin'
  • "unsafe-url" 表示 referrer将会包含源和路径(domain + path)(但是不包含密码或用户名的片段)。这种情况是不安全的,因为它可能会将安全的URLs数据泄露给不安全的源。
rel
该属性指定了目标对象到链接对象的关系。该值是空格分隔的列表类型值
target
该属性指定在何处显示链接的资源。 取值为标签(tab),窗口(window),或框架(iframe)等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义:
  • _self: 当前页面加载,即当前的响应到同一HTML 4 frame(或HTML5浏览上下文)。此值是默认的,如果没有指定属性的话。
  • _blank: 新窗口打开,即到一个新的未命名的HTML4窗口或HTML5浏览器上下文
  • _parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文,此选项的行为方式相同_self。
  • _top: IHTML4中:加载的响应成完整的,原来的窗口,取消所有其它frame。 HTML5中:加载响应进入顶层浏览上下文(即,浏览上下文,它是当前的一个的祖先,并且没有parent)。如果没有parent框架或者浏览上下文,此选项的行为方式相同_self

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

Note: Linking to another page using target="_blank" will run the new page on the same process as your page. If the new page is executing expensive JS, your page's performance may suffer. To avoid this use rel=noopener.

 type
该属性指定在一个 MIME type 链接目标的形式的媒体类型。其仅提供建议,并没有内置的功能。

过时的

charset 已废弃 HTML5
此属性定义链接资源的字符编码。该值是一个空格- 和/或逗号分隔的RFC 2045中定义的字符集列表默认值是ISO-8859-1。

使用说明: 在 HTML5 中该属性已作废,不应使用。 为了实现其效果,使用HTTP content - type header的链接资源。

coords  HTML 4 only, 已废弃 HTML5
对于使用对象的形状,这个属性使用逗号分隔的数字列表来定义对象在页面上的坐标。
name HTML 4 only, 已废弃 HTML5
该属性在页面中定义锚点的目标位置时是必须的。 name 的值类似于ID核心属性值,该属性值在文档中是唯一的且由数字字母标示符所组成的。在 HTML 4.01 规范中, idname 都可以使用 <a> 元素,只要他们有相同的值。

使用说明: 该属性在 HTML5中是过时的, 使用 全局属性 id 来代替。

rev HTML 4 only, 已废弃 HTML5
该属性用于指定当前文档与被链接文档的关系。用于 <a> 标签的可选属性 rel 和 rev 分别表示源文档与目标文档之间正式的关系和方向。rel 属性指定从源文档到目标文档的关系,而 rev 属性则指定从目标文档到源文档的关系。这两种属性可以在 <a> 标签中同时使用。对于网页编者来说,这个属性很有用,可以通过它来查看外链的来源。
shape HTML 4 only, 已废弃 HTML5
此属性用于定义一个可选的超链接相关的一个数字来创建图像映射区域,该属性的值是圆,默认情况下,多边形,矩形。 所述的coords 属性的格式取决于形状的值。对于圆,该值的x,y,r其中x和y为圆心像素坐标,r是像素值半径。对于矩形,该coords 属性应该是x,y,w,h。x,y值定义的矩形的左上角的位置,而w和h分别定义宽度和高度。多边形形状的值需要x1,y1,x2,y2,......值来定义coords。每对x,y定义多边形的一个点,连续点由直线接合和,最后一个点连接到第一个点。默认为形状的值需要将整个封闭区域,典型的图像,可以使用。
说明:建议使用 usemap 属性<img>元素和相关的<map>元素中来定义热点而不是用形状属性。

示例

链接到外部地址

<!-- anchor linking to external file -->
<a href="http://www.mozilla.com/">
External Link
</a>

结果

外部链接

链接到本页的某个部分

<!-- links to element on this page with id="attr-href" -->
<a href="#属性">
Description of Same-Page Links
</a>

结果

相同页面链接的描述

创建一个可点击的图片

这个小例子使用图像链接到MDN主页。主页将在新的浏览环境,这是一个新的页面或新标签中打开研究。

<a href="https://developer.mozilla.org/en-US/">
  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" 
       alt="MDN logo" />
</a>

结果

创建一个email链接

这是常见的创建按钮或链接,将用户的电子邮件程序打开,让他们发送新邮件。这是通过使用一个mailto链接完成的。这里有一个简单的例子:

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

生成这样的链接: Send email to nowhere.

有关mailto URL方案的更多细节,比如如何包含主题,正文,或其他预定内容,参考 Email links or RFC 6068.

创建电话链接

提供电话链接有助于用户查看连接到手机的网络文档和笔记本电脑。

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

更详细的语法请查看 RFC 2806 and RFC 2396

使用 download 属性保存画布为PNG格式

如果你想允许用户下载一个HTML画布,你可以创建一个下载属性和画布数据作为文件URL链接图像:

var link = document.createElement('a');
link.innerHTML = 'download image';

link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "mypainting.png";
}, false);

document.body.appendChild(link);

可以查看这个例子 http://jsfiddle.net/codepo8/V6ufG/2/

备注

html 3.2 只定义 name, href, rel, rev, 和 title 属性。

无障碍建议

锚点标签常常通过将 href 属性设置为 "#" 或 "javascript:void(0)" 来创造一个能阻止页面刷新的伪按钮的方式被滥用。 这些属性值会在拖动 / 复制链接时导致意外行为,在新窗口 / 新标签打开链接,加入书签以及 JavaScript 仍在下载时会出现错误或被禁用。这也会向辅助技术(如屏幕阅读器)传达不正确的语义。在这些情况下,推荐使用 <button> 来代替。通常情况下,您应该只将锚点用于正常的 URL 导航。 

Clicking 及 focus

点击一个 <a> 标签是否会出现 focus 取决于浏览器和操作系统。

点击一个 <a> 标签是否使其获得焦点?
桌面浏览器 Windows 8.1 OS X 10.9
Firefox 30.0
Chrome ≥39
(Chromium bug 388666)
Safari 7.0.5 不可用 仅当包含 tabindex 属性时
Internet Explorer 11 不可用
Presto (Opera 12)
轻触一个 <a> 标签是否使其获得焦点?
移动浏览器 iOS 7.1.2 Android 4.4.4
Safari Mobile 仅当包含 tabindex 属性时 不可用
Chrome 35 未知 仅当包含 tabindex 属性时

规范

Specification Status Comment
Referrer Policy
referrer attribute
Candidate Recommendation Added the referrer attribute.
HTML Living Standard
<a>
Living Standard  
HTML5
<a>
Recommendation  
HTML 4.01 Specification
<a>
Recommendation  

浏览器兼容性 

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 1.0 (1.7 or earlier) [1] (Yes) (Yes) (Yes)
href="#top" (Yes) 10.0 (10.0) (Yes) (Yes) (Yes)
download 14 20.0 (20.0) Edge 13 15 未实现
ping (Yes) 未实现 [2] 未实现 (Yes) 未实现
referrer 46.0 [3]  42 (42) 未实现 未实现 未实现
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support (Yes) (Yes) 1.0 (1.0) [1] (Yes) (Yes) (Yes) (Yes)
href="#top" (Yes) ? 10.0 (10.0) (Yes) (Yes) (Yes) ?
download (Yes) ? 20.0 (20.0) 未实现 ? 未实现 ?
ping ? ? 未实现 [2] ? ? ? ?
referrer 未实现 46.0 [3] 42.0 (42.0) 未实现 未实现 未实现 46.0 [3]

[1] 从 Gecko 41 (Firefox 41.0 / Thunderbird 41.0 / SeaMonkey 2.38), <a> 没有href属性不再列为互动内容。点击<label> 里面的<a> 将激活标签的内容 (bug 1167816).

[2] 默认禁用

[3] 在 flag 背后实现

[3] 在 flag 背后时限为 referrerpolicy


相关链接 

文档标签和贡献者

最后编辑者: JimmieMax,