用纯 html+css 可实现点击跳转与当前页高亮：必须用 而非 ，手动添加 class="active" 并用 a.active 样式控制高亮；推荐 flex 布局替代 float 或 inline-block，语义化使用 ，确保点击热区≥44×44px，href 路径需真实可达。
怎么用纯 HTML + CSS 写一个能点、能高亮、不闪退的导航条
直接说结论：不用 JS 也能做基础导航，但“能点”和“高亮当前页”必须靠 <a></a> 的天然行为 + 合理的 CSS 类控制；很多人卡在点击没反应，其实是把 <div> 或 <code><span></span> 当链接用了。
常见错误现象：点击无跳转、鼠标悬停没变化、当前页标识始终不生效。
- 必须用
<a href="xxx"></a>包裹文字，哪怕只是#或/home，浏览器才认它是可交互元素 - 当前页高亮别依赖 JS 动态加 class —— 静态页面就手动给对应
<a></a>加class="active"，然后用a.active写样式 - 别用
display: inline-block硬撑导航项间距，优先用flex布局，避免换行错位或基线对齐问题 - 移动端折叠菜单？先确保桌面端可用，再用
@media控制nav ul显示/隐藏，别一上来就套 hamburger 图标 JS
为什么 flex 是现代导航条的默认起点，而不是 float 或 inline-block
float 会脱离文档流，导致父容器塌陷，必须清浮；inline-block 默认有空白字符间隙，调间距反而是坑。而 flex 天然支持等宽、居中、自动换行（flex-wrap）、对齐控制，且兼容性早覆盖到 IE11+（够用）。
使用场景：横向主菜单、响应式顶部导航、底部工具栏。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex，子项<a></a>不用额外浮动或 display - 用
justify-content: space-between或center控制分布，比写 margin 更稳 - 移动端收起时，把
flex-direction: column和height: 0配合overflow: hidden做展开动画，比 JS 切 class 更轻量
nav 标签不是装饰，它影响语义、SEO 和屏幕阅读器
很多人只当 <nav></nav> 是个带默认 margin 的 <div>，其实它告诉浏览器：“这段是主要导航区域”。搜索引擎会加权，视障用户用读屏软件时能快速跳转到 <code><nav></nav>，省去逐行听。
容易踩的坑：<nav></nav> 里塞了搜索框、登录按钮、广告横幅 —— 这些不属于“导航”，该用 <header></header> 或 <aside></aside>。
- 每个页面最多 2–3 个
<nav></nav>，比如顶部主菜单、侧边分类导航、页脚快捷链接 - 不要嵌套
<nav><nav></nav></nav>，语义混乱，读屏器可能报错 - 如果导航项是图标无文字（如三条横线），必须加
aria-label，例如<a href="#menu" aria-label="打开主菜单"></a>
移动端点击区域太小？别只改 font-size
手指点不准的根本原因不是字小，是点击热区不足。iOS Safari 默认最小点击区域是 44×44px，Android 推荐 48×48px。只调 font-size 或 padding 不够，得整体算尺寸。
性能影响：用 transform: scale() 放大点击区域会触发重绘，不如直接扩大 padding + min-height。
- 给
<a></a>设min-height: 44px，配合display: flex和align-items: center垂直居中文字 - 别用
margin分隔导航项，用gap: 1rem（flex 容器上），更可控 - 真要加 hover 效果，记得补
@media (hover: hover)条件，避免触屏设备误触发
href 值是否真实可达 —— 开发时本地跑 file:// 协议，href="/about" 会 404；上线前务必确认路径是相对当前 HTML 的正确层级，或者统一走根路径。
