快速提示：使用圖形和圖形元素的正確方法

> figure和figcaption元素是語義配對的HTML5標籤，通常用於增強內容結構和可訪問性。 本指南為其正確的實施提供了最佳實踐。

>

figure元素封裝了獨立的內容，例如插圖，代碼片段或圖表。 它在文檔中的位置不會改變整體含義。 至關重要的是，並非每個圖像都需要一個figure元素；只有那些是獨立的信息單位。

>

圖中的多個圖像：>

多個相關圖像可以存在於單個

元素中：> figure

<figure>
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847567268.jpg"  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/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
    <figcaption>Adorable Maltese Terrier</figcaption>
  </figure>
  <figure>
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg"  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/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847567268.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
</figure>

有關更詳細的字幕，包括標題和段落：>

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

常見問題（常見問題解答）：>

提供的常見問題解答部分在很大程度上保持不變，因為它準確地解決了有關

和

使用的常見問題。 該信息已經簡潔且結構良好。

<figure>
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018848099968.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <figcaption>
    <h2 id="Puppy-School">Puppy School</h2>
    <p>Championship Class of 2016</p>
  </figcaption>
</figure>

>

以上是快速提示：使用圖形和圖形元素的正確方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！