base标签导致href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"跳转错误，因其将https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b解析为base href拼接后的完整URL，引发无意义重载而非锚点定位。应改用javascript:void(0)或preventDefault()拦截，默认行为干扰SPA路由与锚点功能。
base标签会让跳转到错误位置
href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" 本意是页面内锚点跳转，但一旦页面中存在 <base href="<a href="https://www.php.cn/link/f320924d8b6d15e190ed513cca7e715e">https://www.php.cn/link/2e07774ef899d0b043da816604908d89"></a>;，浏览器会把 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b 解析成 <a href="https://www.php.cn/link/2e07774ef899d0b043da816604908d89">https://www.php.cn/link/2e07774ef899d0b043da816604908d89</a>https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b —— 这个 URL 没有对应资源，最终触发一次无意义的页面重载（地址栏变灰、滚动回顶），而不是预期的平滑锚点定位。
常见现象包括：
- 点击“回到顶部”链接后页面闪一下、滚动重置
-
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bsection2">点击后没反应，或跳到页面最开头而非<h2 id="section2">处 - 控制台没报错，但 Network 面板能看到一次对
/sub/https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bsection2的空请求（状态码 200，但内容是完整 HTML）
根本原因：base 标签只影响 HTML 解析阶段的相对 URL，而 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b 是相对路径（不以 /、http:// 开头），所以被拼接进 base href。
SPA 中用 base + 锚点必须显式补全 document.URL
单页应用（React/Vue）通常靠 hash 或 history 路由驱动，href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" 常用于触发 JS 逻辑（如展开菜单、切换 tab），此时 base 的干扰更隐蔽：
立即学习“前端免费学习笔记（深入）”；
-
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onclick="toggleMenu()">点击后仍会触发默认跳转，导致页面重载或滚动 - Vue Router 的
<router-link to="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">不受影响（它阻止了默认行为），但原生<a>不会
正确做法不是禁用 base，而是绕过它：
- 把
href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"改成href="javascript:void(0)"（兼容性好，不触发导航） - 或用
href=""+event.preventDefault()在 JS 中拦截 - 若真要保留锚点语义，改用绝对路径写法：
href="/current-page.htmlhttps://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bsection2"（但 SPA 中这会强制刷新）
注意：document.baseURI 返回的是 base href 值，但 window.location.hash 和 document.getElementById() 查找不受影响 —— 问题只出在 href 解析和默认跳转行为 上。
target="_blank" 和 href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" 共存时的双重陷阱
<base target="_blank" href="/app/"> 这种写法看似方便，实则危险：
-
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">会被解析为<a href="https://www.php.cn/link/605fd508e0de4d1e99f9f49821bd02ab">https://www.php.cn/link/605fd508e0de4d1e99f9f49821bd02ab</a>https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b，再被新窗口打开 → 空白页显示https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b - 浏览器控制台报错：
Failed to execute 'open' on 'Window': Invalid URL（尤其在 Chrome 120+） - 如果页面还用了
<form method="POST">，submit 也会被新窗口提交，用户看不到响应，也回不到原页面
规避方式：
- 不要给 base 同时设
href和target，尤其当页面含大量href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" - 若必须开新窗，只对明确需要的链接加
target="_blank"，并配rel="noopener" -
target属性优先级低于 a 标签自身值，所以<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" target="_self">可覆盖 base，但别依赖这个 —— 容易漏写
验证 base 是否正在干扰锚点的最快方法
不用猜，直接看浏览器怎么解析：
- 打开 DevTools → Elements 面板，确认
<base>是否存在且唯一，href 值是否合法（必须以/、https://或//开头） - 右键点击任意
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">→ “检查元素” → 在 Elements 中右键该<a>→ “Open in new tab” - 观察新开标签页地址：如果是
<a href="https://www.php.cn/link/2c11a011210e0b1ccfa7db763c716960">https://www.php.cn/link/2c11a011210e0b1ccfa7db763c716960</a>https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b，说明 base 正在生效干扰；如果是<a href="https://www.php.cn/link/5225802cb9758f9fcd34a679bf9326ec">https://www.php.cn/link/5225802cb9758f9fcd34a679bf9326ec</a>https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b，说明 base 被忽略（可能 href 值非法，比如缺结尾/）
真正容易被忽略的点是：base 的 href 值哪怕只错一个字符（如写成 "/app" 没加末尾 /），Firefox/Chrome 就会静默丢弃整条 base，所有相对路径退回到页面 URL 解析 —— 此时锚点看似正常，但图片/CSS 全部 404，问题分散且难定位。
