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. iOS学习之字符串(NSString)的截取、匹配、分隔

    截取 NSString *str1 = @"this is zero"; 1.从第三个字符开始,截取长度为2的字符串.........注:空格算作一个字符 NSString *st ...

  2. [JAVASCRIPT][EXTJS]直接用JSON创建树形控件（Ext.tree.TreePanel ）(转)

    直接用JSON创建树形控件(Ext.tree.TreePanel ) 1.创建多个根节点的树形 2.直接使用JsonList创建树形 <!DOCTYPE HTML PUBLIC "-/ ...

  3. Mysql学习之事务的隔离性

    今天咱们说说事务,相信大家都知道事务的 ACID (Atomicity.Consistency.Isolation.Durability,即原子性.一致性.隔离性.持久性). 原子性:表示一个事务不可 ...

  4. python接口自动化18-multipart/form-data上传多个附件

    前言 reuqests上传一张图片到服务器,前面已经介绍过了,那么如何在提交BUG的时候,上传附件呢? 上传附件的时候,文件的name参数名称是一样的,python里面key是不可以重复的,又如何处理 ...

  5. linux-秘钥生成

    服务器sshd配置 #vim /etc/ssh/sshd_conf PubkeyAuthentication yes AuthorizedKeysFile .ssh/authorized_keys # ...

  6. 云计算第二阶段shell脚本

    pstree               #查看进程树 cat /etc/shells       #查看系统安装的所有shell解释器 yum -y install ksh             ...

  7. HDU-2204-Eddy's爱好-容斥求n以内有多少个数形如M^K

    HDU-2204-Eddy's爱好-容斥求n以内有多少个数形如M^K [Problem Description] 略 [Solution] 对于一个指数\(k\),找到一个最大的\(m\)使得\(m^ ...

  8. 零基础Python教程-函数及模块的使用

    函数 在学习本节内容之前,我们先来一起做道数学题. 已知:半径分别为0.1.0.2.0.3的三个圆,分别求这三个圆的面积. 很多读者可能要笑一下,这不是小学的数学问题吗? S = π * r * r ...

  9. LG4721 【模板】分治 FFT

    P4721 [模板]分治 FFT 题目背景 也可用多项式求逆解决. 题目描述 给定长度为 $n-1$ 的数组 $g[1],g[2],..,g[n-1]$,求 $f[0],f[1],..,f[n-1]$ ...

  10. 【贪心】Stripies POJ 1862

    题目描述:http://poj.org/problem?id=1862 题目大意:你有n个数要合并,每两个数x,y合并后得到2*sqrt(x*y).求最后留下的一个数的最小值. 每合并一次,就会有数被 ...