[譯] ./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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。