base标签必须为绝对URL或以/开头且结尾带斜杠的根相对路径，否则静默失效；仅影响HTML解析阶段的相对路径属性，且须置于head内唯一且靠前位置。
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> 和 <form> 生效，但作用范围是全局的：只要没显式写 target，就按 <base target="..."> 执行。这意味着页脚备案链接、第三方 UI 组件里的跳转、甚至内部管理后台的按钮，都会被强制新窗口打开——你根本没意识到它们也被卷进去了。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 设成
_blank却没配rel="noopener"：老浏览器中可能泄露window.opener，存在安全风险 -
<base target="_blank">和前端路由共存时：React Router 或 Vue Router 的<router-link>底层仍是<a>，若没显式加target="_self"，点击会跳出 SPA 上下文，整个页面刷新 -
<iframe src="page.html">、<script src="...">>、<img src="...">>完全不受target影响，别指望它控制资源加载方式
base 标签只在 HTML 解析阶段生效，JS/CSS 动态路径完全绕过
<base> 是个“一次性”机制：它只在浏览器解析 HTML 文档时，重写那些硬编码在标签属性里的纯相对路径（即不以 /、: 或协议开头的值）。一旦页面加载完成，它就不再参与任何后续路径计算。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
明确受影响的场景：
<img src="logo.png"><link href="style.css"><script src="index.js"><form action="login.php">- 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> 必须出现在 <head> 内，且只能有一个。如果写了两个，只有第一个生效；如果放在 <body> 里，浏览器直接忽略它。更关键的是：它应尽可能靠前——最好在 <meta charset> 之后、其他依赖相对路径的 <link> 或 <script> 之前。否则，像 <link rel="stylesheet" href="main.css"> 这类标签，在解析时还没读到 <base>，就会按当前页面 URL 解析路径。
典型错误写法：
-
<body><base href="/static/"></body>（被忽略） -
<head><title>App</title><base href="/app/"><link href="style.css"></head>（style.css没走 base） -
<head><base href="/app/"><base href="https://cdn.example.com/"></head>（第二个无效）
真正起效的前提，是它既合法、又及时、还唯一——三者缺一不可。很多线上 404 问题，查到最后都是 <base> 被悄悄跳过了。
