是语义化容器，需配合css（如flex布局）实现横向菜单、响应式及交互，必要时用js增强可访问性与功能，不可仅依赖标签。
HTML5 里用 <nav></nav> 写菜单栏，不是加个标签就完事
浏览器不会因为用了 <nav></nav> 就自动给你渲染成横向菜单。它只是语义容器，样式和交互全靠自己补。
常见错误是只写：<nav><ul><li><a href="#">首页</a></li></ul></nav>，结果页面上还是垂直堆叠、没 hover 效果、移动端点不开——这不是 HTML5 的问题，是漏了 CSS 和 JS。
- 必须配 CSS 控制
display（比如flex或inline-block）才能横排 - 移动端需要
@media断点 +checkbox或 JS 控制展开/收起 -
<nav></nav>不影响 SEO 排名，但能帮读屏软件识别导航区域，别为了“语义化”而忽略可访问性（比如漏掉aria-label）
CSS 实现横向导航栏：别硬套 float，优先用 flex
老教程里用 float: left 配 clear 是过时方案，容易塌陷、响应式难调。现代写法直接上 display: flex。
示例片段：
立即学习“前端免费学习笔记（深入）”；
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
nav li {
margin-right: 1rem;
}
nav a {
text-decoration: none;
color: #333;
}
nav a:hover {
color: #007bff;
}
-
flex-wrap: wrap在窄屏下允许换行，比强制隐藏更友好 - 避免用
width: 100%给<li>，会挤掉间距；改用margin或gap - IE11 对
gap支持差，如需兼容，用margin替代
移动端下拉菜单：CSS-only 方案够用，但得绕开几个坑
纯 CSS 实现汉堡菜单，核心是用 <input type="checkbox"> 控制 <ul></ul> 显隐，靠 :checked ~ 选择器联动。不是所有浏览器都支持 :has()，所以别依赖它。
- 隐藏 checkbox 用
position: absolute; opacity: 0，别用display: none（会断开 :checked 关联） -
<label for="toggle"></label>必须和<input id="toggle">ID 严格匹配，大小写敏感 - 动画用
max-height+transition比height更可靠（height: auto无法过渡） - 触摸设备上，
:hover触发不可靠，必须提供点击态（:active或 JS 绑定click）
JavaScript 补刀场景：当 CSS 做不到时再动 JS
比如需要滚动吸顶、多级下拉、键盘导航（Tab / Esc / 方向键）、或和服务端菜单数据动态绑定——这时候才该上 JS。
别一上来就写 document.querySelector('nav').addEventListener('click', ...)，先想清楚是否真绕不开：
- 多级菜单用
details/summary是原生方案，支持键盘、无需 JS，但 iOS Safari 旧版本有 bug - 吸顶效果优先用
position: sticky，比监听scroll事件性能好得多 - 如果用 JS 控制 class 切换（如
is-open），记得在keydown中处理Escape关闭，否则残障用户卡住
复杂点不在怎么写，而在边界情况：比如屏幕阅读器是否能正确播报菜单状态、小屏下手指点击热区是否足够大、JS 失效时菜单是否仍可访问。这些地方最容易被跳过。
