用 <base> 标签设置整个文档的基准 URL
HTML 中唯一能定义文档基础 URL 的方式就是 <base> 标签，它必须写在 里，且只生效一次（多个 <base> 时，只有第一个被浏览器解析）。
常见错误是把它放在 里，或者动态插入——这完全无效，浏览器只在初始解析 时读取它。
-
<base href="https://example.com/assets/">：所有相对路径（如<img src="logo.png" alt="HTML怎样定义文档的基础URL_HTML定义文档基础URL标签【标签】" >、<a href="page.html"></a>）都会自动拼接成https://example.com/assets/logo.png这类完整地址 -
<base target="_blank">：可统一设置所有<a></a>、<form></form>等标签的默认打开方式，但会覆盖单个链接的target属性 - 如果同时设
href和target，两个都生效；但不能只写<base target="_self">而不带href，否则target不起作用（部分旧浏览器行为不一致）
<base> 对资源加载和跳转的实际影响
它不改变 JavaScript 中的 window.location 或 document.URL，也不影响 CSS 里的 url()（CSS 中的相对路径仍以 CSS 文件自身位置为基准），但它会直接影响 HTML 解析器对所有相对 URL 的解析逻辑。
典型踩坑场景：
立即学习“前端免费学习笔记（深入）”；
- 单页应用（SPA）中，路由用
history.pushState切换路径后，用户刷新页面，浏览器按当前 URL 加载 HTML —— 如果该 HTML 里有<base href="/app/">，而服务器没把所有路由都 fallback 到 index.html，就会 404 - 本地开发时用
file://协议打开 HTML，<base href="https://cdn.example.com/">是合法的，但<base href="./static/">在file://下可能因路径解析规则不同而失效 -
<iframe src="about:blank"></iframe>内部的相对链接不受父页面<base>影响，子文档需自己定义
替代方案：什么时候不该用 <base>
当项目已用构建工具（如 Webpack、Vite）处理静态资源路径，或后端模板引擎（如 EJS、Jinja）能自动注入绝对路径时，硬加 <base> 反而容易造成路径重复或错乱。
更可控的做法：
- 用
<meta name="base-url" content="/app/">配合 JS 动态补全（仅用于业务逻辑，不影响原生资源加载） - 服务端渲染时，在每个链接生成阶段就拼好绝对路径，比如
<a href="%7B%7B%20url_for('static',%20filename='js/app.js')%20%7D%7D"></a> - CDN 场景下，直接在 HTML 模板里写完整 URL：
<script src="https://cdn.example.com/v1.2.3/main.js"></script>，比依赖<base>更透明
验证 <base> 是否生效的最快方法
打开浏览器开发者工具，在控制台运行：document.baseURI —— 它返回的就是当前生效的基础 URL。如果返回的是当前页面 URL，说明 <base> 没写对位置、被忽略，或根本没写。
另一个信号是检查网络面板：点开一个相对路径的请求（比如 logo.png），看它的「Initiator」列是否指向 HTML 文档，且请求地址是拼接后的完整路径。如果不是，大概率是 <base> 未生效或被其他机制覆盖。
最麻烦的情况是：它生效了，但你忘了某些地方本该用绝对路径（比如 API 接口地址写成 /api/user），结果被 <base href="https://cdn.example.com/"> 错误地变成 https://cdn.example.com/api/user —— 这种问题不会报错，只会静默失败。
