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>定义缩写 & ...
随机推荐
- wk_02
Python 序列 序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推.序列都可以进行的操作包括索引,切片,加,乘,检 ...
- 你所未知的3种 Node.js 代码优化方式
from:https://cnodejs.org/topic/56cc2fd6c045c3743304bec6 Node.js 程序的运行可能会受 CPU 或输入输出操作的限制而十分缓慢.从 CPU ...
- Java操作符
几乎所有运算符都只能操作"主类型"(Primitives).例外是"="."= ="和"! =",它们能操作所有对象.除 ...
- (原创)AD账户误删导致Exchange邮箱被删 莫苦恼
由于人员变动,离职人员AD账户和邮箱经常要删除.但是在删除AD账户的时候难免会犯错,将在用的用户给删除了,这是个痛苦的事情, 然后你会发现Exchange邮箱也会跟着删除,抓狂了..,还好,幸亏这里进 ...
- Linux shell运算符
双引号 --使用双引号可以引用除了字符$,`(单反号),\(反斜杠)外的任意字符或者字符串 --echo "参数的个数是$#" 单引号 --单引号与双引号类似,不同的是shell会 ...
- 继续node爬虫 — 百行代码自制自动AC机器人日解千题攻占HDOJ
前言 不说话,先猛戳 Ranklist 看我排名. 这是用 node 自动刷题大概半天的 "战绩",本文就来为大家简单讲解下如何用 node 做一个 "自动AC机&quo ...
- DTCMS插件的制作实例电子资源管理(二)Admin后台页面编写
总目录 插件目录结构(一) Admin后台页面编写(二) 前台模板页编写(三) URL重写(四) 本实例旨在以一个实际的项目中的例子来介绍如何在dtcms中制作插件,本系列文章非入门教程,部分逻辑实现 ...
- .net异步编程
现在电脑大部分都是多核心,在处理多线程方便有很大优势,异步调用方法的时候可以立即返回执行其他程序,进行异步编程会让程序运行效率更高. 我也是刚刚关注异步编程方面知识,也有很多不是很理解,所以想向大神请 ...
- c#类库和可移值类库的区别
所谓类库,只能指定一个类库的可运行平台. 而可移值类库,可以在无需修改代码的情况,同时可以在多平台上运行DLL文件.多平台如NET Framework.Silverlight.Windows Phon ...
- viso图插入Word中大片空白解决办法
按住CTRL-->将鼠标指向绘图页边缘-->指针变为移动符号(双向箭头)-->按下左键修改绘图页大小.