HTML中base标签在静态网站中的配置技巧-html教程-PHP中文网

base href必须是绝对url（如https://cdn.example.com/v3/）或根相对路径（如/blog/），且结尾必须带斜杠，否则浏览器静默忽略导致资源404；必须置于最顶部且唯一，仅影响后续html中纯相对路径（如src、href），对js/css动态路径无效。

html中base标签在静态网站中的配置技巧

base href 必须是绝对 URL 或以 / 开头且结尾带斜杠的根相对路径

浏览器只认 href 值以 https://、http://、// 或 / 开头，否则整条 <base> 被静默丢弃——控制台无提示，但所有 <img src="logo.png"> 都退回到按当前 HTML 页面 URL 解析，上线后批量 404。

常见无效写法：href="assets/"（缺协议和根路径）、href="../static/"（含 ..）、href="/myapp"（结尾没斜杠，Firefox 会截断成 /myappcss/）。

✅ 推荐配置方式：

<base href="https://cdn.example.com/v3/">：绝对 URL，部署可控，跨环境稳定
<base href="/blog/">：根相对路径，适用于 GitHub Pages、Netlify 子目录等静态托管场景，但必须确保结尾有斜杠
<base href="//cdn.example.com/v3/">：协议相对，适合混合 HTTP/HTTPS 环境，但需确认 CDN 支持双协议

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

<base> 的作用是重置 HTML 解析器对后续所有相对 URL 的基准起点，这个动作仅在解析阶段生效，且只影响它之后出现的标签。放错位置等于没写。

典型错误：

<base href="/static/">：被浏览器完全忽略
SSR 模板中 header 和 page 各 render 一个 <base>：只有第一个生效，控制台可能提示 Multiple base elements detected. Only the first one is used.
<title>...</title> <base href="/app/">：<title></title> 在 <base> 前，它不影响 <title></title>，但会影响其后的 <link>、<script></script> 等

正确顺序示例：<base href="/blog/"> <title>My Blog</title> <link rel="stylesheet" href="style.css">

静态站点生成器中避免硬编码，用模板变量注入

直接写死 <base href="/blog/"> 会导致换部署路径时要改源码。更可靠的做法是让构建流程或模板引擎动态注入。

html-ppt-to-pdf

将使用 `

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

下载

操作要点：

Hugo 用户：在中写 <base href="%7B%7B%20.Site.BaseURL%20%7D%7D">，确保 config.toml 中 baseURL = "https://example.com/blog/" 或 baseURL = "/blog/"（结尾带斜杠）
Jekyll 用户：用 <base href="%7B%7B%20site.baseurl%20%7D%7D/">，并在 _config.yml 中设 baseurl: "/blog"（注意：Jekyll 不自动加尾斜杠，必须手动补）
Vite / Webpack 构建：通过 HtmlWebpackPlugin 的 templateParameters 注入 publicPath，模板中写 <base href="<%=%20htmlWebpackPlugin.options.publicPath%20%>">，并确保 publicPath 是以 / 开头或含完整协议

⚠️ 关键检查点：部署后打开控制台执行 document.baseURI，返回值必须与你预期一致；若仍是当前页面 URL，说明模板未替换或值不合法。

哪些资源受 base 影响，哪些完全不受

<base> 只在 HTML 解析阶段起作用，仅重写硬编码在标签属性里的纯相对路径（即不以 /、: 或协议开头的值）。

✅ 明确受影响：

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

❌ 完全不受影响：

fetch('./api/data.json')
import('./utils.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 完全不变——这点常被误用于 JS 路径拼接，结果出错。