本文详解如何将 html 导航菜单中的文字链接（如 about、work）替换为 svg 图标，并修正原始代码的语义错误，确保结构合法、样式可控、可访问性良好。
首先，您原始代码中 <li> 元素直接嵌套在 <nav> 内是不符合 HTML 规范的——<li> 必须作为 <ul>、<ol> 或 <menu> 的子元素存在。现代语义化推荐使用 <ul>（无序列表）表示导航项，因其广泛兼容、语义清晰且无障碍支持完善。修正后的基础结构如下：
<nav aria-label="主菜单">
<ul class="nav-list">
<li><a href="/about"><svg viewBox="0 0 24 24" width="24" height="24" focusable="false"><use href="#icon-about" /></svg><span class="visually-hidden">About</span></a></li>
<li><a href="/work"><svg viewBox="0 0 24 24" width="24" height="24" focusable="false"><use href="#icon-work" /></svg><span class="visually-hidden">Work</span></a></li>
<li><a href="/history"><svg viewBox="0 0 24 24" width="24" height="24" focusable="false"><use href="#icon-history" /></svg><span class="visually-hidden">History</span></a></li>
<li><a href="/contact" class="button"><svg viewBox="0 0 24 24" width="24" height="24" focusable="false"><use href="#icon-contact" /></svg><span class="visually-hidden">Contact</span></a></li>
</ul>
</nav>✅ 关键改进说明：
- 使用 <ul> 包裹 <li>，符合 HTML5 语义标准；
- 添加 aria-label 提升屏幕阅读器可访问性；
- 每个 <a> 内嵌 SVG 图标 + <span class="visually-hidden"> 文本，兼顾视觉简洁与无障碍需求（.visually-hidden 可通过 CSS 隐藏但保留给辅助技术读取）；
- focusable="false" 防止 SVG 自身抢夺键盘焦点，确保导航逻辑清晰。
? SVG 集成方式选择：
- ✅ 内联 SVG Sprite（推荐）：将所有图标定义在页面底部 <svg style="display:none"> 中，通过 <use href="#icon-name"> 复用，零请求、高可控性；
- ✅ 外部 SVG 文件引用：<img src="icons/about.svg" alt="About">，简单但无法样式化图标颜色；
- ⚠️ Font Awesome 等图标库：需引入 CSS/JS，图标为字体或 SVG 组件，灵活性略低，且增加额外资源开销。
? 小贴士：
- 勿将 SVG 直接写在 <li> 或 <span> 内却不包裹在 <a> 中——链接行为必须由 <a> 承载；
- 若需悬停/焦点时图标变色，请对 SVG 内 <path> 或 <g> 设置 fill: currentColor，再通过 CSS 控制 a:hover svg { color: #007bff; }；
- 始终为图标提供 alt 文本或 .visually-hidden 标签，满足 WCAG 2.1 AA 合规要求。
通过以上结构重构与 SVG 集成，您不仅能实现美观的图标化导航，更能保障代码健壮性、可维护性与用户包容性。
