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. Direct-X学习笔记--纹理映射

    一.介绍 之前学习了如何绘制物体,还画了个DX自带的茶壶,然而这个东东并不怎么好看....离我们现实的物体简直相隔千里. 仅仅能说像美术他们用来写生的模型...那么要怎么样才干让我们的东西看起来更像真 ...

  2. JSON 值转换

    var Txt = '{"a":"1","b":"5","c":"5",&quo ...

  3. 【Excle数据透视表】如何移动数据透视表的位置

    数据透视表创建完成了,现在需要将它移动到D5位置,如何移动呢? 解决办法 通过"移动数据透视表"功能实现数据透视表的位置移动 步骤1 单击数据透视表任意单元格→数据透视表工具→分析 ...

  4. js:argument

    引用:http://www.cnblogs.com/lwbqqyumidi/archive/2012/12/03/2799833.html    http://www.cnblogs.com/Fskj ...

  5. Linux内存段的分析

        Linux 应用程序的内存分配中,是用 segment(段)进行区别的,使用 size 命令进行查看: size a.out text data bss dec hex filename a. ...

  6. POJ 2985 Treap平衡树（求第k大的元素）

    这题也能够用树状数组做,并且树状数组姿势更加优美.代码更加少,只是这个Treap树就是求第K大元素的专家--所以速度比較快. 这个也是从那本红书上拿的模板--自己找了资料百度了好久,才理解这个Trea ...

  7. Mysql 免密码登录，修改密码及忘记密码操作

    ----免密码登陆 方式一 my.cnf增加[client]标签 [client] user="root" password="你的密码" 单对定义不同的客户端 ...

  8. hibernate3中session.get()与session.load()两个方法的区别?

    1.发送sql的时机不同:load采用延迟加载技术,只有当真正去使用所查处的对象时,才会发送sql:get采用的是立即检索技术,当执行到get方法是就会立即发送sql. 2.返回的对象不同:load返 ...

  9. 12 nginx URL 重写 ecshop案例

    一:URL 重写 ecshop案例 Rewrite语法 Rewrite 正则表达式 定向后的位置 模式 Goods-3.html ---->Goods.php?goods_id=3 goods- ...

  10. 2015最流行的Android组件、工具、框架大全（转）

    转自:2015最流行的Android组件.工具.框架大全 Android 是目前最流行的移动操作系统之一. 随着新版本的不断发布, Android的功能也日益强大, 涌现了很多流行的应用程序, 也催生 ...