深入剖析HTML中base标签的运行原理-html教程-PHP中文网

标签仅在 html 解析时对后续纯相对 url 做一次拼接，不参与 js 执行、不修改 window.location、不接管 fetch 或 import；必须位于文档顶部且唯一，仅影响、、等标签中的纯相对路径。

深入剖析html中base标签的运行原理

<base> 标签不是路径代理，它只在 HTML 解析器逐行读取文档时，对后续出现的纯相对 URL 做一次拼接重定向——拼完就丢，不参与 JS 执行、不修改 window.location、不接管 fetch 或 import。

浏览器根本不校验你写的值是否“合理”，只做字符串前缀匹配。只要 href 值不以这四类开头，整条 <base> 就被跳过，控制台零提示。

<base href="static/"> → 无效：缺协议或根斜杠，src="logo.png" 仍按当前页面 URL 拼
<base href="/myapp"> → 有风险：结尾没 /，Firefox 可能截成 /myappcss/，导致 style.css 请求错位
<base href="https://cdn.example.com/v3/"> → 推荐：绝对 URL，部署和 CDN 场景下最可控
<base href="//cdn.example.com/v3/"> → 可用但慎用：协议相对，在部分旧环境（如某些企业内网代理）可能降级失败

HTML 解析是单向、自上而下的过程。<base> 的作用范围仅限于它之后声明的标签。放错位置，等于没写。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

放在 <title></title> 或 <meta> 后面 → 已解析的 <link href="main.css"> 不受影响
放在里 → 浏览器直接忽略，无警告
重复声明两个 <base> → 控制台提示 Multiple base elements detected. Only the first one is used.，第二个被丢弃
SSR 模板中 header 和 page 分别渲染一个 <base> → 只有 header 的生效，page 的被静默吞掉

<base> 只改写 HTML 解析阶段硬编码在标签上的纯相对路径（即不以 /、: 或协议开头的字符串），不是全局 URL 重写器。

✅ 真正受影响：<img src="icon.png">、<script src="app.js"></script>、<link href="style.css">、<form action="submit.php"></form>、CSS 文件中 background: url(avatar.jpg)（注意：这是 HTML 解析时计算的，不是 CSS 解析时）
❌ 完全不受影响：fetch('./api/user')、import('./utils.js')、new Worker('./worker.js')、@import "reset.css"、<iframe src="/admin/frame.html"></iframe>、document.createElement('img').src = 'logo.png'
⚠️ 半受影响：document.baseURI 返回 <base href> 的值，可用于 new URL('data.json', document.baseURI)；但 window.location 和 document.URL 完全不变

Vue Router 的 base: '/subpath/'、HTML 中的 <base href="/subpath/">、Webpack/Vite 的 publicPath 或 base 配置，三者若不一致，就会出现资源 404 或路由跳转错位。

只设 <base href="/subpath/">，没配 Vue Router base → router.push('/home') 跳到 /home（根路径），不是 /subpath/home
只设 Vue Router base，没设 <base> → <script src="index.js"></script> 请求 /index.js，实际应为 /subpath/index.js，404
Vite 构建已设 base: '/subpath/'，又手动加 <base href="/subpath/"> → 资源路径可能被拼两次，变成 /subpath//subpath/js/app.js
Service Worker 缓存策略若依赖 self.location.origin + '/subpath/'，但 HTML 没配 <base> → 预缓存路径错位，离线时资源加载失败