HTML5中图形元素的特殊用例

Question

请让我知道我对数字元素的理解是否准确。

据我所知，figure元素似乎有两种类型的子元素，有问题的对象(img、表、视频、引号等)和该对象的描述。因为图形中只能存在一个图形标题，所以描述它的任何和所有内容都必须包含在图形中。如果你想用文本跨过图形，那就需要用CSS来完成。

​

​

在上面的示例中，标记为：

<figure>
  <img src="#" alt="placeholder">
  <figcaption>
    <h2>Exhibit 1.1: Example of Something</h2>
    <p>Lorem...</p>
    <p>Ipsum...</p>
  </figcaption>
</figure>

figure {
  padding: 60px 10px 10px;
  position: relative;
  background: lightblue;
}
figure img {
  width: 100%;
  height: 50%;
  background: white;
}

figcaption h2 {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
}

这对我来说很笨拙。我对这个数字的假设是错误的吗？将其标记为接近最终外观，以便标题可以重排并更容易推理，这是可以接受的吗？如下所示：

<figure>
  <h2>Exhibit 1.1: Example of Something</h2>
  <img src="#" alt="placeholder">
  <figcaption>
    <p>Lorem...</p>
    <p>Ipsum...</p>
  </figcaption>
</figure>

Answer 1

你的评估很准确。以下是经过编辑的figcaption运行中的亮点...

1. 您只能有一个<figcaption>元素。
2. <figcaption>元素是<figure>，否则字幕内部将被视为与标题相关的“图形”(即，它可能是多个图像或代码示例等)
3. 如果您有很多“标题”，则应全部放入<代码>D12元素中。<代码>H213<代码>G214