标签重置所有后续相对 url 的解析基准，必须置于 最前且唯一，href 需为绝对 url 或根相对路径（结尾带斜杠），仅影响 html 属性中的相对 url，不影响 css/js 内部路径。
<base> 标签不是“加个前缀”，而是直接重置 HTML 解析器对所有相对 URL 的起点。设错一个字符，<img src="logo.png"> 就 404，且浏览器通常不报错，只静默失败。
base href 必须写在
浏览器按顺序解析 HTML，<base> 只对它之后出现的相对 URL 生效。如果写在 <title></title> 或 <link> 后面，那些资源仍按当前页面 URL 解析，大概率 404。
- ✅ 正确顺序：
<base href="https://cdn.example.com/v3/"> <title>...</title> <link href="main.css"> - ❌ 错误写法：把
<base>放在<script></script>或<img>后面；或放在里（浏览器直接忽略） - ⚠️ 多个
<base>：只有第一个生效，其余被静默丢弃；控制台可能输出Multiple base elements detected. Only the first one is used. - 动态用 JavaScript 插入（如
document.head.appendChild()）完全无效 —— 解析阶段早已结束
href 值必须是绝对 URL 或根相对路径，结尾必须带斜杠
浏览器会静默忽略非法值，不报错但完全失效，退回到用当前页面 URL 当基准 —— 这是部署后资源批量 404 的最常见原因。
- ✅ 推荐：
href="https://cdn.example.com/v3/"（明确、跨环境稳定） - ✅ 合法：
href="/myapp/"（适用于 SPA 部署在子目录，结尾斜杠不能少） - ✅ 可用：
href="//cdn.example.com/v3/"（协议相对，自动继承 http/https） - ❌ 无效：
href="assets/"、href="../static/"、href="%PUBLIC_URL%/"（未被构建工具替换时就是字面量字符串，浏览器不认）
base 只影响 HTML 属性中的相对 URL，不穿透到 CSS 和 JS 内部
这是最容易误判的一点：设了 <base href="/cdn/">，不代表 CSS 里的 url(logo.png) 就会变成 /cdn/logo.png。它根本不管这些。
- ✅ 影响：
<img src="icon.svg">、<link href="main.css">、<script src="bundle.js"></script>、<a href="about.html"></a>、<form action="submit.php"></form> - ❌ 不影响：CSS 文件内的
url(logo.png)或@import "reset.css"（仍以 CSS 文件自身位置为基准） - ❌ 不影响：JS 中的
import('./utils.js')、fetch('./data.json')、new Worker('./worker.js') - ⚠️ 特别注意：
background: url('icon.svg');在 CSS 中会被重写为url('https://cdn.example.com/icon.svg')—— 这是少数几个受<base>影响的 CSS 场景，但仅限于内联 style 或某些浏览器行为，不可依赖
真正难处理的不是怎么写，而是验证和边界：比如 document.baseURI 返回值是否与你写的 href 一致，比如本地 file:// 协议下部分浏览器对 <base> 支持不一致，比如 Vue/React 组件中动态插入 <base> 标签时 DOM 已开始解析 —— 这些地方一踩就错，且无提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
