• 技术文章 >web前端 >html教程

    Nav标签_html/css_WEB-ITnose

    2016-06-24 11:47:47原创770

    nav

    nav元素是一个可以用来作为页面导航的链接组;其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进

    元素;例如,在页脚中通常会有一组链接,包括服务条款、首页、版权声明等;这时使用 元素是最恰当的,而不需要 元素。

    一直以来,我们都习惯用如下这种方式来定义导航条:

    下面是W3C给出的一个代码示例:

    The Wiki Center Of Exampland

    © copyright 1998 Exampland Emperor

    HTML5学习笔记简明版(3):新元素之hgroup,header,footer,address,nav

    nav并不是为了表示所谓导航栏,而是表示"导航性质的内容"。语义上,导航是跟内容无关的,比如到首页的链接,到下一篇文章的链接,到其它栏目的链接等等,但是如果是内容本身所引述的的其它文章的链接,那么就不宜放在导航里面。

    HTML5 里 section article 什么区别?header footer nav 该怎么理解?

    HTML5 很多新的元素容易产生误解,其中有一部分原因是因为有些元素本身有歧义,所表达的语义在规范中也是在不断修正的。

    并不是指视觉上的导航栏,而是表示带有导航性质的内容,准确的说:

    元素表示一个包含多个链接的区域,这些链接指向其他页面或本页面的其他部分。

    需要注意以下几点:

    并不是所有的链接都要放到 nav 元素里面,该元素内应包含用于构成主要导航区块的部分。举个反例,通常页脚有链接列表链接到网站的其他页面,比如:服务、首页、版权页。这种情况下,仅仅用 footer 元素就够了,没必要使用 nav 元素。

    如果nav 元素里面的内容描述的是一个项目列表,那就应该用列表标记(ol,ul等)帮助理解(增强语义)和导航。

    用户代理(如屏幕阅读器)可以通过该元素来确定页面上哪些内容可以直接跳过或者按要求提供选择。

    所以通常一个页面导航可以这样写:

    或者:

    nav 元素还可以用在以下场景:

  • 目录
  • 上一页,下一页按钮,或者分页
  • 面包屑导航
  • html导航菜单为什么都用li+a标签,而不直接用a标签,或者用nav+a标签,html5中导航菜单该怎样写?

    @丁小倪 的说法有点偏激了。nav元素是区块内容(sectioning content),也就是会最终影响文档大纲(outline)生成的元素。它仅仅反映其内容包含导航,但并没有表达其内容的形式。导航内容可以是一个链接的列表,也可以是一段自然文本中内嵌了导航链接。

    按 W3C 对 nav元素的描述(

    the nav element

    )中给出的适用场景例子,我简化一下,用法可以是:

    也可以是:

    如果内容是列表,那用ul>li的方式也是很合适的,并不能说滥用。一个列表并不会因为它被放在 nav 中就不是列表了,这是内容本质的问题。nav相比 ul从语义上来说,抽象层次更高,因为它甚至已经与内容的组织形式解耦了。

    而对于 dd、dl、dt,你可以把它看成一个名值对的列表,常与 dfn元素一起使用,比较合适的场景是元数据的表达、词典的词条等等。@赵望野 的说法也有点问题,dt与 dd并不需要成对出现,它们是多对多的映射(
    dl element

    )。可以看下 HTML5 Doctor 上的这篇文章:

    The dl element

    要想对 HTML 元素有更深入的理解,我个人比较推荐结合 HTML5 Doctor 上的文章和 HTML5 规范来阅读。

    做导航栏为什么用ul>li,而不用dd dt dl?

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:Nav标签
    上一篇:meter标签_html/css_WEB-ITnose 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 页面兼容难题,求高手帮忙解决_html/css_WEB-ITnose• Div+CSS布局入门教程(二)_html/css_WEB-ITnose• ExtJs教程8• 每个Web开发者都需要具备的9个软技能_html/css_WEB-ITnose• frameset中页面自动刷新问题,求教_html/css_WEB-ITnose
    1/1

    PHP中文网