figure標(biāo)簽和figcaption標(biāo)簽是html5新增的語義化標(biāo)簽。
figure標(biāo)簽,html5語義化標(biāo)簽。
用于規(guī)定獨立的流內(nèi)容(圖像、圖表、照片、代碼等等)。
figcaption標(biāo)簽,html5語義化標(biāo)簽。
與figure配套使用,用于標(biāo)簽定義figure元素的標(biāo)題。
用figure和figcaption標(biāo)簽的好處
搜索引擎搜索到figure的時候會知道,這里存放的是圖片、圖表、照片、代碼等媒體,不不會認(rèn)為這里存放的是文章等其他東西。搜索引擎搜索的時候更快捷更便利。
另一方面程序員在看的時候,看到這個標(biāo)簽的時候,就會知道,這里存在的就是圖片等媒體,便于閱讀。
下面用圖簡單描述下這兩個標(biāo)簽的使用方法
案例1:
不帶有標(biāo)題的figure元素:
<figure> <img style="margin: 0px; padding: 0px; outline: none; line-height: 25.2px; font-size: 14px; width: 660px; overflow: hidden; clear: both; font-family: tahoma, arial, "Microsoft YaHei";"><figure> <img <figcaption>VeVb武林網(wǎng),VeVb武林網(wǎng)是國內(nèi)專業(yè)的網(wǎng)站建設(shè)資源、腳本編程學(xué)習(xí)類網(wǎng)站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批處理、網(wǎng)頁制作、網(wǎng)絡(luò)編程、網(wǎng)站建設(shè)等編程資料</figcaption></figure>
案例3:
多個圖片,同一個標(biāo)題的figure元素:
<figure> <img <img <img <figcaption>VeVb武林網(wǎng),VeVb武林網(wǎng)是國內(nèi)專業(yè)的網(wǎng)站建設(shè)資源、腳本編程學(xué)習(xí)類網(wǎng)站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批處理、網(wǎng)頁制作、網(wǎng)絡(luò)編程、網(wǎng)站建設(shè)等編程資料</figcaption></figure>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點
疑難解答