尝试一下
You can reach Michael at:
li {
margin-bottom: 0.5rem;
}
属性
该元素的属性包含全局属性。
download
导致浏览器将链接的 URL 视为下载资源。可以使用或不使用 filename 值:
如果没有指定值,浏览器会从多个来源决定文件名和扩展名:
Content-Disposition HTTP 标头。
URL 路径的最后一段。
媒体类型。来自 Content-Type 标头,data: URL 的开头,或 blob: URL 的 Blob.type。
filename:决定文件名的值。/ 和 \ 被转化为下划线(_)。文件系统可能会阻止文件名中其他的字符,因此浏览器会在必要时适当调整文件名。
备注:
download 只在同源 URL 或 blob:、data: 协议起作用。
浏览器对待下载的方式因浏览器、用户设置和其他因素而异。在下载开始之前,可能会提示用户,或者自动保存文件,或者自动打开。自动打开要么在外部应用程序中,要么在浏览器本身中。
如果 Content-Disposition 标头的信息与 download 属性不同,产生的行为可能不同:
如果文件头指定了一个 filename,它将优先于 download 属性中指定的文件名。
如果标头指定了 inline 的处置方式,Chrome 和 Firefox 会优先考虑该属性并将其视为下载资源。旧的 Firefox 浏览器(版本 82 之前)优先考虑该标头,并将内联显示内容。
href
超链接所指向的 URL。链接不限于基于 HTTP 的 URL——它们可以使用浏览器支持的任何 URL 协议:
使用文档片段链接到页面的某一段
使用文本片段链接到某一段文字
使用媒体片段链接到某个媒体文件
使用 tel: URL 链接到一个电话号码
使用 mailto: URL 链接到一个邮箱地址
如果 web 浏览器不能支持其他 URL 协议,网站可以使用 registerProtocolHandler()
hreflang
该属性用于指定所链接到的文档的人类语言。其仅提供建议,并没有内置的功能。其允许的值与全局的 lang 属性一致。
ping
包含一个以空格分隔的 URL 列表,当跟随超链接时,浏览器会发送带有正文 PING 的 POST 请求。通常用于跟踪。
referrerpolicy
在跟随链接时,referrer 需要发送多少内容:
no-referrer:Referer 标头将不会被发送。
no-referrer-when-downgrade:如果没有 TLS(HTTPS),Referer 头将不会被发送到源上。
origin:发送的 referrer 将被限制在其页面的来源:协议、主机和端口。
origin-when-cross-origin:发送到其他源的 referrer 将只包含协议、主机和端口,而导航到相同的源仍将包括路径。
same-origin:将向同源地址发送 referrer,但跨源请求不包含 referrer 信息。
strict-origin:当协议安全级别保持不变(HTTPS→HTTPS)时,只将文档的来源作为 referrer 发送,但不要将其发送到安全性较低的目的地(HTTPS→HTTP)。
strict-origin-when-cross-origin(默认):在执行同源请求时发送完整的 URL,在协议安全级别保持不变时只发送源(HTTPS→HTTPS),对安全性较低的目的地不发送标头(HTTPS→HTTP)。
unsafe-url:表示 referrer 将会包含源和路径(但是不包含片段、密码或用户名)。此值是不安全的,因为它可能会将受 TLS 保护的资源的源和路径泄露到不安全的源中。
rel
该属性指定了目标对象到链接对象的关系。
target
该属性指定在何处显示链接的 URL,作为浏览上下文的名称(标签、窗口或
_self:当前页面加载。(默认)
_blank:通常在新标签页打开,但用户可以通过配置选择在新窗口打开。
_parent:当前浏览环境的父级浏览上下文。如果没有父级框架,行为与 _self 相同。
_top:最顶级的浏览上下文(当前浏览上下文中最“高”的祖先)。如果没有祖先,行为与 _self 相同。
备注:在 元素上使用 target="_blank" 隐式提供了与使用 rel="noopener" 相同的 rel 行为,即不会设置 window.opener。
type
该属性指定在一个 MIME 类型链接目标的形式的媒体类型。没有内置的功能。
已弃用属性
charset
已弃用
此属性定义链接资源的字符编码。
备注:该属性已弃用,不应由作者使用。请在链接的 URL 上使用 HTTP Content-Type 标头。
coords
已弃用
与 shape 属性一同使用,以逗号分隔的坐标列表。
name
已弃用
在定义一个可能的目标位置时曾经是必需的。在 HTML 4.01 规范中, 元素可以同时使用 id 和 name,只要它们有相同的值。
备注:使用全局属性 id 来代替。
rev
已弃用
指定一个反向链接;与 rel 属性作用相反。因为非常混乱而弃用。
shape
已弃用
图像映射(image map)中超链接区域的形状。
备注:使用 元素来代替图像映射。
示例
链接到绝对地址
HTML
html Mozilla
结果
链接到相对地址
HTML
html相对于协议的 URL
a {
display: block;
margin-bottom: 0.5em;
}
结果
链接到相同页面的元素上
html
更下面的部分
结果
备注:如 HTML 规范所定义的那样,你可以使用 href="#top" 或空片段(href="#")来链接到当前页面的顶部。
链接到 email 地址
要创建在用户的电子邮件程序中打开的链接,让他们发送一个新的信息,请使用 mailto: 协议:
结果
有关 mailto: URL 协议的更多细节,比如如何包含主题、正文,或其他预定内容,参考 Email 链接或 RFC 6068。
链接到电话号码
html+49 157 0156
结果
tel: 链接行为随设备能力而变化:
蜂窝设备会自动拨出号码。
大多数操作系统都有可以打电话的程序,如 Skype 或 FaceTime。
网站可以通过 registerProtocolHandler 拨打电话,如 web.skype.com。
其他行为包括将号码保存到联系人,或将号码发送到另一个设备。
关于 tel: URL 协议的语法、附加特性和其他细节,见 RFC 3966。
使用 download 属性将
要把
含有保存链接的示例画图程序
HTML
html
按下鼠标并移动来完成你的作画。
CSS
csshtml {
font-family: sans-serif;
}
canvas {
background: #fff;
border: 1px dashed;
}
a {
display: inline-block;
background: #69c;
color: #fff;
padding: 5px 10px;
}
JavaScript
jsconst canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
c.fillStyle = "hotpink";
function draw(x, y) {
if (isDrawing) {
c.beginPath();
c.arc(x, y, 10, 0, Math.PI * 2);
c.closePath();
c.fill();
}
}
canvas.addEventListener("mousemove", (event) =>
draw(event.offsetX, event.offsetY),
);
canvas.addEventListener("mousedown", () => (isDrawing = true));
canvas.addEventListener("mouseup", () => (isDrawing = false));
document
.querySelector("a")
.addEventListener(
"click",
(event) => (event.target.href = canvas.toDataURL()),
);
结果
安全与隐私
元素会对用户的安全和隐私产生影响。请参阅 Referer 标头:隐私和安全问题了解情况。
使用 target="_blank" 而不使用 rel="noreferrer" 和 rel="noopener" 会使网站容易受到 window.opener 的 API 攻击。不过请注意,在较新的浏览器版本中,设置 target="_blank" 隐式地提供了与设置 rel="noopener" 同样的保护。详情见浏览器兼容性。
无障碍
强调链接文本
链接内的内容应表明链接的去向,即使脱离了上下文。
无障碍性差的链接文本
一个通常的错误在于只链接了“点击这里”或“这里”词语:
html
在这里了解到有关产品的更多信息。
结果
强调链接文本
幸运的是,这是一个很容易解决的问题,而且实际上比无障碍性差的版本要短一些!
html
了解有关产品的更多信息。
结果
辅助软件有快捷键来列出页面上的所有链接。然而,强大的链接文本对所有用户都有好处。“列出所有链接”的快捷方式模仿了视力正常的用户快速扫描页面的方式。
onclick 事件
锚点元素经常被滥用为假按钮,将其 href 设置为 # 或 javascript:void(0) 以防止页面刷新,然后监听其 click 事件。
这些假的 href 值在复制/拖动链接、在新的标签/窗口中打开链接、书签,或当 JavaScript 正在加载、出错或被禁用时,会导致意外行为。它们还向辅助技术(如屏幕阅读器)传达不正确的语义。
请使用
外部链接与链接至非 HTML 资源
通过 target="_blank" 在新标签/窗口中打开的链接,或指向下载文件的链接,应说明在跟踪链接时将发生什么。
当一个新的标签、窗口或应用程序意外打开时,有低视力状况的人、借助屏幕阅读技术导航的人或有认知障碍的人可能会感到困惑。老式的读屏软件甚至可能不会宣布这种行为。
打开新标签页/新窗口的链接
Wikipedia(将在新标签页中打开)
结果
链接至非 HTML 资源
如果使用图标标志链接行为,确保其具有替代文本:
Wikipedia
2017 年度报告
结果
WebAIM: 链接和超文本 - 超文本链接
MDN / 理解 WCAG,准则 3.2
G200:只有在必要时才从链接中打开新窗口和标签
G201:在打开新窗口时给用户预先警告
跳转链接
跳转链接(skip link)是在
内容中尽可能早地放置一个链接,指向页面主要内容的开头。通常情况下,CSS 会将跳转链接隐藏在屏幕之外,直到被聚焦。html
css.skip-link {
position: absolute;
top: -3em;
background: #fff;
}
.skip-link:focus {
top: 0;
}
结果
跳转链接让键盘用户绕过多个页面中重复的内容,如标题导航。
跳转链接对于借助辅助技术(如开关控制、语音命令或口棒/头棒)进行导航的人来说特别有用,因为在这种情况下,在重复的链接中移动的行为可能很费力。
WebAIM:“跳过导航”链接
如何使用跳过导航链接
MDN / 理解 WCAG,准则 2.4
理解成功标准 2.4.1
尺寸和距离
尺寸
交互式元素,如链接,应提供足够大的区域,以便于激活它们。这有助于各种人,包括那些有运动控制问题的人和那些使用不精确输入的人,如触摸屏。建议最小尺寸为 44×44 CSS 像素。
散文内容中的纯文本链接不受这一要求影响,但确保有足够的文本超链接,以便于激活,仍然是一个好主意。
理解成功标准 2.5.5:目标尺寸
目标尺寸和标准 2.5.5
快速测试:大型触摸目标
距离
交互式元素,如链接,放置在视觉上很近的地方,应该有空间将它们分开。间隔有助于有运动控制问题的人,否则他们可能会意外地激活错误的互动内容。
间隔可以使用 CSS 属性来创建,如 margin。
Hand tremors 和“巨大按钮问题”
技术概要
内容分类
流式内容、
短语内容、
交互内容、可感知内容
允许的内容
透明的,但是后代不可以为交互内容或
a 元素,且后代不可以指定 tabindex 属性
标签省略
不允许,开始标签和结束标签都不能省略。
允许的父元素
任何接受短语内容的元素,或任何接受流式内容但不是另外一个 元素的元素。
隐含的 ARIA 角色
当 href 属性存在时,为 link,否则没有相应的角色
允许的 ARIA 角色
当 href 属性存在时:
button
checkbox
menuitem
menuitemcheckbox
menuitemradio
option
radio
switch
tab
treeitem
当 href 属性不存在时:
任何
DOM 接口
HTMLAnchorElement
规范
Specification
HTML# the-a-element
浏览器兼容性
参见
:link 是一个 CSS 伪类,将匹配 元素,其 href 属性中的 URL 用户尚未访问。
:visited 是一个 CSS 伪类,将匹配 元素,其 href 属性中的 URL 被用户在过去访问过。
:any-link 是一个 CSS 伪类,将匹配带有 href 属性的 元素。
文本片段是添加到 URL 的用户代理指令,允许内容作者链接到页面上的特定文本,而不需要 ID。
Help improve MDN
Was this page helpful to you?
Yes
No
Learn how to contribute
This page was last modified on 2025年12月2日 by MDN contributors.
View this page on GitHub • Report a problem with this content