小編給大家分享一下HTML5中figure標簽指的是什么意思，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

專注于為中小企業(yè)提供網(wǎng)站設計制作、網(wǎng)站制作服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)昂仁免費做網(wǎng)站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉變。

HTML5<figure>標簽的定義和用法：

<figure> 標簽用于對元素進行組合。

<figure> 標簽規(guī)定獨立的流內容（圖像、圖表、照片、代碼等等）。

<figure> 元素的內容應該與主內容相關，同時元素的位置相對于主內容是獨立的。如果被刪除，則不應對文檔流產(chǎn)生影響。

HTML5<figure>標簽的實例：

文檔中的一個小節(jié)，描述 PRC：

<figure>
  <h2>PRC</h2>
  <p>The People's Republic of China was born in 1949...</p>
</figure>

提示：請使用 <figcaption> 元素為元素組添加標題。

figure元素是一種元素的組合，可帶有標題（可選）。figure標簽用來表示網(wǎng)站制作頁面上一塊獨立的內容，將其從網(wǎng)頁上移除后不會對網(wǎng)頁上的其他內容產(chǎn)生影響。figure所表示的內容可以是圖片、統(tǒng)計圖或代碼示例。

注意：一個figure元素內最多只允許放置一個figcaption元素，其他元素可無限放置。

HTML5 figure標簽的作用：

之前看到一個很有趣的輪子：Hover效果，沒有使用 JavaScript 代碼，全部都是 HTML + CSS便實現(xiàn)了，用審查者工具看了下源代碼，發(fā)現(xiàn) HTML 的基本構造如下面所示：

<figure class="effect-julia">
  <img src="img/21.jpg" alt="img21"/>
  <figcaption>
    <h3>Passionate <span>Julia</span></h3>
    <div>
      <p>Julia dances in the deep dark</p>
      <p>She loves the smell of the ocean</p>
      <p>And dives into the morning light</p>
    </div>
    <a href="#">View more</a>
  </figcaption>         
</figure>

而我實現(xiàn)的源代碼中HTML部分的代碼，實例對比：

<div class="hover-area area-Julia">
  <img src="imgs/21.jpg" height="360" width="480">
  <h4>PASSIONATE<strong>JULIA</strong></h4>
  <ul>
    <li>Julia dances in the deep dark.</li>
    <li>She loves the smell of the ocean</li>
    <li>And dives into the morning light</li>
  </ul>
</div>

很顯然的區(qū)別是原本代碼中使用了HTML5的新標簽<figure>實現(xiàn)了頁面的基礎搭建，下面就簡單聊聊這個HTML5的新標簽<figure>。

值得一提的是尤其提到獨立于文檔主流之外，是在官方文檔上面提到的，還提到了這個標簽包含的內容應該具有獨立性，可移植的，不影響主流內容。然后前文提到的描述這里就是作為<figure>的可選子標簽<figcaption>中的內容。

現(xiàn)在回到之前我準備重復造的那個輪子，發(fā)現(xiàn)如果把對于圖片的描述內容全部都包裹在<figcaption>標簽中，無論是語義上還是代碼結構上都更加的清晰。

HTML 4.01 與 HTML 5 之間的差異

<figure> 標簽是 HTML 5 中的新標簽。

以上是HTML5中figure標簽指的是什么意思的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

文章標題：HTML5中figure標簽指的是什么意思-創(chuàng)新互聯(lián)
本文來源：http://chinadenli.net/article40/dijiho.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、建站公司、響應式網(wǎng)站、軟件開發(fā)、網(wǎng)站導航、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)