base href必须是绝对URL或以/开头的根相对路径，否则标签被静默忽略；必须置于head最前且唯一，仅影响其后HTML中纯相对路径（如src/href），对JS/CSS内路径、根相对及绝对URL无效。
base href 必须是绝对 URL 或以 / 开头的根相对路径
浏览器对 <base> 的 href 值校验非常严格：只要不是以 http://、https://、// 或 / 开头，整个标签就会被静默忽略——不报错、不警告，但所有相对路径仍按当前页面 URL 解析，上线后批量 404。
常见错误写法：href="assets/"、href="../static/"、href="cdn/v2"、href="https://example.com"（结尾缺斜杠）。
-
href="https://cdn.example.com/v3/"✅ 最稳妥，协议+域名+版本路径，CDN 场景首选 -
href="/myapp/"✅ 合法根相对路径，结尾斜杠不能少，否则 Firefox/Opera 可能截断成/myappcss/ -
href="//cdn.example.com/v3/"✅ 协议相对，自动继承当前页 http/https，适合混合协议环境
base 标签必须放在 <head> 最前面且只能有一个
<base> 影响的是 HTML 解析器对后续标签中相对 URL 的初始解析逻辑。它只对它之后出现的相对路径生效，顺序错了等于没写。
错误示例：<head><title>Page</title><base href="/static/"></head> —— <title> 不受影响，但更重要的是，如果之前已有 <link rel="stylesheet" href="main.css">，那这个 CSS 就已经按原始页面 URL 解析完了，<base> 对它完全无效。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 正确位置：
<head><base href="..."><title>...</title><link><script></head> - 多个
<base>？只有第一个生效，其余被静默丢弃；SSR 模板拼接或 Vue/React 组件内动态插入极易重复注入 - 放在
<body>里？浏览器直接忽略，控制台通常无提示
哪些路径受 base 控制，哪些完全不受影响
<base> 是 HTML 解析层的规则，不是运行时全局代理。很多你以为它能管的，其实根本不管。
✅ 真正受影响的（HTML 属性中的纯相对路径）：<img src="logo.png">、<script src="app.js">、<link href="style.css">、<a href="about.html">、CSS 文件内的 background: url(avatar.jpg)（注意：这是 HTML 解析时计算的，不是 CSS 引擎自己 resolve）
❌ 完全不受影响的：
- JS 中的
fetch('./api/data.json')、import('./utils.js')、new Worker('./worker.js') - CSS 文件内的
@import "reset.css"（仍以该 CSS 文件自身位置为基准） - 根相对路径：
<img src="/admin/frame.html">、<iframe src="/static/logo.svg"> - 绝对 URL：
<script src="https://cdn.com/app.js"> <img srcset="logo-2x.png 2x">
SPA 项目中用 base 要格外小心
单页应用部署在子路径（如 https://example.com/admin/）时，<base href="/admin/"> 确实能统一修正 HTML 中的相对资源路径，但它会干扰前端路由行为——尤其是 <a href="user"> 这类链接，会被解析为 /admin/user，而路由库可能期望的是相对路径或 history.pushState 的语义。
- Vue Router / React Router 默认不依赖
<base>，它们通过base配置项（非 HTML 标签）处理子路径，二者不要混用 - 构建工具（Vite、Webpack）通常更推荐用
public/目录 +base配置生成静态资源路径，而非靠 HTML<base>补救 - 若必须用，确保
<base>的值与路由base配置一致，且测试所有<a>跳转和表单提交行为
最易被忽略的一点：无论你设了多“完美”的 <base href="/v2/">，JS 里的 import('./routes/index.js') 和 CSS 里的 @import "vars.css" 依然各自按文件物理位置解析——这部分路径问题，<base> 一概不管，得靠构建配置或手动调整。
