01-html&CSS/15-尚硅谷-HTML和CSS-img标签

Image标签，这个image标签呢，是用来干嘛的呢？它可以用来显示图片。可以在HTM页面上显示图片啊，那我给大家演示一下吧，怎么去用这个东西，怎么去显示，我们找到这个image，注意看，按照这个需求，我给它复制过来，我复制啊，然后放到word里面粘贴CTRL设加斜杠，诶我得先给它们引起来，选中它们CTRL设置加斜杠啊就是。那现在简单要求是什么？用image标签是不是显示一张美女图片呢？那你得先把image写上来，好，现在大家想想啊，你要显示一张图片，光显因就可以了吗？啊，那不是不是的，那你得干嘛？你是不是要告诉人家你要显示哪张图片，那你得告诉我路径啊，路径怎么告穿呢？Src。

Src好，那src怎么做？这里面是设置路径的，那么我们要讲一讲啊，这里要讲的东西很多，注意看啊，Image标签是这个什么呢？图像或者是图片标签用来显示图片，好，还有那个src属性可以设置图片的路径，那这个路径大家注意，对，在外B中路径分为相对路径和绝对路径两种，但是大家注意咱们现在已经进入web了啊，咱们跟基础的一的路径略微不同，略微不同，我们先回顾一下基础的吧，在Java SE中路径也分为相对路径和。

绝对路径是吧，好，注意看一下相对路径，绝对路径是什么样子的，好相对路径点。表示当前目录。咱们讲命令函是不是讲过啊？嗲嗲表示上一级。哦哦，不是，这个是web的浏览器的，差点说错了，咱们这个Java s1的相似路径是什么样子呢？就是从工程名开始算，还记得吧？啊，从工程名开始算，那么绝对路径就是盘符加上文件名啊，那些就是盘符冒号斜杠，然后目录啊，斜杠到文件名啊，就这种情况能理解吧，这就是SSE的，然后web当中呢。这一看也是分两种相对路径。

绝对路径啊，相对路径的是嗲嗲嗲和文件里啊嗲呢是什么东西呢？表示当前目录。就是当前文件所在的目录，就当前目录，然后呢，就是表示当前文件。所在的上一级。目录，那郭建明呢？表不表示当前。当前目录当前文件所在目录的什么呢？这个文件那么相当于点斜杠是当前目录文件名，能理解吗？只不过是点斜杠可以省略了而已。

就这样子啊，那绝对路径是什么样子呢？大家记住在cooper当中它的绝对路径啊，跟一的绝路径写法不同啊，格式是怎么样子呢？P冒号双斜线IP地址。等我号工商名加上。资源路径或者资源名。就这样子，这个呢，才是在word当中正确的绝对路径的写法啊，记住，如果这是正确的啊。那你要是写错误的。啊，就这种记住了啊，在web里面就不要用这种路径，这种路径是不行的，那比如说现在我们来看一下啊，我就演示一下相对论决定是咋用，那这里面怎么用啊，现在我们写点点表示哪个目录，当前目录，当前目录就是我这个文件image标签的这个目录，HT没有看见吧，但我这边有图片没有，图片都在哪，都在image里面看见吧，把这个先删掉了，你们自己看就行是吧。

好，那么比如说我要找这个里面的图片怎么办？我是不是先找到上一级目录啊，那就得写上点点斜杠，点点斜杠之后到哪它是不是已经到了加va web这个目录啊，好吧，啊加va web以后咋办呢？咱们说找了个image啊，Image看见了吧，出来了吧，然后后面是不是找1.jpg是不是出来了，OK，然后你看。就出来了美女嘛，是吧。好，但是这个门铃好大啊，页面中已经显示不出来了是吧？嗯，不能显，不能完整显示出来，但这个时候我们希望什么？我们是不是希望这个图片能够在我们的可视范围内能够完整显示出来，所以我们就想着要去修改和这个图片呢，对，宽高大小对吧？怎么改，这是改宽度啊，宽度怎么改啊，100大概这样的一个比例啊，高度呢，怎么改？呃，128这样子，差不多这样一个比例，或者120啊1130这样的，那你刷新看见吧。

随变小了吧，啊就你改呗，你要觉得小你自己改呗，对吧，你可以200了300了就自己改呗，啊就大概都这样一个比例去改就行了哈，那咱们就250对吧，六零吧，250吧，选一个啊来咱们刷新一下走大概这样吧，好，那你就可以显示多张图片了啊多张图片咱们复制一下，CTRL加D复制。啊，可以了，来3456，哎，就这样OK，那么我们刷新一下这图片是不是都出来了，就这样OK，那么我们还可以给图片加一些效果，比如说就是简单的加边框效果，什么叫边框效果呢？你看这个图片是不是框框头秃的就出来，我们可以在在它边上加一个细线，怎么加，在这里写上一个波的。

看见吧，波翻译就边框了啊，加个一啊，或者说我给你写的大一点明显一点是吧，如果觉得一不明显，来加个20 20就表示你这个边框是20个像素，来我刷新看看明显不明显，明显不但是不感觉不太对啊，就感觉不太对是吧，黑白的相框啊好了，一般情况下大家都看见了，我们不会给这个边框啊，加的特别粗的，因为效果不对嘛，对吧，一般这个边框要写的就是写个一都是这样子的，要么就写个零啊，要么就不写，不写就零了，一就表示一个像素宽度就很细，看见吧，一般都是这样的效果啊，一般都是这样的效果，好，那我们稍微整理一下，回顾一下，刚刚讲的时候，我们说image标签是这个图像标签，Src属性是设置图片的路径啊，那么其他路径大家也看到了，就问对吧？这个是属性设置图片的宽度。

嗯。属性设置图片的高度，那波的是不是设置边框啊。边框大小，那还有一个属性也是常用的，就是什么东西呢？A就是alt。LT，有啥用，美女找不到，我先写上来，你去看看哈，好哎，对，我现在呢，故意把这个文件名改的不存在，咱们没有这个文件名吧，那没有这个是吧，然后你刷新。

它是不是显示美女找不到，那又是干嘛用的呢？就alt的作用。没有设置，当指定路径找不到图片时，用来代替或者替代显示的文本内容，能理解吧，他就把这个事情啊，就是异常可以，你看异常信息是吧，异常显示的啊可以，OK，这咱们了解一下，好，那我就把它改回来了，效果你也看到了，就改回来了，好，OK，刷新回来了，那现在呢，基本上我们已经大概的知道image大该怎么用，在这个image里面其实使用最重要的呀，我觉得改宽高应该比较简单啊，加边框也比较简单，在这里面有一个非常重要的知识点，就是路径这个问题。

这个路径啊，我们要给他在。学习再练习一下怎么办，我现在把那个图片注意看，我随便拖到不同的位置。看见了吗？我我故意给他打乱哈，故意给他打乱了，那肯定一会这个图片就找不到啊啊就找不到了，至少有两张找不到了，我一刷新自动不是这是自动续费了吗？白呀嘛，哎呀，要先把它搞回来是吧？啊那这个工具就这点好，还帮你自动续费，真麻烦，好讨厌是吧。来吧，好工具就这样好容易麻烦，我想演示错误都演示不出来，好现在呢，我给他改回来了哈，那很明显这东西是不是就找找诶不是不用换浏览器，就因为缓存，首先先跟他看看这个出来了吧，来我F12我应该是能够看到的吧，我试试看啊找一下。

都看一看，都看看这个东方是flow k啊，都是缓存，我清到这个缓存怎么清呢？来来给你加个东西啊走清不出来是吧，那就运行是吧，来走这是不是出来了啊，不行就再运行一次啊好，这是缓存的原因，好那这个时候我们来看看哈，这个相对路径我们怎么看，首先我们把这打开，把这两个路径先删掉啊，我们现再来熟悉一下。第一第二个找不到了吧，我们说点就不是表示当前目录，那么在点的里面是不是就已经表示HL这个目录了，所以我们就可以点斜杠1.jpg是不是出来了。有吧，好，那么我们说相对路径啊，它分三种，一种是点，一种是点点啊诶咱们点开电脑用过是吧，还有是文件名，我们说文件名是不是相当于点斜杠，就是些文件名点斜杠是不是可以省略，那其实你把这个东西去掉，就是不是不是就这两种啊，那这时候刷新呢一样。

啊，或者说你单家是缓存对吧，再跑一次了，能理解吧，这还一样啊，没问题。啊没问题，好，那我们说点斜杠可以省略第三个我刚才见过了，那第二个呢，第二个图片去哪了，我们找找它是不是在上一级目录，上一节目录，你是不是点点就行了，点点诶走它是不是直接提示了，先敲就行了，好刷新一下走你你看出来。出来了，OK，这个呢，咱们了解一下，这就是啊，这个路径的做法好，那这个绝对路径呢，后期咱们再讲啊，后续我们再讲。