首頁 > web前端 > css教學 > 主體

相對路徑與絕對路徑的差異_CSS/HTML

WBOY
發布: 2016-05-16 12:11:51
原創
1741 人瀏覽過

絕對路徑:

  在我們平常使用電腦時要找到需要的檔案就必須知道檔案的位置,而表示檔案的位置的方式就是路徑,例如只要看到這個路徑:c:/website/img /photo.jpg我們就知道photo.jpg檔是在c碟的website目錄下的img子目錄。類似於這樣完整的描述檔位置的路徑就是絕對路徑。我們不需要知道其他任何資訊就可以根據絕對路徑判斷文件的位置。而在網站中類似以http://www.e3i5.net/img/photo.jpg來決定檔案位置的方式也是絕對路徑。

  在網站的應用程式中,通常我們使用"/"來表示根目錄,/img/photo.jpg就表示photo.jpg檔案在這個網站的根目錄上的img目錄裡。但是這樣使用對於初學者來說是具有風險性的,因為要知道這裡所指的根目錄並不是你的網站的根目錄,而是你的網站所在的服務器的根目錄,因此當網站的根目錄與伺服器根目錄不同時,就會發生錯誤。 
  相對路徑:

  分析為什麼會發生圖片無法正常顯示的情況。舉一個例子,現在有一個頁面index.htm,在這個頁面中聯接有一張圖片photo.jpg。他們的絕對路徑如下:
  c:/website/index.htm
  c:/website/img/photo.jpg

  如果你使用絕對路徑c:/website/img/photosite/img/photo. jpg,那麼在自己的電腦上將一切正常,因為確實可以在指定的位置即c:/website/img/photo.jpg上找到photo.jpg文件,但是當你將頁面上傳到網站的時候就很可能會出錯了,因為你的網站可能在伺服器的c盤,可能在d盤,也可能在aa目錄下,更可能在bb目錄下,總之沒有理由會有c:/website/img/photo.jpg這樣一個路徑。那麼,在index.htm檔案中要使用什麼樣的路徑來定位photo.jpg檔案呢?對,應該是用相對路徑,所謂相對路徑,顧名思義就是自己相對與目標位置。在上例中index.htm中聯接的photo.jpg可以使用img/photo.jpg來定位文件,那麼不論將這些文件放到哪裡,只要他們的相對關係沒有變,就不會出錯。

  另外我們使用「../」來表示上一級目錄,「../../」表示上上級的目錄,以此類推。 (學過dos的朋友可能比較容易理解)

  再看幾個例子,注意所有例子中都是index.htm檔案中聯接有一張圖片photo.jpg。

  例:
  c:/website/web/index.htm
  c:/website/img/photo.jpg
  c:/website/img/photo.jpg
  在此例中的photoindex.jpg]應該怎樣表示呢?
  錯誤寫法:img/photo.jpg
  這種寫法是不正確的,在此例中,對於index.htm檔案來說img/photo.jpg所代表的絕對路徑是:c:/website /web/img/photo.jpg,顯然不符合要求。
  正確寫法:使用../img/photo.jpg的相對路徑來定位檔案


  例:
  c:/website/web/xz/index.htm
  c:/website/web/xz/index.htm
c:/website/img/images/photo.jpg
  在此例中index.htm中聯接的photo.jpg應該怎樣表示呢?
  錯誤寫法:../img/images/photo.jpg
  這種寫法是不正確的,在此例中對於index.htm檔案來說../img/images/photo.jpg所代表的絕對路徑是:c:/website/web/img/images/photo.jpg。
  正確寫法:可以使用../../img/images/photo.jpg的相對路徑來定位檔案


  例:
  c:/website/web/xz/ index.htm
  c:/website/web/img/photo.jpg
  在此例中index.htm中聯接的photo.jpg應該怎樣表示呢?
  錯誤寫法:../../img/photo.jpg
  這種寫法是不正確的,在此例中對於index.htm檔案來說../../img/photo.jpg所代表的絕對路徑是:c:/website/img/photo.jpg。
  正確寫法:可以使用../img/photo.jpg的相對路徑來定位檔案

  總結:透過以上的例子可以發現,在把絕對路徑轉換為相對路徑的時候,兩個檔案絕對路徑中相同的部分都可以忽略,不做考慮。只要考慮他們不同之處就可以了。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!