如报纸、杂志、报告等其他媒介上看到过图。通常，图是由页面上的文本引述出。
在HTML5出现之前，没有专门实现这个目的的元素，因此一些开发人员想出了他们自己的解决办法（通常会使用不那么理想的、没有语义的div元素）。
通过引入figure和figcaption，HTML5改变了这种情况。
图可以是图表、照片、图形 、插图、代码片段，以及其他类似的独立内容。
可以由页面上的其他内容引出figure，figcaption是figure的标题，可选，出现在figure内容的开头或结尾处。
创建图及其标题的步骤：
(1) 输入<figure>。
(2) 作为可选步骤，输入<figcaption>开始图的标题。
(3) 输入标题文字。。
(4) 添加图像、视频、数据表格等内容的代码创建图。
(5) 输入</figure>。
例如：
- 1 <body>
- 2
- 3 <article>
- 4 <h1>2013 Revenue by Industry</h1>
- 5
- 6 <p>. . . [report content] . . .</p>
- 7
- 8 <figure>
- 9 <figcaption><b>Figure 3:</b> Breakdown of Revenue by Industry</figcaption>
- 10
- 11 <img src="img/chart-revenue.png" width="180" height="143" alt="Revenue chart: Clothing 42%, Toys 36%, Food 22%" />
- 12 </figure>
- 13
- 14 <p>As Figure 3 illustrates, . . . </p>
- 15
- 16 <p>. . . [more report content] . . .</p>
- 17 </article>
- 18
- 19 </body>
******************************************************************************************************************
提示：
figure元素可以包含多个内容块。
如图中可以包含两个图表：一个表示收入 ，一个表示利润。
不过要记住，不管figure里有多少内容，只允许有一个figcaption。
*******************************************************************************************************************
******************************************************************************************************************
提示：
不要简单地将figure作为在文本中嵌入独立内容实例的方法。
这种情况下，通常更适合用aside元素。
************************************************************************************
******************************************************************************************************************
提示：
可选的figcaption必须与其他内容一起包含在figure里面，不能单独出现在其他位置。
************************************************************************************
经验首页