html5组织文档结构_动力节点Java学院整理

<details>
<summary>Kinds of Triathlon</summary>
There are different kinds of triathlon - sprint, Olympic and so on. I am aiming for Olympic, which consists of the following:
<ol>
<li>1.5km swim</li>
<li>40km cycle</li>
<li>10km run</li>
</ol>
</details>
</section>
</article>
</body>

details元素在浏览器中是有默认外观的，在chrome中的效果如下：

details元素默认情况下会是折拢状态，只有其summary元素的内容可见，要让页面一开始就展开，可以使用它的open属性（布尔属性）。

<details open>
<summary>Kinds of Triathlon</summary>
There are different kinds of triathlon - sprint, Olympic and so on. I am aiming for Olympic, which consists of the following:
<ol>
<li>1.5km swim</li>
<li>40km cycle</li>
<li>10km run</li>
</ol>
</details>

效果如下：

小结

HTML5的语义元素是其发明者对已有的网页研究的基础上定义出来的，他们不仅浏览了自己喜欢的站点，也研读了谷歌对十亿个网页的统计信息。如果你感兴趣，可以在这里（google的站点，无法直接查看）查看。
 

目前，HTML5的语义元素在所有现代浏览器上都得到了支持，但对于一些老版本的浏览器（主要是IE9之前的Internet Explorer），需要一些补救措施。由于语义元素本身什么都不做，要支持它们，只要让浏览器把它们当作普通的div元素就行，而剩下的工作，就是为它们添加点样式规则，之后，即使使用老古董浏览器来访问这些网页，也都没有问题了。幸运的是，这些工作Modernizr已经帮你实现了。