learn html5 第一天-优快云博客

本文介绍了HTML5的Details元素的使用方法，包括如何通过脚本控制元素的显示和隐藏，以及如何添加和应用样式。重点展示了Details与Summary标签的结合，以及通过JavaScript实现内容的动态显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

+----------------------------------------------------------------------------+

<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>
       
   </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标签用于描述文档或者文档某个部分的细节.