base标签必须写在最前面且只能有一个，因为它仅在html解析阶段自上而下生效，只影响其后出现的相对url；放错位置、重复声明或动态插入均导致静默失效。
base 标签为什么必须写在 里
因为浏览器解析 HTML 是自上而下、流式进行的，<base> 的作用时机仅限于「HTML 解析阶段」，它不参与 DOM 构建后的行为修正，也不影响 JS 或 CSS 的运行时路径逻辑。浏览器规范明确要求：只有当 <base> 是 放错位置的后果是静默失效——没有报错、没有警告，但所有相对 URL（如 <img src="logo.png">、<link href="style.css">）仍按原始页面 URL 解析，极大概率触发 404。
放在 里会发生什么
浏览器直接忽略 <base> 标签，连控制台提示都不会出现。
- 示例：
<base href="/static/"> <img src="icon.svg">→icon.svg仍从当前页面 URL 拼接，比如https://example.com/page/下会请求https://example.com/page/icon.svg，而非预期的https://example.com/static/icon.svg - 这不是兼容性问题，而是规范强制行为：HTML 标准规定
<base>只允许作为的子元素 - 某些旧版 IE 遇到这种写法甚至会中断整个文档解析
为什么必须是 中第一个元数据类标签
<base> 的作用范围是「它之后出现的所有相对 URL」，不是整页统一重算。解析器读到它，才开始用新基准；之前已读取的 href、src 等属性早已完成解析，无法回溯。
- 错误顺序：
<link href="main.css"> <base href="/app/">→main.css已按原始页面 URL 解析完毕，<base>对它完全无效 - 正确顺序：
<base href="/app/"> <title>App</title> <link href="main.css">→main.css会按/app/main.css请求 - 它甚至要早于
<title></title>和<meta>，否则可能影响某些 SEO 工具对 canonical link 的提取逻辑
动态插入 <base> 为什么不行
用 JS 执行 document.head.appendChild(baseEl) 或模板引擎条件渲染导致重复注入，都不可靠。
- 已解析的
<img src="x">不会重算路径，只影响后续新创建的元素（比如之后用document.createElement('img')插入的） - SSR 场景中 header 和 page 模板各 render 一个
<base>→ 只有第一个生效，控制台可能提示Multiple base elements detected. Only the first one is used. - 服务端未替换环境变量（如
<base href="%24%7BASSET_BASE%7D">）会导致字面量字符串被发给浏览器，等同于无效 href
<base> 形同虚设。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
