HTML5 figure標籤是什麼意思？ HTML5 figure標籤的使用方法詳解

HTML5 figure標籤是什麼意思？ HTML5 figure標籤的使用方法你想知道嗎？接下來介紹今天的這篇文章，主要講述了HTML5 figure標籤的定義和用法（附實例）

#HTML5

標籤的定義和用法：

#

標籤用於對元素進行組合。

標籤規定獨立的串流內容（圖像、圖表、照片、程式碼等等）。

元素的內容應該與主內容相關，同時元素的位置相對於主內容是獨立的。如果被刪除，則不應對文件流產生影響。

HTML5

標籤的實例：

文件中的一個小節，描述PRC：

<figure>
  <h1 id="PRC">PRC</h1>
  <p>The People&#39;s Republic of China was born in 1949...</p>
</figure>

提示：請使用

元素為元素組添加標題。

figure元素是一種元素的組合，可帶有標題（可選）。 figure標籤用來表示網站製作頁面上一塊獨立的內容，將其從網頁上移除後不會對網頁上的其他內容產生影響。 figure所表示的內容可以是圖片、統計圖或程式碼範例。

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

HTML5 figure標籤的作用：

之前看到一個很有趣的輪子：Hover效果，沒有使用JavaScript 程式碼，全部都是HTML CSS便實現了，用審查者工具看了下原始程式碼，發現HTML 的基本建構如下面所示：

<figure class="effect-julia">
  <img src="/static/imghwm/default1.png"  data-src="img/21.jpg"  class="lazy"   alt="img21"/>
  <figcaption>
    <h2 id="Passionate-nbsp-span-Julia-span">Passionate <span>Julia</span></h2>
    <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>

而我實作的原始碼中HTML部分的程式碼，實例比較：

<div class="hover-area area-Julia">
  <img  src="/static/imghwm/default1.png"  data-src="imgs/21.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="HTML5 figure標籤是什麼意思？ HTML5 figure標籤的使用方法詳解" >
  <h3 id="PASSIONATE-strong-JULIA-strong">PASSIONATE<strong>JULIA</strong></h3>
  <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>

很顯然的差異在於原本程式碼中使用了HTML5的新標籤

實現了頁面的基礎搭建，以下就簡單聊聊這個HTML5的新標籤

。

值得一提的是尤其提到獨立於文檔主流之外，是在官方文檔上面提到的，還提到了這個標籤包含的內容應該具有獨立性，可移植的，不影響主流內容。然後前文提到的描述這裡就是作為

的可選子標籤

中的內容。

現在回到之前我準備重複造的那個輪子，發現如果把對於圖片的描述內容全部都包裹在

標籤中，無論是語義上還是代碼結構上都更加的清晰。

HTML 4.01 與 HTML 5 之間的差異

標籤是 HTML 5 中的新標籤。

【相關推薦】

HTML5標籤是什麼意思？ HTML5標籤的基本用法詳解

#HTML5中的header標籤是什麼意思？ HTML5中header標籤具體使用方法你知道嗎？

#

以上是HTML5 figure標籤是什麼意思？ HTML5 figure標籤的使用方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！