<base> 标签仅在 HTML 解析阶段重置纯相对路径解析起点，必须为绝对 URL 或根相对路径（结尾带 /），且须置于 <head> 最前、唯一；仅影响 src/href/action 等属性中的纯相对路径，不影响 fetch、import、根相对路径等；SPA 部署时需与路由及构建配置严格对齐。
<base> 标签不格式化路径，它只在 HTML 解析阶段重置纯相对路径的解析起点——写错一个字符、放错一个位置、混用运行时逻辑，资源就静默 404，且浏览器几乎不报错。
base href 值必须是绝对 URL 或根相对路径（结尾带 /）
浏览器只接受以 https://、http://、// 或 / 开头的 href 值。其他写法（如 assets/、../static/、%PUBLIC_URL%/）会被整条标签静默忽略，后续所有 <img src="logo.png"> 都退回到按当前页面 URL 解析，上线后批量 404。
-
<base href="/myapp/">✅ 合法，适用于部署在子路径的 SPA，结尾斜杠不可省（缺斜杠时 Firefox 可能截断为/myappcss/） -
<base href="https://cdn.example.com/v3/">✅ 推荐，协议+域名+路径明确，CDN 场景最可控 -
<base href="//cdn.example.com/v3/">✅ 协议相对，自动继承当前页 http/https，适合混合协议环境 -
<base href="static/">❌ 无效，被丢弃，无警告 -
<base href="/myapp">❌ 风险：结尾无/，CSS/JS 路径可能被错误拼接
base 标签必须放在 <head> 最前面且只能有一个
<base> 的作用时机是 HTML 自上而下的解析过程，它只影响其后出现的相对路径。顺序错了、位置错了、数量多了，等于没写。
- 必须在
<title>、<link>、<script>等任何依赖路径的标签之前，例如：<head><base href="/app/"><title>App</title><link href="style.css"></head> - 放在
<body>里 → 浏览器直接忽略，无提示 - 服务端模板或组件内重复注入多个
<base>→ 只有第一个生效，Chrome 控制台提示Multiple base elements detected. Only the first one is used. - 用 JS 动态创建并
appendChild()→ 解析阶段早已结束，完全无效
哪些属性真受 base 影响，哪些完全不受控
<base> 是 HTML 解析层规则，不是运行时全局代理。它只改写特定属性中“纯相对路径”（即不以 /、: 或协议开头）的初始拼接逻辑。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- ✅ 真正受影响：
<img src="icon.png">、<script src="app.js">、<link href="style.css">、<form action="submit.php">、CSS 文件中的background: url(avatar.jpg)（注意：这是 HTML 解析时计算的） - ❌ 完全不受影响：
fetch('./api/user')、import('./utils.js')、@import "reset.css"、<iframe src="/admin/frame.html">（根相对路径直接拼域名）、<img srcset="logo-2x.png 2x"> - ⚠️ 特别注意：
href="/admin"这类根相对路径根本不受<base>控制；fetch("api/data")会按<base>解析成/myapp/api/data，但你本意可能是发到后端 API —— 这类误用极易导致接口 404
SPA 部署时 base 和路由/构建配置必须严格对齐
硬塞一个 <base href="/subpath/"> 并不能让前端框架自动适配子路径。Vue Router、React Router v6+、Webpack、Vite 全部不读 document.baseURI，必须显式传入 base 参数，否则行为割裂。
- Vue Router：必须写
createRouter({ base: '/subpath/' })，否则router.push('/home')会跳到根路径 - React Router v6+：必须用
<Router basename="/subpath">，否则导航和匹配全部错位 - Webpack：若已设
publicPath: '/subpath/'，HTML 中再手动加<base href="/subpath/">→ 资源路径被拼两次（如/subpath//subpath/js/app.js） - Vite：若已设
base: '/subpath/'，HTML 中不应再手写<base>标签 - Service Worker：预缓存路径若依赖
self.location.origin + '/subpath/'，而 HTML 没配<base>，缓存清单就错位
最容易被忽略的是：CSS 中的 background: url(…) 看似在 CSS 文件里，其实是在 HTML 解析阶段由浏览器计算路径的，它真受 <base> 影响；而 @import 和 fetch() 看似“相对”，却完全绕过它 —— 这种不一致恰恰是调试时最耗时间的点。
