H5新标签<>

17-03-07 来源：[db:作者]

收藏我要投稿

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

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

<li>

<img src="" /><p>title</P>

</li>

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

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

实例代码：

<figure>

<p>黄浦江上的的卢浦大桥</p>

<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />

</figure>

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

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

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

<figure>

<figcaption>黄浦江上的的卢浦大桥</figcaption>

<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />

</figure>

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

【代码示例】

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<p>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>

<figure>

<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">

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

</figure>

</body>

</html>

【效果图】

CSS3,JavaScript">

　<title>This text is the title of the document</title>

　<link rel="stylesheet" href="mystyles.css">

</head>

<body>

　<header>

　　<h1>This is the main title of the website</h1>

　</header>

　<nav>

　　<ul>

　　　<li>home</li>

　　　<li>photos</li>

　　　<li>videos</li>

　　　<li>contact</li>

　　</ul>

　</nav>

　<section>

　　<article>

　　　<header>

　　　　<hgroup>

　　　　　<h1>Title of post One</h1>

　　　　　<h2>subtitle of the post One</h2>

　　　　</hgroup>

　　　　<p>posted 12-10-2011</p>

　　　</header>

　　　This is the text of my first post

　　　<figure>

　　　　<img src=/uploadfile/2012/1122/20121122013416961.jpg?

　　　　<figcaption>

　　　　　This is the image of the first post

　　　　</figcaption>

　　　</figure>

　　　<footer>

　　　　<p>comments (0)</p>

　　　</footer>

　　</article>

　　<article>

　　　<header>

　　　　<hgroup>

　　　　　<h1>Title of post Two</h1>

　　　　　<h2>subtitle of the post Two</h2>

　　　　</hgroup>

　　　　<p>posted 12-15-2011</p>

　　　</header>

　　　This is the text of my second post

　　　<footer>

　　　　<p>comments (0)</p>

　　　</footer>

　　</article>

　</section>

　<aside>

　　<blockquote>Article number one</blockquote>

　　<blockquote>Article number two</blockquote>

　</aside>

　<footer>

　　Copyright &copy; 2010-2011

　</footer>

</body>

</html>

在代码清单1-18中，在第一篇文章的正文之后插入了一幅图像（<img src=/uploadfile/2012/1122/20121122013416569.jpg">）。这是一种常用做法，经常可以使用图像或视频来丰富文字。<figure>标签可以实现这些可视化补充，以区分它们与其他重要信息的关系。

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

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

点击复制链接与好友分享!回本站首页