html5中figure和figcaption怎么使用

本篇內容主要講解“html5中figure和figcaption怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“html5中figure和figcaption怎么使用”吧!

figure 標簽和 figcaption標簽是 html5 新增的語義化標簽。

figure標簽，html5語義化標簽。

用于規定獨立的流內容（圖像、圖表、照片、代碼等等）。

figcaption標簽，html5語義化標簽。

與figure配套使用，用于標簽定義 figure 元素的標題。

用figure和figcaption標簽的好處

搜索引擎搜索到figure的時候會知道，這里存放的是圖片、圖表、照片、代碼等媒體，不不會認為這里存放的是文章等其他東西。搜索引擎搜索的時候更快捷更便利。
另一方面程序員在看的時候，看到這個標簽的時候，就會知道，這里存在的就是圖片等媒體，便于閱讀。

下面用圖簡單描述下這兩個標簽的使用方法

案例1：

不帶有標題的 figure 元素：

<figure>
    <img alt="W3Cschool" src="logo.png"/>
</figure>

案例2：

帶有標題的 figure 元素：

<figure>
    <img alt="W3Cschool" src="logo.png"/>
    <figcaption>W3Cschool，W3Cschool是國內專業的網站建設資源、腳本編程學習類網站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批處理、網頁制作、網絡編程、網站建設等編程資料</figcaption>
</figure>

案例3：

多個圖片，同一個標題的 figure 元素：

<figure>
    <img alt="W3Cschool1" src="logo1.png"/>
    <img alt="W3Cschool2" src="logo2.png"/>
    <img alt="W3Cschool3" src="logo3.png"/>
    <figcaption>W3Cschool，W3Cschool是國內專業的網站建設資源、腳本編程學習類網站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批處理、網頁制作、網絡編程、網站建設等編程資料</figcaption>
</figure>

到此，相信大家對“html5中figure和figcaption怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！