HTML中picture标签的代码规范-html教程-PHP中文网

标签必须以结尾且不可自闭合，该是强制fallback，必须含src和alt属性；顺序须从宽到窄、media语法须合法（如(max-width: 768px)），否则浏览器静默忽略或仅加载fallback图。

html中picture标签的代码规范

picture标签必须以结尾且不可自闭合

浏览器把 <picture></picture> 当作纯声明容器，真正渲染的只有末尾那个 <img>。漏掉它、写成 <img> 或 <img>，整个区域会空白——连 404 都不报。

这个 <img> 必须同时带 src 和 alt，不能只写 alt 却空着 src。旧版 Safari（16.4 之前）完全依赖它渲染，缺了就是白屏。

<img src="fallback.jpg" alt="描述"> ✅ 正确
<img src="" alt="描述"> ❌ 空 src → 加载失败
<img alt="描述"> ❌ 缺 src → 白屏
<img> ❌ 自闭合 → 不被识别

source顺序必须按匹配强度降序排列

浏览器从上到下扫描 <source></source>，遇到第一个 media 为 true 的就加载并停止，不会继续往下看。所以最具体、限制最强的规则必须放最前。

比如桌面高清屏需同时满足宽度和 DPR：写成 media="(min-width: 1200px) and (min-resolution: 2dppx)" 的 <source></source>，就得排在仅用 min-width 的前面；否则宽屏设备可能永远卡在更宽松的规则里。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

✅ 推荐顺序：先 (min-width: 1200px) and (min-resolution: 2dppx)，再 (min-width: 1200px)，最后 (max-width: 767px)
❌ 错误顺序：把 (max-width: 767px) 放最前 → 所有小屏都命中，大屏规则永不触发
⚠️ 避免边界重叠：不要同时写 min-width: 768px 和 max-width: 768px，768px 宽度行为不可控

media属性必须是合法 CSS 媒体查询

写错语法，浏览器会静默忽略整条 <source></source>，既不报错也不加载——你根本察觉不到它失效了。

常见非法写法包括缺括号、单位缺失、用词错误。注意 media 只接受完整媒体查询表达式，不是简单数值或设备名。

✅ media="(max-width: 768px)" —— 括号+单位齐全
❌ media="max-width: 768px" —— 缺外层括号 → 被忽略
❌ media="768px" 或 media="tablet" —— 非法媒体查询 → 失效
❌ media="(min-width: 768)" —— 缺 px 单位 → 无效

type和srcset混用时格式优先级靠前，但需服务器支持

<source type="image/avif"></source> 的作用不是“尝试加载”，而是“如果支持就用它，否则跳过”。浏览器不会因为 AVIF 加载失败就回退到下一个 <source></source>，它只看 MIME 类型是否原生支持。

这意味着：即使你写了 AVIF + WebP + JPG 三层 fallback，只要服务器没配好 image/avif 的 MIME 类型，Chrome 就不会发请求；而 Safari 目前仍不支持 AVIF，它会直接跳过整行，落到下一条 WebP —— 前提是你把 WebP 写在 AVIF 后面。

✅ WebP 放 AVIF 后、JPG 前：<source type="image/avif"></source> → <source type="image/webp"></source> → <img>
⚠️ 服务器必须返回正确的 Content-Type，否则 type 形同虚设
⚠️ srcset 中不能混用 w 和 x 描述符：写 "a.jpg 400w, b.jpg 2x" 会让整个值被浏览器忽略