base是html5定义的void元素，禁止结束标签或自闭合斜杠，正确写法仅；写成或/>属非法，会导致dom解析异常、工具链报错及ssr失效。
base 标签为什么不能写结束标签
因为 <base> 是 HTML5 规范定义的 void element（空元素），语法上禁止有结束标签或自闭合斜杠。写成 <base href="/app/"> 或 <base href="/app/"> 都是非法的——浏览器虽可能容错渲染，但会破坏文档解析一致性，尤其在 SSR、模板引擎或 Linter 工具中容易报错或导致意外行为。
常见翻车点：<base href="/static/"> 看似整洁，实则混入 XHTML 风格；<base href="/app/"> 会让后续 DOM 解析器误认为 <base> 元素内含内容，可能吞掉紧随其后的 <title></title> 或影响 head 顺序判断。
- ✅ 正确写法：
<base href="/myapp/">（无任何闭合） - ❌ 错误写法：
<base href="/myapp/">、<base href="/myapp/"> - 工具链影响：ESLint-plugin-react、html-validate、Prettier 默认拒绝带
/>的 void 元素写法
base 标签必须放在 head 最前面才生效
<base> 的作用是重置 HTML 解析器对后续所有相对 URL 的基准起点，这个重置动作只在解析到该标签时发生一次。如果它出现在 <title></title> 或 <link rel="stylesheet"> 之后，那些已解析的标签就完全不受影响，仍按当前页面 URL 解析 src/href，上线后大量 404。
- ❌ 失效写法：
<title>App</title> <base href="https://cdn.example.com/">（<title></title>已先解析） - ✅ 正确顺序：
<base href="https://cdn.example.com/"> <title>App</title> <link href="css/main.css"> - SSR 场景注意：服务端模板拼接时，确保 header 模块和页面模块不会各自注入一个
<base>，否则只有第一个生效，控制台提示Multiple base elements detected. Only the first one is used.
href 值不合法会导致 base 标签被静默忽略
浏览器只认以 http://、https://、// 或 / 开头且结尾带斜杠的 href 值。其他写法——比如 static/、../assets、https://example.com（缺末尾 /）——整条 <base> 都会被丢弃，不报错、不警告，但所有 src="logo.png" 仍按当前页面 URL 解析，404 风险陡增。
- ✅ 合法值：
https://cdn.example.com/v2/、/myapp/、//cdn.example.com/v2/ - ❌ 无效值：
static/（普通相对路径）、../dist/（含..）、https://example.com（结尾无/，Firefox 会截断为https://example.comcss/） - 环境变量陷阱：
href="%PUBLIC_URL%/"若未被构建工具（如 Webpack）提前替换，发到浏览器就是字面量，直接失效
base 标签不影响 JS 动态路径，但会影响 CSS url()
<base> 只作用于 HTML 解析阶段的静态属性：比如 <img src>、<script src></script>、<link href>、<a href></a>。它对运行时 JS 完全无效，但会穿透进 CSS 的 url() 函数——这点最容易被忽略。
- fetch('./api/data.json') → 仍以当前页面 URL 为基准，
<base>不起作用 - import('./module.js') → 同样绕过
<base> - CSS 中
background: url('icon.svg');→ 实际请求变成https://cdn.example.com/icon.svg（若base href="https://cdn.example.com/"） - @import 'theme.css'; → 不受
<base>影响，走 CSS 自身解析逻辑
url() 调用——它们不像 HTML 属性那样一目了然，出问题时往往排查半天才发现是 base 搞的鬼。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
