HTML5中增強的頁面元素
阿新 • • 發佈：2018-12-11
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元素。