nav标签仅语义化标识导航区块，不自带布局或定位功能，其位置由嵌套在header或footer中决定；必须包裹真实href链接，禁用按钮、搜索框等非导航元素，并为多个nav添加aria-label区分用途。

nav 标签不是“分区域”的工具，它只标识导航区块

很多人以为写个 <nav></nav> 就自动把页面“分”出一个导航区，其实不是。<nav></nav> 只是一个语义容器，浏览器和读屏软件靠它识别“这里是一组主要跳转链接”，但不会改变布局、不自带定位、也不影响 DOM 流。它是否出现在页头或页脚，完全取决于你把它放在 <header></header> 里还是 <footer></footer> 里——位置是 HTML 嵌套决定的，不是 <nav></nav> 自己“划分”的。

nav 必须包裹真实 href 链接，不能塞按钮或搜索框

常见错误：<nav><button>首页</button></nav> 或 <nav><input type="search"></nav>。这类写法会让读屏器误判为“可跳转导航”，实际却无法触发页面跳转，违反 W3C 定义。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 只在包含有效 href 的 @#@#@#@#@#@#@#@#@#@0<a>关于</a> 后发现链接垂直堆叠？这不是 bug，是预期行为。<nav></nav> 默认 display: block，里面 <a></a> 是 inline 元素，自然从上到下排。
  • 横排首选 nav { display: flex; gap: 1.5rem; }，比 float 或 inline-block 更稳，响应式切换也简单
  • 移动端收拢时，直接加 @media (max-width: 768px) { nav { flex-direction: column; } }，不用改 HTML
  • 别在 <nav></nav> 上设 white-space: nowrap，小屏会横向溢出，破坏可访问性
  • 如果项目要兼容 IE11 及以下，gap 不生效，得退回到 margin-right + 最后一项 margin-right: 0

  真正容易被忽略的是：nav 的语义价值只在最终渲染的 HTML 中存在。前端框架动态生成的导航，如果 SSR 阶段没输出真实 <a href="..."></a>，或者 hydrate 后才挂载链接，那读屏器和 SEO 爬虫看到的就是空 <nav></nav>——跟没写一样。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！