HTML <figure> 元素代表一段獨(dú)立的內(nèi)容, 經(jīng)常與說明(caption) <figcaption> 配合使用, 并且作為一個(gè)獨(dú)立的引用單元。當(dāng)它屬于主內(nèi)容流(main flow)時(shí),它的位置獨(dú)立于主體。這個(gè)標(biāo)簽經(jīng)常是在主文中引用的圖片,插圖,表格,代碼段等等,當(dāng)這部分轉(zhuǎn)移到附錄中或者其他頁面時(shí)不會(huì)影響到主體。
使用 <figure> 元素標(biāo)記文檔中的一個(gè)圖像:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(cainiaoplus.com)</title> </head> <body> <figure> <img src="views.png" alt="views" width="304" height="228"> </figure> </body> </html>測(cè)試看看 ?/?
IEFirefoxOperaChromeSafari
IE 9、Firefox、Opera、Chrome 和 Safari 支持 <figure> 標(biāo)簽。
注釋:IE 8 或更早版本的 IE 瀏覽器不支持 <figure> 標(biāo)簽。
<figure> 標(biāo)簽規(guī)定獨(dú)立的流內(nèi)容(圖像、圖表、照片、代碼等等)。
<figure> 元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān),同時(shí)元素的位置相對(duì)于主內(nèi)容是獨(dú)立的。如果被刪除,則不應(yīng)對(duì)文檔流產(chǎn)生影響。
通常,<figure>是圖像,插圖,圖表,代碼片段等,在文檔的主流程中引用,但可以移動(dòng)到文檔的另一部分或附錄而不影響主流程。
通過在其中插入<figcaption>(作為第一個(gè)或最后一個(gè)子元素),可以將標(biāo)題與<figure>元素相關(guān)聯(lián)。圖中找到的第一個(gè)<figcaption>元素顯示為圖的標(biāo)題。
<figure> 標(biāo)簽是 HTML 5 中的新標(biāo)簽。
提示:<figcaption> 元素被用來為 <figure> 元素定義標(biāo)題。
<figure> 標(biāo)簽支持 HTML 的全局屬性。
<figure> 標(biāo)簽支持 HTML 的事件屬性。