标签无参数，行为由内部和决定；media必须为合法css媒体查询，顺序须从宽到窄，必须存在且带src和alt，sizes仅在上生效，srcset混用w/x描述符将导致整条失效。
<source></source> 和 <img> 元素及其属性决定。写错任意一个关键属性，整个结构就会静默降级或留白。
media 属性必须是合法 CSS 媒体查询
浏览器只认标准语法，写错就跳过整条<source></source>，不报错也不提示：
-
media="(max-width: 768px)"✅ 正确（括号、冒号、单位全齐） -
media="max-width: 768px"❌ 缺括号 → 浏览器忽略该<source></source> -
media="768px"或media="tablet"❌ 非法查询 → 完全失效 - 顺序必须从宽到窄：
min-width: 1200px→min-width: 768px→max-width: 767px，否则小屏永远卡在第一条
srcset 和 sizes 必须配合使用，且仅 <img> 上有效
<source></source> 上写的 sizes 会被浏览器直接忽略，只有 <img> 的 sizes 才参与计算：
- 用
x描述符（如icon@2x.png 2x）时，sizes不强制，但建议写上，避免 DPR=1 时误加载大图 - 用
w描述符（如photo-800w.jpg 800w）时，sizes是硬性要求，缺了就回退到<img src> -
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"告诉浏览器“这张图在不同断点下占多宽”，浏览器再乘以当前 DPR 算出需加载的像素宽度 - 混用
w和x（如photo-400w.jpg 400w, photo@2x.jpg 2x）→ 整个srcset被丢弃
type 属性只起格式过滤作用，不触发加载
type 不是“优先加载”，而是“支持才考虑”：
-
<source srcset="photo.avif" type="image/avif"></source>：浏览器检查是否支持image/avif，不支持就跳过这一条，继续看下一条 - 现代浏览器按
<source></source>顺序匹配，第一个type支持且media满足的即被采用 -
type写错 MIME 类型（如image/jpg）→ 浏览器认为不支持，跳过 - Nginx / Apache 必须正确配置
image/avif和image/webp的 MIME 类型，否则即使标签写对，也会 404 或被当普通文件下载
<img> 不是可选的，是强制兜底
漏掉它，或写成自闭合形式，页面就会空白：
- 必须存在，且必须带
src和alt，写成<img>或<img>都无效 -
<img src="fallback.jpg" alt="描述">是最终 fallback，所有<source></source>不匹配时加载它 - 旧版 Safari（16.4 之前）完全依赖
<img src>渲染，没它就白屏 - 建议给
<img>也配srcset和sizes，让它自己也能适配 DPR，而不是只靠单张 1x 图
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
