用CSS Grid实现响应式照片网格：以<figure>包裹<img>和<figcaption>，设grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))自适应列数，<img>用width:100%; height:auto;防拉伸，配合loading="lazy"、alt属性及相对路径确保可访问性、SEO与加载稳定性。

用纯 HTML + CSS 实现响应式照片网格，不依赖 JS

直接用 <figure> 和 <img> 搭配 CSS Grid 就能做出轻量、可访问、SEO 友好的相册页。关键不是“怎么加动画”，而是“怎么让图片不拉伸、不溢出、在手机上也能点开看清”。

• <figure> 包裹每张图，<figcaption> 放说明文字（搜索引擎能读取）
• CSS 用 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 实现自适应列数，比写死 flex-wrap 更稳
• 给 <img> 设 width: 100%; height: auto;，禁止设固定 height —— 否则小图会被强行拉高变形
• 所有图片路径用相对路径，比如 ./photos/vacation-01.jpg，避免上线后 404

点击放大图片？用原生 <dialog> 最省事

不用引入 lightbox 库，现代浏览器（Chrome 97+、Firefox 99+、Safari 15.4+）都支持 <dialog>。它天然模态、自带焦点管理、按 Esc 自动关闭。

• 每张缩略图加 onclick="showPhoto(this.src)"，对应 JS 只需三行：

  function showPhoto(src) {
    document.getElementById('big-img').src = src;
    document.getElementById('photo-dialog').showModal();
  }

• <dialog> 里用 <img> + max-width: 90vw; max-height: 90vh;，防止大图撑爆视口
• 务必加 role="dialog" 和 aria-labelledby 提升可访问性，否则屏幕阅读器可能无法识别
• Safari 对 <dialog> 的 backdrop 样式支持弱，需要额外加 dialog::backdrop { background: rgba(0,0,0,0.8); }

图片加载慢或失败？必须加 loading="lazy" 和 alt

相册页常有十几张图，不处理加载策略，首屏就卡顿。而且没有 alt 属性，不仅 SEO 差，图片挂了用户也完全不知道该是什么内容。

Article To Html

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

下载

• 所有 <img> 必须带 alt，哪怕只是 alt="黄山云海，2023年6月" —— 空字符串 alt="" 仅适用于纯装饰图
• 加 loading="lazy"，但首页首屏 2–3 张图建议去掉，避免 LCP（最大内容绘制）延迟
• 可以加 decoding="async" 让浏览器并行解码，对多图页面有 5%–10% 渲染提速
• 别用 base64 编码嵌入图片 —— 体积膨胀 33%，且无法被浏览器缓存

导出为静态页后图片全黑？检查路径和 MIME 类型

本地双击打开 index.html 是白屏或图片不显示，90% 是路径问题；部署到服务器后图片变黑/报错 ERR_BLOCKED_BY_RESPONSE，大概率是服务器没配对图片 MIME 类型。

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

• 本地测试务必用 python3 -m http.server 或 VS Code Live Server 插件启动服务，不要直接双击打开 file:// 协议
• 确认所有图片和 HTML 在同一级目录，或路径前缀一致：比如 HTML 在 /album/index.html，图片就不能放在 /photos/ 而没写对相对路径
• 部署时检查服务器返回头：JPEG 图必须是 Content-Type: image/jpeg，PNG 必须是 image/png —— Nginx 默认会配好，但某些静态托管（如 GitHub Pages 的自定义域名）可能漏掉
• Windows 用户注意文件名大小写：本地开发用 Vacation.jpg，但 Linux 服务器上 vacation.jpg 就是 404

实际做时最容易忽略的是图片尺寸与 DPR（设备像素比）的匹配 —— 比如只提供 800px 宽的图，在 iPhone 14 Pro 上会模糊。真要兼顾清晰和加载速度，得准备 srcset，但那是另一层复杂度了。