HTML中picture标签的常见写法-html教程-PHP中文网

picture标签必须以结尾且含src与alt，否则不加载图片；需按media从宽到窄排列，缺括号、type与content-type不一致等任一错误均导致回退至。

html中picture标签的常见写法

picture 标签必须以 `<img>` 结尾，否则无效

浏览器解析 <picture></picture> 时，会按顺序匹配 <source></source>，一旦没找到满足条件的，就直接回退到末尾的 <img>。这个 <img> 不是可选的“补充”，而是强制必需的兜底项——缺了它，整个 <picture></picture> 就不会加载任何图片，控制台可能静默失败，也可能报 Failed to load resource。

常见错误包括：

只写 <source></source>，忘了加 <img>
<img> 写在了 <source></source> 前面（顺序错）
<img> 缺 src 或 alt（src 是必需属性，alt 是无障碍必需）

media 属性要写合法媒体查询，括号和空格不能少

<source></source> 的 media 值不是字符串拼接，而是标准 CSS 媒体查询语法。漏括号、多空格、用错引号都会导致匹配失效，浏览器跳过该 <source></source>，直奔 <img>。

正确写法示例：

<source media="(max-width: 768px)" srcset="mobile.jpg"></source>

错误写法（全部会失效）：

html-ppt-to-pdf

将使用 `

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

下载

media="max-width: 768px"（缺括号）
media="(max-width:768px)"（括号紧贴数值，部分旧浏览器不认）
media='(max-width: 768px)'（单引号在某些 HTML 解析器中触发异常）

srcset 在和中含义不同

<source></source> 的 srcset 只处理「设备像素比」切换（如 1x / 2x），不支持 w 单位；而 <img> 的 srcset 支持 w（宽度描述符）+ sizes 组合做视口响应式。

所以你不能在 <source></source> 里写 srcset="small-320w.jpg 320w, large-800w.jpg 800w"——它会被忽略。正确做法是：

用 media 切屏幕尺寸段
每个 <source></source> 的 srcset 仅提供同构图的多倍率版本（如 hero-1x.jpg, hero-2x.jpg 2x）
把 w + sizes 留给最外层的 <img>（如果需要）

type 属性必须与服务器返回的 Content-Type 严格一致

当用 <source type="image/avif"></source> 时，服务器返回的图片响应头里 Content-Type 必须是 image/avif，哪怕只差一个字母（比如写成 image/avif vs image/av1f），浏览器就会跳过该 <source></source>，不加载也不报错。

验证方法很简单：打开 DevTools → Network → 找到对应图片请求 → 查看 Response Headers 中的 Content-Type。常见陷阱：