下载掌阅APP，畅读海量书库
立即打开
先了解一下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所示。
图2-11 fetch请求相对路径图片出错示意
可以通过在浏览器中输入地址https://www.htmlapi.cn/2/1-7.html或扫码访问来体验。
正是由于<base>元素的影响过于深入与广泛，因此在日常开发中，不会使用<base>元素去定义页面的根路径，因为很容易出现意料之外的状况。
当然，存在即合理，大家可以理性对待<base>元素，不要将其当成“洪水猛兽”，当场景合适时，它还是可以大放异彩的。