创建图 figure & figcaption

报纸、杂志、报告等其他媒介上看到过图。通常,图是由页面上的文本引述出。

HTML5出现之前,没有专门实现这个目的的元素,因此一些开发人员想出了他们自己的解决办法(通常会使用不那么理想的、没有语义的div元素)。

通过引入figurefigcaptionHTML5改变了这种情况。

图可以是图表、照片、图形 、插图、代码片段,以及其他类似的独立内容。

可以由页面上的其他内容引出figure,figcaptionfigure的标题,可选,出现在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里面,不能单独出现在其他位置。

************************************************************************************

原文地址:https://www.cnblogs.com/Charons/p/11124128.html