详解HTML中base标签的两个核心属性-html教程-PHP中文网

base标签必须为绝对url或以/开头且结尾带斜杠的根相对路径，否则静默失效；仅影响html解析阶段的相对路径属性，且须置于head内唯一且靠前位置。

详解html中base标签的两个核心属性

href 属性必须是绝对 URL 或根相对路径，否则静默失效

浏览器对 href 的校验非常严格：只接受以 http://、https://、// 开头的绝对 URL，或以 / 开头且**结尾带斜杠**的根相对路径。其他写法——比如 assets/、../static、https://example.com（缺末尾 /）——整条 <base> 都会被丢弃，不报错、不警告，但所有 img/src、link/href 会退回到按当前页面 URL 解析，上线后大面积 404 就从这儿来。

常见错误现象：

<base href="static/">：本地开发可能跑得通，部署到子路径如 https://a.com/myapp/ 后，src="js/app.js" 会解析成 https://a.com/js/app.js，而非预期的 https://a.com/myapp/js/app.js
<base href="/myapp">（缺末尾 /）：Firefox 和 Opera 会拼出 /myappjs/app.js，少了一个 /
<base href="%ASSET_BASE%">：服务端没替换变量，发给浏览器的是字面量字符串，href 值非法，<base> 被忽略

推荐写法：

<base href="https://cdn.example.com/v2.3/">（绝对 URL，跨环境稳定）
<base href="/myapp/">（根相对路径，部署路径变更时必须同步改）

target 属性只影响 a 和 form，但会无差别覆盖所有未声明 target 的元素

target 看似方便，实则容易误伤。它只对 <a></a> 和 <form></form> 生效，但作用范围是全局的：只要没显式写 target，就按 <base target="..."> 执行。这意味着页脚备案链接、第三方 UI 组件里的跳转、甚至内部管理后台的按钮，都会被强制新窗口打开——你根本没意识到它们也被卷进去了。

容易踩的坑：

设成 _blank 却没配 rel="noopener"：老浏览器中可能泄露 window.opener，存在安全风险
<base target="_blank"> 和前端路由共存时：React Router 或 Vue Router 的 <router-link></router-link> 底层仍是 <a></a>，若没显式加 target="_self"，点击会跳出 SPA 上下文，整个页面刷新
<iframe src="page.html"></iframe>、<script src="...">></script>、<img src="...">> 完全不受 target 影响，别指望它控制资源加载方式

base 标签只在 HTML 解析阶段生效，JS/CSS 动态路径完全绕过

<base> 是个“一次性”机制：它只在浏览器解析 HTML 文档时，重写那些硬编码在标签属性里的纯相对路径（即不以 /、: 或协议开头的值）。一旦页面加载完成，它就不再参与任何后续路径计算。

html-to-pptx-converter

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

下载

明确受影响的场景：

<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')、import.meta.url
CSS 中的 @import "reset.css"
document.createElement('script').src = 'dynamic.js'

注意：document.baseURI 会返回 <base href> 的值，可用于构造路径，如 new URL('data.json', document.baseURI)；但 window.location 和 document.URL 不变。

位置和数量是硬性限制，放错地方等于没写

<base> 必须出现在内，且只能有一个。如果写了两个，只有第一个生效；如果放在里，浏览器直接忽略它。更关键的是：它应尽可能靠前——最好在 <meta charset> 之后、其他依赖相对路径的 <link> 或 <script></script> 之前。否则，像 <link rel="stylesheet" href="main.css"> 这类标签，在解析时还没读到 <base>，就会按当前页面 URL 解析路径。

典型错误写法：

<base href="/static/">（被忽略）
<title>App</title> <base href="/app/"> <link href="style.css">（style.css 没走 base）
<base href="/app/"> <base href="https://cdn.example.com/">（第二个无效）

真正起效的前提，是它既合法、又及时、还唯一——三者缺一不可。很多线上 404 问题，查到最后都是 <base> 被悄悄跳过了。