HTML5网页导航栏代码

用<nav>标签包住一组链接，网页比堆砌<div>干净得多。导航HTML5之前，栏代导航栏就是网页一堆div加class，浏览器和搜索引擎都看不出那块区域是导航导航。现在语义化标签直接告诉机器：这里是栏代主要导航区。我写过的网页项目里，只要导航结构复杂一点，导航<nav>配合<ul>几乎成了固定搭配，栏代改起来也省事。网页

最简结构：nav + ul + li + a

看一段真实可用的导航代码：

<nav class="main-nav"> <ul> <li><a href="/">首页</a></li> <li><a href="/blog">文章</a></li> <li><a href="/about">关于</a></li> <li><a href="/contact">联系</a></li> </ul> </nav>

别小看这四行。<ul>去掉默认的栏代圆点和缩进，用CSS的网页list-style: none; padding: 0; margin: 0;就能变成干净的横排。链接用<a>包裹，导航点击区域大，栏代键盘Tab也能聚焦。有人喜欢直接给<li>绑点击事件，那是自找麻烦——移动端点击延迟、无障碍支持都容易出问题。

横排布局：flex一行搞定

以前用float: left，还得给父元素加overflow: hidden清浮动，烦。现在直接：

.main-nav ul {  display: flex; gap: 2rem; justify-content: center; list-style: none; padding: 1rem 0; background: #1a1a1a; } .main-nav a {  color: #eee; text-decoration: none; font-size: 1rem; padding: 0.5rem 0.25rem; border-bottom: 2px solid transparent; transition: border-color 0.2s; } .main-nav a:hover {  border-bottom-color: #f39c12; }

gap属性比margin省心，不用算左右边距。悬停效果用底部边框变色，比换文字颜色更稳——有些项目里文字颜色一变，对比度不够，看不清。我习惯给链接留一点垂直padding，手指点起来舒服。

响应式：汉堡菜单别用纯CSS硬扛

屏幕窄到600px以下，横排链接会挤成两行或者溢出。常见做法是隐藏<ul>，显示一个汉堡按钮。纯CSS用:checked配合label能实现，但状态管理很别扭——点开菜单后点链接，菜单不会自动关。我现在的做法是加一行JavaScript：

<button class="menu-toggle" aria-label="菜单">☰</button> <script> const toggle = document.querySelector('.menu-toggle'); const navUl = document.querySelector('.main-nav ul'); toggle.addEventListener('click', () => {  navUl.classList.toggle('open'); }); </script>

CSS里.main-nav ul.open { display: flex; flex-direction: column; }，默认窄屏下display: none。按钮加aria-label，读屏用户知道那是菜单开关。别用<div onclick>，语义和键盘支持都差。

当前页高亮：别只靠颜色

用户需要知道自己在哪个页面。给当前链接加aria-current="page"，再用CSS画个下划线或者加粗：

.main-nav a[aria-current="page"] {  color: #f39c12; font-weight: 600; }

只靠颜色区分对色弱用户不友好，加粗或者加下划线更保险。我见过一些导航栏，当前页和普通页颜色差一点点，自己都分不清。

移动端点击区域

手指点链接，最小44×44像素。导航链接如果只有文字高度，容易点错。给<a>加display: inline-block; padding: 0.75rem 1rem;，点击区域就够了。别把padding加在<li>上，那样链接本身还是小。

导航栏代码不复杂，但细节决定好不好用。语义标签、flex布局、响应式切换、无障碍属性，四样凑齐，基本不会翻车。