base href必须是绝对URL或以/开头的根相对路径，否则浏览器静默忽略；须置于最前且唯一；仅影响HTML中纯相对路径（如src/href），对JS/CSS动态路径无效。
base href 必须是绝对 URL 或以 / 开头的根相对路径
浏览器只认以 http://、https://、// 或 / 开头的 href 值，其他写法（如 assets/、../static/、dist/）会被静默丢弃——不报错、不警告，但所有 src="logo.png" 都退回到按当前页面 URL 解析，上线后批量 404。
常见合法写法：
-
href="https://cdn.example.com/v3/"：最稳妥，协议+域名+版本路径全明确 -
href="/myapp/"：合法根相对路径，结尾斜杠不能少（/myapp在 Firefox 中可能被截断成/myappcss/） -
href="//cdn.example.com/v3/"：协议相对，自动继承当前页 http/https
错误示例：href="static/"、href="%PUBLIC_URL%/"（未被服务端替换就发到浏览器）、href="../public/"——全部失效。
base 标签必须放在 最前面且只能有一个
<base> 的作用是重置 HTML 解析器对“后续所有相对 URL”的基准起点，所以它必须是 中第一个元数据类标签。放错位置或重复声明，等于没写。
立即学习“前端免费学习笔记（深入）”；
正确顺序：<base href="/myapp/">
<title>App</title>
<link href="style.css">
典型翻车场景：
-
<link href="main.css"> <base href="/myapp/">→main.css已按原始 URL 解析完毕，不受控 -
<base href="/static/">→ 浏览器直接忽略 - SSR 模板中 header 和 page 各 render 一个
<base>→ 只有第一个生效，控制台提示Multiple base elements detected. Only the first one is used.
哪些路径受 base 控制，哪些完全不受控
<base> 只在 HTML 解析阶段起作用，影响的是属性值中**纯相对路径**（如 logo.png、js/app.js）的初始拼接逻辑，不是运行时代理。
✅ 明确受影响（src/href/action 中的相对路径）：
<img src="avatar.jpg" alt="HTML中base标签如何设置相对路径的基准地址" ><script src="main.js"></script><link href="theme.css">- CSS 中的
background: url(icon.png)（这是唯一穿透到 CSS 的情况）
❌ 完全不受影响（JS/CSS 运行时路径）：
fetch('./api/data.json')import('./utils.js')new Worker('./worker.js')- CSS 中的
@import "reset.css" -
<iframe src="page.html"></iframe>（它的src相对于 iframe 当前 URL）
预览环境动态设置 base 的正确姿势
你无法在页面加载后通过 JS 修改 <base> 来“动态重置”路径——DOM 构建完成后插入或修改它完全无效，已解析的资源不会重算，新创建的元素才受影响。
预览环境（如 /preview/v2/、/staging/）要改基准，必须在 HTML 被浏览器下载前就写对：
- 服务端模板（Express/Nunjucks）中用变量注入：
<base href="%7B%7B%20previewBase%20%7D%7D">，确保previewBase是绝对 URL（如https://preview.example.com/v2/）或合法根相对路径（如/preview/v2/） - Vite/Webpack 构建时，通过
base配置 + HTML 模板插值生成，避免硬编码 - 纯静态预览（GitHub Pages 子目录）：
<base href="/my-project/">，并确认所有src/href用的是纯相对路径（如js/app.js），而非../或assets/
验证是否生效：打开控制台执行 document.baseURI，返回值应与所设 href 一致；若仍 404，请优先检查 href 值是否非法、是否放错位置、是否结尾缺斜杠。
