HTML+CSS可构建轻量离线图片库：用语义化布局、配alt与loading="lazy"，缩略图设固定宽+height:auto保比例，data-src存原图路径，配合原生实现点击放大，CSS Grid控制响应式网格，避免浮动与硬编码样式。
直接用 HTML + CSS 就能做出轻量、可离线运行的静态图片库，不需要任何框架或后端。关键不是“怎么放图”，而是“怎么让图不炸开、点击能看大图、结构别写死”。
用 <figure></figure> + <img alt="HTML怎么制作一个简单的相册_HTML静态图片库展示" > 组合保证语义和基础布局
别用一堆 <div> 套图，既难维护又不利于缩略图对齐。浏览器原生的 <code><figure></figure> 语义清晰，配合 display: inline-block 或 CSS Grid 能稳住缩略图流式排列。
- 每个图包一层
<figure></figure>，标题用<figcaption></figcaption>（比如文件名或简短说明） -
<img alt="HTML怎么制作一个简单的相册_HTML静态图片库展示" >必须加alt属性，否则无障碍访问失败，部分浏览器也会默认显示占位文字 - 缩略图统一设
width（如200px），高度用height: auto保比例，避免拉伸变形 - 别在
<img alt="HTML怎么制作一个简单的相册_HTML静态图片库展示" >上硬写style="max-width:90%"——父容器没宽限制时会撑破布局
点击缩略图弹出大图：用 data-src 存原图路径，配合 <dialog></dialog>
不用 JS 插件也能实现点击放大。现代浏览器已支持原生 <dialog></dialog> 元素，轻量且可键盘关闭（Esc）。
- 缩略图
<img alt="HTML怎么制作一个简单的相册_HTML静态图片库展示" >加自定义属性：，存高清图路径 -
<dialog></dialog>里只放一个<img alt="HTML怎么制作一个简单的相册_HTML静态图片库展示" >，初始src留空，JS 点击时赋值 - 必须加
role="dialog"和aria-labelledby提升可访问性 - 注意：Safari 15.4+ 才完全支持
<dialog></dialog>，旧版可用display: none+visibility: hidden模拟
响应式缩略图网格：用 display: grid 而非浮动或 Flex
Flex 容易导致行高不一致（尤其带 <figcaption></figcaption> 时），Grid 控制列数更直观，且天然支持 gap 间距。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 给缩略图容器设
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) -
gap: 1rem控制间距，比margin更干净（无首尾外边距问题） - 手机屏下自动变成单列，无需额外媒体查询；若需强制双列，加
@media (max-width: 600px) { grid-template-columns: repeat(2, 1fr); } - 避免用
float—— 清除浮动麻烦，且与现代布局逻辑冲突
图片路径和加载优化：别把原图直接塞进缩略图 src
这是最常被忽略的性能坑：一张 4MB 的 JPG 直接当缩略图加载，首屏卡顿、流量浪费、移动端崩溃。
- 缩略图必须是独立小图（建议 ≤ 30KB，尺寸 ≤ 400px 宽），用工具批量生成（如 ImageMagick：
convert -resize 300x input.jpg thumb.jpg） - 原图路径存在
data-src，只在点击时才加载，减少初始请求 - 加
loading="lazy"到缩略图<img alt="HTML怎么制作一个简单的相册_HTML静态图片库展示" >，让浏览器按需加载非首屏图 - 如果图多于 20 张，考虑分页或懒加载（IntersectionObserver 监听滚动），否则 DOM 过重
真正麻烦的不是写几行 HTML，而是图源管理——缩略图和原图路径是否一一对应、命名是否含中文或空格、相对路径层级是否写错。建议所有图片放 /assets/photos/ 下，缩略图统一 thumb_*.jpg，原图 full_*.jpg，用脚本校验配对关系比肉眼靠谱。
