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

上一篇：html5的新特性

下一篇：网站友好性的几个建议

您可能感兴趣

浏览排行

HTTP消息中header头部信息的讲解: [50579]
html标签的嵌套规则: [9122]
浏览器加载网页的顺序: [8435]
常见的web富文本编辑器有哪些: [6436]
CSS设置字体: [4591]
easyui messager的用法: [4085]
常见的浏览器兼容性测试工具: [3987]
Js如何判断浏览器类型和版本: [3745]
font-size:100%什么意思: [3735]
如何禁止按回车键提交表单: [3639]

SQL SERVER与MySQL数据类型的对应关系: [277]
网站图片防盗链的常见方法: [337]
C#不建议在构造函数中调用虚方法或虚属性: [439]
查看SQL SERVER指定数据库中所有的触发器: [385]
常见NoSQL数据库: [554]
查看SQL SERVER中指定数据库所有表的字段信息: [560]
测试用例写哪些方面: [500]
代码评审工具Phabricator: [445]
SQL Server数据库应用中有用的几个工具: [512]
word-break、word-wrap、white-space的用法: [292]

HTML5 ＜figure＞ 、＜figcaption＞标签

浏览排行

一月好评排行榜

HTML5 ＜figure＞、＜figcaption＞标签