在 HTML 文件中添加图片主要是通过 <img> 标签来实现
基本语法
<img> 标签是一个空标签，即它没有结束标签，主要通过 src 和 alt 这两个必要属性来插入和描述图片。其基本语法如下：
<img src="图片路径" alt="图片替代文本">src：该属性用于指定图片的来源路径，可以是本地文件路径，也可以是网络上的图片地址。
alt：当图片无法正常显示时，alt 属性中的文本会替代图片显示，同时也有助于搜索引擎理解图片内容，提升网页的可访问性。
具体实现方式
1. 使用本地图片
如果你想插入本地计算机中的图片，src 属性的值应该是图片文件的相对路径或绝对路径。
相对路径：假设你的 HTML 文件和图片文件在同一目录下，示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插入本地图片</title>
</head>
<body>
<!-- 假设图片名为 example.jpg 且与HTML文件在同一目录 -->
<img src="example.jpg" alt="本地示例图片">
</body>
</html>若图片位于 HTML 文件所在目录的子文件夹中，比如在名为 images 的文件夹里，代码如下：
<img src="images/example.jpg" alt="子文件夹中的本地示例图片">绝对路径：绝对路径是从根目录开始的完整路径。在 Windows 系统中，示例如下：
<img src="C:\Users\YourUsername\Pictures\example.jpg" alt="本地图片绝对路径示例">在 Linux 或 macOS 系统中，示例如下：
<img src="/home/yourusername/Pictures/example.jpg" alt="本地图片绝对路径示例">2. 使用网络图片
当你想插入网络上的图片时，src 属性的值应该是该图片的完整 URL 地址。示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插入网络图片</title>
</head>
<body>
<!-- 插入网络图片，需保证网络地址有效 -->
<img src="https://example.com/image.jpg" alt="网络示例图片">
</body>
</html>其他属性设置
除了 src 和 alt 属性外，<img> 标签还有一些其他常用属性可以对图片进行进一步设置：
width 和 height：用于设置图片的宽度和高度，单位可以是像素（px）或百分比（%）。示例如下：
<img src="example.jpg" alt="设置尺寸的图片" width="300" height="200">title：当鼠标悬停在图片上时，会显示 title 属性中的文本，起到提示作用。示例如下：
<img src="example.jpg" alt="带提示的图片" title="这是一张示例图片">