html5中figure怎么用,HTML5标签：figure元素的使用方法及作用

html元素

标签是HTML5中新增的标签，用于定义文档中独立的流内容，有关详细的

标签的使用方法及作用介绍如下：

标签的定义

标签规定独立的流内容(图像、图表、统计图、照片、代码等等)；

标签的元素内容应该与主内容相关，同时元素的位置相对于主内容是独立的。

标签的元素内容被删除，则不应对文档流产生影响。

标签是 HTML 5 中的新标签。

浏览器支持情况

标签已被IE9, Firefox, Opera, Chrome 以及 Safari 支持 ；

但在Internet Explorer 8 以及更早的版本中不被支持 。

标签用法

标签属于块元素；默认的宽度是100%；默认高度是元素内容的高度，它实质上跟DIV标签是完全一样的特性；

1、

标签最简单用法

标签可以定义图像、图表、统计图、照片、代码等独立的流内容。

下面以图像为例，演示代码如下：

2、带标题的

标签

在

标签内，使用

标签添加相关联的标题。

刘代码博客logo图片

标签是给

元素内容添加相关标题的；

一个

标签内最多只允许放置一个

标签，也可以不放。

3、带多个子元素的

标签

在

标签内，可以包含多个子元素内容，演示代码如下：

三张不同品种的狗狗图像

 

 

但无论

标签里面有多少个子元素内容，

标签最多只能有一个。

3、带“引用内容”的用法

标签内，使用

标签，引用一段元素内容，演示代码如下：

刘代码博客简介

刘代码博客是一个关注Web编程和前端开发的网站, 分享HTML、CSS、Javascript、PHP等编程语言知识的网站.

4、带“代码段”的用法

标签内，使用

标签，插入代码段，演示代码如下：

Get browser details using  navigator.

function NavigatorExample() {

var txt;

txt = "Browser CodeName: " + navigator.appCodeName;

txt+= "Browser Name: " + navigator.appName;

txt+= "Browser Version: " + navigator.appVersion ;

txt+= "Cookies Enabled: " + navigator.cookieEnabled;

txt+= "Platform: " + navigator.platform;

txt+= "User-agent header: " + navigator.userAgent;

}

5、带“诗歌”的用法

在

标签内，使用

标签，定义一首诗歌，演示代码如下：

《面朝大海，春暖花开》

作者：海子

从明天起，做一个幸福的人

喂马，劈柴，周游世界

从明天起，关心粮食和蔬菜

我有一所房子，

面朝大海，春暖花开

从明天起，和每一个亲人通信

告诉他们我的幸福

那幸福的闪电告诉我的

我将告诉每一个人

给每一条河 每一座山 取一个温暖的名字

陌生人，我也为你祝福

愿你有一个灿烂的前程

愿你有情人终成眷属

愿你在尘世获得幸福

我只愿面朝大海，春暖花开

通过上面的学习和了解，我们已经知道

标签内可以放入图像、图表、统计图、照片、代码段，可以放置视频、音频片段、引用、表格、广告，或任何与这些相关的组合。