<video>和<audio>是终端多媒体元素，不可被其他媒体标签嵌套，仅允许<source>、<track>及文本fallback子元素；非法嵌套（如<p><video>...</video></p>）会被浏览器自动修正，导致DOM结构与源码不一致。
<video> 和 <audio> 不是“容器”，不能被其他媒体标签嵌套，也不该被误当作通用包裹盒使用；它们自身就是终端多媒体元素，只接受特定子标签（如 <source>、<track>）和文本 fallback。
为什么不能把 <video> 套进 <div> 再塞进 <p>？
这不是“能不能”的问题，而是浏览器会直接修复你的错误结构：<p> 只允许内联内容，一旦遇到 <video>（块级元素），浏览器立刻闭合 <p>，再把 <video> 插到外面——你在 DevTools 里看到的 DOM 已不是你写的 HTML。常见现象包括：
- 写
<p><video src="a.mp4"></video></p>，结果变成<p></p><video></video><p></p> - CSS 中用
p video选不到元素，因为video根本不在p里 - JS 获取
document.querySelector('p').children返回空列表
<video> 允许哪些子标签？哪些绝对不行？
<video> 的合法子节点只有三类：<source>、<track>、纯文本（用于 fallback）。其他任何标签都会被忽略或移出。
- ✅ 正确：
<source src="a.mp4" type="video/mp4">、<track kind="subtitles" srclang="zh" src="sub.vtt"> - ❌ 错误：
<div>、<p>、<span>、<img>、<button>—— 即使加了display: block也没用，HTML 解析阶段就剔除了 - ⚠️ 特别注意：
<source>必须写在<video>开始标签后、内容前；放在末尾或跨层级（如<video><div><source></div></video>）无效
想控制视频样式或加操作按钮，该用什么结构？
别试图“嵌套”功能，而要用语义正确的组合：用 <div> 作为外层容器，把 <video> 和自定义控件（如 <button>）并列放进去，再用 CSS 定位覆盖或布局排列。
立即学习“前端免费学习笔记（深入）”；
- 正确结构示例：
<div class="video-wrapper"> <video controls preload="metadata"> <source src="clip.mp4" type="video/mp4"> </video> <button class="custom-play-btn">播放</button> </div> - 不要写：
<video><div><button></button></div></video>—— 这个div会被浏览器丢弃 - 性能提示：过度包裹（如
<div><div><div><video></video></div></div></div>）虽不影响播放，但增加 JS 查询路径和 CSS 选择器匹配开销
本地开发时 <source> 加了却没生效？检查这三点
多格式 fallback 失效，90% 是路径或服务配置问题，不是语法错。
- 路径必须相对或绝对有效：
src="./videos/clip.mp4"中的./videos/要与 HTML 文件同级；VS Code Live Server 默认根目录是项目根，不是 HTML 所在文件夹 - 必须起 HTTP 服务：双击打开 HTML（
file://协议）下 Chrome/Firefox 会拒绝加载<source>，报net::ERR_FILE_NOT_FOUND或静默失败 - MIME 类型要匹配：
type="video/mp4"必须与服务器实际返回的 Content-Type 一致；Nginx/Apache 通常默认支持，但某些轻量服务（如 Pythonhttp.server）可能不识别.webm，需手动配置
真正容易被忽略的是：浏览器对 <video> 的解析发生在 HTML 构建 DOM 阶段，不是渲染或 JS 执行时——写错嵌套，连调试器都看不到你“以为存在”的结构。
