在网页上插入图片的代码，在网页上插入图片的方法包括使用HTML的<img>标签、使用CSS背景属性、以及通过JavaScript动态插入图片。 使用<img>标签是最常见和最直接的方法。下面详细描述如何使用<img>标签来插入图片。
使用<img>标签插入图片：
<img>标签是HTML专门用于在网页上插入图片的标签。该标签是一个自闭合标签，意味着它不需要结束标签。我们可以通过指定图片的路径(src属性)来插入图片，例如：
<img src=”path_to_image.jpg” alt=”Description of Image”>
src属性指定了图片的路径，它可以是本地路径或网络URL。alt属性提供了图片的替代文本，当图片无法加载时会显示这段文本，对SEO和网页无障碍访问都有帮助。
一、使用HTML的<img>标签插入图片
1. 基本用法
<img>标签的基本用法非常简单，只需要指定图片的路径(src)和替代文本(alt)。
例如：
<img src=”images/example.jpg” alt=”An example image”>
在这个例子中，images/example.jpg 是图片文件的路径，alt=”An example image” 提供了图片的替代文本。
2. 使用相对路径和绝对路径
图片路径可以是相对路径或绝对路径。相对路径相对于网页文件的位置
例如：
<img src=”../images/example.jpg” alt=”An example image”>
绝对路径是完整的URL，例如：
<img src=”https://www.chaobie.com/images/example.jpg” alt=”An example image”>
3. 设置图片尺寸
可以使用width和height属性来设置图片的显示尺寸
例如：
<img src=”images/example.jpg” alt=”An example image” width=”300″ height=”200″>
这样可以控制图片的宽度和高度。
二、使用CSS背景属性插入图片
1. 背景图片
除了<img>标签外，还可以使用CSS的background-image属性来设置背景图片。例如：
<div class=”background-example”></div>
<style>
.background-example {
width: 300px;
height: 200px;
background-image: url(‘images/example.jpg’);
background-size: cover;
}
</style>
在这个例子中，我们创建了一个div元素，并使用CSS设置了背景图片。background-size: cover确保图片覆盖整个容器。
2. 背景位置和重复
可以使用background-position和background-repeat属性来控制背景图片的位置和重复方式
例如：
<style>
.background-example {
width: 300px;
height: 200px;
background-image: url(‘images/example.jpg’);
background-position: center;
background-repeat: no-repeat;
}
</style>
这将使背景图片居中并且不重复显示。
三、通过JavaScript动态插入图片
1. 动态创建<img>标签
可以使用JavaScript动态创建和插入<img>标签。例如：
<script>
var img = document.createElement(‘img’);
img.src = ‘images/example.jpg’;
img.alt = ‘An example image’;
document.body.appendChild(img);
</script>
这个脚本创建了一个<img>标签，并将其添加到网页的body中。
2. 修改现有图片的属性
还可以使用JavaScript修改现有图片的属性。例如：
<script>
var img = document.getElementById(‘exampleImage’);
img.src = ‘images/new-example.jpg’;
img.alt = ‘A new example image’;
</script>
这个脚本修改了ID为exampleImage的图片的路径和替代文本。
四、图片优化和SEO
1. 图片格式
选择合适的图片格式可以提高网页加载速度。常见的图片格式包括JPEG、PNG和GIF。JPEG适合照片和复杂图像，PNG适合透明背景的图片，GIF适合简单动画。
2. 图片压缩
压缩图片可以减少文件大小，提高网页加载速度。可以使用在线工具或软件进行图片压缩，例如TinyPNG和ImageOptim。
3. 使用替代文本
为每张图片添加替代文本（alt属性）有助于SEO和网页无障碍访问。例如：
<img src=”images/example.jpg” alt=”A descriptive text about the image”>
4. 响应式图片
使用响应式图片可以确保图片在不同设备上显示良好。可以使用srcset和sizes属性来指定不同分辨率的图片。例如：
<img src=”images/example.jpg” srcset=”images/example-small.jpg 480w, images/example-medium.jpg 800w, images/example-large.jpg 1200w” sizes=”(max-width: 600px) 480px, (max-width: 800px) 800px, 1200px” alt=”A responsive example image”>
以上仅供参考，具体自己根据您的网页需求自行测试。
