2.1.7 为何<base>元素无人问津

先了解一下HTML<base>元素的作用。

<base>元素可以设置当前网页上下文的根地址，页面中所有设置的相对地址都会受此元素影响，例如：

同时，页面中还有个如下所示的<a>元素：

点击“首页”字样的链接，浏览器会在新窗口打开https://www.htmlapi.cn/home.html地址。

注意，这里明明<a>元素并未设置任何target属性，却触发了打开新的浏览器窗口的行为，就是因为<base>元素设置了target="_blank"。

这么一看，似乎<base>还是很有用的，比如搜索结果列表页面，里面的链接就没必要一个一个地添加target="_blank"了，只要在页面顶部插入一个<base>元素就可以了。

话这么说没错，但是实际上并没有大家想得那么简单。

<base>元素的影响太广泛了，除<meta>元素无法受到影响之外，其余任何与链接地址相关的HTML属性都会受到影响，包括在JavaScript代码中运行的Ajax请求地址。

举个例子，在域名为htmlapi.cn的页面中有如下所示的<base>元素：

然后运行了如下所示的fetch请求。

此时，浏览器会请求https://www.cssworld.cn/assets/example.jpg地址，而不是https://htmlapi.cn/assets/example.jpg地址。

于是就会报跨域的错误，如图2-11所示。

可以通过在浏览器中输入地址https://www.htmlapi.cn/2/1-7.html或扫码访问来体验。

正是由于<base>元素的影响过于深入与广泛，因此在日常开发中，不会使用<base>元素去定义页面的根路径，因为很容易出现意料之外的状况。

当然，存在即合理，大家可以理性对待<base>元素，不要将其当成“洪水猛兽”，当场景合适时，它还是可以大放异彩的。