nav标签必须套在ul外且仅用于主要导航区，不可滥用；ul/li结构提供语义、可访问性和默认行为，不可随意替换为div/a；收起菜单宜用visibility+opacity+height组合而非display:none；下拉菜单需同步设置aria-haspopup、aria-expanded及role属性。
nav 标签该不该套在 ul 外面
必须套，且只能用于主要导航区域。nav 不是装饰性标签，浏览器和读屏软件靠它识别“这是导航区”，div class="nav" 完全无效。但别滥用——页脚链接组、文章内跳转锚点、面包屑，都不算“主要导航”，不该用 nav。
常见错误：把所有带链接的区块都包进 nav，导致辅助技术误判页面结构。正确做法是只包裹顶部主导航或侧边核心功能入口，多个独立导航区则各用一个 nav，并配 aria-label 区分，比如：<nav aria-label="主导航"></nav> 和 <nav aria-label="页脚快捷链接"></nav>。
ul/li 结构为什么不能换成 div/a
不是不能，而是会丢掉三样关键东西：语义、可访问性、默认行为。屏幕阅读器把 ul 识别为“列表”，自动播报项数（“共4项”），而 div 只是“普通容器”，需手动加 role="list" 和 role="listitem" 才勉强补救。
实际影响包括：
-
ul天然支持嵌套子菜单（li里再套ul），CSS 控制显隐更直接 -
li默认有垂直间距逻辑，div需手动重置 margin/padding - 键盘 Tab 导航时，
ul/li/a组合能自然按顺序聚焦；div/a若没设tabindex，可能跳过或乱序
响应式切换时 display: none 的坑
移动端收起菜单常用 display: none，但容易忽略两个问题：一是它会让元素完全脱离渲染流，导致 height 动画失效；二是如果父级 nav 本身用了 flex 或 grid，突然 display: none 可能引发布局重排抖动。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
更稳妥的做法是：
- 用
visibility: hidden+opacity: 0+height: 0+overflow: hidden组合控制收起状态，保留 DOM 占位，动画更平滑 - JavaScript 切换时，优先操作类名（如
nav-menu--hidden），而非直接改style.display - 媒体查询中，小屏下不要只写
.nav-menu { display: none; }，要同时定义展开态：.nav-menu.show { display: block; }，避免 JS 未加载时菜单永远不可见
aria-expanded 和 aria-haspopup 怎么配对用
带下拉的菜单项（比如“产品中心”后面有个箭头），光靠 CSS 显隐不够，必须告诉辅助技术当前状态。关键不是“要不要加”，而是“加在哪、怎么同步”。
正确写法：
-
aria-haspopup="menu"加在触发按钮或父级a上，表示“点击后会弹出菜单” -
aria-expanded="false"同步加在同一元素上，JS 展开时改为"true"，收起时切回"false" - 子菜单
ul要加role="menu"，每个子项li > a加role="menuitem"
漏掉任一环节，读屏软件就无法准确播报“产品中心，菜单已关闭”或“已展开，共3项”。这类细节不报错，但真实用户根本不知道菜单存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
