语义正确的导航需用包裹结构，标注aria-label，禁用float改用flex布局，移动端须结合js与媒体查询实现可访问的响应式切换。
用 <nav></nav> 包住 <ul></ul> 是语义正确的起点，但“完美导航”不只靠标签嵌套——关键在结构清晰、样式可控、响应及时、访问友好。
nav 必须包裹真正主导航，且只用一次主区域
<nav></nav> 不是装饰性容器，而是向屏幕阅读器和搜索引擎声明“这是页面核心导航”。它应只用于顶部主菜单、侧边全局导航或页脚主要链接组。同一页面可有多个 <nav></nav>，但需区分用途：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 顶部主导航加
aria-label="主导航" - 页脚快捷链接用
aria-label="快速链接" - 避免把搜索框、登录入口或面包屑塞进同一个
<nav></nav>
ul + li 是唯一推荐的内部结构
所有导航项必须用无序列表组织，不能直接写 @#@#@#@#@#@#@#@#@#@0<br>
<li>@#@#@#@#@#@#@#@#@#@1</li>
<br>
<br><h3>flex 布局替代 float，一行写清横向与换行逻辑</h3>
<p>默认 <code><ul></ul> 是垂直堆叠，要变横向菜单，CSS 必须介入。现代做法直接用 display: flex：
nav ul { display: flex; list-style: none; padding: 0; margin: 0; }-
nav li { margin-right: 1rem; }或更优的gap: 1rem;（注意 IE11 不支持 gap，需回退为 margin） - 窄屏下允许折行：
flex-wrap: wrap;，比隐藏溢出或强制滚动更友好 - 避免用
float: left—— 容易塌陷、清除浮动麻烦、响应式调试成本高
移动端切换不能只靠 HTML，JS + 媒体查询缺一不可
小屏幕下，水平菜单必须收起。这一步 HTML 和 CSS 无法自动完成：
- HTML 中预留按钮和菜单容器：
- CSS 用
@media (max-width: 768px)隐藏菜单、显示按钮 - JS 控制
aria-expanded状态和.show类切换，确保键盘用户也能回车展开 - 别忘了给
a加outline: 2px solid #007bff;等焦点样式，否则 Tab 导航会“消失”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
