链接

在属性部分的介绍中，您看到了一个示例，展示了如何将属性添加到开始标记。该示例使用了 <a> 标记，但既没有讨论该元素，也没有讨论该示例中介绍的特定属性

The opening tag, attributes, and closing tag, labelled on an HTML element.

<a> 锚标记与 href 属性一起创建超链接。链接是互联网的支柱。第一个网页 包含 25 个链接，内容是“关于 W3 的所有在线内容都直接或间接地链接到本文档。” 很可能，关于 W3 的所有在线内容也直接或间接地从本文档链接出去！

自蒂姆·伯纳斯-李于 1991 年 8 月发布第一个解释以来，Web 的力量和 <a> 标记都得到了极大的增长。链接表示两个资源之间的连接，其中一个是当前文档。可以通过 <a>、<area>、<form> 和 <link> 创建链接。您已经了解了 <link>，并将在单独的部分中发现 表单。还有一个完整的 表单学习部分。在本节中，您将了解这个单字母的、并不简单的 <a> 标记。

href 属性

虽然不是必需的，但在几乎所有 <a> 标记中都可以找到 href 属性。提供超链接的地址是将 <a> 变成链接的原因。href 属性用于创建指向当前页面内位置、站点内其他页面或完全其他站点的超链接。它也可以编码为下载文件或 发送电子邮件 到特定地址，甚至包括主题和建议的电子邮件正文内容。

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

第一个链接包含一个绝对 URL，可以在世界上的任何站点上使用它导航到 MLW 主页。绝对 URL 包括协议（在本例中为 https://）和域名。当协议简单地写成 // 时，它是一个隐式协议，意思是“使用当前正在使用的相同协议”。

相对 URL 不包括协议或域名。它们是相对于当前文件的“相对”路径。MLW 是一个单页站点，但此 HTML 系列有多个部分。为了从此页面链接到属性课程，使用了相对 URL <a href="../attributes/">Attributes</a>。

第二个链接只是一个 链接片段标识符，如果当前页面上存在带有 id="teachers" 的元素，则将链接到该元素。浏览器还支持两个“页面顶部”链接：单击 <a href="#top">Top</a>（不区分大小写）或简单地单击 <a href="#">Top</a> 将用户滚动到页面顶部，除非在同一字母大小写中设置了 id 为 top 的元素。

MLW 是一个相当长的文档。为了节省滚动，您可以从 #teachers 部分的底部添加一个返回顶部的链接

<a href="#top">Go to top.</a>

第三个链接结合了这两个值：它包含一个绝对 URL，后跟一个链接片段。这可以直接链接到定义的 URL 中的某个部分，在本例中为 MLW 主页的 #teachers 部分。MLW 页面将被加载；然后浏览器将滚动到 teachers 部分，而不会在 HTTP 请求中发送片段。

href 属性可以以 mailto: 或 tel: 开头，以进行电子邮件或拨打电话，链接的处理取决于设备、操作系统和已安装的应用程序。

mailto 链接不需要包含电子邮件地址，但它可以包含电子邮件地址，以及 cc、bcc、subject 和 body 文本以预填充电子邮件。默认情况下，将打开电子邮件客户端。您可以预填充电子邮件的主题和正文，而无需电子邮件地址，以允许网站访问者邀请自己的朋友。在文档页脚的链接中，我们包含了注册的 URL

<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
">Tell a machine</a>

问号 (?) 将 mailto: 和电子邮件地址（如果有）与查询词分开。在查询中，与号 (&) 分隔字段，等号 (=) 将每个字段名称与其值等同起来。整个字符串都经过百分比编码，如果 href 值未加引号或值包含引号，则绝对有必要进行百分比编码。

当用户单击、点击或在 tel 链接上按 Enter 键时，打开哪个应用程序取决于操作系统、已安装的应用程序以及用户在其设备上的设置。iPhone 可能会打开 FaceTime、电话应用程序或联系人。如果安装了 Skype，Windows 桌面可能会打开 Skype。

还有其他几种类型的 URL，例如 blob 和 data URL（请参阅 download 属性讨论中的示例）。对于安全站点（通过 https 提供的站点），可以使用 创建和运行特定于应用程序的协议 与 registerProtocolHandler()。

当包含可能打开其他已安装应用程序的链接时，最好让用户知道。确保开始标记和结束标记之间的文本告诉用户他们将要激活的链接类型。CSS 属性选择器，例如 [href^="mailto:"]、[href^="tel:"] 和 [href$=".pdf"]，可用于按应用程序类型定位样式。

可下载的资源

当 href 指向可下载的资源时，应包含 download 属性。download 属性的值是建议的文件名，用于将资源保存在用户的本地文件系统中。SVGOMG（SVG 优化器）使用 download 属性为优化器创建的可下载 blob 建议文件名。当 hal.svg 被优化时，SVGOMG 的下载链接开始标记类似于

<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">

还有一个 <canvas> 的演示，该演示创建可下载的 PNG 数据 URL。

要链接到可下载的资源，请包含资产的 URL 作为 href 属性的值，并将可在用户文件系统中使用的建议文件名作为 download 属性的值。

浏览上下文

target 属性允许定义链接导航（和 表单提交）的浏览上下文。与 <base> 元素一起讨论了四个不区分大小写、以下划线为前缀的关键字。它们包括默认值 _self（当前窗口）、_blank（在新标签页中打开链接）、_parent（如果当前链接嵌套在对象或 iframe 中，则为父级）和 _top（最顶层的祖先，如果当前链接深度嵌套，则特别有用）。如果链接未嵌套，则 _top 和 _parent 与 _self 相同。target 属性不限于这四个关键字：可以使用任何术语。

每个浏览上下文（基本上，每个浏览器标签页）都有一个浏览上下文名称。链接可以在当前标签页、新的未命名标签页或新的或现有的命名标签页中打开链接。默认情况下，名称是空字符串。要在新标签页中打开链接，用户可以右键单击并选择“在新标签页中打开”。开发人员可以通过包含 target="_blank" 来强制执行此操作。

带有 target="_blank" 的链接将在具有空名称的新标签页中打开，每次单击链接都会打开一个新的未命名标签页。这可能会创建许多新标签页。太多标签页。例如，如果用户单击 <a href="registration.html" target="_blank">Register Now</a> 15 次，注册表单将在 15 个单独的标签页中打开。可以通过提供标签页上下文名称来解决此问题。通过包含 target 属性 和区分大小写的值（例如 <a href="registration.html" target="reg">Register Now</a>），第一次单击此链接将在新的 reg 标签页中打开注册表单。再单击此链接 15 次将在 reg 浏览上下文中重新加载注册，而不会打开任何其他标签页。

rel 属性控制链接创建的链接类型，定义当前文档与超链接中链接到的资源之间的关系。属性的值必须是以空格分隔的列表，其中包含 <a> 标记支持的 大量 rel 属性值 中的一个或多个。

如果您不希望爬虫程序跟踪链接，则可以包含 nofollow 关键字。可以添加 external 值来指示该链接指向外部 URL，而不是当前域内的页面。help 关键字指示超链接将提供上下文相关的帮助。将鼠标悬停在此 rel 值的链接上将显示帮助光标，而不是正常的指针光标。不要仅仅为了获得帮助光标而使用此值；请改用 CSS cursor 属性。prev 和 next 值可以用于指向系列中上一个和下一个文档的链接。

与 <link rel="alternative"> 类似，<a rel="alternative"> 的含义取决于其他属性。RSS 提要备选项还将包括 type="application/rss+xml" 或 type="application/atom+xml，备用格式将包括 type 属性，翻译将包括 hreflang 属性。如果开始标记和结束标记之间的内容使用的语言与主文档语言不同，请包含 lang 属性。如果超链接文档的语言是不同的语言，请包含 hreflang 属性。

在此示例中，我们包含翻译页面的 URL 作为 href 的值，rel="alternate" 以指示它是站点的备用版本；hreflang 属性提供翻译的语言

<a href="/fr" hreflang="fr-FR" rel="alternate" lang="fr-FR">atelier d'apprentissage mechanique</a>
<a href="/pt" hreflang="pt-BR" rel="alternate" lang="pt-BR">oficina de aprendizado de máquina</a>

如果法语翻译是 PDF，您可以提供 type 属性以及链接资源的 PDF MIME 类型。虽然 MIME 类型纯粹是建议性的，但告知用户链接将打开不同格式的文档始终是一个好主意。

<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>

跟踪用户交互的一种方法是在单击链接时 ping URL。如果存在 ping 属性，则它包含一个以空格分隔的安全 URL 列表（以 https 开头），如果用户激活超链接，则应通知或 ping 这些 URL。浏览器将 POST 请求与正文 PING 发送到作为 ping 属性值列出的 URL。

用户体验技巧

  • 在编写 HTML 时，始终考虑用户体验。链接应提供有关链接资源的足够信息，以便用户知道他们点击的是什么。
  • 在文本块中，确保链接的外观与周围的文本有足够的差异，以便用户可以轻松地从其余内容中识别链接，并确保颜色不是区分文本和周围内容的唯一手段。
  • 始终包含焦点样式；这使键盘导航器能够在通过内容进行制表符导航时知道自己所在的位置。
  • 开始 <a> 和结束 </a> 之间的内容是链接的默认可访问名称，应告知用户链接的目标或目的。如果链接的内容是图像，则 alt 描述是可访问名称。无论可访问名称来自 alt 属性还是文本块中的单词子集，请确保它提供有关链接目标的信息。链接文本应比“单击此处”或“更多信息”更具描述性；这对您的屏幕阅读器用户和搜索引擎结果非常重要！
  • 不要在链接内包含交互式内容，例如 <button> 或 <input>。也不要将链接嵌套在 <button> 或 <label> 中。虽然 HTML 页面仍会呈现，但在交互式元素内嵌套可聚焦和可单击元素会产生糟糕的用户体验。
  • 如果 href 属性存在，则在焦点位于 <a> 元素上时按 Enter 键将激活它。
  • 链接不限于 HTML。a 元素也可以在 SVG 中使用，使用 'href' 或 'xlink:href' 属性形成链接。

links 属性返回与具有 href 属性的 a 和 area 元素匹配的 HTMLCollection。

let a = document.links[0]; // obtain the first link in the document

a.href = 'newpage.html'; // change the destination URL of the link
a.protocol = 'ftp'; // change just the scheme part of the URL
a.setAttribute('href', 'https://machinelearningworkshop.com/'); // change the attribute content directly

在本节中，您已经了解了关于链接的所有内容。下一节介绍列表，我们需要学习列表以便将它们组合在一起以创建链接列表（也称为导航）。

检查您的理解情况

测试您对链接的知识。

nofollow 链接有什么作用？

使链接不可点击。
再试一次。
要求爬虫程序不要跟踪链接。
正确！
使您对站点的访问无法被跟踪。
再试一次。

哪些链接会将您带到页面顶部？

#start
再试一次。
#
正确！
#top
正确！