nav元素
将主要的、基本的链接组放进nav元素中。
nav元素应用场合：
（1）传统导航条：
（2）侧边栏导航：
（3）页内导航：本页面几个主要组成部分<section>之间的跳转
1 <header> 2 <h1>HTML5与CSS3的历史</h1> 3 <nav> 4 <ul> 5 <li><a href="#HTML5">HTML5的历史</a></li> 6 <li><a href="#CSS3">CSS3的历史</a></li> 7 </ul> 8 </nav> 9 </header> 10 <section id="HTML5"> 11 <h1>html5的历史</h1> 12 <p>正文</p> 13 </section> 14 <section id="CSS3"> 15 <h1>CSS3的历史</h1> 16 <p>正文</p> 17 </section>
（4）翻页导航：多个页面的前后页或博客前后文的滚动中
简单的nav元素示例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>MyHtml.html</title> 5 <link href="CSS/test1.css" rel="stylesheet" type="text/css" /> 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 </head> 11 12 <body> 13 <h1>nav元素示例</h1> 14 <nav> 15 <ul> 16 <li><a href="/">主页</a></li> 17 <li><a href="/">主页</a></li> 18 <li><a href="/">主页</a></li> 19 <li><a href="/">主页</a></li> 20 <li><a href="/">主页</a></li> 21 <li><a href="/">主页</a></li> 22 </ul> 23 </nav> 24 <article> 25 <header> 26 <h1>HTML5与CSS3的历史</h1> 27 <nav> 28 <ul> 29 <li><a href="#HTML5">HTML5的历史</a></li> 30 <li><a href="#CSS3">CSS3的历史</a></li> 31 </ul> 32 </nav> 33 </header> 34 <section id="HTML5"> 35 <h1>html5的历史</h1> 36 <p>正文</p> 37 </section> 38 <section id="CSS3"> 39 <h1>CSS3的历史</h1> 40 <p>正文</p> 41 </section> 42 <footer> 43 <p> 44 <a href="?edit">编辑</a>| 45 <a href="?delete">删除</a> 46 </p> 47 </footer> 48 </article> 49 <footer> 50 <p><small>版权所有</small></p> 51 </footer> 52 </body> 53 </html> 54
