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

更新時間:2020-09-09 來源:黑馬程序員瀏覽量:

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

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

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

頁面顯示效果如下：