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