名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。
- 本篇文章的具体介绍如下
教程细节
• 概要：网页hTML5教程的Details网页文章标签
• 难度：初级
• 支持的浏览器：Chrome 12以上的版本
我最喜欢的网页hTML5教程新网页文章标签是details网页元素，它刚刚被集成到Chrome最新的12版中。我将会在今天的快速入门中展示如何来使用它。
________________________________________
Details网页文章标签可以用来做什么？
它本质上允许咱们在点击网页文章标签时显示和隐藏内容。您一定相当熟悉这种具体效果，但是直到现在，它总是用Javascript实现的。想象头部之后有一个箭头，当您点击它时，下面的附加信息将会呈现。再次点击箭头内容消失。FAQ页面中经常使用这个功能。
Details网页元素允许咱们完全抛开Javascript。或者说，它将做到这样，因为浏览器的支持还乏善可陈。
________________________________________
一个示例
现在让咱们深入和学习如何使用这个新网页文章标签。咱们从创见一个新的details网页元素开始。
</details>
然后，咱们需要放入summary的内容。
<details>
<summary> Who Goes to College? </summary>
<p> Your mom. </p>
</details>
好，让咱们开始一些更实用的例子。我想要使用details网页元素显示不同的Nettuts 文章。咱们首先为每一篇文章创见一个标记。
<details>
<summary>Dig Into Dojo</summary>
<img src=”http://d2o0t5hpnwv4c1.cloudfront.net/1086_dojo/dojo.jpg” alt=”Dojo” />
<div>
<h3> Dig into Dojo: DOM Basics </h3>
<p>Maybe you saw that tweet: “jQuery is a gateway drug. It leads to full-on JavaScript usage.” Part of that addiction, I contend, is learning other JavaScript frameworks. And that’s what this four-part series on the incredible Dojo Toolkit is all about: taking you to the next level of your JavaScript addiction.
</p>
</div>
</details>
下一步，咱们将为它加上简单的样式。
body { font-family: sans-serif; }
details {
overflow: hidden;
background: #e3e3e3;
margin-bottom: 10px;
display: block;
}
details summary {
cursor: pointer;
padding: 10px;
}
details div {
float: left;
width: 65%;
}
details div h3 { margin-top: 0; }
details img {
float: left;
width: 200px;
padding: 0 30px 10px 10px;
}
注意，为了方便，我展示的是内容显示的时候。但是当页面加载时，您将只会看到summary文本。
如果您想要默认显示这样的状态，需要把openattribute添加到details网页元素里：。
________________________________________
结语
这是一个相当简单的具体效果，但是展示出有这样一个通用的内建特性是非常棒的事情。在咱们确定所有的浏览器里都可以使用details网页元素之前，您可以使用polyfill来提供支持。最后要注意的一件事：在这篇文章写作时，还不支持使用键盘控制内容的切换。这可能是一个未来潜在的问题。
关于网页hTML5的相关知识就说到这里希望可以帮助朋友们。,html5 Web开发建设：防止浏览器假死的实用具体的方法
一个浏览器至少存在三个线程：js引擎线程(处理js)、GUI渲染线程(渲染页面)、浏览器事件触发线程(控制交互)。
