浏览器按顺序匹配第一个满足条件的并立即加载，后续全部跳过；media必须为合法括号媒体查询，type须严格匹配服务器返回的content-type，且不可缺失，否则页面留白。
浏览器只认第一个匹配的 <source></source>，不是“选最优”而是“短路执行”
写在 <picture></picture> 里的多个 <source></source> 不是并行判断、也不是按分辨率或 DPR 智能择优，浏览器从上到下逐条检查，遇到第一个 media 为真（或 type 被支持且有可用 srcset）就立刻加载它，后面所有 <source></source> 全部跳过，连解析都不做。
常见错误包括：
-
media="(max-width: 768px)"放最上面 → 所有小屏设备永远卡在这条，min-width: 1200px根本没机会触发 -
media="768px"或media="tablet"→ 非法媒体查询，该<source></source>被静默忽略 -
<source></source>写在<img>后面 → 浏览器直接跳过整段<source></source>，只加载<img src>
media 必须完整括号，type 必须严格匹配 MIME 类型
media 值不是字符串模板，必须是合法 CSS 媒体查询语法：(min-width: 768px) ✅，max-width: 768px ❌（缺括号），(orientation: landscape) ✅，landscape ❌。
type 更容易踩坑：它不是文件后缀，而是服务器实际返回的 Content-Type 响应头值。写 type="image/webp" 但服务器返回 Content-Type: image/jpeg，Chrome 会标记为 blocked:mime-type，该 <source></source> 失效，浏览器继续往下找。
关键点：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- Safari 对
type校验极严，image/webp;charset=utf-8这类带参数的写法会被直接跳过 - AVIF 的
type="image/avif"在 Safari 16.4+ 才支持，旧版会静默 fallback 到下一条 - 所有
<source></source>都不匹配时，浏览器不会报错，只会默默加载末尾<img src>
srcset 和 sizes 在 <source></source> 和 <img> 中各自独立生效
每个 <source></source> 自己的 srcset + sizes 只服务于它被匹配成功后的资源选择；而 <img> 的 srcset + sizes 只在所有 <source></source> 都失效时才启用——两者不共享候选集，也不跨层协商。
这意味着：
-
<source media="(min-width: 480px)" srcset="a-1x.jpg 1x, a-2x.jpg 2x"></source>匹配成功后，浏览器只在这两个里按 DPR 选，不会去翻<img>的srcset -
<source></source>里写srcset="b@2x.jpg 2x"是无效的 ——x描述符只在<img>的srcset中起作用 -
sizes必须写在<source></source>或<img>上，写在另一个标签里会被完全忽略
漏掉 <img> 或它没 src，整个 <picture></picture> 就是空白
<picture></picture> 本身不渲染、不请求、不兜底。<img> 是唯一强制参与渲染的节点，且必须同时满足：src 属性存在、alt 属性存在（可为空字符串）、不能是自闭合写法（<img> 无效）。
典型静默失败场景：
-
<img alt="desc">→ 缺src，页面留白，控制台无报错 -
<img src="missing.jpg">→ 404，但浏览器仍尝试加载，不触发 fallback -
<picture><source ...></source></picture>→ 没<img>，DOM 中无图像节点，完全不可见
真正容易被忽略的是：即使你写了完整的 <source></source> 规则，只要 <img> 缺 src，用户看到的就是一片空白，而不是“加载失败提示”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
