应使用语义化的 和 组织照片，避免 堆砌；配合 css grid 布局、loading="lazy" 懒加载、max-width: 100% 响应式控制及合理图片压缩，确保可访问性、性能与视觉一致性。
用 <figure></figure> 和 <figcaption></figcaption> 组织每张照片，别用 <div> 堆砌
<p>很多人一上来就写一堆 <code><div class="photo">，结果语义混乱、缩略图对齐错乱、屏幕阅读器读不出内容。HTML5 的 <code><figure></figure> 天然适合独立媒体单元——它自带默认外边距、支持内嵌标题、能被 CSS 一键居中。
实际写法要克制：一张图一个 <figure></figure>，<img> 放里面，说明文字用 <figcaption></figcaption>，不要塞 <p></p> 或 <span></span>：
<figure> @@##@@ <figcaption>2024.06｜三亚亚龙湾</figcaption></figure>
-
alt属性必须写，且要描述画面本身，不是“图片1”“照片”这类无效文本 -
<figcaption></figcaption>必须紧跟在<img src="beach.jpg" alt="日落时的海滩，浪花泛着金边">后面，否则部分浏览器不识别为该图的标题 - 别给
<figure></figure>设固定宽高，让它随图片自然撑开，后续用 CSS 控制尺寸更可控
用 display: grid 实现响应式相册布局，避开 float 和 inline-block 的坑
老方法靠 float: left 或 display: inline-block 排图，容易出现最后一行塌陷、间隙难消除、移动端断行错位等问题。CSS Grid 是目前最稳的方案，尤其适合等宽/等高网格。
关键不是写满属性，而是抓住两个控制点：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.2rem;
}
-
minmax(280px, 1fr)表示：最小 280px，最大均分剩余空间——小屏下自动缩为单列，大屏下最多 3–4 列，不会溢出 -
gap替代margin控制间距，避免外边距合并、父容器需额外清除浮动等问题 - 别设
grid-auto-rows，让每张图按自身高度自由伸展，否则会强行裁剪或拉伸图片
图片加载慢？优先用 loading="lazy" + 合理尺寸，别急着上 JavaScript 库
相册页常因几十张高清图卡住首屏，但多数人第一反应是引入 lozad.js 或写 IntersectionObserver —— 其实原生 loading="lazy" 已覆盖所有现代浏览器（Chrome 76+、Firefox 75+、Safari 15.4+），且零 JS 依赖。
- 只在
<img>上加loading="lazy"，<picture></picture>或背景图不生效 - 务必配合
width和height属性（不是 CSS）预留位置，防止懒加载触发时页面跳动 - 上传前用工具（如 Squoosh、ImageOptim）把原图压缩到 1200px 宽以内，WebP 格式比 JPG 小 30% 以上
示例：
@@##@@
移动端点击放大看不清？用 viewport 和 max-width 防止横向滚动
常见错误是给 <img> 设 width: 100% 却忘了父容器没限制宽度，导致图片撑破视口，用户必须左右拖拽才能看全——这不是交互设计，是 bug。
- 在
里确保有：<meta name="viewport" content="width=device-width, initial-scale=1"> - 所有相册图片统一加 CSS：
img { max-width: 100%; height: auto; }，强制不超容器，同时保持比例 - 禁用
user-scalable=no，否则视力障碍用户无法放大局部细节
真正需要“点击放大”的场景，建议留到后期用轻量库（如 Lightbox2），初始 HTML 页面先保证可读、可操作、不崩 layout —— 这才是相册页的底线。
