base 标签会改写 area href 的解析逻辑：未以 /、: 或协议开头的 href 值会被拼接 base href 路径，导致热区跳转 404 或错误路径，需用绝对 URL、根相对路径或 JS 控制绕过。
base 标签会改写 的解析逻辑
<area> 是 <map> 内部的热区标签，其 href 属性属于 HTML 硬编码的导航类 URL，和 <a href> 同级处理。只要写了 <base href="https://www.php.cn/link/9bf7386a84415b80b67c90f0c1c743c7">，所有未以 /、: 或协议开头的 <area href="page.html"> 就会被拼成 https://www.php.cn/link/9bf7386a84415b80b67c90f0c1c743c7page.html，而非当前 HTML 所在路径。
常见翻车场景：热区跳转 404 却查不到原因
热区链接失效往往被误判为 JS 拦截或路由问题，实际是 <base> 静默接管了路径拼接。典型表现：
- 页面 URL 是
https://example.com/blog/post.html，<area href="author.html">本应跳转到/blog/author.html，但加了<base href="/v2/">后实际请求/v2/author.html - 本地用
file://打开含<base href="/app/">的页面，<area href="contact.html">直接变成file:///app/contact.html（浏览器拒绝访问） -
<meta http-equiv="refresh" content="0;url=success.html">中的url=也受<base>影响，但开发者常忽略这点
如何验证热区链接是否被 base 干扰
别猜，直接看 DevTools 实际发出的请求：
- 右键热区对应
<area>元素 → “Reveal in Elements panel” - 在 Elements 面板中右键该标签 → “Open link in new tab”（不是点击页面热区）
- 观察新标签页地址栏或 Network 面板中触发的跳转 URL 是否符合预期
- 若发现路径多出 /subpath/ 或指向 CDN 域名，基本可锁定是
<base href>导致
热区 href 写法建议：绕过 base 或主动适配
热区本身不支持 target 或 data- 属性劫持，所以只能从路径源头控制：
立即学习“前端免费学习笔记（深入）”；
- 明确写绝对 URL：
<area href="https://example.com/blog/author.html">（完全绕过 base） - 用根相对路径（需确保部署路径一致）：
<area href="/blog/author.html">（不受 base 影响） - 避免纯相对路径：
<area href="author.html">或<area href="../author.html">（最易被 base 改写） - 若必须用 base 且热区路径分散，改用 JS 绑定 click 事件 +
window.location.href，这样路径解析走 JS 运行时逻辑，不受 base 约束
真正麻烦的是热区和图片 src 共用同一份路径配置——<base> 会同时改写两者，但图片 404 容易被发现，热区跳错却可能被用户当作“页面没做跳转”，排查成本更高。
