HTML <base>的用法（新手必看）

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

例如：

<!-- base元素的href值不能以javascript:或data:开头 -->
<base href="https://www.xxx.cn/" target="_blank" />

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

<a href="home.html">首页</a>

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

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

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

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

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

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

<base href="https://www.b.cn/">

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

fetch('/assets/example.jpg')

此时，浏览器会请求 https://www.b.cn/assets/example.jpg 地址，而不是 https://a.cn/assets/example.jpg 地址。于是就会报跨域的错误。

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

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