标签：html5 元素
HTML5元素分类：结构性元素、级块性元素、行内语义性元素、交互性元素。
目的：使文档的结构更加清晰明确；
增加新功能。
结构性元素：负责Web的上下文结构的定义，确保HTML文档的完整性。
1.1 section（给内容分段）:在web页面应用中，该元素可以用于区域的章节表述。
section 元素用于对网站或应用中页面上的内容进行分区，关注内容的独立性；一个section元素通常由标题及内容组成；section元素包含的内容可以单独存储到数据库中或输出到word文档中
1.2 header（头部元素）: 页面主体上的头部
应该用来标识每一个区域的头部区域
1.3 footer（底部元素）: 页面的底部
应该用来标识每一个区域的底部区域
1.4 nav（导航）:用于菜单导航、链接导航的元素
适用于以下场合
传统导航条、侧边栏导航、页内导航、翻页操作。
1.5 article（标识文章）:用于标识一片文章的主体内容，一般为文字集中显示的区域。
article元素用来标识文档、页面中独立的、完整的、可以独自被外部引用的内容。它可以是一
篇博客或者报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件。
article元素的标题通常放在header中。通常包含header和footer。
article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。如一篇新闻是
一个article，在新闻的最后的评论就可以嵌套article元素。
【section 与 article 】
article：代表文档、页面或者应用程序中独立完整的可以被外部引用的内容。如博客中的一篇文
章，论坛中的一个帖子或者一段浏览者的评论等。通常包含头部（header元素，article
元素的标题(hn)通常写在header元素中）、底部（footer元素）。
section:section元素的作用是对页面上的内容进行分段，如对文章分段等。通常为那些有标题的内
容进行分段（*）。
一个section元素通常由标题（hn，hn不需要放在header标签中）和内容组成。
一个section元素一般不用包含header元素和footer元素。
section元素的作用是对页面上的内容进行分段，如对文章分段等。
相邻的section元素的内容应该是相关的，而不是像article那样独立。
section article 不能取代div用于设置样式;
如果article元素、aside元素、nav元素更符合使用条件，不要使用section元素；
不要为没有标题的内同区块使用section元素；
【我的整理】
article用于标识内容独立的文章；
aricle中通常包含header元素、footer元素；
article的标题hn通常写在header元素中；
article可以嵌套使用，但是内外层的article内容要有关联；
section为有标题的内容区块划分段落，标题不需要写在header标签中；
section 与 article可以嵌套使用；
section 与 article用于划分区域，不能取代div作为设置页面样式的容器，如需要，则使
用div设置；
若aside、nav、article更符合使用条件，就不要使用section元素。
【代码示例】
<article>
<header>
<h1>
潜行者m的个人介绍</h1>
</header>
<p>
潜行者m是一个中国男人，是一个帅哥。。。</p>
<section>
<h2>
评论</h2>
<article>
<h3>
评论者：潜行者 n</h3>
<p>
确实，m同学真的很帅</p>
</article>
<article>
<h3>
评论者：潜行者 a</h3>
<p>
今天吃药了没？</p>
</article>
</section>
</article>
[补：非主体结构元素]
1.6 hgroup(给标题分组)：为标题或者子标题进行分组，通常它与h1~h6元素组合使用，一个内容快中
的标题及其子标题可以通过hgroup元素组成一组;
1.7 address（添加联系信息）:在文档中定义联系信息，包括文档作者或者文档编辑者名称、电子邮
箱、真实地址、电话号码等。
2.级块元素：
2.1 aside（设置辅助信息）:用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内
容。从一个简单页面的显示上看，就是侧边栏，可以在左边，也可以在 右边。从一个页面的局部看，就是摘要。 、
aside元素的两种用法：
作为主要内容的复数信息部分，包含在article元素中，其中的内容可以是与当前文章有关 的参考资料、名词解释等；
作为页面或站点全局的附属信息部分，在article之外使用。最典型的形式是侧边栏，其中 的内容可以是友情链接，博客中其他文章列表、广告单元。
2.2 figure:对多多个元素进行组合并展示的元素，通常与figcaption联合使用
<!DOCTYPE HTML> <html> <body> <p>上海卢浦大桥是当今世界第一钢结构拱桥，是世界上跨度最大的拱形桥。它也是世界上首座完全采用焊接工艺连接的大型拱桥（除合拢接口采用栓接外），现场焊接焊缝总长度达4万多米，接近上海市内环高架路的总长度。卢浦大桥像澳大利亚悉尼的海湾大桥一样具有旅游观光的功能。</p> <figure> <p>黄浦江上的的卢浦大桥</p> <p>拍摄者：W3School 项目组，拍摄时间：2010 年 10 月</p> <img src="/i/shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure> </body> </html>
2.3 code：表示一段代码块.<code>前台显示的内容</code>
2.4 dialog: 用于表达人与人之家 的对话。该元素还包括dt和dd这两个组合元素，它们常常同时
使用。dt用于表示说话人，dd表示说话内容。
<暂不知何处使用>
3 行内语义性元素：完成web页面具体内容的引用和表述，丰富内容展示。
3.1 meter:表示特定范围内的数值，可用于工资、数量、百分比等。
3.2 time:表示时间
3.3 progress:用来标识进度条，可通过对其max、min、step等属性控制，完成对进度的表示控制
3.4 video:视频元素，用于支持和实现视频（含视频流）文件的直接播放，支持缓冲预载和多种视
频媒体格式：MPEG-4,OggV和WebM.
3.5 audio:音频元素，用于支持和实现音频（音频流）文件的直接播放，支持缓冲预载和多种音频
媒体格式。
【我的整理】
设计微格式：<time datetime="2012-11-13">我的生日</time>
添加发布日期：<time datetime="2012-11-13" pubdate></>
4.交互性元素：功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础，这类元素包括
以下几个。
4.1 details:用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与
summary (chrome 中测试为 summary，目前仅chrome和IE支持)交互才会显示出来。
<details> <summary>健康信息</summary> 身高：<input type="text" /> 体重：<input type="text" /> </details>
4.2 datagrid:用来控制客户端数据与显示，可以由动态脚本更新。
4.3 menu:主要用于交互菜单（这是一个曾经被废弃现在又重新启用的元素）
4.4 command：用来处理命令按钮
【附】web前端开发规范：http://www.html5cn.org/article-558-1.html
标签：html5 元素
原文地址：http://demo123.blog.51cto.com/8060869/1679213
