HTML <a>
元素 (或锚元素) 创建一个到其他网页,文件,同一页面内的位置,电子邮件地址或任何其他URL的超链接。
内容分类 | 流内容,表述内容,互动的内容,可触的内容。 |
---|---|
允许的内容 | Transparent, containing either flow content (excluding interactive content) or phrasing content. |
标签省略 | 不允许,开始标签和结束标签都不能省略。 |
允许的父元素 | Any element that accepts phrasing content, or any element that accepts flow content, but always excluding <a> elements (according to the logical principle of symmetry, if <a> tag, as a parent, can not have interactive content, then the same <a> content can not have <a> tag as its parent). |
Permitted ARIA roles | button , checkbox , menuitem , menuitemcheckbox , menuitemradio , option , radio , switch , tab , treeitem |
DOM接口 | HTMLAnchorElement |
属性
该元素支持全局属性。
download
HTML5- 此属性指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件。
- 如果属性有一个值,它将在保存提示中用作预先填写的文件名 (用户仍然可以根据需要更改文件名)。对允许的值没有限制,但是/和\被转换为下划线。大多数文件系统限制文件名中的一些标点符号,浏览器会相应地调整建议的名称。
-
注意:
- 此属性仅适用于同源 URLs。
- 可以使用
blob:
URLs 和 data: URLs 以方便用户下载 JavaScript 方式生成的内容(例如使用在线绘图的Web应用创建的照片)。 - 如果HTTP头
的Content-Disposition:
存在,并且赋予了一个和这个属性不同的文件名,HTTP头优先于此属性。 - 如果这个属性存在
Content-Disposition
被设置为inline
,火狐优先 Content-Disposition,像之前文件名的情况下,而Chrome则优先download
属性。
href
-
这是一个必需属性为锚定义一个超文本链接来源。这表示链接目标的URL或URL片段。URL片段是由一个hash符号(#),它指定一个内部目标在当前文档中的位置(ID)开头的名字。URL不限于网页(HTTP)的文件。URL可能使用浏览器所支持的任何协议。例如,文件,FTP,大多数用户代理mailto工作。
-
注意: 可以使用
href="#top"
或者href="#"
链接返回到页面顶部。这种行为在HTML5上被指定。 hreflang
-
该属性用于指定链接文档的人类语言。其仅提供建议,并没有内置的功能。hreflang 允许的值由HTML5 BCP47 所决定。
referrer
- 一个指示在获取资源时应该使用哪个提交者 (referer) 的字符串:
"no-referrer"
表示Referer:
头将不会被发送。- "
no-referrer-when-downgrade
" 表示当从使用HTTPS的页面导航到不使用 TLS(HTTPS)的来源 时不会发送Referer:
头。如果没有指定策略,这将是用户代理的默认行为。 "origin"
表示 referrer将会是页面的来源,大致为这样的组合:主机和端口(不包含具体的路径和参数的信息)。- "origin-when-cross-origin" 表示导航到其它来源将会限制为这种组合:主机 + 端口,而导航到相同的来源将会包含 referrer的路径。
"unsafe-url"
表示 referrer将会包含来源和路径(但是不会是包含密码或用户名的片段)。这种情况是不安全的,因为它可能会将TLS保护的资源的来源和路径泄露给不安全的来源。
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 的恶意行为。
-
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 规范中, 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定义多边形的一个点,连续点由直线接合和,最后一个点连接到第一个点。默认为形状的值需要将整个封闭区域,典型的图像,可以使用。
示例
链接到外部地址
<!-- 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 取决于浏览器和操作系统。
桌面浏览器 | 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) | 是 | 是 |
移动浏览器 | iOS 7.1.2 | Android 4.4.4 |
---|---|---|
Safari Mobile | 仅当包含 tabindex 属性时 |
不可用 |
Chrome 35 | 未知 | 仅当包含 tabindex 属性时 |
规范
Specification | Status | Comment |
---|---|---|
Referrer Policy referrer attribute |
Editor's Draft | Added the referrer attribute. |
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] 默认禁用
[3] 在 flag 背后实现
[3] 在 flag 背后时限为 referrerpolicy
相关链接
- 其它传递本级别语义的元素:
<abbr>
,<em>
,<strong>
,<small>
,<cite>
,<q>
,<dfn>
,<time>
,<code>
,<var>
,<samp>
,<kbd>
,<sub>
,<sup>
,<b>
,<i>
,<mark>
,<ruby>
,<rp>
,<rt>
,<bdo>
,<span>
,<br>
,<wbr>
.