### [base 标签统一相对路径：提升多页开发效率](https://www.huociguo.com/article/1879)

**Published:** 2026-10-04T03:22:48

**Author:** 米了

**Excerpt:** 标签重设页面所有相对 URL 的解析基准，置于 最前、全局唯一。合理使用能减少重复前缀、统一多页资源路径。 📊…

![base 标签统一相对路径示意](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-4792288.jpeg)

`base` 标签重设页面所有相对 URL 的解析基准，置于 `head` 最前、全局唯一。合理使用能减少重复前缀、统一多页资源路径。

📊 写法对照

| 场景  | 错误写法 | 正确写法 |
| --- | --- | --- |
| href 值 | `href='img/'` | `href='https://x.com/img/'` 或 `href='/img/'` |
| 位置  | 放在 `title` 之后 | 置于 `head` 最前 |
| 数量  | 多个 `base` | 仅一个 |
| 相对引用 | `<img src='a.jpg'>` | 自动拼成基准+a.jpg |
| JS 路径 | 期望被改写 | 不生效，仅影响 HTML 属性 |

🔍 生效范围

`base` 只改写 HTML 属性里的纯相对路径，如 `src`、`href`、`srcset`。绝对 URL、`/` 开头的根相对路径、以及 JS 运行时的 `fetch`、动态拼接字符串均不受影响。

⚠️ 静默失效点

href 不以 `/` 或协议开头时，浏览器按当前文档路径解析，结果未必符合预期，常见表现是所有相对资源 404。根相对路径需保证服务器存在对应目录。

📌 适用场景

站点资源集中挂在子目录（如 `/cdn/`）、或整站迁移到新域名前缀时，统一在 `head` 写入 `base` 可避免逐文件改路径。

**Tags:** base href, base 标签, 多页开发效率, 相对路径基准, 路径解析

**Categories:** HTML5

---