HTML中base标签的书写格式与基本规范-html教程-PHP中文网

base href必须是绝对url（如https://cdn.example.com/v3/）或根相对路径（如/myapp/），否则浏览器静默忽略；它须置于最前且唯一，仅影响html属性中纯相对路径（如src、href），不作用于js/css运行时路径。

html中base标签的书写格式与基本规范

base href 必须是绝对 URL 或根相对路径，否则浏览器静默忽略

浏览器只认以 https://、http://、// 或 / 开头的 href 值；其他写法（如 static/、../assets、%PUBLIC_URL%/）整条 <base> 标签被丢弃——控制台无报错，但所有 src="logo.png" 都退回到按当前页面 URL 解析，上线后批量 404。

常见无效写法：

href="assets/"（缺协议和根斜杠）
href="../static"（含 ..，不合法）
href="/myapp"（结尾没斜杠，Firefox/Opera 可能截断为 /myappcss/）
href="https://example.com"（结尾没 /，同上风险）

✅ 推荐写法：

<base href="https://cdn.example.com/v3/">（绝对 URL，部署可控）
<base href="/myapp/">（根相对路径，结尾必须带斜杠）
<base href="//cdn.example.com/v3/">（协议相对，自动继承当前协议）

base 标签必须放在最顶部且只能有一个

<base> 的作用是在 HTML 解析阶段重置后续所有相对 URL 的基准起点，所以它必须是中第一个元数据类标签。放错位置或重复声明，直接失效或静默降级。

典型错误场景：

<base href="/static/">（被浏览器忽略）
<title>My App</title> <base href="/static/">（<title></title> 已先解析，<base> 对它无效，且部分浏览器可能跳过已解析的 <link>）
SSR 模板拼接时 header 和 page 各 render 一个 <base>（只有第一个生效，控制台提示 Multiple base elements detected. Only the first one is used.）

正确顺序示例：

  <base href="/myapp/"><title>My App</title><link rel="stylesheet" href="main.css"><script src="app.js"></script>

哪些属性真受影响，哪些完全不管

<base> 只在 HTML 解析阶段起作用，不是全局路径代理。它只改写硬编码在标签属性里的**纯相对路径**（即不以 /、: 或协议开头的字符串），对运行时 JS 行为毫无影响。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

✅ 明确受影响：

<img src="logo.png">
<link href="style.css">
<script src="index.js"></script>
<form action="login.php"></form>
CSS 中的 background: url(avatar.jpg)

❌ 完全不受影响：

fetch('./api/user')
import('./utils.js')
new Worker('./worker.js')
CSS @import "reset.css"
<iframe src="page.html"></iframe>（src 是动态加载，不走 <base>）

⚠️ 半受影响：document.baseURI 返回 <base href> 的值，可用于构造 URL（如 new URL('data.json', document.baseURI)），但 window.location 和 document.URL 完全不变。

SPA 部署时 base href 和前端路由必须协同配置

Vue Router / React Router v6+ 的 base 配置项和 HTML 的 <base href="/subpath/"> 是两套独立机制，不自动同步。只设一个，另一个大概率出问题。

关键点：

HTML <base href="/subpath/"> 是为了让 <script src="chunk.js"></script> 正确加载，否则 chunk 文件 404
Vue Router 的 createRouter({ base: '/subpath/' }) 是为了让 router.push('/home') 跳转到 /subpath/home，而不是根路径
Service Worker 若缓存策略依赖 self.location.origin + '/subpath/'，而 HTML 没配 <base>，则预缓存路径错位
微前端子应用若同时设了 Webpack publicPath 和 <base>，资源路径可能被拼两次，变成 /subpath/subpath/js/app.js