HTML中的figure和gigcaption标签
2024-09-28 13:06:35
参考自:anti-time的博客http://www.cnblogs.com/morning0529/p/4198494.html
在写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>
这样写更简便。
最新文章
- CocoaPods安装及使用《转》
- ios UIView autoresizingSubview 属性
- HTML 学习笔记(块 和 类)
- UVa 11384 Help is needed for Dexter
- C与C++之间相互调用
- 12-1 上午mysql 基本语句
- TMS320C54x系列DSP的CPU与外设——第2章 TMS320C54x DSP体系结构总体介绍
- cocos2d-x android java调用C++
- PYTHON--定期监测服务器端口,并将结果写入MYSQL
- 去确认CP210x UART Bridge的USB的VID和PID
- [git] 细说commit (git add/commit/diff/rm/reset 以及 index 的概念)
- DedeCMS V5.7开启memcache缓存的方法配置说明
- Extensions in UWP Community Toolkit - WebViewExtensions
- sql查询当前登陆人所管理的校区下的人员
- Nginx 配置 和安装
- 浅谈模块系统与 ABP 框架初始化
- Oracle 23的用户管理
- utf-8并不";兼容"; gb2312, gb18030
- java 简单认识移位运算符和位运算符
- arm交叉编译器gnueabi、none-eabi、arm-eabi、gnueabihf等的区别【转】