语义化导航需用<nav>包裹链接，单层用平铺<a>，多层用<ul><li>；推荐flex布局配合gap控制间距；高亮需JS或服务端动态添加active类；响应式要考虑无障碍与交互方式。
用 <nav> 包裹，别直接写一堆 <a>
语义化是第一步。浏览器和读屏工具靠 <nav> 知道这是导航区域，SEO 也更友好。光写 <div><a href="...">首页</a><a href="...">关于</a></div> 虽能显示，但等于放弃结构优势。
正确写法：
<nav> <a href="/">首页</a> <a href="/about">关于</a> <a href="/projects">项目</a> <a href="/contact">联系</a> </nav>
- 如果导航项有层级（比如“作品”下拉出“Web”“App”），用
<ul><li>是标准做法，但注意：这里只允许用<ul>、<li>、<a>—— 你给的 HTML 限制里没开这些标签，所以纯静态单层导航优先用<nav>+ 平铺<a> - 别在
<nav>里塞<button>或表单控件，除非是搜索框且明确需要交互 - 移动端折叠菜单（hamburger）需要 JS 控制 class 切换，但基础结构仍从
<nav>开始
display: flex 是最稳的横向排列方案
老式浮动（float: left）或行内块（display: inline-block）容易因空格/换行产生间隙，响应式也难调。Flex 布局现在所有现代浏览器都支持，且一行代码就能对齐、等宽、居中。
基础样式示例：
立即学习“前端免费学习笔记（深入）”；
nav {
display: flex;
gap: 1.5rem; /* 推荐用 gap，比 margin 干净 */
align-items: center;
}
nav a {
text-decoration: none;
color: #333;
font-weight: 500;
}-
gap在 Flex 和 Grid 中可用，IE 不支持；如需兼容 IE，改用margin-right并给最后一个<a>设margin-right: 0 - 别设
white-space: nowrap在整个<nav>上，否则小屏会横向溢出 - 如果想让导航在页面中水平居中，对
<nav>用justify-content: center，而不是给父容器设text-align: center
当前页高亮必须靠后端或 JS 动态加 class
HTML 本身没法自动判断“我现在在哪一页”，所以 class="active" 这类标识不能硬编码在所有页面里写死。要么服务端渲染时注入，要么前端用 JS 匹配 window.location.pathname。
简单 JS 判断逻辑（放在页面底部或 <script> 中）：
document.querySelectorAll('nav a').forEach(link => {
if (link.href === window.location.origin + window.location.pathname) {
link.classList.add('active');
}
});- 注意：本地文件（
file://协议）下window.location.origin是空字符串，需额外判断 - 路径匹配要小心尾部斜杠（
/aboutvs/about/），建议统一处理 - 如果用的是哈希路由（
#/projects），就该用window.location.hash而不是pathname - CSS 高亮只需写
nav a.active { color: #007bff; font-weight: 700; }，别漏了伪类状态（如a.active:hover）
响应式断点别只切宽度，还要看交互方式
导航栏在手机上不是“变小就行”，而是常要收进汉堡菜单。但是否真需要 JS 控制展开？取决于内容量和用户预期。
- 如果只有 4–5 个文字链接，用媒体查询缩字体 + 减
gap，不折叠更直接（避免多一次点击） - 一旦引入折叠，必须确保：① 触发按钮有
aria-expanded；② 展开后焦点能进入菜单；③ ESC 键可关闭 —— 否则无障碍不达标 - 不要用
max-width: 768px当万能断点，iPad 横屏是 1024px，但手指操作体验接近手机，可考虑用hover: none或pointer: coarse媒体特性辅助判断 - 折叠后菜单默认
display: none，JS 切成block或flex即可，无需动画 —— 过度动效反而拖慢首屏感知
真正麻烦的从来不是怎么写出导航栏，而是它在不同设备、不同焦点状态、不同网络条件下是否依然可访问、可预测、不闪跳。样式可以抄，逻辑得自己理清楚。
