HTML 中的 `<base>` 元素有什么用，怎么配置相对路径

<base> 元素的作用只有两个：在 <head> 里为整个文档指定相对 URL 的解析基准（href），以及给所有链接和表单指定默认打开方式（target）。最典型的用法是 <base href="/app/">，让页面里所有相对路径都从 /app/ 开始解析，而不是从当前页面地址开始解析。它必须在 <head> 内、只能出现一次，并且要写在任何使用相对 URL 的元素之前。

<base> 元素到底改变了什么？

结论：它改变了文档的 base URL（即 document.baseURI），浏览器解析所有相对 URL 时都以它为起点。

受它影响的常见位置包括：<a href>、<img src>、<link href>、<script src>、<form action>、<source src>、<video poster>，以及 JavaScript 里 fetch('./api/list') 这类相对请求和 document.baseURI 的返回值。

不受它影响的是 CSS 文件内部的相对地址。样式表里写 background: url(./bg.png)，这个 ./bg.png 永远相对于该 CSS 文件自身的位置解析，跟 <base> 无关。这也是很多人改了 base 之后发现「图片路径变了、背景图却没变」的原因。

<base href> 怎么配置相对路径？

结论：href 的值既可以是绝对 URL，也可以是相对 URL；如果写的是相对 URL，它会先相对于当前文档地址解析成绝对地址，再作为全文档的基准。

三个具体例子：

1. 文档地址 https://example.com/shop/list/index.html，写 <base href="https://example.com/static/">，那么 <img src="img/a.png"> 解析为 https://example.com/static/img/a.png。
2. 写 <base href="/static/">（根相对路径，以域名根为起点），同样解析为 https://example.com/static/img/a.png。
3. 写 <base href="../assets/">（相对当前文档解析），基准变成 https://example.com/shop/assets/，img/a.png 解析为 https://example.com/shop/assets/img/a.png。

注意：如果不写 href 属性，base URL 就是文档自身地址，此时 <base> 只对 target 生效。<base> 是空元素，写成 <base href="/static/"> 即可，没有闭合标签。

<base target> 有什么用？

结论：它给整个文档的超链接和表单设置一个默认 target，省去逐个写 target="_blank"。

比如 <base target="_blank">，页面里所有 <a href="..."> 都会在新标签页打开。规则是显式覆盖默认：某个链接写了 <a href="x.html" target="_self">，它仍然在当前页打开，不受 base 影响。

用 <base> 有哪几个坑？

结论：三个最常见的坑是页内锚点失效、CSS 路径不跟随、以及位置和数量限制。

第一，页内锚点会跳走。写 <a href="#top"> 时，浏览器把它解析成「base 地址 + #top」。如果 base 指向另一个目录或域名，点击后会跳到那个文档，而不是当前页滚动到顶部。解决办法是改成 <a href="list.html#top"> 这种完整相对路径，或者用 JavaScript 的 element.scrollIntoView() 代替锚点跳转。

第二，<base> 必须放在 <head> 里，并且要放在第一个引用相对 URL 的 <link>、<script>、<img> 之前。实践上就放在 <meta charset="utf-8"> 后面、其它标签前面。写在 <body> 里属于无效 HTML。

第三，一个文档只能有一个 <base>。规范明确要求每个文档最多一个；实际浏览器遇到多个时，只会取第一个的 href 和第一个的 target，后面的被忽略。

什么时候该用 <base>？

结论：站点部署在子目录、前端路由带路径前缀、需要全站默认 target="_blank" 这三种场景用它最合适；纯静态、路径本来就写得很清楚的页面，不引入 <base> 反而更可控。

工程化工具基本都帮你注入了它：Angular 用 ng build --base-href=/my/app/，Vue CLI 配 publicPath，Vite 配 base，构建产物的 index.html 里就会出现对应的 <base href>。检查线上问题时，直接在控制台执行 document.baseURI，就能确认当前页面真实的解析基准。

一句话收束：<base> 是用一行标签统一全文档 URL 基准的工具，配好 href 能省掉大量路径拼接，但页内锚点、CSS 相对路径和「只能有一个、必须在 head 靠前位置」这三条限制必须先想清楚。