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

摘要： 它們都是 URL 路徑 。但是他們名字不同。 <!-- 相對於當前所在目錄（相對路徑） --> <a href="./dogs.html">Dogs</a> <!-- 相對於根目錄（絕對路徑） --> ...

它們都是 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 ）連結它似乎是最安全的。但是為了連結到恰好位於同一目錄中的所有文件，使用相對連結的方式似乎更安全。

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到ofollow,noindex">掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為掘金 上的英文分享文章。內容覆蓋Android 、iOS 、前端 、後端 、區塊鏈 、產品 、設計 、人工智慧 等領域，想要檢視更多優質譯文請持續關注掘金翻譯計劃 、官方微博、知乎專欄 。