base href值不合法时浏览器静默忽略，仅接受http://、https://、//或/开头的合法URL；真正安全写法仅有href="https://cdn.example.com/v3/"、href="/myapp/"、href="//cdn.example.com/v3/"三种。
base href 值不合法时浏览器直接静默忽略
浏览器对 <base> 的 href 值校验极严：只有以 http://、https://、// 或 / 开头的值才被接受；其他写法（如 assets/、../static/、cdn/v2）整条标签被丢弃，不报错、不警告，但后续所有纯相对路径仍按当前页面 URL 解析——上线后批量 404 就这么来的。
常见翻车点：
-
href="https://example.com"❌ 缺尾部/，Firefox 可能截断为https://example.comcss/ -
href="/myapp"❌ 少了结尾斜杠，Opera/Firefox 行为不一致，可能拼成/myappcss/ -
href="%PUBLIC_PATH%/"❌ 构建工具未替换时就是字面量字符串，非法
真正安全的写法只有三种：
-
href="https://cdn.example.com/v3/"✅ CDN 场景首选，协议+域名+版本路径 -
href="/myapp/"✅ 根相对路径，结尾斜杠不可省 -
href="//cdn.example.com/v3/"✅ 协议相对，自动继承当前页 http/https
base 标签必须在 最前且唯一
<base> 的作用时机是 HTML 解析器自上而下扫描文档的过程，它只影响其后出现的纯相对路径。放错位置 = 白配。
立即学习“前端免费学习笔记（深入）”；
典型错误：
- 放在
<title></title>或<link>后面 → 已解析的资源（如<link href="style.css">）完全不受控 - 放在
里 → 浏览器直接忽略，无提示 - SSR 模板拼接导致多个
<base>→ 只有第一个生效，Chrome 控制台提示Multiple base elements detected. Only the first one is used. - 用 JS 动态插入（如
document.head.appendChild(baseEl)）→ 解析阶段早已结束，无效
最稳妥做法：手写 HTML 源码中确保 <base href="..."> 是 的第一个子元素，早于 <title></title>、<meta>、<link>。
哪些属性真受影响，哪些完全绕过 base
<base> 不是全局路径代理，它只在 HTML 解析阶段改写特定属性中“纯相对路径”（即不以 /、: 或协议开头）的初始拼接逻辑。
✅ 真正受影响（HTML 解析时重定向）：
<img src="logo.png" alt="HTML中base标签对相对资源路径解析的底层逻辑" ><script src="app.js"></script><link href="style.css"><a href="about.html"></a><form action="submit.php"></form>- CSS 文件中的
background: url(avatar.jpg)（注意：这是 HTML 解析时计算的，不是 CSS 引擎自己 resolve）
❌ 完全不受影响（运行时行为，与 <base> 无关）：
-
fetch('./api/user')、import('./utils.js')、new Worker('./worker.js') - CSS 中的
@import "reset.css"（按该 CSS 文件自身路径解析） -
<iframe src="/admin/frame.html"></iframe>（根相对路径，直接拼域名） -
<img srcset="logo-2x.png 2x" alt="HTML中base标签对相对资源路径解析的底层逻辑" >（srcset不走base规则）
SPA 部署时 base 与路由/构建配置极易冲突
部署在子路径（如 https://example.com/a/b/c/）时，<base href="/a/b/c/"> 必须和前端框架、构建工具、Service Worker 的路径配置严格对齐，否则资源加载和跳转行为割裂。
关键对齐点：
- Vue Router / React Router v6+：必须显式传入
base: '/a/b/c/'，它们不读document.baseURI - Webpack：
publicPath若设为'/a/b/c/'，HTML 中再写<base href="/a/b/c/">，资源路径可能被拼两次（如/a/b/c//a/b/c/js/app.js） - Vite：构建时已设
base: '/a/b/c/'，HTML 中就不该再手动加<base>标签 - Service Worker：若缓存策略依赖
self.location.origin + '/a/b/c/'，而 HTML 没配<base>，预缓存路径就错位
锚点跳转也容易翻车：<a href="#section2"></a> 在 <base href="https://example.com/sub/"> 下会被解析成 https://example.com/sub/#section2，触发一次无意义页面重载（地址栏变灰、滚动回顶）。
真正难处理的从来不是怎么写 <base>，而是它只管 HTML 解析那一刻，却要和 JS 运行时、CSS 加载、构建产物、服务端路由全部对齐——差一个斜杠，就全盘失效。
