好程式設計師分享html圖片絕對路徑改相對路徑，要弄懂相對路徑修改成絕對路徑那麼必須要知道路徑的基本概念。

html 中的路徑：指檔案存放的位置，在網頁中利用路徑可以引用檔案，完成：插入影像、影片等功能。表示在html中路徑的使用方式有兩種：相對路徑，絕對路徑。

1、相對路徑：

html 中的相對路徑的概念是：指當前html頁面引用的檔案相對於當前 html頁面檔案的路徑，在html 網頁開發過程中多采用這種方法來引用我們所想使用的內容。

相對路徑有多種使用的方法，這些方法標識表示的意義也不相同。那麼接下來我們來看一下是如何使用的。

./ ：代表檔案所在的目錄（通常情況下可以省略不寫）

../ ：代表檔案所在的父級目錄（也就是上一級目錄）

../../ ：代表檔案所在的父級目錄的父級目錄（也就是上一級上一級目錄）

/ ：代表檔案所在的根目錄

如： <img src=’images/1.jpg ’ /> 表示此程式碼所在html檔案的路徑下的images資料夾下的1.jpg檔案。

<img src=’../images/1.jpg ’ /> 表示此程式碼所在html檔案的路徑的上一級的images資料夾下的1.jpg檔案。

2、絕對地址：

就是直接從磁碟的位置去定位檔案的地址。類似於我們透過我的電腦一磁碟機代號的方式來尋找想要的指定內容，或者說直接帶著協議、域名，

3、如何把html圖片絕對路徑改為相對路徑

可以使用html當中給我們提供的<base/>標籤來完成。<base> 標籤為頁面上的所有路徑的引用設定了預設地址或預設目標。通常情況下，瀏覽器會從當前文件的 URL 中獲取到相應的元素來填寫相對的引用路徑。

首先<base/>標籤是一個單標籤，同時所有的瀏覽器都支援 <base/>這一個標籤標籤所以相容性上大家不用考慮。同時在使用<base/>標籤的時候必須注意<base/>標籤，必須放置到html網頁的<head></head>標籤當中，同時每一個html頁面當中最多隻能有一個<base/>標籤，它的作用也很明顯。就是用來為html頁面上的所有路徑引用來規定預設地址或預設目標,是一種設定網頁中引用路徑的標記。

剛才我們已經在前面提到了在html中常見的路徑形式有相對路徑和絕對路徑，那麼在這個時候使用了<base/>標籤指定了目標的話，那麼我們的使用者使用的客戶端瀏覽器就會把這個內容解析成為當前html中引用大的所有相對路徑，同時包括<a></a>超連結標籤、<img/>圖片標籤、<link>css引用標籤、<form></form> 表單標籤中的地址。也就是說，瀏覽器解析的時候會在引用的路徑的前面會自動的加上<base/>上面繫結的地址，同時在這個時候頁面中的相對路徑也都會被轉換成為絕對路徑。

使用語法：

<head>

</head>

好程式設計師分享html圖片絕對路徑改相對路徑

相關文章