用语义化html+基础css即可构建可访问、响应式作品集：每个作品用figure包裹，img设width/height和loading="lazy"，figcaption写标题与上下文；网格用minmax()和clamp()实现断点适配；锚点跳转需id一致、tabindex="-1"及scroll-margin-top避遮挡。
直接用语义化 HTML + 基础 CSS 就能做出可访问、能上线、手机能看的作品集，不需要框架、不依赖 JS，index.html 单文件就能跑通。
怎么组织作品卡片结构？用 figure 而不是 div
很多新手用一堆 div 套娃写卡片，结果 SEO 差、读屏器读不出图和标题关系、后期改起来像拆毛线团。正确做法是每个作品一个 figure，图片和说明天然绑定：
-
figure表示独立内容单元（一张图、一组图、一段视频），语义清晰 -
img的alt必须描述画面本身，比如alt="晨雾中三棵孤立的松树，剪影轮廓清晰"，不是“作品1”或空字符串 -
figcaption写作品名+简短上下文，比如<figcaption>《雾松》｜2025 长白山冬季纪实</figcaption> - 别把
h3放在figure外面——那样它和图片就失去语义关联了
怎么让图片不拉伸、不溢出、加载快？img 三要素必须齐
摄影作品对画质敏感，但网页又得兼顾性能和适配。只设 width 和 height 不够，容易布局抖动；只靠 CSS 控制尺寸又可能模糊或压缩。
- 显式写
width和height属性（如<img src="p1.jpg" style="max-width:90%" style="max-width:90%" ...>），浏览器能提前预留空间，避免 CLS（累积布局偏移） - CSS 中统一加
max-width: 100%; height: auto;，确保小容器里不溢出、比例不变形 - 务必加
loading="lazy"，否则首屏外图片也抢带宽，滚动卡顿 - 路径用相对路径，比如
./assets/photos/01.jpg，别用file:///或绝对本地路径（C:\...），否则换电脑或部署就挂
怎么实现响应式网格？别硬写 repeat(3, 1fr)
直接写 grid-template-columns: repeat(3, 1fr) 是新手最常踩的坑：小屏上卡片被压成窄条，文字换行错乱，间隙崩塌，看着像没写 CSS。
- 默认用单列：
grid-template-columns: 1fr; - 在
@media (min-width: 768px)里升到两列，@media (min-width: 1024px)再升三列，断点明确 - 列宽用
minmax(300px, 1fr)，保证每张卡至少 300px 宽，不会被挤扁 - 间隙用
gap: clamp(1rem, 4vw, 1.5rem)，小屏紧凑、大屏舒展，比固定1rem更稳 - 别给
figure设width，让它由 Grid 轨道控制，否则会破坏自适应逻辑
怎么跳转到某个作品或分类？用原生锚点，别碰 JS
想点导航栏的“人像”直接滚到人像作品区？完全不用 JS。但 ID 大小写、聚焦、吸顶遮挡这三处一错就失效。
- 导航链接写
@#@#@#@#@#@#@#@#@#@0，对应区块写<section id="portrait">...</section>，ID 必须完全一致（包括大小写、连字符） - 给
section加tabindex="-1"，键盘用户 Tab 到这里能聚焦，无障碍才真正可用 - 如果页面有吸顶导航栏（
position: sticky），跳转后标题常被盖住——给所有section加scroll-margin-top: 64px（数值等于头部高度） - 测试时别只用鼠标点，按
Tab → Enter触发跳转，更容易暴露定位偏差
最易被忽略的是：所有图片没加 loading="lazy"，首页加载慢；所有链接没测过 file:// 下是否失效；所有 alt 文本写成“image1”或留空——这些细节不修，作品再好，第一印象也垮了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
