导航栏是网页中非常重要的组成部分，几乎所有网站都会用到，用HTML语句实现导航栏不需要复杂的逻辑，只需要掌握几个核心的标签和合理的结构就能完成。常见的导航栏实现方案大多基于列表标签和链接标签的组合，再配合一定的结构划分就能满足不同的展示需求。
高频使用的HTML语句说明
实现导航栏常用的HTML语句并不多，下面先介绍几个核心标签的作用：
<nav>：语义化标签，用来定义导航部分，告诉浏览器这部分内容是页面的导航区域，有利于SEO和无障碍访问。<ul>和<li>：无序列表标签，用来存放导航的多个选项，每个<li>对应一个导航项，结构清晰易维护。<a>：链接标签，用来定义每个导航项的跳转地址，是导航项的核心交互元素。<div>：容器标签，用来包裹导航的整体内容，方便后续添加样式或者额外的功能模块。
基础横向导航栏实现方法
最基础的导航栏是横向排列的多个导航项，核心是用<ul>包裹<li>，每个<li>内部放<a>标签，下面是完整示例：
<!-- 导航栏整体容器 -->
<nav class="basic-nav">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于我们</a></li>
<li><a href="/product">产品中心</a></li>
<li><a href="/news">新闻动态</a></li>
<li><a href="/contact">联系我们</a></li>
</ul>
</nav>
这个结构没有添加任何样式，默认是纵向排列的列表，后续可以通过CSS设置<ul>的display为flex，就能实现横向排列的效果，这是最通用的导航栏基础结构。
带下拉菜单的导航栏实现
如果某个导航项有子选项，就需要实现下拉菜单，核心是在对应的<li>内部再嵌套一个<ul>作为子列表，示例代码如下：
<nav class="dropdown-nav">
<ul>
<li><a href="/">首页</a></li>
<li class="has-dropdown">
<a href="/product">产品中心</a>
<!-- 下拉子菜单 -->
<ul class="dropdown-menu">
<li><a href="/product/phone">手机</a></li>
<li><a href="/product/computer">电脑</a></li>
<li><a href="/product/accessory">配件</a></li>
</ul>
</li>
<li><a href="/news">新闻动态</a></li>
<li><a href="/contact">联系我们</a></li>
</ul>
</nav>
这里通过在父级<li>中添加子<ul>实现下拉选项，默认可以隐藏子菜单，鼠标悬停时通过CSS显示即可，结构清晰且容易扩展更多子选项。
响应式移动端导航实现
移动端屏幕宽度有限，导航栏通常需要折叠成汉堡菜单，HTML结构需要在原有基础上添加一个触发按钮，示例代码如下：
<nav class="responsive-nav">
<!-- 移动端汉堡按钮 -->
<button class="nav-toggle">菜单</button>
<ul class="nav-list">
<li><a href="/">首页</a></li>
<li><a href="/about">关于我们</a></li>
<li><a href="/product">产品中心</a></li>
<li><a href="/news">新闻动态</a></li>
<li><a href="/contact">联系我们</a></li>
</ul>
</nav>
移动端下默认隐藏nav-list，点击按钮时通过JavaScript切换nav-list的显示状态即可，这个结构同时兼容PC端和移动端，只需要通过媒体查询调整不同屏幕下的样式就行。
导航栏实现的注意事项
- 尽量使用
<nav>语义化标签包裹导航内容，不要只用<div>包裹，提升页面的语义化程度。 - 导航项的链接地址要准确，内部链接使用相对路径，外部链接使用完整URL，示例中的ipipp.com是占位地址，实际开发替换为真实地址即可。
- 如果导航项有当前页标识，可以在对应的
<li>或者<a>标签上添加特定的class，比如active，方便样式区分。 - 下拉菜单的子列表不要嵌套过深，最多两层即可，避免用户操作不便。
HTML实现导航栏的核心是结构清晰，不需要在一开始就添加复杂的样式，先保证语义化结构正确，后续再配合CSS和少量JavaScript实现交互效果即可。