重新认识HTML系列003——base标签详解

来源：互联网发布：淘宝弹弓皮筋专卖编辑：程序博客网时间：2024/05/20 05:28

HTML-base标签详解

文档查看

属性说明

href

文档中说此属性是“用于文档中相对URL地址的基础URL”，不好理解，我们来做几个实验。

实验一

base-href-1.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>base-href实验1：不设置base标签</title></head><body><a href="">这是一个href属性为空的链接</a><br><a href="http://www.baidu.com">这是一个href属性设为绝对路径(http://www.baidu.com)的链接</a><br><a href="test.html">这是一个href属性设置为相对路径（test.html）的链接</a>    </body></html>

效果如下：

mark

现在我们来依次点击这三个链接，结果如下：

第一个链接点击后当前页面刷新，相当于跳转到了当前页面自身
第二个链接点击后在当前标签页 打开了我们所设置的绝对路径指向的页面（百度）
第三个链接点击后在当前标签页 打开了该页面同目录下的test页面，如图：

好，请记下这几个结果，我们进行第二个试验：

实验二　

base-href-2.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>base-href实验1：不设置base标签</title>    <base href="/"></head><body><a href="">这是一个href属性为空的链接</a><br><a href="http://www.baidu.com">这是一个href属性设为绝对路径(http://www.baidu.com)的链接</a><br><a href="test.html">这是一个href属性设置为相对路径（test.html）的链接</a>    </body></html>

这次我们在上一个页面的基础上，在<head> 标签内增加了<base>标签，并为其href 属性赋值为根路径符号/ ,现在再点击一下页面上的三个链接，结果如下：

第一个链接，点击后跳转到了服务器根目录 下
第二个链接，点击后依然在当前标签页跳转到了我们指定的绝对路径指向的页面，即百度首页。
第三个链接，点击后浏览器在当前标签页跳转到了根目录 下的test页面

好的，这下我们明白了，也就是说，<base> 标签的href属性，实际上就是为页面中所有的元素的href属性设置了基础值（对元素href为绝对路径的元素不起作用）,当这些元素进行跳转时，都会基于当前目录加上这个默认的URL（相对路径的情况下）再加上自己的href属性值来跳转。

为了验证我们的想法，我们再做第三个实验和第四个实验：

实验三

base-href-3.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>base-href实验1：不设置base标签</title>    <base href="localhost/test"></head><body><a href="">这是一个href属性为空的链接</a><br><a href="http://www.baidu.com">这是一个href属性设为绝对路径(http://www.baidu.com)的链接</a><br><a href="test.html">这是一个href属性设置为相对路径（test.html）的链接</a>    </body></html>

这次，我们将<base>标签的href属性设置为了一个相对路径，再点击下面三个链接，结果如下：

第一个链接，点击后跳转到了当前目录下的localhost/test,
第二个链接，点击后依然跳转到了绝对路径指向的页面（百度）
第三个链接，点击后跳转到了当前目录下的localhost目录下的test.html页面

也许你会好奇，为什么第三个链接不是跳转到localhost目录下的test目录下的test.html呢？

细心如你，肯定会发现，我们在设置<base>标签的href属性时，设置的是相对路径，而这个相对路径最后没有使用代表目录的符号反斜杠/, 所以这里浏览器没有将localhost/test中的test识别为目录，而是识别为一个文件了，所以它就会默认去寻找该文件同目录下的test.html文件去了。

不信，你可以把base标签的href 属性设置为localhost/abc.html，那么第一个链接将跳转到当前目录下的localhost目录下的abc.html页面, 而第三个链接将跳转到当前目录下的localhost目录下的test.html下。

好了，我们继续第四个试验：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>base-href实验4：base标签href属性为绝对路径</title>    <base href="http://localhost/test/"></head><body><a href="">这是一个href属性为空的链接</a><br><a href="http://www.baidu.com">这是一个href属性设为绝对路径(http://www.baidu.com)的链接</a><br><a href="test.html">这是一个href属性设置为相对路径（test.html）的链接</a>    </body></html>

这次我们为<base>标签的href属性设置了一个绝对路径，再看点击链接的结果：

第一个链接，跳转到了我们所设置的<base>标签的href属性的绝对路径所指向的地址（http://localhost/test/）；
第二个链接，依然是在当前页跳转到了其所设置的绝对路径所指向的页面（百度）
第三个链接，则跳转到了http://localhost/test/test.html页面

实验三与实验四证明了我们再实验二中所作的总结。现在，对于<base>标签的href属性，应该有了一个感性的认识的，对于在什么场景下使用它，也一定是心中有数了吧，哈哈！

target

根据文档，此属性其实就是规定了页面中新打开窗口的方式的默认值。

我们继续做实验

实验五

base-target-1.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>base-target实验1：为页面增加子窗口（框架）</title>    <base href="http://localhost/test/"></head><body><a href="">这是一个href属性为空的链接</a><br><a href="http://www.baidu.com">这是一个href属性设为绝对路径(http://www.baidu.com)的链接</a><br><a href="test.html">这是一个href属性设置为相对路径（test.html）的链接</a><br><iframe src="./frame.html" width="600" height="400"></iframe>    </body></html>

为了验证target属性，我们再实验四的页面基础上，又在页面中增加了一个子窗口（框架）iframe，此框架中显示与当前页面同级目录下的frame.html 页面，

frame.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>框架页面</title></head><body><h3>这是一个框架内的页面</h3><a href="">这是一个框架内的链接</a></body></html>

此时，有意思的事情发生了：

mark

奇怪，为什么呢，我们进入控制台看看：

mark

当我们把鼠标放置到iframe标签上时，此时控制台显示其绝对路径为http://localhost/test/frame.html

原来，iframe标签的src与a标签的href属性一样，受<base>标签的href属性影响，所以寻址错误了。

我们修改后继续：

base-target-2.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>base-target实验1：base标签target属性为''-修正iframe的src</title>    <base href="http://localhost/test/" target=""></head><body><a href="">这是一个href属性为空的链接</a><br><a href="http://www.baidu.com">这是一个href属性设为绝对路径(http://www.baidu.com)的链接</a><br><a href="test.html">这是一个href属性设置为相对路径（test.html）的链接</a><br><iframe src="http://localhost:63342/html5css3/high-html/base/frame.html" width="600" height="400"></iframe>    </body></html>

此时，页面正常如下：

mark

现在，当前页面的<base>标签的target属性值为空，我们来看看点击页面中的三个链接和框架内的一个链接时的结果：

点击第一个链接，在 当前页面 跳转到了 http://localhost/test/这个我们在<base>标签的href属性中指定的地址；
点击第二个链接，在 当前页面 跳转到了我们在该元素href属性所设置的绝对路径所指向的页面（百度首页）
点击第三个链接，在 当前页面 跳转到了http://localhost/test/test.html 这个地址。
点击框架内的链接，框架内页面进行了刷新。

这时，我们发现：实际上，我们在父页面设置的<base>标签的href属性并不会影响到框架内的页面，因为如果影响到的话，应该会和第一个链接一样，跳转到http://localhost/test/这个地址去，可实验结果表明并没有。

接下来，我们把当前页面的<base>标签的target属性的值由空改为_self，然后点击页面内的所有链接，发现与为空时的结果相同。

现在，由于target属性的值（_parent,_top）涉及到子窗口、父窗口、顶级窗口这些概念，我们要改造一下我们的框架页面frame.html:

frame.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>框架页面</title>     <base href="http://localhost/frametest/" target="_self"></head><body><h3>这是一个框架内的页面</h3><a href="">这是一个框架内的链接</a><br><iframe src="http://localhost:63342/html5css3/high-html/base/subiframe.html" width="500" height="200"></iframe></body></html>

我们做了三件事：

为框架页面添加了<base>标签，并为其target赋值为_self（由上面的实验可知，当值为self与值为空时，其实是等同的。）
为其<base>标签的href属性设置了值http://localhost/frametest/
在该框架页内又嵌套了一个框架页，指向同目录下的subiframe.html页面（src地址的设置原因同实验五的第一个说明）,并且同样为它设置了<base>标签。

subframe.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>子框架的子框架</title>    <base href="http://localhost/subframetest/" target="_self"></head><body><h3>这是子框架的子框架</h3><a href="">这是子框架的子框架里的链接</a></body></html>

现在，然我们看看效果：

mark

现在，我们接着进行实验：

实验六

我们知道，<base>标签的target属性只影响当前页面内链接的打开方式 ，所以接下来我们先实验当前页面里的链接打开方式。

我们将当前页面的<base>标签的target属性改为_blank，再点击当前页面的三个链接，发现链接都在新的标签页打开了。

然后当我们将当前页面的<base>的target属性分别改为_parent和_top 时，发现所有链接还是在当前页面打开。其原因是，当前页面本身不是任何页面的子孙页面（窗口），所以它自己的父级和顶级窗口就是它自己。

为了验证以上说法，我们接着进行实验：

现在，我们将frame.html与subframe里的<base>的target属性的值设置的是_self，根据前面的实验我们知道，其等同于设置为空或不设置。

现在分别点击子框架（frame.html）与孙子框架（subframe.html）里的链接，发现都是在其所在的框架窗口内跳转：

点击子框架里的链接结果：

mark

点击孙子框架内的链接结果：

mark

注：由于子框架与孙子框架内base标签的href属性所设置的路径，服务器上并不存在，所以均显示的是拒绝请求的提示

实验七

现在，我们将frame.html与subframe里的<base>的target属性的值都设置为_parent，然后分别点击这两个框架页面内的链接，结果如下：

点击子框架内的链接时，链接在它的父窗口内（也就是当前页面）打开
点击孙子框架内的链接时，链接在它的父窗口内（也就是子框架）打开

然后，我们将frame.html与subframe里的<base>的target属性的值都设置为_top，然后分别点击这两个框架页面内的链接，结果如下：

点击子框架内的链接时，链接在它的顶级窗口内（也就是当前页面）打开
点击孙子框架内的链接时，链接在它的顶级窗口内（也就是当前页面）打开

最后，我们将frame.html与subframe里的<base>的target属性的值都设置为`_blank，然后分别点击这两个框架页面内的链接，结果如下：

点击子框架内的链接时，链接在新标签页内打开
点击孙子框架内的链接时，链接在新标签页内打开

至此，我们关于HTML的标签的实验和讲解就全部做完了，对其基本特性和使用场景也有了一个清晰的认识，本节完。

PS:此属性所有版本浏览器均支持

阅读全文

0 0