<base> 标签必须置于 <head> 顶部且唯一，href 值须以 / 或协议开头并以 / 结尾，仅影响 HTML 解析阶段的纯相对 URL（如 src="x"），对 JS 运行时路径（如 fetch()）无效。
<base> 标签不是“设个路径就能用”的配置项，它一旦写错，浏览器会静默忽略——不报错、不警告，但所有 src="logo.png" 都按当前页面 URL 解析，上线后批量 404。
base href 必须以 / 或协议开头，且结尾带斜杠
浏览器只认 href 值以 http://、https://、// 或 / 开头的写法。其他一律丢弃。
-
href="static/"→ 无效（缺协议和根路径） -
href="../assets/"→ 无效（含..） -
href="/myapp"→ 无效（结尾没斜杠，Firefox/Opera 可能截断成/myappcss/） -
href="https://cdn.example.com/v3"→ 无效（同上，应写成https://cdn.example.com/v3/） -
href="/myapp/"→ ✅ 合法（根相对路径，结尾带斜杠） -
href="https://cdn.example.com/v3/"→ ✅ 推荐（绝对 URL，部署可控）
base 标签必须放在 <head> 最顶部，且只能有一个
<base> 的作用是重置 HTML 解析器对后续所有相对 URL 的基准起点，这个动作只在解析阶段生效，且仅对它之后出现的标签起效。
- 放在
<meta>或<title>后面 → 部分浏览器跳过已解析的<link>，资源仍按原始 URL 加载 - 放在
<body>里 → 浏览器直接忽略，无提示 - 写了两个
<base>→ 控制台提示Multiple base elements detected. Only the first one is used.，第二个完全无效 - 用 JS 动态插入：
document.head.appendChild(baseEl)→ 解析早已结束，已加载的<img src="x">不会重算
哪些属性真正受 base 影响，哪些完全不受
<base> 只在 HTML 解析阶段改写纯相对路径（即不以 /、: 或协议开头的字符串），不是运行时路径重写器。
立即学习“前端免费学习笔记（深入）”；
- ✅ 明确受影响：
<img src="logo.png">、<script src="app.js">、<link href="style.css">、<form action="login.php">、CSS 中的background: url(avatar.jpg) - ❌ 完全不受影响：
fetch('./api/user')、import('./utils.js')、@import "reset.css"、<iframe src="page.html"> - ⚠️ 半受影响：
document.baseURI返回<base href>的值，可用于new URL('data.json', document.baseURI)；但window.location和document.URL完全不变
SPA 项目中 base 标签不能替代路由配置
<base href="/myapp/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径。它们完全不读 document.baseURI，必须显式传入 base 配置。
- Vue Router：
createRouter({ base: '/myapp/' }) - React Router v6+：
<Router basename="/myapp"> - 若 HTML 写了
<base href="/myapp/">但路由没配base→router.push('/home')会跳到根路径，而非/myapp/home，导致导航错位 - 构建工具（如 Webpack/Vite）中
publicPath或base配置也需与<base href>对齐，否则资源加载和路由行为割裂
最易被忽略的是：base 标签只管 HTML 解析那一刻的硬编码路径，它对 JS 运行时毫无约束力。你写 <base href="/app/">，但 fetch('./api') 依然发向当前页面所在路径——这不是 bug，是设计如此。
