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

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

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

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

比如下面這段結(jié)構(gòu)：

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

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

為什麼應(yīng)該使用<figure>和<figcaption> ？

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

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

實(shí)際應(yīng)用中的幾種常見用法

圖片說明（最常見）

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

適合博客文章、新聞圖文、產(chǎn)品展示頁等。

多張圖片共享一個(gè)說明

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

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

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

不只是圖片，還可以是其他內(nèi)容

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

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

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

雖然<figure></figure>很實(shí)用，但也有一些容易出錯(cuò)的地方：

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

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

• 不要嵌套太多層級(jí)
  <figure></figure>應(yīng)該是一個(gè)獨(dú)立單元，裡面盡量不要嵌套太複雜的結(jié)構(gòu)。

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

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

以上是用html5圖和圖像結(jié)構(gòu)圖像和字幕的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！