这篇翻译不完整。请帮忙从英语翻译这篇文章。
HTML 中的 <a>元素
(或HTML锚元素, Anchor Element) 用于定义一个超链接到同一页上的某个位置,或者在网络上的任何其它页面。它也可以用于(一个过时的方式),以创建用于一个锚点——即超链接定位到页面中的内容,因此链接不只是连接到一个页面的顶部(也可以是页面的中部或者底部)。
<a href="https://developer.mozilla.org">MDN</a>
- 内容分类 流内容,表述内容,互动的内容,可触的内容。
- 允许的内容 透明,要么流内容,要么表述内容。
- 标签省略 不允许,开始标签和结束标签都不能省略。
- 允许的父元素 任何元素都接受表述内容或流内容。
- DOM接口
HTMLAnchorElement
属性
该元素支持全局属性。
- 下载
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所决定。
-
media
HTML5 - 该属性指定目标链接的媒介类型。它的值必须是 媒体查询(media query). 这个属性主要是允许用户代理,挑选最适合的设备,在链接到外部样式表时非常有用。
ping
HTML5- “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。
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 规范中, id 和 name 都可以使用 <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定义多边形的一个点,连续点由直线接合和,最后一个点连接到第一个点。默认为形状的值需要将整个封闭区域,典型的图像,可以使用。
-
不标准的
- 绑定的字段
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>
结果
创建一个可点击的图片
这个小例子使用图像链接到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).
[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.
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 |
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.
相关链接
- Other elements conveying text-level semantics:
<abbr>
,<em>
,<strong>
,<small>
,<cite>
,<q>
,<dfn>
,<time>
,<code>
,<var>
,<samp>
,<kbd>
,<sub>
,<sup>
,<b>
,<i>
,<mark>
,<ruby>
,<rp>
,<rt>
,<bdo>
,<span>
,<br>
,<wbr>
.