HTML base tag

HTML base tag 的功能是用來管理網頁內部超連結的特性，包含有超連結的預設連結網址以及預設的連結目標（也就是開啟的方式），透過 HTML base 可以快速管理網頁內的超連結，假設網頁內有很多條超連結都是連到同一個 URL，又不想要自己一個一個寫，或者是所以的超連結都要在新的視窗開啟，都可以採用 base tag 來管理，節省時間，另外，HTML base tag 必須寫在 head 標籤的範圍內才有效，所有主流的瀏覽器都支援 HTML base tag 的效果。

HTML base tag 語法規則
<base href="連結網址" target="連結目標">
有沒有看起來似曾相似呢？HTML base tag 的語法與超連結的 a href 非常類似（參閱：HTML a href 超連結），只是 a tag 改為 base tag 而已，這裡稍為說明一下，a tag 可以用來獨立設定網頁內個別超連結，而 base tag 則用來統一管理所有超連結的預設值，請注意！base tag 管理的是網頁超連結的預設值，網頁中個別超連結還是可以用 a tag 修改唷！

HTML base tag 的兩個重點，分別是用來管理預設連結網址的 href 以及預設連結目標的 target，其中 target 可以有以下幾種值。
  • target="_self"：在本來的視窗開啟
  • target="_blank"：在新的視窗開啟
  • target="_parent"：在父層視窗開啟
  • target="_top"：以 top 模式開啟
HTML base tag 實際範例一、超連結預設為在原視窗開啟
<head>
<base href="http://www.webtech.tw" target="_self">
</head>
<a href="http://www.webtech.tw">WebTech 網頁設計教學站</a></br>
<a href="#">WebTech 網頁設計教學站</a>
範例效果範例一有兩個超連結，透過 head 區域內的 base tag 將網頁內的超連預設為連結至本站首頁，且是在原本的視窗（target="_self"）開啟，實際要顯示的第一條超連結本身有設定 href 的網址，而第二條 href 的值就只有 #，但是透過 base tag 預設的連結內容，依然可以連結至本站首頁，這就是 HTML base 的最大功用。

HTML base tag 實際範例二、超連結預設為在新視窗開啟
<head>
<base href="http://www.webtech.tw" target="_blank">
</head>
<a href="http://www.webtech.tw">WebTech 網頁設計教學站</a></br>
<a href="#">WebTech 網頁設計教學站</a>
範例效果範例二與範例一幾乎一樣，最大的差別在 base tag 內的連結開啟目標 target 設為在新視窗開啟，要顯示的兩條超連結寫法也與範例一的內容相同，且不需要個別寫 target，實際執行兩條超連結都會再新視窗開啟。

更多 HTML 基本語法
© Copyright webtech.tw Since 2010