H5新標籤 定義圖文並茂的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>
這是個非常易於理解的標籤，其用法也非常清楚。即便是簡單，這裡也建議大家親自動手寫下。
【程式碼示例】
<html>
<head>
<meta charset="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.</
<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>
【效果圖】
【程式碼示例2】
<figure>標籤用於幫助我們更具體地宣告文件的內容。在引入這個元素之前，我們無法確定內容與資訊的關係，只能確定內容的自包含關係，例如，插圖、影象、視訊等。通常，這些元素屬於重要內容，但是可以刪除而不影響或破壞文件流。如果出現這些資訊，就可以使用<figure>標籤來標識這些資訊（見程式碼清單1-18）。
程式碼清單1-18：使用<figure>和<figcaption>元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="This is an HTML5 example">
<meta name="keywords" content="HTML5,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=http://www.2cto.com/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 © 2010-2011
</footer>
</body>
</html>
在程式碼清單1-18中，在第一篇文章的正文之後插入了一幅影象（<img src=http://www.2cto.com/uploadfile/2012/1122/20121122013416569.jpg">）。這是一種常用做法，經常可以使用影象或視訊來豐富文字。<figure>標籤可以實現這些視覺化補充，以區分它們與其他重要資訊的關係。
此外，在程式碼清單1-18中，在<figure>元素中還有一個元素。通常，影象或視訊等資訊單元位於簡短文字之下。HTML5有一個元素可以顯示和標識這種描述性標題。
<figcaption>標籤用於顯示與<figure>相關的標題，並且在元素及其內容之間建立關係。