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标签元素定义基址路径，仅仅最先定义的能生效，之后定义的会被浏览器全部忽略，读者使用时需要注意这一点。