base标签仅影响HTML解析阶段的纯相对路径（如logo.png），对含协议、//或/开头的URL完全无效；href值必须为绝对URL或根相对路径（结尾带/），否则静默失效，且必须置于最前、唯一存在。
base标签只改纯相对路径，对绝对URL完全没反应
浏览器根本不会用<base>去碰任何带协议、//或/开头的 URL。它只在 HTML 解析阶段扫描那些“光秃秃”的路径字符串——比如logo.png、app.js、style.css——然后把它们拼到base href指定的基准上。一旦 URL 里出现https://、//cdn、/css/，<base>就自动退场，不参与、不干预、不报错。
常见误判是以为加了<base href="/admin/">后，<img src="/assets/icon.svg" alt="HTML中base标签对绝对和相对URL的区别" >也会被重写成/admin/assets/icon.svg，其实不会。这个/assets/是根相对路径，直接按当前 origin 拼，<base>连看都不看一眼。
-
<img src="logo.png" alt="HTML中base标签对绝对和相对URL的区别" >→ 受影响（纯相对） -
<script src="bundle.js"></script>→ 受影响 -
<link href="/css/main.css">→ 不受影响（以/开头） -
<iframe src="https://api.example.com/frame"></iframe>→ 不受影响（含协议） -
<img srcset="logo-2x.png 2x" alt="HTML中base标签对绝对和相对URL的区别" >→ 不受影响（srcset不走 base 规则）
base href值写错，等于没写，而且不报错
浏览器对href值校验极严：必须以https://、http://、//或/开头，否则整条<base>被静默丢弃。你不会在控制台看到警告，但所有本该被接管的src、href都会退回到按当前页面 URL 解析，上线后批量 404。
典型错误写法包括：href="assets/"、href="../static/"、href="cdn/v2"、href="https://example.com"（结尾缺/）——这些全无效。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- ✅ 正确：
href="https://cdn.example.com/v3/"（绝对 URL，CDN 场景首选） - ✅ 正确：
href="/myapp/"（根相对路径，结尾/不能少） - ✅ 正确：
href="//cdn.example.com/v3/"（协议相对，适配 http/https 混合环境） - ❌
href="myapp/"、href="./js/"、href="%PUBLIC_PATH%/"（未被构建工具替换时就是字面量）→ 全部静默失效
base标签位置放错，前面的资源已经解析完了
<base>只影响它之后出现在里的标签。如果把它放在<title></title>或<meta>后面，那前面的<link rel="stylesheet" href="main.css">早就按原始页面 URL 解析完毕，<base>对它完全无感。
- 必须放在
最顶部，且只能有一个 - 放进
→ 浏览器直接忽略 - 用 JS 动态插入（如
document.head.appendChild()）→ 解析阶段已结束，无效 - 多个
<base>→ 只有第一个生效，控制台提示Multiple base elements detected. Only the first one is used.
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若也设成/a/b/c/，资源路径可能被拼两次（如/a/b/c//a/b/c/js/app.js）；Vite 构建时已设base: '/a/b/c/'，HTML 中再手动加<base>反而出问题。
更隐蔽的坑是锚点：<a href="#section2"></a>在<base href="https://example.com/sub/">下会被解析成https://example.com/sub/#section2，触发一次无意义的页面重载（地址栏变灰、滚动回顶）。
本地开发建议用href="http://localhost:3000/"而非href="/"，避免和后端路由冲突；生产环境走 CDN，用完整绝对 URL 比根相对路径更可控。
