3.3　關于路徑

路徑屬性在HTML的很多標簽中都能見到，比如＜img＞元素的src屬性是圖片的存放路徑，＜a＞元素的href屬性的值是一個跳轉到目標資源的路徑。除此之外，還有音頻和視頻等標簽也具有路徑屬性，如果路徑錯誤，那么就會導致圖片、視頻等內容無法正常顯示，可見路徑的重要性。

3.3.1　路徑大考驗

路徑一般分為絕對路徑和相對路徑，本地計算機中的絕對路徑如下：D：\project1\imgs\logo.png，相對路徑是指與當前操作文件的相對位置，以圖3.5中的文件目錄層級為例，所有文件存儲在D盤，X是一個站點的根目錄，請先花幾分鐘自行嘗試填空，然后參考后面的答案。

特別說明：在HTML中，路徑中不同層級的目錄分割符是/，而不是系統默認的\，因此，為了適應HTML的用法，參考答案都采用/。關于文件目錄的路徑，D盤經常被稱為盤符，X是D盤下的一級目錄，而data文件夾和js文件夾則是二級目錄，其余文件夾依次類推。

（1）請寫出與index.html文件同級的兩個絕對路徑。

（2）如果你現在正在編輯index.html代碼，需要引入index文件夾下的getFloor1.php文件，相對路徑應該怎么寫？

（3）如果你現在正在編輯login.js代碼，需要引入data文件夾下的init.php，怎么寫路徑？請用/隔開。

（4）如果你正在編輯login.php，想要發送數據給login.html，請問你的路徑要怎么寫？請用/隔開。

參考答案

（1）答案是：D：/X/data、D：/X/js

解答：因為是index.html和data文件夾，js文件夾都屬于根目錄X文件夾的下一級，所以它們對應的路徑為D:/X/index.html，D：/X/data和D：/X/js。

（2）答案是：data/index/getFloor1.php

解答：由于index.html和data屬于根目錄X文件夾下的同一級，即D：\X，因此相對路徑只需沿著當前目錄，就可以直接查找到data，進而向下查找到目標文件。

（3）答案是：../data/init.php

解答：這一題稍有難度，由于login.js文件和目標文件都處于三級目錄，但是不在同一個二級目錄下。前者在Windows系統中的絕對路徑是D：\X\js，而后者是D：\X\data，不難看出它們的二級目錄是不一致的，但是它們的一級目錄都是根目錄\X，因此，需要先返回到上一級X目錄，然后再沿著二級data目錄下尋找目標文件init.php。這里就需要用到“..”去返回上一級。

（4）答案是：../../login.html

解答：login.php在Windows系統中的目錄是D：\X\data\users，而login.html所在目錄是D：\X，可以知道login.php文件的目錄層級比較深；因此，需要先返回到上一級data目錄，然后再返回上一級到X目錄，最后在X目錄下找到login.html。

建議路徑最多就用到三級深度，../返回上一級，../../../返回上三級，因為再多的話，自己都亂了。還有一種是網絡路徑，也就是網址，如果你想引用網絡資源，也要用到它的地址。比如一張網絡圖片，你可以右擊圖片然后選擇復制文件路徑，得到它的網址，就可以在你的網頁中正確顯示。

3.3.2　相對路徑法則

在實際應用中，相對路徑使用得更多，因此你必須要掌握。這里我們來總結一下相對路徑的用法，要點是找到與當前目標文件同級的目錄。一般來說，當前文件和目標文件所在的目錄關系存在以下三種情況：

（1）二者在同一級目錄，則直接給出文件名就是相對路徑；

（2）如果目標文件所在的目錄在當前文件目錄的上一級，則查看離二者最近的同一級差多少級，差多少級就添加多少個“../”，直到找到相同的父級，則停止添加，并在最后一個“../”后面列出目標文件名即可；

（3）如果目標文件在當前文件的下級，相對路徑則為“子級目錄/目標文件名”。