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

简介:

本节书摘来自异步社区《HTML5开发手册》一书中的第1章,第1.5节,作者: 【美】Chuck Hudson , 【英】Tom Leadbetter 更多章节内容可以访问云栖社区“异步社区”公众号查看。

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

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

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

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


6885139cc760c6963259eacd0bcb251b68e22ea1

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


1c776735d16cb64a84905bc3c09d154878be2ce3

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


<a href=https://yqfile.alicdn.com/f5b9cc184fa792d1b01ceb42b219d4a21771b63a.png" >

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

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


2a04bfc7f67835e52d161988c7ea1b79432f85c4

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

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


6cb92e2c94e1726937071a2e419a25e14a57be33

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


<a href=https://yqfile.alicdn.com/6a65fd45ff52dc9755fea6dc64c8691a7b92e308.png" >

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

相关文章
|
9月前
|
JavaScript 前端开发 开发者
Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
本文详细介绍了Vue中动态添加HTML元素的使用方法与组件封装技巧。内容涵盖条件渲染(v-if/v-show)、列表渲染(v-for)、动态组件(:is)、手动操作DOM及动态创建组件实例等核心方法。同时,通过动态表单、弹窗组件和动态加载组件的封装示例,展示如何提升代码复用性和可维护性。最后,总结性能优化策略与注意事项,如批量更新DOM、懒加载大型组件及避免直接操作DOM等,帮助开发者在实际项目中灵活应用Vue动态元素管理功能。
274 15
|
5月前
|
XML 前端开发 C#
C#编程实践:解析HTML文档并执行元素匹配
通过上述步骤,可以在C#中有效地解析HTML文档并执行元素匹配。HtmlAgilityPack提供了一个强大而灵活的工具集,可以处理各种HTML解析任务。
297 19
|
8月前
|
移动开发 前端开发 JavaScript
HTML表单验证:确认input元素输入为具有特定整数和小数位数的数值。
将上述JavaScript代码与HTML一同使用,便可以确保用户输入的数值符合特定的格式要求。特别要注意,在实际的生产环境中,仅仅依靠前端验证是不够的。为了安全起见,后端也应该实施相应的验证措施,以防止不匹配格式的数据通过其他手段提交到服务器。
461 74
|
9月前
|
JavaScript 前端开发 开发者
Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
本文详细介绍了Vue中动态添加HTML元素的多种方法与组件封装技巧,涵盖条件渲染(v-if/v-show)、列表渲染(v-for)、动态组件(:is)、手动DOM操作及动态创建组件实例等内容。同时提供了性能优化建议,如批量更新DOM、使用v-show代替v-if以及懒加载大型组件等。通过合理封装组件,可提高代码复用性和维护性。文中还附有具体示例代码,帮助开发者更好地理解和应用相关技术。适用于前端开发人员学习和实践Vue动态元素处理与组件设计。
229 19
|
9月前
|
缓存 JavaScript 前端开发
Vue 项目中动态添加 HTML 元素的方法与实践
本文探讨了 Vue 中动态添加 HTML 元素的多种技术方案,包括条件渲染(v-if/v-show)、动态组件(component :is)、手动挂载($mount)及 Vuex 状态管理等方法。通过实例分析,如动态表单生成器与全局模态框服务,展示了这些方案在实际开发中的应用。同时提供了性能优化建议和注意事项,帮助开发者根据需求选择最佳方式,在保持 Vue 响应式特性的同时实现灵活交互。附带代码示例,便于理解和实践。
284 2
|
11月前
随机二次元背景毛玻璃个人导航HTML源码
随机二次元背景毛玻璃个人导航HTML源码
1096 19
|
11月前
HTML单页自适应网址导航源码
HTML单页自适应网址导航源码
367 1
|
存储 移动开发 数据处理
HTML5 元素2
HTML5引入了多个新元素以增强表单功能和用户体验。`&lt;keygen&gt;`元素用于生成密钥对,提交表单时生成私钥和公钥,私钥保存在客户端,公钥发送至服务器,用于后续的身份验证。`&lt;output&gt;`元素则用于展示计算结果或其他脚本输出,如表单数据处理的结果。此外,`&lt;datalist&gt;`元素可与`&lt;input&gt;`元素结合使用,提供预定义的选项列表,增强输入的便捷性和准确性。这些元素共同提升了网页的交互性和安全性。
|
移动开发 前端开发 JavaScript
HTML5 <nav> 元素2
HTML5中的`&lt;nav&gt;`标签用于定义页面的导航链接部分,但并非所有链接都需置于其中。`&lt;aside&gt;`标签定义页面主内容外的相关信息,如侧边栏。`&lt;header&gt;`标签描述文档或节的头部区域,可用于定义内容的介绍展示区。示例包括导航、家庭旅行记录和IE9发布信息等。