<base>标签不是装饰性元素，它在HTML解析阶段全局劫持纯相对路径（如logo.png）的解析，必须为绝对URL或根相对路径（结尾带/），否则静默失效导致404；仅影响HTML属性中的相对URL，不影响fetch、import等运行时路径。
<base> 标签不是“用了就完事”的装饰性元素，它会全局劫持所有相对 URL 的解析逻辑——用错一次，整个页面的链接、图片、脚本、样式都可能集体失效。
为什么 <base> 一加就出问题？
浏览器遇到 <base href="..."> 后，所有相对路径（比如 <a href="page.html">、<img src="logo.png">、<script src="app.js">）都会以该 href 值为基准拼接，而非当前 HTML 文件所在路径。
常见翻车场景：
- 开发时本地用
file://打开 HTML，<base href="/">导致所有src变成file:///logo.png→ 404 - 部署到子路径（如
https://example.com/my-app/），却写死<base href="/">→ 资源全去根目录找，漏掉my-app/ - 单页应用里动态改
document.baseURI不生效 ——<base>只在解析时起作用，DOM 操作无法重置它
<base> 的唯一合法位置和必须属性
它必须是 <head> 内第一个可选标签（紧挨 <title> 或其他 <meta> 之后），且只能出现一次。否则浏览器会忽略后续所有 <base>。
必须指定 href；target 是可选的，但一旦设了，就会成为所有无 target 的 <a>、<form> 的默认打开方式（包括 <link> 和 <script> 不受影响）。
立即学习“前端免费学习笔记（深入）”；
示例（正确）：
<head> <title>My App</title> <base href="/my-app/" target="_blank"> </head>
错误写法：<base href="">（空值被忽略）、<base>（无 href，直接无效）、放在 <body> 里（被浏览器静默丢弃）。
替代方案比硬上 <base> 更安全
多数时候，你并不需要 <base> —— 它带来的耦合远超便利。
- 静态资源统一用根相对路径（
/static/js/app.js）或绝对 URL，绕过 base 干扰 - 构建工具（Vite、Webpack）可通过
base配置项自动重写所有资源路径，不依赖 HTML 标签 - 前端路由（如 Vue Router、React Router）用
basename控制匹配前缀，和资源加载解耦 - 真要动态控制，优先用 JS 构造 URL：
new URL('./data.json', import.meta.url)（ESM 环境）或new URL('api/user', location.origin)
<base> 的坑不在语法，而在它悄无声息地改写了整个文档的 URL 解析上下文。哪怕只在测试环境加了一次，上线前也得逐个验证所有相对路径是否仍指向预期位置——这点容易被跳过。 
