首页 » 编程语言 » html » 正文

HTML5标签:figure元素的使用方法及作用

html元素<figure> 标签是HTML5中新增的标签,用于定义文档中独立的流内容,有关详细的<figure> 标签的使用方法及作用介绍如下:

<figure> 标签的定义

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

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

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

<figure> 标签是 HTML 5 中的新标签

浏览器支持情况

<figure> 标签已被IE9, Firefox, Opera, Chrome 以及 Safari 支持 ;

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

<figure> 标签用法

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

1、<figure> 标签最简单用法

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

下面以图像为例,演示代码如下:

<figure> 
<img src="logo.png"  alt="网站logo">
</figure>

2、带标题的<figure>标签

在<figure>标签内,使用<figcaption>标签添加相关联的标题。

<figure> 
<figcaption>刘代码博客logo图片</figcaption> 
<img src="logo.png"  alt="网站logo">
</figure>

<figcaption> 标签是给<figure>元素内容添加相关标题的;

一个<figure> 标签内最多只允许放置一个<figcaption> 标签,也可以不放。

3、带多个子元素的<figure>标签

在<figure>标签内,可以包含多个子元素内容,演示代码如下:

<figure> 
<figcaption>三张不同品种的狗狗图像</figcaption> 
<img src="dog1.jpg" alt="金毛犬"> 
<img src="dog2.jpg" alt="萨摩耶"> 
<img src="dog3.jpg" alt="哈士奇">
 </figure>

但无论<figure>标签里面有多少个子元素内容,<figcaption> 标签最多只能有一个。

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

 <figure>标签内,使用<blockquote>标签,引用一段元素内容,演示代码如下:

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

4、带“代码段”的用法

 <figure>标签内,使用<pre>标签,插入代码段,演示代码如下:

<figure>
  <figcaption>Get browser details using <code>navigator</code>.</figcaption>
  <pre>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;
}</pre>
</figure>

5、带“诗歌”的用法

在<figure>标签内,使用<pre>标签,定义一首诗歌,演示代码如下:

<figure>
   <figcaption>《面朝大海,春暖花开》</figcaption>
   <p>
         作者:海子
  从明天起,做一个幸福的人
  喂马,劈柴,周游世界
   从明天起,关心粮食和蔬菜 
   我有一所房子,
  面朝大海,春暖花开
  从明天起,和每一个亲人通信
  告诉他们我的幸福
  那幸福的闪电告诉我的
  我将告诉每一个人 
   给每一条河 每一座山 取一个温暖的名字
  陌生人,我也为你祝福 
   愿你有一个灿烂的前程 
   愿你有情人终成眷属 
   愿你在尘世获得幸福 
   我只愿面朝大海,春暖花开
  </p>
</figure>

通过上面的学习和了解,我们已经知道<figure>标签内可以放入图像、图表、统计图、照片、代码段,可以放置视频、音频片段、引用、表格、广告,或任何与这些相关的组合。



欢迎您发表评论或留言