教程细节 •概要：HTML5的细节标签 •缺点：基本 •支持的浏览器：Chrome 12以上版本的版本 我最喜欢的HTML5新标签是详细元素，它刚刚被集成到了Chrome最新的12版中。我将会在今天的快速入门中展示如何来使用它。 ________________________________________

 

 

 

 

 

详细信息标签可以 用作做什么？它本质上允许我们在点击标签时显示和隐藏内容。你一定相当熟悉这种效果，但是直到现在，它总是用Javascript实现的。想象一下之后有一个箭头，当您单击它时，下面的附加信息将会呈现。再次单击箭头内容消失。FAQ页面中经常使用这个功能。

详细信息元素允许我们完全抛开Javascript。或者说，进行做到这样，因为浏览器的支持还乏善可陈。

________________________________________一个示例 现在让我们深入和学习如何使用这个新标签。我们从创建一个新的细节元素开始。

 

<详细>

 

</ details>

然后，我们需要补充summary的内容。

<详细信息> <摘要>谁去上大学？</ summary> <p>您的妈妈。</ p> </ details>

 

 

好，让我们开始一些更实用的例子。我想要使用details元素显示不同的Nettuts +文章。我们首先为每一篇文章创建一个标记。

<细节> <摘要>挖入Dojo </ summary> <img src =” http://d2o0t5hpnwv4c1.cloudfront.net/1086_dojo/dojo.jpg” alt =“ Dojo” /> <div> <h3>挖入Dojo ：DOM基础</ h3> <p>也许您看到了那条推文：“ jQuery是一种网关药物。这会导致JavaScript的全面使用。” 我认为，这种沉迷的一部分是学习其他JavaScript框架。这就是令人难以置信的Dojo Toolkit的这个由四部分组成的系列的全部目的：将您带入JavaScript的新高度。 </ p> </ div> </细节>

 

 

 

 

 

 

 

下一步，我们将为它加上简单的样式。

身体{font-family：sans-serif; }

详细信息{ 溢出：隐藏； 背景：＃e3e3e3; 底边距：10px; 显示：块； }

 

 

 

 

详细信息摘要{ 光标：指针； 填充：10px; }

 

 

详细信息div { float：left; 宽度：65％; }

 

 

详细信息div h3 {margin-top：0; }

详细信息img { float：left; 宽度：200像素； 填充：0 30px 10px 10px; }

 

 

 

 

请注意，为了方便，我展示的是内容显示的时候。但是当页面加载时，您将只会看到摘要文本。 如果您想要更改显示这样的状态，需要把openattribute添加到详细元素里：。