HTML5中增强的页面元素

1 新增的figure元素与figcaption元素

（1）figure元素用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生任何影响。

（2）figure元素所表示的内容可以是图片、统计图或代码示例，但并不仅限于此，它同样可以用来表示音频插件、视频插件或统计表格等。

（3）figcaption元素表示figure元素的标题，从属于figure元素，必须写在figure元素内部，可以书写在figure元素内的其他从属元素的前面或后面。

（4）一个figure元素内最多只允许放置一个figcaption元素，但允许放置多个其他元素。

<figure>
    <img src="s1.jpg" alt="森林">
    <img src="s2.jpg" alt="森林">
    <img src="s3.jpg" alt="森林">
    <figcaption>森林</figcaption>
</figure>

（5）浏览器支持情况

到目前为止：Safari5、Chrome 10以上版本、Firefox4以上版本、Opera11以上版本、IE9以上版本、支持figure元素。

2 新增的details元素与summary元素

details元素：

（1）用于标识该元素内部的子元素可以展开、收缩显示的元素

（2）具有一个布尔类型的open属性，为true时，该元素内部的子元素应该展开显示；为false时，其内部的子元素应该收缩起来不显示。默认值为false。

（3）元素内并不仅限于放置文字，也可以放置表单、插件或对一个统计图提供的详细数据表格。

（4）元素状态改变会触发toggle事件。

summary元素：

（1）从属于details元素，在用鼠标单击summary元素中的内容文字时，details元素中的其他所有从属元素将会展开或收缩。

（2）如果details元素内没有summary元素，浏览器会提供默认文字以供单击。

<script>
    function detail_ontoggle(detail){
        var p = document.getElementById("p");
        if(detail.open){
            p.style.visibility="visible";
        else{
            p.style.visibility="hidden";
        }
</script>
<details id="detail1" ontoggle="detail_ontoggle(this)" style="cursor:pointer">
    <summary>精武风云</summary>
    <p id="p" style="visibility:hidden">xxxxxxxxxxxxxx</p>
</details>

到目前为止：Safari5.2、Chrome 14以上版本、Opera18以上版本、支持details元素。