base href必须置于<head>最前面且唯一，仅对之后HTML属性中的纯相对URL生效；href须为绝对URL或结尾带斜杠的根相对路径，否则静默失效；不影响CSS/JS内部路径。
base href 必须写在 最前面，否则无效
浏览器只在 HTML 解析初期读取 <base>，且仅对它之后出现的相对 URL 生效。如果把它放在 <title>、<link> 或 <script> 后面，那些标签里的 href 或 src 仍按当前页面 URL 解析 —— 很可能全部 404。
常见翻车点：
-
<body>里写<base href="/static/">→ 浏览器直接忽略 - SSR 模板拼接时，header 和 page 都 render 了一个
<base>→ 只有第一个生效，控制台提示Multiple base elements detected. Only the first one is used. - 用 JavaScript 动态插入：
document.head.appendChild(baseEl)→ 已解析的元素不会重算，新创建的元素才受影响
href 值必须是绝对 URL 或根相对路径，结尾带斜杠
浏览器会静默丢弃非法 href 值，不报错，但 <base> 完全失效，退回到用当前页面 URL 当基准 —— 这是上线后批量资源 404 的最常见原因。
合法写法：
立即学习“前端免费学习笔记（深入）”；
-
href="https://cdn.example.com/v3/"（绝对 URL，推荐） -
href="/myapp/"（根相对路径，结尾斜杠不能少；Firefox 会把/myapp截成/myappcss/） -
href="//cdn.example.com/v3/"（协议相对，自动继承 http/https）
无效写法：
-
href="assets/"（相对路径，无协议也无开头斜杠） -
href="../static/"（含..，浏览器直接丢弃） -
href="%PUBLIC_URL%/"（构建未替换，发到浏览器就是字面量字符串）
base 只影响 HTML 属性中的相对 URL，不穿透到 CSS/JS 内部
这是最容易误判的一点：设了 <base href="/cdn/">，不代表 CSS 里的 url(logo.png) 就会变成 /cdn/logo.png。它根本不管这些。
✅ 真正受影响（HTML 解析阶段拼接）：
<img src="icon.svg"><script src="bundle.js"><link href="main.css"><form action="submit.php">- 内联 style 中的
background: url('avatar.jpg')（部分浏览器行为，不可依赖）
❌ 完全不受控（仍按各自文件位置或当前域名解析）：
- CSS 文件内的
url(logo.png)或@import "reset.css" - JS 中的
import('./utils.js')、fetch('./data.json')、new Worker('./worker.js') -
window.location、document.URL不变
target="_blank" 会全局覆盖，但有安全风险
<base target="_blank"> 不只影响 <a>，还会作用于所有未显式声明 target 的 <form>、<link rel="preload">（某些浏览器），甚至第三方组件里的隐藏链接。
更关键的是：没有 rel="noopener" 的 target="_blank" 会暴露 window.opener，存在安全隐患。
建议：
- 避免用
<base target="_blank">统一设置，改用显式声明<a href="..." target="_blank" rel="noopener"> - 如果必须用
target，至少补上rel="noopener"（href属性仍是必需的，否则target在部分旧浏览器中不生效）
真正难的不是写对 <base>，而是确认它生效后，哪些地方没被它管到 —— 比如 CSS 里的 url()、JS 里的 fetch()，这些都得单独处理。部署前用 document.baseURI 检查值是否符合预期，再逐个验证资源加载路径，比事后排查 404 快得多。
