figure标签是语义化前提，缺失会导致preload、poster、track等优化失效；figcaption必须为figure的首或末直接子元素，否则破坏可访问性；figure+preload="metadata"+poster构成首屏视频最小可行方案。
figure 标签本身不提升性能，但它是语义化前提——没有它，preload、poster、track 等关键优化手段容易失效或被忽略。
figure 必须包裹 video/audio 才能触发语义化加载策略
浏览器对 video 或 audio 的预加载行为（如 preload="metadata"）本身不依赖 figure，但真实项目中，只有当媒体被明确标记为“独立内容单元”时，开发者才更可能：
- 主动加 poster 避免首帧黑屏
- 补全 alt（对 img）或 aria-label（对音视频）
- 拆分 track 字幕资源并声明 kind="subtitles"
- 在懒加载逻辑中把整个 figure 当作一个可观测单元（比如 IntersectionObserver 监听 figure 进入视口）
漏掉 figure 容器，这些动作就容易变成“只在 demo 里写”，上线后被压缩、被覆盖、被遗忘。
figcaption 位置错位直接导致可访问性降级
屏幕阅读器靠 DOM 顺序识别图注归属， 说明 把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。figcaption 必须是 figure 的**第一个或最后一个直接子元素**：
- ✅ figcaption 不是直接子元素）
- ❌ 
p 不是 figcaption，读屏器跳过）
一旦错位，alt 再完整也救不回上下文断裂——搜索引擎无法建立“视频+说明”的语义关联，Lighthouse 可访问性审计会直接扣分。
figure + preload + poster 组合才是首屏视频的最小可行方案
单纯给 video 加 preload="auto" 会拖慢 LCP；只加 poster 而没 figure，则响应式断点切换时容易丢失占位逻辑。推荐组合：
- figure 作为容器，用 CSS 控制最大宽度与居中（max-width: 100%; margin: 0 auto;）
- video 设 preload="metadata"，仅拉取头帧和元信息
- 必须提供 poster 属性（值为缩略图 URL），否则移动端 Safari 可能显示空白或黑块
- 若视频非首屏关键资源，用 JS 监听 figure 进入视口后再设置 video.src，避免初始请求
注意：poster 图片必须是 JPEG/PNG，不能是 SVG（部分 Android WebView 不支持 SVG poster）。
最容易被忽略的不是语法，而是语义闭环：figure 声明“这是独立内容”，figcaption 说明“它为什么在这里”，alt 和 track 则确保“即使媒体失败，信息仍可达”。三者缺一，性能优化就只做了一半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
