HTML中Base标签的作用及其在多级目录下的表现-html教程-PHP中文网

标签仅在 html 解析阶段生效，不改写 url 也不影响 js 运行时；无效 href 值（如无协议、含 ..、结尾缺 /）会被静默忽略，导致相对路径回退至页面 url 解析，引发高 404 风险。

html中base标签的作用及其在多级目录下的表现

<base> 标签只在 HTML 解析阶段生效，它不重写 URL，也不影响 JS 运行时行为；如果你写了无效的 href 值，浏览器会静默忽略整条 <base>，后续所有相对路径仍按当前页面 URL 解析——404 风险极高，且毫无提示。

浏览器只接受以 http://、https://、// 或 / 开头的 href 值。其他写法一律被丢弃：

href="assets/" → 缺协议和域名，被忽略
href="../css/" → 含 ..，被忽略
href="https://example.com" → 结尾没 /，Firefox/Opera 会截断路径（如 css/app.css 变成 css/app.css 被拼成 https://example.comcss/app.css）
href="/subapp" → 结尾没 /，同上风险；正确应为 href="/subapp/"

<base> 只改写 HTML 中纯相对路径（即不以 /、: 或协议开头）的初始解析逻辑：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

✅ 受影响：<img src="logo.png">、<link href="style.css">、<a href="about.html"></a>、<form action="login.php"></form>、CSS 中的 background: url(avatar.jpg)
❌ 完全不受：fetch('./api/user')、import('./utils.js')、new Worker('./worker.js')、@import "reset.css"、<iframe src="page.html"></iframe>
⚠️ 半受影响：document.baseURI 返回 <base href> 的值，可用于构造 URL（如 new URL('data.json', document.baseURI)），但 window.location 和 document.URL 完全不变

SPA 部署在子路径（如 https://example.com/a/b/c/）时，<base href="/a/b/c/"> 和前端路由配置必须严格对齐：

Vue Router / React Router v6+ 必须显式设 base: '/a/b/c/'，否则 router.push('/home') 会跳到根路径
Webpack 的 publicPath 和 HTML 的 <base href> 若同时配置且值相同，资源路径可能被拼两次（如 /a/b/c//a/b/c/js/app.js）
Vite 构建时若用 base: '/a/b/c/'，HTML 中就不该再手动写 <base href="/a/b/c/">，否则重复
Service Worker 缓存策略若依赖 self.location.origin + '/a/b/c/'，而 HTML 没配 <base>，预缓存路径就错位