HTML5 新元素 details/summary

details/summary 這兩組元素標籤必須一起使用的，語法如下：

<details>

<summary>標題</summary>

隱藏內容 …

</details>

details 支援特定內容的動態隱藏效果， summary 則作為標示 details 內容的標題，點擊標題則會展開 details 的內容，如果想要直接顯示 details 的隱藏內容，則設定其 open 屬性即可。以下是兩段利用 details/summary 設定的配置，點選可以展開其內容：

康廷數位 HTML5 系列圖書

康廷數位出版了一系列 HTML5 圖書 …　擺脫 App 發展模式的制肘 !

HTML5 圖書

• HTML5 完美風暴
• HTML5 與 CSS3
• HTML5 實作範例集
• HTML5 入門經典

以下為相關配置的內容：

<details>

    <summary>康廷數位 HTML5 系列圖書</summary>

    <p>康廷數位出版了一系列 HTML5 圖書 …　擺脫 App 發展模式的制肘 ! </p>

</details>

<details open>

    <summary>HTML5 圖書</summary>

    <ul>

        <li>HTML5 完美風暴</li>

        <li>HTML5 與 CSS3</li>

        <li>HTML5 實作範例集</li>

        <li>HTML5 入門經典</li>

   </ul>

</details>

兩組 details 元素，各配置一組 summary 元素。

如果在 details 同時設定了 open 屬性，則隱藏的內容會被展開。