11.尚硅谷_HTML&CSS基础_图片标签.avi原创

再来呢，我们来继续啊，再说一个东西，那说这个东西之前呢，我这里边啊，在我们这个DEMO这个文件夹里边，我再创了一个文件夹，叫一个随要起一个名叫一个hello啊，我们来演示一个东西，CTRLCCTRL把这个。拖到这里边来啊，现在我们这个hello下边我来一个这个名改一个叫一个DEMO7，诶那这个DEMO7现在和其他的页面不太一样，它放在哪了？Hello，这个文件夹下了啊，然后我们来编辑它这里边呢，我把这些东西先都给它去掉，那接下来我们来说的是一个什么呢？叫做一个图片，哎图片标签，诶那图片标签这东西一听名就是干嘛的，用来干嘛呀？诶是不是像我们这个页面里来插入一个什么呀，图片吧，诶图片，那既然要插入图片，我们还是其实已经说了，我们也得从通过某一个标签是不是来插入啊，哎，那使用什么标签呢？哎，使用我们这个img标签来干嘛呢？呃，来向我们这个网页中干嘛呢？引入哎一个这个外部图片啊，注意一定是外部的，为什么是外部的呀，我能不能在这个文本文件里直接弄一图片啊，不能我们说了。

唇友，本图片文件里边是不是不能放图片啊，哎，图片啊，音频啊视频啊都不行，所以我们一定是引入一个什么呀，外部的一个图片，那既然要引入图片，我们先干嘛呢？哎，我先找一个图片啊，找一个图片直接我这个D01里边not，我们这个G找到我这个MG是吧？这么一个图片CTRLC，这叫一个什么呀，叫一个1.gif，还有一个什么呀，二点GIF2个图片我直接CTRLC干嘛呢？一块放到我这个hello文件夹下，那你会发现什么呀？我现在这个1.gif和2.gf，还有这个DEMO7，他们是不是都在同一个目录下，哎，同一个文件夹下啊，那现在干嘛呢？我想在页面里引入我这个1.gif，那怎么引入呢？诶，那么还是来整一下，那么什么呢？使用img标签来向网页中引入一个外部图片，那们来说img标签它干嘛呢？也是一个字节数标签，和我们这个BR啊，和我们的HR是一样的。

那我们来写一个，那一说自接入标签，你就直接写上，是不是应该是这么一个东西啊，哎，这么一个东西，那这里边它需要，诶那我要引入外部图片，我要引入哪个外部图片，我是不是得告诉他呀，哎，所以这里边我们还需要什么呀，需要一些属性，什么属性呢？第一个我们叫做一个，哎SRCSRC干嘛呢？诶设置一个外部图片的一个什么呀，路径啊，外部图片的一个路径，也就是说你要引入哪个图片，我直接写一个src干嘛呢？等于是不是等于一个值啊，诶等于啥呢？我要引入1.gif，我就直接写1.gif就OK了啊，我就直接写1.gif就OK了，为什么可以这么写？注意啊，现在你先按照我这个结构写，待会再讲一个路径的事，现在干嘛呢？我1.gif是不是和我这个DEMO07他们是在在同一个文件夹下呀，所以在这儿我就可以直接写什么呀，直接写这个文件名就OK了啊，直接写文件名OK了，好，这是一个S。

OK，还有一个什么呢？还有一个out out表示什么呢？Out也是一个属性，可以干嘛呢？可以用来设置我们这个图片的一个什么呀，描述啊，图片的描述来描述这个图片，来一个out out，这是一个，这是一个啥玩意儿的，这是一个松鼠盆吧，诶，这是一个大松鼠，诶这个是什么呀？松鼠的松鼠，诶这是什么呀，这个out是表示什么呀，对我们这个1.gif这个图片的一个描述，好，那写完这个就意味着我现在干嘛呢？向我这个页面里引入了一个什么呀，1.gif这个图片，我们来看效果啊，这里边。哈，直接一点它走你诶是不是就出来这个图片了，哎，出来这个图片了啊，所以这里边注意我们是用img来引入这个图片的啊，这是一个这个哎动态图啊动态图那引入进来以后，我们发现图片是进来的吧，没问题，但是呢，我那out大松鼠跑哪去了，大松鼠是不是没了呀？诶你不是说用来设置图片的描述吗？描述它怎么都没出现呀？诶那我们说一下叫什么呢？这个我们再严格来讲说什么呢？可以用来设置什么呀，在。

图片不能显示时干嘛呢？哎，对我们这个图片的什么呀描述，也就是说只有什么呀，只有图片没有的时候，他才干嘛呀。它才出来，那什么意思，来我这来一个什么呢？来一个幺幺.gif那我现在有这图片吗？没有没有是不是就出不来啊，出不来我们来看一刷新走，你是不是这是一个大松鼠啊，所以这个字只有什么呀，只有在图片不能显示的时候，它在干嘛呀，他在出来来干嘛呀，来告诉你我这块应该是个什么东西，但是注意啊，不同的浏览器处理方式不同，有的浏览器这个字可能干嘛呀出不来啊，可能出不来，那么说了，那么想想这字它有啥用啊，图片都出不来，你给我来，这是一个大风水，你是不是让我看着干着急是吧？哎，看着干着急，我们来说一下，实际上它的主要作用呢，不是在图片不能显示的时候对图片描述，那它是干嘛呢？诶，我们先改过来，那我们知道我们在百度里有一个什么呀，是不是有一个搜索选项叫图片啊，诶你假如说你你写一个美女，然后一搜那个网页里干嘛呀，是不是所有美女图片都列出来呀，诶你写一个熊猫，你搜是不是所有熊猫这个图片都。

这样，哎，那我们先说那些图片是不是百度自己的呀。不是，都是其他各个网站抓来的，那就问题来了，诶你会发现百度他怎么那么聪明，我这画一个图片，他怎么就知道这个图片是个熊猫呢？它怎么知道呢？它是不是能识别这个图片啊，不是啊，不是，它怎么识别呢？我们说搜索引擎可以通过我们这个out图片out属性干嘛呢来识别，哎不同的什么呀，图片，比如说我这图片是不是大松鼠啊，诶那这个搜引擎一搜我，诶这哥们这里边关键字什么呀，这是一个大松鼠，那当有人搜什么呀，搜松鼠的时候，我这图片干嘛了，是不是可能出来了呀，即使我这是个松鼠，我这写一什么呢？这是一个大美女。

那我们说你搜美女的时候干嘛了，他就出来了，诶百度他才不认识这个图片的，他只干嘛呀，根据你这个out来判断啊，根据这个out来判断，那这里边我们来说如果什么呢？如果不写alt属性则什么呀，则搜索引擎不会对我们这个呀，Img中的什么呀，图片进行什么呀，进行收录啊进行收录什么意思呀，他一检索，如果你这没有out，没有out，他一看一点GIF一点GIF是个啥图片知不知道不知道不知道得了，干脆这片干嘛了，我就不说了啊，我就不说了，所以如果你不希望搜索引擎检索你那图片，你out就干嘛呀，你可以不写，但是一般我们都会嘛呀，都会写，我们希望可以通过搜索引擎检索我们这个图片，进而是不是能看到我们这个网站呀，哎，网站啊，这是我们说的一个out啊s RC out，然后还有一个属性叫什么呢？那现在我们来说src是设置一个外部图然路径，现在我引入1.jf，就写1.jf。

我要想以2.gf，是不是就写2.gf，哎，我这一保存一刷新走你。是不是出来了2GF了，所以你想引用哪个你就写哪个，但是我们发现一个问题，我这图片它是不是太大了呀，那有的时候我是不是不希望这个图片这么大呀，诶那我就希望图修改一下图片的一个大小，那这里边我们还要说两个属性。一个叫什么呢？一个叫做wise，还有一个叫做。

Hep，诶，Hat wise表示什么呀？宽度啊，宽度wise可以干嘛呢？可以用来修改我们这个片的一个什么呀，哎，宽度，而我们这个head可以干嘛呢？诶可以用来修改我们个图片的一个哎，高度啊，边的一个高度，那比如说我觉得这图片干嘛呀，太宽了，我向它窄一点，那怎么办呢？直接来一个属性叫做一个什么呀。Y诶等于一个值，这里边我们直接给它一个大小，比如说我们来一个200，那注意了，我们这里边它这个单长度都是什么呀？有单位的我们一般都是什么呀？PXPX表示什么呀？像素啊，所以这块注意我们一般使用我们这个PX，哎作为什么呢？作为单位，那像素到底什么意思，我们处理这个单位的时候，我们再去说啊，一般都是使用我们这个PX作为这个单位，那现在表示什么呢？表示我们设这个图片的宽度为多少啊，200个像素啊，200个像素，包括昨天我们来看一刷新走你哎是不是小了呀？哎小了我再改一个，我改一什么要改一个。

100保臀一刷新走，你是不是更小了呀，但你发现一个问题，我Y是不是设置的是宽度啊，宽度的确小了，但是干嘛呀，高度是不是也小了呀，哎，高度也小了，但是注意它是不是随便小了呀，我开始这么大，它后来是不是变成这么小了呀，宽高的比例是不是没有变呀，哎，没有变啊，所以这里边我们来说一下，当宽度和我们这个高度。两个属性，如果只设置一个，另一个干嘛呀，另一个也会什么呀，同时干呀，哎等。

哎，比例调整什么呀，调整大小，哎，等比例调整大小，那为什么要这么做呀？你们想想，如果这图片的比例变了，图片是不是会很难看呀？哎，比如说现在我这个宽度是100高的，我改一个高度，我改什么的，改一个500，哎，那你就可以想而可想而知，我这图片改完了以后得多漂亮来呀呵，哎，你这块注意啊，看着这引号，咱们这个开发的过程中，我们的符号都是什么呀，英文符号，你像我这是不是写了一个中文的呀，写中文的不认识啊，一定注意是一个英文的啊，英文的符号保存这样就行了啊，是英文的符号啊好，Char PX保存，我们再来看，一刷新走你诶是不是就也挺好看是吧？哎，挺好看啊，但是你要注意，如果你只指定一个，如果你只指定宽，我们的高度也会随着宽度的改变干嘛呀而改变，如果你只指定高度，宽度也会随着高度的改变干嘛呀而改变，但是注意它会保持它们两个之间的一个什么呀，比例啊比例，但是如果你两个。

同时指令干嘛了，是不是就按照你指定来啊，哎，指定的来啊，我们说如果什么呢？如果两个值同时指定，则什么呢？则按照你诶指定的这个值来设置，指定多少就是多少，但是这里边我们来说一下啊，一般开发中除了什么呢？除了我们这种什么呀，叫做这种自适应的页面，诶不建议设置我们这个wise和这个hi啊，不建议设这个属性，为什么呀，那你像我们这种，我设置完wise还有hi，我这图片是不是比例都变了呀，比例变了是不是。就不好看了呀，那还有一个问题，那假如说我们这个图片它本身是这么大的，但是我需要不要这么大，我只需要干嘛呀，我只需要这么小，那这时候我就需要什么呀，我是不是需要调整它这个宽高啊，但是注意有一个问题，那么说大图片占的空间大还是小图片占的空间大？

是不大图片占的空间大呀，它的这个占的这个，我们这个内存是不是会更大一点啊，好，那你既然只想显这么大，而你干嘛呢，你还效果纸上的显示这么小，也就是说你显示的是一个小图片，但是空间是不是占的是一个大图片的一个空间呀，所以这一块对于我们来说是划不来的，所以干嘛呢？如果你需要这么小一个图片，我们尽量干嘛呀，不要去修改它的宽高，而是干嘛的让你们公司的美工把图片就直接给你改成这么大，这样既节省空间，我们写起来是不是又又方便呀？哎，直接设置就行了啊，直接设置就行了，那同学说了，还有一种情况，我这图片干嘛呀，比较小，我干嘛呢，我想放大一点行不行啊，也也行，但是会有一个问题，我这小图片这像素是不是低呀，你放大以后会导致什么呀，哎，这人这可能跟打了马赛克一样，是吧呀，诶小格格小格非常的什么呀，不清楚啊，不清楚，所以这里边如果你不是做这种自适应的，我们就干嘛呀，你需要多大图片就让美工给你裁。

哎，多大，如果没有美工，你自己裁啊，自己抬啊，好，这个是我们说这个图片一共是这么属性，这么几个属性，Sc out we，还有一个he，那你们写的时候呢，先按照我这种格式去写，把这个文件都放到我们这个同一个文件下，那待会我们再去说这个路径的事儿啊，再说这个路径的事儿，好，那这里边我们先来停一下。