位置:首页 > 软件操作教程 > 编程开发 > HTML > 问题详情

HTML5 定义导航

提问人:刘团圆发布时间:2020-11-20

    ■知识点

    nav表示导航条,用来标识页面导航的链接组。一个页面中可以拥有多个nav,作为页面整体或不同部分的导航。具体应用场景如下。

    主菜单导航。一般网站都设置了不同层级的导航条,其作用是在站内快速切换,如主菜单、置顶导航条、主导航图标等。

    侧边栏导航。现在主流博客网站及商品网站上都有侧边栏导航,其作用是将页面从当前文章或当前商品跳转到相关文章或商品页面上去。

    页内导航。就是页内锚点链接,其作用是在本页面几个主要的组成部分之间进行跳转。

     翻页操作。翻页操作是指在多个页面的前后页或博客网站的前后篇文章滚动。

  并不是所有的链接组都要被放进nav中,只需要将主要的、基本的链接组放进nav元素即可。例如,在页脚中通常会有一组链接,包括服务条款、首页、版权声明等,这时使用footer元素最恰当。

    ■实例设计

    【示例1】在HTML5中,只要是导航性质的链接,就可以很方便地将其放入nav元素中。该元素可以在一个文档中多次出现,作为页面或部分区域的导航。

<nav draggable="true">

    <a href="index.html”>首页</a> 

    <a href="book.html">图书</a> 

    <a href="bbs.html">论坛</a> 

</nav>

    上述代码创建了一个可以拖动的导航区域,nav元素中包含了 3个用于导航的超级链接,即“首页”“图书”和“论坛”。该导航可用于全局导航,也可放在某个段落,作为区域导航。

    【示例2】下面的示例页面由多部分组成,每部分都带有链接,但只将最主要的链接放入了nav元素中。

    <hl>技术资料</hl>

    <nav>

    <ul>

    <lixa href="/">主页</a></li>

    <lixa href="/blog">博客</a></li>

    </ul>

    </nav>

    <article>

    <header>

    <hl>HTML5+CSS3</hl>

    <nav>

    <ul>

    <li><a href="#HTML5">HTML5</a></li>

    <lixa href="#CSS3">CSS3</a></li>

    </ul>

    </nav>

    </header>

    <section id="HTML5">

    <hl>HTML5</hl>

    <p>HTML5特性说明</p>

    </section>

    <section id="CSS3">

    <hl>CSS3</hl>

    <p>CSS3特性说明。</p>

    </section>

    <footer>

    <p> <a href="?edit">编辑</a> | <a href="?delete">删除</a> | <a href="?add"> 添加</a> </p>

    </footer>

    </article>

    <footer>

    <p><small> 版权信息</small></p>

    </footer>

    在这个示例中,第一个nav元素用于页面导航,将页面跳转到其他页面上去,如跳转到网站主页或博客页面;第二个nav元素放置在article元素中,表示在文章中内进行导航。除此之外,nav元素也可以用于其他所有你觉得是重要的、基本的导航链接组中。

继续查找其他问题的答案?

发表评论(共0条评论)
请自觉遵守互联网相关政策法规,评论内容只代表网友观点,发表审核后显示!

2021年国家电网校园招聘考试直播课程通关班

  • 讲师:刘萍萍 / 谢楠
  • 课时:160h
  • 价格 4580

特色双名师解密新课程高频考点,送国家电网教材讲义,助力一次通关

配套通关班送国网在线题库一套

课程专业名称
讲师
课时
查看课程

2020年解放军文职招聘考试全程直播课

杜老师139课时试听目录

2021级国家电网招聘考试管理专业知识精讲班直播课

黎老师160小时试听目录

2021级国家电网招聘考试其它工学类专业题海练习班直播课

贺老师160小时试听目录

2021级国家电网招聘考试金融专业知识精讲班直播课

钟老师140小时试听目录

2021级国家电网招聘考试计算机专业知识精讲班直播课

杜老师160小时试听目录

2021级国家电网招聘考试通信专业知识精讲班直播课

李老师350小时试听目录

2021级国家电网招聘考试财会专业知识精讲班直播课

王老师120小时试听目录

2021级国家电网招聘考试研究生题海班直播课程

严老师180小时试听目录

2021级国家电网招聘考试研究生电气专业知识精讲班直播课

彭老师160小时试听目录

2021级国家电网招聘考试本科电气专业考前押题班录播课

蒋老师168h试听目录

2021级国家电网招聘考试本科电气专业题海训练班直播课

谷老师165小时试听目录

2021级国家电网招聘考试本科电气专业知识精讲班直播课

严老师160小时试听目录

2021级国家电网招聘考试专科电气专业考前押题班直播课

王老师150小时试听目录

2021级国家电网招聘考试专科电气专业知识题海训练直播课

杨老师146小时试听目录

2021级国家电网招聘考试专科电气专业知识精讲班直播课

崔老师180小时试听目录

2020年湖南中烟公司招聘考试技术工人二岗直播课

刘老师140小时试听目录

2020年湖南中烟公司招聘考试生成车间工人考试直播课

王老师125小时试听目录

2020年湖南中烟公司招聘考试技术工人一岗直播课

李老师140小时试听目录

2020年湖南中烟公司招聘直播课程(协议班)

崔莹莹168h试听目录

2020湖南农村信用社招聘笔试培训(协议保过班)

谢楠200h试听目录

2020军队文职招聘考试面试培训(协议保过班)

刘萍萍124h试听目录

2021国家电网招聘考试录播视频课程

  • 讲师:崔莹莹 / 刘萍萍
  • 课时:180h
  • 价格 3580

特色解密新课程高频考点,免费学习,助力一次通关

配套全套国网视频课程免费学习

课程专业名称
讲师
课时
查看课程

2021级国家电网招聘考试管理类专业知识精讲班录播课

王老师150小时试听目录

2021级国家电网招聘考试其它工学类专业题海练习班录播课

谷老师148小时试听目录

2021级国家电网招聘考试其它工学类专业知识精讲班录播课

夏老师150小时试听目录

2021级国家电网招聘考试其它专业题海练习班录播课

刘老师125小时试听目录

2021级国家招聘考试其它专业题海练习班录播课

李老师140小时试听目录

2021级国家电网招聘考试其它专业知识精讲班录播课

贾老师120小时试听目录

2021级国家电网招聘考试金融专业知识精讲班录播课

王老师140小时试听目录

2021级国家电网招聘考试通信专业知识精讲班录播课

黄老师188小时试听目录

2021级国家电网招聘考试计算机专业知识精讲班录播课

谷老师120小时试听目录

2021级国家电网招聘考试财会专业考前押题班录播课

夏老师15小时试听目录

2021级国家电网招聘考试财会专业题海练习班录播课

杨老师180小时试听目录

2021级国家电网招聘考试财会专业知识精讲班录播课

蒋老师156小时试听目录

2021级国家电网招聘考试研究生电气考前押题班录播课

谷老师12小时试听目录

2021级国家电网招聘考试研究生电气专业题海练习班录播课

李老师170小时试听目录

2021级国家电网招聘考试研究生电气专业知识精讲班录播课

崔老师150试听目录

2021级国家电网招聘考试本科电气专业考前押题班录播课

王老师120小时试听目录

2021级国家电网招聘考试本科电气题海练习班录播课

王老师158小时试听目录

2021级国家电网招聘考试本科电气专业知识精讲班录播课

谷老师170小时试听目录

2021级国家电网招聘考试专科电气专业考前押题班录播课

蒋老师12小时试听目录

2021级国家电网招聘考试专科电气专业题海练习班录播课

崔老师150小时试听目录

2021级国家电网招聘考试专科电气专业知识精讲班录播课

王老师180小时试听目录

在线题库
在线报名
  • 报考专业:
    *(必填)
  • 姓名:
    *(必填)
  • 手机号码:
    *(必填)
返回顶部