4.3　创建图

4.3　创建图

在出版行业，图和文字通常是相伴出现的。图可以是图表、图形、照片、插图、代码片段，等等。你很容易在报纸、杂志、报告等地方看到它们。本书的多数页面里也都有图。

在HTML5出现之前，没有专门实现这个目的的元素，因此一些开发人员想出了他们自己的解决办法（通常用到了不那么理想的、没有语义的div元素）。通过引入figure和figcaption，HTML5改变了这种情况。根据定义，figure指的是由文档主要内容引用的一块独立的内容（具有可选的标题）参见图4.3.1和图4.3.2。可选的figcaption是figure的标题，出现在figure内容的开头或结尾处（参见4.3.1）。

创建图及其标题的步骤

输入
。
作为可选步骤，输入
开始图的标题。
输入标题文字。
如果在第2、3步创建了标题，就输入。
通过添加图像、视频、数据表格等内容的代码以创建图。
如果没有在figure内容之前包含figcaption，则可以在内容之后重复第2～4.步。
输入。

提示　通常，figure是引用它的内容的一部分，参见图4.3.1，但它也可以位于页面的其他部分，或位于其他页面（如附录）。

...
<body>
 
<article>
    <h1>2011 Revenue by Industry</h1>
    ... [报告内容] ...
 
    <figure>
       <figcaption>Figure 3: 2011 Revenue by Industry</figcaption>
 
       <img src="chart-revenue.png" width="180" height="143" alt= "Revenue chart: Clothing 42%, Toys 36%, Food 22%" />
    </figure>
 
    <p>As Figure 3 illustrates, ... </p>
 
    ... [更多报告内容] ...
</article>
 
</body>
</html>

图4.3.1　这个figure只有一个图表，不过放置多个图像或其他类型的内容（如数据表格、视频等）也是允许的。figcaption元素并不是必需的，但如果包含它，它就必须是figure元素里的第一个或最后一个元素。figure没有默认样式，除了在现代浏览器中会出现在新的一行

提示　figure元素可以包含多个内容块。例如，图4.3.1中可以包含两个图表：一个表示收入，一个表示利润。不过要记住，不管figure里有多少内容，只允许有一个figcaption。

提示　不要简单地将figure用做在文本中嵌入独立内容实例的方法。这种情况下，通常更适合用aside元素（参见3.11节）。

提示　在HTML5中，figure元素也是一种区块根，这意味着它可以有h1～h6标题（及其自身的大纲），但文档大纲不会包含这些标题。这与分块内容是不一样的，参见3.4节。

提示　可选的figcaption必须与其他内容一起包含在figure里面，不能单独出现在其他位置。

提示　figcaption中的文本不必以Figure3、Exhibit B等字样开头，一段对内容的简短描述即可，就像图片的标题一样。

提示　如果要在figure中包含figcaption，它必须是figure的第一个或最后一个元素。

4.3　创建图 - 图1

图4.3.2　这个包含图表及其标题的figure出现在article文本中间。很容易使用CSS对该figure添加样式，例如为它添加边框，让文字环绕在它周围

4.3 创建图

4.3 创建图

4.3　创建图

4.3　创建图