您的位置:首页 > Web前端 > 其它

HTML5 <figure> 、<figcaption>标签

更多 2014/4/3 来源:HTML5学习浏览量:2509
本文导读:figure、figcaption 是html5新增标签。figure标签规定独立的流内容(图像、图表、照片、代码等等)。figcaption 标签定义 figure 元素的标题(caption)。"figcaption" 元素应该被置于 "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>

 

收藏
203
很赞
472