HTML5插入图片需正确使用标签：路径须用相对路径并校验层级，alt属性必填且语义准确，响应式应采用srcset+sizes而非仅CSS缩放，加载失败时通过Network面板定位404或跨域问题。
html5 里插入图片，就用 <img alt="html5怎么添加图片_html5图片插入代码【教程】" > 标签，不需要额外 js 或 css——但漏掉 alt、写错路径、忽略响应式，页面一上线就出问题。
图片路径写不对，浏览器显示空白或占位符
常见错误是把本地文件路径（比如 C:\project\img\logo.png）直接塞进 src，或者用相对路径时没搞清当前 HTML 文件的位置层级。
- 开发时用相对路径：确保
src是相对于当前 HTML 文件的路径，比如 HTML 在/pages/index.html，图片在/assets/logo.png，就得写src="../assets/logo.png" - 避免绝对路径（
C:\...或/home/...），浏览器不认 - 路径含空格或中文？重命名。有些服务器或本地双击打开时会 404
- 不确定路径是否对？右键「检查元素」→ 看 Network 面板里
img请求是不是 404
alt 属性不是可选项，而是必填项
不写 alt 不影响图片显示，但会影响可访问性、SEO，还会在图片加载失败时显示空白——用户根本不知道该位置原本是什么。
- 描述图片内容，不是“图片”“一张图”这种废话，比如
alt="黑猫蹲在窗台上望向窗外" - 纯装饰图？写
alt=""（空字符串），别省略，也别写alt="decorative" - 用了
aria-hidden="true"的图，仍建议保留alt=""，否则屏幕阅读器行为不一致
响应式图片要用 srcset + sizes，不是只靠 CSS
只用 width: 100% 拉伸一张大图，手机会下完几 MB 图再缩放，浪费流量又卡顿。
- 提供多尺寸源：
srcset="logo-400w.png 400w, logo-800w.png 800w, logo-1200w.png 1200w" - 告诉浏览器视口宽度对应选哪档：
sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 33vw" -
src仍要保留，作为兜底（老浏览器或解析失败时用） - 不要只依赖
picture元素——它适合艺术指导（换构图），普通适配用srcset更轻量
图片加载失败时，怎么知道是路径问题还是跨域拦截？
控制台报 Failed to load resource: net::ERR_FAILED 很模糊；如果是 CORS 错误，通常会带 No 'Access-Control-Allow-Origin' 字样。
立即学习“前端免费学习笔记（深入）”；
- 先看 Network 面板：状态码是 404？路径错了；是 0？可能是跨域或本地 file:// 协议限制
- 本地双击打开 HTML？Chrome 默认禁跨域请求图片。用
python3 -m http.server起个本地服务再试 - 引用第三方图床？确认对方允许外链，有的会返回 403
- 想静默处理加载失败？用
onerror事件，但注意别造成无限循环：onerror="this.onerror=null; this.src='fallback.png'"
最常被跳过的其实是 alt 的语义准确性，和 srcset 里 w 单位与实际 CSS 宽度的匹配关系——这两处不显错，但一到无障碍测试或低端网络环境，问题立马浮出来。
