【HTML5開發】HTML相對路徑和絕對路徑(小知識)


在網頁制作的過程中,少不了跟路徑打交道,比如,包含一個文件,插入一個圖片等,與路徑都有關系,如果使用了錯誤的文件路徑,就會導致引用失效(無法瀏覽鏈接文件,或無法顯示插入的圖片等)。

初學者可能會感到困惑,下面我就詳細的介紹一下相對路徑與絕對路徑。

 

HTML的2種路徑寫法:相對路徑和絕對路徑

1.HTML相對路徑(Relative Path)

用途:指定由這個文件所在的路徑引起的跟其它文件(或文件夾)的路徑關系

如果源文件和引用文件在同一個目錄里,直接寫引用文件名即可,這時引用文件的方式就是使用相對路徑。

 

下面建立兩個HTML文檔info.html和index.html,用作示例,要求都是在info.html加入index.html超鏈接。

 

eg1:相對路徑的簡單應用

假設:info.html路徑是:c:/Inetpub/wwwroot/sites/blabla/info.html

   index.html路徑是:c:/Inetpub/wwwroot/sites/blabla/index.html

寫法:<a href = "index.html">這是超連接</a>

 

eg2:如何表示上級目錄

../表示源文件所在目錄的上一級目錄,http://www.cnblogs.com/表示源文件所在目錄的上上級目錄,以此類推。

假設:info.html路徑是:c:/Inetpub/wwwroot/sites/blabla/info.html

   index.html路徑是:c:/Inetpub/wwwroot/sites/index.html

寫法:<a href = "../index.html">這是超連接</a>

 

eg3:如何表示上上級目錄

假設:info.html路徑是:c:/Inetpub/wwwroot/sites/blabla/info.html

   index.html路徑是:c:/Inetpub/wwwroot/sites/wowstory/index.html

寫法:<a href = "../wowstory/index.html">index.html</a>

 

eg3:如何表示下級目錄

引用下級目錄的文件,直接寫下級目錄文件的路徑即可。

假設:info.html路徑是:c:/Inetpub/wwwroot/sites/blabla/info.html

   index.html路徑是:c:/Inetpub/wwwroot/sites/blabla/html/index.html

寫法:<a href = "html/index.html">這是超連接</a>

 

2.HTML絕對路徑(Absolute Path)

大家都知道,在我們平時使用計算機時要找到需要的文件就必須知道文件的位置,而表示文件的位置的方式就是路徑。

例如只要看到這個路徑:c:/website /img/photo.jpg我們就知道photo.jpg文件是在c盤的website目錄下的img子目錄中。

類似於這樣完整的描述文件位置的路徑就是絕對路徑。我們不需要知道其他任何信息就可以根據絕對路徑判斷出文件的位置。

HTML絕對路徑(absolute path)在網頁制作中指帶域名的文件的完整路徑。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM