语义化导航应使用结构，图标用inline SVG并设stroke/fill为currentColor，清除列表默认样式，链接用flex布局对齐，hover和active态需同步控制文字与图标颜色。
用 <nav></nav> + <ul></ul> 搭建语义化结构
直接套用无序列表是最稳妥的起点，<nav></nav> 告诉浏览器这是导航区域，对可访问性和 SEO 都有帮助。不要用 <div> 堆砌，否则图标、焦点、屏幕阅读器支持都会变麻烦。
<p>关键点：</p>
<ul>
<li>
<code><ul></ul> 作为容器，每个 <li> 是一个菜单项
<a></a> 必须包裹文字（或图标+文字），不能只放图标——否则键盘 Tab 焦点会丢失，且部分屏幕阅读器无法识别可操作目标图标用 inline SVG 而不是 CSS background-image
用 background-image 加图标，后续想改颜色、适配暗色模式、或者加 hover 动画时，得额外写 class 或 JS 控制伪元素，非常绕。inline SVG 直接写在 <li> 里，一行就能调色：fill: currentColor，自动继承文字颜色。
示例片段：
立即学习“前端免费学习笔记（深入）”；
<li>
<a href="#dashboard">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
<path d="M3 9v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9M3 9l12-6 12 6M3 9l12 6 12-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>仪表盘</span>
</a>
</li>
注意：stroke="currentColor" 和 fill="currentColor" 是关键，这样 hover 改文字色时图标自动同步。
纵向布局靠 flex-direction: column + 基础重置
默认 <ul></ul> 有 padding-left 和 list-style，必须清掉，否则图标和文字不对齐、左侧留白难控制。
推荐最小化样式：
- 给
<ul></ul>设list-style: none、padding: 0、margin: 0 - 给
<li>设margin: 0（不用margin-bottom，避免最后一个多余间距） - 给
<a></a>设display: flex、align-items: center、gap: 12px，图标和文字自动居中对齐 - 高度统一用
min-height: 48px（适合手指点击），别只设height，防止文字换行撑开
选中态和 hover 不要用纯背景色覆盖图标
常见错误：hover 时整个 <a></a> 背景变蓝，但 SVG 图标没加 fill 覆盖，结果图标变黑（继承父级 text color）或消失（被背景吞掉）。
正确做法：
- hover/focus 时同时改
color和background-color - 确保 SVG 的
fill继承自currentColor，这样改文字色就等于改图标色 - 激活态（如
.active）建议加左 border：border-left: 3px solid #007bff，比背景高亮更轻量，也不影响图标可读性
暗色模式兼容提示：如果项目已用 @media (prefers-color-scheme: dark)，记得同步调整 color 和 background-color，SVG 会自动跟着变。
真正麻烦的是图标语义一致性——比如“设置”用齿轮，“用户”用头像，这些得团队对齐，代码再简洁也救不了设计混乱。
