base href必须置于最前面且唯一，仅对之后html属性中的纯相对url生效；href须为绝对url或结尾带斜杠的根相对路径，否则静默失效；不影响css/js内部路径。
base href 必须写在 最前面，否则无效
浏览器只在 HTML 解析初期读取 <base>，且仅对它之后出现的相对 URL 生效。如果把它放在 <title></title>、<link> 或 <script></script> 后面，那些标签里的 href 或 src 仍按当前页面 URL 解析 —— 很可能全部 404。
常见翻车点：
-
里写<base href="/static/">→ 浏览器直接忽略 - SSR 模板拼接时，header 和 page 都 render 了一个
<base>→ 只有第一个生效，控制台提示Multiple base elements detected. Only the first one is used. - 用 JavaScript 动态插入：
document.head.appendChild(baseEl)→ 已解析的元素不会重算，新创建的元素才受影响
href 值必须是绝对 URL 或根相对路径，结尾带斜杠
浏览器会静默丢弃非法 href 值，不报错，但 <base> 完全失效，退回到用当前页面 URL 当基准 —— 这是上线后批量资源 404 的最常见原因。
合法写法：
-
href="https://cdn.example.com/v3/"（绝对 URL，推荐） -
href="/myapp/"（根相对路径，结尾斜杠不能少；Firefox 会把/myapp截成/myappcss/） -
href="//cdn.example.com/v3/"（协议相对，自动继承 http/https）
无效写法：
-
href="assets/"（相对路径，无协议也无开头斜杠） -
href="../static/"（含..，浏览器直接丢弃） -
href="%PUBLIC_URL%/"（构建未替换，发到浏览器就是字面量字符串）
base 只影响 HTML 属性中的相对 URL，不穿透到 CSS/JS 内部
这是最容易误判的一点：设了 <base href="/cdn/">，不代表 CSS 里的 url(logo.png) 就会变成 /cdn/logo.png。它根本不管这些。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
✅ 真正受影响（HTML 解析阶段拼接）：
<img src="icon.svg"><script src="bundle.js"></script><link href="main.css"><form action="submit.php"></form>- 内联 style 中的
background: url('avatar.jpg')（部分浏览器行为，不可依赖）
❌ 完全不受控（仍按各自文件位置或当前域名解析）：
- CSS 文件内的
url(logo.png)或@import "reset.css" - JS 中的
import('./utils.js')、fetch('./data.json')、new Worker('./worker.js') -
window.location、document.URL不变
target="_blank" 会全局覆盖，但有安全风险
<base target="_blank"> 不只影响 <a></a>，还会作用于所有未显式声明 target 的 <form></form>、<link rel="preload">（某些浏览器），甚至第三方组件里的隐藏链接。
更关键的是：没有 rel="noopener" 的 target="_blank" 会暴露 window.opener，存在安全隐患。
建议：
- 避免用
<base target="_blank">统一设置，改用显式声明<a href="..." target="_blank" rel="noopener"></a> - 如果必须用
target，至少补上rel="noopener"（href属性仍是必需的，否则target在部分旧浏览器中不生效）
真正难的不是写对 <base>，而是确认它生效后，哪些地方没被它管到 —— 比如 CSS 里的 url()、JS 里的 fetch()，这些都得单独处理。部署前用 document.baseURI 检查值是否符合预期，再逐个验证资源加载路径，比事后排查 404 快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
