簡易說明

• 「/」表示根目錄
• 「./」表示目前所在的目錄
• 「../」表示上一層目錄
• 「../../」表示上上一層目錄，以此類推。

範例

test.html：表目前所在之目錄下的 test.html 檔案
./test.html：表目前所在之目錄下的 test.html 檔案
/test.html：表示根目錄下的 test.html 檔案
../test.hmtl：表示上一層目錄下的 test.html 檔案
../../test.html：表示上上一層目錄下的 test.html 檔案，以此類推。

詳細說明

路徑分為絕對路徑與相對路徑，「絕對路徑」顧名思義就是絕對的位置，不會隨著目前所在的目錄而改變，例如「https://www.yoursite.com/image/test123.jpg」，而相對路徑就是相對於現在目錄的路徑，例如「test123.jpg」。

如果沒有特殊需求，一般會建議使用相對路徑，也就是像「test123.jpg」或「./test.html」這樣，這樣即使移動或改變了這個目錄（如 image），裡面的網址也不會受到影響，都能正常連結，但如果是絕對路徑，像「https://www.yoursite.com/image/test123.jpg」這樣，一但改變目錄如「image」改為「images」，那麼連結就失效了，而在這個目錄下所使用的絕對路徑全部都要做修改，在維護上會相當耗費人力。

補充

如果引用到的路徑不正確就會無法正常顯示，舉例來說，在「根目錄/article/category/a.html」的 a.html 網頁中想要連結「根目錄/image/test.jpg」的 test.jpg 檔案，那麼相對路徑就會是「/image/test.jpg」（根目錄下的image目錄中的檔案）或「../../image/test.jpg」（上上一層下的image中的檔案）。

圖片範例

可在圖片按右鍵選檢查元素來查看下列圖片的路徑，以下為同一張圖片：
使用「/image/web/html-css/url-path-test.png」：

使用「../../../image/web/html-css/url-path-test.png」：

而這兩種中，又以「/image/web/html-css/url-path-test.png」這樣的路徑更好，這樣即使這篇文章移到別的分類也不會破圖。

• 下一篇

LEAVE A REPLY