base标签用于统一指定页面中所有相对url的解析基准地址,必须置于head内且仅能出现一次;href属性决定根地址,支持绝对url和协议相对url,不支持纯路径;target属性可统一控制a和form元素的打开方式;spa中需与前端路由及构建工具配置保持一致。

Base 标签用于统一指定页面中所有相对 URL 的解析基准地址,它影响链接(a)、图片(img)、脚本(script)、样式表(link)、表单提交(form)等元素的相对路径行为。
base 标签必须放在 head 中且仅能出现一次
HTML5 规范要求 <base> 必须位于 内,且整个文档中最多只能有一个。若出现多个,只有第一个生效;若放在 中,浏览器会忽略它。
- 正确写法:
<base href="https://example.com/assets/"> - 错误写法:
<base href="/static/">(被忽略) - 错误写法:在同一个页面中写两个
<base>(第二个无效)
href 属性决定相对路径的根地址
设置 href 后,所有相对路径(如 img/src="logo.png")都会以该地址为起点拼接。它支持绝对 URL 和协议相对 URL,但不支持纯路径(如 href="assets/")——这种写法会相对于当前页面 URL 解析,容易出错。
- 推荐:
<base href="https://cdn.example.com/v1/">(明确、可控) - 慎用:
<base href="/static/">(依赖当前域名和协议,跨环境易失效) - 避免:
<base href="assets/">(相对当前页路径,动态页中结果不可预测)
target 属性可统一控制链接打开方式
配合 target 属性(如 target="_blank"),可以让所有带 href 的 a 标签默认在新窗口打开,无需逐个添加。注意:该行为只影响 a 和 form 元素,不影响其他标签。
- 示例:
<base href="https://docs.example.com/" target="_blank"> - 效果:所有
<a href="guide.html"></a>都等价于<a href="https://docs.example.com/guide.html" target="_blank"></a> - 注意:已显式声明
target的链接会覆盖 base 的设置
使用 base 要特别注意单页应用(SPA)和前端路由
在 Vue、React 等 SPA 中,如果用 history 模式且部署在子路径(如 https://example.com/myapp/),需配置 base 保证资源加载和路由匹配一致。否则可能报 404 或跳转异常。
- Webpack/Vite 构建时,需同步设置
publicPath或base配置项 - HTML 中应写:
<base href="/myapp/">(结尾斜杠不能省) - Vue Router 示例:
createRouter({ history: createWebHistory('/myapp/') })
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











