<base> 标签在 HTML 解析阶段重置后续相对 URL 基准，必须为绝对 URL 或合法根相对路径（以 / 开头并结尾），且须置于 <head> 最顶部、唯一存在；仅影响纯相对路径的 HTML 属性及 CSS url()，对 JS 运行时路径、绝对/协议路径等完全无效。
<base> 标签不是“修改链接路径”的工具，它是在 HTML 解析阶段重置所有后续相对 URL 的基准起点。写错一个字符、放错一个位置，<img src="logo.png"> 就 404，且浏览器通常不报错。
base href 必须是绝对 URL 或合法根相对路径
浏览器只认 href 值以 https://、http://、// 或 / 开头，且根相对路径必须以 / 开头并以 / 结尾。其他写法（如 assets/、../static/、%PUBLIC_URL%/）会被静默丢弃。
-
✅ 安全写法：
<base href="https://cdn.example.com/v3/">（绝对 URL，推荐用于 CDN） -
✅ 合法写法：
<base href="/myapp/">（根相对路径，结尾斜杠不能少；Firefox 会把/myapp截成/myappcss/） -
✅ 可用写法：
<base href="//cdn.example.com/v3/">（协议相对，自动继承当前页协议） -
❌ 无效写法：
<base href="dist/">、<base href="../public/">、<base href="/myapp">（缺尾斜杠）、<base href="%PUBLIC_URL%/">（未被服务端替换就发到浏览器）
base 标签必须放在 <head> 最顶部且只能有一个
<base> 的作用是告诉 HTML 解析器：“从现在起，所有后面的相对 URL 都按这个基准算”。它只对它之后出现的标签生效，且仅第一个有效。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须在
<title>、<link>、<script>等之前 —— 放在<title>后面，<link href="style.css">已按原始 URL 解析完毕，不受控 - 禁止放在
<body>内 —— 浏览器直接忽略，无提示 - 服务端模板拼接时避免条件逻辑导致重复渲染，例如 Vue 中多个组件各自
v-html注入<base>，Chrome 控制台会提示Multiple base elements detected. Only the first one is used. - 别用 JS 动态插入：
document.head.appendChild(baseEl)—— 解析阶段早已结束，已创建的<img>不会重算路径
哪些路径真受影响，哪些完全不受影响
<base> 不是全局路径代理，它只在 HTML 解析阶段介入纯相对路径（即不以 /、: 或协议开头的字符串）。
立即学习“前端免费学习笔记（深入）”；
-
✅ 真受影响：
<img src="logo.png">、<script src="app.js">、<link href="theme.css">、<form action="submit.php">、CSS 文件中的background: url(avatar.jpg)（这是唯一穿透到 CSS 的情况） -
❌ 完全不受影响：
fetch('./api/data.json')、import('./utils.js')、new Worker('./worker.js')、CSS 中的@import "reset.css"、<iframe src="page.html">（它的src相对于 iframe 当前 URL） -
⚠️ 特别注意：
href="/admin"这类以/开头的路径是**绝对路径（相对于域名）**，完全不受<base>控制；href="https://example.com/login"这类带协议的路径也完全绕过
最危险的点在于：错误配置不会报错，只会静默失败。上线后批量 404，排查时容易绕远路。务必确认 href 值合法、位置正确、唯一存在，并意识到它对 JS/CSS 运行时路径毫无作用 —— 那些得靠构建工具或手动修正。
