HTML base tag 標籤
HTML <base> 標籤主要是控制網頁的連結屬性，可以指定網頁頁面的文檔與連結根目錄，也可以指定網頁超連結的開啟方式，HTML base 屬性有 href , target。
HTML base 教學說明/範例
HTML <base> tag 原理說明
<base> tag 的原理，是使用 JS 中的 document.baseURL 去做查詢更改，當沒有設定時，預設使用 location.href。
白話解釋，當頁面有使用 HTML baes 後，所有的圖片檔案路徑、超連結，都會被整個套用。
以下用兩段 HTML code 對照，來顯示使用 HTML base 對超連結、圖片檔案路徑的差別。
HTML <base> tag 教學
HTML <base> tag 在使用上有其限制，每頁 HTML 只能有一個 <base> tag。
下面是一個 HTML <base> tag 的使用教學，<base> tag 的相關設定都寫在 <head>當中。
<html>
<head>
<title>HTML <base> tag 教學說明</title>
/* HTML base href, target 範例設定 */
<base href="https://seanacnet.com" target="_blank">
</head>
<body>
<a href="about-html-base">
關於 html base 用法
</a>
<img src="img/about-html-base.img">
</body>
</html>上面範例，與下方沒有使用 <base> tag 的頁面，執行結果是相同。
<html>
<head>
<title>HTML <base> tag 教學說明比較</title>
</head>
<body>
<a href="https://seanacnet.com/about-html-base" target="_blank">
關於 html base 用法
</a>
<img src="https://seanacnet.com/img/about-html-base.img">
</body>
</html>你可以透過 <base> tag 中的 href 來指定整個網頁的連結開頭，只要有設定，任何網頁中的連結都會被 <base> 中的 href 給覆蓋過去。
Example 1
你可以把 <base> tag 想像成它具有高優先級 or 高強制性，讓我們再看一個範例。
<html>
<head>
<title>Example 1</title>
</head>
<body>
<h1>這是一個 Html base tag 範例</h1>
<p>
<a href="https://ex_domain_xxx/index.html">
Hello Word!
</a>
</p>
<p>
<a href="/index.html">
Go Home
</a>
</p>
<div>
<img src="https://ex_domain_aaa/img/ex1.img">
<img src="https://ex_domain_bbb/img/ex2.img">
<img src="https://ex_domain_ccc/img/ex2.img">
</div>
</body>
</html>範例 Example 1 中，假設我們的網頁，有3張外部的圖片、兩個超連結，分別用了5個不同的 domain 來源/連結。
如果在 Example 1 中，我們再 head 中使用 <base> tag 來定義 href，例如：
<head>
<base href="https://seanacnet.com">
</head>那整頁 HTML 執行的最終結果如下：
<html>
<head>
<title>Example 1 最終結果</title>
<base href="https://seanacnet.com">
</head>
<body>
<h1>這是一個 Html base tag 範例</h1>
<p>
<a href="https://seanacnet.com/index.html">
Hello Word!
</a>
</p>
<p>
<a href="https://seanacnet.com/index.html">
Go Home
</a>
</p>
<div>
<img src="https://seanacnet.com/img/ex1.img">
<img src="https://seanacnet.com/img/ex2.img">
<img src="https://seanacnet.com/img/ex2.img">
</div>
</body>
</html>Example 1 最終結果可以看出，在網頁執行完畢後，最終呈現的結果，不管是超連結、圖片，都會統一被更換為 <base> 所設定的 href。
HTML <base> 注意事項
值得注意的是，雖然 <base> 在結果上會替換掉頁面的所有連結，但是並不包含 Open Graph ，例如:
<html>
<head>
<title>Example 1 最終結果</title>
<base href="https://seanacnet.com">
<meta property="og:url" content="https://ex1.com/index.html">
<meta property="og:image" content="https://ex1.com/ex1.jpg">
</head>
</html>上方的 og:url 與 og:image 並不受 <base> tag 影響，所以在使用上，請不要想著 <base> tag 能去更改 meta og 中的連結，因為那並不會有所變化。
詳細的原因，以個人的理解，應該與社群、爬蟲抓取網頁的原理的關係，初步抓取網頁資訊時，並不會執行抓取網頁中的 JS，而 <base> 的原理是使用 JS 中的 document.baseURL，以這個思路來講，也就合理了。
如有覺得錯的，有知道其原理的，可以跟我說一下，會非常感謝你。
HTML <base> tag 瀏覽器相容性
在瀏覽器的相容上，目前全瀏覽器都可以使用，詳細還請觀看 MDN Web Docs <base> 瀏覽器相容性。
發表迴響