HTML5實例教程：figure標簽使用實例

2024-09-05 07:18:33

字體：大中小

供稿：網(wǎng)友

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

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

figure用友一個子標簽——figcaption標簽。

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

案例1：
不帶有標題的figure元素：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML5每日一練之figure新標簽的應用-不帶有標題的figure元素</title> </head>
<body> <figure> <img alt="WEBJX.COM" src="/upload/201202/201222014434102f.png"/> </figure> </body> </html>

案例2：
帶有標題的figure元素：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML5每日一練之figure新標簽的應用-帶有標題的figure元素</title> </head>
<body> <figure> <img alt="VeVb.com" src="/upload/201202/20122201443410iq.png"/> <figcaption>WEBJX.COM</figcaption> </figure> </body> </html>

案例3：
多個圖片，同一個標題的figure元素：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML5每日一練之figure新標簽的應用-多個圖片，同一個標題的figure元素</title> </head>
<body> <figure> <img alt="WEBJX.COM" src="/upload/201202/2012220144341ri0.gif" /> <img alt="網(wǎng)頁教學網(wǎng)" src="/upload/201202/20122201443416en.gif"/> <img alt="網(wǎng)頁教學網(wǎng)" src="/upload/201202/2012220144341yor.jpg"/> <figcaption>網(wǎng)頁教學網(wǎng)--中國網(wǎng)頁設計,網(wǎng)頁制作第一站！</figcaption> </figure> </body> </html>

上一篇：HTML5實例教程：FileList對象實例代碼

下一篇：HTML5基礎教程:progress標簽使用實例