首頁(yè)技術(shù)文章正文

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è)面顯示效果如下:
1599646218048_figcaption.jpg


猜你喜歡:

好用的前端開(kāi)發(fā)工具:這四款你必須知道!

web前端入門之圖片標(biāo)簽的使用【卡其漫畫(huà)5】

web前端進(jìn)階之百度地圖原理與應(yīng)用

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!