html如何制作导航栏？-html教程-PHP中文网

最稳妥的导航栏写法是用包裹结构，语义正确、屏幕阅读器友好、seo友好，配合flexbox布局和aria属性确保可访问性与响应式体验。

html如何制作导航栏？

用 `<nav></nav>` 包裹 `<ul><li></ul>` 是最稳妥的写法

语义正确、屏幕阅读器友好、SEO 友好，而且现代 CSS（比如 Flexbox）操作起来也顺手。别用一堆 <div> 堆导航，既难维护又容易被辅助工具忽略。<p>常见错误是把整个导航栏写成一个大 <code><div class="nav">，结果搜索引擎和读屏软件完全不知道这是导航区域。<ul> <li>必须用 <code><nav></nav> 作为外层容器，这是 HTML5 明确规定的语义化标签

内部用 <ul></ul> + <li> 列表结构，比用多个 <span></span> 或 <p></p> 更符合导航项的“并列关系”本质

<a></a> 标签要放在 <li> 里面，不要反过来——否则键盘 Tab 焦点顺序会乱，且部分浏览器对 <a></a> 的默认样式（如 focus outline）可能失效

Flexbox 实现横向排列时，`justify-content` 和 `gap` 比 `float` 或 `inline-block` 更可靠

老方案（float: left 或 display: inline-block）容易因换行、空白符、垂直对齐等问题崩布局；Flexbox 几乎没有这些副作用。

示例关键 CSS：

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav li { margin: 0; }
nav a {
  display: block;
  padding: 12px 20px;
  text-decoration: none;
}
nav ul {
  justify-content: center; /* 或 flex-start / space-between */
  gap: 8px; /* 替代 margin，更干净 */
}

gap 在 Flexbox 中直接控制项间距，不用再给每个 <li> 加 margin-right 还得单独处理最后一个
如果导航项文字长度差异大，用 justify-content: space-around 比 space-between 更不容易出现两端留白不均
移动端适配时，flex-wrap: wrap + 媒体查询可自然折行，而 float 折行后容易错位

响应式折叠菜单中，`aria-expanded` 和 `aria-controls` 不是可选项

纯靠 CSS 隐藏/显示下拉菜单，但如果不加 ARIA 属性，视障用户根本不知道这个按钮能展开什么，也无法用键盘触发。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

典型结构：

<button aria-expanded="false" aria-controls="mobile-menu">☰</button>

点击按钮后，除了切换 hidden，必须同步更新 aria-expanded 值为 "true" 或 "false"
aria-controls 的值必须严格匹配目标 id，大小写、连字符都不能错
别只依赖 display: none 控制可见性——它会让元素彻底从可访问树中移除，hidden 或 visibility: hidden 更合适

Active 状态靠 JavaScript 监听 `location.pathname` 比靠后端模板更灵活

服务端渲染时硬编码 class="active" 很常见，但单页应用（SPA）或前端路由场景下，页面不刷新，DOM 不重绘，后端那套就失效了。

简单可靠的判断逻辑：

const currentPath = location.pathname;
document.querySelectorAll('nav a').forEach(link => {
  const href = new URL(link.href).pathname;
  if (href === currentPath || (href === '/' && currentPath === '/')) {
    link.classList.add('active');
  } else {
    link.classList.remove('active');
  }
});

用 new URL(link.href).pathname 而不是直接取 link.getAttribute('href')，避免相对路径、带 query 或 hash 的干扰
根路径 / 要单独判断，否则 /blog 也会被 / 的 includes 误判为 active
如果用 Vue/React，把这个逻辑封装成 computed 或 hook 更好，避免手动 DOM 操作

导航栏真正难的不是排版，而是语义完整性、键盘可操作性和状态同步这三个层面。漏掉任意一个，对真实用户的影响都远大于少几个像素的间距。