貓城
BLACKCAT CASTLE

路徑「/」、「./」、「../」代表的意思

   35 VIEWS
路徑「/」、「./」、「../」代表的意思

歡迎來到黑貓城,我是時雨の町站長 ─ 時雨。

簡易說明

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

範例

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

COMMENTS