纯语义化HTML即可构建可用导航：仅用<nav>包裹真实href的<a>，避免冗余<ul>、空链接和无意义class；移动端用checkbox+label+media query实现折叠；aria-current="page"动态标注当前页。
导航结构只用 <nav> 和 <a> 就够了
不需要框架、不引入 CSS 类名、不写 JavaScript，纯语义化 HTML 就能撑起一个可用的个人作品集导航。关键在于把链接组织成清晰的线性路径，且每个 <a> 都指向真实存在的页面或锚点。
常见错误是过早套用 CSS Grid 或 Flex 布局，结果样式一改就错位；或者给 <nav> 加一堆无意义的 id 或 class，反而干扰后期维护。
-
<nav>必须包裹全部导航项，这是屏幕阅读器识别导航区域的唯一依据 - 每个
<a>的href值要真实可访问：比如href="index.html"、href="projects.html"、href="#about" - 避免空链接（
href="#"）——它会触发页面跳顶，对键盘用户不友好
用 <ul> 包裹链接反而增加冗余
极简不是靠删标签，而是删掉没语义、没作用的标签。很多教程教用 <ul><li><a> 结构，但 <nav> 本身已是导航容器，<ul> 在这里不提供额外语义，还多一层嵌套。
更直接的做法是让 <a> 直接作为 <nav> 的子元素，用空格或换行分隔，浏览器默认渲染为块级流式布局，视觉上自然垂直排列。
立即学习“前端免费学习笔记（深入）”；
<nav> <a href="index.html">首页</a> <a href="projects.html">作品</a> <a href="about.html">关于</a> <a href="contact.html">联系</a> </nav>
移动端折叠导航不用 JS，靠 media 查询和 :checked 模拟
如果真想在小屏收起导航，又不想写 JS，可以用原生 HTML + CSS 实现开关效果，核心是 <input type="checkbox"> + label + :checked 伪类。
这个方案兼容所有现代浏览器，且无需监听点击事件或操作 DOM，结构干净，失败时自动退化为始终展开状态（不影响功能）。
-
<input id="nav-toggle">放在<nav>外部，用for关联label -
<label for="nav-toggle">作为“菜单按钮”，文字写 “☰” 或 “菜单” - 用
@media (max-width: 768px)把<nav>设为display: none，再用#nav-toggle:checked ~ nav触发展开
aria-current="page" 是唯一需要加的 ARIA 属性
告诉辅助技术“当前在哪一页”，比用 CSS 类名高亮更可靠。它不改变样式，只增强可访问性，而且只需加在当前页对应的 <a> 上。
比如你在 projects.html 页面，就把那个链接写成：<a href="projects.html" aria-current="page">作品</a>。其他页面同理动态替换。
别加 role="navigation" ——<nav> 已自带该 role；也别乱加 tabindex，原生 <a> 默认可聚焦。
最易被忽略的是：这个属性必须随页面实际路径动态更新，硬编码在 HTML 里会失效。如果全站静态页，就得每页手动改一次；如果用构建工具，可以抽成模板变量。
