语义化导航需用包裹真实跳转链接，内部必须含有效，配合ul/li结构，多nav须用aria-label区分，动态渲染要确保DOM就绪。
直接用 <nav></nav> 替换旧式 <div class="navbar"> 是第一步，但真正起作用的不是标签名，而是它是否被浏览器和辅助技术识别为导航区域。<h3>nav 里必须放真实跳转链接</h3>
<p>语义生效的前提是内部有可访问、可跳转的 <code>@#@#@#@#@#@#@#@#@#@0
<button onclick="goTo('contact')">联系</button>
@#@#@#@#@#@#@#@#@#@1（未指向有效地址）用 ul + li 组织导航项更规范
虽然 <nav></nav> 本身不限制内部结构，但搭配无序列表是事实标准：既符合人类阅读习惯，也便于读屏器按“列表”方式播报项数与顺序。
- 推荐写法：
<nav><ul> <li>@#@#@#@#@#@#@#@#@#@2</li> <li>@#@#@#@#@#@#@#@#@#@3</li> </ul></nav> - 避免把 logo、搜索框、登录按钮等非导航内容塞进同一
<nav></nav>——它们不属于“跳转目的地集合”
多个 nav 要靠 aria-label 区分用途
一个页面可以有顶部主导航、文章目录栏、页脚快捷入口，但不能只靠位置判断。没有标识的多个 <nav></nav> 会让屏幕阅读器用户困惑。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 顶部主菜单：
<nav aria-label="主导航">…</nav> - 文章内目录：
<nav aria-label="本文目录">…</nav> - 页脚链接组：
<nav aria-label="页脚快捷链接">…</nav>
动态渲染时确保 DOM 就绪再暴露 nav
React、Vue 或 AJAX 加载的导航，如果初始 HTML 中 <nav></nav> 是空的或只有 loading 占位符，辅助技术会跳过它——直到真实链接节点挂载完成才算语义成立。
- 服务端渲染（SSR）或静态生成（SSG）天然满足该条件
- 客户端渲染需确认：首次加载后，
<nav></nav>内已存在可聚焦、可点击的<a></a>元素 - 避免在
<nav></nav>外层套<div> 做状态控制；状态应由内部元素体现 </div>
