应使用 <nav> 标签，因其具有语义性，能被屏幕阅读器识别为导航区域，提升可访问性和SEO；多个导航区需各自独立使用 <nav>，不可混用或塞入非导航元素。
HTML 导航栏用 <nav> 还是 <div>？
语义正确性直接影响可访问性和 SEO。用 <nav> 是标准做法，屏幕阅读器会识别为导航区域；用 <div> 纯属“能跑就行”，但后续加 ARIA 或适配暗色模式、键盘导航时会多踩三四个坑。
- 必须把导航链接包在 <nav> 内，而不是只给外层容器加 class
- 如果页面有多个导航区（比如顶部主菜单 + 页脚快捷链接），每个都要独立用 <nav>，别共用一个
- 不要为了“省代码”把登录/搜索框硬塞进同一个 <nav> —— 它们语义不同，该用 <header> 或 <form> 就用
CSS 实现横向菜单时 display: flex 和 float 哪个更稳？
现在直接选 display: flex，float 已成历史包袱。
- float 需额外清浮动（overflow: hidden 或伪元素），响应式断点一改就漏高、错位
- flex 天然支持居中（justify-content: center）、等宽（flex: 1）、自动换行（flex-wrap: wrap）
- 老旧 IE10 及以下才真需要 float，2024 年多数项目已不兼容这类浏览器
- 注意：别对 <a> 直接设 flex，而是对 <ul> 或 <nav> 设，再让 <li> 做 flex-item
下拉菜单点击没反应？检查这三处 JavaScript 绑定 下拉菜单失效，90% 出在事件监听范围或触发条件上。
- 别在 DOMContentLoaded 外写事件监听，否则 DOM 没加载完就绑定，等于没绑
- 用 querySelectorAll('.dropdown-trigger') 获取全部触发按钮，再循环 .forEach() 绑，别只绑第一个
- 点击切换显隐时，别直接操作 style.display，优先切 class（比如 is-open），否则 CSS 动画、媒体查询容易被内联样式覆盖
- 示例关键片段：
document.querySelectorAll('.nav-item.dropdown').forEach(item => {
const trigger = item.querySelector('.dropdown-trigger');
trigger.addEventListener('click', e => {
e.preventDefault();
item.classList.toggle('is-open');
});
});
移动端导航栏收起后，点击汉堡图标没弹出？常见兼容问题 不是 JS 写错了，往往是 CSS 层叠或媒体查询漏了关键声明。
- 汉堡图标本身需用 display: block 显式显示，别依赖父容器继承
- 收起的菜单默认用 display: none，但必须配合 position: absolute 或 transform: translateX(-100%)，否则 Safari iOS 15+ 会出现“闪一下又消失”
- 媒体查询里，别只写 @media (max-width: 768px)，补上 screen and (max-width: 768px) 更稳妥，部分安卓 WebView 对纯 max-width 解析异常
- 测试时别只点一次：iOS 上连续快速点击可能触发双击缩放，建议加 touch-action: manipulation 到触发按钮
导航栏看着简单，但语义、响应式、可访问性、跨端行为这几块一旦漏掉细节，后面调试花的时间远超重写一遍。尤其 <nav> 标签和 flex 布局，一开始选对，后面加暗色模式或键盘导航支持就顺得多。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
