重設根目錄 <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>
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～