html5-秒懂路徑

路徑(重點&難點)

在引用外部文件(如超鏈接或者插入圖片)時,經常會遇到我們的頁面文件跟要引用的目標文件不在同一目錄下的情況,這個時候,就帶來了路徑引用的問題。通常情況下,我們將引用的路徑分爲兩種情況,絕對路徑和相對路徑。

絕對路徑

  • 概念

    絕對路徑是指文件在硬盤上真正存在的路徑。例如“bg.jpg”這個圖片是存放在硬盤的“D:\work\code\imgs”目錄下,那麼, “bg.jpg”這個圖片的絕對路徑就是:

    <body backround="D:\work\code\imgs\bg.jpg" >

  • 應用

    通常我們使用絕對路徑,更多應用是在定位網絡資源上,

    如:https://image.so.com/i?ie=utf-8&src=hao_360so&q=%E6%95%85%E5%AE%AB%E7%BB%9D%E7%BE%8E%E9%9B%AA%E6%99%AF

  • 使用絕對路徑的缺點

    在實際開發中,很少會使用絕對路徑,如果使用“D:\work\code\imgs\bg.jpg”來指定背景圖片的位置,在自己的計算機上 瀏覽可能會一切正常,但是上傳到Web服務器上瀏覽就很有可能不會顯示圖片了。因爲上傳到Web服務器上時,可能整個網站並沒有放在Web服務器的D盤, 有可能是E盤或H盤。即使放在Web服務器的D盤裏,Web服務器的E盤裏也不一定會存在“D:\work\code\imgs\bg.jpg”這個目錄,因此在瀏覽網頁時是不會顯示圖片的

相對路徑

爲了不同設備存放路徑不一致的這種情況,通常在網頁中指定文件時,都會選擇使用相對路徑。所謂相對路徑,就是相對於當前文件的位置。關於相對路徑,有以下三種情況:

  • 同級查找

    當圖像文件和HTML文件位於同一文件夾時,只需輸入圖像文件的名稱即可,如:

     <body background="bg.jpg">
  • 查找下一級

    當圖像文件位於HTML文件的下一級文件夾,輸入文件夾名和文件名,之間用“/”隔開,如:

​ <body background="img/bg.jpg">

  • 查找上一級

    當圖像文件位於HTML文件的上一級文件夾,在文件名之前加入“../” ,如果是上兩級,則需要使用 “../ ../”,以此類推,如:

​ <body background="../img/bg.jpg">

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章