相對(duì)路徑與絕對(duì)路徑解析

前言

實(shí)際工作中，通常會(huì)創(chuàng)建一個(gè)文件夾專門用于存放圖像文件，這時(shí)在頁面中插入圖像，就需要采用路徑的方式來指定圖像文件的位置。

要想正確地使用路徑，就必須先搞清楚兩個(gè)概念：相對(duì)路徑與絕對(duì)路徑。

一、概念

1、絕對(duì)路徑

（1）絕對(duì)路徑以 Web 站點(diǎn)根目錄為參考基礎(chǔ)的目錄路徑。之所以稱為絕對(duì)，意指當(dāng)所有網(wǎng)頁引用同一個(gè)文件時(shí)，所使用的路徑都是一樣的。

（2）分為兩種情況：物理絕對(duì)路徑、網(wǎng)絡(luò)絕對(duì)路徑

物理絕對(duì)路徑：指電腦磁盤的真實(shí)位置（一般帶有真實(shí)盤符）如：“D:/HTML/HTML學(xué)習(xí)/03Day/01路徑解析.html” (通常工作中不會(huì)使用此方式)

網(wǎng)絡(luò)絕對(duì)路徑：指網(wǎng)絡(luò)中的完整的地址，例：“https://www.52cto.cn/”（前端面試寶藏網(wǎng)站）

2、相對(duì)路徑

以引用文件之網(wǎng)頁所在位置為參考基礎(chǔ)，而建立出的目錄路徑。因此，當(dāng)保存于不同目錄的網(wǎng)頁引用同一個(gè)文件時(shí)，所使用的路徑將不相同，故稱之為相對(duì)路徑。

• 圖像文件和 HTML 文件位于同一文件夾：只需輸入圖像文件的名稱即可，如： < img src=“l(fā)ogo.gif” /> 。
• 圖像文件位于 HTML 文件的下一級(jí)文件夾：輸入文件夾名和文件名，之間用 / 隔開，如： < img src=“img/logo.gif” /> 。
• 圖像文件位于 HTML 文件的上一級(jí)文件夾：在文件名之前加入 …/ ，如果是上兩級(jí)，則需要使用…/…/ ，以此類推，如： < img src=“…/logo.gif” /> 。
• 圖像文件位于網(wǎng)站根目錄：在文件名之前加入 / ，如： < img src=“/logo.png” /> 。

/ 開頭：代表根目錄； ./ 開頭：代表當(dāng)前所在的目錄； …/ 開頭：代表上一層目錄。

二、理解

1、絕對(duì)路徑

絕對(duì)路徑，就像一個(gè)門牌號(hào)，確定不變。

比如故宮的地址：北京市東城區(qū)景山前街 4 號(hào)。無論你在哪里，故宮就在那里，不會(huì)因?yàn)槟闳チ嗣绹?guó)，故宮就搬到了紐約市。

那么故宮的絕對(duì)路徑就是：北京市東城區(qū)景山前街 4 號(hào)。

1.1、絕對(duì)路徑示例

以此類比，如果你想要訪問百度，那么直接在超鏈接的地址鏈接那里輸入百度的路徑https://www.baidu.com/就可以了

<a href="https://www.baidu.com/">百度一下，你就知道</a>

2、相對(duì)路徑

相對(duì)路徑，會(huì)根據(jù)你當(dāng)前的位置而變化。比如你從天安門東和從天安門西去故宮的路線是不一樣的

假如，你現(xiàn)在在天安門東地鐵站，那么故宮對(duì)你來說，就是先出地鐵站，然后向西走350米到達(dá)天安門廣場(chǎng)，再向北行走350米到南門，最后再向北走800米就可以到故宮了。

所以，當(dāng)你在天安門東地鐵站時(shí)，故宮的相對(duì)路徑就是：當(dāng)前位置，出站，往西走 350米，往北走350米，再往北走800米

但是假如你現(xiàn)在在天安門西的地鐵站 如果你還按照天安門東的路線去故宮的話，那么你將會(huì)跑到南海游泳去了

所以，當(dāng)你在天安門西地鐵站時(shí)，故宮的相對(duì)路徑就是：當(dāng)前位置，出站，往東走 500米，往北走350米，再往北走800米

2.1、相對(duì)路徑示例

/ 開頭：代表根目錄； ./ 開頭：代表當(dāng)前所在的目錄； …/ 開頭：代表上一層目錄。

當(dāng)圖像文件和項(xiàng)目文件位于同一文件夾：只需輸入圖像文件的名稱即可，

此時(shí)我的項(xiàng)目文件和圖像文件都在同一級(jí)，因此我們可以直接輸入圖像文件名稱,也可以以 ./ 開頭再輸入圖像文件名稱

 	<img src="music.jpg" alt="圖片加載異常?。?！">
    <img src="./music.jpg" alt="圖片加載異常！??！">

當(dāng)圖像文件位于項(xiàng)目文件的下一級(jí)文件夾：輸入文件夾名和文件名，之間用 / 隔開，

此時(shí)我的項(xiàng)目文件與images文件處于同級(jí)，圖像文件處于images文件的下一級(jí)，我們可以先以第一種方式 ./images 找到images文件夾，之間用 / 隔開，再輸入圖像文件的名稱即可。

<img src="./images/music.jpg" alt="圖片加載異常?。。?span id="n5n3t3z"    class="token punctuation">">

當(dāng)圖像文件位于項(xiàng)目文件的上一級(jí)文件夾：在文件名之前加入 …/ ，如果是上兩級(jí)，則需要使用…/…/ ，以此類推，

此時(shí)圖像文件與HTML文件同級(jí) 都是我的項(xiàng)目文件的上一級(jí)，這時(shí)我們可以通過 **…/**讓項(xiàng)目文件回到上一級(jí)‘HTML文件’，然后輸入圖像文件的名稱即可。

    <img src="../music.jpg" alt="圖片加載異常?。?！">

當(dāng)圖像文件位于文件根目錄：在文件名之前加入 /

此時(shí)圖像文件位于文件的根目錄 我們通過**/**加上圖像文件名即可文章來源地址http://www.zghlxwxcb.cn/news/detail-722089.html

   <img src="/music.jpg" alt="圖片加載異常?。?！">

到了這里，關(guān)于HTML前端——絕對(duì)路徑與相對(duì)路徑（超詳細(xì)解析）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！