列表布局图片画廊是语义清晰的入门方案，但需重置默认样式、用Flex/Grid控制排列，并推荐升级为<figure>增强可访问性，同时补充懒加载、响应式图片等性能优化。
用列表标签（<ul> 和 <li>）配合 <img> 布局图片画廊，是一种语义清晰、结构简洁的入门方案，适合轻量级展示。但它不是“最优解”，而是“可用解”——关键在于补足语义缺失和响应式短板。
为什么可以用列表，但不推荐直接套用
列表天然表达“一组并列项”，符合画廊中多张图片的逻辑关系。但 <ul> 本身不带视觉样式，需 CSS 全面接管布局；且原生列表项含默认缩进、项目符号和垂直间距，不清理会干扰画廊整齐度。
- 必须重置
list-style: none和margin/padding，否则每张图前有圆点、上下留白异常 -
<li>是流式容器，不能直接约束图片宽高比，容易因图片尺寸不一导致网格错位 - 缺少对图片说明文字的语义绑定（
<figcaption>只能属于<figure>），纯列表+<p>标题无法被屏幕阅读器识别为图注
基础写法：列表骨架 + 图片内联
结构上，每个 <li> 包一张 <img>，可加 <span> 或 <p> 作标题。HTML 简洁，但依赖 CSS 补全功能：
<ul class="gallery"> <li><img src="1.jpg" alt="山景"><span>晨光山径</span></li> <li><img src="2.jpg" alt="海景"><span>落日海湾</span></li> <li><img src="3.jpg" alt="城市"><span>夜幕街角</span></li> </ul>
CSS 需强制清除默认样式，并启用 flex 或 grid 控制排列：
立即学习“前端免费学习笔记（深入）”；
- 设
.gallery { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0; list-style: none; } - 设
.gallery li { flex: 1 1 280px; }实现弹性列宽（小屏单列，大屏多列） - 设
.gallery img { width: 100%; height: auto; display: block; }防拉伸和基线间隙
更稳妥的做法：列表语义升级为 figure
若想兼顾可访问性与响应式能力，建议把每个 <li> 替换为 <figure>，这是 W3C 推荐的语义化路径：
<ul class="gallery"> <li><figure><img src="1.jpg" alt="山景"><figcaption>晨光山径</figcaption></figure></li> <li><figure><img src="2.jpg" alt="海景"><figcaption>落日海湾</figcaption></figure></li> </ul>
此时 <figure> 成为真正的内容单元，<figcaption> 能被辅助技术正确关联图片。CSS 仍可沿用 flex 或改用 grid：
- 保持
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } - 为
<figure>设margin: 0;，避免嵌套外边距干扰 - 为
<img>设width: 100%; height: auto;，并为<figure>添加aspect-ratio: 4/3;（现代浏览器）防高度跳动
别忽略的细节：性能与体验补丁
仅靠列表+图片标签无法自动优化加载或交互。需手动增强：
- 给每张
<img>加loading="lazy"，滚动到视口再加载 - 用
srcset和sizes提供多分辨率资源，例如：<img src="1-small.jpg" srcset="1-small.jpg 480w, 1-medium.jpg 768w, 1-large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"> - 标题文字过长时，加
overflow-wrap: break-word;防撑破容器 - 悬停放大效果用
transform: scale(1.05);而非改 width/height，避免重排卡顿
