重設根目錄 <base>
<base>
是 HTML 裡「重設根目錄」的元素,該元素並不會在頁面裡顯示,主要作用可以設定「相對路徑的根目錄」,這篇教學會介紹 <base>
重設根目錄元素。
認識 <base>
<base>
是 HTML 裡裡「重設根目錄」的元素,該元素會放在 HTML <head>
元素裡,主要作用可以設定「相對路徑的根目錄」,一個網頁只會有一個 <base>
。
<base>
屬於「空元素」,只需要「起始標籤」。
以下方的 HTML 為例,如果沒有加入 <base>
,則相對路徑是以「根目錄」為出發點,如果設定「/
」等同沒有放入 <base>
。
<!DOCTYPE html>
<html>
<head>
<title>oxxo</title>
</head>
<body>
<!-- 假設根目錄為 https://www.oxxostudio.tw -->
<a href="apple.html">apple</a>
<!-- 實際連結網址為:https://www.oxxostudio.tw/apple.html -->
<br>
<a href="banana.html">banana</a>
<!-- 實際連結網址為:https://www.oxxostudio.tw/banana.html -->
</body>
</html>
如果加入 <base>
,則相對路徑以 <base>
裡定義的 href 為出發點。
<!DOCTYPE html>
<html>
<head>
<title>OXXOSTUDIO</title>
<!-- 修改 base 的 href -->
<base href="/ok/test/">
</head>
<body>
<!-- 假設根目錄為 https://www.oxxostudio.tw -->
<a href="apple.html">apple</a>
<!-- 實際連結網址為:https://www.oxxostudio.tw/ok/test/apple.html -->
<br>
<a href="banana.html">banana</a>
<!-- 實際連結網址為:https://www.oxxostudio.tw/ok/test/banana.html -->
<br>
<a href="/orange.html">orange</a>
<!-- 因為 /orange.html 的寫法是指向根目錄 -->
<!-- 實際連結網址為:https://www.oxxostudio.tw/orange.html -->
</body>
</html>
如果 <base>
的 herf 設定為「絕對路徑」( 某個網址 ),則根目錄就會轉換成該網址。
<!DOCTYPE html>
<html>
<head>
<title>OXXOSTUDIO</title>
<base href="https://www.google.com/test/ok/">
</head>
<body>
<!-- 假設根目錄為 https://www.oxxostudio.tw -->
<a href="apple.html">apple</a>
<!-- 實際連結網址為:https://www.google.com/test/ok/apple.html -->
<br>
<a href="banana.html">banana</a>
<!-- 實際連結網址為:https://www.google.com/test/ok/banana.html -->
<br>
<a href="/orange.html">orange</a>
<!-- 因為 /orange.html 的寫法是指向根目錄 -->
<!-- 實際連結網址為:https://www.google.com/orange.html -->
</body>
</html>
<base>
的 target 屬性
<base>
除了 href 的必要屬性外,也可以設定 target 屬性,target 屬性等同於 <a>
的 target,只要設定了 <base>
的 target,則頁面中所有 <a>
的預設 target 都會跟著改變 ( 除非有額外設定 target )。
<!DOCTYPE html>
<html>
<head>
<title>OXXOSTUDIO</title>
<base href="/" target="_blank">
</head>
<body>
<a href="https://www.google.com">Google ( 開新視窗 )</a>
<br>
<a href="https://www.google.com" target="_top">Google ( 原視窗 )</a>
</body>
</html>
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~