在HTML5中<figure>元素内使用<picture>？</figure> </picture>

Question

在HTML5中，我们目前有一个<figure>元素，定义如下（W3C reference）

  

图元素表示内容单元，可选地带有标题，是自包含的，通常从文档的主流中引用为单个单元，并且可以远离主要流程文档不会影响文档的含义。

最近，Responsive Images Community group提出了一个新元素<picture>，并将其in the reference定义为

  

用于显示可能来自各种来源的图像的图片元素（请参阅srcset属性）。用户代理显示的图像取决于用于导出源图像的算法。

由于这两个描述似乎并不矛盾（图片上的文档还在 draft 状态），我的问题是：在技术上和语义上是否可能有嵌套{{1}以这种方式在picture元素内部？

figure

我在规格中没有找到关于它的参考资料。 ：\

注意：我知道目前没有浏览器实现这个元素，我只是用jQuery picture进行一些实验

谢谢。

Answer 1

Mat Marquis在这里 - 我是picture规范（http://picture.responsiveimages.org）的编辑之一。

简短回答是“是”，长答案是“明确的”。语义正确（figure可以包含图像，图表，表格，代码片段等），并且100％有效。

Answer 2

你不会发现它，因为它实际上还不是官方的，但我会假设答案是是，这很好。

目前，你做的事情如下：

<figure>
  <img src="image.jpg" alt="The Image">
  <figcaption>A Caption</figcaption>
</figure>

和<picture>只是一个为响应式网站提供多个src'd <img>的方法，所以在技术上看似乎 - 如果它被批准 - 你的例子是有效的。

Answer 3

是的，在<picture>标记中包含<figure>是正确的。我会通过Google的其中一项课程来证实这一点。

这在本视频中显示

https://youtu.be/StKZMBURZpk?t=29

Answer 4

图是block-level element。
图片是inline-level element。

块级元素可以包含行内级元素。
根据这个和以前的答案，将 picture 放在 figure 标签内是正确的。

Answer 5

是的，我们可以。现在它是官方的，我们也可以将它们用作响应式图片。

<figure> 标签指定自包含内容 Ex-Images。 <figure> 元素的内容独立于主流。如果我们删除它，它应该不会影响文档的流程。

<figcaption> 元素用于为 <figure> 元素添加标题。

<figure>
   <figcaption>Caption</figcaption>
</figure>

<picture> 标签在指定图像资源方面提供了更大的灵活性。我们可以有多个图像，而不是只有一张图像，它们可以将最适合的图像 A/Q 填充到浏览器的视口。

<picture>
   <source srcset="image-big.png" type="image/png" media="(min-width:1920px)"> 
   <source srcset="image-med.png" type="image/png" media="(min-width:1200px)"> 
   <source srcset="image-small.png" type="image/png" media="(min-width:700px)"> 
   <img src="backup.png" alt="Test" class="abc">
</picture>

<picture> 也可以与 <video> 和 <audio> 元素一起使用。它将以类似的方式工作。

所以，这是完全有效的。

<figure>
   <picture>
      <source srcset="image-big.png" type="image/png" media="(min-width:1920px)"> 
      <source srcset="image-med.png" type="image/png" media="(min-width:1200px)"> 
      <source srcset="image-small.png" type="image/png" media="(min-width:700px)"> 
      <img src="backup.png" alt="Test" class="abc">
   </picture>
   <figcaption>Caption</figcaption>
</figure>