HTML <base> 標籤 (tag) - 設定網頁中連結的 base URL, base target

<base> 用來設定整個頁面中，所有連結類型的屬性的預設根網址 (base URL) 和預設連結目標 (base target)，什麼是連結類型的屬性？例如有 <a> 超連結的 href 或 <img> 圖片的 src 等。

<base> 標籤是放在 <head> 標籤裡面。

<base> 標籤有兩個屬性值 href 和 target。

<base> 的 href 用來設定所有相對路徑的根 URL，舉個例子：

<head>
  <base href="https://examples.com/somedir/">
</head>

<body>
  <a href="some/place.html">這個連結</a>
  會連到 https://examples.com/somedir/some/place.html
  
  <a href="/another/place.html">這個連結</a>
  會連到 https://examples.com/another/place.html
  
  <a href="https://www.fooish.com/html/base-tag.html">這個連結</a>
  不變，會連到 https://www.fooish.com/html/base-tag.html
  
  <a href="#some-id">這個連結</a>
  會連到 https://examples.com/somedir/#some-id
  
  <img src="images/photo.jpg"> 這張圖片
  會連到 https://examples.com/somedir/images/photo.jpg
</body>

<base> 的 target 用來設定預設連結目標，target 可以指定下面這些值：

  • _self: 預設值，在當前視窗開啟
  • _blank: 在新視窗開啟
  • _parent: 在上一層父視窗開啟
  • _top: 在最頂層父視窗開啟

舉個例子：

<head>
  <base href="https://examples.com/somedir/" target="_blank">
</head>

<body>
  點擊
  <a href="some/place.html">這個連結</a>
  會另開新視窗
  且連到 https://examples.com/somedir/some/place.html
</body>