HTML 链接：相对路径

Begindev 编辑部 March 25, 2026

在上一章节中，我们了解了如何使用 <a> 标签和 href 属性创建基本的超链接。

现在，我们将深入探讨如何链接到同一个网站内的其他页面，这个过程称为内部链接。

相对路径是让这些内部链接正常工作的关键，特别是当你把网站移动到不同的服务器或域名时。

1. 什么是相对路径？

相对路径指定了文件相对于当前 HTML 文档的位置。

你不需要提供完整的 URL（像 https://www.example.com/about.html），只需要提供一个从当前页面位置开始的路径。

这使得你的链接更具可移植性：即使你的域名变了，只要文件结构没变，链接就不会断。

1.1 相对路径的解剖

相对路径由目录名和文件名组成，用斜杠 (/) 分隔。我们可以使用特殊符号来在目录结构中导航：

. (点)：指的是当前目录。虽然通常可以省略，但在某些情况下为了清晰起见会保留。
.. (点点)：指的是父目录（向上一级）。

2. 示例场景：网站结构

让我们想象一个简单的博客网站结构：

mywebsite/
├── index.html        (主页)
├── about.html        (关于页)
├── contact.html      (联系页)
└── blog/             (博客文件夹)
    ├── article1.html (文章1)
    ├── article2.html (文章2)
    └── images/       (图片文件夹)
        └── image1.jpg

2.1 从 index.html 出发

如果我们在 index.html 这个文件里写链接：

链接到 about.html：直接写 about.html（因为它们在同一个文件夹）。
链接到 contact.html：直接写 contact.html。
链接到 article1.html：写 blog/article1.html（进入 blog 文件夹）。
链接到 image1.jpg：写 blog/images/image1.jpg。

2.2 从 `blog/article1.html` 出发

如果我们在 blog 文件夹里的 article1.html 文件里写链接：

链接回 index.html：写 ../index.html（.. 表示退回到上一级 mywebsite 目录）。
链接回 about.html：写 ../about.html。
链接到 image1.jpg：写 images/image1.jpg（进入同级目录下的 images 文件夹）。
链接到 article2.html：直接写 article2.html（同级文件）。

3. 创建内部链接：分步实战

让我们基于上面的结构写一些实际的代码。

3.1 示例 1：从主页链接到关于页

(文件：index.html)

<!DOCTYPE html>
<html>
<head>
    <title>我的网站</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>了解更多 <a href="about.html">关于我们</a>。</p>
</body>
</html>

解释：href="about.html" 假设该文件与 index.html 在同一目录。

3.2 示例 2：从主页链接到博客文章

(文件：index.html)

<!DOCTYPE html>
<html>
<head>
    <title>我的网站</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>阅读我们的最新 <a href="blog/article1.html">博客文章</a>。</p>
</body>
</html>

解释：href="blog/article1.html" 链接到位于 blog 目录内的 article1.html。

3.3 示例 3：从文章链接回主页（使用 `..`）

(文件：blog/article1.html)

<!DOCTYPE html>
<html>
<head>
    <title>文章 1</title>
</head>
<body>
    <h1>文章 1</h1>
    <p>回到 <a href="../index.html">主页</a>。</p>
</body>
</html>

解释：href="../index.html" 使用 .. 向上跳一级（跳出 blog 目录），然后链接到 index.html。

3.4 示例 4：文章之间的链接