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