[译] ./dogs.html 和 /dogs.html 间有什么区别？

• 原文地址：What’s the difference between ./dogs.html and /dogs.html?
• 原文做者：CHRIS COYIER
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Shery
• 校对者：Kasheem Lew Cherry

它们都是 URL 路径。可是他们名字不一样。

<!-- 相对于当前所在目录（相对路径） -->
<a href="./dogs.html">Dogs</a>

<!-- 相对于根目录（绝对路径） -->
<a href="/dogs.html">Dogs</a>
复制代码

还有完整 URL 路径，以下所示：

<!-- 完整 URL 路径 -->
<a href="https://website.com/dogs.html">Dogs</a>
复制代码

全限定 URL 的功能再明显不过 —— 它会指向一个确切的页面。因此，让咱们再来看看前两个例子。

假设你的网站上有这样的目录结构：

public/
├── index.html
└── animals/
    ├── cats.html
    └── dogs.html
复制代码

若是你在 cats.html 上放置了一个连接到 /dogs.html（一个“绝对”路径）的超连接，那么它将指向 404 页面 —— 这个网站的根目录那一层没有 dogs.html 文件！在路径开头的 / 意味着__“从最底层开始，而后再往上”__（public/ 是最底层到目录）。

那个在 cats.html 上的连接须要写成 ./dogs.html（从当前文件所在目录开始）或 /animals/dogs.html（明确说明要从哪一个目录开始）。

固然，目录结构越复杂，绝对 URL 越长。

public/
├── animals/
  └── pets/
      ├── c/
      |   └── cats.html
      └── d/
          └── dogs.html
复制代码

在这样的结构下，就想要从 dogs.html 连接到 cats.html 而言，URL 确定是其中之一...

<!-- 注意两个点，它表示源文件所在目录的上一级目录 -->
<a href="../c/cats.html">cats</a>

<!-- 或者相对于根目录 -->
<a href="/animals/pets/c/cats.html">cats</a>
复制代码

在这种状况下值得注意的是，若是 animals/ 被重命名为 animal/，就会使得绝对连接失效，可是相对连接仍会有效。这多是使用绝对连接的缺点。当你使用绝对连接时，改变路径将会影响你的连接。

咱们只研究了 HTML 文件中连接到 HTML 文件的情形，但基本上这个思路对于网页（和计算机）是通用的。例如，在 CSS 文件中，你可能有下面这样的代码：

body {
  /* 当前文件所在目录下的 /images 目录里的图片 */
  background-image: url(./images/pattern.png);
}
复制代码

...在这种状况下是正确的：

public/
├── images/
|   └── pattern.png
├──index.html
└── style.css
复制代码

可是若是你移动了 CSS 文件...

public/
├── images/
|   └── pattern.png
├── css/
|   └── style.css
└── index.html
复制代码

...紧接着就会出问题，是由于你的 CSS 文件如今嵌套在另外一个目录中，引用路径变得更深。你须要使用两个点再次回到当前文件所在目录的上一级目录，例如 ../images/pattern.png。

并非哪一种 URL 格式比另外一种格式好 —— 它只取决于你认为当时怎样更有用、更直观。

对我来讲，我在思考哪些东西最不可能改变。对于相似图像资源的东西，我发现我不太可能移动它，所以使用绝对 URL 路径（例如 /images/pattern.png）连接它彷佛是最安全的。可是为了连接到刚好位于同一目录中的全部文档，使用相对连接的方式彷佛更安全。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。