App下載

在html5中figure和figcaption的使用方法介紹!

猿友 2021-07-16 11:58:51 瀏覽數(shù) (3168)
反饋

今天我們來(lái)說(shuō)說(shuō)有關(guān)于:“在html5中figure和figcaption的使用方法介紹!”這方面的內(nèi)容,下面是小編整理的相關(guān)內(nèi)容,希望可以幫助到大家們。

figure 標(biāo)簽和 figcaption標(biāo)簽是 html5 新增的語(yǔ)義化標(biāo)簽。

figure標(biāo)簽,html5語(yǔ)義化標(biāo)簽。

用于規(guī)定獨(dú)立的流內(nèi)容(圖像、圖表、照片、代碼等等)。

figcaption標(biāo)簽,html5語(yǔ)義化標(biāo)簽。

與figure配套使用,用于標(biāo)簽定義 figure 元素的標(biāo)題。

用figure和figcaption標(biāo)簽的好處

搜索引擎搜索到figure的時(shí)候會(huì)知道,這里存放的是圖片、圖表、照片、代碼等媒體,不不會(huì)認(rèn)為這里存放的是文章等其他東西。搜索引擎搜索的時(shí)候更快捷更便利。
另一方面程序員在看的時(shí)候,看到這個(gè)標(biāo)簽的時(shí)候,就會(huì)知道,這里存在的就是圖片等媒體,便于閱讀。

下面用圖簡(jiǎn)單描述下這兩個(gè)標(biāo)簽的使用方法

案例1:

不帶有標(biāo)題的 figure 元素:

<figure>
    <img alt="W3Cschool" src="logo.png"/>
</figure>

案例2:

帶有標(biāo)題的 figure 元素:

<figure>
    <img alt="W3Cschool" src="logo.png"/>
    <figcaption>W3Cschool,W3Cschool是國(guó)內(nèi)專業(yè)的網(wǎng)站建設(shè)資源、腳本編程學(xué)習(xí)類網(wǎng)站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批處理、網(wǎng)頁(yè)制作、網(wǎng)絡(luò)編程、網(wǎng)站建設(shè)等編程資料</figcaption>
</figure>

案例3:

多個(gè)圖片,同一個(gè)標(biāo)題的 figure 元素:

<figure>
    <img alt="W3Cschool1" src="logo1.png"/>
    <img alt="W3Cschool2" src="logo2.png"/>
    <img alt="W3Cschool3" src="logo3.png"/>
    <figcaption>W3Cschool,W3Cschool是國(guó)內(nèi)專業(yè)的網(wǎng)站建設(shè)資源、腳本編程學(xué)習(xí)類網(wǎng)站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批處理、網(wǎng)頁(yè)制作、網(wǎng)絡(luò)編程、網(wǎng)站建設(shè)等編程資料</figcaption>
</figure>

那么今天有關(guān)于:“在html5中figure和figcaption的使用方法介紹!”這個(gè)介紹就到這里了,更多有相關(guān)html5方面的內(nèi)容都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。


0 人點(diǎn)贊