必须同时设置src和alt属性：src路径错误导致图片不显示，alt缺失则影响可访问性、SEO及合规性；alt需准确描述图意，src须为有效路径（相对、绝对或CDN），并推荐配合loading="lazy"、srcset等优化手段。
用 img 标签插入照片时，alt 和 src 必须同时处理
不填 alt 会导致屏幕阅读器无法描述图片，搜索引擎也难以识别内容；src 路径错误则直接显示空白或破损图标。常见错误是把相对路径写成 images/photo.jpg，但实际文件在 ./assets/images/photo.jpg，浏览器找不到就静默失败。
-
alt内容要具体，比如alt="青海湖日落，水面倒映金色云层"，而非alt="photo1" - 本地开发时建议统一用相对路径，且以项目根目录为基准，避免
../嵌套过深 - 如果图片来自 CDN，确保 URL 可公开访问，且 HTTPS 协议一致（混用 HTTP 会被现代浏览器拦截）
CSS Grid 布局中 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 的真实行为
这行代码不是“固定每列 250px”，而是告诉浏览器：每列最小 250px，最大尽可能均分剩余空间；当容器宽度不够放下两列时，自动退为单列。但容易忽略的是，auto-fit 和 auto-fill 行为不同——auto-fit 会收缩空列，auto-fill 则保留占位，导致右侧留白。
- 移动端小屏下，若图片原始宽高比差异大，仅靠
width: 100%可能拉伸变形，必须加object-fit: cover -
gap值建议用rem或px，避免用%，否则在窄屏下间隙可能过小或溢出 - 别忘了给
.photo-wall容器设padding，否则边缘图片会紧贴视口边界
为什么不用 div 包裹 img，而推荐 figure + figcaption
用 div 是能跑通的，但语义丢失严重：搜索引擎无法区分这是装饰图还是核心内容，屏幕阅读器也无法把图和说明绑定。而 figure 明确表示“该内容可独立于主文流”，figcaption 则天然关联其上/下最近的 figure 子元素。
- 每个
figure应只含一张img和一个figcaption，不要把多张图塞进同一个figure -
figcaption文字不宜过长，超过两行建议截断并加title属性提供完整信息 - 若不想显示说明文字，仍应保留空的
figcaption标签，保持结构完整性
响应式照片墙里最容易被跳过的性能细节
很多人调好布局就结束，但用户第一次打开页面时，几十张高清图同时请求会卡顿甚至触发浏览器限流。关键不是“能不能显示”，而是“要不要立刻全加载”。
立即学习“前端免费学习笔记（深入）”；
- 给
img加loading="lazy"属性，让浏览器原生支持懒加载（注意 Safari 15.4+ 才完全支持） - 同一页面避免使用过多不同尺寸的图片，优先用
srcset+sizes提供适配选项，例如：<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" sizes="(max-width: 768px) 100vw, 50vw"> - WebP 格式比 JPG 小 30% 左右，但需确认目标用户浏览器支持情况（IE 不支持，旧版 Android WebView 有兼容问题）
真正麻烦的不是写几行 CSS，而是每张图的尺寸、格式、加载时机都要单独判断——批量处理时很容易统一压缩却忽略长宽比，结果网格错位；或者开了懒加载，但忘了给容器设明确高度，导致页面重排抖动。
