HTML中的base標籤如何寫相對路徑？（內附使用介紹）-html教學-PHP中文網

首頁

web前端

html教學

HTML中的base標籤如何寫相對路徑？（內附使用介紹）

寻∝梦

Aug 27, 2018 pm 07:12 PM

base html

這篇文章主要講述的是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的解釋：

# 標籤為頁面上的所有連結規定預設位址或預設目標。

通常情況下，瀏覽器會從目前文件的 URL 中提取對應的元素來填入相對 URL 中的空白。

使用標籤可以改變這一點。瀏覽器隨後將不再使用目前文件的 URL，而使用指定的基本 URL 來解析所有的相對 URL。這其中包括、、、

標籤中的 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(&#39;<base href="http://localhost/" />&#39;);
</script>
</head></p> <p><body>
<img src="static/1.jpg" />
</body>
</html>

登入後複製

base標記是一個基底連結標記，是一個單標記。用以改變文件中所有連結標記的參數內定值。它只能應用於標記與之間。

利用html中的標籤取得相對路徑：（絕對路徑不支援）

下面是html中的的介紹：

base 元素可規定頁面中所有連結的基準URL

預設情況下，頁面中的連結（包括樣式表、腳本和圖像的位址）都是相對於目前

頁面的位址(即:瀏覽器網址列裡的請求URL)。

我們可以使用標籤中的href屬性來設置，所有的「相對基準 URL」。

上面說的是什麼意思呢？我們來看看程式碼就知道咯~~

這是JSP端的程式碼,下面的程式碼(十分類似上面「方法一」中的JSP程式碼)

但是這裡我們並沒有採用${pageScope.basePath} 」相對路徑位址」的方法，

現在採用了html檔案中的標籤：

<html>
<head>
<base href="http://localhost:8080/MyApp/">
</head>
<!-- // 设置了 <base>后，相对路径，相对于的就是base中的路径，而不再是浏览器
地址的请求路径啦~~~  -->
<a href="jsp/login.jsp">Login </a>
</html>

登入後複製

#【小編推薦】

HTML中head標籤是什麼意思？一篇文章教你正確使用head標籤

html

標籤是什麼元素？關於html p標籤的定義與作用詳解

以上是HTML中的base標籤如何寫相對路徑？（內附使用介紹）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn