标签仅提供语义，无默认样式，需CSS控制布局、间距和交互效果；单独使用时视觉上与无异，常见错误是未写CSS导致链接竖排堆叠。
HTML 文档导航部分不是靠某个“导航标签”实现的，而是用语义化结构 + CSS 控制呈现，<nav></nav> 是唯一专用容器，但光写它没用。
为什么 <nav></nav> 单独写不显示导航效果
<nav></nav> 只是语义标记，浏览器不会自动给它加样式、下划线或横向排列。它对 SEO 和屏幕阅读器有意义，但视觉上和 <div> 没区别。
<ul>
<li>常见错误现象：写了 <code><nav><a href="#">首页</a></nav>，结果链接堆成一竖列，没间距也没 hover 效果
display: flex）、间距（margin）、悬停状态（:hover）导航链接怎么组织才符合语义和可访问性
别用 <div> 套一堆 <code><a></a>，也别为了“简洁”把所有链接塞进一个 <nav></nav> 里。
- 主站导航（如顶部横栏）用一个
<nav aria-label="主导航"></nav>，加上aria-label明确用途 - 页内锚点导航（如“回到顶部”“章节跳转”）建议单独用
<nav aria-label="页内导航"></nav>，避免和主导航混淆 - 每个链接应有明确文字，避免
<a href="#">点击这里</a>；图标链接必须配aria-label或隐藏文本（如<span class="visually-hidden">GitHub 仓库</span>） - 当前页面对应链接建议加
aria-current="page"，例如<a href="/about" aria-current="page">关于</a>，辅助技术能感知
响应式导航在移动端怎么不崩
PC 上横向排列的导航，到手机上直接换行或溢出，是没处理媒体查询和交互逻辑的典型表现。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 基础方案：用
@media (max-width: 768px)把<nav></nav>内链接设为display: block，再加个汉堡按钮（<button aria-expanded="false"></button>）控制显隐 - 别用
display: none直接隐藏整个<nav></nav>，会导致屏幕阅读器也读不到——应该用visibility: hidden+height: 0+overflow: hidden组合收起 - JavaScript 控制展开时，记得同步更新
aria-expanded和aria-hidden属性，否则视障用户无法知道菜单是否已打开 - 避免在
<nav></nav>里放复杂组件（如搜索框、登录弹窗），它们该属于<header></header>或独立区域
真正难的不是写几个标签，而是让导航在键盘 Tab 流、屏幕阅读器、小屏触控、CSS 失效这几种场景下都不掉链子。很多人只盯着“看起来像导航”，却漏掉了 aria-current、aria-expanded、焦点管理这些实际影响可用性的细节。
