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>
热门推荐
- php消息队列redis(redis+php实现微博二发布与关注功能详解)
- php mq使用方法(PHP使用ActiveMQ实现消息队列的方法详解)
- docker 清除none镜像(删除docker images中为none的镜像操作)
- 如何用thinkphp框架来写一个网站(php tpl模板引擎定义与使用示例)
- JavaScript实现网页版贪吃蛇游戏(JavaScript实现网页版贪吃蛇游戏)
- MongoDB的MapReduce的用法
- html怎么设置地图(HTML5获取当前地理位置并在百度地图上展示的实例)
- sqlserver表空间占用率(SQL Server获取磁盘空间使用情况)
- 微信小程序双人游戏横屏(微信小程序实现拼图游戏)
- dedecms移动端如何设置(dedecms删除系统自定义变量的方法)