|
相對路徑和絕對路徑，往往都是初學者最困惑的知識點之一。在這一節(jié)，我們詳細跟大家探討一下這兩者的區(qū)別和寫法。 我們在C盤目錄下建立一個網(wǎng)站，網(wǎng)站名稱為“BookTest”，這個網(wǎng)站下的目錄內容如下： 我們先溫習上一節(jié)學到的<img>標簽的語法： <img src="圖像源文件路徑" alt="圖片無法顯示時的提示文字" title="鼠標經(jīng)過圖片時的提示文字"/> 在img標簽中，要想正確在瀏覽器顯示圖像，我們必須給出圖像的準確路徑，即<img>標簽的src屬性。在接下來，我們用“網(wǎng)頁1”和“網(wǎng)頁2” 分別去引用images文件夾下的海賊王圖片，從而多方面來認識相對路徑和絕對路徑的區(qū)別。 一、“網(wǎng)頁1”引用海賊王圖片如果在“網(wǎng)頁1”引用“海賊王”這張圖片，則圖片路徑有兩種寫法：
以上兩種方法都能達到效果。為什么呢？這就是相對路徑和絕對路徑的問題。 1、相對路徑寫法一采用了“相對路徑”方法，所謂的相對路徑，就是在同一個網(wǎng)站下，不同文件之間的的位置定位。我們分析一下，“網(wǎng)頁1”和images文件夾位于網(wǎng)站BookTest根目錄下，而海賊王圖片位于images文件夾下，那么src應該是“images/海賊王.jpg”。 那有同學就會問，那下圖2中，“網(wǎng)頁1”如果要引用海賊王圖片的相對路徑怎么寫呢？
答案應該是：<img src="海賊王.jpg" alt="海賊王"/>。這個時候網(wǎng)頁1與海賊王圖片位于同一目錄下。 2、絕對路徑對于寫法二，采用的是“絕對路徑”方法，所謂的絕對路徑就是完整的路徑。 二、“網(wǎng)頁2”引用海賊王圖片我們再回到圖1中的目錄內容，如果在“網(wǎng)頁2”引用“海賊王”這張圖片，圖片路徑也有兩種寫法：
1、相對路徑同樣，寫法一是相對路徑寫法，而寫法二是絕對路徑寫法。我們分析一下，“網(wǎng)頁2”位于test文件夾下，而海賊王圖片位于images文件夾下。因此，相對于“網(wǎng)頁2”，海賊王圖片位于“網(wǎng)頁2”上一級目錄下的images文件夾下。因此，src的寫法為“../images/海賊王.jpg” alt=”海賊王”。其中“../”表示上一級目錄，大家要懂得這種寫法。 現(xiàn)在就可以對相對路徑寫法進行總結了。相對路徑的寫法首先就是要分析當前網(wǎng)頁的位置和圖像的位置之間的關系，然后用一種方式把他們之間的相對關系表達出來。 2、絕對路徑寫法二是“絕對路徑”寫法，跟“網(wǎng)頁1”引用海賊王圖片的寫法一樣。絕對路徑，只要你的圖片沒有移動到別的地方，所有網(wǎng)頁引用該圖片的路徑寫法都是一樣的。大家稍微想一下就懂了。 三、圖片路徑容易寫錯怎么辦？在一個網(wǎng)頁引用圖片，最煩人的一點就是往往容易把路徑給寫錯，然后在瀏覽器圖片沒辦法顯示出來。那有什么簡單方法防止出錯呢？ 在Visual Studio網(wǎng)頁中，如果要在頁面引用一張圖片，我們只需要采取一個小技巧就可以讓你的圖片路徑準確表達出來。 我們打開一個網(wǎng)頁，然后用鼠標拖拽著圖片到你網(wǎng)頁代碼處：
當圖片被拖拽到代碼處之后， Visual Studio自動生成<img>標簽代碼：
大家會驚奇地發(fā)現(xiàn)，系統(tǒng)自動生成了<img>標簽代碼，而且圖片的路徑src都自動生成了。這樣我們以后引用圖片都不需要自己手動寫圖片的src了。 系統(tǒng)自動生成的都是相對路徑，對于一個網(wǎng)站來說，外部文件或圖片的引用都是使用相對路徑，幾乎不用絕對路徑，大家要非常清楚這一點。 疑問 1、為什么我使用絕對路徑時，圖片不能顯示出來？ 當我們使用絕對路徑時，往往編輯器都不能把圖片的路徑解析出來，因此圖片無法在網(wǎng)頁中顯示出來。在真正的網(wǎng)站開發(fā)中，對于圖片或者引用文件的路徑，我們100%都是使用相對路徑的。因此，大家不必糾結絕對路徑問題，只需要掌握相對路徑的寫法即可。 總結 1、相對路徑和絕對路徑： （1）相對路徑，就是在同一個網(wǎng)站下，不同文件之間的的位置定位。引用的文件是相對當前網(wǎng)頁的位置而言的，根據(jù)這個相對位置得出相對路徑。 （2）絕對路徑，指的是完整的路徑。 2、在visual studio中引用圖片，都是采用拖拽方式自動生成代碼； 3、對于一個網(wǎng)站而言，外部文件或圖片的引用都是使用相對路徑，幾乎不用絕對路徑。 |
|
|
來自： yimiludou > 《系統(tǒng)》
