必须用包裹导航栏，禁用或onclick模拟跳转，链接用并设aria-current="page"，CSS用flex布局，移动端确保点击热区≥44×44px。
导航栏用 <nav></nav> 包裹，不是随便加个 <div>
<p>很多初学者直接写一堆 <code><a></a> 标签堆在页面顶部，语义缺失，对屏幕阅读器不友好，SEO 也弱。浏览器和辅助工具靠 <nav></nav> 识别“这是导航区域”，这是最基础但常被跳过的一步。
- 必须用
<nav></nav> 包住整个导航结构，哪怕只有一行链接
- 避免嵌套多个
<nav></nav>（比如页头一个、页脚又一个），除非逻辑上确实是独立导航系统
- 如果导航项是动态生成的（比如从 JS 渲染），也要确保最终 DOM 中存在
<nav></nav> 标签
超链接用 <a href="..."></a>，别用 <button></button> 或 onclick
<nav></nav> 包住整个导航结构，哪怕只有一行链接<nav></nav>（比如页头一个、页脚又一个），除非逻辑上确实是独立导航系统<nav></nav> 标签<a href="..."></a>，别用 <button></button> 或 onclick
常见错误：为了“看起来像按钮”就用 <button onclick="location.href='...'"></button>，或者给 <a></a> 加 role="button"。这会让键盘用户无法用 Tab 正常聚焦，也无法右键新标签页打开，还可能被浏览器拦截跳转。
- 所有页面内跳转都该用原生
<a href="/about">关于</a> -
href值要写相对路径（如"/contact"）或完整 URL（如"https://example.com/blog"），别留空或写"#"再靠 JS 拦截 - 当前页面对应的导航项，建议加
aria-current="page"，比如<a href="/home" aria-current="page">首页</a>，方便 CSS 和读屏器识别
CSS 布局选 display: flex，别硬撑 float 或 inline-block
老教程里用 float: left 清除浮动、或者靠 vertical-align 对齐 inline-block，现在既难维护又容易塌陷。Flex 是目前最稳的方案，兼容性到 IE10+（若需支持更低版本才需降级）。
-
<nav></nav>设display: flex，子项<a></a>自动水平排列 - 用
justify-content控制左右对齐（flex-start/center/flex-end），比 margin 调更可靠 - 响应式折叠（比如移动端汉堡菜单）必须配合媒体查询 +
flex-direction: column，别试图用 JS 切换 class 来改每个<a></a>的display
移动端点击区域太小，min-height 和 padding 得设够
PC 上看着没问题的导航，在手机上点不中、误触、连点两次才生效——大概率是点击热区不足。iOS Safari 和 Android Chrome 都要求可点击元素最小尺寸约 44×44px，否则触发困难。
立即学习“前端免费学习笔记（深入）”；
- 别只给
<a></a>设font-size，要配padding: 12px 20px或直接min-height: 44px - 如果用了
line-height垂直居中，确保它不会压缩实际高度（比如line-height: 1在小字号下会压扁热区） - 用 Chrome DevTools 的 “Toggle device toolbar” 实时测真机尺寸，别信模拟器显示的像素值
