语义正确的导航结构必须用<nav aria-label="主导航"><ul><li><a href="/">首页</a></li></ul></nav>，其中<ul>定义链接组、<li>包裹<a>、href不可为空、当前页加aria-current="page"，且样式应作用于<a>而非<li>。
用 <nav><ul><li><a> 写出语义正确的结构
别用 <div> 堆导航，也别碰已废弃的 <menu>。浏览器和读屏软件只认 <nav> 作为导航容器，<ul> 表示一组逻辑并列的链接项。<li> 必须包裹 <a>，且 <a> 的 href 不能为空或省略——哪怕跳转到 # 或 javascript:void(0)，否则键盘 Tab 无法聚焦，无障碍直接失效。
-
<nav aria-label="主导航">是必须加的，让屏幕阅读器知道这是什么 - 每个当前激活页的
<a>加aria-current="page"，比如首页链接是<a href="/" aria-current="page">首页</a> - 不要把
<a>放在<li>外面，也不要漏掉<li>——语义链断了就不是菜单了
display: flex 是最稳的水平排列方式
别再用 float: left 或 display: inline-block，前者要清浮动、后者有看不见的空白间隙，调试起来容易卡住。直接给 <ul> 设 display: flex，一行写完就能对齐，还自带垂直居中能力。
-
justify-content: center居中，justify-content: flex-end右对齐，按需选 - 每个
<li>不用设宽，靠margin控制间距，比如margin: 0 1rem - 如果菜单项文字过长导致换行，加
white-space: nowrap到<a>上 - 注意：
<ul>默认有padding-left，必须重置为0
:hover 效果必须作用在 <a> 上，不是 <li>
鼠标移到链接文字边缘但仍在 <li> 范围内时，如果 :hover 绑在 <li> 上，会误触发背景色变化——用户会觉得“明明没碰到字却变色了”。这问题在触控设备上更明显。
- 样式只写
a:hover { background: #eee; color: #333; }，别写li:hover a -
<a>要设display: block或inline-flex，让它撑满<li>，点击区域才够大 - 过渡动画加在
<a>上：transition: background 0.2s, color 0.2s，别加在<li>
移动端下拉菜单不用 JS 就能做，但有硬限制
纯 CSS 实现二级菜单确实可行，但依赖 <input type="checkbox"> + :checked ~ ul，这个方案在 iOS Safari 15.4 以下版本里有 focus 失效问题，而且要求 HTML 结构严格相邻。
立即学习“前端免费学习笔记（深入）”；
-
<input id="nav-toggle" type="checkbox">必须放在最前，<label for="nav-toggle">紧跟其后，<ul class="submenu">必须紧接在<input>后面，中间不能插任何块级元素 - 展开逻辑只能靠
input:checked ~ ul，不能用:focus-within——收起后焦点残留会导致菜单不关闭 - 如果项目要兼容老 iOS 或需要键盘操作（比如按空格展开），就得 fallback 到 JS，CSS-only 方案只是简化版备选
<a> 的交互完整性——结构对了，样式调得再炫，缺了 aria-label 或 href，对部分用户来说就是不可用的。 
