HTML <figure> 标签

<figure> 标签用于将图片、图表、音频、视频等媒体元素与其相关说明性内容进行关联。

语法

<figure>
  <!-- 媒体元素 -->
  <img src="image.jpg" alt="描述性文本">

  <!-- 相关说明性内容 -->
  <figcaption>图片标题</figcaption>
</figure>

属性

• id: 为 <figure> 元素定义唯一的标识符。
• class: 为 <figure> 元素定义一个或多个类名。
• style: 规定元素的样式。
• align: 规定元素相对于周围元素的对齐方式。

示例

// www.javascriptcn.com code example
<figure>
  <img src="image.jpg" alt="描述性文本">
  <figcaption>这是一张美丽的图片</figcaption>
</figure>

<figure>
  <video controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <figcaption>这是一个视频</figcaption>
</figure>

<figure>
  <audio controls>
    <source src="audio.mp3" type="audio/mp3">
    Your browser does not support the audio tag.
  </audio>
  <figcaption>这是一个音频文件</figcaption>
</figure>

通过 <figure> 标签，我们可以更好地组织和展示媒体元素，并为其提供相关的说明性内容，使页面内容更加清晰和易于理解。