1 img 标签是什么
img 是一个单标签，用于在网页中嵌入图片。图片本身不是嵌入到 HTML 文件里的，而是通过 src 属性指定路径，由浏览器去加载。
2 属性详解
2.1 src — 路径
src 是必填属性，指定图片的路径。路径分两种：
- 相对路径：相对于当前 HTML 文件的位置，
./表示当前目录，推荐使用。 - 绝对路径：带盘符的完整路径（如
C:\Users\...），绝对不能用——把代码拷贝给别人，对方本地没有这个路径，图片直接找不到，还不报错。
2.2 alt — 加载失败提示
图片路径错误或加载失败时，页面上会显示 alt 设置的文字，方便用户知道这里原本是什么内容。
2.3 title — 悬停说明
鼠标悬停在图片上时显示的说明文字。
2.4 width / height — 宽高
设置图片显示尺寸。只设置其中一个时，另一个会按原图宽高比自动缩放，不会变形。
注意：HTML 只负责结构，不建议直接用属性改样式，宽高调整推荐交给 CSS 处理。
3 属性总结
| 属性 | 是否必填 | 说明 |
|---|---|---|
src | 必填 | 图片路径，只能用相对路径 |
alt | 建议填 | 图片加载失败时显示的文字 |
title | 可选 | 鼠标悬停时的说明文字 |
width / height | 可选 | 设置宽高，只填一个则按比例缩放 |
4 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>😎 图片标签【重要】</title>
</head>
<body>
<h1>1. 图片标签img的基本使用</h1>
<!-- src是标签img属性的名称,有名称了,得给它值
src="图片地址"
相对地址, 相对与你代码文件位置的路径
绝对地址, window带盘符地址(路径) 绝对路径绝对不能用
-->
<img src="img11111111.jpg" alt="这是个啥东西,我也不知道啊">
<img src="./i111mg1.jpg" title="这是一个好地方">
<!-- 绝对路径不能用。 假设我的代码拷贝给你，你得去修改。不能直接跑。
你本地没有我路径，所以找不到图片,找不到图片,则无法显示.(还不报错)
-->
<!-- 设置宽度属性
如果只设置宽,则高会按图片的宽高比进行缩放
-->
<img src="./img2.jpg" alt="风景图片" title="好地方" width="200">
</body>
</html>