HTML网页中picture标签写法-html教程-PHP中文网

标签本身不渲染内容，仅作为容器；必须包含作为必需fallback节点，否则页面留白且无报错；按顺序匹配media/type后加载资源，未匹配时回退至的src和alt。

html网页中picture标签写法

<picture></picture> 标签本身不渲染内容，它只是个容器，真正起作用的是内部的 <source></source> 和最终的 <img> —— 没有 <img>，<picture></picture> 就是空的，页面上什么也不会显示。

必须包含 `<img>` 作为 fallback

浏览器按顺序检查 <source></source>，一旦匹配就加载对应资源；但所有 <source></source> 都不匹配时，会回退到 <img>。这个 <img> 不仅是“兜底”，更是必需的 DOM 节点 —— 它没有 src 也能存在，但必须写在 <picture></picture> 最后且不能省略。

<source></source> 只声明资源候选，不负责渲染
<img> 必须带 src（即使只是占位图）和 alt（可访问性强制要求）
如果只写 <source></source> 不写 <img>，页面该位置将为空白，控制台无报错，极难排查

`<source></source>` 的 `media` 和 `type` 别混用

media 控制响应式断点（如 (min-width: 768px)），type 控制 MIME 类型（如 image/webp）。两者可共存，但匹配逻辑不同：浏览器先按 media 筛选可用 <source></source>，再在其中按 type 选首个支持的格式。

Pptx To Html

使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。

下载

多个 <source></source> 可同时用 media 和 type，例如桌面优先 WebP、移动端 fallback JPEG
type 值必须与实际文件 MIME 严格一致，image/jpg 是无效的，应写 image/jpeg
没写 type 的 <source></source> 会被跳过（除非其他 <source></source> 全部不匹配）

`srcset` 和 `sizes` 要配对出现在 `<source></source>` 或 `<img>` 中

srcset 提供多分辨率资源列表，sizes 告诉浏览器“在不同视口宽度下，这张图大概占多少 CSS 宽度”，两者配合才能让浏览器选出最合适的资源。它们可以放在 <source></source> 里（此时只对该 <source></source> 生效），也可以放在 <img> 里（作为 fallback 的响应式配置）。

写在 <source></source> 里的 srcset 不会自动继承给 <img>，反之亦然
sizes 必须是媒体条件 + 宽度值的组合，例如 sizes="(max-width: 600px) 100vw, 50vw"，单独写 sizes="100vw" 是合法但无意义的（缺少条件）
如果只写 srcset 不写 sizes，浏览器按 1x 像素密度处理，无法触发高 DPR 设备的适配

常见错误：WebP fallback 失效、图片不加载

最常出问题的是 WebP 支持检测逻辑被绕过，或路径/类型写错。现代浏览器基本都支持 WebP，但旧版 Safari（type 的 fallback 才真正起作用。

确保 <source type="image/webp"></source> 的 srcset 指向真实存在的 .webp 文件，HTTP 响应头 Content-Type 必须是 image/webp
紧接其后的 <source type="image/jpeg"></source> 或直接写在 <img> 的 src，必须是 JPEG/PNG 等兼容格式
用 DevTools 的 Network 面板看实际加载的是哪个资源，比肉眼判断更可靠；禁用缓存再刷新，避免误判

真正麻烦的不是语法写错，而是 <source></source> 匹配了却加载失败（比如 404 的 WebP 路径），或者 <img> 的 src 指向一个不存在的占位图 —— 这些错误静默发生，页面只留空白，连控制台都不提醒。