text.html

 
<p class="zw">有了导航，浏览网站变得更加简单。当我们构建页面时，导航通常看起来是这样的。</p> 
<pre class="代码无行号"><code><div class="nav—-main"> 
   <ul> 
      <li><a href="about.html">What's Hardboiled?</a></li> 
      <li><a href="archives.html">Archives</a></li> 
      <li><a href="authors.html">Hardboiled Authors</a></li> 
      <li><a href="store.html">Classic Hardboiled</a></li> 
   </ul> 
</div></code></pre> 
<p class="zw">我们已经习惯了使用列表标记导航，但我们还使用列表标记其他事情。那么问题来了，浏览器如何区分不同的列表？</p> 
<p class="zw">好在我们现在有了<code>nav</code>元素，来实现页面上的一个或多个“主要导航块”。不是所有的链接或者链接区块都是页面主导航，所以我们应该保留<code>nav</code>元素，以便帮助人们快速区分出哪里才是页面导航</p> 
<p class="zw">导航可能会包含跳转最重要页面的链接列表，它可能在<code>header</code>中，可能在侧边栏，也可能在<code>footer</code>中。接下来，我们将使用充满语义的<code>nav</code>元素，取代以前的<code>div</code>布局。</p> 
<pre class="代码无行号"><code><nav> 
   <ul> 
      <li><a href="about.html">What's Hardboiled?</a></li> 
      <li><a href="archives.html">Archives</a></li> 
      <li><a href="authors.html">Hardboiled Authors</a></li> 
      <li><a href="store.html">Classic Hardboiled</a></li> 
   </ul> 
</nav></code></pre> 
<p class="zw">当访客通过搜索来寻找内容时，我们在<code>nav</code>中添加一个搜索表单。如果我们包含跳转链接，这些也可以作为无障碍技术的主要导航区域。</p>