HTML5 figure元素

figure元素

在HTML中，通过 figure元素来定义一块独立的内容，如图像、图表、照片、图形、插图、代码片段等。并且，figure元素的内容应该与主内容相关，而且独立于上下文，如果删除，也不应对文档流产生影响。

在 figure元素中，通过 figcaption元素来定义内容的标题（caption）。figcaption元素并不是必需的，但如果包含它，它就必须是 figure元素的第一个子元素或最后一个子元素。并且，一个 figure元素可以包含多个内容块，但无论 figure元素里面有多少个内容块，最多只允许有一个 figcaption元素。如：

1. <figure>
2.    <figcaption>Browser market share, April, 2011</figcaption>
3.    <img src="broswer.png">
4. </figure>

运行结果如图 2‑11 所示：

图2-11 figure元素

除图片外，figure元素中还可以放置代码块、视频、音频片段、引用、表格、代码、广告，或任何与这些相关的组合。如，以下代码使用 figure元素来标记核心接口API列表：

1. <figure>
2.     <figcaption>List4 The primary core interface API declaration.</figcaption>
3.     <pre>
4.     <code>
5.     interface PrimaryCore {
6.         boolean verifyDataLine();
7.         void sendData(in sequence<byte> data);
8.         void initSelfDestruct();
9.     }
10.     </code>
11.     </pre>
12. </figure>

    版权声明：本文出自 歪脖网 的《HTML5宝典》，欢迎在线阅读，并提出宝贵意见。