1.2 基底网址标记base标签
在1.1节向读者简要介绍过base标签，由于base标签在大型网站中比较常用，因此在这一节我们单独介绍base标签的用法。
一般情况下，浏览器会将当前页面的URL地址作为基地址，如果想改变所有链接默认的基地址，就可以使用base标签来实现。通过在base标签中设定新的基地址，浏览器将不再使用当前页面的URL地址作为基地址，所有的相对链接地址将使用新设定的基地址来进行解析。例如，HTML网页中常用的a标签、img标签、link标签、form标签等，其中的相对URL地址均会按照base标签中设定的新基地址进行解析。
下面向读者介绍使用body标签进行图片定位的操作方法（参见源代码chapter01/ch01-htmlcomp-base-img.html文件）。
【示例1-5】 base标签
01 <!DOCTYPE html> 02 <html lang="zh-cn"> 03 <head> 04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 05 <base href="./images/" /> 06 <base href="./images/png/" /> 07 <title>HTML之base标签</title> 08 </head> 09 <body> 10 <!-- 添加文档主体内容 --> 11 <h3>HTML之base标签</h3> 12 <img src="img_eiffel200.png" alt="img_eiffel200.png" /> 13 <img src="png_eiffel200.png" alt="png_eiffel200.png" /> 14 <!-- 添加文档主体内容 --> 15 </body> 16 </html>
在这段HTML代码中，第05行与第06行就是对base标签的使用，在这两行的body标签内，通过href属性定义了两个基地址路径，这两个路径指向了我们预先保存的两组图片。在第12～13行中，使用img标签在页面中显示了两张图片，我们预想的是第12行显示第05行定义的路径中的图片，而第13行显示第06行定义的路径中的图片。页面运行后的效果如图1.8所示。
从显示的效果可以看到，第12行定义的图片被正确显示出来了，而第13行定义的图片却无法正确显示（仅仅显示出图片文件名称），这是什么原因造成的呢？
我们尝试将源代码文件中的第05行与第06行调换先后顺序，页面运行后的效果发生了变化，如图1.9所示。
图1.8 HTML网页之base标签（1）
图1.9 HTML网页之base标签（2）
从图1.9中显示的效果可以看到，第12行定义的图片没有显示出来（同样仅仅显示出图片文件名称），而第13行定义的图片却正确显示出来了。由此可见，如果使用多个base标签定义基地址路径，那么只有最先定义的能生效，之后定义的会被浏览器全部无视，这点读者使用时要注意。
下面我们模拟一个包含3个HTML页面的简单网站，主要演示使用body标签进行基地址转换的操作方法。这是第一个页面的代码（参见源代码chapter01/ch01-htmlcomp-base-url.html文件），主要起到网站主页的作用。
【示例1-6】 base标签基地址操作（1）
01 <!DOCTYPE html> 02 <html lang="zh-cn"> 03 <head> 04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 05 <base href="./url/" target="_blank" /> 06 <title>HTML之base标签</title> 07 </head> 08 <body> 09 <!-- 添加文档主体内容 --> 10 <h3>HTML之base标签</h3> 11 <p>当前地址：ch01-htmlcomp-base-url.html</p> 12 <p> 13 链接到： 14 <a href="ch01-htmlcomp-base-url-a.html">url/ch01-htmlcomp-base-url- a.html</a> 15 </p> 16 <!-- 添加文档主体内容 --> 17 </body> 18 </html>
在这段HTML代码中，第05行使用base标签定义了一个基地址（"./url/"），该地址是ch01-htmlcomp-base-url.html文件所在目录下的一个子目录（名称为"url"），因此第14行中定义的超链接地址将会以第05行定义的基地址进行解析。同时，target属性定义为"_blank"，这样该页面内所有超链接指向的页面文件均会在新窗口中打开。
下面是第二个页面的代码（参见本书源代码chapter01/url/ch01-htmlcomp-base-url-a.html文件），这个页面就是【示例1-6】中第14行定义的超链接所引用的页面文件，该文件保存在子目录"url"中。
【示例1-7】 base标签基地址操作（2）
01 <!DOCTYPE html> 02 <html lang="zh-cn"> 03 <head> 04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 05 <title>HTML之base标签</title> 06 </head> 07 <body> 08 <!-- 添加文档主体内容 --> 09 <h3>HTML之base标签</h3> 10 <p>当前地址：url/ch01-htmlcomp-base-url-a.html</p> 11 <p> 12 链接到： 13 <a href="ch01-htmlcomp-base-url-b.html">url/ch01-htmlcomp-base-url- b.html</a> 14 </p> 15 <!-- 添加文档主体内容 --> 16 </body> 17 </html>
在这段HTML代码中，没有使用base标签进行任何设定，这样第13行中超链接引用的页面文件将会在本窗口中打开。
下面是第三个页面的代码（参见源代码chapter01/url/ch01-htmlcomp-base-url-b.html文件），该文件就是【示例1-7】中第13行定义的超链接所引用的页面文件。
【示例1-8】 base标签基地址操作（3）
01 <!DOCTYPE html> 02 <html lang="zh-cn"> 03 <head> 04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 05 <base href="../" target="_blank" /> 06 <title>HTML之base标签</title> 07 </head> 08 <body> 09 <!-- 添加文档主体内容 --> 10 <h3>HTML之base标签</h3> 11 <p>当前地址：url/ch01-htmlcomp-base-url-b.html</p> 12 <p> 13 返回到：<a href="ch01-htmlcomp-base-url.html">ch01-htmlcomp-base- url.html</a> 14 </p> 15 <!-- 添加文档主体内容 --> 16 </body> 17 </html>
在这段HTML代码中，第05行使用base标签定义了一个基地址（"../"），该地址是ch01-htmlcomp-base-url-b.html文件所在目录的上一级目录（ch01-htmlcomp-base-url.html文件所在的目录），因此第13行中定义的超链接地址将会以第05行定义的基地址进行解析，这样就可以跳转回主页面。同时，target属性定义为"_blank"，这样该页面内所有超链接指向的页面文件均会在新窗口中打开。
最后，测试这个模拟的小网站。首先运行ch01-htmlcomp-base-url.html主页面文件，页面打开后的效果如图1.10所示。在图1.10中显示了当前页面的地址信息以及链接到新页面的超链接地址信息。
单击页面中的超链接，尝试打开ch01-htmlcomp-base-url-a.html文件，运行后的效果如图1.11所示。在图1.11中可以看到页面ch01-htmlcomp-base-url-a.html在新的窗口中打开了，并且提示当前页面路径在子目录"url"中。单击页面中的超链接尝试打开ch01-htmlcomp-base-url-b.html文件，运行后的效果如图1.12所示。
在图1.12中，我们看到页面ch01-htmlcomp-base-url-b.html在原窗口中打开了，并且提示当前页面路径仍在子目录"url"中。单击页面中的超链接尝试返回ch01-htmlcomp-base-url.html文件，运行后的效果如图1.13所示。
在图1.13中，我们看到主页面ch01-htmlcomp-base-url.html在新窗口中重新打开了，不同之处是经过一系列操作之后，浏览器中一共打开了3个页面；同时，由于合理地使用了base标签进行相对路径解析，使得这3个HTML页面在根目录和子目录（"url"）之间实现了相互跳转。
图1.10 HTML网页之base标签基地址操作（1）
图1.11 HTML网页之base标签基地址操作（2）
图1.12 HTML网页之base标签基地址操作（3）
图1.13 HTML网页之base标签基地址操作（4）