导航栏必须用nav包裹ul+li结构，因div无语义导致屏幕阅读器无法识别、SEO失效、焦点混乱且CSS交互失效；ul+li提供必需的列表语义与结构约束。
nav 必须用，ul + li 必须套，否则不是导航栏，只是“长得像导航的一堆链接”。
为什么不能只用 div 包 a
屏幕阅读器靠语义标签识别功能区域，div 没有导航含义；搜索引擎也忽略它，SEO 权重归零；键盘 Tab 焦点顺序容易错乱，尤其当嵌套表单或按钮时。更麻烦的是：CSS 里想用 :focus-within 或 nav :focus 做交互增强，根本没效果——因为没有 nav 元素。
常见错误写法：
<div class="nav"> <a href="home.html">首页</a> <a href="about.html">关于</a> </div>
正确起点必须是：
立即学习“前端免费学习笔记（深入）”；
<nav aria-label="主导航">
<ul>
<li><a href="home.html">首页</a></li>
<li><a href="about.html">关于</a></li>
</ul>
</nav>
ul 和 li 不是装饰，是结构必需
导航项天然具有并列、可枚举、可顺序遍历的特性，ul + li 正是为此设计的语义容器。用 span 或 p 替代，会丢失列表语义，ARIA 屏幕阅读器读作“段落、段落、段落”，而不是“菜单项1/2/3”。
-
li是唯一合法的ul直接子元素，浏览器强制校验，写div在里面会被自动包裹或忽略 - 每个
li应该只包一个可操作项（通常是a），避免把搜索框、主题切换按钮塞进去 - 如果某项当前激活（比如“首页”在首页），给对应
a加aria-current="page"，读屏器会读出“首页，当前页面”
横向排列别碰 float，直接上 display: flex
float: left 会导致父 nav 高度塌陷，必须额外清浮动；且换行逻辑不可控，小屏下容易横向溢出。Flexbox 是目前最稳的解法。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
关键 CSS 片段：
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 1rem; /* 比 margin 更干净，不用处理最后一个 */
}
nav a {
display: block;
padding: 0.5rem 1rem;
text-decoration: none;
}注意点：
- 别设
white-space: nowrap强制单行——移动端宽度不够时会触发横向滚动，体验极差 - 居中对齐用
justify-content: center，右对齐用flex-end，比text-align更可靠 - 需要响应式折行？加
flex-wrap: wrap，再配合@media (max-width: 768px)改成column
下拉菜单必须配 aria-expanded 和 aria-controls
纯 CSS 的 :hover 下拉（比如 .dropdown:hover .dropdown-content）对键盘用户完全不可用。视障用户按 Tab 到父项时，不知道它能展开，也无法用空格/回车触发。
正确结构示例：
<li class="dropdown">
<a href="#" aria-haspopup="true" aria-expanded="false" aria-controls="submenu1">产品</a>
<ul id="submenu1" class="dropdown-content" hidden>
<li><a href="product-a.html">产品 A</a></li>
<li><a href="product-b.html">产品 B</a></li>
</ul>
</li>JavaScript 控制展开时，务必同步更新：
-
aria-expanded值在 true/false 间切换 -
hidden属性也要同步增删（比display: none更语义化） - 焦点要自动移到第一个子菜单项，否则键盘用户卡死在父链接
最容易被忽略的细节：下拉菜单的 position: absolute 必须相对于带 position: relative 的父 li，否则在缩放或滚动时定位偏移——而这个父 li 往往被当成普通列表项，忘了加定位。
