src 和 alt 必须同时存在，缺一不可；alt 是图片加载失败时的 fallback 文本和屏幕阅读器唯一依据，空 alt="" 仅适用于纯装饰图；src 必须指向真实可访问资源，https 页面禁用 http:// 图片；路径需按文件相对位置正确书写；width 和 height 用于防布局偏移，推荐写真实像素值；title、style、class 非必需，优先使用外部 css；懒加载和现代格式可缓解大图加载前的白屏问题。
src 和 alt 必须同时存在，缺一不可
浏览器加载图片失败时，alt 不是“锦上添花”，而是 fallback 文本 + 屏幕阅读器唯一依据。空 alt="" 仅适用于纯装饰图（如背景分隔线），否则会被读作“图片”或跳过，损害可访问性。
常见错误：src 写错路径、漏写 alt、或写成 alt=" "（含空格的字符串 ≠ 空值）。
-
src必须指向真实可访问资源：本地文件路径、https://地址、或合法data:image/base64 字符串 - HTTPS 页面中避免用
http://图片，否则现代浏览器直接拦截并报Mixed Content错误 -
alt应具语义性，例如alt="穿蓝衬衫的工程师在调试服务器机柜"，而非alt="photo123.jpg"
相对路径怎么写才不 404
90% 的图片不显示问题出在路径计算错误，不是代码语法错，而是文件没放对位置。
假设 HTML 文件路径为 /pages/index.html：
- 图片同级 →
src="photo.jpg"（不加/开头） - 图片在子目录
/pages/images/cat.png→src="images/cat.png" - 图片在上级
/photo.jpg→src="../photo.jpg"（..表示退一级） - 绝对根路径
src="/images/logo.svg"在部署到子路径（如https://site.com/blog/）时会请求https://site.com/images/logo.svg，而非https://site.com/blog/images/logo.svg，极易 404
width 和 height 是防布局偏移，不是为了缩放
写了 width 和 height 属性，浏览器就能提前预留空间，避免图片加载中把下方文字顶跑——这叫 layout shift，影响 Core Web Vitals 评分。
- 只写
width="300"会让高度按原始比例自动计算，但若原图宽高比异常（如 2000×100），可能拉伸变形 - 推荐写真实像素值：
width="800" height="600"，即使后续用 CSS 覆盖，也保留“固有尺寸”供浏览器优化 - CSS 中用
width: 100%; height: auto;实现响应式，但必须配合容器约束，否则可能撑破布局 - Safari 15.4+ 才稳定支持
aspect-ratio，旧版本仍需靠width/height或 padding-top 技巧模拟
title、style、class 这些属性要不要加
title 是鼠标悬停提示，非必需；style 和 class 用于样式控制，但优先走外部 CSS —— 内联样式难维护，且无法复用。
-
title内容和alt不应重复，例如alt="会议合影"+title="2026 年 Q2 全员大会现场"可互补 - 用
class="hero-image"比style="max-width: 100%; border-radius: 4px;"更利于主题切换和媒体查询 - 不要用已废弃的
align、hspace、vspace，它们在 HTML5 中无效，CSS 替代方案更可控
width 和 height，若原始图尺寸极大（比如 5MB 的未压缩 PNG），浏览器仍要等解码完才渲染，期间白屏或闪烁依然存在。这时候得靠懒加载（loading="lazy"）或现代格式（WebP/AVIF）配合 CDN 缓存来缓解。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
