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. Android开发之短信验证码示例

    在说Android中的短信验证码这个知识点前,我们首先来了解下聚合数据 聚合数据介绍 聚合数据是一家国内最大的基础数据API提供商,专业从事互联网数据服务.免费提供从天气查询.空气质量.地图坐标到金融 ...

  2. #測试相关#Getting “junit.framework.AssertionFailedError: Forked Java VM exited abnormally” Exception

    编写Ant脚本进行持续測试的时候.出现了junit.framework.AssertionFailedError: Forked Java VM exited abnormally的报错,以此为key ...

  3. iscroll的理解

    1. 最佳的HTML结构如下: <div id="wrapper"> <ul> <li>...</li> <li>... ...

  4. XMPP系列(三）---获取好友列表、加入好友

    1.心跳检測.掉线重连功能 client和server端都能够设置多久发送一次心跳包,假设对方没有返回正确的pong信息,则会断开连接,而加入掉线重连功能,则会自己主动进行连接. 假设自己写聊天功能还 ...

  5. Canvas中图片翻转的应用

    很多时候拿到的素材都是单方向的,需要将其手动翻转来达到需求,比如下面这张图片: 它是朝右边方向的,但还需要一张朝左边方向的,于是不得不打开PS将其翻转然后做成雪碧图.如果只是一张图片还好说,但通常情况 ...

  6. 移动应用开发测试工具Bugtags集成和使用教程【转载】

    前段时间,有很多APP突然走红,最终却都是樱花一现.作为一个创业团队,突然爆红是非常难得的机会.然并卵,由于没有经过充分的测试,再加上用户的激增,APP闪退.服务器数据异常等问题就被暴露出来,用户的流 ...

  7. delphi 解析Json格式（转自：http://blog.csdn.net/jayqiang/article/details/7066824）

    SuperObject 是开源的 Delphi 的 JSON 工具包,可生成 JSON 数据以及进行 JSON 解析. unit Unit6; interface uses Windows, Mess ...

  8. vim与sublime

    vim与sublime 对程序员来说,写代码是再熟悉不过的事情了,windows系统自带有记事本软件,能写写小规模的代码,可是代码量大了,它的局限性就暴露得很明显了:没有语法高亮,没有自动提示,不支持 ...

  9. eclipse没有(添加)"Dynamic Web Project"选项的方法

    建议使用代理lantern,否则可能要花很长时间显示和下载插件 http://www.dabu.info/eclipse-no-add-dynamic-web-project-option.html ...

  10. __str__ 和 __unicode__ 的区别和用法

    转自:https://www.cnblogs.com/painberg/p/8514860.html 简而言之,就是__str__和__unicode__都是为了再管理站点中加载这个表时想显示什么属性 ...