首页 » 编程语言 » html » 正文

HTML5标签:nav元素的使用方法及作用

html元素<nav>标签是html5新增的标签,主要用于定义页面的导航链接区域,有关<nav>标签的使用方法及作用,介绍如下:

<nav> 标签定义

<nav>标签用于页面的导航链接区域,  该区域通常是页面的主要导航部分;

<nav> 标签在不同设备上(手机或者PC)都具有良好的支持性;

<nav> 标签可以在一个页面中同时存在多个;

<nav> 标签是HTML5新增的标签。

<nav> 标签说明

在html5之前,我们都习惯于使用形如<div id="nav">或<ul id="nav">这样的代码来写书写页面的导航栏目区域;但在HTML5中,我们就可以直接使用具有语义化的<nav>导航标签即可:

浏览器支持情况

 <nav> 标签已被大多数主流浏览器支持;

但 IE8 以及其更早的IE版本不支持 <nav> 标签。

<nav> 标签用法

<nav> 标签主要是用于页面中具有导航性质的一组链接,这些链接可以指向其他的页面,也可以指向当前页面中不同的位置,根据这个特点,<nav> 标签可用于以下两个方面:

1、页面全局导航链接组

全局导航连接组通常靠近整个页面的顶部的位置,也就是整个页面的头部或页眉,如下图所示:

2019-12-20_220927.png

上图布局中<nav>标签所在位置主要放置整个页面全局导航链接组,用于页面全局导航菜单栏目;

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面全局nav标签连接组</title>
</head>
<body>
<header>页面头部</header>
<nav>
<ul>
    <li><a href="#">网站首页</a></li>

    <li><a href="#">原创文章</a></li>

    <li><a href="#">行业动态</a></li>

    <li><a href="#">广告投放</a></li>

    <li><a href="#">投稿专区</a></li>
</ul>
</nav>
<article>正文内容</article><aside>侧边栏</aside>
<footer>页面底部</footer>
</body>
</html>

<nav>标签用于页面全局导航连接组,也可以包含在<header>标签内;

2、页面局部导航连接组

一个页面中,除了页面全局导航使用<nav>标签外,页面中不同区块具有导航链接组的部分均可使用<nav>标签。

<nav>标签在包含在<article>标签之内,通常用于文章的目录索引:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面局部nav标签链接组</title>
</head>
<body>
 <header>页面头部</header>
    <article>
        <hgroup>
            <h1>文章的标题<h1>
            <nav>
                <ul>
                    <li><a href="#">第一节</a></li>
                    <li><a href="#">第二节</a></li>
                    <li><a href="#">第三节</a></li>
                </ul>
            </nav>
        </h2></hgroup>
    </article>
    <footer>
    </footer>
</body>
</html>

<nav>标签除了在<article>标签之内用于文章目录索引外,还可以用于网站栏目、侧边栏相关连接组内容、页面面包屑导航翻页操作等;

而并不是任何具有导航链接组都要被放入<nav>标签内,像页面底部通常会有一组链接,比如:服务条款、首页、版权声明等,可这时使用<footer>标签是最适合的,而不是<nav>标签。



欢迎您发表评论或留言