<picture>不能替代<section>或<article>，因其仅为图像多源适配容器，无语义分组功能；正确模块化应使用<section>、<article>、<figure>等语义标签，<picture>仅置于最内层作为图像呈现层。
<picture> 不是用来搭建网页模块化结构的，它只负责图片资源的条件加载。拿它当模块容器，会破坏语义、干扰可访问性、导致 CSS 选择器失效。
为什么不能用 <picture> 替代 <section> 或 <article>
<picture> 是一个「内容替换容器」，不是「结构分组容器」。它的唯一职责是为同一个图像概念提供多源适配（如不同分辨率、格式、媒体查询），最终只渲染一个 <img>。浏览器不会把它当作 DOM 结构层级中的语义区块看待。
- 屏幕阅读器跳过
<picture>的语义边界，无法将其识别为“图集”“作品模块”或“轮播单元” - 在 CSS 中写
section > picture { margin-bottom: 2rem; }看似可行，但若后续换成<figure>就断层——这不是样式问题，而是语义错位 -
document.querySelectorAll('picture')返回的是图像载体集合，不是内容模块集合，JS 逻辑容易误判上下文
模块化结构该用什么标签？优先级顺序很明确
真正承担模块划分职责的是 HTML5 语义化区块标签，按使用场景和语义强度排序：
-
<section>：独立主题内容块，比如“人像作品集”“风景精选”“客户案例”——每个都应有<h2>标题 -
<article>：可独立分发/复用的内容单元，比如单张摄影作品带标题、描述、拍摄参数（适合 RSS 或分享） -
<figure>：图像及其说明的语义组合体，必须配<figcaption>，是<picture>的合法父容器 -
<aside>：辅助性图注、技术参数栏、摄影师信息侧边栏等非主线内容
例如正确嵌套：
<section class="gallery">
<h2>胶片人像系列</h2>
<figure>
<picture>
<source srcset="port-1.avif" type="image/avif">
<source srcset="port-1.webp" type="image/webp">
<img src="port-1.jpg" alt="黑白胶片风格肖像，浅景深，自然光">
</picture>
<figcaption>《晨光》｜ISO 400 · f/2.8 · 1/125s</figcaption>
</figure>
</section>
<picture> 在模块中该出现在哪一层？
它只能作为「图像呈现层」，永远处于模块结构的最内层，且必须包裹在 <figure> 或 <article> 内部。常见错误包括：
立即学习“前端免费学习笔记（深入）”；
- 把整个相册列表写成一个
<picture>—— 语法非法，浏览器直接忽略多余<source> - 在
<section>直接放<picture>而不套<figure>—— 丢失图像与说明的语义关联，WCAG 检查失败 - 用
<picture>包裹按钮、文字、SVG 图标 —— 它只接受<source>和<img>，其他子元素被静默丢弃
记住：模块靠 <section> 划分，图文关系靠 <figure> 绑定，多源适配靠 <picture> 执行——三层各司其职，不可越界。
最容易被忽略的是 <picture> 的 fallback 行为：当所有 <source> 都不匹配时，浏览器仍会加载 <img> 的 src。所以 <img> 的 alt 必须准确描述图像本体，不能写“请启用 WebP”之类无效文本。
