用 <section id> 和 <a href="#id"> 可实现无 JS 锚点导航，需确保 ID 严格一致、添加 tabindex="-1"、aria-labelledby 和 :target 样式，并用 scroll-margin-top 解决吸顶遮挡；作品用 <figure>+<figcaption> 保证语义，小屏改 <select> 并管理焦点。
用 <section> 和 id 实现可跳转的标签导航
标签页本质不是“切换面板”，而是带锚点的语义化区块。直接用 <section id="design"> 配合 <a href="#design"> 就能实现原生跳转，不需要 JS 也能工作。关键在结构清晰：<nav> 放顶部导航，每个 <a> 的 href 必须和对应 <section> 的 id 完全一致（大小写、连字符都不能错）。
常见错误是：导航链接写成 #Design，但区块 ID 是 design，导致点击没反应；或者把 id 写在 <div> 里却忘了加 tabindex="-1"，键盘用户按 Tab 键无法聚焦到该区块。
- 导航项建议用
<nav aria-label="作品分类">提升可访问性 - 每个
<section>加aria-labelledby指向对应导航文字（如aria-labelledby="nav-design"） - 用 CSS 的
:target伪类给当前激活区块加轻微高亮（比如顶部加 2px 实色边框）
用 CSS scroll-margin-top 解决标题被吸顶栏遮挡
当页面有固定头部（position: sticky 或 fixed），点击标签跳转后，目标 <section> 的标题常被盖住。这不是 JS 问题，是滚动定位默认以元素顶部为基准。解决方案是给所有 <section> 统一加 scroll-margin-top: 64px（数值等于头部高度）。
注意：这个属性在 Safari 15.4+ 和 Chrome 92+ 才稳定支持，老版本需降级处理——用 JS 监听 hashchange，手动滚动并减去偏移量。但绝大多数现代项目直接写 CSS 就够用。
立即学习“前端免费学习笔记（深入）”；
- 别用
margin-top或padding-top代替，它们会破坏布局流 - 如果头部高度不固定（比如响应式折叠），改用
scroll-margin-top: clamp(48px, 8vh, 80px) - 测试时用键盘
Tab → Enter触发跳转，比鼠标点击更能暴露定位偏差
作品卡片用 <figure> + <figcaption> 保证语义正确
每个作品不能只用 <div> 堆图和文字。浏览器和读屏器靠 HTML 语义理解内容结构。<figure> 明确表示这是一个独立的内容单元（哪怕含多张图或视频），<figcaption> 则是它的标题说明，天然和图片/媒体绑定。
错误做法是把标题写成 <h3> 放在图外面，这样在无障碍树里它就和图片失去关联；或者用 <img alt=""> 却在 <figcaption> 里重复写标题，造成冗余。
-
<img>的alt应描述画面本身（如“蓝色渐变背景上的三维文字‘PixelFlow’”），不是作品名 -
<figcaption>写作品名 + 简短说明（如“PixelFlow｜2023 品牌动效实验，Blender + After Effects”） - 若作品含多个媒体（图+视频），把它们都包进同一个
<figure>，只用一个<figcaption>
响应式标签导航在小屏下收起为下拉菜单
手机上横向排列的标签会挤成一团甚至换行。不要强行 flex-wrap，而是用媒体查询把导航改为 <select> 下拉框，选项值对应各 id，选中后跳转。关键是保持语义连续性：下拉菜单的 <option value="design"> 和桌面端的 <a href="#design"> 指向同一目标。
容易忽略的是焦点管理——下拉框切换后，页面滚动到目标区块，但焦点仍留在 <select> 上，用户继续按 Tab 会跳过刚显示的内容。必须用 element.focus() 主动把焦点移到目标 <section>。
- 用
<select onchange="location.hash = '#'+this.value">最简实现，无需额外 JS - 为避免 iOS Safari 下拉框点击无响应，给
<select>加role="combobox"和aria-controls - 下拉菜单文案建议写“查看作品类别”，而不是“选择标签”，更符合用户心智模型
标签系统真正的复杂点不在视觉切换，而在于如何让每个作品区块在 URL 中有唯一、可分享、可书签的锚点，同时兼顾键盘操作、屏幕阅读器播报和 SEO 可索引性。很多开发者花大力气做 JS 切换动画，却漏掉 aria-current="page" 这样一行属性，结果对残障用户来说，根本不知道当前在哪类作品里。
