Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

这篇翻译不完整。请帮忙从英语翻译这篇文章

 HTML 中的 <a>元素 (或HTML锚元素, Anchor Element) 用于定义一个超链接到同一页上的某个位置,或者在网络上的任何其它页面。它也可以用于(一个过时的方式),以创建用于一个锚点——即超链接定位到页面中的内容,因此链接不只是连接到一个页面的顶部(也可以是页面的中部或者底部)。

<a href="https://developer.mozilla.org">MDN</a>

属性

该元素支持全局属性

下载download HTML5
此属性,如果存在,表明笔者拟用于下载资源的超级链接。如果属性有一个值,浏览器应该解释,作为默认的文件名,笔者建议使用本地文件系统中的资源标记。允许值没有任何限制,但你应该考虑大多数文件系统都用什么标点符号,在文件名支持方面的局限性,以及浏览器都可能调整相应的文件名。

注意事项:

  • 可以被用于,blob: URLs 和 数据: URLs以方便用户下载编程方式生成的使用JavaScript的内容(例如使用在线绘图的Web应用创建的照片)。
  • 如果HTTP头的Content-Disposition:存在,并且赋予了一个和这个属性不同的文件名,HTTP头优先于此属性。
  • 如果这个属性存在Content-Disposition:被设置为inline,火狐优先Content-Disposition,像之前文件名​​的情况下,而Chrome则优先下载属性
  • 这个属性赋予相同来源的资源的链接。
链接href

这是一个必需属性为锚定义一个超文本链接来源这表示链接目标的URL或URL片段。URL片段是由一个hash符号(#),它指定一个内部目标在当前文档中的位置(ID开头的名字。URL不限于网页(HTTP)的文件。URL可能使用浏览器所支持的任何协议。例如,文件FTP大多数用户代理mailto工作。

注意事项: 您可以使用"top"特殊词来创建一个链接返回到页面顶部;例如<a href="#top">返回顶部</ a>的这种行为在HTML5上被指定

hreflang

该属性用于指定被链接文档的语言。仅在使用 href 属性时才可以指定 hreflang 属性。和 lang 属性类似,hreflang 属性的值也是 ISO 标准的双字符语言代码。和 lang 属性不同的是,hreflang 属性不会指定标签中的内容所使用的语言,而是指定被 href 属性调用的文档所使用的语言。hreflang允许的值由HTML5 BCP47 和HTML RFC1766所决定。

 mediaHTML5
该属性指定目标链接的媒介类型。它的值必须是 媒体查询(media query). 这个属性主要是允许用户代理,挑选最适合的设备,在链接到外部样式表时非常有用。

使用说明:

  • 在 HTML 4中,只有简单的空格分隔的列表媒体描述文字,即媒体类型和组,定义并允许作为这个属性的值,如打印、屏幕、听觉、盲文,……HTML 5将其扩展成所有媒体查询,这是HTML 4的允许值的超集。
  • 浏览器不支持CSS3媒体查询 necessarilly不一定能认识到足够多的链接,不要忘记设置备用链接,限制媒体查询定义在HTML 4。
pingHTML5
“ping”属性,如果存在的话,用户追踪超链接将会发送的资源的URL的通知/ping
从Firefox 3 beta 3开始,"ping"的支持被禁用。 bug 415168
referrer
一个指示在获取资源时应该使用哪个提交者 (referer) 的字符串:
  • "no-referrer" 表示 Referer: 头将不会被发送。
  • "no-referrer-when-downgrade" 表示当从使用HTTPS的页面导航到不使用 TLS(HTTPS)的来源 时不会发送 Referer: 头。如果没有指定策略,这将是用户代理的默认行为。
  • "origin" 表示 referrer将会是页面的来源,大致为这样的组合:主机和端口(不包含具体的路径和参数的信息)。
  • "origin-when-cross-origin" 表示导航到其它来源将会限制为这种组合:主机 + 端口,而导航到相同的来源将会包含 referrer的路径。
  • "unsafe-url" 表示 referrer将会包含来源和路径(但是不会是包含密码或用户名的片段)。这种情况是不安全的,因为它可能会将TLS保护的资源的来源和路径泄露给不安全的来源。

注意:这个属性的实现与Chrome 46及以上中 referrerpolicy 相同。

rel
对于锚点来说,rel具有href的属性, 该属性指定了目标对象到链接对象的关系。该值是空格分隔的列表关系值。 该值和语义可能将会被一些权威文档编者赋予不同的含义。 在默认的情况下,如果没有其它定义,是无效的,只有在 href 存在的情况下,使用该属性。
target
该属性指定在何处显示链接的资源。 I在HTML4,这是的名称,或为一个关键字,一个框。 HTML5中,它是一个名字或关键字为,一个浏览上下文(例如,标签,窗口,或内嵌框架)。以下关键字具有特殊的意义:
  • _self: 当前页面加载,即当前的响应到同一HTML 4 frame(或HTML5浏览上下文)。此值是默认的,如果没有指定属性的话。
  • _blank: 新窗口打开,即到一个新的未命名的HTML4窗口或HTML5浏览器上下文
  • _parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文,此选项的行为方式相同_self。
  • _top: IHTML4中:加载的响应成完整的,原来的窗口,取消所有其它frame。 HTML5中:加载响应进入顶层浏览上下文(即,浏览上下文,它是当前的一个的祖先,并且没有parent)。如果没有parent框架或者浏览上下文,此选项的行为方式相同_self。
只有在href属性存在才能使用该属性。
type
该属性指定在一个MIME类型链接目标的形式的媒体类型 f通常,这提供了严格的咨询信息;然而,在未来的一个浏览器可能增加一个小图标多媒体类型。例如,浏览器可能会添加一个小喇叭图标,当类型设置为音频/ WAV。对于公认的MIME类型的完整列表,请参阅 https://www.w3.org/TR/html4/references.html#ref-MIMETYPES. 只有在href属性存在才能使用该属性。

过时的

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>元素中来定义热点而不是用形状属性。

不标准的

 

绑定的字段datafld
从该数据源绑定的数据对象,提供此属性指定列名。

使用说明: 该属性不规范,不应被使用. 为了实现其效果,使用脚本和一个机制如XMLHttpRequest来填充页面动态

支持 Gecko Presto WebKit Trident
不支持 不支持 不支持 IE4, IE5, IE6, IE7 ( IE8移除)
规范性文件 微软的数据绑定: 绑定的字段的属性 (MSDN)  
数据源datasrc

这个属性表示数据源对象的ID,供应的数据绑定到该元素。

使用说明: 该属性不规范,不应被使用为了实现其效果,使用脚本和一个机制如XMLHttpRequest来填充页面动态

支持 Gecko Presto WebKit Trident
不支持 不支持 不支持 IE4, IE5, IE6, IE7 (IE8移除)
规范性文件 微软的数据绑定: 数据源属性 (MSDN)
方法 methods
此属性值提供的信息为某对象可能要执行的功能,当使用它时,这个值通常是由HTTP协议所提供的, 但他可能 ( 类似title属性) 在链接前提供有用的咨询信息。例如,浏览器可能会因为指定方法的不同而让链接有了别样的呈现; 可搜索的链接方法可能会得到不同的图标,或一个外部链接可能会在离开当前站有不同的表现。该属性不好被理解和支持,即使定义浏览器,Internet Explorer 4。 方法属性 (MSDN)
urn
Microsoft支持的假想属性涉及一个统一资源名称(原文 uniform resource name)(URN)与链接。虽然它是基于标准的制定工作几年前,但URN的定义仍然不明确,所以这个属性是无用的。 urn Property (MSDN)

例子

链接到外部地址

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

结果

External Link

 

创建一个可点击的图片

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

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

结果

创建一个email链接

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

<a href="mailto:[email protected]">Send email to nowhere</a>

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

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

使用 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);

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

 

规范

Specification Status Comment
WHATWG HTML Living Standard
<a>
Living Standard  
HTML5
<a>
Recommendation  
HTML 4.01 Specification
<a>
Recommendation  

浏览器兼容性 

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] Disabled by default

[3] Implemented as referrerpolicy and behind a flag.

点击和聚焦

Whether clicking on an <a> causes it to (by default) become focused varies by browser and OS.

Does clicking on an <a> give it the focus?
Desktop Browsers 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 Only when it has a tabindex
Internet Explorer 11 Yes N/A
Presto (Opera 12) Yes Yes
Does tapping on an <a> give it the focus?
Mobile Browsers iOS 7.1.2 Android 4.4.4
Safari Mobile Only when it has a tabindex N/A
Chrome 35 ??? Only when it has a tabindex

备注

The following are reserved browser key bindings for the two major browsers and should not be used as values to accesskey: a, c, e, f, g, h, v, left arrow, and right arrow.

HTML 3.2 defines only name, href, rel, rev, and title.

The target attribute is not defined in browsers that do not support frames, such as Netscape 1 generation browsers. Furthermore, target is not allowed under strict variants of XHTML but is limited to frameset or transitional forms.

JavaScript recommendations

It is often the case that an anchor tag is used with the onclick event. In order to prevent the page from refreshing, href is often set to either "#" or "javascript:void(0)". Both of these values can lead to some unexpected errors when copying links and opening links in a new tab and/or window. Be aware of this for usability reasons, and when users do use anchor tags and you prevent default behavior.

相关链接 

文档标签和贡献者

 此页面的贡献者: yatace, venden, Ende93, FredWe, NIGHTEAGLE, ziyunfei, TimZhao, jessiecaisme
 最后编辑者: yatace,