當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5中figure标签使用实例

發布時間：2025/6/15 HTML 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5中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=http://www.webjx.com/html-xhtml/"http://www.WEBJX.com/template/w3cfuns2011/images/logo/logo.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="webjx.com" src=http://www.webjx.com/html-xhtml/"http://www.webjx.com/template/w3cfuns2011/images/logo/logo.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=" http://www.webjx.com/images/logo.gif " />
<img alt="網奇" src=http://www.webjx.com/html-xhtml/"http://www.webjx.com/images/common/Logo.gif"/>
<img alt="網奇" src=http://www.webjx.com/html-xhtml/"http://www.webjx.com/images/bigLogo.jpg"/>
<figcaption>網站建設網--中國網站設計,網頁制作第一站！</figcaption>
</figure>
</body>
</html>

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的HTML5中figure标签使用实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：新元素之video,audio,mete
下一篇： HTML5 details 标签