HTML5中Base标签设定页面相对路径的全局基准

时间：2026-07-23 16:45:54 编辑：袖梨来源：一聚教程网

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

Base 标签用于统一指定页面中所有相对 URL 的解析基准地址，它影响链接（a）、图片（img）、脚本（script）、样式表（link）、表单提交（form）等元素的相对路径行为。

HTML5 规范要求 <base> 必须位于 <head> 内，且整个文档中最多只能有一个。若出现多个，只有第一个生效；若放在 <body> 中，浏览器会忽略它。

设置 href 后，所有相对路径（如 img/src="logo.png"）都会以该地址为起点拼接。它支持绝对 URL 和协议相对 URL，但不支持纯路径（如 href="assets/"）——这种写法会相对于当前页面 URL 解析，容易出错。

配合 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 的设置

在 Vue、React 等 SPA 中，如果用 history 模式且部署在子路径（如 https://example.com/myapp/），需配置 base 保证资源加载和路由匹配一致。否则可能报 404 或跳转异常。