使用nav标签创建语义化导航菜单，结合ul列表与CSS flex布局实现水平排列，通过媒体查询适配移动端，提升可读性、SEO及用户体验。
创建HTML导航菜单并不复杂，关键是结构清晰、语义正确。HTML5引入了 nav 标签，专门用于定义页面的导航区域，提升代码可读性和SEO效果。
使用NAV标签定义导航区域
nav 是HTML5新增的语义化标签，表示页面中主导航链接的容器。它不是装饰性的，而是告诉浏览器和搜索引擎“这里是主要导航”。
常见用法：- 网站主导航栏
- 侧边栏目录链接
- 页脚中的重要跳转链接组
示例代码：
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于我们</a></li>
<li><a href="/services">服务项目</a></li>
<li><a href="/contact">联系我们</a></li>
</ul>
</nav>
基础样式美化导航菜单
默认情况下，ul列表是垂直排列的，实际使用中通常需要水平布局。通过CSS可以轻松实现样式控制。
立即学习“前端免费学习笔记（深入）”；
常用CSS技巧：
- 移除列表默认样式：
list-style: none; - 设置浮动或flex让菜单横向排列
- 添加内边距和悬停效果提升交互体验
示例样式：
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
text-decoration: none;
color: #333;
padding: 5px 10px;
}
nav a:hover {
background-color: #f0f0f0;
border-radius: 4px;
}
响应式导航的简单实现思路
在移动设备上，水平菜单可能无法完整显示。可以通过媒体查询调整布局。
基本响应策略：- 小屏幕时改为垂直堆叠
- 使用媒体查询控制显示方式
- 结合JavaScript实现汉堡菜单（进阶）
移动端适配CSS片段：
@media (max-width: 768px) {
nav ul {
flex-direction: column;
}
nav li {
margin-right: 0;
margin-bottom: 10px;
}
}
基本上就这些。合理使用 nav 标签不仅能提升网页结构语义化程度，还便于后期维护和样式控制。配合简洁的CSS，就能实现一个现代、可用、响应式的导航菜单。 
