html中想把圖片絕對路徑改爲相對路徑怎麼操做?

時間 2019-11-21

標籤 html 想把圖片絕對路徑改爲相對怎麼欄目 HTML 简体版

原文原文鏈接

　　首先要咱們要弄懂相對路徑修改爲絕對路徑那麼必需要知道路徑的基本概念。css

　　html中的路徑：指文件存放的位置，在網頁中利用路徑能夠引用文件，完成：插入圖像、視頻等功能。表示在html中路徑的使用方式有兩種：相對路徑，絕對路徑。html

一、相對路徑：瀏覽器

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

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

./ ：表明文件所在的目錄（一般狀況下能夠省略不寫）視頻

../ ：表明文件所在的父級目錄（也就是上一級目錄）htm

../../ ：表明文件所在的父級目錄的父級目錄（也就是上一級上一級目錄）blog

/ ：表明文件所在的根目錄圖片

如：<img src=’images/1.jpg’/>表示此代碼所在html文件的路徑下的images文件夾下的1.jpg文件。開發

<img src=’../images/1.jpg’/>表示此代碼所在html文件的路徑的上一級的images文件夾下的1.jpg文件。

二、絕對地址：

　　就是直接從磁盤的位置去定位文件的地址。相似於咱們經過個人電腦一盤符的方式來尋找想要的指定內容，或者說直接帶着協議、域名，即如這樣格式的地址:https://www.taobao.com/img/1.jpg。

如：<img src=’https://www.taobao.com/img/1.jpg’/>表示絕對路徑

三、如何把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>