HTML5 <figure> 、<figcaption>标签
类别:Web前端 浏览量:2848
时间:2014-4-3 HTML5 <figure> 、<figcaption>标签
HTML5 <figure> 、<figcaption>标签一、Html5中figure标签
figure元素是一种元素的组合,可带有标题(可选)。figure标签用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响。figure所表示的内容可以是图片、统计图或代码示例。
figure拥有一个子标签——figcaption标签。
注意:一个figure元素内最多只允许放置一个figcaption元素,其他元素可无限放置。
所有主流浏览器都支持 <figure> 标签。
实例
二、Html5中figcaptionHtml5中
定义和用法
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
三、figure和figcaption的实例
1、不带有标题的figure元素
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5每日一练之figure新标签的应用-不带有标题的figure元素</title>
</head>
<body>
<figure>
<img src=""/>
</figure>
</body>
</html>
2、带有标题的figure元素
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5每日一练之figure新标签的应用-带有标题的figure元素</title>
</head>
<body>
<figure>
<img src=""/>
<figcaption>图片说明</figcaption>
</figure>
</body>
</html>
3、多个图片,同一个标题的figure元素
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5每日一练之figure新标签的应用-多个图片,同一个标题的figure元素</title>
</head>
<body>
<figure>
<img src="" />
<img src=""/>
<img src=""/>
<figcaption>图片组合说明</figcaption>
</figure>
</body>
</html>
热门推荐
- docker容器里的容器之间通信(Docker容器连接相互通信的实现)
- laravel数据转换层(laravel通过a标签从视图向控制器实现传值)
- docker镜像如何打包(Docker打包镜像及修改配置的实现)
- extjs Border边框布局
- idea 远程部署docker(通过idea打包项目到docker的操作方法)
- mysql开启审计日志会导致性能下降(MySQL 一则慢日志监控误报的问题分析与解决)
- 租用云服务器或者云主机价格(云主机租用注意事项有哪些?)
- dockerfile配置参数(dockerfile中ENTRYPOINT与CMD的结合使用及区别)
- php中变量定义规则(php use和include区别总结)
- 什么是网页挂马,怎么防范网页被挂马