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. python 操作excel实现替换特定内容

    本文介绍使用python语言,借助openyxl库来实现操作excel(xlsx)文件,实现替换特定内容的需求. 目前实现了3个小功能: 1. 全字匹配替换(mode1):(如:全字匹配 yocich ...

  2. BBPlus团队ALPFA冲刺（肖文恒）

    ALPHA冲刺博客 第一天:https://www.cnblogs.com/bbplus/p/11931039.html 第二天:https://www.cnblogs.com/bbplus/p/11 ...

  3. Laravel5.6---从头做一个项目web

    简介:类似论坛的项目,纯web,响应式,主要包含登录注册.支付.评论.富文本.文章列.个人中心等 目录: 1.初始化项目 ======================================= ...

  4. 一文看懂Java Worker 设计模式

    Worker模式 想解决的问题 异步执行一些任务,有返回或无返回结果 使用动机 有些时候想执行一些异步任务,如异步网络通信.daemon任务,但又不想去管理这任务的生命周.这个时候可以使用Worker ...

  5. java对象序列化和反序列化，redis存入和获取对象

    最近使用redis发现直接存储序列化后的对象更方便,现提供java序列化和反序列化的代码 1.序列化代码: public static byte[] serialize(Object object) ...

  6. zabbix监控内存

    取内存百分比 取出内存的可用的MB大小 / 总的内存大小 = 实际可用的百分比 avilable 710 X 100 / total 974 free -m|awk '/^Mem/{print $NF ...

  7. [LeetCode] 0752. Open the Lock 打开转盘锁

    题目 You have a lock in front of you with 4 circular wheels. Each wheel has 10 slots: '0', '1', '2', ' ...

  8. 2019-2020-1 20199301《Linux内核原理与分析》第六周作业

    第五章 系统调用的三层机制(下) 1.给MenuOS增加命令 代码如下: rm -rf menu git clone http://github.com/mengning/menu.git make ...

  9. 2019-2020-1 20199301《Linux内核原理与分析》第四周作业

    Week4 MenuOS的构造 一.上周复习 计算机的三大法宝: 存储程序计算机: 函数调用堆栈: 中断. 操作系统的两把宝剑: 中断上下文-保存现场和恢复现场 进程上下文 二.Linux内核源代码简 ...

  10. Centos6 克隆后简单的网络配置

    第一步:修改主机名 $ vi /etc/sysconfig/network     第二步: $ vi  /etc/udev/rules.d/70-persistent-net.rules   注: ...