html导航菜单为什么都用li+a标签，而不直接用a标签，或者用nav+a标签，html5中导航菜单该怎样写？

原创: 2016-06-07 08:42:40 3236浏览

回复内容：

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

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

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

需要注意以下几点：

并不是所有的链接都要放到 nav 元素里面，该元素内应包含用于构成主要导航区块的部分。举个反例，通常页脚有链接列表链接到网站的其他页面，比如：服务、首页、版权页。这种情况下，仅仅用 footer 元素就够了，没必要使用 nav 元素。
如果nav 元素里面的内容描述的是一个项目列表，那就应该用列表标记（ol,ul等）帮助理解（增强语义）和导航。
用户代理（如屏幕阅读器）可以通过该元素来确定页面上哪些内容可以直接跳过或者按要求提供选择。

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


  
     href="index.html">Home
     href="#about">About
     href="//m.sbmmt.com/m/faq/#">Contact

从实现的角度来说你可以用任何标签来实现，但是为了语义化，为了搜索引擎友好通常都会这么写。

【HTML5触屏滑动侧边栏导航菜单特效】

特效说明：

一款HTML5触屏滑动侧边栏导航菜单特效下载，该Bootstrap导航菜单特效是一款基于jquery+html5实现的兼容手机和PC端动画导航菜单插件，响应式网站建设必备代码素材。请用支持HTML5+CSS3主流浏览器预览效果。（兼容测试：IE9、Firefox、Chrome、Opera、Safari、360等支持HTML5+CSS3主流浏览器）

使用方法：

1、调用CSS样式：

2、调用JS插件代码：

3、添加HTML代码：
将......之间的html和js代码；放在

之间。
原码下载：HTML5触屏滑动侧边栏导航菜单特效
更多好文章：

因为默认样式。
做水平导航栏的话，各

之间默认是没有空隙的，而这样排列的元素之间会有1em的空隙：

导航1
导航2
导航3

因为语义化标签。
简单的罗列出的导航菜单只是一盘散沙，互相之间没有任何联系，于SEO于屏幕阅读器都不友好。
而

的形式可以明确的表达出各个
之间是相关的，他们是一类内容。
赞同 @一丝对nav标签的使用说明。

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

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

上一条：用 HTML5 可以实现二维码扫描识别的功能吗？下一条：如何在家自学前端?

查看更多

热门课程

打开APP，随时随地在线学习！

html导航菜单为什么都用li+a标签，而不直接用a标签，或者用nav+a标签，html5中导航菜单该怎样写？

回复内容：

相关文章