<base>标签重置HTML解析器对后续相对URL的基准起点，非简单加前缀；必须置于<head>最前且唯一，href须为绝对URL或根相对路径（结尾带斜杠），否则静默失效致404。
<base> 标签不是“加前缀”，而是重置 HTML 解析器对后续所有相对 URL 的基准起点——写错一个字符，<img src="logo.png"> 就 404，且浏览器通常不报错，只静默失败。
base href 值必须是绝对 URL 或根相对路径（结尾带斜杠）
浏览器只接受 href 值以 https://、http://、// 或 / 开头。其他写法（如 "static/"、"../assets/"、"%PUBLIC_URL%/"）会被静默忽略，资源退回到按当前页面 URL 解析，上线后批量 404。
-
✅ 推荐写法：
https://cdn.example.com/v3/（协议+域名+路径，结尾斜杠不能少） -
✅ 合法写法：
/myapp/（根相对路径，结尾斜杠必须存在；缺斜杠在 Firefox 中可能被截断为/myappcss/） -
✅ 可用写法：
//cdn.example.com/v3/（协议相对，自动继承当前页 http/https） -
❌ 无效写法：
assets/（无协议无根）、../static/（含..）、/myapp（结尾缺斜杠）、https://example.com（结尾缺斜杠）
base 标签必须放在 <head> 最前面，且只能有一个
<base> 的作用是影响它之后出现的所有相对 URL，解析顺序自上而下。放错位置或重复声明，等于没写。
- 正确顺序：
<head><base href="/myapp/"><title></title><link href="style.css"></head> - 错误示例：
<head><link href="style.css"><base href="/myapp/"></head>→style.css已按原始页面 URL 解析完毕 - 禁止放在
<body>中——浏览器直接忽略，无警告 - 多个
<base>？Chrome 控制台提示Multiple base elements detected. Only the first one is used.，其余静默丢弃
base 只影响 HTML 解析阶段的纯相对路径，JS/CSS 运行时完全不管
这是最容易误判的一点：<base href="/cdn/"> 不会让 fetch('./api/data.json') 自动带上前缀。它只改写 HTML 属性中硬编码的、不带协议也不以 / 开头的路径。
立即学习“前端免费学习笔记（深入）”；
-
✅ 真受影响：
<img src="avatar.jpg">、<script src="app.js">、<link href="theme.css">、<form action="submit.php">、CSS 中的background: url(logo.png)（注意：这是 HTML 解析时计算的，非 CSS 引擎运行时 resolve） -
❌ 完全不受影响：
fetch('./api/data.json')、import('./utils.js')、new Worker('./worker.js')、CSS 中的@import "reset.css"、<iframe src="page.html">（它的src相对于 iframe 当前 URL） -
⚠️ 特别注意：
<img src="/admin/logo.png">是根相对路径，根本不受<base>控制，直接拼到当前域名下
SPA 项目中慎用 base 标签，优先走构建配置或路由显式 base
Vue Router v4+、React Router v6+ 都要求显式传入 base 配置项（如 createRouter({ base: '/myapp/' })），它们不读 document.baseURI。硬塞 <base href="/myapp/"> 可能导致路由匹配和资源加载行为不一致。
- Webpack/Vite 构建时应使用
publicPath或base配置自动重写 HTML 中的资源路径，而非手动维护<base> - 服务端模板（如 Hugo）需确保占位符（如
{{ .Site.BaseURL }}）被真实值替换，而非字面量字符串发到浏览器 - 禁止用 JS 动态插入：
document.head.appendChild(baseEl)—— DOM 已开始解析，已加载的资源不会重算 - 验证是否生效：打开控制台执行
document.baseURI，返回值应与所设href一致
最危险的不是配置错，而是配置错却没报错——浏览器静默忽略 <base>，资源照常请求，只是全指向了错误路径。部署前务必检查 document.baseURI 和实际网络请求的 URL 是否符合预期。
