大家在寫xhtml、html中常常用到一種圖片列表,圖片+標(biāo)題或者圖片+標(biāo)題+簡(jiǎn)單描述。以前的常規(guī)寫法:
<li>
<img src="" /><p>title</P>
</li>
而在html5中有了新標(biāo)簽更能語(yǔ)義化的定義出這中圖片列表,那就是figure標(biāo)簽。
w3c賦予的定義:figure標(biāo)簽規(guī)定獨(dú)立的流內(nèi)容(圖像、圖表、照片、代碼等等)。figure 元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān),但如果被刪除,則不應(yīng)對(duì)文檔流產(chǎn)生影響。
實(shí)例代碼:
<figure>
<p>黃浦江上的的盧浦大橋</p>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
figure用來(lái)代替原來(lái)li標(biāo)簽,P標(biāo)簽誰(shuí)來(lái)取代呢?答案就是:figcaption
w3c賦予的定義:figcaption 標(biāo)簽定義 figure 元素的標(biāo)題(caption)。"figcaption" 元素應(yīng)該被置于 "figure" 元素的第一個(gè)或最后一個(gè)子元素的位置。
那么上面的代碼就變成了:
<figure>
<figcaption>黃浦江上的的盧浦大橋</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
新聞熱點(diǎn)
疑難解答
圖片精選