HTML5 - 用<figure/>添加插图和图题

2015-08-19 发布：hangge 阅读：1471

1，什么是插图（figure）

插图与图片概念不太一样，HTML5规范建议我们把插图想象成一本书的附图。即插图虽然独立于文本，但文本中会提到它。

2，插图使用

（1）使用<figure>标签添加插图，并设置浮动，相关的文本可以在其附近围绕。

（2）<figure>标签内部还可以添加<figcaption>图题，其包含了对图片的完整说明。（添加图题后，alt文本就显得多余，可以去除）。

3，使用样例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>插图</title>
	<style>
		body {
		  font-family: "Helvetica","Hiragino Sans GB","Microsoft Yahei", sans-serif;
		  max-width: 650px;
		}
		.FloatFigure {
		  float: left;
		  margin-left: 0px;
		  margin-top: 0px;
		  margin-right: 20px;
		  margin-bottom: 0px;
		} 

		.FloatFigure figcaption {
		  max-width: 200px;
		  font-size: small;
		  font-style: italic;
		  margin-bottom: 5px;
		}
	</style>
</head>
<body>


<div class="Content">
	<p>一，前面讲了如何让程序申请后台短时运行。但这个额外延长的时间毕竟有限。所以从iOS7起又引入两种在后台运行任务的方式：后台获取和后台通知。</p>	
	<figure class="FloatFigure">
	   <img src="http://www.hangge.com/blog/images/logo.png">
	   <figcaption>做最好的开发者知识平台。做最好的开发者知识平台。</figcaption>
	</figure>
	<p>二，前面讲了如何让程序申请后台短时运行。但这个额外延长的时间毕竟有限。所以从iOS7起又引入两种在后台运行任务的方式：后台获取和后台通知。</p>
	<p>三，前面讲了如何让程序申请后台短时运行。但这个额外延长的时间毕竟有限。所以从iOS7起又引入两种在后台运行任务的方式：后台获取和后台通知。</p>
</div>

</body>
</html>