在html中使用figure标签是为了实现内容的语义化独立。其主要作用包括增强语义性、提高可访问性、利于seo和方便内容管理。1.figure明确表示内容为独立单元，如图片、图表、代码示例等；2.便于屏幕阅读器理解结构，提升可访问性；3.帮助搜索引擎更好地解析页面内容；4.使内容易于移动、复制或删除。基本结构常结合figcaption标签使用，标题可置于开始或结尾。此外，figure不仅适用于图片，还可用于音频、视频、代码等内容类型。与div的区别在于，figure具有明确语义，而div仅为通用容器，适合仅需布局或样式化的场景。
figure 标签在 HTML 中用于表示独立的流内容，例如图片、图表、照片、代码示例等，通常带有标题（figcaption）。它允许你将这些内容与主要内容分离，但又保持它们的语义关联。
使用 figure 标签，你可以将图片、代码片段等独立内容包裹起来，并使用 figcaption 标签为其添加标题。这样既能保持内容的语义性，又能方便进行样式控制和布局调整。
为什么要在HTML中使用 figure 标签？
figure 标签的主要作用在于语义化。它明确地告诉浏览器和搜索引擎，这部分内容是一个独立的单元，可以被移动或删除，而不会影响文档的主要内容。这对于可访问性、SEO 和内容管理都有好处。
立即学习“前端免费学习笔记（深入）”；
- 增强语义性： 明确表示独立的内容单元。
- 提高可访问性： 方便屏幕阅读器理解内容结构。
- 利于SEO： 帮助搜索引擎更好地理解页面内容。
- 方便内容管理： 易于移动、复制或删除独立内容单元。
figure 标签的基本结构和用法
figure 标签通常与 figcaption 标签一起使用。figcaption 用于为 figure 元素提供标题或描述。
<figure> <img src="image.jpg" alt="示例图片"> <figcaption>这是一张示例图片</figcaption> </figure>
figcaption 标签可以放在 figure 元素的开头或结尾，具体取决于你的布局需求。
figure 标签的高级用法：不仅仅是图片
figure 标签不仅仅可以用于图片，还可以用于各种类型的独立内容，比如代码示例、图表、音频、视频等。
<figure>
<pre><code>
function helloWorld() {
console.log("Hello, World!");
}
</code></pre>
<figcaption>JavaScript代码示例</figcaption>
</figure>
<figure>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<figcaption>一段音频示例</figcaption>
</figure>你可以根据实际需要，将任何独立的、具有标题或描述的内容放在 figure 标签中。
figure 和 div 的区别：何时使用哪个？
很多人可能会疑惑，figure 和 div 都可以用来包裹内容，那么什么时候应该使用 figure，什么时候应该使用 div 呢？
关键在于语义。div 是一个通用的容器，没有任何语义。而 figure 则明确表示包含的是一个独立的、具有标题或描述的内容单元。
-
div： 用于组织和样式化页面内容，没有语义。 -
figure： 用于表示独立的流内容，具有语义。
如果你的内容是一个独立的单元，比如图片、图表、代码示例等，并且你希望明确地表达它的语义，那么应该使用 figure。如果你的内容只是为了布局或样式化的需要，那么可以使用 div。 简单来说，用 figure 标签可以使你的代码更具语义化，方便搜索引擎和屏幕阅读器理解，从而提升网站的可访问性和 SEO。
