本来想分两篇文章来解释说明figure、figcaption的,但是这俩个标签都是定义图文的,所以我们合起来讲解,大家更能容易接受。

大家在写xhtml、html中常常用到一种图片列表,图片+标题或者图片+标题+简单描述。以前的常规写法:

<li>
<img src="" /><p>title</P>
</li>

而在html5中有了新标签更能语义化的定义出这中图片列表,那就是figure标签。

w3c赋予的定义:figure标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

实例代码:

<figure>
<p>黄浦江上的的卢浦大桥</p>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

figure用来代替原来li标签,P标签谁来取代呢?答案就是:figcaption

w3c赋予的定义:figcaption 标签定义 figure 元素的标题(caption)。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

那么上面的代码就变成了:

<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

这是个非常易于理解的标签,其用法也非常清楚。即便是简单,这里也建议大家亲自动手写下。

链接http://www.webjx.com/html-xhtml/webxhtml-31605.html

HTML中的figure与figcaption标签的更多相关文章

  1. HTML中的figure和gigcaption标签

    参考自:anti-time的博客http://www.cnblogs.com/morning0529/p/4198494.html 在写xhtml.html中常常用到一种图片列表,图片+标题或者图片+ ...

  2. html5 figure和figcaption

    figure标签和figcaption标签是html5新增的语义化标签. figure标签,html5语义化标签. 用于规定独立的流内容(图像.图表.照片.代码等等). figcaption标签,ht ...

  3. html5标签figure、figcaption

    figure.figcaption,这俩个标签都是定义图文的 常常用到一种图片列表,图片+标题或者图片+标题+简单描述.以前的常规写法: <li> <img src="te ...

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

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

  5. html5中的一些新语义标签

    <header> <nav> <ul> <li><a href="">栏目1</a></li> ...

  6. [翻译]小提示:使用figure和figcaption元素的正确方式

    figure和figcaption是一对经常被一起使用的语义化标签.如果你还没有看过规范中的定义,现在有机会在你的项目中使用它们了.如果你不知道怎么用,下面是关于如何正确使用它们的一些提示. figu ...

  7. 在thinkphp中,写的博文标签多对多关系的标签频率统计算法

    常常看到别人的博客里面,或者网站里面有这样随机颜色,但字体大小与标签出现频率有关的标签云,于是自己就想写一个.至于颜色的随机显示,那就很简单了,这里就不列代码. 因为正在学thinkphp,所以数据查 ...

  8. 在多行列表中id同名的<a>标签点击事件处理方法

    Struts2标签 问题描述:最近项目中在使用struts迭代标签动态生成列表的过程中,由于每一行li元素中包含<a>超链接,如下图 一开始超链接是这样的<a href=“#” id ...

  9. 在hexo静态博客中利用d3-cloud来展现标签云

    效果: http://lucyhao.com/tags/ hexo自带的tag cloud的标签展现不太美观,想能够展现出“云”效果的标签.在网上找到了d3-cloud这个项目,github地址:ht ...

随机推荐

  1. DBSNMP和SYSMAN用户初始密码及正确的修改方式

    SYSMAN和DBSNMP跟涉及到Oracle的EM,所以跟其他的用户修改密码方式有所区别. 下面是这两个用户的默认密码和作用说明 DBSNMP DBSNMP The account used by ...

  2. 前端--关于客户端javascript

    浏览器中的Javascript 客户端javascript就是运行在浏览器中的javascript,现代的浏览器已经有了很好的发展,虽然它是一个应用程序,但完全可以把它看作是一个简易的操作系统,因为像 ...

  3. tomcat6.0目录和server.xml详解

    Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,目前最新版本是6.x,相对5.x性能提升很多,主要优化了内存使用,增强IO能力,重新构造集群功能. 近期对Tomcat6.x作深入学习, ...

  4. JS软键盘代码

    页面代码如下: <HTML> <HEAD> <TITLE>一个不错的js软键盘代码</TITLE> <meta http-equiv=" ...

  5. 使用Unity在MVC上实现动态注入

    一.前言 通过前一篇的文章介绍使用unity轻量级的依赖注入容器,本文就介绍在MVC上使用unity依赖注入控制器和控制器中的日志属性. 实现MVC中新提供 的两个接口:IDependencyReso ...

  6. Intellij Idea 创建Web项目入门(一)转

    Intellij Idea 创建Web项目入门(一) 相关软件: Intellij Idea14:http://pan.baidu.com/s/1nu16VyD JDK7:http://pan.bai ...

  7. mongo db 使用方法

    1 下载 mogodb http://www.mongodb.org/display/DOCS/Downloads 2 打开服务 我安装在e盘下了 可以指定数据文件位置 到 E:\mongoDB\mo ...

  8. Python学习笔记6(列表生成式)

    1.生成列表 要生成list [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],我们可以用range(1, 11): >>> range(1, 11) [1, 2, 3 ...

  9. Excel Aspose.Cells 设置单元格格式 为数字

    Workbook workbook = new Workbook(); //工作簿 Worksheet sheet = workbook.Worksheets[]; //工作表 sheet.Cells ...

  10. JAVA操作properties文件

    va中的properties文件是一种配置文件,主要用于表达配置信息,文件类型为*.properties,格式为文本文件,文件的内容是格式是"键=值"的格式,在properties ...