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

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

通过引入figure和figcaption，HTML5改变了这种情况。

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

可以由页面上的其他内容引出figure，figcaption是figure的标题，可选，出现在figure内容的开头或结尾处。

创建图及其标题的步骤：

(1) 输入<figure>。

(2) 作为可选步骤，输入<figcaption>开始图的标题。

(3) 输入标题文字。。

(4) 添加图像、视频、数据表格等内容的代码创建图。

(5) 输入</figure>。

例如：

 <body>

 <article>

     <h1>2013 Revenue by Industry</h1>

     <p>. . . [report content] . . .</p>

     <figure>

         <figcaption><b>Figure 3:</b> Breakdown of Revenue by Industry</figcaption>

         <img src="img/chart-revenue.png" width="180" height="143" alt="Revenue chart: Clothing 42%, Toys 36%, Food 22%" />

     </figure>

     <p>As Figure 3 illustrates, . . . </p>

     <p>. . . [more report content] . . .</p>

 </article>

 </body>

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

提示：

figure元素可以包含多个内容块。

如图中可以包含两个图表：一个表示收入 ，一个表示利润。

不过要记住，不管figure里有多少内容，只允许有一个figcaption。

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

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

提示：

不要简单地将figure作为在文本中嵌入独立内容实例的方法。

这种情况下，通常更适合用aside元素。

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

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

提示：

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

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

创建图 figure & figcaption的更多相关文章

  1. matlab中figure创建图窗窗口

    来源:https://ww2.mathworks.cn/help/matlab/ref/figure.html?searchHighlight=figure&s_tid=doc_srchtit ...

  2. matlab中figure 创建图窗窗口

    来源:https://ww2.mathworks.cn/help/matlab/ref/figure.html?searchHighlight=figure&s_tid=doc_srchtit ...

  3. Tensorflow学习教程------创建图启动图

    Tensorflow作为目前最热门的机器学习框架之一,受到了工业界和学界的热门追捧.以下几章教程将记录本人学习tensorflow的一些过程. 在tensorflow这个框架里,可以讲是若数据类型,也 ...

  4. html5--2.9新的布局元素(6)-figure/figcaption

    html5--2.9新的布局元素(6)-figure/figcaption 学习要点 了解figure/figcaption元素的语义和用法 通过实例理解figure/figcaption元素的用法 ...

  5. html5的figure/figcaption讲解及实例

    html5的figure/figcaption讲解及实例 一.总结 一句话总结: figure元素:用来包着媒体资源,比如图片图表:是一个[媒体组合元素],也就是对其他的媒体元素进行组合,比如:图像. ...

  6. HTML<figure> <figcaption> 标签定义图文并茂

    本来想分两篇文章来解释说明figure.figcaption的,但是这俩个标签都是定义图文的,所以我们合起来讲解,大家更能容易接受. 大家在写xhtml.html中常常用到一种图片列表,图片+标题 或 ...

  7. 7、创建图及图的遍历（java实现）

    1.顺序表用于图的深度优先遍历 public class SeqList { public final int MaxSize = 10; public Object list[]; public i ...

  8. GitHub创建图床

    GitHub 写第一篇文章时发现从typora粘贴过来的文章会出现下面的情况 经常在Windows用typora的小伙一定遇到过一个问题:不管是用截图工具截图后直接粘贴,还是通过选择文件夹选择图片的方 ...

  9. Html5与Css3知识点拾遗（三）

    文本 small:包括免责申明.注意事项.法律限制.版权信息,只适用于短于,常包含在页面级的footer里 H5对i和b的重新定义 b:提醒文字.不传达任何额外的语气.文档摘要关键词.评论中的产品名. ...

随机推荐

  1. 华为交换机在Telnet登录下自动显示接口信息

    因为用console连接交换机,默认是自动显示接口信息的,比如down掉一个接口后,会自动弹出接口被down掉的信息,但是在telnet连接下,默认是不显示这些信息的,需要开启后才可显示. 1.首先开 ...

  2. 查找算法(7)--Hash search--哈希查找

    1.哈希查找 (1)什么是哈希表(Hash) 我们使用一个下标范围比较大的数组来存储元素.可以设计一个函数(哈希函数, 也叫做散列函数),使得每个元素的关键字都与一个函数值(即数组下标)相对应,于是用 ...

  3. SAP翔子_ABAP_DEMO篇索引

    序号 描述 SAP翔子_ABAP_DEMO篇1 ABAP DEMO篇1 单层反查BOM SAP翔子_ABAP_DEMO篇2 ABAP DEMO篇2 删除工艺路线 SAP翔子_ABAP_DEMO篇3 A ...

  4. 工控随笔_24_西门子TIA 博图硬件目录的更新

    西门子博图软件,不但体积庞大,功能也很复杂,与经典的Step7相比,如果不是经常使用,一般都会有一种很难使用的感觉. 而且相比原来的Step7操作有点不太一样.这里简单的说一下硬件目录的更新. 有两种 ...

  5. docker load tar.gz包失败解决方法

    执行docker load -i xxx.tar.gz时候报错 open /var/lib/docker/xxx No such file or directory 这种情况属于容器快照文件缺乏基础镜 ...

  6. Jeecg 支持多视图设置

    <!-- 视图解析器1:html视图解析器 必须先配置freemarkerConfig,注意html是没有prefix前缀属性的 --> <bean id="freemar ...

  7. Python的编码规范

    7. 什么是 PEP8? 8号Python增强提案,是针对Python代码格式而编写的风格指南 8. 了解 Python 之禅么? 通过 import this 语句可以获取其具体的内容.它告诉大家何 ...

  8. 在ensp上实现ospf与acl综合应用实例

    acl命令主要是进行控制 我们搭建一下拓扑图 实验内容 分析:1.我们需要规划多个ospf域 2.财务和研发部所在的区域不受其他区域链路不稳定性影响 3.在R1,R2,R3上设置acl规则,限制只有I ...

  9. charles 4.2.1 Ubuntu破解版安装

    charles 4.2.1 Ubuntu破解版安装 下载 charles-proxy-4.2.1_amd64.tar.gz 破解版 charles.jar 破解包 解压 sudo tar -zxvf ...

  10. LeetCode 394. 字符串解码(Decode String) 44

    394. 字符串解码 394. Decode String 题目描述 给定一个经过编码的字符串,返回它解码后的字符串. 编码规则为: k[encoded_string],表示其中方括号内部的 enco ...