创建图 figure figcaption

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

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

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

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

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

创建图及其标题的步骤：

(1) 输入<figure>。

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

(3) 输入标题文字。。

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

(5) 输入</figure>。

例如：

 1 <body>
 2
 3 <article>
 4     <h1>2013 Revenue by Industry</h1>
 5
 6     <p>. . . [report content] . . .</p>
 7
 8     <figure>
 9         <figcaption><b>Figure 3:</b> Breakdown of Revenue by Industry</figcaption>
10
11         <img src="img/chart-revenue.png" width="180" height="143" alt="Revenue chart: Clothing 42%, Toys 36%, Food 22%" />
12     </figure>
13
14     <p>As Figure 3 illustrates, . . . </p>
15
16     <p>. . . [more report content] . . .</p>
17 </article>
18
19 </body>

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

提示：

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

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

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

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

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

提示：

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

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

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

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

提示：

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

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

转载于:https://www.cnblogs.com/Charons/p/11124128.html

创建图 figure figcaption相关推荐

深度学习框架TensorFlow（2.创建图，启动图）
1.下载好Anaconda,打开Jupyter,新建一个文件 2.直接看代码:里面有些的解释在上一节的图可以看出,本篇就不做解释 import tensorflow as tf#导入模块并且命名 #创 ...
HTML5 之 Figure Figcaption 标签
概述 figure 用于定义一个可附加标题的内容元素,figcaption 用于为figure元素添加标题和描述信息. 页面中的插图卡片比较常见,卡片中包含有图片的描述信息.标题或者按钮等. ...
【创建图的邻接矩阵和邻接表】
目录 1.创建图的邻接矩阵 1.1源码 1.2运行效果 2. 创建图的邻接表 2.1源码
hugegraph hubble安装、配置与创建图
官网有HugeGraph-Server 的安装教程,但是却缺了HugeGraph-Hubble的,只有它的使用教程,对于初学者来讲,真是头大.这里简要记录下其步骤. 1,下载 HugeGraph-Hu ...
NetworkX创建图
[A3]创建图-连接表和邻接表创建图连接表csv文件如下创建图 G = nx.DiGraph() #有向 G = nx.Graph() #无向 print(G.is_directed()) # 给 ...
Tensorflow—创建图
代码: import tensorflow as tf #创建常量op m1 = tf.constant([[3, 3]]) m2 = tf.constant([[2], [3]])#创建一个矩阵乘法 ...
[知识图谱构建] 二.《Neo4j基础入门》基础学习之创建图数据库节点及关系
该系列文章主要讲解知识图谱及Neo4j图数据库的用法,本篇文章是作者学习<Neo4j基础入门>书籍的在线笔记,主要讲解Neo4j的基础知识及基本语法,希望大家喜欢. 前文: [知识图谱构建 ...
小程序 | 使用GitHub创建图床存储器解决CDN配额耗尽问题
遇到的问题:使用云开发超出配额无法访问图片解决问题:使用图床来解决 1.创建一个新的存储库 2.获取令牌token 2.1 在右上角个人头像处选择setting,选择Developer settin ...
从文件中读取数据以创建图
背景:之前一直在控制台输入有关图所需的数据,可控制台极易输错,且要想达到好的测试效果,那么就需要大量数据,显然控制台输入太慢且费时,所以思考利用文件读取的方式. 文件格式如上图,第一行数据分别为边数与 ...

创建图 figure figcaption

创建图 figure figcaption相关推荐

最新文章

热门文章