HTML5每日一练之figure新标签的应用
igure元素是一种元素的组合，可带有标题（可选）。figure标签用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生影响。figure所表示的内容可以是图片、统计图或代码示例。
figure用友一个子标签——figcaption标签。
注意：一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。
案例1：
不带有标题的figure元素：
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>HTML5每日一练之figure新标签的应用-不带有标题的figure元素</title>
- </head>
- <body>
- <figure>
- <img alt="W3C,W3Cfuns" src="http://www.w3cfuns.com/template/w3cfuns2011/images/logo/logo.png"/>
- </figure>
- </body>
- </html>
复制代码
案例2：
带有标题的figure元素：
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>HTML5每日一练之figure新标签的应用-带有标题的figure元素</title>
- </head>
- <body>
- <figure>
- <img alt="W3C,W3Cfuns" src="http://www.w3cfuns.com/template/w3cfuns2011/images/logo/logo.png"/>
- <figcaption>W3Cfuns</figcaption>
- </figure>
- </body>
- </html>
复制代码
案例3：
多个图片，同一个标题的figure元素：
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>HTML5每日一练之figure新标签的应用-多个图片，同一个标题的figure元素</title>
- </head>
- <body>
- <figure>
- <img alt="W3C,W3Cfuns" src="http://www.w3cfuns.com/template/w3cfuns2011/images/logo/logo.png"/>
- <img alt="前端工具箱" src="data/attachment/common/ee/common_185_icon.png"/>
- <img alt="每日一练" src="data/attachment/common/04/common_180_icon.png"/>
- <figcaption>W3Cfuns打造Web前端开发权威社区！</figcaption>
- </figure>
- </body>
- </html>
复制代码
HTML5每日一练之figure新标签的应用的更多相关文章
- HTML5每日一练之input新增加的5种其他类型1种标签应用
今天介绍input在HTML5中的最后5种类型,分别是:number,range,search,tel和color 注意:此种类型的input在Opera10+中效果为佳,Chrome中效果不是十分好 ...
- HTML5每日一练之input新增加的六种时间类型应用
今天介绍一下input在HTML5中新增加的时间类型的应用,与昨天的练习一样,如果在以下这几种输入框中输入的格式不正确,也是无法提交的. 注意:此种类型的input在Opera10+中效果为佳,Chr ...
- HTML5每日一练之input新增加的URL类型与email类型应用
1.URL类型: <form> <input name="urls" type="url" value="http://www.w3 ...
- HTML5每日一练之details展开收缩标签的应用
details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击su ...
- HTML5每日一练之progress标签的应用
progress标签:从名字上来看,估计大家也能猜到这个标签是什么标签了,没错,他是一个进度条.在HTML5中我们终于可以不用模拟了. <progress id="W3Cfuns_pr ...
- html5学习笔记（1）-新标签
最近在做的项目中用到了Html5的部分标签,经师父提醒感觉自己用section的次数多的有点过分,今天去找了一篇HTML5新标签的使用方法,特意贴了上来,感谢原作者的分享,方便以后自己使用~~~ HT ...
- HTML5每日一练之视频标签的应用
与音频一样,在过去,我们如果想在Web上播放视频,也是都是通过Flash来播放,同样并不是所有的浏览器都安装了Flash播放器插件,而现在我们在HTML5中,就能完全脱离Flash或其他的插件来播放视 ...
- HTML5每日一练之OL列表的改良
在HTML5中的OL被改良了,为它增加了两个新属性. start属性:start属性用来定义列表编号的起始位置,比如下面的代码,列表将从50开始51...55以此类推 <ol start=&qu ...
- HTML5入门以及新标签
HTML5 学习总结(一)--HTML5入门与新增标签 目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 ...
随机推荐
- java 文件text的写入
日志文件 OutputStream out = new FileOutputStream(f, true); if (list1.size() > 0) { int h1 = 0; for (i ...
- xxx cannot be resolved to a type 错误解决方法
(1)jdk不匹配(或不存在) 项目指定的jdk为“jdk1.6.0_18”,而当前eclipse使用的是“jdk1.6.0_22”.需要在BuildPath | Libraries,中做简单 ...
- HDU 4324 (拓扑排序) Triangle LOVE
因为题目说了,两个人之间总有一个人喜欢另一个人,而且不会有两个人互相喜欢.所以只要所给的图中有一个环,那么一定存在一个三元环. 所以用拓扑排序判断一下图中是否有环就行了. #include <c ...
- [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
- [反汇编练习] 160个CrackMe之024
[反汇编练习] 160个CrackMe之024. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...
- 深入理解ob_flush/flush
ob_flush/flush在手册中的描述, 都是刷新输出缓冲区, 并且还需要配套使用, 所以会导致很多人迷惑… 其实, 他们俩的操作对象不同, 有些情况下, flush根本不做什么事情.. ob_* ...
- pg 匹配中文字符
用到了正则表达式: 字段 ~'[\u4E00-\u9FA5]+$'; 注意:此表达式可能还不能取到最全的值.
- python知识：json格式文本；异常处理；字符串处理；unicode类型和str类型转换
python进程中的实例和json格式的字符串之间的映射关系是非常直接的,相当于同一个概念被编码成不同的表示: stream in json form ----json.loads(str)----- ...
- Java反射基本玩法
三个主要的反射类 Class反射对象描述类语义结构,可以从Class对象中获取构造函数.成员变量.方法类等元素的反射对象,并以编程的方式通过这些反射对象对目标类对象进行操作.这些反射对象类在java. ...
- 【转】【iOS系列】-iOS查看沙盒文件图文教程（真机+模拟器)
原文网址:http://www.cnblogs.com/fengtengfei/p/5090276.html 1:模拟器 1.1 方法1: 程序中打印一下的地址,能直接前往沙盒路径. NSString ...