( Day 9.4 ) HTML 重設根目錄 <base>

2023 iThome 鐵人賽

DAY 9

Modern Web

跟著 OXXO 一起學 HTML系列第 18 篇

15th鐵人賽 html html教學

oxxo

2023-09-09 00:05:52

273 瀏覽

分享至

<base> 是 HTML 裡「重設根目錄」的元素，該元素並不會在頁面裡顯示，主要作用可以設定「相對路徑的根目錄」，這篇教學會介紹 <base> 重設根目錄元素。

原文參考：重設根目錄 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>