HTML5中figure標(biāo)簽的作用

更新時(shí)間:2020-09-09 來(lái)源:黑馬程序員瀏覽量:

在HTML5中，figure標(biāo)簽用于定義獨(dú)立的流內(nèi)容(圖像、圖表、照片、代碼等)，一般指一個(gè)單獨(dú)的單元。figure元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，也不會(huì)對(duì)文檔流產(chǎn)生影響。figcaption元素用于為figure元素組添加標(biāo)題，一個(gè)figure元素內(nèi)最多允許使用一個(gè)figcaption元素，該元素應(yīng)該放在figure元素的第一個(gè)或者最后一個(gè)子元素的位置。

下面通過(guò)一個(gè)案例對(duì)figure和figcaption元素的用法進(jìn)行演示，如所示：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>figure和 figcaption元素的使用</title>
    </head>
<body>
    <p>被稱作“第四代體育館”的“鳥(niǎo)巢”國(guó)家體育場(chǎng)是 2008年北京奧運(yùn)會(huì)的標(biāo)志性建筑，它位于北京北四環(huán)邊，包含在奧林匹克國(guó)家森林公園之中。占地面積 20.4萬(wàn)平方米，總建筑面積 25.8萬(wàn)平方米，擁有 9.1萬(wàn)個(gè)固定座位，內(nèi)設(shè)餐廳、運(yùn)動(dòng)員休息室、更衣室等。2008年奧運(yùn)會(huì)期間，承擔(dān)開(kāi)幕式、閉幕式、田徑比賽、男子足球決賽等賽事活動(dòng)。</p>
    <figure>
　      <figcaption>北京鳥(niǎo)巢</figcaption>
　      <p>拍攝者：傳智播客內(nèi)容與資源組，拍攝時(shí)間：2020 年 20 月</p>
　      <img src="images/niaochao.jpg" alt="">
　</figure>
　</body>
</html>

頁(yè)面顯示效果如下：