<a>：锚元素

此元素的属性包括 全局属性。

attributionsrc 实验性

指定您希望浏览器发送 Attribution-Reporting-Eligible 头部。在服务器端，这用于触发在响应中发送 Attribution-Reporting-Register-Source 头部，以注册 基于导航的归因来源。

当用户点击链接时，浏览器会存储与基于导航的归因来源关联的源数据（如 Attribution-Reporting-Register-Source 响应头部中提供）。有关更多详细信息，请参阅 归因报告 API。

您可以设置此属性的两个版本

• 布尔值，即仅使用 attributionsrc 名称。这表示您希望将 Attribution-Reporting-Eligible 头部发送到与 href 属性指向的同一服务器。当您在同一服务器上处理归因源注册时，这很好用。
• 包含一个或多个 URL 的值，例如
  html

  attributionsrc="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-Disposition HTTP 头部
  • 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

在遵循链接时发送多少 referrer。

• no-referrer：不会发送 Referer 头部。
• no-referrer-when-downgrade：不会将 Referer 头部发送到没有 TLS（HTTPS）的 来源。
• 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

链接的 URL 作为空格分隔的链接类型的关系。

target

在何处显示链接的 URL，作为浏览上下文（选项卡、窗口或 <iframe>）的名称。以下关键字对加载 URL 的位置具有特殊含义

• _self：当前浏览上下文。（默认）
• _blank：通常是一个新标签页，但用户可以配置浏览器改为打开一个新窗口。
• _parent：当前浏览上下文的父浏览上下文。如果没有父级，则表现为 _self。
• _top：最顶层的浏览上下文。具体来说，这意味着“最高”上下文是当前上下文的祖先。如果没有祖先，则表现为 _self。
• _unfencedTop：允许嵌入的 fenced frame 导航顶级 frame（即遍历围栏 frame 的根目录之外，与其他保留的目的地不同）。请注意，如果在围栏 frame 上下文之外使用此选项，导航仍将成功，但它不会像保留关键字那样起作用。

注意：在 <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>

结果

辅助软件有快捷方式来列出页面上的所有链接。但是，强链接文本对所有用户都有益 - “列出所有链接”快捷方式模拟了视力正常的用户如何快速扫描页面。

锚元素通常被滥用为伪按钮，方法是将其 href 设置为 # 或 javascript:void(0) 以防止页面刷新，然后侦听其 click 事件。

这些虚假的 href 值在复制/拖动链接、在新标签页/窗口中打开链接、添加书签或 JavaScript 加载、错误或被禁用时会导致意外行为。它们还会向辅助技术（如屏幕阅读器）传达错误的语义。

改为使用 <button>。一般来说，您应该只将超链接用于导航到真实的 URL。

通过 target="_blank" 在新标签页/窗口中打开的链接，或指向下载文件的链接应指示在遵循链接时会发生什么。

视力低下、使用屏幕阅读器或存在认知障碍的人，当新标签页、窗口或应用程序意外打开时可能会感到困惑。较旧的屏幕阅读器软件甚至可能无法宣布此行为。

打开新标签页/窗口的链接

<a target="_blank" href="https://www.wikipedia.org">
  Wikipedia (opens in new tab)
</a>

结果

指向非 HTML 资源的链接

<a href="2017-annual-report.ppt">2017 Annual Report (PowerPoint)</a>

如果使用图标来表示链接行为，请确保它具有替代文本

<a target="_blank" href="https://www.wikipedia.org">
  Wikipedia
  <img alt="(opens in new tab)" src="newtab.svg" />
</a>

<a href="2017-annual-report.ppt">
  2017 Annual Report
  <img alt="(PowerPoint file)" src="ppt-icon.svg" />
</a>

结果

• WebAIM：链接和超文本 - 超文本链接
• MDN / 理解 WCAG，指南 3.2
• G200：仅在必要时从链接打开新窗口和标签页
• G201：在打开新窗口时向用户发出预警

跳过链接是在<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: #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）创建间距。

• 手部震颤和巨型按钮问题

HTML

<a href="https://www.mozilla.com">Mozilla</a>

结果

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 {
  display: block;
  margin-bottom: 0.5em;
}

结果

<!-- <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>

结果

要创建在用户的电子邮件程序中打开的链接，以便让他们发送新邮件，请使用 mailto: 方案

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

结果

有关 mailto: URL 的详细信息（例如，包括主题或正文），请参阅电子邮件链接或RFC 6068。

<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。

要将<canvas>元素的内容保存为图像，您可以创建一个链接，其中 href 是使用 JavaScript 创建的 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: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  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" 相同的保护。有关详细信息，请参阅浏览器兼容性。

• <link>类似于 <a>，但用于对用户不可见的元数据超链接。
• :link是一个 CSS 伪类，它将匹配 href 属性中包含 URL 且用户尚未访问过的 <a> 元素。
• :visited是一个 CSS 伪类，它将匹配 href 属性中包含 URL 且用户过去访问过的 <a> 元素。
• :any-link是一个 CSS 伪类，它将匹配具有 href 属性的 <a> 元素。
• 文本片段是添加到 URL 中的用户代理指令，允许内容作者链接到页面上的特定文本，而无需使用 ID。