创建链接

链接（也称为超链接）非常重要——它们是使 Web 成为一个“网”的关键。本文将展示创建链接所需的语法，并讨论链接的最佳实践。

预备知识具备基本 HTML 语法中涵盖的基本 HTML 知识。文本级语义，例如标题和段落以及列表。

学习成果

预备知识	具备基本 HTML 语法中涵盖的基本 HTML 知识。文本级语义，例如标题和段落以及列表。
学习成果	了解为什么链接是 Web 的基本特性。没有链接就没有 Web。 `href` 属性。绝对路径和相对路径，以及何时使用它们。详细的路径语法——斜杠、单点和双点。链接状态及其重要性——`:hover`、`:focus`、`:visited` 和 `:active`。内联和块级链接。了解编写良好链接文本的好处，例如提高屏幕阅读器用户的可访问性，以及潜在的积极 SEO 效果。

了解为什么链接是 Web 的基本特性。没有链接就没有 Web。
href 属性。
绝对路径和相对路径，以及何时使用它们。
详细的路径语法——斜杠、单点和双点。
链接状态及其重要性——:hover、:focus、:visited 和 :active。
内联和块级链接。
了解编写良好链接文本的好处，例如提高屏幕阅读器用户的可访问性，以及潜在的积极 SEO 效果。

什么是超链接？

超链接是 Web 提供的最令人兴奋的创新之一。它们从一开始就是 Web 的一个特性，也是使 Web 成为一个“网”的关键。超链接允许我们将文档链接到其他文档或资源，链接到文档的特定部分，或在 Web 地址提供应用程序。几乎任何 Web 内容都可以转换为链接，以便在点击或以其他方式激活时，Web 浏览器会转到另一个 Web 地址（URL）。

注意： URL 可以指向 HTML 文件、文本文件、图像、文本文档、视频和音频文件，或 Web 上的任何其他内容。如果 Web 浏览器不知道如何显示或处理该文件，它会询问您是否要打开该文件（在这种情况下，打开或处理该文件的职责将传递给设备上合适的本机应用程序）或下载该文件（在这种情况下，您可以稍后尝试处理它）。

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

front page of bbc.co.uk, showing many news items, and navigation menu functionality

链接的解剖

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

html

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

这给了我们以下结果：

我正在创建指向Mozilla 主页的链接。

注意： Scrimba 的锚点标签 ^{MDN 学习合作伙伴} scrim 提供了一个关于如何使用 HTML 创建链接的交互式演示，以及一个挑战，让您创建自己的链接。

图像链接

要将图像转换为链接，请将 <img> 元素用 <a> 元素包装起来。下面的示例使用相对路径引用本地存储的 SVG 图像文件。

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

html

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

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

注意：您将在未来的文章中了解更多关于在 Web 上使用图像的信息。

使用 title 属性添加支持信息

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

html

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

这会给我们带来以下结果，将鼠标悬停在链接上会以工具提示的形式显示标题

注意：链接标题仅在鼠标悬停时显示，这意味着依赖键盘控件或触摸屏导航网页的人将难以访问标题信息。如果标题的信息对页面的可用性确实很重要，那么您应该以所有用户都可以访问的方式呈现它，例如将其放在常规文本中。

创建您自己的示例链接

好的，现在轮到你了！

点击下面的代码块中的“播放”，在 MDN Playground 中编辑示例，或者复制我们的入门模板并将以下代码复制到其中。
将“红松鼠”和“东部灰松鼠”文本链接到描述相关物种的维基百科页面。给每个链接一个等于该物种学名的 title 属性。
将“维基百科松鼠页面”文本链接到维基百科上关于松鼠的主页面。

如果您犯了错误，可以使用 MDN Playground 中的重置按钮清除您的工作。如果您真的卡住了，可以在代码块下方查看解决方案。

html

<h1>Squirrels</h1>

<p>
  Squirrels are commonly thought of as tree-dwelling mammals, but the squirrel
  family extends far beyond that to include ground-dwelling rodents such as
  chipmunks and prairie dogs, and flying squirrels.
</p>

<p>Two of the most common and best-known squirrel species are the:</p>

<ul>
  <li>Red squirrel</li>
  <li>Eastern gray squirrel</li>
</ul>

<p>
  For a good starting point on squirrel information, see the Wikipedia Squirrel
  page.
</p>

点击此处显示解决方案

您完成的 HTML 应该看起来像这样

html

<h1>Squirrels</h1>

<p>
  Squirrels are commonly thought of as tree-dwelling mammals, but the squirrel
  family extends far beyond that to include ground-dwelling rodents such as
  chipmunks and prairie dogs, and flying squirrels.
</p>

<p>Two of the most common and best-known squirrel species are the:</p>

<ul>
  <li>
    <a
      href="https://en.wikipedia.org/wiki/Red_squirrel"
      title="Sciurus vulgaris">
      Red squirrel
    </a>
  </li>
  <li>
    <a
      href="https://en.wikipedia.org/wiki/Eastern_gray_squirrel"
      title="Sciurus carolinensis">
      Eastern gray squirrel
    </a>
  </li>
</ul>

<p>
  For a good starting point on squirrel information, see the
  <a href="https://en.wikipedia.org/wiki/Squirrel">Wikipedia Squirrel page</a>.
</p>

URL 和路径速览

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

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

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

A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively

此目录结构的根目录称为 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
```

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

```
进入子目录：如果您想在 index.html（顶级 index.html）中包含一个指向 projects/index.html 的超链接，您需要先进入 projects 目录，然后指示要链接到的文件。这通过指定目录名称，然后是正斜杠，然后是文件名来完成。您将使用的 URL 是 projects/index.html
html
```
Visit my <a href="projects/index.html">project homepage</a>.
```
返回父目录：如果您想在 projects/index.html 中包含一个指向 pdfs/project-brief.pdf 的超链接，您必须向上一个目录级别，然后再进入 pdfs 目录。要向上一个目录，请使用两个点——..——因此您将使用的 URL 是 ../pdfs/project-brief.pdf
html
```
A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.
```

注意：如果需要，您可以将这些功能的多个实例组合成复杂的 URL，例如：../../../complex/path/to/my/file.html。

文档片段

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

html

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

然后要链接到该特定的 id，您需要将其包含在 URL 的末尾，前面带一个井号/磅符号（#），例如

html

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

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

html

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

绝对 URL 与相对 URL

您将在 Web 上遇到的两个术语是绝对 URL 和相对 URL：

绝对 URL：指向由其在 Web 上的绝对位置定义的某个位置，包括协议和域名。例如，如果一个 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

html

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

差的链接文本：点击此处下载 Firefox

html

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

其他提示

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

链接到非 HTML 资源——留下清晰的指示

当链接到不会在当前页面中以“正常导航”方式打开的资源时，您应该在链接文本中添加清晰的措辞，说明将要发生什么。例如，如果您正在下载或流式传输资源，或者链接将打开一个弹出窗口或执行一些其他可能意想不到的效果，则应在文本中说明。这对于低带宽连接的用户很重要，他们可能希望避免下载多个兆字节的资产。它还有助于为屏幕阅读器用户设置期望，他们可能不知道否则会发生什么。

让我们看一些示例，看看这里可以使用什么样的文本

html

<p>
  <a href="/large-report.pdf" download>
    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 属性

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

html

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

何时在新选项卡中打开链接

链接默认在它们所在的页面的同一选项卡中打开，这允许用户使用浏览器的返回按钮导航回上一页。然而，许多网站（包括 MDN）选择在新选项卡中打开某些链接，尤其是外部链接。这是通过将 target 属性设置为 "_blank" 来完成的。

html

Firefox is developed by the
<a href="https://www.mozilla.org/en-US/" target="_blank">Mozilla Foundation</a>.

是否在新选项卡中打开链接应该是一个有意识的决定，基于用户体验设计考虑。以下是一些需要思考的问题

在新选项卡中打开链接会同时呈现两个文档，这对于“并行”导航体验很有用。另一方面，在同一选项卡中打开的链接更像是当前页面的延续。
在新选项卡中打开链接可能会让习惯使用返回按钮的用户感到迷失。
即使默认情况下在同一选项卡中打开链接，用户仍然可以使用键盘快捷键或上下文菜单选项选择在新选项卡中打开它们。另一方面，在新选项卡中打开的链接很难在同一选项卡中打开。
屏幕阅读器用户可能会对在新选项卡中打开的链接感到困惑，因为他们可能没有意识到新选项卡已打开，并且他们可能会失去对页面位置的上下文。

一种常见的方法是在新选项卡中打开外部链接，并在同一选项卡中打开内部链接。一些设计者倾向于在同一选项卡中打开所有链接。如果您确实在新选项卡中打开链接，那么建议您为这些链接提供提示，例如链接文本旁边的一个图标。

创建导航菜单

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

您需要将以下四个页面全部复制到同一目录中。有关完整的文件列表，请参阅 navigation-menu-start 目录

你应该

在页面指定位置添加一个无序列表，其中包含要链接的页面名称。导航菜单通常只是一个链接列表，因此在语义上是可行的。
将每个页面名称更改为指向该页面的链接。
将导航菜单复制到每个页面。
在每个页面上，只删除指向该页面的链接——页面包含指向自身的链接是令人困惑且不必要的。而且，缺少链接可以很好地视觉提醒您当前所在的页面。

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

An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items

注意：如果您遇到困难，或者不确定是否做对了，可以查看 navigation-menu-marked-up 目录以查看正确答案。

电子邮件链接

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

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

html

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

这会产生一个如下所示的链接：发送电子邮件到 nowhere。

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

指定详细信息

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

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

html

<a
  href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>

注意：每个字段的值必须使用非打印字符（如制表符、回车符和换页符）和空格进行 URL 编码。此外，请注意使用问号（?）将主 URL 与字段值分开，以及使用和号（&）将 mailto: URL 中的每个字段分开。这是标准的 URL 查询表示法。阅读 GET 方法以了解 URL 查询表示法更常见的用途。

以下是一些其他示例 mailto URL

总结

暂时就这些链接内容了！在本课程后续部分您开始学习样式时，会再次回到链接。接下来，我们将为您提供一些测试，您可以使用它们来检查您对我们提供的链接信息的理解和记忆程度。

帮助改进 MDN

了解如何贡献

本页面最后修改于 2025 年 8 月 25 日由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的问题