教程细节
•概要：HTML5的细节标签
•缺点：基本
•支持的浏览器：Chrome 12以上版本的版本
我最喜欢的HTML5新标签是详细元素，它刚刚被集成到了Chrome最新的12版中。在今天的快速入门中展示如何来使用它。
________________________________________
详细信息标签可以
用作做什么？它本质上允许我们在点击标签时显示和隐藏内容。你一定相当熟悉这种效果，但是直到现在，它总是用Javascript实现的。想象一下之后有一个箭头，当您单击它时，下面的附加信息将会呈现。再次单击箭头内容消失。
详细信息元素允许我们完全抛开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;
}
如果您觉得本文的内容对您的学习有所帮助：
关键字：
HTML