4.图像标签

我们首先在代码文件夹的上一级文件夹新建一个文件夹resource，用来存放图片等资源文件，这是行业的规范，我们从学习阶段就要养成这一好习惯。

<img src="" alt="">

上面的代码串就是图像标签，它可以用来在网页显示图片。

一、src

输入图片的地址，这个地址可以分为相对地址和绝对地址，绝对地址就是图片在电脑中完整的路径，是固定死的，如D:\demo\HTML\resource\image\02.jpg；相对地址则是从代码的位置出发开始寻到到图片位置的路径，如…\resource\image\02.jpg。其中…\的意思是从当前代码位置开始返回上一级文件，而当前代码的位置是D:\demo\HTML\code\3.图像标签.html。最后代码和显示的效果如下

<img src="..\resource\image\02.jpg" alt="02">

一般推荐使用相对地址，相对地址比绝对地址灵活，即使整个HTML发生迁移，因为图片文件在resource文件而.html文件在code文件夹，它都同在一个HTML大文件夹里，不会影响图像标签src正常寻址，图片能正常显示，若使用的是相对路径，则会应为位置的变动使得绝对路径变动，导致代码中的src也要跟着改变才能继续使用。

二、alt

若图片无法显示则显示alt中的内容。比如当图片发生位置迁移，src无法找到图片，网页就无法正常显示图片，这个时候就需要一些东西替代图片的显示，我们可以再alt中输入图片的名字，代码和效果如下，我把代码中的图片名改了，导致该位置找不到该名字的图片

<img src="..\resource\image\03.jpg" alt="诶呀02不见了">

---

三、title

title表示悬停文字，加上这一信息后，我们在网页把鼠标悬停在图片上后就会出现我们输入在title中的文字。（除了上面src和alt两个必须要有的基础信息，img标签还有些其他可以添加的信息。）代码和效果如下

<img src="..\resource\image\02.jpg" alt="02" title="02天下第一">

四、width height

这两个元素是用来调整图片在网页上显示的大小的。代码和效果如下

<img src="..\resource\image\02.jpg" alt="02" title="02天下第一" width="300" height="300">

感谢您的观看，能和您一起学习是我最大的荣幸！

参考学习资料：图像标签——狂神说

下面是我的微信公众号，与csdn同步更新，有需要的朋友可以关注一波~