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的更多相关文章

  1. html5的figure/figcaption讲解及实例

    html5的figure/figcaption讲解及实例 一.总结 一句话总结: figure元素:用来包着媒体资源,比如图片图表:是一个[媒体组合元素],也就是对其他的媒体元素进行组合,比如:图像. ...

  2. HTML<figure> <figcaption> 标签定义图文并茂

    本来想分两篇文章来解释说明figure.figcaption的,但是这俩个标签都是定义图文的,所以我们合起来讲解,大家更能容易接受. 大家在写xhtml.html中常常用到一种图片列表,图片+标题 或 ...

  3. HTML5标签改变

    1.新的文档类型声明(DTD): HTML 5的DTD声明为: <!doctype html> <!DOCTYPE html >等也是正确的,因为HTML语法是不区分大小写的. ...

  4. html5 Doctor——教你规范使用html5标签

    学习地址(英文资料):http://html5doctor.com/ http://www.w3.org/html/wg/drafts/html/master/text-level-semantics ...

  5. html5标签兼容ie6,7,8

    注册博客园已经三年了,这三年一直在忙,没时间写博文.也许是忙,也许是懒吧!当然这三年发生了很多事,我也从开发人员转变为前端人员. 是时候对所学的,所用的知识做一下沉淀了.就从这一篇开始吧! html5 ...

  6. 在IE6/7/8下识别html5标签

    识别html5标签: html5添加了许多语义化的标签,比如<nav></nav>,<aside></aside>,<article>< ...

  7. 最新最全的html5标签集合

    最新最全的html5标签集合,按字母顺序排列的标签列表 4:指示在HTML4.01中定义了该元素 5:指示在HTML5中定义了该元素 标签 描述 <!--...--> 定义注释 <! ...

  8. 低版本浏览器支持HTML5标签的方法

    最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...

  9. HTML5标签总结笔记

    HTML5标签笔记 1.格式标签 元素名和属性一般不区分大小写,特殊的如id和class需要区分 格式标签: <acronym> 定义只取首字母的标签 <abbr>定义缩写 & ...

随机推荐

  1. 原创:Eclipse 上网代理设置(亲测有效)

    直接上图:

  2. JS 中如何判断字符串类型的数字

    function isNumberStr(str){ var n = Number(str); return !isNaN(n); } console.log(isNumberStr('37')); ...

  3. python设计模式1:创建型模式

    1.原型模式 如果想根据现有的对象复制出新的对象并进行修改,可以考虑“原型模式”,而无需知道任何创建细节.(有点像写轮眼...你不需要知道它) import copy class Point: __s ...

  4. 微信v3 JSAPI最新接口错误 get_brand_wcpay_request:fail

    WxPay.JsApiPay.php文件下 原始接口代码 /** * * 获取jsapi支付的参数 * @param array $UnifiedOrderResult 统一支付接口返回的数据 * @ ...

  5. Meet Python: little notes 3 - function

    Source: http://www.liaoxuefeng.com/ ♥ Function In python, name of a function could be assigned to a ...

  6. ubuntu12.04禁止单用户本地无密码root登录

    1)grub-mkpasswd-pbkdf2 拿到类似grub.pbkdf2.sha512.10000.C093FE6825CDCC2F84934ABC406445E92EE098733C60E6D1 ...

  7. 【转】【MySql】Waiting for table metadata lock原因分析

    MySQL在进行alter table等DDL操作时,有时会出现Waiting for table metadata lock的等待场景.而且,一旦alter table TableA的操作停滞在Wa ...

  8. lecture14-RBM的堆叠、修改以及DBN的决策学习和微调

    这是Hinton的第14课,主要介绍了RBM和DBN的东西,这一课的课外读物有三篇论文<Self-taught learning- transfer learning from unlabele ...

  9. Android开发之Menu和actionBar

    一.通过Menu目录下创建一个布局文件: 先看代码meu/main.xml: <?xml version="1.0" encoding="utf-8"?& ...

  10. 屠龙之路_向恶龙Alpha进发_FirstDay

    听说山的那边海的那边,出现了一头名为Alpha的恶龙,此龙无恶不作,还掠走了国王那漂酿的公主.少年很是气愤,大吼:"放开那女孩!!!",于是找到了志同道合的六位勇士,一起组成了屠龙 ...