<a>: 锚点元素
Baseline 广泛可用 *
<a> HTML 元素（或锚点元素），通过其 href 属性，创建指向网页、文件、电子邮件地址、同一页面中的位置或任何 URL 可以寻址内容的超链接。
<a> 内的内容应该指示链接的目的地。如果 href 属性存在，当 <a> 元素获得焦点时，按下回车键将激活它。
试一试
<p>You can reach Michael at:</p>
<ul>
<li><a href="https://example.com">Website</a></li>
<li><a href="mailto:m.bluth@example.com">Email</a></li>
<li><a href="tel:+123456789">Phone</a></li>
</ul>
li {
margin-bottom: 0.5rem;
}
属性
此元素的属性包括全局属性。
attributionsrc实验性-
指定你希望浏览器发送一个
Attribution-Reporting-Eligible头。在服务器端，这用于触发在响应中发送Attribution-Reporting-Register-Source头，以注册一个基于导航的归因源。当用户点击链接时，浏览器会存储与基于导航的归因源相关联的源数据（如
Attribution-Reporting-Register-Source响应头中提供的那样）。有关更多详细信息，请参阅 归因报告 API。您可以设置此属性的两个版本
-
布尔值，即仅
attributionsrc名称。这指定你希望Attribution-Reporting-Eligible头发送到与href属性指向的同一服务器。当你处理同一服务器上的归因源注册时，这是可以的。 -
包含一个或多个 URL 的值，例如
htmlattributionsrc="https://a.example/register-source https://b.example/register-source"这在请求的资源不在你控制的服务器上，或者你只想在不同的服务器上处理归因源注册时很有用。在这种情况下，你可以指定一个或多个 URL 作为
attributionsrc的值。当资源请求发生时，Attribution-Reporting-Eligible头将除了发送到资源来源之外，还会发送到attributionsrc中指定的 URL。这些 URL 随后可以响应Attribution-Reporting-Register-Source以完成注册。注意：指定多个 URL 意味着可以在同一功能上注册多个归因源。例如，您可能正在尝试衡量不同广告系列的成功，这涉及生成关于不同数据的不同报告。
<a>元素不能用作归因触发器，只能用作源。 -
download-
使浏览器将链接的 URL 视为下载。可以有或没有
filename值。-
如果没有值，浏览器将建议一个文件名/扩展名，该文件名/扩展名由各种来源生成。
Content-DispositionHTTP 头- URL 路径中的最后一段
- 媒体类型（来自
Content-Type头、data:URL 的开头，或Blob.type，用于blob:URL）
-
filename：定义一个值并建议其作为文件名。/和\字符将转换为下划线（_）。文件系统可能会禁止文件名中的其他字符，因此浏览器会根据需要调整建议的名称。
备注
download仅适用于同源 URL，或blob:和data:方案。- 浏览器处理下载的方式因浏览器、用户设置和其他因素而异。用户可能会在下载开始前收到提示，或者文件可能会自动保存，或者文件可能会自动打开，无论是在外部应用程序中还是在浏览器本身中。
- 如果
Content-Disposition头中的信息与download属性不同，则结果行为可能会有所不同。- 如果头指定了
filename，则它优先于download属性中指定的文件名。 - 如果头指定了
inline的处置，Chrome 和 Firefox 优先考虑属性并将其视为下载。旧版 Firefox（82 之前）优先考虑头并将内容内联显示。
- 如果头指定了
-
href-
超链接指向的 URL。链接不限于基于 HTTP 的 URL — 它们可以使用浏览器支持的任何 URL 方案。
- 带
tel:URL 的电话号码 - 带
mailto:URL 的电子邮件地址 - 带
sms:URL 的短信 - 带
javascript:URL 的可执行代码 - 虽然 Web 浏览器可能不支持其他 URL 方案，但网站可以使用
registerProtocolHandler()
此外，其他 URL 功能可以定位资源的特定部分，包括
- 带文档片段的页面部分
- 带文本片段的特定文本部分
- 带媒体片段的媒体文件片段
- 带
hreflang-
暗示链接 URL 的人类语言。无内置功能。允许的值与全局
lang属性相同。 ping-
一个空格分隔的 URL 列表。当遵循链接时，浏览器将向这些 URL 发送正文为
PING的POST请求。通常用于跟踪。 referrerpolicy-
遵循链接时发送引用者的程度。
no-referrer：将不发送Referer头。no-referrer-when-downgrade：将不向没有 TLS (HTTPS) 的源发送Referer头。origin：发送的引用者将仅限于引用页面的源：其方案、主机和端口。origin-when-cross-origin：发送到其他源的引用者将仅限于方案、主机和端口。同一源上的导航仍将包含路径。same-origin：将为同源发送引用者，但跨域请求将不包含引用者信息。strict-origin：仅当协议安全级别保持不变 (HTTPS→HTTPS) 时，才将文档的源作为引用者发送，但不要将其发送到安全性较低的目标 (HTTPS→HTTP)。strict-origin-when-cross-origin（默认）：执行同源请求时发送完整 URL，仅当协议安全级别保持不变 (HTTPS→HTTPS) 时发送源，不向安全性较低的目标 (HTTPS→HTTP) 发送任何头。unsafe-url：引用者将包含源和路径（但不包含片段、密码或用户名）。此值不安全，因为它会将 TLS 保护资源的源和路径泄漏到不安全的源。
rel-
链接 URL 的关系，作为空格分隔的链接类型。
目标-
显示链接 URL 的位置，作为浏览上下文（一个标签页、窗口或
<iframe>）的名称。以下关键字对于加载 URL 的位置具有特殊含义：_self：当前浏览上下文。（默认）_blank：通常是新标签页，但用户可以配置浏览器改为打开新窗口。_parent：当前浏览上下文的父级浏览上下文。如果没有父级，则行为与_self相同。_top：最顶层的浏览上下文。具体来说，这意味着是当前上下文的最高祖先上下文。如果没有祖先，则行为与_self相同。_unfencedTop：允许嵌入的围栏框架导航顶级框架（即，超越围栏框架的根，与其他保留目的地不同）。请注意，如果在围栏框架上下文之外使用此功能，导航仍将成功，但它不会像保留关键字那样起作用。
注意：在
<a>元素上设置target="_blank"隐式提供了与设置rel="noopener"相同的rel行为，后者不设置window.opener。 type-
通过 MIME 类型提示链接 URL 的格式。无内置功能。
已弃用属性
charset已弃用-
暗示链接 URL 的字符编码。
注意：此属性已废弃，作者不应使用。请在链接 URL 上使用 HTTP
Content-Type头。 coords已废弃-
与
shape属性一起使用。一个逗号分隔的坐标列表。 name已废弃-
过去用于定义页面中可能的目标位置。在 HTML 4.01 中，
id和name都可以在<a>上使用，只要它们具有相同的值。注意：请改用全局属性
id。 rev已废弃-
指定一个反向链接；与
rel属性相反。因过于混乱而废弃。 shape已废弃-
图像地图中超链接区域的形状。
注意：请改用
<area>元素来创建图像地图。
无障碍
强链接文本
链接内的内容应指示链接指向何处，即使在脱离上下文的情况下也是如此。
不可访问的弱链接文本
一个不幸的常见错误是只链接“点击这里”或“这里”等词语。
<p>Learn more about our products <a href="/products">here</a>.</p>
结果
可访问的强链接文本
幸运的是，这是一个简单的修复方法，而且实际上比不可访问的版本更短！
<p>Learn more <a href="/products">about our products</a>.</p>
结果
辅助软件有快捷方式可以列出页面上的所有链接。然而，强链接文本对所有用户都有益——“列出所有链接”快捷方式模拟了有视力用户快速浏览页面的方式。
onclick 事件
锚点元素经常被滥用为假按钮，通过将其 href 设置为 # 或 javascript:void(0) 以防止页面刷新，然后监听它们的 click 事件。
这些虚假的 href 值在复制/拖动链接、在新标签页/窗口中打开链接、书签，或在 JavaScript 加载、出错或禁用时导致意外行为。它们还会向辅助技术（如屏幕阅读器）传达不正确的语义。
请改用 <button>。一般来说，你只应将超链接用于导航到真实的 URL。
外部链接和链接到非 HTML 资源
通过 target="_blank" 在新标签页/窗口中打开的链接，或指向下载文件的链接，应指示在遵循链接时会发生什么。
患有低视力、借助屏幕阅读技术导航或有认知问题的人可能会在新标签页、窗口或应用程序意外打开时感到困惑。较旧的屏幕阅读软件甚至可能不会宣布此行为。
在新标签页/窗口中打开的链接
<a target="_blank" href="https://www.wikipedia.org">
Wikipedia (opens in new tab)
</a>
结果
链接到非 HTML 资源
如果使用图标来表示链接行为，请确保它具有 alt 属性以描述其用途。如果图标丢失，alt 属性的内容仍将传达链接的行为。
<p>
<a href="https://www.wikipedia.org/" target="_blank">
Wikipedia
<img src="new-tab.svg" width="14" alt="(Opens in new tab)" />
</a>
<br />
<a href="2017-annual-report.ppt">
2017 annual report
<img src="powerpoint.svg" width="14" alt="(PowerPoint file)" />
</a>
</p>
<p>
<a href="https://www.wikipedia.org/" target="_blank">
Wikipedia
<img src="missing-icon.svg" width="14" alt="(Opens in new tab)" />
</a>
<br />
<a href="2017-annual-report.ppt">
2017 annual report
<img src="missing-icon.svg" width="14" alt="(PowerPoint file)" />
</a>
</p>
结果
跳过链接
跳过链接是尽可能早地放置在 <body> 内容中的链接，指向页面主要内容的开头。通常，CSS 会将跳过链接隐藏在屏幕外，直到获得焦点。
<body>
<a href="#content" class="skip-link">Skip to main content</a>
<header>…</header>
<!-- The skip link jumps to here -->
<main id="content"></main>
</body>
.skip-link {
position: absolute;
top: -3em;
background: white;
}
.skip-link:focus {
top: 0;
}
结果
跳过链接允许键盘用户绕过在多个页面中重复的内容，例如头部导航。
跳过链接对于借助辅助技术（如开关控制、语音命令或口杖/头杖）进行导航的人特别有用，因为通过重复链接的操作可能很费力。
大小和邻近度
大小
交互式元素，例如链接，应提供足够大的区域，以便轻松激活它们。这有助于各种人群，包括那些有运动控制问题的人和使用不精确输入（如触摸屏）的人。建议最小尺寸为 44×44 CSS 像素。
散文内容中的纯文本链接不受此要求限制，但仍然最好确保有足够的文本被超链接以方便激活。
临近度
交互式元素，例如在视觉上靠近的链接，应有空间将它们分开。间距有助于有运动控制问题的人，他们否则可能会不小心激活错误的交互式内容。
可以使用 CSS 属性（如 margin）创建间距。
示例
链接到绝对 URL
HTML
<a href="https://www.mozilla.com">Mozilla</a>
结果
链接到相对 URL
HTML
<a href="//example.com">Scheme-relative URL</a>
<a href="/en-US/docs/Web/HTML">Origin-relative URL</a>
<a href="p">Directory-relative URL</a>
<a href="./p">Directory-relative URL</a>
<a href="../p">Parent-directory-relative URL</a>
结果
链接到同一页面上的元素
<!-- <a> element links to the section below -->
<p><a href="#Section_further_down">Jump to the heading below</a></p>
<!-- Heading to link to -->
<h2 id="Section_further_down">Section further down</h2>
结果
注意：你可以使用 href="#top" 或空片段（href="#"）链接到当前页面顶部，如 HTML 规范中所定义。
链接到电子邮件地址
要创建在新邮件中打开用户电子邮件程序的链接，请使用 mailto: 方案。
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
结果
链接到电话号码
<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>
结果
tel: 链接行为因设备功能而异。
- 移动设备自动拨号。
- 大多数操作系统都有可以拨打电话的程序，例如 Skype 或 FaceTime。
- 网站可以使用
registerProtocolHandler拨打电话，例如web.skype.com。 - 其他行为包括将号码保存到联系人，或将号码发送到其他设备。
有关 tel: URL 方案的语法、附加功能和其他详细信息，请参阅 RFC 3966。
使用 download 属性将 <canvas> 保存为 PNG
要将 <canvas> 元素的内容保存为图像，你可以创建一个链接，其中 href 是使用 JavaScript 创建的 canvas 数据作为 data: URL，并且 download 属性提供下载的 PNG 文件的文件名。
带有保存链接的示例绘图应用程序
HTML
<p>
Paint by holding down the mouse button and moving it.
<a href="" download="my_painting.png">Download my painting</a>
</p>
<canvas width="300" height="300"></canvas>
CSS
html {
font-family: sans-serif;
}
canvas {
background: white;
border: 1px dashed;
}
a {
display: inline-block;
background: #6699cc;
color: white;
padding: 5px 10px;
}
JavaScript
const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
c.fillStyle = "hotpink";
let isDrawing;
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()),
);
结果
安全和隐私
<a> 元素可能对用户的安全和隐私产生影响。有关信息，请参阅Referer 头：隐私和安全问题。
在不使用 rel="noreferrer" 和 rel="noopener" 的情况下使用 target="_blank" 会使网站容易受到 window.opener API 利用攻击，尽管请注意，在较新的浏览器版本中，设置 target="_blank" 隐式提供了与设置 rel="noopener" 相同的保护。有关详细信息，请参阅浏览器兼容性。
技术摘要
规范
| 规范 |
|---|
| HTML # a-元素 |
浏览器兼容性
加载中…