html5新标签图html5新标签图,H5新标签 定义图文并茂的html5新标签-figure、figcaption...

本来想分两篇文章来解释说明figure、figcaption的，但是这俩个标签都是定义图文的，所以我们合起来讲解，大家更能容易接受。

大家在写xhtml、html中常常用到一种图片列表，图片+标题或者图片+标题+简单描述。以前的常规写法：

title

而在html5中有了新标签更能语义化的定义出这中图片列表，那就是figure标签。

w3c赋予的定义：figure标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

实例代码：

黄浦江上的的卢浦大桥

figure用来代替原来li标签，P标签谁来取代呢？答案就是：figcaption

w3c赋予的定义：figcaption标签定义 figure 元素的标题(caption)。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

那么上面的代码就变成了：

黄浦江上的的卢浦大桥

这是个非常易于理解的标签，其用法也非常清楚。即便是简单，这里也建议大家亲自动手写下。

【代码示例】

菜鸟教程(runoob.com)title>

head>

​

The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.p>

​

Fig.1 - A view of the pulpit rock in Norway.figcaption>

figure>

​

body>

html>

【效果图】

【代码示例2】

标签用于帮助我们更具体地声明文档的内容。在引入这个元素之前，我们无法确定内容与信息的关系，只能确定内容的自包含关系，例如，插图、图像、视频等。通常，这些元素属于重要内容，但是可以删除而不影响或破坏文档流。如果出现这些信息，就可以使用标签来标识这些信息(见代码清单1-18)。

代码清单1-18：使用和元素

This text is the title of the document

This is the main title of the website

home

photos

videos

contact

Title of post One

subtitle of the post One

posted 12-10-2011

This is the text of my first post

　　　 　　　　This is the image of the first post

comments (0)

Title of post Two

subtitle of the post Two

posted 12-15-2011

This is the text of my second post

comments (0)

Article number one

Article number two

Copyright © 2010-2011

在代码清单1-18中，在第一篇文章的正文之后插入了一幅图像(

)。这是一种常用做法，经常可以使用图像或视频来丰富文字。标签可以实现这些可视化补充，以区分它们与其他重要信息的关系。

此外，在代码清单1-18中，在元素中还有一个元素。通常，图像或视频等信息单元位于简短文字之下。HTML5有一个元素可以显示和标识这种描述性标题。

标签用于显示与相关的标题，并且在元素及其内容之间建立关系。