标签是唯一能全局改变相对url解析基准的机制，必须置于最前且唯一，href须为绝对url或根相对路径（如/myapp/），否则静默失效；它只影响html属性中的相对url，不影响css/js内部路径。
<base> 标签是 HTML 中唯一能真正改变页面相对 URL 解析基准的机制，但它不是“加个前缀”那么简单——设错 href，<img src="icon.png">、<script src="app.js"></script> 全部 404，且浏览器通常不报错，只静默失败。
base href 必须是绝对 URL 或根相对路径
浏览器会忽略非法值，但不会提示。常见错误写法：href="assets/"、href="../static/"、href="cdn/" —— 这些纯相对路径不被接受，解析行为不可控。
-
href="https://cdn.example.com/v2/"：最稳妥，明确协议、域名、版本路径，适合 CDN 场景 -
href="/myapp/"：合法根相对路径，等价于当前协议 + 域名 +/myapp/，适用于 SPA 部署在子路径 -
href="//cdn.example.com/v2/"：协议相对，自动继承当前页协议（http或https），适合多协议环境 -
href="file:///D:/project/dist/"：仅限本地开发调试，部分浏览器对file://协议下<base>支持不一致
base 必须放在 最前面，且只能有一个
它影响的是 HTML 解析器对后续所有相对 URL 的初始解析逻辑。如果 <base> 出现在 <link href="style.css"> 之后，那这个 link 仍按原始页面 URL 解析，<base> 对它完全无效。
- 必须置于
内，且是中最早出现的元数据类标签之一（早于<title></title>、<meta>、<link>、<script></script>） - 多个
<base>标签时，只有第一个生效，其余被忽略；控制台可能输出Multiple base elements detected. Only the first one is used. - 动态用 JavaScript 插入（如
document.head.appendChild()）完全无效 —— 解析阶段早已结束
base 只影响 HTML 属性中的相对 URL，不穿透到 CSS 和 JS 内部
这是最容易误判的一点：设了 <base href="/cdn/">，不代表 CSS 里的 url(logo.png) 就会变成 /cdn/logo.png。它根本不管这些。
- ✅ 影响：
<img src="icon.svg">、<link href="main.css">、<script src="bundle.js"></script>、<a href="about.html"></a>、<form action="submit.php"></form> - ❌ 不影响：
CSS文件内的url(logo.png)或@import "reset.css"（仍以 CSS 文件自身位置为基准） - ❌ 不影响：
JS中的import('./utils.js')、fetch('./data.json')、new Worker('./worker.js')
SPA 项目中用 base 要和前端路由、构建配置对齐
Vue Router / React Router 的 history 模式部署在子路径（如 https://example.com/admin/）时，<base href="/admin/"> 是必要条件，否则资源加载和路由匹配都会出问题。
- 必须同时配置前端路由的
base选项（如 Vue Router 的createRouter({ history: createWebHistory('/admin/') })） - 构建工具（Vite/Webpack）的
base或publicPath需与<base href>保持一致，否则打包后资源路径和运行时解析不匹配 - 静态站点生成器（Hugo/Jekyll）应通过模板变量注入，避免硬编码；禁止输出未解析的占位符（如
{{ .Site.BaseURL }}未被替换）
真正难的不是写对那一行 <base href="/xxx/">，而是确保它在整个技术链路中始终与部署路径、构建输出、前端路由三者同步 —— 差一个斜杠，或漏配一个 base 选项，就足以让整个页面白屏或资源全 404。
