《初级前端1.2-1.3》 HTML5 新增的结构元素
课程背景：
在 HTML5 中，为了使文档的结构更加清晰明确，追加了几个与页眉、页脚、内容区块等文档结构相关联的元素。
核心内容：
1.Article
2.Section
3.Nav
4.Aside
5.Time
6.Pubdate
7. header 元素
8. footer 元素
9. hgroup 元素
10. address 元素
article 元素
article 元素代表文档，页面或应用程序中独立的、完整的、可以独自被外部引用的内容。
section 元素
本课时讲解 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 元素
导航，可以作为页面导航连接组。将主要的、基本的连接组放进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 元素
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、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>
header 元素
主要是网页的头部，也出现在主体内容<article>的头部等。。。
可包含nav等很多元素进去。
footer 元素和 hgroup 元素
footer是网页的底部，也出现在主体内容<article>的底部等。。。
hgroup是包含多个h标签的时候使用
address 元素
包含地址、邮件、等联系信息。
网页编排规则
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>
