base href必须以/或协议开头，否则浏览器静默忽略；仅影响HTML中纯相对路径，对JS/CSS运行时路径无效；必须置于<head>最前且唯一，错位或动态插入均失效。
base href 必须以 / 或协议开头，否则浏览器静默忽略
浏览器只认 href 值以 http://、https://、// 或 / 开头的写法。写成 assets/、../static/、%PUBLIC_URL%/（未被构建工具替换时）——全都不生效，且不报错、不警告。结果是所有 src="logo.png" 仍按当前页面 URL 拼接，上线后批量 404。
常见合法写法：
-
href="https://cdn.example.com/v3/"：推荐用于 CDN 场景，协议、域名、路径全明确 -
href="/myapp/"：根相对路径，结尾斜杠不能少；Firefox 会把/myapp截断成/myappcss/导致样式请求错位 -
href="//cdn.example.com/v3/"：协议相对，自动继承当前页 http/https，适合混合协议环境
base 标签必须放在 <head> 最前面，且只能有一个
<base> 的作用是在 HTML 解析阶段重置后续所有相对 URL 的基准起点。它只对它之后出现的标签起效，放错位置等于没写。
典型错误：
立即学习“前端免费学习笔记（深入）”；
-
<head><link href="main.css"><base href="/app/"></head>：main.css已按原始页面 URL 解析完毕，不受控 - 放在
<body>里：浏览器直接忽略，无提示 - SSR 模板中 header 和 page 各 render 一个
<base>：只有第一个生效，控制台提示Multiple base elements detected. Only the first one is used. - 用 JS 动态插入（如
document.head.appendChild()）：解析阶段早已结束，完全无效
哪些路径受 base 影响，哪些根本不受控
<base> 只在 HTML 解析阶段改写“纯相对路径”（即不以 /、: 或协议开头的字符串），不是运行时代理，也不是全局重写器。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
✅ 明确受影响（HTML 属性中写的纯相对路径）：
<img src="icon.svg"><script src="bundle.js"><link href="theme.css"><form action="submit.php">- CSS 文件中
background: url(avatar.jpg)（注意：这是 HTML 解析时计算的路径，不是 CSS 运行时）
❌ 完全不受影响（JS/CSS 运行时行为）：
fetch('./api/data.json')import('./utils.js')new Worker('./worker.js')- CSS 中的
@import "reset.css" -
<img src="/admin/frame.html">（根相对路径，直接拼到域名，绕过<base>）
SPA 部署在子路径时，base 与前端路由、构建配置易冲突
比如部署在 https://example.com/a/b/c/，<base href="/a/b/c/"> 必须和框架路由、打包配置严格对齐，否则资源加载和跳转行为割裂。
关键风险点：
- Vue Router / React Router v6+ 不读
document.baseURI，必须显式传入base: '/a/b/c/' - Webpack 的
publicPath和手写的<base href="/a/b/c/">若值相同，资源路径可能被拼两次（如/a/b/c//a/b/c/js/app.js） - Vite 构建时已设
base: '/a/b/c/'，HTML 中就不该再手动加<base>标签 -
<a href="#">在<base href="/sub/">下会被解析为/sub/#section2，触发无意义页面重载（地址栏变灰、滚动回顶）
最常被忽略的是：浏览器对 href 值的校验极严，一个字符错（比如缺尾斜杠、多一个点、混进空格），整个标签就静默失效——而缓存可能还在加载旧资源，让你误以为“改了但没用”，其实是根本没生效。
