在HTML 5中，交互元素分為三類：
內容交互元素
菜單交互元素
狀態交互元素
內容交互元素：<details>和<summary>元素屬於新增的內容交互元素，主要用於文檔的標題、細節、內容的交互顯示。
details元素：用於說明文檔或某個細節信息的作用，常與<summary>元素配合使用。
默認情況下，標記中的內容是不顯示的，當和<summary>配合使用后，單擊<summary>后，下顯示<details>中設置的內容。
details元素的屬性以及描述：
屬性 值 描述
open open 用於控制<details>元素是否顯示，默認不可見
subject sub_id 用設置元素所對應的項目ID號
draggable true/false 設置是否可以拖動元素，默認false
實例1：通過設置該元素的open屬性值和設置該屬性值為“open”進行比較（樣式）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>交互元素《details》的使用</title>
<style type="text/css">
body{
font-size:12px
}
span{
font-weight:bold
}
details{
overflow: hidden;
height:0;
padding-left:200px;
position:relative;
diplay:block;
}
details[open]{
height:auto;
}
</style>
</head>
<body>
<span>隱藏腳注</span>
<details>本頁面生成於 2018-01-01</details>
<!--
<span>顯示腳注</span>
<details open="open">本頁面生成於 2018-01-01</details>
-->
</body>
</html>
實例2：用腳本控制交互元素<details>的使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>腳本控制交互元素《details》的使用</title>
<style type="text/css">
body{
font-size:12px
}
span{
font-weight:bold
}
details{
overflow: hidden;
height:0;
padding-left:200px;
position:relative;
diplay:block;
}
details[open]{
height:auto;
}
</style>
</head>
<body>
<span onClick ="span1-click；">腳注</span>
<details id="details">本頁面生成於 2018-01-01</details>
<script type="text/javascript">
//根據屬性控制的內容是否顯示
Function span1_click(){
var objD=document.getElementById("details");
var attD=objD.getAttribute("open"); //getAttribute()方法獲取<details>元素的"open"屬性，然后判斷元素的屬性值，值為“open”時，利用removeAttribute（）方法刪除
if(attD!="open"){
objD.removeAttribute("open");
}
}
</script>
</body>
</html>
點擊腳注字符后，會顯示。。。。