新增的主体结构元素
一、article元素
代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一片播客或者报刊中的文章。一篇论坛帖子、一段用户评论或者独立的插件，或其他人任何独立的内容。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>article元素</title> 6 </head> 7 <body> 8 <article> 9 <header> 10 <h1>极客学院</h1> 11 <p>Hello,极客学院能学很多</p> 12 </header> 13 <p>内容部分</p> 14 <article> 15 <header> 16 还可以嵌套一个article，表示一片博文 17 </header> 18 <p>评论</p> 19 <footer> 20 time 21 </footer> 22 </article> 23 <footer> 24 <p>这是底部</p> 25 </footer> 26 </article> 27 <article> 28 <h1>这是一个内嵌页面</h1> 29 <object> 30 <embed src="#" width="600" height="400"></embed> 31 </object> 32 </article> 33 </body> 34 </html>
二、section元素
对于网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>section元素</title> 6 </head> 7 <body> 8 <section> 9 <h1>苹果</h1> 10 <p>这是一种很好吃的水果</p> 11 </section> 12 13 <article> 14 <h1>苹果</h1> 15 <p>这是一种很好吃的水果</p> 16 <section> 17 <h2>红富士</h2> 18 <p>外表很红</p> 19 </section> 20 <section> 21 <h2>国光</h2> 22 <p>也很好吃</p> 23 </section> 24 <!--section元素强调分块，article强调独立性，article是一种特殊的section，div是设置css样式的容器--> 25 <section> 26 <h1>水果</h1> 27 <article> 28 <h2>苹果</h2> 29 <p>内容</p> 30 </article> 31 <article> 32 <h2>苹果</h2> 33 <p>内容</p> 34 </article> 35 <article> 36 <h2>苹果</h2> 37 <p>内容</p> 38 </article> 39 </section> 40 </article> 41 </body> 42 </html>
三、nav元素
用作页面导航的链接组，主要的基本的链接放进nav
应用场景
- 传统导航条
- 侧边栏导航
- 页内导航
- 翻页操作
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>nav元素</title> 6 </head> 7 <body> 8 <nav> 9 <ul> 10 <li><a href="#">主页</a></li> 11 <li><a href="#">开发文档</a></li> 12 <li><a href="#">需求文档</a></li> 13 </ul> 14 </nav> 15 <article> 16 <header> 17 <h1>HTML5&&CSS3</h1> 18 <nav> 19 <ul> 20 <li><a href="#">HTML5的历史</a></li> 21 <li><a href="#">CSS3的历史</a></li> 22 </ul> 23 </nav> 24 </header> 25 <section> 26 <h1>aaaa</h1> 27 <p>....</p> 28 </section> 29 <section> 30 <h1>bbbb</h1> 31 <p>....</p> 32 </section> 33 <footer> 34 <a href="#">删除</a> 35 <a href="#">修改</a> 36 </footer> 37 </article> 38 <footer> 39 <p><small>版权声明：</small></p> 40 </footer> 41 </body> 42 </html>
四、aside元素
用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容的部分。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>aside元素</title> 6 </head> 7 <body> 8 <header> 9 <h1>js入门</h1> 10 </header> 11 <article> 12 <h1>语法</h1> 13 <p>改写神马</p> 14 <aside> 15 <h1>名次解释</h1> 16 <p>。。。。。。。。。。。。。</p> 17 </aside> 18 </article> 19 <aside> 20 <nav> 21 <h2>评论</h2> 22 <ul> 23 <li><a href="#">aaaa</a> </li> 24 <li><a href="#">bbbb</a> </li> 25 <li><a href="#">cccc</a> </li> 26 </ul> 27 </nav> 28 </aside> 29 </body> 30 </html>
五、time元素和元素pubdate
