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. ThreadLocal源码及相关问题分析

    前言 在高并发的环境下,当我们使用一个公共的变量时如果不加锁会出现并发问题,例如SimpleDateFormat,但是加锁的话会影响性能,对于这种情况我们可以使用ThreadLocal.ThreadL ...

  2. 【JUC】4.Synchronized与ReentrantLock对比

    与synchronized相同,ReentrantLock也是一种互斥锁: synchronized与ReentrantLock的对比: 都是可重入锁 可以再次获取自己的内部锁,即:一个线程获取某对象 ...

  3. javascript_16-对象字面量

    JSON与对象字面量相似,仅仅是属性需要使用双引号引号引起. json是描述数据的一种规范 什么是JSON JavaScript Object Notation (JavaScript 对象表示形式) ...

  4. 【转】Guava cache使用总结

    缓存分为本地缓存和远端缓存.常见的远端缓存有Redis,MongoDB:本地缓存一般使用map的方式保存在本地内存中.一般我们在业务中操作缓存,都会操作缓存和数据源两部分.如:put数据时,先插入DB ...

  5. xinetd配置文件

    xinetd是一个超级守护进程xinetd即extended internet daemon,xinetd是新一代的网络守护进程服务程序,又叫超级Internet服务器.经常用来管理多 种轻量级Int ...

  6. 微信小程序API---数据缓存

    本地数据缓存常用于存储多页面用到的数据,例如用户头像信息. (1)数据存储 wx.setStorage(Object object)与wx.setStorageSync(string key, any ...

  7. Python练习题---判断回文数

    设n是一个任意自然数,如果n的各位数字反向排序所得的自然数与n相等,则n被称为回文数,从键盘输入一个5位数字 ,请编写程序判断这个数字是不是回文数. 思路:先获取一个字符串,再判断该字符串是否满足是自 ...

  8. DT6.0下搜索页解决canonical获取乱码问题

    最近研究dt6.0,官方内核默认是把搜索页屏蔽的,但是做seo的人都知道,搜索页聚合是争取排名的好地方,所以我就二次开发搜索页,具体可以查看前几期分享的,今天说说关于搜索的canonical的url乱 ...

  9. CTSC2010 珠宝商

    珠宝商 题目描述 Louis.PS 是一名精明的珠宝商,他出售的项链构造独特,很大程度上是因为他的制作方法与众不同.每次 Louis.PS 到达某个国家后,他会选择一条路径去遍历该国的城市.在到达一个 ...

  10. 使用Optional优雅处理null

    先假设一个场景.如下所示 public class Person { private String name; public Person() { } public Person(String nam ...