<details>是一個全新的HTML5元素，功能是描述文檔某個部分的細節。<details>標記常與<summary>標記配合使用。在默認情況下，不顯示<details>中的內容。當與<summary>標記配合使用時，在單擊<summary>標記後纔會顯示<datails>元素中設置的內容。<details>元素的常用屬性如下所示：
1）open:值爲open，功能是定義details是否可見。
2）subject:值爲sub_id，功能是設置元素所對應項目的ID號。
3）draggable:值爲true或false，功能是設置是否爲可拖動元素，默認值是false。
<details>標記的本質上允許我們在單擊標籤時顯示和隱藏內容。
<summary>標籤包含了<details>元素的標題。在兩者結合起來使用的代碼中，<summary>元素是<details>元素的第一個子元素，二者經常同時出現在頁面中。
使用示例代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<body>
<details open="open">
<summary>頁面說明</summary>
今天是2016年7月20號
</details>
</body>
</html>
<details open="open">
<summary>頁面說明</summary>
今天是2016年7月20號
</details>
</body>
</html>
效果：
點擊小三角形之後，文字隱藏：
是不是特別方便？但是，目前只有Chrome和Safari瀏覽器支持<details>標籤，所以這一效果現在還是用js實現。。。你可以試一試，這段代碼在IE中是不起效果的。。。