<base>标签重置HTML解析器对后续相对URL的基准起点，非简单加前缀；必须置于<head>最前且唯一，href须为绝对URL或结尾带斜杠的根相对路径，否则静默失效致404。
<base> 标签不是“加前缀”，而是重置 HTML 解析器对后续所有相对 URL 的基准起点；写错一个字符，<img src="logo.png"> 就 404，且浏览器通常不报错，只静默失败。
base href 必须是绝对 URL 或根相对路径（结尾带斜杠）
浏览器会静默忽略非法 href 值，退回到用当前页面 URL 当基准——这是上线后资源批量 404 的最常见原因。
-
https://cdn.example.com/v3/：推荐，协议、域名、路径明确，适合 CDN 场景 -
/myapp/：合法根相对路径，等价于当前协议 + 域名 +/myapp/，适用于 SPA 部署在子路径（结尾斜杠不能少） -
//cdn.example.com/v3/：协议相对，自动继承当前页 http/https，适合多协议环境 -
assets/、../static/、%PUBLIC_URL%/、/myapp（缺斜杠）：全部非法，整条<base>被丢弃
base 标签必须放在 <head> 最前面且唯一
HTML 解析是自上而下的，<base> 只对它之后出现的相对 URL 生效。位置或数量错，等于没写。
- ✅ 正确顺序：
<head><base href="/myapp/"><title>App</title><link href="style.css"></head> - ❌ 错误示例：
<head><link href="main.css"><base href="/myapp/"></head>→main.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') 或 import('./utils.js') 自动带上前缀。它只作用于 HTML 解析时的属性值。
立即学习“前端免费学习笔记（深入）”；
- ✅ 真受影响：
<img src="icon.svg">、<script src="bundle.js">、<link href="theme.css">、<form action="submit.php">、CSS 中的background: url(avatar.jpg)（这是唯一穿透到 CSS 的情况） - ❌ 完全不受影响：
fetch('./api/data.json')、import('./utils.js')、new Worker('./worker.js')、CSS 中的@import "reset.css"、<iframe src="page.html">（它的src相对于 iframe 当前 URL） - ⚠️ 特别注意：
href="/admin"这种根相对路径，根本不受<base>控制——它直接拼到当前域名下
预览环境或构建流程中必须在 HTML 输出前注入正确 href
<base> 标签不能动态重置，无法通过 JS 修改来“切换路径”——DOM 构建完成后插入或修改它完全无效。
- 服务端模板（如 Express、Nunjucks）中用变量注入：
<base href="{{ previewBase }}">，确保previewBase是绝对 URL（如https://preview.example.com/v2/）或合法根相对路径（如/preview/v2/） - Vite/Webpack 构建时，通过
base配置 + HTML 模板插值生成，避免硬编码 - 纯静态预览（如 GitHub Pages）：直接写
<base href="/my-project/">，并确认所有src/href属性用的是纯相对路径（如js/app.js），而非../或assets/ - 验证是否生效：打开控制台执行
document.baseURI，返回值应与所设href一致
真正麻烦的不是写错 <base>，而是它静默失效——既不报错也不警告，资源请求直接 404。最易被忽略的是：前端路由（Vue Router / React Router）和构建工具（Webpack publicPath、Vite base）必须与 HTML 中的 <base href> 显式对齐，否则跳转和加载行为割裂，问题更难定位。
