标签本身无src/alt/srcset等属性，仅为容器；响应式逻辑全由子元素控制：用media、srcset、type匹配条件，末尾必须含src和alt作为兜底。
picture 标签本身没有可直接设置的“常用属性”
<picture></picture> 是一个容器元素，它不接受 src、alt、srcset 或 sizes 这类图片加载相关的属性——这些都必须落在它的子元素上。常见误解是给 <picture></picture> 加 class 或 id 就算“用了属性”，但真正影响响应式行为的，全在 <source></source> 和末尾的 <img> 上。
source 的 media、srcset、type 才是关键控制点
每个 <source></source> 通过三个核心属性决定是否被选中：
-
media：必须是合法 CSS 媒体查询，例如media="(min-width: 768px)"；写成media="tablet"或media="768px"会被浏览器完全忽略 -
srcset：指定一个或多个图片路径，支持w（宽度描述符）和x（像素密度描述符），但不能混用——photo-400w.jpg 1x会导致整个srcset失效 -
type：声明 MIME 类型，如type="image/avif"；浏览器只尝试加载首个type受支持的<source></source>，顺序即优先级
img 的 src 和 alt 是强制存在的兜底项
末尾的 <img> 不是可选项，而是硬性要求：
- 必须存在，且必须带
src和alt；缺alt会伤无障碍，缺src则整个区域留白 -
sizes只能写在<img>上，不能写在<source></source>里；它不参与“选图”，而是帮浏览器预估所需像素宽度，避免小屏加载大图 -
loading、decoding等优化属性也只作用于<img>，对<source></source>无效
容易被忽略的兼容性硬约束
哪怕结构写对了，以下三点任一缺失都会导致降级失败或空白：
-
<picture></picture>内最后一个子元素**必须是<img>**，不能是注释、空格或其它标签 - 所有
srcset和<img>的src路径必须真实可访问；404 不报错，只会静默 fallback，调试得靠 Network 面板清缓存后确认实际加载项 -
<source></source>的media值必须是完整、语法正确的媒体查询；orientation: landscape在 iOS Safari 中行为不可靠，应避免
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
