<base> 标签仅影响明确用于资源定位的属性，如href、src、action等；不影响JavaScript API、srcset、CSS url()等；且仅第一个<base>生效，动态插入只作用于后续新解析URL。
是的，<base> 标签会影响当前文档中所有相对 URL 的解析，但仅限于那些“参与 URL 解析”的属性，不是所有带链接语义的 HTML 特性都受它影响。
哪些属性会受 <base> 影响？
浏览器只对明确用于**资源定位**的属性应用 <base> 指定的基准 URL。常见受影响的有：
-
<a href="xxx">（跳转目标） -
<img src="xxx">（图片地址） -
<script src="xxx">（外部脚本） -
<link href="xxx">（CSS、icon 等） <iframe src="xxx"><form action="xxx">
注意：<meta http-equiv="refresh" content="0;url=xxx"> 中的 url=xxx 也受 <base> 影响 —— 这点常被忽略。
哪些属性 不会 受 <base> 影响？
以下情况完全绕过 <base>，始终按常规相对路径或绝对路径解析：
立即学习“前端免费学习笔记（深入）”；
-
window.location.href = "xxx"（JavaScript 赋值不走 base） -
fetch("xxx")或XMLHttpRequest.open("GET", "xxx") -
<a download="xxx">中的download属性（它只是文件名提示，不触发导航） -
<picture>/<source srcset="xxx">：srcset中的 URL 不受<base>影响（规范明确排除） - CSS 中的
url()函数（如background: url("logo.png")）—— 始终相对于 CSS 文件位置解析
<base> 的位置和覆盖规则
<base> 必须出现在 <head> 内，且**只取第一个生效**，后续的会被忽略。例如：
<head> <base href="https://cdn.example.com/"> <base href="https://api.example.com/"> <!-- 无效，被忽略 --> </head>
如果页面中动态插入 <base>（比如用 JS 创建并 append），它 不会 改变已加载资源的解析行为，只对之后新解析的相对 URL（如后续动态创建的 <img>）起作用。
容易踩的坑：SPA 和单页路由场景
在 React/Vue 等前端路由项目中，若使用 <base href="/app/">，要注意：
- 所有
<link rel="stylesheet">的href也会被拼成https://site.com/app/xxx.css—— 如果你的 CSS 实际放在根目录，就会 404 - 服务端必须确保
/app/*路径能 fallback 到 index.html（否则刷新页面直接 404） -
<router-link to="/user">是 Vue Router 自己处理的，不经过 base；但如果你写的是原生<a href="/user">，就会被 base 拼成/app/user
最稳妥的做法是：静态资源全部用绝对路径（/css/main.css）或协议相对路径（//cdn.example.com/logo.png），避免依赖 <base> 带来的隐式行为。
