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

首頁

web前端

html教學

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

寻∝梦

Aug 27, 2018 pm 07:12 PM

basehtml

這篇文章主要講述的是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。這其中包括、 HTML中的base標籤如何寫相對路徑？（內附使用介紹）、、

html中base標籤的使用實例：

<head>
<base href="http://www.php.cn/i/" />
<base target="_blank" />
</head>
<body>
<img  src="/static/imghwm/default1.png"  data-src="eg_smile.gif"  class="lazy"   / alt="HTML中的base標籤如何寫相對路徑？ （內附使用介紹）" >
<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/imghwm/default1.png"  data-src="static/1.jpg"  class="lazy"   / alt="HTML中的base標籤如何寫相對路徑？ （內附使用介紹）" >
</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

HTML，CSS和JavaScript：示例和實際應用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在網頁開發中的作用分別是：1.HTML用於構建網頁結構；2.CSS用於美化網頁外觀；3.JavaScript用於實現動態交互。通過標籤、樣式和腳本，這三者共同構築了現代網頁的核心功能。

如何在標籤上設置lang屬性？為什麼這很重要？May 08, 2025 am 12:03 AM

設置標籤的lang屬性是優化網頁可訪問性和SEO的關鍵步驟。 1)在標籤中設置lang屬性，如。 2)在多語言內容中，為不同語言部分設置lang屬性，如。 3)使用符合ISO639-1標準的語言代碼，如"en"、"fr"、"zh"等。正確設置lang屬性可以提高網頁的可訪問性和搜索引擎排名。

HTML屬性的目的是什麼？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外觀和互動，使網站互動，響應式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，類，類型，類型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中創建列表？May 06, 2025 am 12:01 AM

toCreateAlistInHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulletedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。

HTML行動：網站結構的示例May 05, 2025 am 12:03 AM

HTML用於構建結構清晰的網站。 1)使用標籤如、、定義網站結構。 2)示例展示了博客和電商網站的結構。 3)避免常見錯誤如標籤嵌套不正確。 4)優化性能通過減少HTTP請求和使用語義化標籤。

您如何將圖像插入HTML頁面？May 04, 2025 am 12:02 AM

toinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）

HTML的目的：啟用Web瀏覽器可以顯示內容May 03, 2025 am 12:03 AM

HTML的核心目的在於讓瀏覽器理解並展示網頁內容。 1.HTML通過標籤定義網頁結構和內容，如、到、等。 2.HTML5增強了多媒體支持，引入了和標籤。 3.HTML提供了表單元素，支持用戶交互。 4.優化HTML代碼可提升網頁性能，如減少HTTP請求和壓縮HTML。

為什麼HTML標籤對Web開發很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）semantictagsimproveaccessibilityandseo.2）semanteLayOut，語義和互動性。 3）poseriblesibilityandseoandseo.3）poseriblesoftagscanoftagscanoftagscanoptagscanoptimizeperefeneandimizeanDenSuroceRecRoscRoss-BrowserCrowserCercerComercompatibility。

See all articles