尚硅谷前端基础 (23)

好，我们继续啊，接下来我们来说一下，我们下一个也是用的比较多的一个标签，我们该幺幺叫做一个图片标签。图片标签，嗯，图片标签顾名思义，它就是向我们网页里去引入这个图片的啊，咱们先强调一点对吧，我们的网页呢，它是一个文本文件，我们说文本文件里面它只能包含什么字符啊，呃，这个编点符号啊，这些都是没问题的，但是它里边没有办法放什么音频呀，视频呀等等这些东西，所以这个时候我们如果想往里边去添加图片，注意我不是说把图片直接在这儿写进去，不是直接把图片粘进去，而是什么呢？而是把一张外边的图片啊，外部的图片引入到我们的网页里啊，所以这里边我们说的图片不需要它用来它的作用什么呢？诶图片图片标签用于什么呢？呃，用于引入一个外。

哎哎，用于引入一个外部，用于向我们这个当前页面中，哎，引入一个外部的一个图片啊，就这么一个作用啊，它是用来引入图片的，所以我先找几个图片啊，我们这有一个比较简单的几个啊，我直接复制一下CTRLC，然后呢，我这儿直接选中CTRLV给它粘过来，诶你要注意了，这里边还会有个问题，我们这个图片啊，在我们的这个Vs code里边，它没有办法直接粘我拖过来，我看行不行，是否复制添加。是否将复制的MG或将MG作为文件夹添加到工作区，我们选一个复制文件夹啊，那这个时候就你得给它拖过去啊，所以你你CTRLCCTRLV还粘不过来这文件夹，你只能这样这种方式给它选中，然后给它拖过去啊，拖过去以后这个图片我们就整过来了，里边一共是两个图片，一个是1.gif，还有一个是2.gif，那现在我要引入这两个图片，比如引入1.gif，我要怎么引，那这里边注意我们要使用什么呢？我们使用我们这个IG标签，诶来引入我们这个外部图片，那注意了，G标签它是一个，诶是一个字结束标签，也就是说它只有一个啊，没有结束标签啊，所以在这我们直接写一个MGMG整完了以后，你看这俩东西就直接给你写出来了，一个叫做src，还有一个叫做out out，我们先不管，我们先说src，那我们说了img是用来引入我们这个外部的图片。

这了，那这时候问题就来了，外部图片多了去了，你引入的是哪个图片啊？哎，所以src属性干嘛呢？它指定的是我们这个外部图片的一个路径啊，外部图片路径这里边同样可以使用相对路径，也可以使用绝对路径，那比如说我们说了，刚才我说要引入1.gif，那怎么写呀，看看现在文件是谁？文件是11图片标签，我要引的是img下的1.gif，那现在我们来看MG跟11他们两个什么关系，现在这两个东西是不是都是在intro这个目录下呀？哎，所以我直接来一个点斜盖，我就直接点鞋盖，就表示的是我intro，那我是不是要去intro里边去找IG啊，所以直接写一个MG，再去img下边去找1.gf，你看都有提示啊，然后你来看这图片是不是就已经被我引入成功了啊，引入成功了，所以。

啊，这个路径规则都是一样的啊，路径规则和什么呢？和我们这个超链接是一样的啊，和超链接是一样的，所以啊这块待会儿注意自己去哎自己去试一下啊，自己去试一下好，这个是我们src属性，当然现在我引入的图片是一个这个，诶是一个这个内部图片对吧？1.gif内部图片，那假如说我想引入一个外部图片的，哎，比如说我随便搜一个啊，搜一个这个iro曼啊，我搜一钢铁侠是吧，找一个图片，那现在我在等于是我在我的这个谷歌上我搜索一个图片，我想引入怎么办呢？哎，我想引入别的网站图片，那在这，比如说我引入这个，这是一个大脑袋是吧，这脑袋有点大，我们找一小一点的吧，嗯，这都有点大。

Yeah。这个吧，诶比如说现在想引入这个图片，我怎么引？哎，同样图片它会有一个路径，你直接复制图片地址，直接一复制，然后你这来一个imgmg呢，你把这路径直接给它粘过来，那现在的效果就是你把这个图片就成功的引入到了你的网页里，直接CTRLS保存一下，我们来看效果，这个图片是不是就就过来了啊，所以也可以写这样一个路径啊，直接引入，但是呢，这块你引入的时候你就要注意一下，那这等于其实我们是在到别的网站的图，如果他允许你用，诶你这么用没问题，如果不允许的话，其实这么用不太好，而且对于你的网站来说，假如说他有一天把这图给删了，用起来也很不方便，所以这种方式呢，呃，不特别建议用，但是也可以用跟超链接是一样的，你可以用相对路径引入我们的内部图片，也可以用这种路径来引入一个外部图片啊，外部图片好，我们这图片诶就引完了，对吧，非常的简单啊，非常简单，那这里我们要说一个问题啊，说一个问题，那这个img。

我们这引了两个图片，这引了一个小松鼠是吧？这引了一个钢铁侠，那我们来说这个img标签，我们之前说这个标签都要说什么块元素，说行内元素，那img它算是什么元素呢？诶MG算什么元素呢？诶你看MG它有没有独占一行，没有独占一行对吧？没有独占一行，所以其实从一定意义的，一定意义上讲，你可以说它是一个行内元素啊，可以说它是一个行内元素，但是实际上你如果说的是它是行内元素，它不太准确，有一些特点，它跟行内元素不太一样，所以MG属于什么呢？Img这种元素，它实际上属于一种替换元素啊，替换元素，替换元素它介于我们这个块和什么呢？和我们这个行内元素之间，它既有块元素的特点，也有行内元素的一个特点，那什么叫替换元素啊，你比如说我这写一个。

呃，SPASPA，我写一个ABC，那这个ABC是不是在这直接显出来了，也就是说我这写什么，它这就显示什么，那死SPA就不是一个替换元素，而我们的img，你看我这写这么一堆东西是吧？Src写AMG，那我写这堆东西有没有在页面中显示啊，没有，实际上这个img它是被这个图片所替换了，这个MG又被这个图片所替换了，你就说显示的并不是img本身，而是img所引入的那个外部资源，所以这种东西我们叫做替换元素啊，替换元素啊，它会被一个东西叫替换啊替换掉，所以你记住了，看那替换元素，你要知道替换元素它的特点是什么呢？哎，它是。

跟这个具具有块元素特点，又有行内元素点，但是它俩特点我们还没有展开讲，后边我们还会详细去说啊，咱细说哎它的特点，它它它是在这个块和行内元素之间啊，它这个特点啊，这么写吧，哎块和元素行内元素之间，哎具有什么呢？哎具有两种元素的这个特点啊，你可能会说了，块元素不独占一行行内元素。

诶，不是块元素独占一行，行内元素不独占一行，它怎么可能具备这两种特点呢？注意说的不是这两特点，那个块和行内元素还有其他特点呢，我说是在他俩之间说的是那些特点啊，那些特点我们我们还没讲，所以后边我们还会讲啊，所以基本上你可以现在你可以把它当成是一个行内元素，它不独占一行，你看两张图片是不是并排的，哎，并排的啊好，这是一个src，然后刚才我们还看到还有一个属性叫做一个out属性，Out属性干嘛的，Out属性是对我们这个图片的一个描述啊描述，所以在这儿你像这个这个玩意儿，我直接来一个out，这就是一个松鼠啊松鼠，那下边这个呢，我可以给他写一个out out呢，这个叫做一个钢铁侠，钢铁侠，这就是我们对一个图片的一个描述，但是其实你仔细看你也会发现，我写完这个跟没写呀，它没什么区别，这字能不能看见？

哎，不能看见啊，不能看见这个字啊，我们说了这个描述，哎，默认情况下干嘛呢？不会显示，但是有些浏览器，有些浏览器会在什么呢？会在图片，哎无法加载时显示啊，无法加载时显示，所以什么时候这字会出来，你这图片没显示出来，这个字可能会出来，比如说我这图片要换成一个3.gif，我换成3.gif，很明显这个路径就错了，路径错了，这图片是不是出不来了，哎出不来了，这就会有一个松鼠啊，就告诉你这是一个本来应该放一个松鼠，但是图片没有显出来，但是注意有些浏览器会这么做，但是并不是所有的浏览器都会这么做啊，都会这么做，所以这个时候有可能你那个看不见啊，所以这个字默认情况下是在图片没有办法显示的时候才出来啊，才出来，那我建议你在测的时候你最好用。

那个谷歌官方的浏览在测，因为不非官方的浏览器，它可能有一些窜感，看起来效果不太好啊，关键情况下就是图片不能显示的时候，这个字会出来，那你可能说说了，那这玩意有有有啥用啊，就是为了图片加载不出来的，给我显一个提示文字吗？哎，肯定不是这样，因为这个文字你图片加载不出来，给我们显示一个文字，这个文字实际上对于我们来说没有什么特特别大的意义，难道我看见这个字，我要自己对这个图片进行脑补吗？对吧，没有什么意义，或者说没有任何的意义，所以这个字儿它其实主要作用不是用来这种显示这个字干嘛呢？我们的搜索引擎会主要会根据什么呢？会根据这个out中的这个内容来识别什么呢？来识别图片啊，来识别这个图片，那就是说，诶，你看我在这儿搜索了一个钢铁侠，为什么谷歌就能找到找到这个图片呢？很明显这个图片并不。

这谷歌的图片，这个图片是不是另是不是这么一个网站里边的一个商品的一个图片啊，它并不是一个谷歌图片，那为什么谷歌就能把这个图片给你显示出来呢？为什么？那首先我搜钢铁侠，它出来首先前提是谷歌是不是得知道它是钢铁侠，谷歌搜索引擎能不能知道，当是人工智能这块也可以识别出图片类型，但是现在来讲，搜索引擎应该还没有大规模应用，所以谷歌之所以能识别出它是钢铁侠，肯定在这个图片里边，它设置了奥的属性，我看看有没有啊，看看有没有咱们试试，因为这个图我也是随便搜的，看看有没有。诶，这图搁哪呢？不是这个玩意儿吧，哦，是这个图是吧？是这个图，我们来看一下，我们直接检查选中它，选中它以后img我们来看一下是不是out，就写了一个I呀，哎，就写了一个I，那这时候谷歌一搜索到这儿，一看这个，哦，这是一个ironman，那它就会拿这个关键字和这个图片进行关联，啊，和这个图片进行关联，当你去显这个图片，当你去搜索更芽的时候，这个图片可能会出来，这应该是一个。

这个图片应该是比较小的时候显示的。哎，不是这个图片，但是大概原理都是类似的啊，我看有没有大概原理都是类似的，这块我就。我就不找了啊，原理是类似的，就这么一个东西，就说out是干嘛的，是给这个搜索引擎来识别图片的一个内容的，就像百度，哎，我搜美女就出美女，我搜赵本山就出赵本山，他怎么知道那是美女，他怎么知道那是赵本山的，诶就是通过out属性啊，所以注意，如果不写这个out属性，则我的这个图片它不会被我们这个搜索引擎所搜录啊，所收录，所以这个时候你他干嘛呢？如果你希望你这个图片搜索引擎可以找到你就out，就一定要写，如果你说哎呀，搜索引擎最好别整我这个图片，我这图片比较隐私，Out，不写搜索引擎没有办法识别出这个图片是什么，那就无所谓了啊，那就无谓了，就不会收入啊，这么一个特点，Out，嗯，当然这东西还有一些作用，但是这个东西在我们中国的话，反正我开发的时候是没有遇到这种需求，因为可能在国外可能会用，我估计可能也不多，因为在国外的话，他比较注重这种残疾人的需求，就是。

可能比如说我是一个，你说上网的话，当然我们主要是看嘛，对吧，主要是看这个网页，但是可能在国外他可能会在一些残检，他可能会考虑有一些，诶比如说盲人他想上网怎么办？哎，所以在国外的话，可能会有一种东西叫做屏幕阅读器，屏幕阅读器简单来讲，它的作用就是他去读你这个网页，把那个网页的内容给这个用户读出来，他盲人，但是他耳朵能听见，读出来以后通过这个听的方式去浏览网页是吧？去访问网页是这么一个意思，那这个时候呢，图片，你盲人怎么看图片啊，对吧，看不见图片那怎么办呢？那只能是屏幕阅读器给你读，我也没见过啊，我猜可能是这么读的是吧？诶这里有一个图片，这个图片的内容是一个松鼠，可能这么读，然后这个用户再去，可能就是盲人自己再去想呗，对吧，屏幕阅读器可能也会用，但是这个东西对于我们来说意义不大，我真实开发中很少遇到这种需求，可能我们不太重视这一块儿啊，不太重视这一块，但是它也是一个作用之一。

但是在我们这儿主要作用最最最最最最主要的作用还是给搜索引擎看啊Su这块好，这是一个，然后再回到这儿来，这个是我们说的一个奥的属性，还有两个属性，我们一块说一下，一个叫什么呢？一个叫做west，哎west指定我们图片的一个宽度，还有一个叫做he指定们图片的一个高度，我们拿钢铁侠举例子，现在个钢铁侠挺挺挺挺挺挺窄的，对吧，我写一个Y外，比如说写一个200，然后诶200小了是吧，我写个500，哎，你看是不是把这钢铁侠变宽了，哎变宽了，注意它怎么跑下来了，因为这边容不下它了，它给挤下来了啊给挤下来了，那这个500就表示把它的宽度设置成了一个500，注意单位是像素，单位是像素，像素什么玩意儿，往后我们会说，现在你先。

知道它的单位是像素就完事了，往后我们会讲这个东西啊，那这个时候Y只能是图片的宽度，但是如果你注意的话，其实你会发现我只改了宽度，我只改了宽度改小了，但是你会发现什么呢？这高度是不是会跟着一起变呀？哎，跟着一起变啊，所以注意我们来说一下我们什么呢？哎，如果宽度和这个高度中如果，哎如果指修改了一个，则什么呢？诶另一个会等比例缩放，等比例缩放什么意思？我不是只改了宽度吗？哎，它为了保持这个图片的比例不变，因为比例一变图片难看了，它为了保证图片的比例不变，它会同时把高度等比例缩小或者是放大，所以你看啊，我调整宽度的时候，高度会随着一起变，对吧，随之一变就是为了保持图片比例。但是如果你同时只能宽。

高了，我把宽高都制定成200，那这个时候就变成一个200乘200，变成一个方形了，变成方形以后，我这个整个图片是不是就被被压扁了，所以我们写的时候也不建议你这么写，比例一变图片就不好看了，所以写的时候一般要么指定一个宽，要么指定一个高，很少情况说宽高全都指定，那这里边我们来说一下我们的一个小的建议啊，小的建议啊，我们这个建议或者说是我们这个注意吧，诶注意一般情况下，一般情况下在我们这个PC端，哎不建议什么呢？哎，不建议这个修改我们这个图片的一个大小，为什么呢？我们想一下啊，这图片假如说本来是400乘400的，我要对它进行缩小，缩小成什么呢？200乘200，我是把图片给缩小了，哎，那我问你了，400的图片占内存大，还是200占内存大，很明显是400的占内存大，所以这个时候我既然想用200的，那你最好。

就直接干嘛呢？直接获取一个切一个200乘以200的图，对吧，那这个这样的话它小，而且还不用调，是不是直接满足你的需求了，哎，直接满足需求用起来很很方便，200乘200对吧，很方便，那反过来说，我把一个200乘200的图放大到400乘400，那像这个我放大，我放大到2000，这个时候你会发现这图干嘛了，是不是出现这种凝了，哎，他把这个像素放大了，它会导致我们这个图片失真，体验也也不好，所以呢，你把大图缩小，哎，浪费内存，把小图放大，图片失真，所以都会存在一些问题，所以最好是什么呢？最好就是你要多大，你让你的美工啊，或者你自己啊，切一个多大，需要多大切多大，你就不用调了，方便一些啊，所以一般在PK不建议修改图片大小，也就是说什么呢？诶，你需要哎多大的图片，你就。

干嘛呀，哎就才多大，哎就才多大，最简单的啊，但是呢，哎在我们这个移动端，哎，它经行什么呀，经常需要对我们这个图片进行缩放，呃，移动端这个后边我们还会讲移动端比较特殊，因为有的时候移动端那个像素会比较高一点，如果你图片太小的话，它看起来不清晰啊，不清晰，所以移动端我们经常用大图片，我用一个大图片，然后把这个图片放小，确保图片的一个清晰度，但是也很少把一个小图片放大啊，主要是大图缩小，大图缩小啊，很少有一个小图然后给它放大啊这么一个特点，好，这个是我们说图片比现一个使用啊，这里边有一些特点，还是呃难点的话就是路径的问题，路径也要转清楚，跟我们之前那个相对路径是一样的，然后这几个属性自己理一下，还提到一个概念就是。

替换元素图片是我们说的第一个替换元素，接下来我们还要说很多啊，还要说很多，我们先来停一下。