igure元素是一种元素的组合，可带有标题（可选）。figure标签用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生影响。figure所表示的内容可以是图片、统计图或代码示例。

figure用友一个子标签——figcaption标签。

注意：一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。

案例1：
不带有标题的figure元素：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>HTML5每日一练之figure新标签的应用-不带有标题的figure元素</title>
  6. </head>
  7. <body>
  8. <figure>
  9. <img alt="W3C,W3Cfuns" src="http://www.w3cfuns.com/template/w3cfuns2011/images/logo/logo.png"/>
  10. </figure>
  11. </body>
  12. </html>

复制代码

案例2：
带有标题的figure元素：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>HTML5每日一练之figure新标签的应用-带有标题的figure元素</title>
  6. </head>
  7. <body>
  8. <figure>
  9. <img alt="W3C,W3Cfuns" src="http://www.w3cfuns.com/template/w3cfuns2011/images/logo/logo.png"/>
  10. <figcaption>W3Cfuns</figcaption>
  11. </figure>
  12. </body>
  13. </html>

复制代码

案例3：
多个图片，同一个标题的figure元素：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>HTML5每日一练之figure新标签的应用-多个图片，同一个标题的figure元素</title>
  6. </head>
  7. <body>
  8. <figure>
  9. <img alt="W3C,W3Cfuns" src="http://www.w3cfuns.com/template/w3cfuns2011/images/logo/logo.png"/>
  10. <img alt="前端工具箱" src="data/attachment/common/ee/common_185_icon.png"/>
  11. <img alt="每日一练" src="data/attachment/common/04/common_180_icon.png"/>
  12. <figcaption>W3Cfuns打造Web前端开发权威社区！</figcaption>
  13. </figure>
  14. </body>
  15. </html>

复制代码

HTML5每日一练之figure新标签的应用的更多相关文章

  1. HTML5每日一练之input新增加的5种其他类型1种标签应用

    今天介绍input在HTML5中的最后5种类型,分别是:number,range,search,tel和color 注意:此种类型的input在Opera10+中效果为佳,Chrome中效果不是十分好 ...

  2. HTML5每日一练之input新增加的六种时间类型应用

    今天介绍一下input在HTML5中新增加的时间类型的应用,与昨天的练习一样,如果在以下这几种输入框中输入的格式不正确,也是无法提交的. 注意:此种类型的input在Opera10+中效果为佳,Chr ...

  3. HTML5每日一练之input新增加的URL类型与email类型应用

    1.URL类型: <form> <input name="urls" type="url" value="http://www.w3 ...

  4. HTML5每日一练之details展开收缩标签的应用

    details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击su ...

  5. HTML5每日一练之progress标签的应用

    progress标签:从名字上来看,估计大家也能猜到这个标签是什么标签了,没错,他是一个进度条.在HTML5中我们终于可以不用模拟了. <progress id="W3Cfuns_pr ...

  6. html5学习笔记（1）-新标签

    最近在做的项目中用到了Html5的部分标签,经师父提醒感觉自己用section的次数多的有点过分,今天去找了一篇HTML5新标签的使用方法,特意贴了上来,感谢原作者的分享,方便以后自己使用~~~ HT ...

  7. HTML5每日一练之视频标签的应用

    与音频一样,在过去,我们如果想在Web上播放视频,也是都是通过Flash来播放,同样并不是所有的浏览器都安装了Flash播放器插件,而现在我们在HTML5中,就能完全脱离Flash或其他的插件来播放视 ...

  8. HTML5每日一练之OL列表的改良

    在HTML5中的OL被改良了,为它增加了两个新属性. start属性:start属性用来定义列表编号的起始位置,比如下面的代码,列表将从50开始51...55以此类推 <ol start=&qu ...

  9. HTML5入门以及新标签

    HTML5 学习总结(一)--HTML5入门与新增标签   目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 ...

随机推荐

  1. JS获取系统的指定定年月日

    /** * 获取系统当前时间 */ function getNowYearMouth(){ var date=new Date; var nowYearMouth=date.getMonth()+1; ...

  2. 【笨嘴拙舌WINDOWS】消息机制

    如果将WINDOWS比做一个人,那么他就是为你提供各种服务的巫师,他手上有各式各样,奇形怪状的奇葩物品.他脑子充满了智慧,能够为你解决你所不能解决的疑难杂症.但是他不认识你! 你从小立志要想考状元,去 ...

  3. Qt之显示网络图片

    简述 Qt中包含了网络模块-network,我们可以很容易的进行各种网络编程和数据传输,关于network的类很多,其中包含:支持DNS.HTTP.TCP/UDP等众多高级类,可以参考助手. 下面我们 ...

  4. [Swift 语法点滴]——数组参数

    Swift语言一如既往的继承了苹果公司卓尔不群的奇葩思维方式,总是要弄得跟别的语言不一样,才能显出它的特殊 比如用数组作为参数上,这格式实在是没有试出来,找了stackoverflow,才找到相应信息 ...

  5. 2012年7月12 – 腾讯公司 WEB高级应用开发工程师 最新面试题 [转]

    笔试(45 minute):(本来是四张纸,被我弄丢了一张!无伤大雅,难度级别不会有出入) 注意:由于时间紧迫和水平有限,难免有不足或错误,请指证,虚心学习! [PHP] 写出PHP中至少5个全局变量 ...

  6. 工作流Activiti5流程变量 任务变量 setVariables 跟 setVariablesLocal区别

    工作流Activiti5流程变量 任务变量 setVariables 和 setVariablesLocal区别 因为网上的资料比较少.结合源码把相关API写下来. 设置流程级别变量: runtime ...

  7. 如何在VMware虚拟机间建立共享磁盘？

    在同一台电脑上,有时难免要安装多个虚拟机,存储空间就成了最大的问题,那么如何解决虚拟机的硬盘问题呢,Vmware自带的工具可以很好的解决此问题,下面我们就来看看如何在Vmware虚拟机间建立共享磁盘? ...

  8. 通过反射执行get、set方法

    Class clazz = sourceObj.getClass(); 1.获取所有属性 BeanInfo beanInfo = Introspector.getBeanInfo(clazz); Pr ...

  9. css实现鼠标经过导航文字偏位效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 嵌入式 hi3518平台多路码流添加osd

    <span style="font-family:Courier New;"> /******************************************* ...