是，base标签会影响、、的src属性，但仅限纯相对路径（如"cover.jpg"）；根相对（/xxx）、绝对URL（https://...）及srcset、动态JS创建的元素均不受影响。
base 标签会影响 <img alt="深度解析HTML中base标签对多媒体元素的作用" >、<video></video>、<audio></audio> 的 src 吗？
会，但仅限于属性值是纯相对路径（如 "cover.jpg"、"clip.mp4"）的情况。浏览器在 HTML 解析阶段就用 <base href="..."> 重写了这些 src 的解析起点，和当前页面 URL 完全无关。
常见错误现象：部署到 /blog/2024/post.html，却在页面里写 <img src="thumb.png" alt="深度解析HTML中base标签对多媒体元素的作用" >，没配 <base> 就会请求 /blog/2024/thumb.png；加了 <base href="/blog/"> 后，它就变成请求 /blog/thumb.png——这才是你想要的。
注意三点：
-
<img src="/assets/logo.svg" alt="深度解析HTML中base标签对多媒体元素的作用" >（根相对）或<video src="https://cdn.com/vid.mp4"></video>（绝对 URL）完全不受<base>影响 -
srcset属性中的路径（如srcset="small.jpg 480w, large.jpg 1024w"）也不走<base>，每个 URL 独立解析 -
<picture></picture>内部的<source src="...">></source>和<img src="..." alt="深度解析HTML中base标签对多媒体元素的作用" >>遵循同样规则：纯相对路径受控，其余不参与
<track></track> 的 src 是否被 base 标签接管？
是的，只要 <track src="sub/en.vtt"></track> 中的值是纯相对路径，它就会被 <base href="/app/"> 改写为 /app/sub/en.vtt。
立即学习“前端免费学习笔记（深入）”；
但容易踩的坑是：很多字幕文件实际托管在 CDN，而开发者误以为加了 <base href="https://cdn.example.com/v2/"> 就万事大吉——结果 <video></video> 自身从 https://example.com/watch 加载，<track src="sub/en.vtt"></track> 却被拼成 https://cdn.example.com/v2/sub/en.vtt，404。
所以：
- 若
<track></track>指向外部域资源，必须写绝对 URL（https://...或//...）来绕过<base> - 若所有字幕都和 HTML 同源且同结构，用
<base>统一前缀确实能省去每个<track></track>手动补路径 - 不要依赖
<base>来“修复”跨域字幕加载逻辑，CORS 和路径权限得单独处理
为什么 <video poster="..."></video> 有时 404，有时正常？
因为 poster 属性的行为和 src 一致：纯相对路径受 <base> 控制，其他形式不参与。
典型陷阱场景：
- 本地开发时用
file://打开 HTML，<base href="/app/">会被静默忽略（href 不以协议开头），此时poster="img/cover.jpg"按文件系统路径解析，可能意外成功 - 上线后走 HTTP(S)，
<base href="/app/">生效，但服务器没把/app/img/cover.jpg部署到位，直接 404 -
poster="/img/cover.jpg"（根相对）永远不走<base>，但可能和后端路由冲突（比如 Nginx 把/img/转发到了别的服务）
真正可靠的写法只有两种：poster="https://cdn.example.com/app/img/cover.jpg"（绝对），或确保 <base href="..."> 的值与实际静态资源部署路径 100% 对齐。
动态插入的 <audio></audio> 或 <video></video> 还受 base 控制吗？
完全不受。例如：
const audio = document.createElement('audio');
audio.src = 'alert.mp3'; // 这里按当前页面 URL 解析，不是 <base href> 的值
document.body.appendChild(audio);
这是最常被忽略的一点：所有 JS 动态创建并赋值的多媒体元素，其 src、poster、srcset、<source></source> 等路径，全部绕过 <base>。它们只认 window.location 或 document.baseURI（后者可手动用于构造，但不会自动生效）。
所以如果你的 SPA 在子路径下运行，又通过 JS 动态加载音频提示音，必须显式拼接前缀：
// ❌ 错误：依赖 base
audio.src = 'beep.mp3';
// ✅ 正确：用 document.baseURI 构造，或读取配置
audio.src = new URL('beep.mp3', document.baseURI).href;
别指望 <base> 能兜底所有多媒体加载场景——它只管 HTML 硬编码的那一层，JS 运行时得自己负责。
