创建超链接

超链接是 Web 提供的最激动人心的创新之一。它们自 Web 诞生之初就一直是 Web 的一项功能，也是使 Web 成为一个网络的原因。超链接允许我们将文档链接到其他文档或资源，链接到文档的特定部分，或在 Web 地址上提供应用程序。几乎任何 Web 内容都可以转换为链接，以便在点击或以其他方式激活时，Web 浏览器会转到另一个 Web 地址（URL）。

例如，BBC 首页包含许多链接，这些链接不仅指向多个新闻报道，还指向站点的不同区域（导航功能）、登录/注册页面（用户工具）等等。

基本链接是通过将文本或其他内容包装在 <a> 元素中并使用 href 属性（也称为超文本引用或目标）来创建的，该属性包含 Web 地址。

<p>
  I'm creating a link to
  <a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>

这将得到以下结果
我正在创建一个指向Mozilla 首页的链接。

如前所述，几乎任何内容都可以制成链接，甚至包括块级元素。如果你想将标题元素制成链接，那么将其包装在锚（<a>）元素中，如下面的代码片段所示

<a href="https://mdn.org.cn/en-US/">
  <h1>MDN Web Docs</h1>
</a>
<p>
  Documenting web technologies, including CSS, HTML, and JavaScript, since 2005.
</p>

这将标题转换为链接

如果你有一个想要制成链接的图像，请使用 <a> 元素来包装使用 <img> 元素引用的图像文件。下面的示例使用相对路径来引用本地存储的 SVG 图像文件。

img {
  height: 100px;
  width: 150px;
  border: 1px solid gray;
}

<a href="https://mdn.org.cn/en-US/">
  <img src="mdn_logo.svg" alt="MDN Web Docs" />
</a>

这使得 MDN 徽标成为一个链接

你可能想要添加到链接中的另一个属性是 title。title 包含有关链接的其他信息，例如页面包含哪种信息，或网站上需要注意的事项。

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">
    the Mozilla homepage</a>.
</p>

这将得到以下结果，并将鼠标悬停在链接上会显示 title 作为工具提示

使用本地代码编辑器和我们的入门模板创建 HTML 文档。

• 在 HTML body 内，添加一个或多个段落或你已经了解的其他类型的内容。
• 将某些内容更改为链接。
• 包含 title 属性。

要完全理解链接目标，你需要了解 URL 和文件路径。本节提供实现此目标所需的信息。

URL，或统一资源定位符，是一串文本字符串，用于定义某个资源在网络上的位置。例如，Mozilla 的英文主页位于 https://www.mozilla.org/en-US/。

URL 使用路径来查找文件。路径指定您感兴趣的文件在文件系统中的位置。让我们来看一个目录结构的示例，请查看 creating-hyperlinks 目录。

此目录结构的 根目录 称为 creating-hyperlinks。在本地处理网站时，您将拥有一个包含整个网站的目录。在 根目录 内，我们有一个 index.html 文件和一个 contacts.html 文件。在一个真实的网站中，index.html 将是我们的主页或登陆页面（充当网站或网站特定部分入口点的网页）。

我们的根目录中还有两个子目录——pdfs 和 projects。它们分别包含一个文件——一个 PDF（project-brief.pdf）和一个 index.html 文件。请注意，在一个项目中可以有两个 index.html 文件，只要它们位于不同的文件系统位置即可。第二个 index.html 可能就是项目相关信息的着陆页。

• 同一目录：如果您想在 index.html（顶级 index.html）中包含一个指向 contacts.html 的超链接，您只需指定要链接到的文件名，因为它与当前文件位于同一目录下。您将使用的 URL 是 contacts.html
  html

  <p>
    Want to contact a specific staff member? Find details on our
    <a href="contacts.html">contacts page</a>.
  </p>
  

• 向下进入子目录：如果您想在 index.html（顶级 index.html）中包含一个指向 projects/index.html 的超链接，您需要先进入 projects 目录，然后再指定要链接到的文件。这可以通过指定目录名称，然后是一个正斜杠，再然后是文件名来完成。您将使用的 URL 是 projects/index.html
  html

  <p>Visit my <a href="projects/index.html">project homepage</a>.</p>
  

• 向上返回到父目录：如果您想在 projects/index.html 中包含一个指向 pdfs/project-brief.pdf 的超链接，您需要向上返回一级目录，然后再次进入 pdfs 目录。要向上返回一级目录，请使用两个点——..——因此您将使用的 URL 是 ../pdfs/project-brief.pdf
  html

  <p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>
  

可以链接到 HTML 文档的特定部分，称为 文档片段，而不仅仅是链接到文档顶部。要做到这一点，您首先必须将 id 属性分配给您要链接到的元素。通常将链接到特定的标题更有意义，因此它看起来类似于以下内容

<h2 id="Mailing_address">Mailing address</h2>

然后要链接到该特定的 id，您需要在 URL 的末尾包含它，并在其前面加上一个井号/磅号 (#)，例如

<p>
  Want to write us a letter? Use our
  <a href="contacts.html#Mailing_address">mailing address</a>.
</p>

您甚至可以单独使用文档片段引用来链接到 当前文档的另一部分

<p>
  The <a href="#Mailing_address">company mailing address</a> can be found at the
  bottom of this page.
</p>

您在网络上会遇到两个术语，即 绝对 URL 和 相对 URL：

绝对 URL：指向由其在网络上的绝对位置定义的位置，包括 协议 和 域名。例如，如果一个 index.html 页面上传到一个名为 projects 的目录中，该目录位于 Web 服务器的 根目录 内，并且网站域名是 https://www.example.com，则该页面可以在 https://www.example.com/projects/index.html 访问（甚至可以是 https://www.example.com/projects/，因为大多数 Web 服务器在 URL 中未指定时，只会查找要加载的 index.html 等着陆页）。

无论绝对 URL 在哪里使用，它都将始终指向相同的位置。

相对 URL：指向相对于您链接到的文件的位置，更像是我们在上一节中看到的。例如，如果我们想从我们位于 https://www.example.com/projects/index.html 的示例文件链接到同一目录中的 PDF 文件，则 URL 仅为文件名——project-brief.pdf——无需其他信息。如果 PDF 文件位于 projects 内名为 pdfs 的子目录中，则相对链接将为 pdfs/project-brief.pdf（等效的绝对 URL 将为 https://www.example.com/projects/pdfs/project-brief.pdf）。

相对 URL 将指向不同的位置，具体取决于您引用的文件的实际位置——例如，如果我们将 index.html 文件从 projects 目录移到网站的 根目录（顶级，不在任何目录中），则其中 pdfs/project-brief.pdf 相对 URL 链接现在将指向位于 https://www.example.com/pdfs/project-brief.pdf 的文件，而不是位于 https://www.example.com/projects/pdfs/project-brief.pdf 的文件。

当然，project-brief.pdf 文件和 pdfs 文件夹的位置不会因为您移动了 index.html 文件而突然发生变化——这将导致您的链接指向错误的位置，因此如果单击它将无法工作。您需要注意！

在编写链接时，有一些最佳实践需要遵循。现在让我们来看一下这些实践。

在页面上添加链接很容易。但这还不够。我们需要使我们的链接对所有读者都 可访问，无论他们当前的上下文是什么以及他们喜欢使用哪些工具。例如

• 屏幕阅读器用户喜欢在页面上从一个链接跳转到另一个链接，并在脱离上下文的条件下读取链接。
• 搜索引擎使用链接文本对目标文件进行索引，因此在链接文本中包含关键词来有效描述链接目标是一个好主意。
• 视觉读者浏览页面而不是阅读每个单词，他们的眼睛会被页面上突出的功能吸引，比如链接。他们会发现描述性的链接文本很有用。

让我们来看一个具体的例子

好的链接文字：下载 Firefox

<p><a href="https://www.mozilla.org/en-US/firefox/">Download Firefox</a></p>

不好的链接文字：点击这里 下载 Firefox

<p>
  <a href="https://www.mozilla.org/en-US/firefox/">Click here</a> to download
  Firefox
</p>

其他提示

• 不要将 URL 重复为链接文本的一部分——URL 看起来很丑，当屏幕阅读器逐字逐句地读取它们时，听起来更难听。
• 不要在链接文本中说“链接”或“链接到”——这只是噪音。屏幕阅读器会告诉人们有一个链接。视觉用户也会知道有一个链接，因为链接通常以不同的颜色和下划线样式显示（此约定通常不应该被破坏，因为用户习惯了它）。
• 使链接文本尽可能简短——这很有帮助，因为屏幕阅读器需要解释整个链接文本。
• 尽量减少同一文本链接到不同位置的多个副本的情况。如果有一系列脱节的链接都标记为“点击这里”、“点击这里”、“点击这里”，这可能会导致屏幕阅读器用户出现问题。

当链接到将要下载（如 PDF 或 Word 文档）、流式传输（如视频或音频）或具有其他可能意外效果（打开弹出窗口）的资源时，您应该添加清晰的措辞以减少任何混淆。

例如

• 如果您使用的是低带宽连接，点击一个链接，然后意外地开始下载多个兆字节的文件。

让我们来看一些示例，看看这里可以使用哪种类型的文本

<p>
  <a href="https://www.example.com/large-report.pdf">
    Download the sales report (PDF, 10MB)
  </a>
</p>

<p>
  <a href="https://www.example.com/video-stream/" target="_blank">
    Watch the video (stream opens in separate tab, HD quality)
  </a>
</p>

当您链接到要下载而不是在浏览器中打开的资源时，可以使用 download 属性提供默认的保存文件名。以下是一个指向 Firefox 最新 Windows 版本的下载链接的示例

<a
  href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
  download="firefox-latest-64bit-installer.exe">
  Download Latest Firefox for Windows (64-bit) (English, US)
</a>

对于此练习，我们希望您使用导航菜单将一些页面链接在一起以创建一个多页网站。这是创建网站的一种常见方法——每个页面都使用相同的页面结构，包括相同的导航菜单，因此当点击链接时，会给人一种您停留在同一位置，并且正在调取不同内容的感觉。

您需要在同一目录中创建以下四个页面的本地副本。有关完整的文件列表，请参阅 navigation-menu-start 目录

• index.html
• projects.html
• pictures.html
• social.html

您应该

1. 在一个页面上指定的位置添加一个无序列表，其中包含要链接到的页面的名称。导航菜单通常只是一个链接列表，因此在语义上这是可以的。
2. 将每个页面名称更改为指向该页面的链接。
3. 将导航菜单复制到每个页面。
4. 在每个页面上，仅删除指向同一页面的链接——对于一个页面包含指向其自身的链接来说，这会令人困惑且没有必要。而且，缺少链接可以作为很好的视觉提示，提醒您当前位于哪个页面。

完成的示例应类似于以下页面

可以创建链接或按钮，当点击时，打开新的传出电子邮件消息，而不是链接到资源或页面。这可以通过使用 <a> 元素和 mailto: URL 方案来完成。

在最基本且最常用的形式中，mailto: 链接指示预期收件人的电子邮件地址。例如

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

这将生成一个如下所示的链接：发送电子邮件给 nowhere。

实际上，电子邮件地址是可选的。如果您省略它，并且您的 href 为“mailto:”，则用户邮件客户端将打开一个新的传出邮件窗口，但没有目标地址。这通常用作“分享”链接，用户可以点击这些链接将电子邮件发送到他们选择的地址。

除了电子邮件地址之外，您还可以提供其他信息。实际上，任何标准邮件标头字段都可以添加到您提供的 mailto URL 中。最常用的字段是“主题”、“抄送”和“正文”（这不是真正的标头字段，但允许您为新电子邮件指定简短的内容消息）。每个字段及其值都指定为查询项。

以下是一个包含抄送、密送、主题和正文的示例

<a
  href="mailto:[email protected][email protected]&[email protected]&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

以下是一些其他 mailto URL 示例

• mailto
• mailto:[email protected]
• mailto:[email protected],[email protected]
• mailto:[email protected][email protected]
• mailto:[email protected][email protected]&subject=This%20is%20the%20subject

您已阅读完本文，但您能记住最重要的信息吗？在继续学习之前，您可以进行一些进一步的测试以验证您是否保留了这些信息——请参阅 测试您的技能：链接。

目前关于链接的内容就到这里了！在课程的后面，当您开始学习链接样式时，您将再次接触到链接。接下来，我们将回到 HTML 的文本语义，并探讨一些您会发现有用的更高级/不寻常的功能——高级文本格式化 是您的下一站。

• 上一个
• 概述：HTML 入门
• 下一个