base href必须以/、http://、https://或//开头且结尾带/才生效，否则静默失效；必须置于<head>最前且唯一，仅影响其后HTML中纯相对路径（如src、href），对JS/CSS运行时路径无效。
base href 必须以 / 或协议开头，否则静默失效
浏览器只认 href 值以 https://、http://、// 或 / 开头的 <base> 标签。写成 href="assets/"、href="../static/"、href="cdn/v2" 全部被丢弃——不报错、不警告，但后续所有 <img src="logo.png"> 都退回到按当前页面 URL 解析，上线后批量 404。
常见合法写法：
-
href="https://cdn.example.com/v3/"：最稳妥，协议+域名+路径，CDN 场景首选 -
href="/myapp/"：根相对路径，结尾斜杠不能少；缺斜杠在 Firefox 中可能截断成/myappcss/ -
href="//cdn.example.com/v3/"：协议相对，自动继承当前页 http/https，适合混合协议环境
base 标签必须放在 <head> 最前面且只能有一个
<base> 影响的是 HTML 解析器对后续标签中相对 URL 的初始拼接逻辑，这个动作只在解析阶段发生一次。它只对它之后出现的标签生效，放错位置等于没写。
正确顺序示例：
立即学习“前端免费学习笔记（深入）”；
<head> <base href="/myapp/"> <title>App</title> <link href="style.css"> <script src="app.js"></script> </head>
错误情况：
- 放在
<title>或<meta>后面 → 已解析的<link>不受控 - 放进
<body>→ 浏览器直接忽略 - 多个
<base>→ 只有第一个生效，Chrome 控制台提示Multiple base elements detected. Only the first one is used. - 用 JS 动态插入（如
document.head.appendChild()）→ 解析阶段早已结束，完全无效
哪些属性真受影响，哪些完全不受影响
<base> 不是全局路径代理，它只改写 HTML 解析时硬编码在标签属性里的纯相对路径（即不以 /、: 或协议开头的字符串），对运行时行为毫无作用。
✅ 真正受影响（HTML 属性中硬编码的相对路径）：
<img src="icon.png"><script src="bundle.js"><link href="theme.css"><form action="submit.php">- CSS 文件中
background: url(avatar.jpg)（注意：这是 HTML 解析时计算的，不是 CSS 运行时）
❌ 完全不受影响：
fetch('./api/data.json')import('./utils.js')new Worker('./worker.js')- CSS 中的
@import "reset.css" -
<iframe src="/admin/frame.html">（它的src相对于 iframe 当前 URL） -
document.createElement('img').src = 'logo.png'（JS 动态设置）
SPA 部署子路径时，base 与构建工具/路由易冲突
部署在 https://example.com/a/b/c/ 时，<base href="/a/b/c/"> 和前端框架配置必须严格对齐，否则资源加载和跳转行为割裂。
典型冲突点：
- Vue Router / React Router v6+ 不读
document.baseURI，必须显式传入base: '/a/b/c/' - Webpack 的
publicPath和手写的<base href="/a/b/c/">若值相同，资源路径可能被拼两次（如/a/b/c//a/b/c/js/app.js） - Vite 构建时已设
build.base: '/a/b/c/'，HTML 中就不该再手动加<base>标签 - Service Worker 缓存策略若依赖
self.location.origin + '/a/b/c/'，而 HTML 没配<base>，预缓存路径就错位 -
<a href="#">在<base href="/sub/">下会被解析成https://example.com/sub/#，触发无意义重载（地址栏变灰、滚动回顶）
最常被忽略的一点：你检查 Network 面板看到某个 <img src="icon.svg"> 请求失败，第一反应是路径写错了，但其实问题出在 <base> 的 href 值非法或位置不对——它根本没生效，而你还在反复改 src。
