应使用与为每张图构建独立语义单元，整组画廊用包裹，配合css grid响应式布局及aspect-ratio保比例，禁用固定宽高属性。
用 <figure></figure> 和 <figcaption></figcaption> 组织语义化画廊项
HTML 本身不提供“画廊”专用标签，但 <figure></figure> + <figcaption></figcaption> 是最贴切的语义组合：它明确表示“一张图及其说明”为一个独立内容单元，对 SEO 和屏幕阅读器友好。别用一堆无意义的 <div> 包图片——那样只是视觉分组，没有语义。
<p>常见错误是把所有图片塞进一个 <code><figure></figure> 里，或漏掉 <figcaption></figcaption>（哪怕留空也要写上，避免结构断裂）。
-
<figure></figure>必须包含至少一个<img>，可选<figcaption></figcaption>，且<figcaption></figcaption>只能出现一次，且必须是<figure></figure>的首个或末尾子元素 - 每张图都应有独立的
<figure></figure>，不要多个<img>共享一个<figure></figure> -
alt属性不可省略；<figcaption></figcaption>不替代alt，而是补充上下文（如拍摄时间、地点、用途）
用 <section></section> 或 <article></article> 包裹整组画廊
单张图靠 <figure></figure>，整组图需要更高一级的语义容器。<section></section> 最常用——它表示页面中一个主题明确的区块，比如“我的旅行照片”“产品截图合集”。只有当这组图构成一个完整、可独立分发的内容单元（如一篇图文报道），才考虑用 <article></article>。
别用 <div class="gallery"> 顶替语义标签。CSS 样式可以后加，但语义一旦缺失，就无法被辅助技术识别。
<ul>
<li>给容器加 <code>role="region" 和 aria-label（如 aria-label="项目界面截图画廊"）能进一步提升可访问性
aria-live="polite"，让屏幕阅读器感知新增内容避免在 <img> 上硬设 width/height 像素值
写 <img src="a.jpg" style="max-width:90%" style="max-width:90%"> 看似简单，实则埋下响应式隐患：固定尺寸会强制拉伸或裁剪，小屏上溢出、大屏上留白，且无法配合 CSS Grid/Flex 自动缩放。
正确做法是只保留 src 和 alt，尺寸交给 CSS 控制；必要时用 aspect-ratio 保比例（现代浏览器支持良好）。
- 若需兼容旧浏览器（如 IE），可用 padding-top 百分比技巧模拟宽高比，但优先保证语义和现代布局逻辑
-
<img>的width/height属性本质是提示浏览器预留渲染空间，防止布局抖动；现代方案更推荐用 CSSaspect-ratio: 4/3+width: 100%替代 - 所有图片路径必须是有效 URL；Jimdo 等建站平台上传后，右键复制的链接要确认以
https://开头且未过期
响应式网格起点：用 display: grid 而非浮动或行内块
画廊布局的核心不是“怎么排”，而是“怎么自适应”。CSS Grid 是目前唯一能在纯 CSS 下实现二维自动换行（列数随屏幕变）的方案。别再用 float: left 或 display: inline-block ——它们在一维上难控制间隙，多列换行逻辑脆弱，且移动端适配成本极高。
关键不是写死列数，而是用 repeat(auto-fill, minmax(280px, 1fr)) 让浏览器自己算该几列。
-
grid-gap（现为gap）必须用像素单位（如12px），某些 CMS（如 Jimdo）对rem或%支持不稳定 -
img { width: 100%; height: auto; }是基础，再叠一层object-fit: cover可防变形（需父容器设固定宽高或aspect-ratio） - 测试时务必在真机或 Chrome DevTools 的设备模拟器中切换宽度，仅看桌面预览容易误判断点效果
alt 文本的质量与 aspect-ratio 的浏览器兼容节奏——前者影响可访问性底线，后者决定小屏下第一眼是否变形。这两处不修，画廊再炫也站不住。
