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