《HTML5开发手册》——1.5 初学者“菜谱”:使用nav元素创建导航

1.5 初学者“菜谱”:使用nav元素创建导航

顾名思义,nav元素的作用是提供导航。它用于链接到网站内的其他页面,或者是链接到一个页面的其他部分(例如目录)。

nav最常用的用途是作为网站的主导航。很多情况下,开发者都使用无序列表编写导航,如代码1.4所示。

代码1.4 传统的导航编写方式

在HTML5中创建nav元素时,该代码没有太大变化。生成图1.5所示的代码看起来如代码1.5所示。

代码1.5 HTML5中的导航编写方式

https://yqfile.alicdn.com/f5b9cc184fa792d1b01ceb42b219d4a21771b63a.png" >

也可以将nav标记嵌入到header中,如代码1.6所示,原因是header元素中允许出现介绍性内容和导航内容。当然,不是说非要将它放在header中,有时候我们需要根据样式设计而决定它的位置。我们也经常会看到在页面的页脚中放置的导航菜单,这些导航甚至有时和网站主导航一模一样。

代码1.6 位于header元素中的nav元素

没有必要将页面中的所有链接都放置到nav元素中。HTML5规范中警告:只有“主要导航”才适合放置在nav元素中。

在新闻或者博客站点上,经常可以看到带有指向文章或其他页面链接的侧边栏。代码1.7可以用来生成图1.6所示的元素。

代码1.7 在单个nav元素包含多个导航组

https://yqfile.alicdn.com/6a65fd45ff52dc9755fea6dc64c8691a7b92e308.png" >

注意:
这里使用了一个h2标记来分隔nav中的链接组。如图1.6所示,h2标记可用作一个标签(tab)标题。当用户选中一个标题时,内容将会发生切换(该效果可以通过JavaScript来实现)。标题元素虽然不是必需的,但经常会根据需要用来对导航组进行分隔,使导航组的结构看起来更加整洁。出于样式的原因,也可以将前面的示例拆分为两个nav结构。
使用nav元素能够有效地提升可访问性。屏幕阅读器之类的辅助技术能够搜索并立即使用这些导航组,而不需要等待它们全部加载完毕。通常,开发人员喜欢在HTML文档中使用“跳过”或者“跳转”这样的链接。访问页面时,只有点击这种链接才跳转到主导航或者主要内容上。现在,有了nav元素就可以完全抛弃这种方式了。遗憾的是,当今的辅助技术对HTML5元素的支持还非常有限,不过相信这方面能很快得到改善。

时间: 2024-10-01 11:53:38

《HTML5开发手册》——1.5 初学者“菜谱”:使用nav元素创建导航的相关文章

《HTML5开发手册》——导读

前言 HTML(超文本标记语言)是构建网页的核心语言.在过去的20多年里,无数的开发者编写着 HTML.在 HTML 诞生的前几年,这门语言经历了翻天覆地的变化,直到 1990 年后才相对稳定了起来.不过,现在一切开始改变. HTML的简史 在1991年,Tim Berners-Lee撰写了一篇名叫"HTML Tags"(HTML标记)的文档.文档中描述了20个可以用来编写Web文档的标记.到1993年中期,IETF(因特网工程任务组)发布了第一个HTML规范的提议,该提议最后过期.而

《HTML5开发手册》——1.6 中级“菜谱”:使用新article元素

1.6 中级"菜谱":使用新article元素 HTML5开发手册article元素和section元素(下一节讨论)是否是HTML5结构元素中最重要的两个,还有待讨论.不过它们肯定是最让人困惑的. article元素是一个独立的内容块,它既可以独立存在,也可以被重用.RSS订阅中的内容就非常有代表性,因为每项基本都是独立的文章.你完全可以把某项从中抽取出来,而它仍然是具有意义的. HTML5规范给出了一些如何使用article元素的示例:论坛的帖子.杂志或新闻的文章.一篇博文或用户提

《HTML5开发手册》——2.10 中级“菜谱”:在HTML5中使用WAI-ARIA

2.10 中级"菜谱":在HTML5中使用WAI-ARIA HTML5开发手册Web Accessibility Initiatives Accessible Rich Internet Applications(WAI-ARIA)也称作ARIA,是一个旨在提高Web应用和Web页面可访问性的草稿规范.ARIA允许使开发者与内容作者开发能够被辅助技术识别和使用的富Internet应用和内容.通常,辅助技术无法知道一个组件(widget)是什么,组件也一般无法使用键盘访问.同样,试想一下

《HTML5开发手册》——2.4 初学者“菜谱”:使用address元素提供通信信息

2.4 初学者"菜谱":使用address元素提供通信信息 规范中将address元素定义为"分节元素",与nav或article类似.不过,我们将它放在本章讲解,主要因为我们认为它作为文本级语义更为合适,原因是它的用法与文字内容相关,而不是页面布局. 多年以来,Web开发人员一直错误地使用了address元素.它并非显示通用邮寄地址(通常在某个"联系我们"页面中)的通用方式.因此,下面这种使用方式是错误的: https://yqfile.ali

《HTML5开发手册》——2.8 初学者“菜谱”:为多个元素添加相同的超链接

2.8 初学者"菜谱":为多个元素添加相同的超链接 HTML5中一个非常实用的新特性是将某些元素组合起来,显示单个链接来提供更宽的点击空间.而在以前,我们需要使用JavaScript或一系列组合元素才能完成这种功能. 在HTML 4中,在编写新闻或博客主页等含有众多文章链接的页面时,我们需要使用代码2.13的方法使每个项目都可点击. 代码2.13 在HTML 4中包裹链接 代码2.14所示为在HTML5中直接使用一个a元素做到这一点. 代码2.14 在HTML5中包裹链接 虽然可以直接

《HTML5开发手册》——1.3 初学者“菜谱”:使用header元素建立网站标头

1.3 初学者"菜谱":使用header元素建立网站标头 我们首先从一个典型的Web页面的顶端开始. header元素经常出现在Web页面的最上面,它通常包含了logo.网站名称.网站导航等信息.它可以在一个页面中多次使用,后面将会讲到,它可以用于页面中特定分段区域(section)的导航,而不仅仅是页面到页面的导航.诸如搜索栏或者目录等也可以包含在header元素中.下面是一个简单的例子: HTML5规范提到,header元素可以包含导航,所以图1.2中的元素可以使用一个包含logo

《HTML5开发手册》——第2章 组合、文本级和重新定义的语义 2.1 初学者“菜谱”:使用figure和figcaption元素插入图片和图注

第2章 组合.文本级和重新定义的语义 前一章中,我们介绍了一些用于构建页面结构的HTML5元素.本章中,读者将接触到更多的HTML5元素(figure.time.details和mark等)和一些重新定义的元素(address.s.cite.ol.dl.small.b.strong.i.em.abbr和hr).后面还会介绍到新的块类型(block-level)的链接和WAI-ARIA.由于这些元素都与页面内容密切相关,所以将它们统称为组合元素或文本级元素. 2.1 初学者"菜谱":使用

《HTML5开发手册》——1.8 初学者“菜谱”:使用aside标记创建侧边栏

1.8 初学者"菜谱":使用aside标记创建侧边栏 aside标记表示跟周围内容紧密关联的一组内容,比如热门文章列表.博文分类.最近评论.这种内容与主页内容相关,但又与它相独立存在. 在当今的Web开发中,侧边栏在页面中可谓是随处可见.侧边栏并不代表它的物理位置一定是在网页的两边,而是它经常包括如相关链接和分类列表等内容.要想正确地使用aside,取决于它的放置位置.如果放置在article中,aside内容必须与article内容紧密关联,比如词汇表.如果放置在article或者s

《HTML5开发手册》——1.4 初学者“菜谱”:使用hgroup元素组合标题

1.4 初学者"菜谱":使用hgroup元素组合标题 使用新的HTML5元素hgroup,可以为header添加更多信息. 这个元素用来对多个相关联的h1-h6标题进行分组.如果你的网站有副标题,可以使用代码1.3所示的元素,这将生成图1.4所示的布局.虽然hgroup是一个有效的分组选项,但是它主要是用来告知文档大纲(后面将讨论)哪个标题是最重要的.在代码1.3中,文档大纲只会包括最顶层的标题,在本例中是h1. 代码1.3 除h1之外,不包含其他所有标题 在代码1.3中,h2标题是与