HTML5 ＜figure＞、＜figcaption＞标签

时间：2014-4-3类别：Web前端

HTML5 ＜figure＞、＜figcaption＞标签

HTML5 ＜figure＞、＜figcaption＞标签

一、Html5中figure标签

figure元素是一种元素的组合，可带有标题（可选）。figure标签用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生影响。figure所表示的内容可以是图片、统计图或代码示例。

figure拥有一个子标签——figcaption标签。

注意：一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。

所有主流浏览器都支持 <figure> 标签。

实例

用作文档中插图的图像：

<figure> <p>黄浦江上的的卢浦大桥</p> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /></figure>浏览器支持

二、Html5中figcaptionHtml5中

定义和用法

<figcaption> 标签定义 figure元素的标题（caption）。

"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

实例

<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

三、figure和figcaption的实例

1、不带有标题的figure元素

HTML 代码复制


<!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元素

HTML 代码复制


<!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元素

HTML 代码复制


<!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>

标签：

HTML5 ＜figure＞ HTML5 ＜figcaption＞

HTML5 ＜figure＞、＜figcaption＞标签