<figure> 和<figcaption> 是HTML5 用於包裹獨立內容及其說明的語義化標籤。 1. <figure> 是容器元素，常用於包裹圖片、圖表等內容；2. <figcaption> 是其說明文字，置於<figure> 內頂部或底部。使用它們的好處包括：1. 提升語義化和可訪問性；2. 結構清晰便於維護；3. 有利於SEO；4. 方便樣式控制。常見用法有：1. 圖片加說明；2. 多圖共享一個說明；3. 包含代碼塊、視頻等內容。注意事項包括：1. 不要濫用，裝飾性圖片無需使用；2. 說明文字非必須；3. 避免嵌套複雜結構；4. 樣式需手動調整。

在網(wǎng)頁設計中，圖片和說明文字的搭配非常常見。 HTML5 提供了專門的標籤來規(guī)範這種結構—— <figure></figure>和<figcaption></figcaption> 。這兩個標籤不僅讓代碼更清晰，還能提升語義化和可訪問性。

什麼是<figure></figure>和<figcaption></figcaption> ？

<figure></figure>是一個容器元素，通常用來包裹圖片、圖表、插圖等獨立內容。而<figcaption></figcaption>則是它的“標題”或“說明”，可以放在<figure></figure>內部的頂部或底部，用來描述其中的內容。

比如下面這段結構：

 <figure>
  <img src="/static/imghw/default1.png"  data-src="example.jpg"  class="lazy" alt="用html5圖和圖像結構圖像和字幕">
  <figcaption>這是圖片的說明文字</figcaption>
</figure>

這樣寫的好處是：瀏覽器、搜索引擎和屏幕閱讀器都能清楚地知道這張圖片和對應的說明是一組內容。

為什麼應該使用<figure>和<figcaption> ？

很多開發(fā)者習慣直接用div 或p 標籤來放圖片和說明，但用<figure>和<figcaption>更加標準和合理。原因有幾個：

• 語義明確：告訴瀏覽器和輔助工具，這是一個圖片區(qū)塊，並配有說明。
• 結構清晰：方便後期維護，別人看你的代碼也能一眼看出哪個是圖片說明。
• SEO 友好：搜索引擎更容易理解圖片內容，有助於提升頁面排名。
• 樣式控制更方便：你可以單獨為<figure>設置邊距、背景、對齊方式等，不影響其他內容。

實際應用中的幾種常見用法

圖片說明（最常見）

 <figure>
  <img src="/static/imghw/default1.png"  data-src="photo.jpg"  class="lazy" alt="用html5圖和圖像結構圖像和字幕">
  <figcaption>這是一棵百年老樹</figcaption>
</figure>

適合博客文章、新聞圖文、產品展示頁等。

多張圖片共享一個說明

有時候你想放幾張相關圖片，然後統(tǒng)一加一個說明，也可以用<figure>包起來：

 <figure>
  <img src="/static/imghw/default1.png"  data-src="pic1.jpg"  class="lazy" alt="用html5圖和圖像結構圖像和字幕">
  <img src="/static/imghw/default1.png"  data-src="pic2.jpg"  class="lazy" alt="用html5圖和圖像結構圖像和字幕">
  <figcaption>這兩張圖展示了同一場景的不同角度</figcaption>
</figure>

注意：每個<figure>最好只配一個<figcaption> ，多個說明可能會引起歧義。

不只是圖片，還可以是其他內容

<figure>並不只能包含<img alt="用html5圖和圖像結構圖像和字幕" > ，它也適用於圖表、代碼塊、視頻等：

 <figure>
  <pre class="brush:php;toolbar:false"><code>console.log("Hello World");</code>

常見誤區(qū)與註意事項

雖然<figure></figure>很實用，但也有一些容易出錯的地方：

• 不要濫用<figure></figure>
  如果圖片只是裝飾性的（比如背景圖），就不需要用<figure></figure> ，普通<img alt="用html5圖和圖像結構圖像和字幕" >即可。

• 說明文字不是必須的
  <figure></figure>裡可以沒有<figcaption></figcaption> ，但如果需要說明，最好加上。

• 不要嵌套太多層級
  <figure></figure>應該是一個獨立單元，裡面盡量不要嵌套太複雜的結構。

• 樣式方面靈活處理
  默認情況下， <figcaption></figcaption>的字體大小和顏色可能和正文一樣，建議根據(jù)設計手動調整。

基本上就這些。用好<figure></figure>和<figcaption></figcaption> ，能讓你的HTML 結構更清晰、更具可讀性和可維護性。別小看這兩個標籤，它們在現(xiàn)代網(wǎng)頁開發(fā)中扮演著越來越重要的角色。

以上是用html5圖和圖像結構圖像和字幕的詳細內容。更多資訊請關注PHP中文網(wǎng)其他相關文章！