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. 【SharePoint】SharePoint 2013 使用PreSaveAction自定义客户端验证

    使用PreSaveAction函数实现客户端自定义验证. 例:[项目编号]为空时,必须填写[责任者]项.(其中[项目编号]为单行文本框,[责任者]为用户/组选择框.) function PreSave ...

  2. java thin方式连接oracle数据库

    本文主要描述通过thin方式连接oracle数据库 1.创建web project ,将D:\oracle\product\10.2.0\db_1\jdbc\lib(oracle安装目录)下的ojdb ...

  3. WIFI NVRAM WARNING不同数字的含义

    1. NVRAM WARNING的意义 Wi-Fi Driver会去侦測手机上 MT6620 Wi-Fi NVRAM的状况,假设侦測结果有错误的话,会把 Error Code显示在SCAN Resul ...

  4. UNP学习笔记（第十六章 非阻塞I/O）

    套接字的默认状态时阻塞的 可能阻塞的套接字调用可分为以下4类: 1.输入操作,包括read.readv.recv.recvfrom和recvmsg. 2.输入操作,包括write.writev.sen ...

  5. vs 已经加入了引用，编译还是提示没有加入引用

    已经加入了引用,可是.编译还是通只是. 原因:项目总体框架是.Net FramWork4.5,nep中的框架也是4.5.而编译只是的project是4.0. 解决的方法:将编译只是的项目框架改为4.5

  6. mysql MHA报错 Can't exec "mysqlbinlog": No such file or directory at /usr/local/share/perl5/MHA/BinlogManager.pm line 99.

    如果发现如下错误: Can't exec "mysqlbinlog": No such file or directory at /usr/local/share/perl5/MH ...

  7. Python 2.7 升 3.4

    Ubuntu 14.04 已经安装有python3.4.0 命令行使用python3 或者创建链接即可 ln -s /usr/bin/python3 /usr/bin/python [推荐此方法,然后 ...

  8. WinForm程序打包工具InnoSetup使用说明图文教程

    WinForm程序打包工具InnoSetup使用说明图文教程 WinForm程序开发测试好了,如果将Debug/Release里面的文件发给客户使用,会让客户觉得你不够专业,但是使用VS自带的打包工具 ...

  9. os引导程序boot 在根目录区寻找os加载程序文件loader 对应的根目录条目

    [0]README 0.0) source code from orange's implemention of a os and for complete code , please visit h ...

  10. Hive总结（四）hive安装记录

    本篇为安装篇较简单: 前提: 1: 安装了hadoop-1.0.4(1.0.3也能够)正常执行 2:安装了hbase-0.94.3, 正常执行 接下来,安装Hive,基于已经安装好的hadoop.过程 ...