必须同时设置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 子元素。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 每个 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，而是每张图的尺寸、格式、加载时机都要单独判断——批量处理时很容易统一压缩却忽略长宽比，结果网格错位；或者开了懒加载，但忘了给容器设明确高度，导致页面重排抖动。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！