标签：
课程背景：
在 HTML5 中，为了使文档的结构更加清晰明确，追加了几个与页眉、页脚、内容区块等文档结构相关联的元素。
核心内容：
1.Article
2.Section
3.Nav
4.Aside
5.Time
6.Pubdate
7. header 元素
8. footer 元素
9. hgroup 元素
10. address 元素
article 元素代表文档，页面或应用程序中独立的、完整的、可以独自被外部引用的内容。
本课时讲解 HMTL5 新增的主体结构元素 section，对于网站或应用程序中页面上的内容进行分块。
<body> <section> <h1>苹果</h1> <p>这是一个水果，可以吃。而且可以吃</p> </section> <article> <h1>苹果</h1> <p>这是一个水果，可以吃。而且可以吃</p> <section> <h2>红富士</h2> <p>这是一种外表很红的苹果，吃起来也不错。</p> </section> <section> <h2>国光</h2> <p>这是一种外表很红的苹果，吃起来也不错。</p> </section> </article></body>
注意：
1.不要将section元作为设置样式的页面容器，那是div的工作
2.如果article元素、aside元素、nav元素更符合使用条件，那不要使用section元素
3.没有标题内容 不要使用section元素
导航，可以作为页面导航连接组。将主要的、基本的连接组放进nav元素：
· 传统导航条
· 侧边栏导航
· 页内导航
· 翻页操作
<body> <nav> <ul> <li><a href="#">主页 </a></li> <li><a href="#">开发文档</a></li> </ul> </nav> <article> <header> <h1>HTML5与CSS3的历史</h1> <nav> <ul> <li><a href="#">HTML5历史</a></li> <li><a href="#">CSS3历史</a></li> </ul> </nav> </header> <section> <h1>HTML5历史</h1> <p>...</p> </section> <section> <h1>CSS3历史</h1> <p>...</p> </section> <footer> <a href="#">删除</a> <a href="#">修改</a> </footer> </article> <footer> <p><small>版权声明</small></p> </footer> </body>
注意：
html5中不能使用menu元素代替nav元素，menu元素是用在发出命令的菜单上的，是种交互元素，也可以说是用在web应用上的。
aside，表示当前或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条。
<body> <header> <h1>js入门</h1> </header> <!--文章的附属信息部分--> <article> <h1>语法</h1> <p>文章的正文。。。。。。</p> <aside> <h1>名词解释</h1> <p>语法：这是一个对语言来说很重要的内容体</p> </aside> </article> <!--当前页面的附属信息--> <aside> <nav> <h2>评论</h2> <ul> <li><a href="#">2015-8-10</a></li> <li><a href="#">大牛：真希望能好好地学一下</a></li> </ul> </nav> </aside> <!--也可用于广告单元，如网页右下角的弹出广告等--> </body>
主体结构元素 time、pubdate 属性，用来无歧义、明确地对机器的日期和时间进行编码，并且以让人易读的方式来展现它，这个元素就是 time 元素。
<body> <article> <h1>苹果</h1> <p>发布日期 <time datetime="2015-10-10" pubdate="true">2015-10-10</time> </p> <p>舞会时间 <time datetime="2015-10-12">2015-10-12</time> </p> </article> </body>
主要是网页的头部，也出现在主体内容<article>的头部等。。。
可包含nav等很多元素进去。
footer是网页的底部，也出现在主体内容<article>的底部等。。。
hgroup是包含多个h标签的时候使用
包含地址、邮件、等联系信息。
1. 显示编排内容区域块（明确使用section等元素创建区域块，每个区域使用标题h1-h6）
2. 隐式编排内容区域块（不明确使用section等元素，使用h1-h6把区域块自动创建出来）
3. 标题分级（h1~h6）
4. 不同区域块可以使用相同级别的标题
示例：
1 <body> 2 <header> 3 <h1>网页标题</h1> 4 <nav> 5 <ul> 6 <li><a href="#">首页</a></li> 7 <li><a href="#">帮助</a></li> 8 <li><a href="#">联系</a></li> 9 </ul> 10 </nav> 11 </header> 12 <article> 13 <hgroup> 14 <h1>文章主标题</h1> 15 <h2>文章子标题</h2> 16 </hgroup> 17 <p>文章正文</p> 18 <section> 19 <div> 20 <article> 21 <h1>评论标题</h1> 22 <p>评论正文</p> 23 </article> 24 </div> 25 </section> 26 </article> 27 <footer> 28 <small>版权所有：...</small> 29 </footer> 30 </body>
《Web前端笔记2.10-2.11》 HTML5 新增的结构元素
标签：
原文地址：http://www.cnblogs.com/woodk/p/4769200.html
