HTML 初学者指南 - 第 4 课 - 链接（超链接）

10/10/2025, by Ivan

我们现在来到了 HTML 的最核心部分 —— 超链接（或简称链接）。链接是组织和连接不同资料的方式。假设你有 100,000 个文本文件，如果要为它们建立目录，即使每个目录下有 200 个文档描述，你也需要 500 个目录。要浏览这 500 个目录找到所需的信息会耗费大量时间。那么链接是如何让我们的生活变得更简单的呢？

链接以任意方式连接两个 HTML 文档，使每个文档都有唯一的名称。这样我们就能从一个文档跳转到十个其他相关或热门的文档，从而更容易找到所需的信息。

网站也是相同的原理。网页都有唯一的地址（URL，Uniform Resource Locator —— 统一资源定位符）。要在 HTML 中创建链接，我们使用标签 <a></a>。基本结构如下：

<a href="唯一路径">链接文字</a>

在这段代码中，href 是 a 标签的属性。我们在上一课已经学习过属性的概念。现在，让我们在与 index.html 相同的文件夹中创建一个新文件 file.html，并在其中写入以下代码：

<html>
  <head>
    <title>我的第二个 HTML 文档</title>
  </head>
  <body>   
    <h1>我的第二个 HTML 文档</h1>
  </body>
</html>

接着，在 index.html 中写入以下代码：

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>   
    <h1>我的第一个 HTML 文档</h1>
    <p>
      <a href="file.html">指向第二个文档的链接</a>
    </p>
  </body>
</html>

现在，在浏览器中打开 index.html，你会看到一个链接，点击即可跳转到 file.html。接下来我们来练习编写文件路径。

相对路径

所谓“相对路径”，是指文件路径是相对于当前文件而言的。我们在保存 index.html 的文件夹内新建一个文件夹 files，并将 file.html 移入其中。此时，浏览器无法再通过之前的链接找到 file.html，因为它的位置发生了变化。

要解决这个问题，我们使用相对路径。路径中的文件夹用斜杠 / 分隔。例如：

/Program Files/MSOffice/

若要表示“从当前目录开始”，我们写 ./。因此，从 index.html 到 files 文件夹的路径如下：

./files/

再加上文件名，完整路径为：

./files/file.html

修改 index.html 中的链接：

<a href="./files/file.html">指向第二个文档的链接</a>

保存后刷新浏览器（确保打开的是 index.html），链接再次可以正常工作。你也可以简写为：

<a href="files/file.html">指向第二个文档的链接</a>

浏览器仍然能正确识别。但如果你写成：

<a href="/files/file.html">指向第二个文档的链接</a>

那就不对了，因为这是一个绝对路径，而不是相对路径。若想写相对路径，请使用 ./ 或直接从文件夹名开始写。

返回链接

我们现在来创建从 file.html 返回 index.html 的链接。首先写上路径起点：

./

然后要告诉浏览器返回上一级目录（退出 files 文件夹），使用 ../：

./../

如果还有更深层的目录，例如 ./../../，每多一层文件夹就多写一个 ../。

加上文件名后路径如下：

./../index.html

我们将其插入 file.html 中：

<html>
  <head>
    <title>我的第二个 HTML 文档</title>
  </head>
  <body>   
    <h1>我的第二个 HTML 文档</h1>
    <p>
      <a href="./../index.html">指向第一个文档的链接</a>
    </p>
  </body>
</html>

现在你就可以在两个页面之间来回跳转。注意浏览器地址栏中 URL 的变化。

绝对路径

绝对路径用于互联网上的网站。例如在 Drupal 中，网站的所有页面都由 index.php 文件加载，所以路径 / 表示相对于该文件的根目录。如果在本地写绝对路径，它将从磁盘根目录开始。

虽然可以使用相对路径，但绝对路径更方便，因为相对路径在文件移动后容易出错。而绝对路径不会受此影响。

绝对路径通常以 / 或完整网址开头，如 https://drupalbook.org/ru/。示例：

/index.html

/files/file.html

/files2/file2.html

无论文件位于哪个文件夹中，使用绝对路径的链接形式都相同：

<a href="/files2/file2.html">链接</a>

属性 target

target 属性用于指定链接的打开方式，常用于从你的网站跳转到其他网站时：

_blank — 在新窗口或新标签页中打开；
_self — 在当前窗口中打开（默认行为）；
_parent — 在父框架中打开（已过时，现代网页使用 AJAX 替代）；
_top — 在整个浏览器窗口中打开，若无框架，则与 _self 相同。

我们通常只会使用 _blank：

<a href="/files2/file2.html" target="_blank">链接</a>

属性 rel

rel（relation）属性用于说明当前文档与链接目标的关系。最常见的值是 rel="nofollow"，它告诉搜索引擎（如 Google、Yandex）不要索引该链接。当你引用外部网站时，建议添加 rel="nofollow" 并配合 target="_blank" 使用：

<a href="/files2/file2.html" target="_blank" rel="nofollow">链接</a>

额外区块类型 (EBT) - 全新的布局构建器体验❗

❗额外段落类型 (EPT) - 全新的 Paragraphs 体验