<base>标签不是加前缀，而是重置HTML解析器对后续相对URL的基准起点；href必须以/、http://、https://或//开头且结尾带/，否则静默失效；必须置于<head>最前且唯一，仅影响HTML属性中的纯相对路径。
<base> 标签不是“加个前缀就完事”的快捷键，它是一把双刃剑：配对了能统一管理所有相对路径，配错一个字符，<img src="logo.png"> 就静默 404，浏览器连控制台警告都不给。
base href 值必须以 / 或协议开头，否则整条标签被静默丢弃
浏览器只认 href 值以 https://、http://、// 或 / 开头的写法。其他任何形式——哪怕只差一个斜杠——都会导致标签被完全忽略。
-
href="static/"❌ 缺协议和域名，被丢弃 -
href="../assets/css/"❌ 含..，被丢弃 -
href="https://cdn.example.com"❌ 结尾没斜杠，Firefox 可能截断成https://cdn.example.comcss/ -
href="/myapp"❌ 缺尾斜杠，同上风险，且在部分场景下会拼出/myappjs/app.js -
href="https://cdn.example.com/v3/"✅ 绝对 URL，推荐用于 CDN -
href="/myapp/"✅ 根相对路径，结尾斜杠不可省 -
href="//cdn.example.com/v3/"✅ 协议相对，适合多协议环境
base 标签必须放在 <head> 最顶部，且只能有一个
HTML 解析是自上而下的，<base> 的作用是为“它之后出现的所有相对 URL”重置基准。位置错了，或数量多了，等于没写。
- 放错位置示例：
<head><title>App</title><base href="/app/"><link href="style.css"></head>→style.css已按原页面 URL 解析完毕，不受控 - 放错容器示例：
<body><base href="/app/"></body>→ 浏览器直接忽略，无提示 - 重复声明：
<base href="/a/"><base href="/b/">→ Chrome 控制台提示Multiple base elements detected. Only the first one is used.，第二个无效 - 服务端渲染（SSR）中，模板拼接时 header 和 page 模块各 render 一个
<base>，极易触发重复问题
哪些路径真受影响，哪些完全绕过 base
<base> 只在 HTML 解析阶段生效，它不接管 JS 运行时、不干预 CSS @import，更不会重写 fetch() 或 import() 的路径。混淆这点，是线上 404 的最大根源。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- ✅ 真受影响（纯相对路径，且出现在 HTML 属性中）：
<img src="icon.png">、<script src="app.js">、<link href="theme.css">、<a href="about.html">、CSS 中的background: url(avatar.jpg)（注意：这是 HTML 解析时计算的） - ❌ 完全不受影响：
fetch('./api/data.json')、import('./utils.js')、new Worker('./worker.js')、CSS 中的@import "reset.css"、<iframe src="page.html">（它的src相对于 iframe 当前 URL）、<img srcset="logo-2x.png 2x"> - ⚠️ 半受影响：
document.baseURI会返回<base href>的值，可用于构造 URL（如new URL('data.json', document.baseURI)），但window.location和document.URL完全不变
SPA 部署在子路径时，base 标签和前端路由不能“各自为政”
Vue Router 的 base 配置、React Router v6+ 的 basename、Webpack 的 publicPath、Vite 的 base，和 HTML 中的 <base href> 是四套独立机制。它们值不一致，就会出现资源加载 404 或路由跳转错位。
- 若用
<base href="/myapp/">，则 Vue Router 必须同步设base: '/myapp/'，否则router.push('/home')会跳到/home而非/myapp/home - Vite 构建时已设
base: '/myapp/'，HTML 中再手动加<base href="/myapp/">，可能导致资源路径被拼两次（如/myapp//myapp/js/app.js） - Service Worker 缓存策略若依赖
self.location.origin + '/myapp/'，而 HTML 没配<base>，预缓存路径就会错位 - 微前端子应用若同时设了 Webpack
publicPath和 HTML<base>，同样有双重拼接风险
最常被忽略的点是：构建工具（如 Vite、Webpack）生成的 HTML 里，<base> 很可能已被自动注入；此时手写一个，反而引发冲突。上线前务必检查最终 HTML 文件中 <base> 是否唯一、是否与构建配置一致、document.baseURI 是否符合预期。
