用包裹导航链接是最稳妥的语义化写法，浏览器和屏幕阅读器能识别其为导航区域；需配合结构、真实href路径、aria-label区分多导航区，并避免混入搜索框、logo等非导航内容。
用 <nav></nav> 包裹链接是最稳妥的语义化写法
浏览器和屏幕阅读器能识别 <nav></nav> 是导航区域，比纯 <div> 更可靠。别用 <code><header></header> 或 <section></section> 替代 —— 它们语义不同，SEO 和可访问性会打折扣。
常见错误是把整个页眉都塞进 <nav></nav>，其实只需包裹导航链接本身：
<nav> <a href="index.html">首页</a> <a href="about.html">关于</a> <a href="contact.html">联系</a> </nav>
- 每个
<a></a>的href值必须真实存在，否则点击 404；本地测试时注意路径是否带./或../ - 如果导航项较多，建议用无序列表
<ul><li><a>…</a></li></ul>结构 —— 语义更清晰，CSS 也更容易控制间距和悬停效果 - 避免在
<nav></nav>里放 logo 或搜索框，它们不属于“导航链接”，应放在<header></header>的其他位置
CSS 控制横向排列时，display: flex 比 float 更少出问题
float 容易导致父容器高度塌陷、换行错乱，尤其在响应式场景下难调试。现代写法直接用 flex：
nav {
display: flex;
gap: 1.5rem;
}
nav a {
text-decoration: none;
color: #333;
}
-
gap属性比margin更安全 —— 不会触发外边距合并，也不用担心第一个/最后一个元素多出空白 - 如果需要兼容 IE11，不能用
gap，改用margin-right并给最后一个<a></a>加:last-child { margin-right: 0; } - 别忘了加
text-decoration: none，否则默认下划线会干扰视觉层级
移动端折叠菜单必须靠 JavaScript 触发，纯 CSS 的 :hover 在手机上无效
PC 上用 :hover 显示下拉菜单很常见，但手机没有 hover 状态，点一下就跳转了，根本展不开子菜单。
立即学习“前端免费学习笔记（深入）”；
最简方案是加一个按钮 + 少量 JS 切换 class：
<button id="menu-toggle">☰</button>
<nav id="main-nav">
<a href="index.html">首页</a>
<div class="dropdown">
<button class="dropdown-btn">产品</button>
<div class="dropdown-content">
<a href="product-a.html">A 型号</a>
<a href="product-b.html">B 型号</a>
</div>
</div>
</nav>
- 初始 CSS 要设
.dropdown-content { display: none; }，JS 点击.dropdown-btn时才切为block - 务必监听
click事件，而不是touchstart—— 后者在部分安卓机型上会触发两次 - 如果不想写 JS，可用第三方库如
hamburgers.css配合details/summary，但<details></details>的兼容性在旧版 Safari 有坑
链接路径写错会导致整个导航栏“看起来正常却点不动”
这是新手最常卡住的地方：HTML 里写了 <a href="about.html"></a>，但实际文件叫 About.html 或 about.htm，服务器区分大小写或扩展名不匹配，就 404。
- 检查文件系统里的真实文件名，包括大小写和后缀（
.html≠.htm） - 相对路径优先用
./about.html明确当前目录，避免上级路径误写成../about.html却没对应目录结构 - 本地双击打开
index.html时，部分浏览器禁用跨文件 AJAX 或某些相对路径行为，建议用python3 -m http.server或 VS Code Live Server 插件起本地服务再测
导航栏看着简单，但语义、路径、响应式、可访问性四个点任意一个没对齐，用户就会遇到“点不了”“读不出”“手机打不开”的实际问题。尤其路径和 JS 交互，最容易被当成“前端小事”忽略掉。
