在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>
点击脚注字符后，会显示。。。。