2.5　base基址標簽

本節介紹base基底網址標簽的概念及用法，看一看該標簽在HTML網頁中能夠實現什么樣的功能。

2.5.1　基本概念及作用

HTML網頁中的<base>基底網址標簽（簡稱基址標簽）為頁面上的所有鏈接規定的默認地址或默認目標。

通常情況下，瀏覽器會從當前頁面的URL地址中提取相應的元素來填寫相對URL中的空白。但是，如果使用<base>標簽就可以改變這一方式。瀏覽器隨后將不再使用當前頁面的URL地址，而是使用<base>標簽指定的基本URL地址來解析所有的相對URL地址。

<base>基底網址標簽適用于大部分包含URL屬性的標簽元素，具體包括：<a>、<img>、<link>、<form>等標簽中的URL屬性。

2.5.2　常規用法

下面是一個使用<base>基底網址標簽的常規用法，共包含兩個HTML 5網頁，具體網頁目錄結構如圖2.5所示。

先看第一個HTML 5網頁的代碼示例（詳見源代碼ch02/base/ch02-html-head-base.html文件）：

【代碼2-4】

【代碼解析】

第11行代碼對base標簽元素的使用，其包含有兩個屬性，分別是href屬性和target屬性。其中，href屬性用于規定頁面中所有相對鏈接的基準URL地址；而target屬性用于指定在何處打開頁面中所有的鏈接，其共有四個屬性值："_blank"代表在新的窗口打開鏈接，"_self"代表自身窗口，一般可不用定義，"_parent"代表在父窗口或超鏈接引用框架的框架集中打開鏈接，"_top"則表示會清除所有被包含的框架并將文檔載入整個瀏覽器窗口。在本行代碼中，href屬性值定義為"./url/"（表示URL子目錄），target屬性值定義為"_blank"。

第22行代碼使用<a>標簽元素鏈接到第二個HTML 5網頁。我們注意到其href屬性值為"ch02-base-url.html"，但根據圖2.5所示，該網頁不在同一目錄下，而是在url子目錄下，那到底能不能鏈接到該網頁呢？請讀者繼續往下看。

再看第二個HTML 5網頁的代碼示例（詳見源代碼ch02/base/url/ch02-base-url.html文件）。

【代碼2-5】

【代碼解析】

第05行代碼使用base標簽元素定義了一個基底網址，其href屬性值定義為"../"（表示上一級目錄），target屬性值定義為"_blank"。

第16行代碼使用<a>標簽元素鏈接返回到第一個HTML 5網頁。我們注意到其href屬性值為"ch02-html-head-base.html"，但根據圖2.5所示，第一個網頁與第二個網頁不在同一目錄下，是不是很有趣呢？請讀者繼續往下看。

運行【代碼2-4】定義的頁面，初始效果如圖2.6所示。然后，單擊圖2.6網頁中定義的超鏈接，看看能不能鏈接到第二個網頁（url/ch02-base-url.html），效果如圖2.7所示。

第二個網頁鏈接成功了，且是以打開一個新頁面的方式鏈接到的。可見，【代碼2-4】中第11行代碼定義的<base>基址標簽起作用了。繼續點擊網頁中定義的超鏈接，看看能不能返回到第一個網頁（ch02-html-head-base.html），效果如圖2.8所示?？梢姺祷氐降谝粋€網頁的鏈接也成功了，同樣是以打開一個新頁面的方式鏈接到的。由此可見，【代碼2-5】中第05行代碼定義的<base>基址標簽起到了同樣的作用。

2.5.3　特殊用法

下面是一個同時使用多個<base>基底網址標簽的特殊用法，具體網頁目錄結構如圖2.9所示。

先看HTML 5網頁的代碼（詳見源代碼ch02/baseimg/ch02-html-base-img.html文件）。

【代碼2-6】

【代碼解析】

第04～05行代碼是對多個base標簽元素的使用。其中，在第04行代碼中，href屬性值定義為"./images/"（表示images子目錄）。在第05行代碼中，href屬性值定義為"./images/png/"（表示images子目錄下的png二級子目錄）。

第14～15行代碼使用<img>標簽元素定義了一組網頁圖片，我們注意到其src屬性值僅為圖片名稱，但根據圖2.9所示，這兩個圖片不在同一目錄下，而是分別在images子目錄和images/png二級子目錄下，那到底圖片能不能正常顯示呢？請讀者繼續往下看。

運行頁面，初始效果如圖2.10所示?？梢钥吹?，第14行代碼定義的圖片被正確顯示出來了，而第15行代碼定義的圖片卻無法正確顯示（僅僅顯示出圖片文件名稱）。

這是什么原因造成的呢？嘗試將源代碼文件中的第04行與第05行代碼調換一下先后順序，頁面運行后的效果發生了變換，如圖2.11所示。從圖中顯示的效果可以看到，第14行代碼定義的圖片沒有顯示出來（同樣僅僅顯示出圖片文件名稱），而第15行代碼定義的圖片卻正確顯示出來了。由此可見，如果使用多個base標簽元素定義基址路徑，僅僅最先定義的能生效，之后定義的會被瀏覽器全部忽略，讀者使用時需要注意這一點。