快速提示：使用图形和图形元素的正确方法

> figure和figcaption元素是语义配对的HTML5标签，通常用于增强内容结构和可访问性。 本指南为其正确的实施提供了最佳实践。

>

figure元素封装了独立的内容，例如插图，代码片段或图表。 它在文档中的位置不会改变整体含义。 至关重要的是，并非每个图像都需要一个figure元素；只有那些是独立的信息单位。

>

图中的多个图像：>

多个相关图像可以存在于单个

元素中：> figure

<figure>
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847567268.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
</figure>

超越图像：

元素不限于图像。 它适用于：

figure代码块

>视频
音频剪辑
>广告
• >具有代码块的示例：

嵌套的图：

<figure>
  <code>
    p {
      color: #333;
      font-family: Helvetica, sans-serif;
      font-size: 1rem;
    }
  </code>
</figure>

在逻辑上适当时，

嵌套元素是可以接受的。 使用ARIA属性可以进一步改善语义：

figure有效的小提琴用法：

<figure role="group">
  <figcaption>Dog breeds</figcaption>
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
    <figcaption>Adorable Maltese Terrier</figcaption>
  </figure>
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
    <figcaption>Cute black labrador</figcaption>
  </figure>
</figure>

元素为提供了标题或传说。虽然并非总是必要的，但是当使用时，应该将其放置在>中的内容之前或之后。

>或：

figcaption figure figure丰富的花captions：

<figure>
  <figcaption>Three different breeds of dog.</figcaption>
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847567268.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
</figure>

有关更详细的字幕，包括标题和段落：>

<figure>
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847567268.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <figcaption>Three different breeds of dog.</figcaption>
</figure>

常见问题（常见问题解答）：

> 提供的常见问题解答部分在很大程度上保持不变，因为它准确地解决了有关

和

使用的常见问题。 该信息已经简洁且结构良好。

>

以上是快速提示：使用图形和图形元素的正确方法的详细内容。更多信息请关注PHP中文网其他相关文章！