2023html5编写导航栏用什么元素

 所属分类:web前端开发

 浏览:164次-  评论: 0次-  更新时间:2022-12-29
描述:更多教程资料进入php教程获得。 html5编写导航栏用nav元素。nav元素是导航元素,用于定义导航链接,可以将具有导航性质的链接归纳在一个区...
更多教程资料进入php教程获得。

html5编写导航栏用nav元素。nav元素是导航元素,用于定义导航链接,可以将具有导航性质的链接归纳在一个区域中,使页面元素的语义更加明确。nav元素可以用于的场合:1、传统导航条,其作用是跳转到网站的其他主页面;2、侧边栏导航,目的是将当前文章或当前商品页面跳转到其他文章或其他商品页面;3、页内导航,作用是在本页面几个主要的组成部分之间进行跳转;4、翻页操作。

本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

HTML5 nav元素 (导航元素)

nav元素用于定义导航链接,是HTML5新增的元素,该元素可以将具有导航性质的链接归纳在一个区域中,使页面元素的语义更加明确。其中的导航元素可以链接到站点的其他页面,或者当前页的其他部分。例如下面这段示例代码:

<nav>
    <ul>
        <li><a href="#">首页</li>
        <li><a href="#">公司概况</li>
        <li><a href="#">产品展示</li>
        <li><a href="#">联系我们</li>
    </ul>
</nav>
登录后复制

在上面这段代码中,通过在nav元素内部嵌套无序列表ul来搭建导航结构。通常,一个HTML页面中可以包含多个nav元素,作为页面整体或不同部分的导航。(学习视频分享:web前端)

具体来说,nav元素可以用于以下几种场合。

  • 传统导航条:目前主流网站上都有不同层级的导航条,其作用是跳转到网站的其他主页面。

  • 侧边栏导航:目前主流博客网站及电商网站都有侧边栏导航,目的是将当前文章或当前商品页面跳转到其他文章或其他商品页面。

  • 页内导航:它的作用是在本页面几个主要的组成部分之间进行跳转。

  • 翻页操作:翻页操作切换的是网页的内容部分,可以通过单击“上一页”或“下一页”切换,也可以通过单击实际的页数跳转到某一页。

除了以上几点以外,nav元素也可以用于其他重要的、基本的导航链接组中。

需要注意的是,并不是所有的链接组都要被放进 nav元素,只需要将主要的和基本的链接放进nav元素即可。

比如说页脚底部如果有个版权申明,我们就不建议使用nav元素,而是使用footer元素是最合适的。一个页面中我们可用多个nav元素作为整体或者不同部分的导航

nav元素的用法

<body>
<h1>nav的使用方法</h1>
<nav>
<ul>
<li>
<a href=”nav元素.html”>首页</a>
</li>
<li>
<a href=”aside元素.html”>aside</a>
</li>
<li>
<a href=”section元素.html”>section</a>
</li>
</ul>
</nav>
</body>
登录后复制

Nav元素效果演示图如下:

1.png

如果想实现多层嵌套,我们可以在下面新建一个独立的区块,我们使用article。

<article>
<header>
<h2>NAV-1</h2>
<nav>
<li>
<a href=”section元素.html”>section</a>
</li>
<li>
<a href=”新增的主体结构元素.html”>s新增的主体结构元素</a>
</li>
</header>
</article>//这就实现了一层的嵌套
<article>
<header>
<h2>NAV-1</h2>
<nav>
<li>
<a href=”section元素.html”>section</a>
</li>
<li>
<a href=”新增的主体结构元素.html”>s新增的主体结构元素</a>
</li>
</header>
</article>
登录后复制

Nav多层嵌套效果演示图:

2.png

如果在底部有一些版权信息的话,我们最好加在footer里面。

<footer>
<p>
<a href=”/”>版权信息</a>
<a href=”/”>站点帮助</a>
<a href=”/”>联系我们</a>
</p>
</foooter>
登录后复制

Footer效果图如下:

3.png

总结nav元素的方法

1、传统的导航条

以腾讯为例:

4.png

2、侧边栏导航

5.png

3、内页导航

6.png

(学习视频分享:web前端)

以上就是html5编写导航栏用什么元素的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: 导航,html5,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!