相册应使用语义化 <figure>+<figcaption> 而非 <div>，配合 display: grid 实现响应式布局，设置有效 alt 属性保障可访问性，并用原生 <dialog> 实现点击放大。
相册集用 <figure> + <figcaption> 而不是 <div> 套图
语义错误会导致图片无法被屏幕阅读器识别，SEO 也弱。浏览器对 <figure> 的默认样式（如自动居中、上下边距）更适配相册场景，改起来也轻量。
常见错误是把整页相册塞进一个大 <div class="album">，结果每张图的标题变成 <p class="caption"> —— 这样既没语义，又得手动写 CSS 模拟 <figcaption> 的行为。
- 每张图独立用一组
<figure><img><figcaption></figure> -
<figcaption>必须是<figure>的直接子元素，且只能有一个 - 如果图需要链接，把
<a>包在<figure>外面，不要包在<img>里（否则破坏语义）
网格布局用 display: grid 而不是浮动或 inline-block
响应式相册最怕断行错位、间隙不均、缩略图高度不一致。浮动方案要清浮动、算 margin；inline-block 受空格影响、垂直对齐难调。grid 一行解决。
示例：4 列等宽网格，小屏降为 2 列，最小宽度 280px：
立即学习“前端免费学习笔记（深入）”；
section.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
-
minmax(280px, 1fr)是关键：保证每项至少 280px，多余空间均分 -
gap控制间距，比用 margin 更可靠（不会因换行产生额外空白） - 避免用
grid-template-columns: 1fr 1fr 1fr 1fr—— 小屏下会横向滚动
图片加载失败时 fallback 文字必须可读且可见
很多相册用 <img src="..." alt=""> 或干脆不写 alt，结果图片 404 时只留一个破碎图标，用户完全不知道这张图该是什么内容。
-
alt值不能为空（除非是纯装饰图），应描述图中主体，例如alt="黄山云海日出，摄于2023年5月" - 加一层 CSS fallback：给
<img>设置font-family: system-ui;和object-fit: cover;，防止文字被拉伸 - 若需更明显提示，可用伪元素：
img::after { content: attr(alt); display: block; font-size: 0.8em; color: #666; }，但仅限调试，正式环境慎用（影响可访问性）
移动端点击放大用原生 <dialog> 而非 JS 插件
很多方案依赖 jQuery Lightbox 类库，体积大、兼容性差、手势支持弱。现代浏览器已原生支持 <dialog>，配合 HTMLDialogElement.showModal() 即可实现无依赖放大。
- 每个
<figure>内放一个隐藏<dialog>，里面放原图<img>（尺寸设为max-width: 90vw; max-height: 90vh;） - 点击缩略图时执行：
document.querySelector('#full-img-1').showModal() - 注意：Safari 15.4+ 才支持
<dialog>，旧版需降级为position: fixed+ 手动控制display
真正麻烦的是图片元数据（拍摄时间、GPS）、懒加载与预加载策略、键盘焦点管理——这些不在 HTML 层能一并搞定，得靠后续 JS 补足。
