必须用 包裹导航区，因其是html5语义化标签，影响seo、键盘导航与读屏器识别；错误混入搜索框或滥用多个会破坏可访问性；推荐flexbox布局并配合aria属性实现健壮、无障碍的下拉菜单。
必须用 <nav></nav> 包裹，不是可选项
浏览器、读屏软件、搜索引擎靠语义标签识别“这是导航区”，<nav></nav> 是 HTML5 明确规定的功能标签，不是视觉装饰。写成 <div class="nav"> 看起来一样，但键盘 Tab 顺序可能错乱，SEO 权重下降，辅助技术直接忽略整个区域。
<p>常见错误包括：</p>
<ul>
<li>把搜索框、登录按钮塞进同一个 <code><nav></nav> —— 它们属于 <search></search> 或 <form></form>，语义混杂会导致读屏器播报混乱
<nav></nav> —— 建议控制在 2–3 个（主导航 + 页脚链接组 + 面包屑），再多就该用 aria-label 明确区分aria-label="当前位置" —— 即使用了 <nav></nav>，不标注意图，读屏器仍可能读成“导航”而非“您当前所在位置”
display: flex 是当前最稳的横向布局方案
老式 float: left 或 display: inline-block 在响应式场景下极易崩：换行空格产生间隙、垂直对齐失效、父容器高度塌陷、移动端折行后错位。Flexbox 几乎没有这些副作用，现代浏览器全覆盖（IE11 除外）。
关键实操点：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 用
gap控制项间距，比给每个<li>加margin-right干净得多，也避免了“最后一个要不要清 margin”的纠结 -
justify-content: space-around比space-between更适合文字长度不均的导航项，两端留白更均衡 - 别在
<nav></nav>上设white-space: nowrap—— 小屏会强制横向滚动，破坏体验；改用flex-wrap: wrap+ 媒体查询自然折行 - 如需兼容 IE11，
gap不可用，得退回到margin-right并手动处理最后一个子项的样式
当前页高亮必须靠 JS 或服务端动态注入
HTML 本身无法感知“我现在在哪一页”，硬编码 class="active" 到所有页面里是典型维护噩梦。路径匹配稍有偏差（比如 /about vs /about/ 或哈希路由 #/projects）就会失效。
前端简单判断逻辑（建议放
