HTML5 新增的主体结构元素
分别说明article、aside、section、nav元素。
article元素：
<!DOCTYPE html> <html> <head lang="en"> <title>article元素</title> <meta charset="utf-8"> </head> <body> <!-- article元素代表文档、页面或应用程序中独立的、完整的、可以独立被外部引用的内容。它可以是一篇博客或者报刊中的一篇文章，一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。 article元素可以嵌套使用，也可以用来表示插件。 --> <article> <header> <h1>这是一个标题</h1> <p>Hello</p> </header> <article> <header> 作者 </header> <p>评论</p> <footer> time </footer> </article> <footer> <p>这是底部</p> </footer> </article> <article> <h1>这是一个内嵌页面</h1> <object> <embed src="#" width="800" height="400"></embed> </object> </article> </body> </html>
aside元素：
<!DOCTYPE html> <html> <head lang="en"> <title>aside元素</title> <meta charset="utf-8"> </head> <body> <!-- aside元素用来表示当前页面或文章的附属信息部分，它可以包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容的部分。 --> <header> <h1>这就是一个头部</h1> </header> <article> <h1>html的故事</h1> <p>这里面是正文。</p> <aside> <h1>html的解释</h1> <p>它是一种超文本标记语言。</p> </aside> </article> <aside> <nav> <h2>评论</h2> <ul> <li><a href="#">评论的时间</a></li> <li><a href="#">评论的内容</a></li> </ul> </nav> </aside> </body> </html>
section元素：
<!DOCTYPE html> <html> <head lang="en"> <title>section元素</title> <meta charset="utf-8"> </head> <body> <!-- section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由其内容及标题组成。但section元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。 --> <section> <h1>苹果</h1> <p>这是一种水果，吃起来脆脆的、甜甜的。</p> </section> <br/><br/> <article> <h1>苹果</h1> <p>这是一种水果，吃起来脆脆的、甜甜的。</p> <section> <h2>红富士</h2> <p>个大、圆润、富有色泽感</p> </section> <section> <h2>某品牌</h2> <p>个小、灰暗、无色泽</p> </section> </article> <br/><br/> <!-- section与article的区别 section的作用强调对文章或页面进行分段、分块，而article元素强调独立性 --> <section> <h1>水果</h1> <article> <h2>香蕉</h2> <p>成熟时外表多为黄色</p> </article> <article> <h2>橙子</h2> <p>富含维生素C</p> </article> <article> <h2>木瓜</h2> <p>据说可以丰胸</p> </article> </section> <!-- section使用总结：1、不要将section元素作为设置样式的页面容器，那是div的工作。2、如果使用article、aside、nav元素更符合使用条件，那就不要使用section元素。3、没有标题内容，不要使用section元素。 --> </body> </html>
nav元素：
<!DOCTYPE html> <html> <head lang="en"> <title>nav元素</title> <meta charset="utf-8"> </head> <body> <!-- nav元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素，只需要将主要的、基本的连接组放进nav元素即可。nav的应用场景：传统导航栏、侧边导航栏、页内导航、翻页操作。 --> <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> </article> <section> <h1>HTML5的由来</h1> <p>这里面是内容</p> </section> <section> <h1>CSS3的由来</h1> <p>这里面是内容</p> </section> <footer> <a href="#">删除</a> <a href="#">修改</a> </footer> <footer> <p><small>版权声明</small></p> </footer> <!-- HTML5中不能使用menu元素代替nav元素 --> </body> </html>
