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