HTML5使用标签嵌入图片，需设src和alt属性；支持srcset/sizes实现响应式；可用增强语义；loading="lazy"实现懒加载；onerror处理图片缺失。
如果您希望在网页中显示图片，HTML5 提供了标准且语义化的 元素来实现图像嵌入。以下是将图片添加到 HTML5 页面的具体步骤与常用图像插入技巧：
一、使用 ![html5如何添加图片_HTML5添加图片步骤与图像插入技巧【详解】]()
标签插入基础图片
HTML5 中插入图片最直接的方式是通过 标签，该标签为自闭合元素，必须包含 src 属性指定图片路径，同时建议设置 alt 属性提供替代文本以增强可访问性。
1、在 HTML 文件的主体内容区域（如
内）输入2、为 src 属性赋值，填写图片的相对路径或绝对 URL，例如：src="images/photo.jpg"。
立即学习“前端免费学习笔记（深入）”；
3、为 alt 属性填写简明准确的描述性文字，例如：alt="一只橘猫坐在窗台上晒太阳"。
4、可选地添加 width 和 height 属性以预设显示尺寸，例如：width="400" height="300"。
二、设置响应式图片：使用 srcset 与 sizes 属性
为适配不同设备像素密度和视口宽度，HTML5 支持通过 srcset 和 sizes 属性提供多分辨率图片源，由浏览器自动选择最优资源。
1、准备同一图像的不同尺寸版本，例如：photo-480w.jpg、photo-800w.jpg、photo-1200w.jpg。
2、在 标签中添加 srcset 属性，按格式列出图片路径与宽度描述，例如：srcset="photo-480w.jpg 480w, photo-800w.jpg 800w, photo-1200w.jpg 1200w"。
3、添加 sizes 属性定义不同断点下的显示宽度，例如：sizes="(max-width: 480px) 100vw, (max-width: 800px) 50vw, 33vw"。
4、仍需保留 src 属性作为降级方案，指向默认尺寸图片，例如：src="photo-800w.jpg"。
三、为图片添加语义化上下文：结合 与
当图片具有独立意义（如插图、图表、照片），应使用
1、用 元素。
2、在 标签之后添加
3、在
4、确保
四、延迟加载非首屏图片：应用 loading="lazy"
为优化页面初始加载性能，可对非关键区域的图片启用原生懒加载，仅当图片即将进入视口时才开始下载。
1、在 标签中添加 loading="lazy" 属性。
2、确认该图片不位于首屏可视区域内，否则可能因加载时机导致短暂空白。
3、保留 src 和 alt 属性不变，确保无 JavaScript 依赖下仍可正常回退。
4、注意：loading="lazy" 在 Chrome、Firefox、Edge 100+ 等现代浏览器中受支持，旧版 Safari 需通过 Intersection Observer 模拟实现。
五、处理图片缺失：利用 onerror 事件回退显示占位符
当指定的图片路径无效或加载失败时，可通过内联 onerror 事件动态替换为备用图片，避免显示破损图标。
1、在 标签中添加 onerror 属性，值为 JavaScript 表达式。
2、表达式中将当前元素的 src 属性重新赋值为本地占位图路径，例如：onerror="this.src='images/placeholder.png'"。
3、确保占位图文件真实存在且路径正确，推荐使用轻量级 SVG 占位符以减少请求体积。
4、注意：onerror 不会触发跨域图片的错误事件，若图片启用了 CORS，需额外配置 crossorigin 属性。
