figure和figcaption是兩個經常在一起使用的語義化元素。如果你還沒有在規范中了解過他們，沒有機會在項目中使用過他們，或者說現在對他們還是一無所知，這里就給大家講一些如何正確使用他們的小技巧。

figure元素經常用于圖片,如下所示:

figure元素表示內容的一個自包含單元。這就意味著你要么可以在文檔中向下移動該元素，要么使其處于文檔的底部，它都不會影響文檔的含義。

因此，我們需要記住，不是每一個圖片都是一個figure.

figure中有多張圖片

你可以在一個figure中放置多張圖片，如果這些圖片在你的文檔中存在上下文關系。

figure中也可以使用其它元素

figure元素不僅僅只限于圖片的使用，也適用于其他元素，如下:

代碼塊

視頻

音頻剪輯

廣告

這里有一個code 在 figure元素中的應用:

p {

color: #333;

font-family: Helvetica, sans-serif;

font-size: 1rem;

}

figure中嵌套figure

如果有意義，你可以在一個figure中嵌套另一個figure元素。這里一個ARIA role屬性被添加以改變語義。

Dog breeds

Adorable Maltese Terrier

Cute black labrador

有關于如何正確處理figure與figcaption元素與ARIA的使用關系，你可以看我之前寫過的一篇文章--如何在HTML5中正確使用ARIA？

有關于WAI-ARIA更多的教程，可以閱讀《WAI-ARIA 無障礙Web規范》一文。

正確使用figcaption

figcaption元素代表了figure元素的一個標題或者說是其相關解釋。

并不是每一個figure元素都需要一個figcaption。

但是在使用figcaption時，它最好是figure塊的第一個或者最后一個元素。

Three different breeds of dog.

或者:

Three different breeds of dog.

你也可以在figcaption中使用其它元素

你需要對一張圖片添加更多的語義，這時你可以使用多個元素，如:h1 和 p.

Puppy School

Championship Class of 2016

你有使用figure和figcaption元素的其他技巧嗎？如果有的話，歡迎在評論中與我們一起分享。

擴展閱讀

在校學生，本科計算機專業。一個積極進取、愛笑的女生，熱愛前端，喜歡與人交流分享。想要通過自己的努力做到心中的那個自己。微博：@靜-如秋葉

總結

以上是生活随笔為你收集整理的html5中figure怎么用,figure 和 figcaption 元素的正确使用方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。