figure標簽通過結合figcaption和img的alt屬性提升可訪問性，具體步驟如下：1. 為圖像添加清晰描述性的alt屬性；2. 使用figcaption提供簡潔標題或說明，幫助屏幕閱讀器用戶理解內容。正確使用語義化標簽有助于提升頁面結構清晰度和搜索引擎對內容的理解。
figure 標簽在 html 中代表一段獨立的內容，通常是圖像、圖表、照片、代碼示例等，并且它與文檔的主體內容相關，但如果被移除也不會影響文檔的理解。它就像一個“花瓶”，可以單獨存在，但放在合適的位置能讓整個房間更美觀。
figure 標簽用于包含獨立的、自包含的內容，例如圖像、圖表、代碼片段等。通常與 figcaption 標簽配合使用，用于為 figure 提供標題或描述。
如何正確使用 figure 標簽提升頁面可訪問性？
figure 標簽本身并沒有直接提升可訪問性的魔力，關鍵在于如何配合 figcaption 以及 alt 屬性使用。如果 figure 包含圖像，確保 img 標簽有清晰的 alt 屬性描述圖像內容。figcaption 應該簡潔明了地概括 figure 的內容，這對于使用屏幕閱讀器的用戶來說至關重要。想想看，如果你的圖表沒有標題，別人怎么知道它在說什么呢？
立即學習“前端免費學習筆記（深入）”；
<figure> @@##@@ <figcaption>圖1：2023年銷售額年度增長圖表</figcaption> </figure>
figure 標簽和 div 標簽有什么區別？何時應該使用 figure 而不是 div？
這是個好問題，很多人會混淆。div 是一個通用的容器，沒有任何語義。而 figure 具有明確的語義，表示獨立的內容單元。簡單來說，如果你的內容（圖像、代碼等）是獨立的、可以被移除而不會影響文章理解的，那就用 figure。如果只是為了布局或者樣式，那就用 div。就像放東西，div 是個隨便用的盒子，figure 是個專門放藝術品的展示柜。
想象一下，你正在寫一篇關于 HTML 語義化的文章。如果文章中包含一個代碼示例，展示如何使用 figure 標簽，那么這個代碼示例就應該放在 figure 標簽里。如果只是為了給代碼示例加個邊框，那就用 div。
除了圖片，figure 標簽還能包含哪些類型的內容？
figure 的用途遠不止包含圖片那么簡單。它可以包含任何獨立的、自包含的內容，例如：
- 代碼示例：展示一段代碼，并用 figcaption 解釋其作用。
- 圖表：例如使用 canvas 或者 SVG 繪制的圖表。
- 音頻/視頻：嵌入音頻或視頻文件。
- 表格：展示數據表格。
- 引言：雖然 blockquote 更常用，但在某些情況下，figure 配合 figcaption 也能很好地呈現引言。
<figure> <pre class="brush:php;toolbar:false"> <code> function helloWorld() { console.log("Hello, World!"); } </code>
關鍵在于，figure 里的內容應該是獨立的，可以被抽出來單獨理解的。
如何使用 css 控制 figure 和 figcaption 的樣式？
CSS 為 figure 和 figcaption 提供了豐富的樣式控制選項。你可以像控制任何其他 HTML 元素一樣控制它們的樣式。一些常見的用法包括：
- 調整尺寸和邊距：控制 figure 的寬度、高度、內外邊距。
- 設置背景顏色和邊框：美化 figure 的外觀。
- 控制 figcaption 的位置和字體：例如將 figcaption 放在 figure 的上方或下方，并設置合適的字體大小和顏色。
- 使用 Flexbox 或 Grid 布局：更靈活地控制 figure 和 figcaption 的布局。
figure { border: 1px solid #ccc; padding: 10px; margin: 20px; text-align: center; /* 讓 figcaption 居中 */ } figcaption { font-size: 0.8em; color: #666; }
記住，樣式應該服務于內容，而不是反過來。不要為了炫技而過度設計 figure 和 figcaption 的樣式。
figure 標簽對 SEO 有什么影響？
figure 標簽本身對 SEO 沒有直接的影響。搜索引擎更關注的是 figure 內部的內容，例如 img 標簽的 alt 屬性和 figcaption 的文本。確保 alt 屬性描述清晰，figcaption 概括準確，這有助于搜索引擎理解 figure 的內容，從而提升頁面在搜索結果中的排名。
可以把 figure 想象成一個禮品盒，搜索引擎更關心盒子里裝的是什么（alt 和 figcaption），而不是盒子本身是什么材質的。
