HTML5中<figure>内有多个<figcaption>的问题

Question

我想知道一个 figure 元素是否可以包含多个 figcaption 子元素？

我在某处读到过一些东西（抱歉，现在我找不到了），似乎表明它不能-但我确信一个 figure 可以包含多个 img，所以那似乎是不合逻辑的。

如果我有两幅相关的并排图片，我想要单独的标题怎么办？

- Inigo

---

在谷歌上搜索您的标题，得到了这样的结果：“只能在<figure>元素内嵌套一个<figcaption>元素，尽管<figure>元素本身可以包含多个其他子元素”。 - danronmoon

图片可以嵌套，因此您可以将每个图像包装在带有说明的figure元素中，并仍然使整个内容被一个figure元素所包含。 - Alohci

太好了，谢谢Alochi-这正是我在寻找的！如果你想把你的评论作为答案添加进来，我会接受的。 - Inigo

Answer 1

您可以将img和其figcaption嵌套到多个figure标记中。为了使代码更具语义性，您可以添加一个ARIA role属性。

<figure role="group">
    <figcaption>Caption for the whole group of images</figcaption>

    <figure>
        <img src="picture1.jpg" alt="Description of picture 1">
        <figcaption>Caption for Picture 1</figcaption>
    </figure>

    <figure>
        <img src="picture2.jpg" alt="Description of picture 2">
        <figcaption>Caption for Picture 2</figcaption>
    </figure>

</figure>

- Herr_Schwabullek

---

数字不能包含在 figcaptions 中。 - absynthe minded web smith

“within figcaptions”？我在代码中没有看到figcaption中的figure... 在我看来一切都是有效的。 - Herr_Schwabullek

我知道，但我无法撤销它。:( 如果有任何安慰的话，它也影响了我。 - absynthe minded web smith

Answer 2

在HTML5中，figure是一种 分区根元素。 它可以拥有分区根元素或流内容作为内容。一个figcaption是流内容，只能拥有流内容作为内容。因此，figcaption不能有figure作为内容。

然而，figure可以有另一个figure作为内容。请记住，figcaption必须是figure的第一个或最后一个子元素。

因此，代码可能看起来像这样：

<figure>
  <img>
  <figure>
    <figcaption></figcaption>
  </figure>
  <figcaption></figcaption>
</figure>

或者

<figure>
  <figcaption></figcaption>
  <img>
  <figure>
    <figcaption></figcaption>
  </figure>
</figure>

请参见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/figure和https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/figcaption。

- absynthe minded web smith

---

HTML5.1 希望改变这一点，以便 figcaption 可以放置在 figure 的任何位置。 - absynthe minded web smith

Answer 3

据我所见，您只能在 figure 中使用一次：http://www.w3schools.com/tags/tag_figcaption.asp。

- human

---

不应鼓励使用W3Schools作为权威参考。它不够精确且声誉不佳。 - code_monk