HTML5中figure標(biāo)簽指的是什么意思

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

創(chuàng)新互聯(lián)公司是專(zhuān)業(yè)的海安網(wǎng)站建設(shè)公司，海安接單;提供成都網(wǎng)站建設(shè)、成都網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行海安網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

HTML5<figure>標(biāo)簽的定義和用法：

<figure> 標(biāo)簽用于對(duì)元素進(jìn)行組合。

<figure> 標(biāo)簽規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。

<figure> 元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，同時(shí)元素的位置相對(duì)于主內(nèi)容是獨(dú)立的。如果被刪除，則不應(yīng)對(duì)文檔流產(chǎn)生影響。

HTML5<figure>標(biāo)簽的實(shí)例：

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

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

提示：請(qǐng)使用 <figcaption> 元素為元素組添加標(biāo)題。

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

注意：一個(gè)figure元素內(nèi)最多只允許放置一個(gè)figcaption元素，其他元素可無(wú)限放置。

HTML5 figure標(biāo)簽的作用：

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

<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>

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

<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的新標(biāo)簽<figure>實(shí)現(xiàn)了頁(yè)面的基礎(chǔ)搭建，下面就簡(jiǎn)單聊聊這個(gè)HTML5的新標(biāo)簽<figure>。

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

現(xiàn)在回到之前我準(zhǔn)備重復(fù)造的那個(gè)輪子，發(fā)現(xiàn)如果把對(duì)于圖片的描述內(nèi)容全部都包裹在<figcaption>標(biāo)簽中，無(wú)論是語(yǔ)義上還是代碼結(jié)構(gòu)上都更加的清晰。

HTML 4.01 與 HTML 5 之間的差異

<figure> 標(biāo)簽是 HTML 5 中的新標(biāo)簽。

以上是HTML5中figure標(biāo)簽指的是什么意思的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱(chēng)：HTML5中figure標(biāo)簽指的是什么意思
本文路徑：http://muchs.cn/article44/ijogee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、虛擬主機(jī)、網(wǎng)站策劃、網(wǎng)站收錄、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、定制開(kāi)發(fā)

廣告

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

成都網(wǎng)站建設(shè)