在网页中插入一张图片，相对路径的三种写法以及alt和title的区别

柔情只为你懂 2022-04-02 20:46 1164阅读 0赞

一、在网页中插入一张图片，使用< img / >标签,相对路径的三种写法如下：  
1.当当前文件和目标文件在同一目录下，写法为：目标文件名+扩展名；  
eg:< img src=“poto1.jpg” / >  
2.当当前文件和目标文件所在文件夹在同一目录下，写法为：目标文件所在文件夹名称/目标文件名+扩展名；  
eg:< img src=“img/poto2.jpg” / >  
3.当当前文件所在文件夹和目标文件所在文件夹在同一目录下，写法为：…/目标文件所在文件夹名/目标文件名+扩展名；  
eg:< img src="…/img/poto3.jpg" / >  
注：…/表示返回上一级目录

\-----------------------------------用代码表示如下------------------------------------------------------------------  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70]

--------------------

二.alt 和 title的区别.  
**1.alt**:当图片由于某些原因加载失败显示的替换信息；  
语法：< img src=“图片路径” alt=“图片加载失败” width=“200” height=“100” / >  
注：当图片由于其它原因加载失败时，显示一个宽200像素，高100像素，内容为 图片加载失败 的替换框  
**2.title**当鼠标悬停在图片上时显示的替换信息；  
< img src=“图片路径” title=“路人甲小码”/>  
注：当鼠标悬停在图片上时，显示“路人甲小码”

\-----------------------------------------------用代码表示如下-------------------------------------------  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70]: /images/20220403/08c388683549458ebb391b4e3f786c25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70 1]: /images/20220403/9a1d1fd7de0e41fdb10e922e5a14553c.png