learn html5 第一天
+----------------------------------------------------------------------------+
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<details>
<summary>Copyright 2011</summary>
<p>All pages and graphics on this web site are the property of W3Cchool</p>
</details>
</body>
</html>
+----------------------------------------------------------------------------+
<!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;
display:block;
}
details[open]{
height:auto;
}
</style>
</head>
<body>
<span>隐藏脚注</span>
<details>
本页面生成于20111
</details>
<!-- <span>显示脚注</span>
<details open="open">
本页面生成于2011-03-17
</details>-->
</body>
</html>
+----------------------------------------------------------------------------+
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
脚本控制元素
</title>
</head>
<body>
<span onClick="span1_click();">脚注</span>
<details id="details1">
本页面生成于2011-03-1
</details>
<script type="text/javascript">
//根据属性控制内容是否显示
var objD=document.getElementById("details");
var attD=objD.getAttribute("open");
if(attD!="open"){
objD.setAttribute("open","open");
}else{
objD.removeAttribute("open");
}
</script>
</body>
</html>
+----------------------------------------------------------------------------+
details-->HTML5的Details
仅仅支持chrome12以上
点击标签的时候显示和隐藏内容.之前这种结果是用js来实现的,FAQ页面常常应用这个功能.
<details>
<summary>Who goes to college?</summary>
<p>Your mom</p>
</details>
当我们需要显示和隐藏内容的时候,用details元素包含一个summary标签,接着是内容,点击summary标签的时候,内容标签切换显示.
可以添加一些样式:
body{font-family:sans-serif;}
details{overflow:hidden;background:#e3e3e3;margin-bottom:10px;display:block;}
details sumary{cursor:pointer;padding:10px;}
details div h3{margin-top:0;}
details img{float:left;width:200px;padding:0 30px 10px 10px;}
总结:details+summary标签为网页提供了便利的显示,隐蔽能力.
css中的浮动,很好.
+-------------------------------------------------------------------------------------+
+-------------------------------------------------------------------------------------+
w3chool
<details>
<summary>Copyright 2011</summary>
<p>All pages and graphics on this web site are the property of W3Cschool</p>
</details>
details标签用于描述文档或者文档某个部分的细节.
