HTML5每日一練之figure新標籤的應用

時間 2019-11-16

標籤 html5 html 每日 figure 標籤應用欄目 HTML5 简体版

原文原文鏈接

igure元素是一種元素的組合，可帶有標題（可選）。figure標籤用來表示網頁上一塊獨立的內容，將其從網頁上移除後不會對網頁上的其餘內容產生影響。figure所表示的內容能夠是圖片、統計圖或代碼示例。

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

注意：一個figure元素內最多隻容許放置一個figcaption元素，其餘元素可無限放置。

案例1：
不帶有標題的figure元素：html

<!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="W3C,W3Cfuns" src="http://www.w3cfuns.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="W3C,W3Cfuns" src="http://www.w3cfuns.com/template/w3cfuns2011/images/logo/logo.png"/>
<figcaption>W3Cfuns</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="W3C,W3Cfuns" src="http://www.w3cfuns.com/template/w3cfuns2011/images/logo/logo.png"/>
<img alt="前端工具箱" src="data/attachment/common/ee/common_185_icon.png"/>
<img alt="每日一練" src="data/attachment/common/04/common_180_icon.png"/>
<figcaption>W3Cfuns打造Web前端開發權威社區！</figcaption>
</figure>
</body>
</html>

複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。