必须用<nav><ul>结构而非<div class="nav">，因<nav>定义导航区域语义、<ul>明确并列菜单项，缺失会导致读屏器跳过、SEO权重稀释、CSS选择器失效及键盘焦点错乱；纯HTML无法响应式，需配合@media断点和:checked伪类实现折叠。
直接用 <nav> + <ul> + Flex 布局，加一条 @media 切断点，就能跑通绝大多数场景。别碰 float，也别指望纯 CSS hover 下拉在手机上可用。
为什么必须用 <nav> 包 <ul> 而不是 <div class="nav">
语义错误会导致屏幕阅读器跳过导航、SEO 权重稀释、样式调试时父子关系混乱。常见错误是把 <a> 直接塞进 <nav> 里——这会让 CSS 选择器难写、间距难控、键盘焦点顺序错乱。
-
<nav>表示“一组导航链接的集合”，<ul>才是并列项的语义容器 - 如果只有单个链接（比如仅“登录”），
<nav>反而不合适，改用<header>或普通<div> - 别给
<ul>设margin或padding后再靠text-align对齐——Flex 才是可控方案
display: flex 的关键配置和易错点
横向对齐靠 justify-content，不是靠 margin-left: auto 堆出来的；热区完整靠 a 设 display: block，不是靠 li 的 padding 撑开。
-
nav ul必须设display: flex; list-style: none; margin: 0; padding: 0; -
nav a必须设display: block; text-decoration: none;，否则点击只响应文字区域 - 右侧对齐某几个项（如用户头像）：给对应
<li>加margin-left: auto;，不是给最后一个<li>加margin-right - 最后一项右侧多余间距？用
nav li:last-child { margin-right: 0; }清掉
移动端折叠菜单的最小可行方案
不依赖 JS 是底线。用 <input type="checkbox"> + <label> + :checked ~ 通用兄弟选择器，结构必须严格：<input> 在 <nav> 前面，for 和 id 严格一致。
立即学习“前端免费学习笔记（深入）”；
- HTML 中放：
<input type="checkbox" id="menu-toggle"><label for="menu-toggle">☰</label><nav><ul>...</ul></nav> - CSS 中写：
#menu-toggle:checked ~ nav ul { display: flex; flex-direction: column; } - 必须加
position: absolute或top: 100%让下拉层不撑开布局，否则页面会跳动 - 别信“
:focus-within控制展开”的方案——iOS Safari 支持不稳定，且无法解决点击后收起问题
Safari 和 iOS 上 hover/focus 失效的真实原因
不是代码写错了，是 Safari 对未访问链接（:link）和已访问链接（:visited）有硬性限制：hover 时不能改 background-color、border、transform 等，除非你显式定义了基础状态。
- 必须写：
a:link, a:visited { color: #333; text-decoration: none; } - hover 和 focus 要合并写：
a:hover, a:focus { background-color: #f0f0f0; }，否则键盘用户不可用 - 如果要用
transform: scale(1.05)，得加will-change: transform;，不然 Safari 渲染卡顿 - 移动端没有 hover，所以所有交互反馈必须同时支持
:focus，不能只靠 hover
真正卡住人的往往不是“怎么写”，而是 <input> 和 <nav> 的 DOM 顺序、:link/:visited 的基础样式缺失、以及忘记加 <meta name="viewport"> 导致媒体查询完全不生效。这些地方一错，整个导航就“看起来能跑，实际点不动”。
