HTML5 中的Nav元素详解

时间：2022-02-17 00:04:46

什么是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元素效果演示图如下：

HTML5 中的Nav元素详解

如果想实现多层嵌套，我们可以在下面新建一个独立的区块，我们使用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多层嵌套效果演示图：

HTML5 中的Nav元素详解

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

<footer>

<p>

<a href=”/”>版权信息</a>

<a href=”/”>站点帮助</a>

<a href=”/”>联系我们</a>

</p>

</foooter>

Footer效果图如下：

HTML5 中的Nav元素详解

总结nav元素的方法

1、传统的导航条

以腾讯为例：

HTML5 中的Nav元素详解

2、侧边栏导航

HTML5 中的Nav元素详解

3、内页导航

HTML5 中的Nav元素详解

4、翻页操作

原文链接：http://www.maiziedu.com/wiki/html5/nav/

HTML5 中的Nav元素详解的更多相关文章

  1. html5中viewport与meta详解

    网上解释手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中 ...

  2. 二&colon;Maven中pom&period;xml元素详解

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6628201.html  一个pom.xml中包含了许多标签,各个标签是对项目生命周期.依赖管理的配置.常用的主 ...

  3. html5中output元素详解

    html5中output元素详解 一.总结 一句话总结: output元素是HTML5新增的元素,用来设置不同数据的输出,没什么大用,了解即可 <form action="L3_01. ...

  4. html5中section元素详解

    html5中section元素详解 一.总结 一句话总结: section元素 用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section ...

  5. html5中time元素详解

    html5中time元素详解 一.总结 一句话总结: time的使用的话主要是将时间放在datetime属性里面:<time datetime="2015-10-22"&gt ...

  6. HTML5有语义的内联元素详解

    HTML5有语义的内联元素详解 time标签 time 元素表示一个时间值,比如 5:35 P.M., EST, April 23, 2007.例如: Example Source Code:< ...

  7. html5的datalist元素详解

    html5的datalist元素详解 一.总结 一句话总结: datalist元素配合input元素可以出现有提示选择作用的选框效果,还是相对比较简便好用的 1.optgroup元素是干嘛的? opt ...

  8. html5的float属性超详解（display，position， float）（文本流）

    html5的float属性超详解(display,position, float)(文本流) 一.总结 1.文本流: 2.float和绝对定位都不占文本流的位置 3.普通流是默认定位方式,就是依次按照 ...

  9. c&plus;&plus;中vector的用法详解

    c++中vector的用法详解 vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间 ...

随机推荐

  1. JMeter入门使用指南

    初识JMeter 最近开始接触和使用JMeter进行性能测试,也是因为工作需要,不得不学习更多新技能,在此之前一直使用LR进行WEB系统的压力测试,但是在ZK开发的WEB系统,我选择使用JMeter. ...

  2. Filter过滤器简单应用&lpar; 接口访问控制 &rpar;

    一.描述 在提供安卓.IOS客户端接口时,可以在登陆接口分配Session给客户端,用于判断其他接口是否是合法访问,以避免将所有的接口都暴露在web中可以由路径直接访问.但是最近的一个项目中的移动接口 ...

  3. IntelliJIdea快捷键

    Ctrl+Shift+方向键Up/Down 代码向上/下移动. Ctrl+X 删除行 Ctrl+Y 也是删除行,不知道有啥区别 Ctrl+D 复制行 Ctrl+Alt+L 格式化代码 Ctrl+N 查 ...

  4. 在linux上创建nfs遇到的问题。

    我们部署程序时,图片server是单独的一台server,有自己独立的域名.而应用部署在还有一台server上,我们使用一些附件上传工具.比方ajaxfileupload上传附件时是无法跨域訪问的. ...

  5. （转载）java 枚举 循环遍历以及一些简单常见的使用

    本文转载自:http://blog.csdn.net/qq_27093465/article/details/51706076 作者:李学凯 什么时候想用枚举类型: 有时候,在设计一个java mod ...

  6. &period;Net Core库类项目跨项目读取配置文件

    在项目开始之前我们可以先去了解一下IConfiguration接口,.Net Core Web应用程序类似于一个控制台,当程序运行到Startup时会自动注入IConfiguration,默认读取当前 ...

  7. hdu1003 Max Sum&lpar;最大子串&rpar;

    https://vjudge.net/problem/HDU-1003 注意考虑如果全为负的情况,特判. 还有输出格式,最后一个输出不用再空行. #include<iostream> #i ...

  8. Android Netty Client

    Android netty client Start a netty client on android Download netty Download url :https://netty.io/d ...

  9. iOS进阶指南试读之UI篇

    iOS进阶指南试读之UI篇 UI篇 UI是一个iOS开发工程师的基本功.怎么说?UI本质上就是你调用苹果提供给你的API来完成设计师的设计.所以,想提升UI的功力也很简单,没事就看看UIKit里的各个 ...

  10. Sql求和异常——对象不能从 DBNull 转换为其他类型

    做项目遇到一个以前没遇到的问题,就是要计算一个用户消费总额, 关键代码如下: string sql = "select sum(Tmoney) from [order] where uid= ...

相关文章