HTML中的base標籤如何寫相對路徑？ （內附使用介紹）
- 寻∝梦原創
- 2018-08-27 19:12:554810瀏覽
這篇文章主要講述的是HTML中的base標籤的相對路徑的使用方法，裡面有使用實例介紹，接下來一起看看吧
首先我們說HTML中的base標籤寫相對路徑的內容：
html中base標籤解決相對路徑問題，
問題是門戶系統一直使用的是相對路徑，首頁做了rewrite，而首頁的很多連結(包括css、js、圖片等)都是相對路徑，問了門戶系統那邊的沒辦法解決，只能用相對路徑。
杯具來了，href="news/2014/05/25/1234.html"類似這樣的連結都成了http://www.111cn.net /news/2014/05/25 /1234.html的全路徑，而這個路徑在nginx中是沒辦法識別成門戶系統的(nginx是透過/portal來匹配的)。
這是因為：HTML文件所有連結中的相對路徑，瀏覽器都會提取目前文件的URL來填入。
突然想起了HTML的base標籤，來看W3C的解釋：
#dde6fb694e6711ae5e6f381704c04ae4 標籤為頁面上的所有連結規定預設位址或預設目標。
通常情況下，瀏覽器會從目前文件的 URL 中提取對應的元素來填入相對 URL 中的空白。
使用 dde6fb694e6711ae5e6f381704c04ae4 標籤可以改變這一點。瀏覽器隨後將不再使用目前文件的 URL，而使用指定的基本 URL 來解析所有的相對 URL。這其中包括 3499910bf9dac5ae3c52d5ede7383485、a1f02c36ba31691bcfe87b2722de723b、2cdf5bf648cf2f33323966d7f58a7f3f、ff9c23ada1bcecdd1a0fb5d5a0f18437 標籤中的 URL。
html中base標籤的使用實例：
<head> <base href="http://www.php.cn/i/" /> <base target="_blank" /> </head> <body> <img src="eg_smile.gif" /> <a href="http://www.php.cn">W3School</a> </body>
問題解決了。
註：文中使用的網域是真的，但是路徑確是找不到的。
base標籤最好不要動態寫入，否則在Firefox和IE中會有一個小bug，例如對於頁面http://localhost/static/test.html：
#html中base標籤的使用實例：
<html> <head> <script> document.write('<base href="http://localhost/" />'); </script> </head></p> <p><body> <img src="static/1.jpg" /> </body> </html>
base標記是一個基底連結標記，是一個單標記。用以改變文件中所有連結標記的參數內定值。它只能應用於標記93f0f5c25f18dab9d176bd4f6de5d30e與9c3bca370b5104690d9ef395f2c5f8d1之間。
利用html中的dde6fb694e6711ae5e6f381704c04ae4標籤取得相對路徑：（絕對路徑不支援）
下面是html中的dde6fb694e6711ae5e6f381704c04ae4的介紹：
base 元素可規定頁面中所有連結的基準URL
預設情況下，頁面中的連結（包括樣式表、腳本和圖像的位址）都是相對於目前
頁面的位址(即:瀏覽器網址列裡的請求URL)。
我們可以使用 dde6fb694e6711ae5e6f381704c04ae4標籤中的href屬性來設置，所有的「相對基準 URL」。
上面說的是什麼意思呢？我們來看看程式碼就知道咯~~
這是JSP端的程式碼,下面的程式碼(十分類似上面「方法一」 中的JSP程式碼)
但是這裡我們並沒有採用${pageScope.basePath} 」相對路徑位址」的方法，
現在採用了html檔案中的dde6fb694e6711ae5e6f381704c04ae4標籤：
<html> <head> <base href="http://localhost:8080/MyApp/"> </head> <!-- // 设置了 <base>后，相对路径，相对于的就是base中的路径，而不再是浏览器 地址的请求路径啦~~~ --> <a href="jsp/login.jsp">Login </a> </html>
#【小編推薦】
HTML中head標籤是什麼意思？一篇文章教你正確使用head標籤
htmle388a4556c0f65e1904146cc1a846bee標籤是什麼元素？關於html p標籤的定義與作用詳解
以上是HTML中的base標籤如何寫相對路徑？ （內附使用介紹）的詳細內容。更多資訊請關注PHP中文網其他相關文章！