HTML 教程 / 创建链接：路径、页内跳转与电子邮件

使用 a 元素创建一个 HTML 链接，并将其目标设置为 href。目标可以是另一个页面、文件、文档中的某个位置或电子邮件地址。编写一个链接文本，让读者知道他们将要去哪里。

使用 a 和 href 创建一个基本链接

用 a 包裹可见的链接文本，并将目标 URL 设置在 href 中。这个例子指向 Coding Factory 关于 HTML 列表的中文课程。列表的类型和嵌套规则将在 列表：ul、ol、dl 及嵌套列表 中解释。

<a href="https://www.codingfactory.net/zh/18641">HTML 列表教程</a>

“HTML 列表教程” 是可见文本；URL 是目标。如果 a 没有 href，则不是普通的导航链接。将 href="#" 用作占位符可能会意外导致页面向上导航。

理解绝对和相对 URL

以 https:// 开头的绝对 URL 包含目标的域名。相对 URL 可以指向当前文档位置的文件或网站根目录中的文件。练习在 创建一个小型多页面网站 的三个文档中保持相同的菜单。

以下路径 about.html 和 ../contact.html 是练习示例，而不是 Coding Factory 当前存在的页面。假设您在 lessons/index.html 中根据此文件夹结构书写链接：

site/
  contact.html
  lessons/
    index.html
    about.html

<a href="https://www.codingfactory.net/zh/18641">完整 URL</a>
<a href="about.html">此文件夹中的介绍页面</a>
<a href="../contact.html">上级文件夹中的联系页面</a>
<a href="/zh/18641">本网站上的 HTML 列表</a>

about.html 会针对当前文档解析。以 / 开头的路径将从网站根目录解析。本地文件 file:// 的根目录与已提供的网站不同，因此部署后请重新测试相对路径。

链接到文档中的某个位置

为目标元素指定一个唯一的 id，然后在链接中使用 # 加上该值。

<a href="#contact">转到联系信息</a>



<h2 id="contact">联系</h2>

<p>联系信息在这里。</p>

要到达另一文件中的位置，请将片段添加到其 URL：about.html#contact。避免在单个页面上重复使用相同的 id。

指向电子邮件和新标签页的链接

mailto: URL 会提示用户的电子邮件应用程序创建一条消息。如果没有配置电子邮件应用程序，这可能无法按预期工作。

<a href="mailto:hello@example.com">写一封电子邮件</a>

要在新标签页中打开外部网站，请使用 target="_blank"，并按本站的链接规范添加 rel="noopener noreferrer"。

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a"

   target="_blank" rel="noopener noreferrer">a 元素在 MDN 上的参考</a>

如果适合读者的任务，请选择新标签页，并在链接文本或附近的说明中说明该行为。

download 属性的作用

download 属性会提示浏览器下载链接的文件。例如，它可以用于同一网站上托管的图片。

<a href="/wp-content/uploads/html-image-sample-lake-tree-1600-v1.webp" download>下载示例图片</a>

download 适用于同源的 URL（相同的协议、相同的主机和相同的端口）以及 URL blob: 和 data:。它无法强制下载其他网站的常规 URL。即使是同源的文件，浏览器设置和服务器响应也会影响其行为。

MDN：链接和 download 属性

使用三个实际文件测试相对路径

将这三个文件保存到之前的文件夹结构 site/ 中。这个练习是为了检查在文件之间的导航，而不是发送真实的联系信息。

site/lessons/index.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>路径练习的首页</title>
</head>
<body>
  <h1>路径练习的首页</h1>
  <nav aria-label="练习菜单">
    <a href="about.html">介绍</a>
    <a href="../contact.html">联系</a>
  </nav>
</body>
</html>

site/lessons/about.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>介绍</title>
</head>
<body>
  <h1>介绍</h1>
  <nav aria-label="练习菜单">
    <a href="index.html">练习首页</a>
    <a href="../contact.html">联系</a>
  </nav>
</body>
</html>

site/contact.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>联系</title>
</head>
<body>
  <h1>联系</h1>
  <nav aria-label="练习菜单">
    <a href="lessons/index.html">练习首页</a>
    <a href="lessons/about.html">介绍</a>
  </nav>
</body>
</html>

打开每个文件，跟随它们的链接，并比较地址栏中的文件夹。../ 向上一级目录。如果链接失败，请从源文件的文件夹中解决问题，而不是猜测其他文件名。在实验后恢复表格中的路径。

在发布之前检查链接

• 使用类似“HTML 列表教程”的文本，而不是“点击这里”。
• 从提供文档的实际存储位置测试相对路径。
• 检查 #id 片段是否与其目标完全匹配。
• 请记住，电子邮件和下载链接取决于浏览器和用户环境。

有关 URL 和属性的更多详细信息，请参阅 MDN 的 a 元素参考。