Question

我意识到在阅读规范后，我一直在使用<figure>元素。

数字元素表示内容单位，可选地带有标题，即自包含的，通常被称为a 来自文档主流的单个单元，可以移动远离文件的主流而不影响文件的含义。

如果我错了，请纠正我。对我来说，<figure>元素可以在页面中移动而不会给主要内容带来任何麻烦。

有人可以解释以下部分的含义吗？

通常从文档主流中引用为单个单元

还有一些可以使用figure元素的例子吗？

Answer 1

只要想到<figure>它与图书，杂志，学术文章等中的“数字”具有完全相同的目的。例如，一些作者用一个数字来说明一个想法，通常包括在文本中引用它，例如“参见图1 。”

通过“能够在不影响文档含义的情况下移动元素”，它说，因为你应该在文本的某处引用图形，所以将图形放在文档流中的位置并不重要（右侧面，底部，左侧，中心等。读者将会在文本中看到参见图1 注释，并自然地在页面上扫描带有标题的内容。 :(某些标题......）。

HTML是一种语义语言，因此不使用HTML中的<div>来实现此目的，而是使用<figure>标记更合适。就规范而言，它只是描述了在语义上最适合使用<figure>的时间和方式;它只是描述数字在现实世界中的使用方式，而是从HTML的角度来看。如果您发现自己在文档中使用<figure>元素，但文档中的任何文本都与图中的内容无关（博客旁边的公司徽标与未直接描述公司徽标的内容有关），或者你的元素的位置完全取决于它的位置（如按钮内的图标或用户的个人资料图像等），那么你不应该使用图形。

希望有所帮助。

另外，请看一下图here的示例用法：

<!DOCTYPE html>
<html>
<body>

<p>
    The Pulpit Rock is a massive cliff 604 metres (1982 feet) above
    Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. 
    The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) 
    square and almost flat, and is a famous tourist attraction in Norway. 

    <strong><a href='#figure1'>(See figure 1)</a></strong>
</p>

<figure id="figure1">
    <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
    <figcaption>Figure 1 - A view of the pulpit rock in Norway.</figcaption>
</figure>

</body>
</html>

请注意示例“文档”中的文本如何描述某个位置，作者使用图像作为插图。在一个大文档中，或者如果这个插图在页面中更远，作者可能会使用参见图... 表示法。

在文本中引用图形并不是一种语义上合理的方法。但是，请确保您的数字为<figcaption>，并在<strong>或<em>标记中引用该数字。您可以更进一步，将引用包装在链接到页面中图形的超链接中：

<strong><a href='#figure1'>Figure 1</a></strong>

我可以在图元素中添加什么样的内容？

1 个答案: