使用img标签插入图片，通过src属性指定路径并添加alt文本；利用CSS background-image设置元素背景图，配合相关属性优化显示；可通过内联样式快速设定背景；采用响应式设计使图片适配不同设备。
如果您在编写网页时需要展示图像内容，可以通过HTML中的不同方式将图片插入页面。以下是几种常用的图片插入方法，适用于直接嵌入图片或设置为元素背景。
一、使用img标签插入图片
通过<img>标签可以在网页中直接嵌入图像文件。该标签是自闭合的，必须包含src属性来指定图片的路径。
1、在HTML文档中添加<img>标签，并设置src属性指向图片文件的URL或本地路径。
2、为图片添加alt属性以提供替代文本，用于图片无法加载时显示，也有助于网页可访问性。
立即学习“前端免费学习笔记（深入）”；
3、可根据需要设置width和height属性控制图片尺寸，避免布局偏移。
二、通过CSS background-image 插入背景图
使用CSS的background-image属性可以将图片设置为某个HTML元素的背景图像，常用于设计页面视觉效果。
1、选择目标HTML元素（如div、body等），并为其添加一个class或id以便样式绑定。
2、在CSS样式表中，使用background-image: url('图片路径'); 来指定背景图片。
3、配合background-size、background-position 和 background-repeat等属性优化背景图显示效果。
三、使用内联样式插入背景图
当需要快速为单个元素设置背景图片而无需外部CSS时，可以使用内联style属性直接定义样式。
1、在HTML元素的style属性中写入background-image: url('图片路径')。
2、确保路径正确，推荐使用相对路径或绝对URL。
3、可同时设置高度和宽度以确保容器可见，否则无内容的元素可能不显示背景图。
四、响应式图片插入方法
为了适配不同设备屏幕，应采用响应式策略使图片能自动调整大小。
1、为<img>标签设置max-width: 100%; height: auto; 的CSS规则，使其在父容器内缩放。
2、使用srcset属性提供多张分辨率图片，浏览器会根据设备像素密度选择最合适的版本。
3、结合<picture>标签与<source>实现艺术方向或设备适配，提升移动端体验。
