<a>：锚元素

¥Attributes

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

¥This element's attributes include the global attributes.

attributionsrc Experimental

指定你希望浏览器发送 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 意味着可以在同一功能上注册多个归因源。例如，你可能有不同的活动要衡量其成功率，这涉及针对不同的数据生成不同的报告。

  ¥Note: Specifying multiple URLs means that multiple attribution sources can be registered on the same feature. You might for example have different campaigns that you are trying to measure the success of, which involve generating different reports on different data.

<a> 元素不能用作归因触发器，只能用作来源。

download

使浏览器将链接的 URL 视为下载。可以与或不与 filename 值一起使用：

• 如果没有值，浏览器将建议从各种来源生成的文件名/扩展名：
  • Content-Disposition HTTP 标头
  • URL path 中的最后一段
  • media type（从 Content-Type 标头开始，从 data: URL 开始，或从 Blob.type 开始 blob: URL）
• filename：定义一个值建议将其作为文件名。/ 和 \ 字符转换为下划线 (_)。文件系统可能禁止文件名中使用其他字符，因此浏览器将在必要时调整建议的名称。

注意：

¥Note:

• 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 的 SMS 短信
• 虽然网络浏览器可能不支持其他 URL 方案，但网站可以使用 registerProtocolHandler()

hreflang

提示链接 URL 的人类语言。没有内置功能。允许的值与 全局 lang 属性 相同。

ping

以空格分隔的 URL 列表。当点击该链接时，浏览器将向 URL 发送带有 PING 正文的 POST 请求。通常用于跟踪。

referrerpolicy

点击链接时要发送多少 referrer。

• no-referrer：Referer 标头将不会被发送。
• no-referrer-when-downgrade：如果没有 TLS (HTTPS)，Referer 标头将不会发送到 origin。
• origin：发送的引荐来源网址将仅限于引荐页面的来源：它是 scheme、host 和 port。
• origin-when-cross-origin：发送到其他来源的引用将受到方案、主机和端口的限制。同一原点的导航仍将包含该路径。
• same-origin：将发送 same origin 的引荐来源网址，但跨源请求将不包含引荐来源网址信息。
• strict-origin：仅当协议安全级别保持不变 (HTTPS→HTTPS) 时才将文档的来源作为引用站点发送，但不要将其发送到安全性较低的目的地 (HTTPS→HTTP)。
• strict-origin-when-cross-origin（默认）：执行同源请求时发送完整 URL，仅在协议安全级别保持相同时发送源（HTTPS→HTTPS），并且不向安全性较低的目的地发送标头（HTTPS→HTTP）。
• unsafe-url：引荐来源网址将包括来源和路径（但不包括 fragment、password 或 username）。此值不安全，因为它会将受 TLS 保护的资源的来源和路径泄漏到不安全的来源。

rel

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

target

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

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

注意：在 <a> 元素上设置 target="_blank" 隐式提供与设置 rel="noopener"（不设置 window.opener）相同的 rel 行为。

¥Note: Setting target="_blank" on <a> elements implicitly provides the same rel behavior as setting rel="noopener" which does not set window.opener.

type

使用 MIME type 提示链接 URL 的格式。没有内置功能。

¥Deprecated attributes

charset Deprecated

提示链接 URL 的 character encoding。

注意：该属性已被弃用，作者不应使用。在链接的 URL 上使用 HTTP Content-Type 标头。

¥Note: This attribute is deprecated and should not be used by authors. Use the HTTP Content-Type header on the linked URL.

coords Deprecated

与 shape 属性 一起使用。以逗号分隔的坐标列表。

name Deprecated

需要在页面中定义可能的目标位置。在 HTML 4.01 中，id 和 name 都可以在 <a> 上使用，只要它们具有相同的值即可。

注意：请改用全局属性 id。

¥Note: Use the global attribute id instead.

rev Deprecated

指定反向链接；与 rel 属性 相反。由于非常混乱而被弃用。

shape Deprecated

图片映射中超链接区域的形状。

注意：请改用图片映射的 <area> 元素。

¥Note: Use the <area> element for image maps instead.

¥Accessibility

¥Strong link text

链接内的内容应指示链接的去向，即使脱离上下文也是如此。

¥The content inside a link should indicate where the link goes, even out of context.

无法访问的弱链接文本

¥Inaccessible, weak link text

可悲的是，一个常见的错误是仅链接单词 "点击这里" 或 "此处"：

¥A sadly common mistake is to only link the words "click here" or "here":

<p>Learn more about our products <a href="/products">here</a>.</p>

结果

¥Result

强链接文本

¥Strong link text

幸运的是，这是一个简单的修复，而且它实际上比无法访问的版本更短！

¥Luckily, this is an easy fix, and it's actually shorter than the inaccessible version!

<p>Learn more <a href="/products">about our products</a>.</p>

结果

¥Result

辅助软件具有列出页面上所有链接的快捷方式。然而，强链接文本对所有用户都有好处 - "列出所有链接" 快捷方式模拟视力正常的用户如何快速浏览页面。

¥Assistive software has shortcuts to list all links on a page. However, strong link text benefits all users — the "list all links" shortcut emulates how sighted users quickly scan pages.

¥onclick events

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

¥Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .

当复制/拖动链接、在新选项卡/窗口中打开链接、添加书签或 JavaScript 加载、错误或禁用时，这些伪造的 href 值会导致意外行为。它们还会向屏幕阅读器等辅助技术传达不正确的语义。

¥These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.

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

¥Use a <button> instead. In general, you should only use a hyperlink for navigation to a real URL.

¥External links and linking to non-HTML resources

通过 target="_blank" 在新选项卡/窗口中打开的链接或指向下载文件的链接应指示点击该链接后会发生什么。

¥Links that open in a new tab/window via target="_blank", or links that point to a download file should indicate what will happen when the link is followed.

当新选项卡、窗口或应用意外打开时，视力低下、借助屏幕阅读技术进行导航或有认知问题的人可能会感到困惑。较旧的屏幕阅读软件甚至可能不会宣布该行为。

¥People experiencing low vision conditions, navigating with the aid of screen reading technology, or with cognitive concerns may be confused when a new tab, window, or application opens unexpectedly. Older screen-reading software may not even announce the behavior.

打开新选项卡/窗口的链接

¥Link that opens a new tab/window

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

结果

¥Result

链接到非 HTML 资源

¥Link to a non-HTML resource

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

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

¥If an icon is used to signify link behavior, make sure it has an alt text:

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

结果

¥Result

• 网络目标：链接和超文本 - 超文本链接
• MDN / Understanding WCAG, Guideline 3.2
• G200:仅在必要时从链接打开新窗口和选项卡
• G201:打开新窗口时向用户发出提前警告

¥Skip links

跳过链接是尽早放置在 <body> 内容中的链接，指向页面主要内容的开头。通常，CSS 会在屏幕外隐藏跳过链接，直到获得焦点。

¥A skip link is a link placed as early as possible in <body> content that points to the beginning of the page's main content. Usually, CSS hides a skip link offscreen until focused.

<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;
}

结果

¥Result

跳过链接使键盘用户可以绕过多个页面中重复的内容，例如标题导航。

¥Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.

跳过链接对于借助开关控制、语音命令或口棒/头棒等辅助技术进行导航的用户特别有用，在这些技术中，通过重复链接进行移动可能会很费力。

¥Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious.

• 网络目标："跳过导航" 链接
• 如何：使用跳过导航链接
• MDN / Understanding WCAG, Guideline 2.4 explanations
• 了解成功标准 2.4.1

¥Size and proximity

尺寸

¥Size

交互元素（例如链接）应该提供足够大的区域，以便于激活它们。这可以帮助各种各样的人，包括那些有运动控制问题的人以及那些使用不精确输入（例如触摸屏）的人。建议最小尺寸为 44×44 CSS 像素。

¥Interactive elements, like links, should provide an area large enough that it is easy to activate them. This helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. A minimum size of 44×44 CSS pixels is recommended.

散文内容中的纯文本链接不受此要求的约束，但确保有足够的文本超链接以便轻松激活仍然是一个好主意。

¥Text-only links in prose content are exempt from this requirement, but it's still a good idea to make sure enough text is hyperlinked to be easily activated.

• 了解成功标准 2.5.5：目标尺寸
• 目标尺寸和 2.5.5
• 快速测试：大型触摸目标

接近

¥Proximity

交互元素（如链接）放置在视觉上接近的地方应该有空间分隔它们。间距可以帮助有运动控制问题的人，否则他们可能会意外激活错误的交互内容。

¥Interactive elements, like links, placed in close visual proximity should have space separating them. Spacing helps people with motor control issues, who may otherwise accidentally activate the wrong interactive content.

可以使用 CSS 属性（如 margin）创建间距。

¥Spacing may be created using CSS properties like margin.

• 手颤抖和巨型按钮问题

¥Examples

¥Linking to an absolute URL

HTML

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

结果

¥Result

¥Linking to relative URLs

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

结果

¥Result

¥Linking to an element on the same page

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

结果

¥Result

注意：你可以使用 href="#top" 或空片段 (href="#") 链接到当前页面的顶部 正如 HTML 规范中所定义的。

¥Note: You can use href="#top" or the empty fragment (href="#") to link to the top of the current page, as defined in the HTML specification.

¥Linking to an email address

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

¥To create links that open in the user's email program to let them send a new message, use the mailto: scheme:

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

结果

¥Result

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

¥For details about mailto: URLs, such as including a subject or body, see Email links or RFC 6068.

¥Linking to telephone numbers

<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>

结果

¥Result

tel: 链路行为因设备功能而异：

¥tel: link behavior varies with device capabilities:

• 蜂窝设备自动调用号码。
• 大多数操作系统都有可以调用调用的程序，例如 Skype 或 FaceTime。
• 网站可以调用 registerProtocolHandler 调用，比如 web.skype.com。
• 其他行为包括将号码保存到联系人，或将号码发送到另一台设备。

有关 tel: URL 方案的语法、附加功能和其他详细信息，请参阅 RFC 3966。

¥See RFC 3966 for syntax, additional features, and other details about the tel: URL scheme.

¥Using the download attribute to save a <canvas> as a PNG

要将 <canvas> 元素的内容保存为图片，你可以创建一个链接，其中 href 是画布数据，作为使用 JavaScript 创建的 data: URL，download 属性提供下载的 PNG 文件的文件名：

¥To save a <canvas> element's contents as an image, you can create a link where the href is the canvas data as a data: URL created with JavaScript and the download attribute provides the file name for the downloaded PNG file:

带有保存链接的绘画应用示例

¥Example painting app with save link

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()),
  );

结果

¥Result

¥Security and privacy

<a> 元素可能会对用户的安全和隐私产生影响。有关信息，请参阅 Referer 标头：隐私和安全问题。

¥<a> elements can have consequences for users' security and privacy. See Referer header: privacy and security concerns for information.

使用 target="_blank" 而不使用 rel="noreferrer" 和 rel="noopener" 会使网站容易受到 window.opener API 利用攻击，但请注意，在较新的浏览器版本中，设置 target="_blank" 隐式提供与设置 rel="noopener" 相同的保护。详情请参见 浏览器兼容性。

¥Using target="_blank" without rel="noreferrer" and rel="noopener" makes the website vulnerable to window.opener API exploitation attacks, although note that, in newer browser versions setting target="_blank" implicitly provides the same protection as setting rel="noopener". See browser compatibility for details.

¥Technical summary

¥See also

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