<picture> 内部只允许 <source> 和 <img>，且 <source> 必须在 <img> 前；<source> 是空元素，不可嵌套任何内容；<picture> 可作为流式内容嵌入块级容器，但不能置于 <p> 等内联上下文中。
<picture> 标签内部只允许嵌套 <source> 和 <img>，且顺序强制为 <source> 在前、<img> 在后。其他任何标签（如 <div>、<p>、<span>）都不能直接作为 <picture> 的子元素，否则会被浏览器静默移出或忽略。
为什么 <source> 必须在 <img> 之前？
浏览器按顺序解析 <source>，遇到第一个匹配条件（media 成立 或 type 受支持且 srcset 有可用资源）就立即加载并停止后续检查。如果 <img> 写在前面，它会变成“第一个可渲染节点”，所有 <source> 都被跳过——等效于没写 <picture>。
-
<source>是声明式规则，不渲染；<img>是最终 fallback，必须存在且带src和alt - 把
<img>放中间或末尾但漏掉src→ 页面留白，控制台无报错 - 多个
<source>时，应按匹配强度降序排列：比如media="(min-width: 1440px) and (min-resolution: 2dppx)"放最前，media="(max-width: 480px)"放最后
<source> 能否嵌套其他标签？
不能。<source> 是空元素（void element），不允许任何子内容，包括文本、注释、<span> 或换行符。哪怕写成：
<source srcset="a.webp" type="image/webp"> <!-- 这里是注释 --> </source>
浏览器也会直接忽略其中所有内容，且不会报错。验证器会提示“<source> 不允许有子节点”。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
立即学习“前端免费学习笔记（深入）”；
<picture> 外层能被哪些标签包裹？
<picture> 本身是流式内容元素（flow content），可以合法作为 <body>、<section>、<article>、<footer> 等块级容器的子元素，但不能嵌套在 <p>、<h1>–<h6>、<td> 或 <head> 中。
- 误塞进
<p>：浏览器自动将<picture>移出并闭合当前<p>，导致结构意外断裂 - 放在
<table>外但紧邻<tr>：可能被解析为表格前的匿名文本节点，影响布局 - 作为
<figure>子元素是推荐做法，语义清晰且兼容读屏器
最容易被忽略的是：<picture> 的合法性不等于功能性。结构正确但 media 写错括号、srcset 缺单位、服务器返回错误 Content-Type，都会让所有 <source> 静默失效，最终只走 <img src> —— 而你可能根本没意识到它已经退化成一张普通图。
