HTML中的figure与figcaption标签
本来想分两篇文章来解释说明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标签的更多相关文章
- HTML中的figure和gigcaption标签
参考自:anti-time的博客http://www.cnblogs.com/morning0529/p/4198494.html 在写xhtml.html中常常用到一种图片列表,图片+标题或者图片+ ...
- html5 figure和figcaption
figure标签和figcaption标签是html5新增的语义化标签. figure标签,html5语义化标签. 用于规定独立的流内容(图像.图表.照片.代码等等). figcaption标签,ht ...
- html5标签figure、figcaption
figure.figcaption,这俩个标签都是定义图文的 常常用到一种图片列表,图片+标题或者图片+标题+简单描述.以前的常规写法: <li> <img src="te ...
- HTML<figure> <figcaption> 标签定义图文并茂
本来想分两篇文章来解释说明figure.figcaption的,但是这俩个标签都是定义图文的,所以我们合起来讲解,大家更能容易接受. 大家在写xhtml.html中常常用到一种图片列表,图片+标题 或 ...
- html5中的一些新语义标签
<header> <nav> <ul> <li><a href="">栏目1</a></li> ...
- [翻译]小提示:使用figure和figcaption元素的正确方式
figure和figcaption是一对经常被一起使用的语义化标签.如果你还没有看过规范中的定义,现在有机会在你的项目中使用它们了.如果你不知道怎么用,下面是关于如何正确使用它们的一些提示. figu ...
- 在thinkphp中,写的博文标签多对多关系的标签频率统计算法
常常看到别人的博客里面,或者网站里面有这样随机颜色,但字体大小与标签出现频率有关的标签云,于是自己就想写一个.至于颜色的随机显示,那就很简单了,这里就不列代码. 因为正在学thinkphp,所以数据查 ...
- 在多行列表中id同名的<a>标签点击事件处理方法
Struts2标签 问题描述:最近项目中在使用struts迭代标签动态生成列表的过程中,由于每一行li元素中包含<a>超链接,如下图 一开始超链接是这样的<a href=“#” id ...
- 在hexo静态博客中利用d3-cloud来展现标签云
效果: http://lucyhao.com/tags/ hexo自带的tag cloud的标签展现不太美观,想能够展现出“云”效果的标签.在网上找到了d3-cloud这个项目,github地址:ht ...
随机推荐
- 网页http请求的整个过程
这几天看一个讲解一个网页从我们输入地址到显示在我们面前的一个讲解,是我对http又有了一个完整的了解,现在做一下整个流程的记录,虽然不是很详细,但是整个过程是完整的.如果不对,请指正! 打开浏览器,地 ...
- Hacker(八)----NET命令
NET命令是一种基于网络的命令,该命令的功能很强大,可以管理网络环境.服务.用户和登录等本地及远程信息.常见的NET命令主要有net view.net user.net use.net time.ne ...
- jquery渐隐轮播
html <body> <div id="banner"> <div id="banner_bg"></div> ...
- Entity Framework中实现查询的几种方法
在介绍几种方法前,献上一张图,希望图的作者不要追究我的盗图之过.本文的内容是我自学时的笔记,自学的内容来自网络.手打的代码,切不可直接复制过去用,会有好多错别字什么的. Entity SQL 类似于S ...
- 如何更改 Mac OS X 系统默认用户名
说到 Mac 用户名估计有许多人都不知道在哪个地方修改,其实说简单也简单说麻烦也麻烦看你自己的需求.好比如果你只要用户名的登录更改,那是就非常简单的事了.下面这里就给大家介绍mac osx系统如何更改 ...
- 某Java游戏服务器用到的知识
Runtime.getRuntime().addShutdownHook(shutdownHook); shutdownHook()函数可以在jvm关闭的时候进行内存清理.对象销毁等操作 http:/ ...
- DLL技术应用04 - 零基础入门学习Delphi47
DLL技术应用04 让编程改变世界 Change the world by program 利用DLL实现窗体重用 利用 Delphi 的 DLL 功能,不但能够实现过程和函数重用,而且还可以实现窗体 ...
- ASP.NET MVC 4.0 学习4-Code First
之前我們需要用到的數據,通過添加Entity實體數據模型把數據庫中需要的Database拉到項目中如下圖, 而就是Code First就是相對於這種處理數據的方法而言的 Code First更加準確的 ...
- Typecho 代码阅读笔记(三) - 插件机制
转载请注明出处:http://blog.csdn.net/jh_zzz 以 index.php 为例: /** 初始化组件 */ Typecho_Widget:: widget('Widget_Ini ...
- js阻止元素的默认事件与冒泡事件
嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,从而带来一定的影响. 1. event.preventDefault(); -- 阻止元素的默认 ...