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. URAL1748. The Most Complex Number

    1748 反素数 素数的个数随大小的递增而递减 可以相同 注意各种超啊 #include <iostream> #include<cstdio> #include<cst ...

  2. core--线程调度

    线程的调度和我们用人是同一个道理,假如我们是公司的CEO,你的手下有7名大将,10名美女,100000名普通员工,现在你的任务是在1年内情切慰问完所有的员工.你将如何安排这个行程?先从那些人开始?从哪 ...

  3. Qt之自定义搜索框

    简述 关于搜索框,大家都经常接触.例如:浏览器搜索.Windows资源管理器搜索等. 当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定. 方案一:调用QLineEdit现有接口 void ...

  4. watch 命令实时命令执行监控

    watch 命令   watch -d -n 1 'df; ls -FlAt /path' 在使用这条命令时你需要替换其中的 /path 部分,watch 是实时监控工具,-d 参数会高亮 显示变化的 ...

  5. Linux初识（转）

    文件系统是linux的一个十分基础的知识,同时也是学习linux的必备知识. 本文将站在一个较高的视图来了解linux的文件系统,主要包括了linux磁盘分区和目录.挂载基本原理.文件存储结构.软链接 ...

  6. 【转】这些编程语言程序员工资最高！Java才第四

    原文网址:http://tech.hexun.com/2016-07-18/185009761.html 在众多行业中,程序员属于高薪职业.无论是在国外还是国内,程序员的薪金水平普遍高于其他行业的工作 ...

  7. hbase+hive应用场景

    一.Hive应用场景本文主要讲述使用 Hive 的实践,业务不是关键,简要介绍业务场景,本次的任务是对搜索日志数据进行统计分析.集团搜索刚上线不久,日志量并不大 .这些日志分布在 5 台前端机,按小时 ...

  8. 安卓 Pickers(选择器)

    概述 安卓提供了现成的对话框,让用户选择一个时间或日期.每一个选择器控制时间(小时,分钟,AM/PM)或日期(月,日,年)的每一部分的选择.使用这些选择器帮助 确保用户正确的,格式化的,和适合的选择一 ...

  9. 下载个jquery-easyui-1.3.0使用，把他导入到myeclipse10里，jquery-1.7.2.min.js报错。 错误如下， Syntax error on token "Invalid Regular Expression Options", no accurate correc

    1.选中报错的jquery文件“jquery-1.2.6.min.js”.2.右键选择 MyEclipse-->Exclude From Validation .3.再右键选择 MyEclips ...

  10. requirejs之demo (转)

    具体的理论就不讲了,可以参考 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html http://www.ruanyifeng.c ...