标签重置后续纯相对 URL 的解析基准，必须为绝对 URL 或合法根相对路径（结尾带斜杠），且须置于 最前、唯一；仅影响 src、href、action 等属性中的纯相对路径，对 JS 动态请求、根相对路径、srcset 等无效；SPA 部署时需同步配置路由、构建工具与 Service Worker，否则路径错位导致静默失败。
<base> 标签不是“加前缀”，而是重置 HTML 解析器对后续所有纯相对 URL 的基准起点；写错一个字符，<img src="logo.png" alt="深入剖析HTML中base标签对相对链接的重写规则" > 就 404，且浏览器不报错、不警告，只静默失败。
base href 值必须是绝对 URL 或合法根相对路径（结尾带斜杠）
浏览器只接受 href 值以 https://、http://、// 或 / 开头。其他写法一律被静默忽略——包括 assets/、../static/、%PUBLIC_PATH%/、cdn/v2，甚至 https://example.com（结尾缺斜杠）。
-
https://cdn.example.com/v3/✅ 最稳妥，协议+域名+路径明确，适合 CDN 场景 -
/myapp/✅ 合法根相对路径，但结尾斜杠不能少；否则 Firefox/Opera 可能截断成/myappcss/ -
//cdn.example.com/v3/✅ 协议相对，自动继承当前页 http/https，适合混合协议环境 -
file:///D:/project/dist/⚠️ 仅限本地调试，部分浏览器支持不一致
base 必须放在 最前面，且只能有一个
<base> 的作用是顺序敏感的：它只影响它之后在 HTML 中出现的纯相对路径。解析阶段一旦过去，再插入或修改都无效。
- 正确位置：
<base href="/myapp/"> <title>App</title> <link href="style.css"> - 错误示例：
<link href="main.css"> <base href="/myapp/">→main.css已按原始页面 URL 解析完毕，不受控 - 禁止放在
里 —— 浏览器直接忽略，无提示 - 多个
<base>？只有第一个生效，Chrome 控制台会提示Multiple base elements detected. Only the first one is used. - 用 JS 动态插入（如
document.head.appendChild(baseEl)）？完全无效 —— 解析阶段早已结束
哪些属性真正受 base 控制，哪些完全不受
<base> 是 HTML 解析层规则，不是运行时全局代理。它只在解析时对特定属性中“纯相对路径”做一次拼接，之后就不管了。
立即学习“前端免费学习笔记（深入）”；
- ✅ 真正受影响：
<img src="logo.png" alt="深入剖析HTML中base标签对相对链接的重写规则" >、<script src="app.js"></script>、<link href="style.css">、<form action="submit.php"></form>、CSS 文件内的background: url(avatar.jpg)（注意：这是 HTML 解析时计算的，不是 CSS 引擎自己 resolve） - ❌ 完全不受影响：
fetch('./api/data.json')、import('./utils.js')、@import "reset.css"、<iframe src="/admin/frame.html"></iframe>（根相对路径）、<img srcset="logo-2x.png 2x" alt="深入剖析HTML中base标签对相对链接的重写规则" > - ⚠️ 特别注意：
<img src="/admin/logo.png" alt="深入剖析HTML中base标签对相对链接的重写规则" >这类根相对路径，根本不受<base>控制 —— 它直接拼到当前域名下
SPA 部署子路径时，base 和前端路由/构建配置容易冲突
设了 <base href="/a/b/c/"> 并不等于前端路由、打包工具、Service Worker 自动对齐。三者值不一致，资源加载和导航就会割裂。
- Vue Router 必须显式传入
createRouter({ base: '/a/b/c/' })；它不读document.baseURI - React Router v6+ 必须用
<router basename="/a/b/c"></router>，否则router.push('/home')会跳到根路径 - Webpack 的
publicPath或 Vite 的base配置若与 HTML 中<base>值重复，会导致路径被拼两次（如/a/b/c//a/b/c/js/app.js） - Service Worker 预缓存若依赖
self.location.origin + '/a/b/c/'，而 HTML 没配<base>，缓存路径就错位
真正麻烦的不是单点配置，而是 HTML 解析、JS 运行时、构建产物、CDN 缓存、Service Worker 全部依赖同一个路径前缀的一致性——漏掉一个环节，资源就加载失败，且往往没有明显报错。
