html5的figure/figcaption讲解及实例

一、总结

一句话总结：

figure元素：用来包着媒体资源，比如图片图表：是一个【媒体组合元素】，也就是对其他的媒体元素进行组合，比如：图像、图表等等
figcaption元素：figure的标题：用来给figure元素定义标题
<figure>

  <img src="p1.jpg" alt="" width="100">

  <img src="p2.jpg" alt="" width="100">

</figure>

<figcaption>我的厨艺作品1</figcaption>

1、figure+figcapture完全可以用div+h标签替代，那么他们存在的意义是什么？

有特殊的语义，让浏览器或者开发者更好的知道这段代码是什么意思

二、html5--2.9新的布局元素(6)-figure/figcaption

学习要点

  1. 了解figure/figcaption元素的语义和用法
  2. 通过实例理解figure/figcaption元素的用法
    1. figure元素
      • figure/figcaption都是HTML5中新增的元素
      • figure元素是一个媒体组合元素，也就是对其他的媒体元素进行组合，比如：图像、图表等等
    1. figcaption元素
      • 用来给figure元素定义标题。

实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

     <h2>我是一个厨艺爱好者</h2>

     <p>我是一个厨艺爱好者............</p>

     <figure>

         <img src="p1.jpg" alt="" width="100">

         <img src="p2.jpg" alt="" width="100">

     </figure>

     <figcaption>我的厨艺作品1</figcaption>

         <figure>

         <img src="p3.jpg" alt="" width="100">

         <img src="p4.jpg" alt="" width="100">

     </figure>

     <figcaption>我的厨艺作品2</figcaption>

 <body>

 </body>

 </html>
 

html5的figure/figcaption讲解及实例的更多相关文章

  1. html5标签figure、figcaption

    figure.figcaption,这俩个标签都是定义图文的 常常用到一种图片列表,图片+标题或者图片+标题+简单描述.以前的常规写法: <li> <img src="te ...

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

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

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

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

  4. 创建图 figure & figcaption

    如报纸.杂志.报告等其他媒介上看到过图.通常,图是由页面上的文本引述出. 在HTML5出现之前,没有专门实现这个目的的元素,因此一些开发人员想出了他们自己的解决办法(通常会使用不那么理想的.没有语义的 ...

  5. ehcache讲解及实例

    ehcache讲解及实例https://www.cnblogs.com/coprince/p/5984816.html 有些情形下注解式缓存是不起作用的:同一个bean内部方法调用,子类调用父类中有缓 ...

  6. HTML5 本地文件操作之FileSystemAPI实例（四）

    目录操作Demo二 1.删除目录 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSyst ...

  7. HTML5 本地文件操作之FileSystemAPI实例（三）

    文件夹操作demo 1.读取根目录文件夹内容 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFi ...

  8. HTML5 本地文件操作之FileSystemAPI实例（二）

    文件操作实例整理二 1.删除文件.复制文件.移动文件 //获取请求权限 window.requestFileSystem = window.requestFileSystem || window.we ...

  9. HTML5开发的翻页效果实例

    简介2010年F-i.com和Google Chrome团队合力致力于主题为<20 Things I Learned about Browsers and the Web>(www.20t ...

随机推荐

  1. [AIR] NativeExtension在IOS下的开发实例 --- IOS项目的创建 (一)

    来源:http://bbs.9ria.com/thread-102037-1-1.html 最近看到本版块的很多关于NativeExtension的应用.但是都是在Android下面的应用.也有很多朋 ...

  2. Win10 C盘 系统和保留 占用空间 非常大

    Win10 C盘 系统和保留 占用空间 非常大今天在写代码的时候,突然发现Redis起不来了,一看原因,是因为C盘空间不足.然后,我看了下C盘,发现...一个叫系统和保留的东西,居然占了110G的空间 ...

  3. 高效内存池的设计方案[c语言]

    一.前言概述 本人在转发的博文<内存池的设计和实现>中,详细阐述了系统默认内存分配函数malloc/free的缺点,以及进行内存池设计的原因,在此不再赘述.通过对Nginx内存池以及< ...

  4. uwsgi配置文件示例

    uwsgi配置文件参考 相关路径请根据自己项目的实际路径配置 在进行Nginx+uwsgi部署Django项目的时候,需要Nginx的配置中包含uwsgi的配置项,具体请查看另一篇:Nginx配置文件 ...

  5. MySQL查询（关联查询）

    一.mysql查询与权限 (一)数据库关联查询 **内连接查询(inner join)** 查询两个表共有的数据,交集 SELECT * FROM tb1 INNER JOIN tb2 ON 条件 所 ...

  6. MINST样例数据的神经网络学习

    标准的入门学习示例, 比一年前看的那书,更有感觉了. # coding: utf-8 try: import urllib.request except ImportError: raise Impo ...

  7. python的简介（解释器、变量、用户交互、if语句）

    一.python的起源 python是吉多·范罗苏姆(Guido van Rossum)在1989年的圣诞节期间因为无聊打发时间所开发的一个脚本解释程序. python是一门解释型.弱类型的编程语言. ...

  8. Spring-05 -AOP [面向切面编程] -Schema-based 实现aop的步骤

    一.AOP [知识点详解] AOP:中文名称面向切面编程 英文名称:(Aspect Oriented Programming) 正常程序执行流程都是纵向执行流程 3.1 又叫面向切面编程,在原有纵向执 ...

  9. Spring-02 -Spring 创建对象的三种方式 :1.通过构造方法创建/2.实例工厂/3.静态工厂

    通过构造方法创建  1.1 无参构造创建:默认情况. 1.2 有参构造创建:需要明确配置 1.2.1 需要在类中提供有参构造方法 1.2.2 在 applicationContext.xml 中设置调 ...

  10. mysql 连接过多解决方案

    方案1.登录mysql控制台:mysql -h192.168.20.199 -uroot -proot flush hosts 方案2.直接重启服务:service mysqld restart(暴力 ...