最稳的导航结构是nav+ul+li+a：nav定义导航区域边界，ul表示并列选项组，li为可点击项，a提供跳转能力，四者组合兼容ie9以上且语义清晰、可访问性强、seo友好。
用 nav + ul + li + a 是最稳的起点
别绕开语义化，nav 是导航区域的明确边界，ul 表达“一组并列选项”，li 是每个可点击项，a 提供跳转能力——这四者组合在所有现代浏览器里零兼容问题，连 IE9 都能跑。
常见错误：ul 里塞 div、nav 包整块页眉（logo+搜索+菜单）、a 的 href 写成 "#" 或空值。这些都会破坏可访问性，屏幕阅读器识别不了，SEO 也抓不到真实链接。
-
nav必须单独包裹每个独立导航区（比如页脚友情链接就得另起一个nav） -
ul下直接跟li，中间不插任何其他标签 -
a的href必须是有效路径（如"/about"），不能是"javascript:void(0)" - 当前页用
aria-current="page"标记，不是靠class="active"硬写
水平排列优先用 display: flex，别碰 float
float: left 在响应式场景下容易因换行、空格产生不可控间隙，而且清除浮动（clear: both）一加就容易破坏布局流；display: inline-block 同样受 HTML 换行符影响，需要设 font-size: 0 或注释掉换行才能对齐。
display: flex 一行代码就能解决对齐、等宽、居中，gap 控制间距干净利落。唯一要注意的是 IE11 不支持 gap，得退回到 margin-right 并手动给最后一个 a 清掉右边距。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 横向菜单：对
nav设display: flex，子项自动水平排布 - 想让菜单居中？用
justify-content: center，别去父容器设text-align: center - 移动端小屏时，
flex布局会自然换行，配合媒体查询设flex-direction: column就能转垂直 - 千万别给整个
nav加white-space: nowrap，否则窄屏会横向溢出
下拉菜单必须用嵌套 ul，且带无障碍属性
纯 CSS 实现 hover 下拉，结构上就是在某个 li 里再包一层 ul，但光有结构不够。没有 aria-haspopup="true" 和 aria-expanded，屏幕阅读器用户根本不知道这是可展开菜单，键盘 Tab 也无法进入子项。
子菜单默认隐藏（display: none 或 max-height: 0），hover 或 focus 时显出。注意：JS 控制展开收起时，必须同步更新 aria-expanded 值和焦点管理，按 Esc 键要能关闭并还原焦点。
- 子
ul必须紧贴在父li内部，不能放在外面或用绝对定位脱离文档流 -
aria-haspopup="true"加在触发项（即带下拉箭头的a或button）上 -
aria-expanded初始为"false"，展开时改为"true" - 服务端渲染页面，子菜单 HTML 必须始终存在，不能 JS 动态插入——否则爬虫看不到，JS 失效就彻底没菜单
移动端折叠菜单的 DOM 结构不能动
所谓“汉堡菜单”只是视觉切换，背后 HTML 必须保留完整 nav → ul → li → a 链路。用 JS 控制 class 切换来显隐，而不是销毁重建 DOM。
如果 JS 失效、首屏直出没执行、或者 SSR 页面被爬虫抓取，结构还在，链接就还在。反之，若靠 JS 动态生成菜单，那首屏就是空白，SEO 直接归零，残障用户也完全无法操作。
- 折叠状态用
display: none或max-height: 0+overflow: hidden实现 - 切换按钮必须是
button，带aria-expanded和aria-controls属性 - 展开后需把焦点移到第一个菜单项，关闭后焦点要回退到按钮本身
- 遮罩层（overlay）点击或按 Esc 键必须触发关闭逻辑，并还原焦点
aria-current、aria-expanded 这些属性，或者觉得“先跑通再说”，结果上线后读屏软件念不出当前在哪，键盘用户卡死在第一个链接。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
