nav元素仅为语义容器，需配合aria-label等标注、真实url链接及正确结构（如面包屑用）才能实现有效流程导航，不可依赖js模拟跳转或视觉布局混淆语义。
nav 元素不是“流程导航区域映射页面”的自动解决方案，它只是语义容器；真正实现页面间跳转与结构映射，靠的是链接目标、URL 设计和可访问性标注的组合，而不是某个标签本身能“映射”。
nav 元素必须配 aria-label 才算可用
浏览器不会自动把 nav 当作“流程导航”——读屏软件只看到一个未标注的导航区块，用户无法区分它是主导航、面包屑还是页脚快捷入口。
- 错误写法：
<nav><ul><li>@#@#@#@#@#@#@#@#@#@0</li></ul></nav>（无标识，辅助技术无法归类） - 正确写法：
<nav aria-label="主导航">...</nav>或<nav aria-labelledby="bc-title"><h2 id="bc-title">当前位置</h2></nav> - 多组
nav必须各自有唯一标识，比如aria-label="系统设置菜单"和aria-label="文档目录"
链接 href 必须指向真实页面或锚点，不能靠 JS 模拟跳转来“假装映射”
所谓“流程导航”，本质是用户按逻辑路径从 A → B → C 浏览。如果所有链接都用 href="#" + onclick 切换 DOM，那对搜索引擎、后退按钮、书签、屏幕阅读器都是断裂的。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 真实页面跳转：
@#@#@#@#@#@#@#@#@#@1、@#@#@#@#@#@#@#@#@#@2 - 禁用 JS 时仍需可访问：确保每个
href是有效 URL，不要依赖 JS 注入地址 - 避免
target="_blank"破坏流程：除非必要，别打断用户的浏览上下文
面包屑导航要靠手动维护，不能靠 JS 自动推导路径
没有浏览器或框架会根据当前 URL 自动渲染「首页 > 产品 > Web 工具 > 导航栏」这样的面包屑。它必须由开发者在每个页面中显式写出，或由服务端/构建工具注入。
- 静态示例：
<nav aria-label="当前位置"><ol> <li>@#@#@#@#@#@#@#@#@#@3</li> <li>@#@#@#@#@#@#@#@#@#@4</li> <li aria-current="page">导航栏</li> </ol></nav> -
aria-current="page"必须加在当前页对应项上，不能只靠 CSS class - 不要用
<ul></ul>替代<ol></ol>：面包屑是线性顺序，<ol></ol>更符合语义
固定定位或滚动监听不影响 nav 的语义，但会影响键盘焦点流
用 position: fixed 或 IntersectionObserver 实现吸顶导航很常见，但这不改变 nav 的职责——它仍是跳转入口，不是状态显示器。
- 固定导航必须保留
tabindex可达性：别让transform或overflow: hidden父容器截断焦点流 - 滚动时隐藏导航？要确保键盘用户仍能触发（比如通过
skip-link返回顶部） - 移动端折叠菜单的
<button></button>必须用aria-controls关联下拉内容，且该内容不应脱离nav的 DOM 范围
nav 当作“视觉容器”来用——比如把 logo、搜索框、用户头像全塞进同一个 nav 里。这会让语义混乱，键盘用户 Tab 到第 7 个链接才发现这是个搜索输入框，而不是导航项。导航就是导航，其他功能该归哪归哪。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
