标签是强制fallback机制，必须以picture结尾且最后一个子元素为img（带src和alt），media需合法括号语法并按宽到窄排序，type和srcset依赖浏览器原生解析与content-type匹配。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

标签不是可选的包装器，它是一套有严格顺序和强制规则的声明式图像选择机制。写错一个位置或漏掉一个属性，整个结构就失效，页面直接空白。

必须以 结尾，且 必须带 src 和 alt

的最后一个子元素**必须是 标签**，不能是自闭合写法 ，也不能只写 而不提供 src。浏览器不匹配任何 时，就靠它兜底；没它，区域就是空的。

• 是强制 fallback，不是“可有可无的备用”
• src 属性必须指向真实存在的图片路径，404 不报错，只会静默不显示
• alt 属性不可省略，否则影响可访问性和 SEO

的 media 值必须是合法 CSS 媒体查询

写成 media="768px" 或 media="tablet" 是无效的，浏览器会整条忽略该 。正确写法必须带括号和完整语法：

• ✅ media="(max-width: 480px)"
• ✅ media="(min-width: 768px) and (max-width: 1023px)"
• ❌ media="max-width: 480px"（缺括号）
• ❌ media="(orientation: landscape)"（iOS Safari 行为不一致，慎用）

必须按从宽到窄顺序排列

浏览器从上到下扫描，遇到第一个 media 为 true 的就停止，后面的全跳过。所以顺序即优先级：

• 宽屏规则（如 media="(min-width: 1200px)"）要放最前
• 中屏规则（如 media="(min-width: 768px)"）居中
• 窄屏兜底（如 media="(max-width: 479px)"）放最后
• 避免边界重叠：不要同时写 (min-width: 768px) 和 (max-width: 768px)，768px 宽度会命中前者，后者永远不触发

type 属性和 srcset 都不能单独决定加载逻辑

type="image/avif" 只在浏览器支持该 MIME 类型时才考虑这条 ；srcset 里的 w 描述符必须配合 sizes 才能参与宽度决策，而 x 描述符只响应设备像素比（DPR），两者混用（比如 "a.jpg 1x, b.jpg 400w"）会导致整个 srcset 被忽略。

• type 匹配失败 → 跳过该 ，继续往下看
• srcset 中只有 1x 图，但设备是 2x → 浏览器加载最接近的 1x，不会跨 查找
• sizes 写在 上，不能写在 里；它的值必须和 CSS 实际渲染宽度一致，否则计算失准

真正起作用的是浏览器在 HTML 解析阶段的自动匹配——它不等 JS、不等样式计算、不等 resize 事件。你写的每一条 ，要么被立即采用，要么被彻底跳过。最容易被忽略的，其实是服务器返回的 Content-Type 是否与 type 声明一致：返回 image/webp 文件却带 Content-Type: image/jpeg 响应头，那条 就算 media 对了也白搭。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！