重学前端:深入理解nav标签

凯哥 2020-03-09 10:37:36 743℃ 0条

页面结构

nav标签是一个可以用来作为页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。通常将主要的、基本的链接放进nav标签中。

例如,在页面头部有一个导航,有首页、各栏目,此时用nav标签就很合适。而在页脚中通常会有包括服务条款、ICP备案、版权声明等链接,这时使用footer标签是最合适的。

一个web页面中可以有多个nav标签作为页面整体或不同部分的导航。下面是一个nav标签的使用示例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>nav_demo</title> </head> <body> <nav> <ul> <li>首页</li> <li>产品</li> <li>代码</li> <li>胡思乱想</li> </ul> </nav> <article> <header> <h1>产品经理要做的几件事</h1> <nav> <ul> <li><a href="#001">市场分析</a></li> <li><a href="#002">需求分析</a></li> <li><a href="#003">原型绘制</a></li> </ul> </nav> </header> <section id="001"> <h1>市场分析</h1> <p>市场分析很重要……</p> </section> <section id="002"> <h1>需求分析</h1> <p>需求分析很重要……</p> </section> <section id="003"> <h1>原型绘制</h1> <p>原型绘制很重要……</p> </section> <footer> <p><a href="">分享</a><a href="">收藏</a></p> </footer> </article> <footer> <p><small>此处是脚注,例如:PM 小凯哥<xuxinkai.cn>版权所有</small></p> </footer> </body> </html>

在这个示例中,一个页面由几个部分组成,每个部分都带有链接,但只将最主要的链接放入nav标签中。第一个nav标签用于页面导航,将页面跳转到其他页面上;第二个nav标签被放置在article标签中,作为内容纲要/目录索引,英文名应该成为TOC。

nav标签通常用在以下场合:

  • 头部主导航条:现代主流网站顶部上都有不同层级的导航条,用来将当前画面跳转到网站的其他主要页面;
  • 侧边栏导航:例如博客的侧边栏或者淘宝幻灯片左边的导航条;
    -页内导航:例如示例中的目录索引/内容纲要;
    -分页导航:常见的就是博客下面的第一页,第二页,上一页,下一页这种分页导航;

除了上面说的这些外,nav标签也可以用在其他导航链接组中,根据需要灵活使用。但在HTML5中不要用menu标签代替nav标签。因为menu标签是被用在一系列发出命令的菜单上的,是一种交互性的元素,或者更确切地说是使用在Web应用程序中的。

标签: HTML, CSS

非特殊说明,本博所有文章均为博主原创。

评论啦~