使用 HTML 的 <figure> 和 <figcaption> 可以直觀且語義清晰地為圖片或媒體添加說明文字。1. <figure> 用于包裹獨(dú)立的媒體內(nèi)容，如圖片、視頻或代碼塊；2. <figcaption> 則作為其說明文字，置于 <figure> 內(nèi)部，可位于媒體上方或下方；3. 它們不僅提升頁面結(jié)構(gòu)清晰度，還增強(qiáng)可訪問性和 SEO 效果；4. 使用時應(yīng)注意避免濫用，適用于需強(qiáng)調(diào)并附帶說明的內(nèi)容，而非普通裝飾圖；5. 不可忽視 的 alt 屬性，它與 figcaption 的作用不同；6. figcaption 位置靈活，可根據(jù)需要放在 figure 內(nèi)頂部或底部。正確使用這兩個標(biāo)簽，有助于構(gòu)建語義清晰、易于理解的網(wǎng)頁內(nèi)容。

給圖片或媒體添加說明文字時，用 HTML 的 <figure></figure> 和 <figcaption></figcaption> 是個很直觀又語義清晰的做法。它們不僅能幫助組織頁面結(jié)構(gòu)，還能提升可訪問性和 SEO 效果。關(guān)鍵在于理解這兩個標(biāo)簽的用途和正確寫法。

基本結(jié)構(gòu)：怎么把圖和說明文字聯(lián)系起來

<figure></figure> 標(biāo)簽用來包裹一個獨(dú)立的內(nèi)容塊，比如圖片、圖表、視頻等；而 <figcaption></figcaption> 則是它的“標(biāo)題”或“說明文字”，通常放在 <figure></figure> 里面，可以出現(xiàn)在內(nèi)容的前面或后面。

舉個例子：

<figure>
  <img src="/static/imghw/default1.png"  data-src="example.jpg"  class="lazy" alt="如何使用HTML圖和Figcaption元素將字幕與圖像或媒體關(guān)聯(lián)？">
  <figcaption>這是一段對圖片的簡要說明</figcaption>
</figure>

這樣瀏覽器和屏幕閱讀器就知道這段文字是對這張圖片的描述。你也可以把 <figcaption> 放在 <figure> 最上面，讓說明文字顯示在圖片上方。

多種媒體都適用，不只是圖片

雖然最常見的是搭配 <img src="/static/imghw/default1.png" data-src="example.mp4" class="lazy" alt="如何使用HTML圖和Figcaption元素將字幕與圖像或媒體關(guān)聯(lián)？" > 使用，但 <figure> 和 <figcaption> 同樣適用于其他類型的媒體，比如音頻、視頻或者代碼塊。

比如嵌入一段視頻加上說明：

<figure>
  <video controls>
    <source type="video/mp4">
    您的瀏覽器不支持視頻播放。
  </video>
  <figcaption>這是一個演示視頻，展示產(chǎn)品使用過程</figcaption>
</figure>

再比如展示一段代碼：

<figure>
  <pre class="brush:php;toolbar:false"><code>function helloWorld() { console.log("Hello, world!"); }</code>

只要內(nèi)容是一個“獨(dú)立單元”，都可以考慮用 <figure></figure> 包裹，并用 <figcaption></figcaption> 加上說明。

實(shí)際應(yīng)用中要注意的幾個細(xì)節(jié)

• 不要濫用：如果只是普通的內(nèi)聯(lián)圖片（比如文章中的裝飾圖），就沒必要用 <figure></figure>。它更適合需要單獨(dú)強(qiáng)調(diào)、帶說明的媒體內(nèi)容。
• 語義優(yōu)先：這些標(biāo)簽主要作用是增強(qiáng)文檔語義，而不是樣式布局。雖然你可以用 CSS 自定義樣式，但別為了排版而強(qiáng)行套用。
• alt 文字仍重要：即使有 <figcaption></figcaption>，也別忘了 <img alt="如何使用HTML圖和Figcaption元素將字幕與圖像或媒體關(guān)聯(lián)？" > 的 alt 屬性。它們的作用不同：alt 是圖像本身不可見時的替代文本，而 figcaption 是附加說明。
• 位置靈活：<figcaption></figcaption> 可以放在 <figure></figure> 內(nèi)部的頂部或底部，取決于你想讓它出現(xiàn)在媒體上方還是下方。

基本上就這些

總的來說，<figure></figure> 和 <figcaption></figcaption> 是 HTML 中非常實(shí)用的一組標(biāo)簽，用來為媒體內(nèi)容添加說明。它們不僅讓結(jié)構(gòu)更清晰，也有助于無障礙訪問和搜索引擎識別內(nèi)容意圖。用的時候注意語義和場景，別過度使用就行。

以上是如何使用HTML圖和Figcaption元素將字幕與圖像或媒體關(guān)聯(lián)？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！