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

最新推荐文章于 2024-04-09 22:13:50 发布

沈成才

最新推荐文章于 2024-04-09 22:13:50 发布

阅读量4.7k

点赞数

分类专栏： HTML5/CSS3 文章标签： html5 图片标签插图

HTML5/CSS3 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

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>

原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_833.html

沈成才

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML5 - 用<figure/>添加插图和图题

1，什么是插图（figure）插图与图片概念不太一样，HTML5规范建议我们把插图想象成一本书的附图。即插图虽然独立于文本，但文本中会提到它。2，插图使用（1）使用<figure>标签添加插图，并设置浮动，相关的文本可以在其附近围绕。（2）<figure>标签内部还可以添加<figcaption>图题，其包含了对图片的完整说明。（添加图题后，alt文本就显得多余，可以去除）。3，使用样例
复制链接

扫一扫