必须包含末尾的且带src属性，否则图片不显示；浏览器按顺序匹配的type和media，最后回退到的src作为fallback。
src，图片就完全不显示——这是最常踩的坑。
必须配 ![HTML5怎样用picture元素插图_HTML5用picture元素插图指南【进阶】]()
src 属性
src，页面就是空白。
-
-
src是 fallback 路径，建议用 WebP 降级后的格式（如.jpg或.png） -
srcset和sizes，但只有在所有
@@##@@
media 和 type 的匹配优先级
浏览器按 type（MIME 类型是否支持），再看 media（媒体查询是否为真）。只要某一项不满足，就跳过该
- 旧版 Safari 不支持
type="image/avif"，即使写了也会跳过，落到下一个
-
media查询不生效？检查是否漏了引号、括号不匹配，或用了不被支持的语法（如hover在移动设备上多数无效） - 不要把高分辨率
srcset和media混在同一srcset是像素密度逻辑，media是视口逻辑，应分开处理
响应式 + 格式切换的典型组合写法
兼顾现代格式（WebP/AVIF）和多尺寸适配时，推荐分层写法：最上面用 type 切格式，中间用 media 切布局，底部
立即学习“前端免费学习笔记（深入）”；
- 第一层
- 第二层
- 第三层
- 最后一行
@@##@@
真正难的不是写对标签，而是验证每种路径是否真被加载——别只靠 DevTools 的 Network 面板看请求，要关掉 WebP 支持、缩放窗口、切设备模拟器，一个个条件手动触发。很多“写了却没生效”的问题，其实只是没测全场景。
