值必须是绝对 URL 或以 / 开头的根相对路径，否则整条标签被静默忽略；它仅影响 中其后出现的 src/href 等纯相对路径属性，且只在 HTML 解析阶段生效。
base href 值必须是绝对 URL 或以 / 开头的根相对路径
浏览器只认 https://、http://、// 或 / 开头的 href 值，其他写法（如 assets/、../static/、%PUBLIC_URL%/）会被整条 <base> 标签静默忽略——不报错、不警告，但所有后续 src、href 仍按当前页面 URL 解析，上线后批量 404。
性能浪费就藏在这里：浏览器反复尝试拼接错误路径、触发多次 404、重试、降级 fallback，而你完全看不到提示。
-
https://cdn.example.com/v3/✅ 最稳妥，协议+域名+版本路径，CDN 场景首选 -
/myapp/✅ 合法根相对路径，结尾斜杠不可省（缺斜杠时 Firefox 可能截断为/myappcss/） -
//cdn.example.com/v3/✅ 协议相对，自动继承当前页 http/https，适合混合协议环境 -
static/❌ 无效，被丢弃，<img src="logo.png" alt="HTML怎么用base标签规范基准路径减少解析性能浪费" >退回到当前页路径解析
base 必须放在 最前面且只能有一个
<base> 的作用时机是 HTML 自上而下的解析阶段，它只影响其后出现的标签。放错位置 = 白写，而且浏览器几乎不报错。
常见翻车点：
立即学习“前端免费学习笔记（深入）”；
- 放在
<title></title>或<link>之后 → 这些资源已按原始页面 URL 解析完毕，<base>对它们完全无效 - 放进
→ 浏览器直接忽略，控制台通常无提示 - 服务端模板或组件内重复注入多个
<base>→ 只有第一个生效，Chrome 控制台会提示Multiple base elements detected. Only the first one is used. - 用 JS 动态创建并
appendChild()→ 解析阶段早已结束，完全无效，已加载的资源不会重算
哪些属性真受 base 影响，哪些只是“看起来像”
<base> 是 HTML 解析层规则，不是运行时全局代理。它只改写特定属性中“纯相对路径”（即不以 /、: 或协议开头）的初始拼接逻辑。
✅ 真正受影响（解析时重写基准）：
<img src="icon.png" alt="HTML怎么用base标签规范基准路径减少解析性能浪费" ><script src="app.js"></script><link href="style.css"><form action="submit.php"></form>- CSS 文件中的
background: url(avatar.jpg)（注意：这是 HTML 解析时计算的，不是 CSS 引擎自己 resolve）
❌ 完全不受影响（与 <base> 无关）：
-
fetch('./api/user')、import('./utils.js')、new Worker('./worker.js') - CSS 中的
@import "reset.css"（仍以 CSS 文件自身位置为基准） -
<img src="/admin/logo.png" alt="HTML怎么用base标签规范基准路径减少解析性能浪费" >（根相对路径）、<img src="https://cdn.com/logo.png" alt="HTML怎么用base标签规范基准路径减少解析性能浪费" >（绝对 URL） -
<img srcset="logo-2x.png 2x" alt="HTML怎么用base标签规范基准路径减少解析性能浪费" >（srcset不受控）
验证 base 是否生效的唯一可靠方式
别靠猜，也别只看页面是否“看起来正常”。打开开发者工具控制台，执行：
document.baseURI
返回值必须与你写的 <base href="..."> 中的值**完全一致**（包括协议、斜杠、大小写）。如果返回的是当前页面 URL，说明 <base> 已被静默忽略。
容易被忽略的关键点：
- 构建工具（如 Vite/Webpack）注入的
href值若含未解析变量（如%PUBLIC_URL%），实际输出为字符串而非真实路径，浏览器直接丢弃 - SPA 部署在子路径（如 GitHub Pages 的
https://user.github.io/repo/）时，用/作href会导致所有资源请求指向根域，必然 404 - CSS 内部的
url()虽然受<base>影响，但前提是该 CSS 是通过<link href="...">加载的；如果是<style></style>内联或 JS 注入的 CSS，则不走 HTML 解析路径，不受控
