1. 前言
HTML标签是构成网页的基本元素，其中最基础的就是图片的插入。在网页中，插入图片可以丰富网页的内容，提高网页的吸引力。接下来将会介绍HTML插入图片的方法及相关属性详解。
2. 插入图片的基本方式
2.1 使用img标签插入图片
在HTML中，img标签是最基本的插入图片的标签。下面是一个标准的img标签：
<img src="图片的路径">其中，src属性为图片的路径，可以是相对路径或绝对路径。如果图片在当前目录下，则只需要写图片的文件名；如果图片在其他目录下，则需要写全路径。下面是一个示例：
<img src="./images/pic.png">这里，pic.png图片位于当前目录下的images目录中。
2.2 使用base64编码插入图片
另外一种常用的插入图片的方式是使用base64编码直接插入图片。这样可以减少http请求，提高网页性能。下面是一个使用base64编码插入图片的示例：
<img src="data:image/png;base64,iVBORw0KG...">这里，src属性的值直接是一段base64编码的数据，而非图片的路径。需要注意的是，使用base64编码插入图片会增加HTML文件的大小，因此仅建议用于小图片。
3. img标签的常用属性
除了src属性之外，img标签还有其他常用的属性，下面将介绍一些常用的属性。
3.1 alt属性
alt属性是在图片无法显示时显示的替代文本。可以使用alt属性描述图片的内容或者作用。例如：
<img src="./images/pic.png" alt="示例图片">如果图片无法正常显示，用户将看到“示例图片”的文本替代品。
3.2 width和height属性
width属性和height属性分别控制图片的宽度和高度，可以指定具体的像素值或者百分比。例如：
<img src="./images/pic.png" width="200" height="100">
<img src="./images/pic.png" width="50%" height="50%">
第一个img标签指定图片的宽度为200px，高度为100px；第二个img标签指定图片的宽度为父元素宽度的一半，高度也是父元素高度的一半。
3.3 title属性
title属性用于指定图片的标题，鼠标悬停在图片上时会显示title属性的值。例如：
<img src="./images/pic.png" title="示例图片">当用户将鼠标悬停在图片上时，会显示“示例图片”的标题文本。
4. 总结
HTML插入图片的方式有两种：使用img标签插入图片和使用base64编码插入图片。img标签有多个常用属性，包括src、alt、width、height和title。通过掌握这些基本的方法和属性，我们可以在网页中轻松插入图片，丰富网页的内容，提高网页的吸引力。