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--2.9新的布局元素(6)-figure/figcaption的更多相关文章

  1. html5--2.9新的布局元素(5)-hgroup/address

    html5--2.9新的布局元素(5)-hgroup/address 学习要点 了解hgroup/address元素的语义和用法 通过实例理解hgroup/address元素的用法 对照新元素布局与d ...

  2. html5--2.7新的布局元素(4)-time

    html5--2.7新的布局元素(4)-time 学习要点 了解微格式的概念 掌握time元素的用法 微格式的概念 HTML5中的微格式,是一种利用HTML5中的新标签对网页添加附加信息的方法,附加信 ...

  3. html5--2.1新的布局元素概述

    html5--2.1新的布局元素概述 学习要点 了解HTML5新标签(元素)的优点 了解本章要学习的新的布局元素 了解本章课程的安排 HTML5新标签的优点: 更注重于内容而不是形式 对人的友好:更加 ...

  4. html5--2.6新的布局元素(5)-nav

    html5--2.6新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素 aside元素通常用来设置侧边栏 ...

  5. html5--2.5新的布局元素(4)-aside/nav

    html5--2.5新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素(附属信息) aside元素通常用 ...

  6. html5--2.4新的布局元素(3)-section

    html5--2.4新的布局元素(3)-section 学习要点 了解section元素的语义和用法 通过实例理解section元素的用法 article元素和section元素的区别和共同点 art ...

  7. html5--2.3新的布局元素(2)-article

    html5--2.3新的布局元素(2)-article 学习要点 了解article元素的语义和用法 完成一个简单的实例 article元素(标签) 用于定义一个独立的内容区块,比如一篇文章,一篇博客 ...

  8. html5--2.1新的布局元素(1)-header/footer

    html5--2.1新的布局元素(1)-header/footer 学习要点 了解header/footer的语义和用法 使用header/footer进行一个简单的布局 header元素(标签) 用 ...

  9. HTML5中支持新的媒体元素有这些

    HTML5对媒体的支持性很强,支持以下媒体元素: · audio  定义音频 · video  定义视频 · embed  作为外部应用的容器 · source  多种媒体源的支持 · track   ...

随机推荐

  1. thinkphp5 中使用postgresql 缺少函数 table_msg

    参考解决办法 在postgresql 中执行命令 插入函数 https://blog.csdn.net/sinat_35767703/article/details/76070236?utm_sour ...

  2. Android设计中的尺寸问题

    Android把屏幕大小分成四种:small, normal, large, xlarge; 屏幕密度分成:low(ldpi), medium(mdpi), high(hdpi), extra hig ...

  3. hdu4405Aeroplane chess 概率dp水题

    //从0到n有n+1个格子 //对于格子i,掷一次骰子的数为x.那么能够从位置i到位置i+x //格子之间有连线,假设格子a和b有连线,那么从a到b不用掷骰子 //求从0到n的骰子掷的次数的期望 // ...

  4. 强制重启Linux系统的几种方法

    实际生产环境中某些情况下 Linux 服务器系统在出现致命错误需要远程进行重启,通过常规的 reboot.init 6 等方法无法正常重启(例如重启时卡在驱动程序里等情况),这时就需要通过下面介绍的几 ...

  5. ORA-01591错误的原因和处理方法

    http://blog.csdn.net/tclcaojun/article/details/6777022错误代码:ORA-01591 错误原因:使用了分布式事务,造成这个问题的原因很多时候都是由于 ...

  6. 【Sprint3冲刺之前】TD学生助手——alpha版发布

    TD学生助手——alpha版发布 1.设想和目标  1.我们的软件要解决的问题 TD学生助手的主要核心思想就是帮助学生安排他们忙碌的学校生活.主要是通过以下几个方面 1.通过学生的需要进行分类(考试, ...

  7. 制作FAT12软盘以查看软盘的根目录条目+文件属性+文件内容

    [-1]Before for specific info , please visit http://wiki.osdev.org/Loopback_Device [0]我们先上干货,看到效果后,我们 ...

  8. java 邮件(2)

    /**  * 方法描述:发送带附件的邮件  *   * @throws UnsupportedEncodingException  */  public static boolean sendEmai ...

  9. 利用python进行数据分析之pandas入门

    转自https://zhuanlan.zhihu.com/p/26100976 目录: 5.1 pandas 的数据结构介绍5.1.1 Series5.1.2 DataFrame5.1.3索引对象5. ...

  10. VS2013 自动添加头部注释 -C#开发

    在团队开发中,头部注释是必不可少的.但在开发每次新建一个类都要复制一个注释模块也很不爽,所以得想个办法让开发工具自动生成我们所需要的模板.....操作方法如下: 方法/步骤 1 找你的vs安装目录, ...