HTML插入图片最稳妥方式是用标签配src属性；路径需按HTML文件位置计算，区分相对与绝对路径；alt属性必填且须有意义；width/height建议写原图尺寸或用CSS控制；为自闭合标签，不可闭合或嵌套内容。
HTML 插入图片最稳妥的方式，就是用 <img alt="html怎么插图_html插入图片方法【代码】" > 标签配 src 属性——其他写法要么无效，要么不被主流浏览器支持。
图片路径写错：相对路径 vs 绝对路径
最常见的问题是图片不显示，实际八成是 src 路径没对上。浏览器找图时，路径是相对于当前 HTML 文件位置算的，不是相对于代码编辑器打开的文件夹，也不是相对于网站根目录（除非你写了 /xxx.jpg 这种以斜杠开头的路径）。
- 如果 HTML 和图片在同一文件夹：
src="photo.jpg" - 如果图片在子文件夹
images/里：src="images/photo.jpg" - 如果图片在上一级目录：
src="../logo.png" - 用绝对 URL（比如 CDN 或外部图）：
src="https://example.com/img/icon.svg"
注意：Windows 下复制的路径带反斜杠 \，必须手动改成正斜杠 /，否则多数浏览器直接忽略。
alt 属性不是可选项，而是必要项
alt 不只是“给图片加说明”，它决定了图片加载失败时显示什么文字、屏幕阅读器怎么读、搜索引擎怎么理解这张图。空 alt="" 是合法的，表示该图纯装饰、无信息量；但绝不能省略这个属性，否则会触发可访问性警告，某些严格校验工具甚至报错。
立即学习“前端免费学习笔记（深入）”；
- 有信息量的图：
<img src="chart.png" alt="2024 年 Q1 用户增长趋势图"> - 纯装饰图（如分隔线、背景花边）：
<img src="deco-line.png" alt=""> - 别写
alt="图片"或alt="一张图"——这等于没写。
width / height 不写会重排，写了要注意单位和比例
不设 width 和 height，浏览器得等图片下载完才知道尺寸，容易造成页面“抖动”（内容突然下移）。但硬写像素值又可能拉伸变形，尤其响应式页面里。
- 推荐写原图尺寸：
<img src="avatar.jpg" style="max-width:90%" style="max-width:90%" alt="头像"> - CSS 控制缩放更灵活：
style="width: 100%; height: auto;"，但得确保父容器有宽度限制 - 现代方案可用
srcset+sizes适配不同屏，但基础场景先保证src+alt+ 尺寸属性写对
常见错误：把 img 当成容器标签
<img alt="html怎么插图_html插入图片方法【代码】" > 是自闭合标签，没有结束符，也不允许套内容。写成 <img alt="html怎么插图_html插入图片方法【代码】" > 或在中间加文字，浏览器会当成两个独立标签处理，后半部分直接被忽略或错位渲染。
- ❌ 错误：
<img src="a.jpg" alt="html怎么插图_html插入图片方法【代码】" >我的照片 - ✅ 正确：
<img src="a.jpg" alt="我的照片"> - 需要文字说明？用
<figure><img alt="html怎么插图_html插入图片方法【代码】" ><figcaption></figcaption></figure>组合，而不是塞进<img alt="html怎么插图_html插入图片方法【代码】" >里
真正麻烦的往往不是语法，而是路径拼错后连控制台都不报错——它就安静地不显示，然后你花二十分钟检查拼写、刷新、清缓存……其实只差一个点或斜杠。
