HTML5 - 用<figure/>添加插图和图题
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>