HTML5實例教程：figure標簽使用實例
2024-09-05 07:18:33
供稿：網友
網頁制作Webjx文章簡介：figure元素是一種元素的組合，可帶有標題（可選）。figure標簽用來表示網頁上一塊獨立的內容，將其從網頁上移除后不會對網頁上的其他內容產生影響。figure所表示的內容可以是圖片、統計圖或代碼示例。 figure元素是一種元素的組合，可帶有標題（可選）。figure標簽用來表示網頁上一塊獨立的內容，將其從網頁上移除后不會對網頁上的其他內容產生影響。figure所表示的內容可以是圖片、統計圖或代碼示例。
figure用友一個子標簽——figcaption標簽。
注意：一個figure元素內最多只允許放置一個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="網頁教學網" src="/upload/201202/20122201443416en.gif"/> <img alt="網頁教學網" src="/upload/201202/2012220144341yor.jpg"/> <figcaption>網頁教學網--中國網頁設計,網頁制作第一站！</figcaption> </figure> </body> </html>
