用语义化HTML+CSS Grid可构建可维护、可访问、不卡顿的作品集：通过section与id实现无JS锚点导航，配合:target伪类、响应式Grid布局（minmax+clamp）、语义化卡片结构（figure/figcaption）及本地服务解决图片加载问题。
直接用语义化 HTML + CSS Grid 就能做出可维护、可访问、不卡顿的作品集页面，不需要框架、不用 JS 切换、也不靠 float 或 table 堆砌。
怎么用 section 和 id 实现无 JS 标签导航
标签页不是“切换面板”，而是带锚点的语义区块。顶部导航写成 <a href="#design">设计作品</a>，对应内容区块就用 <section id="design" tabindex="-1" aria-labelledby="nav-design"> 包住整组项目。
- ID 必须和
href值完全一致（大小写、连字符都不能错） - 加
tabindex="-1"是为了让键盘用户 Tab 进来后能聚焦到该区块，否则按 Tab 会跳过 -
aria-labelledby指向导航文字的 ID（比如导航链接加id="nav-design"），读屏器才能把标题和内容关联起来 - 用
:target伪类加样式，例如section:target { outline: 2px solid #007bff; }，比 JS 滚动监听更轻量
为什么 grid-template-columns: repeat(3, 1fr) 在手机上会崩
因为 1fr 不设下限，小屏强行分三列，卡片被压到 120px 宽，文字换行错乱、图片拉伸、按钮挤成一条线。
- 正确写法是
grid-template-columns: minmax(300px, 1fr)，保证每张卡片至少 300px 宽 - 默认移动端优先：不写 media query 时先设
display: grid; grid-template-columns: 1fr;，单列竖排 - 在
@media (min-width: 768px)加两栏，在@media (min-width: 1024px)加三栏，别只改列数，同步调gap -
gap推荐用clamp(1rem, 4vw, 1.5rem)，小屏缩窄、大屏舒展，避免固定值在不同设备上失衡
项目卡片 HTML 结构怎么写才不套娃又语义正确
别用三层 <div> 套一个 <h3>，也别把图和标题拆开写——浏览器和读屏器靠结构理解内容。
立即学习“前端免费学习笔记（深入）”；
- 每个项目用一个
<section class="project">包住，不是<div>，利于 SEO 和无障碍识别 - 图必须用
<figure>包裹，标题说明用<figcaption>，不能写成<h3>+ 外部<p> -
<img>的alt描述画面本身（如“深蓝背景上悬浮的 3D 文字‘NeonGrid’”），不是作品名；<figcaption>写作品名+简短说明（如“NeonGrid｜2024 动效实验，Figma + Lottie”） - 所有图片加
loading="lazy"，否则首屏加载慢，尤其作品多时
本地双击打开 HTML 文件图片全白？
这是 file:// 协议限制，现代浏览器默认拦截本地跨源请求（哪怕只是同目录下的 ./img/project1.jpg）。
- 错误做法：改成绝对路径
C:/users/xxx/portfolio/img/project1.jpg—— 换台电脑或重装系统就挂 - 开发阶段必须起本地服务：命令行运行
npx serve或python3 -m http.server 8000 - 如果用 VS Code，装 Live Server 插件点「Go Live」也行，本质一样，都是走 http://localhost
- 别信“改 Chrome 启动参数绕过”的方案，它在新版里已失效，且不解决真实部署时的路径问题
真正难的不是写多少 CSS，而是让每张卡片有独立语义、每次跳转能精准定位、每张图在任意设备上都懒加载且不破框——这些细节漏掉一个，作品集就从“展示能力”变成“暴露盲区”。
