base标签的href属性必须为绝对URL或以/开头且结尾带斜杠的根相对路径，否则浏览器静默忽略；必须置于head最前且唯一，仅影响HTML解析阶段的纯相对路径（如src、href），对JS/CSS动态路径无效。
href 属性必须是绝对 URL 或根相对路径
href 决定所有相对路径的拼接起点，但它不是“随便填个路径就行”。浏览器只认两种格式：带协议的绝对 URL（如 https://cdn.example.com/）或以 / 开头的根相对路径（如 /myapp/）。填 assets/ 或 ../static/ 会被静默忽略——整个 <base> 失效，后续所有 img/src、link/href 都退回到按当前页面 URL 解析，上线后大面积 404 就从这儿来。
常见踩坑点：
- 本地开发用
/static/能跑，部署到子路径（如https://a.com/myapp/）后，<base href="/static/">会指向https://a.com/static/，而非https://a.com/myapp/static/ - SPA 部署时漏掉结尾斜杠，写成
<base href="/myapp">，会导致src="js/app.js"解析为/myappjs/app.js（少了个/） - 服务端模板未替换变量，比如
<base href="%ASSET_BASE%">直接发给浏览器，变成字面量字符串，href值非法，<base>被丢弃
target 属性影响所有未显式声明 target 的 a 和 form 元素
target 不是“加个属性图个方便”，它会无差别作用于页面里所有没写 target 的 <a> 和 <form>。设成 _blank 后，连页脚的备案链接、第三方组件里的跳转、甚至 <a href="#"> 都会在新窗口打开——你根本没意识到它们也被卷进去了。
更隐蔽的风险：
- 没配
rel="noopener"时，<base target="_blank">在老浏览器中可能引发安全问题（window.opener 泄露） -
target对<iframe>、<script>、<img>等标签完全无效，别指望它控制资源加载方式 - 如果页面同时用了前端路由（如 React Router），
<base target="_blank">可能让内部导航意外跳出单页应用上下文
base 标签生效范围有明确边界
<base> 只在 HTML 解析阶段起作用，且仅覆盖特定属性：它会影响 <a href>、<img src>、<link href>、<script src>、<form action>，以及 CSS 文件中通过 url() 引用的资源（如 background: url(logo.png)）。
但这些完全不受控：
- CSS 里的
@import "reset.css"—— 按 CSS 文件自身位置解析 - JS 中的
import('./utils.js')或fetch('./data.json')—— 路径相对于 JS 文件，不是 HTML 页面 -
new Worker('./worker.js')、import.meta.url、动态document.createElement('script').src = '...'—— 全部绕过<base>
base 标签位置和数量是硬性限制
<base> 必须出现在 <head> 内，且只能有一个。放错位置（比如塞进 <body>）浏览器直接忽略；写两个，只有第一个生效，控制台通常会报 Multiple base elements detected. Only the first one is used.。
最佳实践是把它放在 <head> 最前面，紧挨着 <meta charset> 后面。否则像 <link rel="stylesheet" href="main.css"> 这类标签，如果写在 <base> 前面，它的 href 就不会被基准路径修正——因为解析时 <base> 还没读到。
容易被忽略的一点：构建工具（如 Webpack/Vite）生成的 HTML 如果自动注入了 <base>，要确认它没被模板引擎二次覆盖，也没和 SSR 渲染逻辑冲突。尤其在多环境部署时，href 值必须和实际部署路径严格一致，差一个字符就全链路失效。
