• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > html导航菜单为什么都用li+a标签,而不直接用a标签,或者用nav+a标签,html5中导航菜单该怎样写?

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

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含等相关知识,匿名希望在学习及工作中可以帮助到您

回复内容:

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

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

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

需要注意以下几点:
  • 并不是所有的链接都要放到 nav 元素里面,该元素内应包含用于构成主要导航区块的部分。举个反例,通常页脚有链接列表链接到网站的其他页面,比如:服务、首页、版权页。这种情况下,仅仅用 footer 元素就够了,没必要使用 nav 元素。
  • 如果nav 元素里面的内容描述的是一个项目列表,那就应该用列表标记(ol,ul等)帮助理解(增强语义)和导航。
  • 用户代理(如屏幕阅读器)可以通过该元素来确定页面上哪些内容可以直接跳过或者按要求提供选择。
所以通常一个页面导航可以这样写:
  • href="index.html">Home
  • href="#about">About
  • href="#">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的空隙:
    导航2 导航3 因为语义化标签。
    简单的罗列出的导航菜单只是一盘散沙,互相之间没有任何联系,于SEO于屏幕阅读器都不友好。
    而
    • 的形式可以明确的表达出各个
    • 之间是相关的,他们是一类内容。
      赞同 @一丝对nav标签的使用说明。
  • 您可能想查找下面的文章:

    相关文章

    • 2018-12-03H5学习之旅-H5的格式化(4)
    • 2017-08-0610个最常见的HTML5面试题 附答案
    • 2018-12-03html5成Web开发者最关心的技术
    • 2018-12-03HTML5 解决苹果手机不能自动播放音乐问题的相关技巧
    • 2018-12-03opengl/webgl 可以部分重绘吗?
    • 2018-12-03推荐5款Canvas.toDataURL特效(收藏)
    • 2018-12-03Html5 Canvas初探学习笔记(9) -渐变
    • 2017-09-04canvas fabric.js api梳理
    • 2017-08-06一款html5 canvas实现的图片玻璃碎片特效
    • 2018-12-03html5中在用户可以开始播放视频/音频时触发的事件oncanplay

    文章分类

    • html/xhtml
    • html5
    • CSS
    • XML/XSLT
    • Dreamweaver教程
    • Frontpage教程
    • 心得技巧
    • bootstrap
    • vue
    • AngularJS
    • HBuilder教程
    • css3
    • 浏览器兼容
    • div/css
    • 网页编辑器
    • axure

    最近更新的内容

      • 如何看待B站 (bilibili) 开源 HTML5 播放器内核 flv.js?
      • HTML5自定义元素播放焦点图动画示例代码详细介绍
      • html5 svg 中元素点击事件添加方法
      • 推荐WEB开发者最佳HTML5和CSS3代码生成器
      • 详细介绍25+免费的Bootstrap HTML5网站模板图文详情
      • h5的28个新特性的详细介绍
      • HTML5 Web Workers之网站也能多线程的实现
      • html5为输入框添加语音输入功能
      • 基于HTML标签marquee实现滚动效果的简单方法
      • HTML5 Web Workers之网站也能多线程的实现_html5教程技巧

    关于我们 - 联系我们 - 免责声明 - 网站地图

    ©2020-2025 All Rights Reserved. linkedu.com 版权所有