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>
热门推荐
- sql server语法大全(Sql Server的一些知识点定义总结)
- canvas图片裁剪插件(浅析图片上传及canvas压缩的流程)
- dell r730服务器安装操作系统(DELL R730服务器配置RAID与安装服务器系统以及域的控制详细图文教程)
- C#中BeginInvoke与EndInvoke
- python爬虫爬取知乎(详解用python写网络爬虫-爬取新浪微博评论)
- vue各种模块(一篇文章学会Vue中间件管道)
- python入门之字符串处理(Python中常用的8种字符串操作方法)
- php实现异步操作(php提供实现反射的方法和实例代码)
- filezilla搭建ftp服务教程(FileZilla 425 无法连接FTP的解决方法阿里云服务器)
- python画佩奇(啥是佩奇?使用Python自动绘画小猪佩奇的代码实例)