<base>标签会全局改变所有相对URL解析基准,包括的href和<form>的action,必须为绝对URL或根相对路径(以/开头且结尾带斜杠),置于<head>最前且唯一,否则静默失效。

base 标签会改变所有相对 URL 的解析基准,包括 <a> 的 href 和 <form> 的 action
只要页面中存在 <base href="...">,浏览器就会用它作为所有相对 URL 的“起点”,而不是当前页面 URL。这影响是全局且隐式的——你写 <a href="page.html">,实际跳转地址可能变成 https://example.com/static/page.html,哪怕当前页面在 /blog/post/ 下。
常见错误:base href 设置为相对路径或不带尾部斜杠
比如写成 <base href="static/"> 或 <base href="../api">,会导致后续相对 URL 解析异常:
-
<a href="login">可能被解析为https://site.com/login(正确),也可能变成https://site.com/static/login(意外) -
<form action="submit">提交目标可能指向错误路径,后端收不到请求 - 现代构建工具(如 Vite、Webpack)常自动生成
base,但若配置base: './'用于本地双击打开 HTML,部署到子路径时就会失效
form action 和 a href 的行为完全一致,但提交方法不影响 base 解析逻辑
<form method="POST" action="api/user"> 中的 api/user 仍按 <base href> 解析,和 <a href="api/user"> 完全等价。区别只在语义和 HTTP 方法,base 不参与方法判断。
注意以下几点:
立即学习“前端免费学习笔记(深入)”;
- 如果
action是绝对 URL(含协议或以/开头),<base>不生效 -
action=""表示“当前页面 URL”,不是空字符串拼接;它绕过<base>,直接提交回原地址 - JavaScript 动态设置
location.href或form.action时,赋值内容是否带协议决定是否受 base 影响
调试技巧:用 document.baseURI 和 getAttribute 确认生效的 base
运行时可通过 JS 快速验证:
console.log(document.baseURI); // 实际生效的 base 地址
console.log(document.querySelector('base')?.getAttribute('href'));容易被忽略的是:<base> 必须在 <head> 内,且**首个** <base> 生效,后续的会被忽略。多个 <base> 不叠加,也不报错,只是静默失效。



















