HTML5导航元素

时间:2020-01-09 10:34:39  来源:igfitidea点击:

HTML5nav元素用于在语义上标记页面的导航部分。

一页可能包含多个" nav"部分。例如,在页面的标题栏中可以有一个站点范围的导航菜单,而在页面的左侧可能有一个与内容相关的导航菜单。

这是它在HTML5中的外观:

<html>
<body>
  <header>
      Logo etc.
      <nav>
          <a href="page1.html">Page 1</a>
          <a href="page2.html">Page 2</a>
          <a href="page3.html">Page 3</a>
      </nav>
  </header>

    <nav>
        <a href="subpage1.html">SubPage 1</a>
        <a href="subpage2.html">SubPage 2</a>
        <a href="subpage3.html">SubPage 3</a>
    </nav>
    
    <article> ...</article>
    
    <footer>...</footer>

</body>
</html>

导航部分不必在标题部分内部,如上面的示例所示。导航部分也可以紧跟标题部分,如下所示:

<html>
<body>
  <header>
      Logo etc.
  </header>

    <nav>
        <a href="page1.html">Page 1</a>
        <a href="page2.html">Page 2</a>
        <a href="page3.html">Page 3</a>
    </nav>

    <nav>
        <a href="subpage1.html">SubPage 1</a>
        <a href="subpage2.html">SubPage 2</a>
        <a href="subpage3.html">SubPage 3</a>
    </nav>

    <article> ...</article>

    <footer>...</footer>

</body>
</html>

请记住,nav元素是一个语义元素。它没有任何特殊外观。不过,我们仍然可以使用CSS设置样式,就像使用div元素一样。

还要记住,作为语义元素,我们不必在页面中放置一个" nav"元素。 " nav"元素旨在供将来的智能浏览器(也许)和Web爬网程序等使用,但不能保证这些软件组件将如何使用这些元素。只有未来会证明一切。