[譯] ./dogs.html 和 /dogs.html 間有什麼區別？

shery發表於2019-01-24
HTML

它們都是 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、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章