HTML中picture标签不支持figcaption？如何兼顾响应式图片与图注

• picture标签不能直接放figcaption：按照HTML的规范，picture元素的合法子元素只有source标签和一个img标签，figcaption不属于它的允许子元素，所以你之前在picture里加figcaption的写法无效是正常的。
• 根本不需要二选一：完全可以在同一个父容器下同时实现多source的响应式图片和figcaption图注，正确的做法是用figure作为外层容器，内部先放包含source和img的picture，再放figcaption。

举个符合规范的示例代码：

<figure>
  <picture>
    <source media="(max-width: 600px)" srcset="small-img.jpg">
    <source media="(min-width: 601px)" srcset="large-img.jpg">
    <img src="fallback-img.jpg" alt="图片的描述文字">
  </picture>
  <figcaption>这里是这张响应式图片的图注内容</figcaption>
</figure>

这个结构既符合HTML语义化标准，又完美满足了你同时使用响应式图片和图注的需求。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD