picture标签仅允许source和img子元素，其他标签会被浏览器直接忽略；其核心作用是响应式资源选择，匹配逻辑为短路执行，最终由img渲染内容并提供无障碍支持。
picture 标签里只能放 source 和 img，其他标签会失效
浏览器在解析 picture 时，会按顺序扫描子元素，一旦遇到第一个能匹配当前环境（如屏幕宽度、像素密度、MIME 类型）的 source，就停止查找，并用它的 srcset 或 src 去加载资源；随后跳过其余 source，只渲染其后的 img 作为 fallback。如果把 div、span、figure 等塞进 picture，它们会被忽略——不是报错，而是直接丢弃，DOM 中也看不到。
常见错误现象：
- 写了个
<picture><div class="caption">xxx</div><source ...><img ...></source></picture>，结果 caption 消失 - 用 Vue/React 动态插入非
source/img节点，渲染后发现结构被浏览器“净化”了
正确做法：
-
source必须在img之前，且所有source连续排列 - 文字说明、图注、链接等需放在
picture外部，例如用figure包裹整个picture+figcaption - 不要依赖
picture的 DOM 子节点做样式或 JS 交互——它不是容器语义，只是资源选择器
source 的 media 和 type 属性不互斥，但匹配逻辑是“短路执行”
一个 source 可同时带 media（媒体查询）和 type（MIME 类型），浏览器先判断 media 是否为真，再检查当前环境是否支持该 type。只要其中任一条件不满足，就跳过该 source，继续下一个。
典型陷阱：
-
<source media="(min-width: 768px)" type="image/webp" srcset="a.webp"></source>：如果用户浏览器不支持 WebP（如旧版 Safari），即使宽度达标，也会跳过 - 把
type="image/avif"放在最前面，而多数浏览器还不支持 AVIF，结果所有设备都回落到末尾的img，失去响应式意义
建议顺序：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 优先按格式兼容性排序：WebP → AVIF → JPEG/PNG（越靠前的格式越新、越小，但支持度越低）
- 同一格式下，再按
media从大屏到小屏排（如(min-width: 1200px)→(min-width: 768px)→ 无media） - 最后一个
source可省略media和type，纯粹作为宽屏+兼容格式兜底，让img专注做最终 fallback
img 在 picture 中不可省略，且必须有 src 和 alt
picture 本身不渲染任何内容，它只是个资源分发开关；真正负责显示的是内部的 img。没有 img，页面会出现空白，且无障碍阅读器无法获取替代文本。
关键事实：
-
img的src不参与响应式选择——它只在所有source都不匹配时才加载 -
img的srcset和sizes会被忽略（Chrome 110+ 已明确废弃对此的支持） -
alt必须存在，否则违反 WCAG，且部分浏览器（如 Firefox）在source加载失败时仍依赖img的alt显示占位
实操注意点：
- 别为了“简洁”删掉
img，哪怕你 100% 确信所有用户都支持 WebP -
img的src推荐用最小通用尺寸（如 800w JPEG），避免 fallback 时加载超大图 - 不要给
img设width/height行内样式——它应由 CSS 控制，否则可能破坏响应式布局比例
渲染流程中，source 匹配发生在 layout 之前，且不触发重排
浏览器在构建渲染树前就完成 source 选择：解析 HTML 时读取 source 属性 → 计算当前匹配项 → 设置最终图像 URL → 启动图片加载。这个过程不依赖 layout 尺寸，也不等待 JavaScript 执行。
这意味着：
- JS 修改
window.innerWidth或动态插入source，不会触发重新匹配（已选中的source不会切换） - 用
matchMedia监听屏幕变化后，想更新图片，必须手动替换img.src，而不是指望picture自动响应 - 服务端渲染（SSR）时，
source匹配完全基于客户端环境，服务端无法预判，所以 SSR 输出的picture只是模板，首屏图像仍由客户端决定
容易被忽略的一点：当 source 的 srcset 指向 404 图片时，浏览器不会退回到下一个 source，而是直接 fallback 到 img —— 错误不会级联，只影响当前项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
