纯html只能做静态毕业纪念册；需用img+figure+figcaption布局照片，css grid控制响应式列数，相对路径引用图片，避免绝对路径和中文文件名。
纯 HTML 做不了真正意义上的“毕业纪念册”——它没有数据存储、用户交互或图片上传能力，只能做一个静态展示页。如果你需要的是可运行、能放照片、带文字说明、在浏览器里打开就能看的相册页面，那用 HTML + CSS 就完全够用；但别指望它能自动读取你手机相册、保存留言或生成 PDF。
怎么用 img 标签按顺序排满一页照片
核心是控制图片尺寸和布局，避免撑破容器或错位。常见错误是直接丢一堆 <img> 进去，结果每张图大小不一、上下错行、移动端全挤成一团。
- 统一给
img设width: 100%; height: auto;，确保等宽且不失真 - 用
<figure></figure>+<figcaption></figcaption>包裹每张图和说明文字，语义清晰也方便后续加样式 - 外层用
<div class="gallery">，配合 CSS <code>display: grid;控制列数（比如grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))），比浮动或 inline-block 更稳 - 别用
height: 200px;强制截断图片——会变形，改用object-fit: cover;配合固定容器高 -
alt只用于无障碍和图片加载失败时的替代文本，长度建议 ≤ 125 字符，别塞整段感言 - 真实说明必须放在
<figcaption></figcaption>或独立<p class="caption"></p>里，和图片同级嵌套 - 如果想做“图片上叠文字”，得用定位：
position: relative;包住img和文字层，文字层设position: absolute;+bottom: 0;，再加background: rgba(0,0,0,0.6); color: white;提高可读性 - 所有图片必须和 HTML 文件在同一个文件夹，或子文件夹里；路径写相对路径，例如
<img src="photos/20240601.jpg"> - Windows 下路径分隔符用
/（不是\），src="photos\20240601.jpg"在部分浏览器会失效 - 文件名避免空格和中文，换成
graduation_01.jpg，否则 URL 编码后可能出错 - 用浏览器开发者工具（F12）看 Console 是否报
404，Network 里看图片请求是否变成blob:或被拦截
怎么让文字说明不压图、不跑偏
很多人把文字写在 img 标签里当 alt，结果鼠标悬停才看到，还不能换行。这不是说明，是障眼法。
为什么本地双击 index.html 打不开图片
不是代码写错了，是路径问题。最常踩的坑：把图片存在微信下载目录，然后在 HTML 里写 <img src="C:%5CUsers%5CXXX%5CDownloads%5Cphoto1.jpg"> —— 浏览器出于安全限制，直接拒绝加载本地绝对路径。
真正麻烦的不是写几行 img，而是批量处理几十张照片的尺寸、命名、压缩——HTML 本身干不了这事，得靠外部工具先搞定。页面做得再漂亮，一张图路径错，整页就留白。
