html5响应式图片必须符合w3c规范：img标签需含必填src兜底图；srcset与sizes须配合使用，w/x描述符不可混用；sizes值须为合法媒体条件列表；picture结构中source须在img前且img必须含src和alt。
HTML5 中响应式图片要符合 W3C 规范，核心是正确使用 srcset、sizes 和 <picture></picture> 元素，同时确保语义清晰、回退可靠、属性值合法，并避免非标准写法。
必须提供有效的 fallback src 属性
所有 <img> 标签都必须包含 src 属性，即使用了 srcset。W3C 明确要求 src 是必需属性，用于不支持 srcset 的旧浏览器或辅助技术（如屏幕阅读器）。
- ✅ 正确：
<img src="photo.jpg" srcset="photo-480.jpg 480w, photo-800.jpg 800w" alt="风景"> - ❌ 错误：
<img srcset="..." alt="风景">（缺失src） - ⚠️ 注意：
src应指向一个可用、语义合理、尺寸适中的默认图（如中等分辨率），而非占位符或空 GIF
srcset 使用合法描述符，优先用 w 而非 x
srcset 中的每个资源后需跟宽度描述符（480w）或像素密度描述符（2x），二者不可混用在同一值中；W3C 推荐优先使用 w 描述符，因其与 sizes 协同更准确，且兼容性更好。
- ✅ 推荐写法：
srcset="photo-480.jpg 480w, photo-800.jpg 800w, photo-1200.jpg 1200w" - ✅ 可接受（仅限简单 DPR 适配）：
srcset="photo.jpg, photo@2x.jpg 2x" - ❌ 不规范：
srcset="photo-480.jpg 480w, photo@2x.jpg 2x"（混合 w/x） - ❌ 无效值：
srcset="photo.jpg 480"（缺单位）或"photo.jpg width=480"（非标准语法）
sizes 必须匹配布局逻辑，且格式为媒体条件列表
sizes 不是 CSS，而是 HTML 属性，其值必须是逗号分隔的“媒体条件 + 空格 + 长度”对，且至少含一个无条件的长度（如最后的 33vw）。它告诉浏览器“这张图在当前布局下打算显示多宽”，是 srcset 选择算法的关键输入。
- ✅ 合法：
sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 33vw" - ✅ 合法（单条件）：
sizes="100vw"或sizes="(min-width: 768px) 50vw, 100vw" - ❌ 无效：
sizes="width:100%"（CSS 写法）、sizes="100vw, 50vw"（缺媒体条件） - ❌ 违规：
sizes值中出现非标准单位（如px在非媒体条件下单独使用）或 JS 表达式
结构需完整，source 按顺序匹配，img 作最终回退
当使用 <picture></picture> 时，W3C 要求：<source></source> 必须位于 <img> 之前；每个 <source></source> 可带 media、type、srcset、sizes，但不能有 alt；最终的 <img> 必须含 src 和 alt，承担语义与可访问性职责。
- ✅ 规范结构：
- ❌ 错误：
<img>缺失、放在<source></source>前、或<source></source>有alt - ❌ 不推荐：
<source></source>仅用src（应统一用srcset）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
