创建图 figure & figcaption
如报纸、杂志、报告等其他媒介上看到过图。通常,图是由页面上的文本引述出。
在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里面,不能单独出现在其他位置。
************************************************************************************
最新文章
- eclipse启动的时候报错 出现Java was started but returned exit code=13
- Angular2 组件
- Open Close Principle 开闭合原则
- AC6102 开发板千兆以太网UDP传输实验2
- linux下部署项目问题
- 1891: 丘比特的烦恼 - BZOJ
- Go推出的主要目的之一就是G内部大东西太多了,系统级开发巨型项目非常痛苦,Go定位取代C++,Go以简单取胜(KISS)
- 使用markdown及highlight
- struts2 标签库 介绍
- Google maps API开发(一)(转)
- poj 1236 Network of Schools【强连通求孤立强连通分支个数&;&;最少加多少条边使其成为强连通图】
- python 打印文件里的内容
- SQL语句50题
- VC GDI 像素转厘米(英寸)[转发]
- 理解不为人知的ClassLoader
- 协程gevent
- composer require aliyuncs/oss-sdk-php
- Linux下截屏方法
- 8 commands to check cpu information on Linux
- 【1】【JUC】Condition和生产者消费者模型