HTML5中Base标签设定页面相对路径的全局基准
作者：袖梨
2026-07-23
base标签用于统一指定页面中所有相对URL的解析基准地址，必须置于head内且仅能出现一次；href属性决定根地址，支持绝对URL和协议相对URL，不支持纯路径；target属性可统一控制a和form元素的打开方式；SPA中需与前端路由及构建工具配置保持一致。
Base 标签用于统一指定页面中所有相对 URL 的解析基准地址，它影响链接（a）、图片（img）、脚本（script）、样式表（link）、表单提交（form）等元素的相对路径行为。
base 标签必须放在 head 中且仅能出现一次
HTML5 规范要求 <base> 必须位于 <head> 内，且整个文档中最多只能有一个。若出现多个，只有第一个生效；若放在 <body> 中，浏览器会忽略它。
- 正确写法：
<head><base href="https://example.com/assets/"></head> - 错误写法：
<body><base href="/static/"></body>（被忽略） - 错误写法：在同一个页面中写两个
<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 href="https://docs.example.com/guide.html" target="_blank"> - 注意：已显式声明
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/') })
