17370845950

标签仅影响明确用于资源定位的属性，如href、src、action等；不影响JavaScript API、srcset、CSS url()等；且仅第一个生效，动态插入只作用于后续新解析URL。

是的， 标签会影响当前文档中所有相对 URL 的解析，但仅限于那些“参与 URL 解析”的属性，不是所有带链接语义的 HTML 特性都受它影响。

哪些属性会受 影响？

浏览器只对明确用于**资源定位**的属性应用 指定的基准 URL。常见受影响的有：

• （跳转目标）
• （图片地址）
• （外部脚本）
• （CSS、icon 等）

注意： 中的 url=xxx 也受 影响 —— 这点常被忽略。

哪些属性 不会 受 影响？

以下情况完全绕过 ，始终按常规相对路径或绝对路径解析：

• window.location.href = "xxx"（JavaScript 赋值不走 base）
• fetch("xxx") 或 XMLHttpRequest.open("GET", "xxx")
• 中的 download 属性（它只是文件名提示，不触发导航）
• /：srcset 中的 URL 不受 影响（规范明确排除）
• CSS 中的 url() 函数（如 background: url("logo.png")）—— 始终相对于 CSS 文件位置解析

的位置和覆盖规则

必须出现在 内，且**只取第一个生效**，后续的会被忽略。例如：

如果页面中动态插入 （比如用 JS 创建并 append），它 不会 改变已加载资源的解析行为，只对之后新解析的相对 URL（如后续动态创建的 ）起作用。

容易踩的坑：SPA 和单页路由场景

在 React/Vue 等前端路由项目中，若使用 ，要注意：

• 所有 的 href 也会被拼成 https://site.com/app/xxx.css —— 如果你的 CSS 实际放在根目录，就会 404
• 服务端必须确保 /app/* 路径能 fallback 到 index.html（否则刷新页面直接 404）
• 是 Vue Router 自己处理的，不经过 base；但如果你写的是原生 ，就会被 base 拼成 /app/user

最稳妥的做法是：静态资源全部用绝对路径（/css/main.css）或协议相对路径（//cdn.example.com/logo.png），避免依赖 带来的隐式行为。