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. CSS3文本超出容器显示省略号之text-overflow属性

    text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 要想实现文本超出容器时显示省略号,上面3个属性必须同时搭配使用

  2. C语言:枚举类型

    整数常量的符号名称... #include <stdio.h> enum _bool {false,true}; int main(){ enum colors { red, orange ...

  3. HTML5商城开发四 多图或多商品的水平滚动展示

    一.效果图 二.实现 样式: .horz_scroll { float: left; width: 20px; height: 130px; padding-top: 100px; padding-l ...

  4. 重构Web Api程序(Api Controller和Entity)

    Insus.NET较习惯做法,是在程序完成之后,抽一些少时间对写好的代码重新审视.比如这些天写的Web Api的程序来说,发现有很多值得重构代码. 开发ASP.NET MVC程序,与数据相关有关联的一 ...

  5. Tree Traversals

    Tree Traversals 原题链接 常见的二叉树遍历的题目,根据后序遍历和中序遍历求层次遍历. 通过后序遍历和中序遍历建立起一棵二叉树,然后层序遍历一下,主要难点在于树的建立,通过中序遍历和后序 ...

  6. Utrack声卡和机架包的调试

    视频链接http://www.tudou.com/programs/view/giZZ7b2dhn4/ 关于怎么调试这个问题困扰了我几个月之久,也没人教我,我也不知道问谁,搜又搜不到,所幸现在解决了问 ...

  7. MVC-RedirectToAction跳转到其他Area

    mvc使用Area分区开发后,存在不同Area之间的跳转,需要为每个区间添加Area规则,如下: using System.Web.Mvc; namespace web.Areas.FrameSet ...

  8. 前端见微知著AngularJS备忘篇:温故而知新,可以为师矣

    话说以前JQuery刚出来的时候,真的是对个人的冲击蛮大的.记得当时我买的第一本书就是<锋利的JQuery>,藉由这本书开始,我从此以后的项目基本用上了JQuery,其给我带来的便利性是不 ...

  9. GET请求参数为中文时乱码分析

    问题描述 近期做任务时,跟后端联调时遇到一个问题,前端发送get请求,当参数值有中文时,请求失败,请求参数变为乱码.(ps:一般当参数有中文时,很少使用get请求,而是使用post请求来传输数据,请求 ...

  10. list使用例子(转)

    例子: 在vs2010中创建一个winform的解决方案,然后定义一个类Person,Person.cs 的代码如下: using System;using System.Collections.Ge ...