html5的新加的标签：details的用法,两种方式的介绍，一种是直接css的实现，一种是js+css的实现。

<header>导航</header><nav>菜单</nav><article>内容</article><footer>隐藏脚注<details>页面生成于2015-7-9</details><br/>显示脚注<detailsopen="open"><summary>页面说明：</summary>页面生成于2015/7/9summary是对details的详细说明</details><spanonClick="span1_click()">js脚本控制交互元素的使用脚注</span><detailsid="details1">本页面生成时间：2015-7-911:27</details><scripttype="text/javascript">functionspan1_click(){varobjD=document.getElementById("details1");varattD=objD.getAttribute("open");if(attD!="open"){objD.setAttribute("open","open");}else{objD.removeAttribute("open");}}</script></footer>

通用的css样式的实现：

<styletype="text/css">header,nav,article,footer{border:1pxsolid#666;padding:5px;}header{width:500px;}nav{float:left;width:60px;height:100px;}article{float:left;width:428px;height:100px;}footer{clear:both;width:500px;}details{overflow:hidden;height:0px;padding-left:200px;position:relative;display:block;}details[open]{height:auto;}span{cursor:pointer;}</style>