未设<base>时，所有相对URL均以当前页面完整URL为基准解析；如当前页为https://example.com/blog/post-123/，则<img src="avatar.jpg">解析为https://example.com/blog/post-123/avatar.jpg。
没设 <base> 时，所有相对 URL 都以当前页面完整 URL 为基准解析——这是浏览器默认行为，不是“无规则”，而是有明确定义的 fallback。
当前页面 URL 就是默认 base href
浏览器在解析 src、href、action 等属性中的相对路径时，若未遇到有效的 <base href="...">，就直接拿 window.location.href 当作基准。比如：
- 当前页是
https://example.com/blog/post-123/，<img src="avatar.jpg">→ 解析为https://example.com/blog/post-123/avatar.jpg - 当前页是
https://example.com/admin/users?id=5，<link href="style.css">→ 解析为https://example.com/admin/users?id=5/style.css（注意 query 参数也被保留在路径中） - 当前页是
file:///Users/me/app/index.html（本地双击打开），<script src="main.js">→ 解析为file:///Users/me/app/main.js
这个过程不依赖服务器配置或构建工具，纯客户端行为，且所有现代浏览器一致。
哪些相对写法会受此规则影响
只有明确写成“不带协议、不带斜杠开头”的路径才走此规则：
立即学习“前端免费学习笔记（深入）”；
- ✅
src="logo.png"、href="api/data.json"、action="../login"—— 全部按当前页面 URL 解析 - ✅
href="./about.html"中的./不改变基准，只是显式强调“当前目录” - ❌
href="/static/main.css"是根相对路径，跳过当前页路径，直接拼到域名后 - ❌
href="https://cdn.example.com/app.js"是绝对 URL，完全不参与基准计算
CSS 里的 url(cover.jpg) 同样适用该规则；但 @import "reset.css" 不受影响——它走 CSS 自身的解析逻辑，和 HTML 的 base 无关。
没设 base 但页面出 404 的常见原因
你以为“没设 base 就不会错”，其实很多 404 正是因为没设 base + 路由结构变化导致的：
- SPA 部署到子路径（如
/myapp/）但 HTML 没配<base href="/myapp/">→src="js/chunk.abc.js"仍按根路径请求/js/chunk.abc.js，而实际资源在/myapp/js/... - 后端渲染模板时，页面 URL 是
/product/123，但 JS 动态加载的图片用fetch('./images/photo.jpg')—— 这个./是 fetch 的相对规则，和 HTML base 无关，但开发者常误以为它也受 base 控制 - 开发时用
http://localhost:3000/，上线后变成https://prod.example.com/myapp/，所有硬编码的相对路径突然全部错位
关键点：base 标签只管 HTML 属性里的相对 URL，不管 JS 里的 fetch、import、new URL()，也不管 CSS @import 或 iframe src。
什么时候必须手动加 base href
不是“推荐加”，而是“不加就会坏”的场景：
- 前端路由使用子路径部署（Vue Router 的
base: '/admin/'或 React Router 的<BrowserRouter basename="/shop">）→ 对应 HTML 必须同步加<base href="/shop/">，否则<script src="bundle.js">404 - 资源托管在 CDN，且不想在每个
src里写完整域名 → 加<base href="https://cdn.example.com/v2/"> - 微前端主应用加载子应用 HTML，子应用资源路径需统一前缀 → base href 是最轻量的路径重写方式
最容易被忽略的是结尾斜杠：/myapp 和 /myapp/ 在 Firefox 中行为不同，前者可能被截断成 /myappcss/，务必带尾部斜杠。
