用语义化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" width="800" height="600" ...>），浏览器能提前预留空间，避免 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。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

• 默认用单列：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 大小写、聚焦、吸顶遮挡这三处一错就失效。

• 导航链接写 <a href="#portrait">人像</a>，对应区块写 <section id="portrait">...</section>，ID 必须完全一致（包括大小写、连字符）
• 给 section 加 tabindex="-1"，键盘用户 Tab 到这里能聚焦，无障碍才真正可用
• 如果页面有吸顶导航栏（position: sticky），跳转后标题常被盖住——给所有 section 加 scroll-margin-top: 64px（数值等于头部高度）
• 测试时别只用鼠标点，按 Tab → Enter 触发跳转，更容易暴露定位偏差

最易被忽略的是：所有图片没加 loading="lazy"，首页加载慢；所有链接没测过 file:// 下是否失效；所有 alt 文本写成“image1”或留空——这些细节不修，作品再好，第一印象也垮了。