说到图片，相信大家都不陌生，因为在我们的日常生活和使用上，总能看到图片，而图片在使用上，比文字更具表现力和感染力，当我们恰当地使用图片可以让网页更加精美和直观，尤其是网页的第一观看，非常重要。
一、src属性
符号：img
特点：单标签
代码：
<!doctypehtml><html><head><metacharset=utf-8><title>HTML插入图片</title></head><body><p>要展示的图片：</p><imgsrc=fish.jpg></body></html>
总结：在img标签中引入src属性名即可完成对图片的插入，其中src的属性值为“文件名”或“路径./文件名”，注：要插入的图片必须与html项目在同一文件夹中！此部分会有重点说明。
二、其余属性
三、alt用法
说明：当图片因某些原因无法显示时，显示alt属性对应的属性值。
代码：
<!doctypehtml><html><head><metacharset=utf-8><title>HTML插入图片</title></head><body><p>要展示的图片：</p><imgsrc=potato.jpgwidth=500alt=土豆></body></html>
展示如下：
四、title用法
说明：若图片正常显示，则当鼠标悬停于图片上时，显示title属性对应属性值的内容
代码：
<!doctypehtml><html><head><metacharset=utf-8><title>HTML插入图片</title></head><body><p>要展示的图片：</p><imgsrc=fish.jpgwidth=500alt=鱼title=这是一条熟的鱼></body></html>
效果：若图片可以正常显示，将鼠标停留在图片上，会出现“这是一条熟的鱼”字样。
展示如图：
五、属性特点
图片标签的属性特点适用绝大多数的HTML标签：
1. 标签的属性写在开始标签内部
2. 标签内可同时存在多个属性
3. 属性间以空格隔开
4. 标签名与属性之间必须以空格隔开
5. 属性间没有顺序之分
六、路径讲解与跨级别插入图片
（一）路径介绍
1. 绝对路径
目录下的绝对位置，可直接到达目标位置，通常指从盘符开始的路径或完整的网址。在html图片的插入中，一般不使用绝对路径，较常用的是相对路径。
2. 相对路径
从当前文件开始出发寻找目标文件的过程，经常使用。
（二）跨级别插入图片
1. 同级
当要插入的图片与创建的html文件在同一级，则可直接插入，src的属性值为“目标文件名.后缀” 或 “./目标文件名.后缀”。在使用编译器进行编码时，若输入同级文件名的首字母，编译器往往会自动跳出其余内容。
代码展示：（假设图片名为picture，jpg格式）
<imgsrc=picture.jpg>或<imgsrc=./picture.jpg>
2. 下级
若html文件与file文件夹同级，要插入的图片picture在file文件夹中，则要在html文件中插入picture图片则属于跨级别访问图片操作，代码如下：
<imgsrc=file/picture.jpg>
3. 上级
若在文件夹total中有一图片picture和另一文件夹test，html文件在test文件夹中，则在html文件中插入picture图片属于访问上一级文件夹，代码如下：
<imgsrc=../picture.jpg>
若需访问上两级文件夹中的picture图片，则代码为：
<imgsrc=../../picture.jpg>
4. 综合运用
若有file1和file2两文件夹，file1中存放html文件，file2中存放要插入的图片flag，格式为jpg，则在html文件中插入flag图片的代码如下：
<imgsrc=../file2/flag.jpg>
（先退到上一级，再访问下一级）