html5标签figure、figcaption
figure、figcaption,这俩个标签都是定义图文的
常常用到一种图片列表,图片+标题或者图片+标题+简单描述。以前的常规写法:
<li>
<img src="test.jpg" /><p>title</P>
</li>
而在html5中有了新标签更能语义化的定义出这中图片列表,那就是figure标签。
figure标签规定独立的流内容(图像、图表、照片、代码)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
figcaption 标签定义 figure 元素的标题。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
那么上面的代码就变成了:
<figure>
<figcaption>title</figcaption>
<img src="test.jpg" />
</figure>
html5标签figure、figcaption的更多相关文章
- html5的figure/figcaption讲解及实例
html5的figure/figcaption讲解及实例 一.总结 一句话总结: figure元素:用来包着媒体资源,比如图片图表:是一个[媒体组合元素],也就是对其他的媒体元素进行组合,比如:图像. ...
- HTML<figure> <figcaption> 标签定义图文并茂
本来想分两篇文章来解释说明figure.figcaption的,但是这俩个标签都是定义图文的,所以我们合起来讲解,大家更能容易接受. 大家在写xhtml.html中常常用到一种图片列表,图片+标题 或 ...
- HTML5标签改变
1.新的文档类型声明(DTD): HTML 5的DTD声明为: <!doctype html> <!DOCTYPE html >等也是正确的,因为HTML语法是不区分大小写的. ...
- html5 Doctor——教你规范使用html5标签
学习地址(英文资料):http://html5doctor.com/ http://www.w3.org/html/wg/drafts/html/master/text-level-semantics ...
- html5标签兼容ie6,7,8
注册博客园已经三年了,这三年一直在忙,没时间写博文.也许是忙,也许是懒吧!当然这三年发生了很多事,我也从开发人员转变为前端人员. 是时候对所学的,所用的知识做一下沉淀了.就从这一篇开始吧! html5 ...
- 在IE6/7/8下识别html5标签
识别html5标签: html5添加了许多语义化的标签,比如<nav></nav>,<aside></aside>,<article>< ...
- 最新最全的html5标签集合
最新最全的html5标签集合,按字母顺序排列的标签列表 4:指示在HTML4.01中定义了该元素 5:指示在HTML5中定义了该元素 标签 描述 <!--...--> 定义注释 <! ...
- 低版本浏览器支持HTML5标签的方法
最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...
- HTML5标签总结笔记
HTML5标签笔记 1.格式标签 元素名和属性一般不区分大小写,特殊的如id和class需要区分 格式标签: <acronym> 定义只取首字母的标签 <abbr>定义缩写 & ...
随机推荐
- JSP第5次测试---测试分析
1. (选择一项) A: B: C: D: 解析:构造方法方法名与类名必须相同,并且没有返回值,在对象创建时被调用:可以有带参和无参的构造方法同时出现于一个类. 2. (选择一项) A: B: C: ...
- iOS多线程之NSOperation详解
使用NSOperation和NSOperationQueue进行多线程开发,只要将一个NSOperation(实际开发中需要使用其子类 NSInvocationOperation,NSBlockOpe ...
- SpringMVC的Controller中使用线程安全的初始化
因为SpringMVC的Controller默认是单例, 在这种情况下, Controller中使用的私有变量必须也是单例, 例如各种service, 否则会有多线程访问数据互相修改的问题. 对于需要 ...
- Parallel.Invoke并行你的代码
Parallel.Invoke并行你的代码 使用Parallel.Invoke并行你的代码 优势和劣势 使用Parallel.Invoke的优势就是使用它执行很多的方法很简单,而不用担心任务或者线程的 ...
- nginx认证配置
rpm -qa|grep httpd-tools yum install httpd-tools ###这样不仅可以使用ab工具,还可以使用htpasswd工具了 虚拟主机 ->&g ...
- PCL 库安装
参考资料: http://www.cnblogs.com/newpanderking/articles/4022322.html VS2010+PCL配置 PCL共有两种安装方式 安全安装版,个人配置 ...
- 《深入理解Bootstrap》勘误
感谢大家 感谢大家仔细阅读本书,并给本书指出了那么多的错误,下次重印时,一定会修正. 勘误列表 ID 发行人 章节 原文 更新文 备注 1 剑衣清风(微博) 1.5选择器(p7) [att$=valu ...
- HP DL60 Gen9 安装CentOS 6.5
由于Gen 9的VID中自带RETHAT 5.X-7.0的驱动, 所以不需要制作驱动盘. 一, 准备工作 1. 制作 CentOS安装盘 2. 配置阵列, 开机过了自检后按F10. 自己看着配... ...
- WPF路径动画(动态逆向动画)
WPF 中的Path.Data 不再多介绍,M开始坐标点 C弧度坐标点 L 直线坐标点 <Path x:Name="path0" Data="M 10,100 C ...
- JSON拾遗
最近开始翻<JavaScript高级程序设计>,其实很多大师级人物都推荐这本书为JavaScript入门级读物.因为第20章 JSON篇幅最小,而且以前也写过一篇JSON的总结JSON简介 ...