Html5新增小元素：figure与figurecaption address progress meter mark details与summary

HMTL5和CSS3在各浏览器上的具体支持情况查询网址：http://caniuse.com/

测试一个浏览器的HTML5的支持程度网址：http://html5test.com/

1.figure与figurecaption 流内容

含义：<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。

figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

请使用 <figcaption> 元素为 figure 添加标题（caption）。

Internet Explorer 9, Firefox, Opera, Chrome 以及 Safari 支持 <figure> 标签。

注释：Internet Explorer 8 以及更早的版本不支持 <figure> 标签。

示例：

<figure>
    <figcaption>风景图片</figcaption>
    <img src="美丽四月天.jpg" width="500px" height="300px"/>
</figure>

2.address 联系信息

含义：文档或文章的作者/拥有者的联系信息，其内字体表现为斜体

所有浏览器都支持 <address> 标签。

示例：

<address>
Written by <a href="mailto:[e-mail]">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

3.progress进度条

含义：进度，进行度

IE的IE10及以上才支持，其它主流浏览器支持

示例：

<div>
    当前任务完成情况：<progress max="100" value="90"></progress> 
</div>

4.meter用于已知最大和最小值的度量

含义：度量，如一个100G的硬盘目前还有多少G可用

IE浏览器不支持

示例：

<p>
    绿色<meter low="69" high="80" optimum="100" max="100" min="0" value="92">92/100</meter>
    黄色<meter low="69" high="80" optimum="100" max="100" min="0" value="72">72/100</meter>
    红色<meter low="69" high="80" optimum="100" max="100" min="0" value="52">52/100</meter>
</p>

5.mark高亮显示

含义：高亮显示文本其它主流浏览器支持

IE的IE9及以上版本才支持，其它浏览器不明

示例：

<p>请叫我<mark>樱桃小丸子</mark>好吗</p>

6.details与summary 展开/收起解释名词解释内容

含义：收起解释内容/展开解释内容

仅 Chrome 以及 Safari 6 支持 <summary> 标签

示例：

<details >
    <summary>HTML5是什么</summary>
    <p>HTML5是HTML的第五次重大更新版本。</p>
</details>