最稳妥的导航栏写法是用<nav>包裹<ul><li>结构，语义正确、屏幕阅读器友好、SEO友好，配合Flexbox布局和ARIA属性确保可访问性与响应式体验。
用 <nav> 包裹 <ul><li> 是最稳妥的写法
语义正确、屏幕阅读器友好、SEO 友好，而且现代 CSS（比如 Flexbox）操作起来也顺手。别用一堆 <div> 堆导航，既难维护又容易被辅助工具忽略。
常见错误是把整个导航栏写成一个大 <div class="nav">，结果搜索引擎和读屏软件完全不知道这是导航区域。
- 必须用
<nav>作为外层容器，这是 HTML5 明确规定的语义化标签 - 内部用
<ul>+<li>列表结构，比用多个<span>或<p>更符合导航项的“并列关系”本质 -
<a>标签要放在<li>里面，不要反过来——否则键盘 Tab 焦点顺序会乱，且部分浏览器对<a>的默认样式（如 focus outline）可能失效
Flexbox 实现横向排列时，justify-content 和 gap 比 float 或 inline-block 更可靠
老方案（float: left 或 display: inline-block）容易因换行、空白符、垂直对齐等问题崩布局；Flexbox 几乎没有这些副作用。
示例关键 CSS：
立即学习“前端免费学习笔记（深入）”；
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
nav li { margin: 0; }
nav a {
display: block;
padding: 12px 20px;
text-decoration: none;
}
nav ul {
justify-content: center; /* 或 flex-start / space-between */
gap: 8px; /* 替代 margin，更干净 */
}-
gap在 Flexbox 中直接控制项间距，不用再给每个<li>加margin-right还得单独处理最后一个 - 如果导航项文字长度差异大，用
justify-content: space-around比space-between更不容易出现两端留白不均 - 移动端适配时，
flex-wrap: wrap+ 媒体查询可自然折行，而float折行后容易错位
响应式折叠菜单中，aria-expanded 和 aria-controls 不是可选项
纯靠 CSS 隐藏/显示下拉菜单，但如果不加 ARIA 属性，视障用户根本不知道这个按钮能展开什么，也无法用键盘触发。
典型结构：
<button aria-expanded="false" aria-controls="mobile-menu">☰</button> <ul id="mobile-menu" hidden> <li><a href="/home">首页</a></li> <li><a href="/about">关于</a></li> </ul>
- 点击按钮后，除了切换
hidden，必须同步更新aria-expanded值为"true"或"false" -
aria-controls的值必须严格匹配目标id，大小写、连字符都不能错 - 别只依赖
display: none控制可见性——它会让元素彻底从可访问树中移除，hidden或visibility: hidden更合适
Active 状态靠 JavaScript 监听 location.pathname 比靠后端模板更灵活
服务端渲染时硬编码 class="active" 很常见，但单页应用（SPA）或前端路由场景下，页面不刷新，DOM 不重绘，后端那套就失效了。
简单可靠的判断逻辑：
const currentPath = location.pathname;
document.querySelectorAll('nav a').forEach(link => {
const href = new URL(link.href).pathname;
if (href === currentPath || (href === '/' && currentPath === '/')) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});- 用
new URL(link.href).pathname而不是直接取link.getAttribute('href')，避免相对路径、带 query 或 hash 的干扰 - 根路径
/要单独判断，否则/blog也会被/的includes误判为 active - 如果用 Vue/React，把这个逻辑封装成 computed 或 hook 更好，避免手动 DOM 操作
导航栏真正难的不是排版，而是语义完整性、键盘可操作性和状态同步这三个层面。漏掉任意一个，对真实用户的影响都远大于少几个像素的间距。
