在HTML中插入图片不需要额外的闭合标签，只需要使用自闭合的img标签就可以完成，这个标签是网页中展示图片的核心元素，所有需要显示的图片都要通过它来引入。
img标签的基础语法
img标签是空元素，不需要结束标签，基础写法如下：
<img src="图片路径" alt="图片替代文本">
其中src和alt是两个最基础的属性，几乎所有场景下都需要设置这两个属性，其他属性可以根据需求选择性添加。
核心属性说明
src属性
src是source的缩写，用来指定图片的存放路径，这个属性决定了浏览器去哪里加载对应的图片资源，路径设置错误会导致图片无法正常显示。
路径分为相对路径和绝对路径两种：
- 相对路径是相对于当前HTML文件的路径，比如图片和HTML文件在同一个文件夹下，直接写图片文件名即可，如
src="logo.png" - 绝对路径是完整的网络地址或者本地完整路径，比如网络图片的URL，如
src="https://ipipp.com/demo/photo.jpg"
alt属性
alt属性用来设置图片的替代文本，当图片因为路径错误、网络问题等原因无法加载时，会显示这里的文本内容，同时这个文本也会被屏幕阅读器读取，方便视障用户了解图片内容，是提升网页可访问性的重要属性。
其他常用属性
| 属性名 | 作用 | 示例 |
|---|---|---|
| width | 设置图片宽度，单位是像素或者百分比 | width="200" 或者 width="50%" |
| height | 设置图片高度，单位是像素或者百分比 | height="150" |
| title | 鼠标悬停在图片上时显示的提示文本 | title="这是示例图片" |
完整使用示例
下面是一个完整的插入本地图片和网络图片的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片插入示例</title>
</head>
<body>
<!-- 插入本地相对路径图片 -->
<img src="banner.jpg" alt="网站顶部横幅" width="800" title="首页横幅">
<!-- 插入网络图片 -->
<img src="https://ipipp.com/static/icon.png" alt="网站图标" height="32">
</body>
</html>常见注意事项
- 不要省略alt属性，即使图片只是装饰性的，也可以设置空的alt属性
alt=""，避免屏幕阅读器读取无意义的文件名 - 尽量只设置width或者height其中一个属性，浏览器会自动按比例缩放另一个维度，同时设置两个可能导致图片变形
- 相对路径要注意层级关系，如果图片在img文件夹下，路径要写成
src="img/photo.png"，上级目录用../表示 - 网络图片要确保地址可访问，如果引用的是本地测试地址，比如127.0.0.1或者192.168.0.1，不需要做额外修改，直接使用即可
注意：在HTML正文中提到标签名称时，需要转义写法，比如写<img>而不是直接使用
标签，避免被浏览器解析为实际的元素。