HTML中base标签设置网页基础URL完整教程-html教程-PHP中文网

标签设错会导致全站相对路径404且浏览器静默忽略：仅http://、https://、//或/开头且根相对路径必须结尾带/才生效，必须置于最前且唯一，仅影响html解析阶段的src/href等相对url。

html中base标签设置网页基础url完整教程

<base> 标签不是“可选技巧”，而是 HTML 解析器对相对 URL 的唯一全局控制开关。设错就全挂，浏览器还不报错——你只会看到一堆 404，却找不到源头。

为什么`<base href="assets/">`一定失效

浏览器只接受两种合法的 href 值：以 http://、https:// 或 // 开头的绝对 URL，或以 / 开头的根相对路径（必须以斜杠结尾）。其他写法全部静默忽略。

<base href="assets/"> → 缺协议和根路径，被忽略
<base href="../static/"> → 含 ..，不合法，被忽略
<base href="/myapp"> → 结尾没斜杠，Firefox 会截断成 /myappcss/ 类错误
<base href="https://cdn.example.com/v2"> → 同样缺尾部斜杠，logo.png 变成 https://cdn.example.com/v2logo.png

`<base>` 必须放在最前面，且只能有一个

HTML 解析是流式的，<base> 的作用范围仅限于它之后出现的所有相对 URL 属性。一旦解析过某个 <link href="style.css">，再塞个 <base> 就完全无效。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

正确顺序：<base href="/app/"> → <title></title> → <link href="main.css">
错误顺序：<link href="main.css"> → <base href="/app/"> → 此时 main.css 已按原始页面 URL 解析完毕
多个 <base>：只有第一个生效，控制台可能输出 Multiple base elements detected. Only the first one is used.
JavaScript 动态插入（如 document.head.appendChild()）：解析阶段早已结束，完全无效

哪些地方受 `<base>` 影响，哪些根本不受控

它只在 HTML 解析阶段重写 src、href、action 等属性中的相对 URL，不穿透运行时逻辑。

✅ 受影响：<img src="icon.svg">、<script src="app.js"></script>、<link href="theme.css">、<a href="about.html"></a>、CSS 中的 background: url(avatar.jpg)
❌ 不受影响：fetch('./api/data.json')、import('./utils.js')、new Worker('./worker.js')、CSS 中的 @import "reset.css"
⚠️ 半受影响：document.baseURI 返回设置值，可用于构造 URL（如 new URL('data.json', document.baseURI)），但 window.location 和 document.URL 完全不变

SPA 部署在子路径时，`<base href="/subpath/">` 和前端路由必须配对

Vue Router 的 base: '/subpath/' 和 React Router v6+ 的 <router basename="/subpath"></router> 是独立配置项，和 <base> 没有自动联动。漏掉任一，就会出问题。

只设 <base href="/subpath/"> 但没配路由 base：点击链接跳到 /home 而不是 /subpath/home
只配路由 base 但没设 <base>：JS chunk 加载失败，app.js 请求变成 /subpath/app.js，但服务器返回 404（因为资源实际在 /app.js）
微前端场景下，子应用同时设了 Webpack publicPath 和 <base href="/subpath/">：路径可能被拼两次，变成 /subpath/subpath/js/app.js

最易被忽略的点：CSS 中的 url() 确实受 <base> 影响，但 @import 不受影响；document.baseURI 可用，但 window.location.origin 不能替代它；本地用 file:// 协议时，<base href="/dist/"> 行为在不同浏览器中不一致——这些细节不验证，上线后就是静默故障。