<base>标签仅在HTML初始解析阶段生效，动态注入（如JS appendChild或document.write）无效；必须置于<head>最前且唯一，href须为绝对URL或以/开头并结尾带/的根相对路径，否则静默失效。
<base> 标签无法在页面加载后“动态注入”并生效——浏览器只在 HTML 初始解析阶段读取第一个 <base href="">，DOM 构建完成后再用 JS 插入或修改它，完全无效。
为什么 document.write('
浏览器解析 HTML 是单向、不可逆的过程。一旦 <link>、<script>、<img> 等资源标签被解析，其 src/href 就已按当时有效的基准 URL（即页面 URL 或已声明的 <base>）锁定。后续插入 <base> 不会回溯修正这些已解析的路径。
- 用
document.write('<base href="/new/">')：仅在<head>未关闭前执行才可能生效，但破坏流式渲染、阻塞解析、禁用预加载，且现代框架/SPA 中基本不可控 - 用
document.head.appendChild(baseEl)：标签插入成功，但浏览器无视——控制台静默无提示，所有后续相对路径仍按原始基准解析 - 重复声明多个
<base>：只有第一个被采用，其余被忽略；Chrome 控制台会输出Multiple base elements detected. Only the first one is used.
真正可行的“动态”其实是构建时注入
所谓“动态”，本质是根据部署环境（如 /staging/、/preview/v3/）在 HTML 文件生成阶段就写入正确的 href 值，而非运行时 JS 操作。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- Vite 项目：配置
build.base = process.env.BASE_PATH || '/'，它会自动重写所有静态资源引用，并在生成的index.html中写入<base href="{{ build.base }}"> - Webpack + HtmlWebpackPlugin：通过
templateParameters向 HTML 模板传入baseHref变量，模板中写<base href=""> - 服务端模板（Nunjucks / Express）：使用变量插值，如
<base href="{{ ASSET_BASE }}">，确保ASSET_BASE渲染为绝对 URL（https://cdn.example.com/v2.4/）或合法根相对路径（/myapp/）
href 值写错会导致全量 404 且无提示
这是最常踩的坑：浏览器对非法 href 静默丢弃整个 <base> 标签，你根本看不到报错，但所有 src="js/app.js" 都变成请求当前页面所在路径下的文件。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误写法：
<base href="dist/">（缺协议或/开头）、<base href="../public/">（含..）、<base href="/myapp">（结尾缺/，Firefox 会截断） - ✅ 正确写法：
<base href="https://cdn.example.com/v2.4/">或<base href="/myapp/">（注意结尾斜杠） - 验证方式：打开页面后，在控制台执行
document.baseURI，返回值必须是你期望的完整 URL，且以/结尾
最容易被忽略的是：CSS 里的 url() 函数也受 <base> 影响，但 JS 的 fetch()、import()、new Worker() 完全不受控——它们始终基于当前页面 URL 或模块解析规则，和 <base> 无关。
