Web前端网页制作初级教程 13.超链接标签及多媒体标签 学习猿地原创

好，那我们继续来上课，那么这节课呢，我们再来看一下我们的这个超链接标签啊，那么超链接标签呢，就一个A标签啊，A标签代表着我们的超链接，那咱们来看一下我们怎么来用它啊，新建一个文件在这里面叫H加207啊超链接。首先。超。链接。标签啊好了，咱们这里边我们主要看的就是一个超链接。A对吧？然后怎么写呢？那就是监管号A，然后结束的A啊，在这里边写的内容，比如说我们写去融职教育官网对吧？那么现在好了，我们来访问一下页面，看看在这里面是不是有这个内容啊，那么我点击能跳转吗？不能对吧，因为它需要干嘛呀，我们光是设置了这个A标签还不够啊，我还需要去配合一些属性，比如说当我点击让他跳转对吧，那跳转你就要给他地址，你要告诉他跳到哪里，所以这里面我需要配合一个属性啊，告诉他跳转到地址叫HTPS斜线3w.e Du w.cn对吧，告诉他到这个地址来，那现在我们再来看，再来刷新。

你看去融资教育官网对吧，这个时候是不是我鼠标放上来，注意我鼠标放上来的时候，你看我浏览器的这个左下角是不是就有这个地址了，对不对，那好，那这个时候当我点击你看是不是跳到这个e work的C了，哎，那OK回过来啊。好了，那么能去跳转了。这是不是实现了超链接的效果了，对不对，那么都能去跳转，你看好了，刚才我们去跳转的时候。是不是在我当前页面就进行跳转了，那我能不能去指定其他方式，比如说我新建一个窗口去打开这个地址呢？可不可以呢？也是可以的，那这里面一样，我需要给他去多加一个属性，叫做什么？它给的属性啊，表示什么呢？表示你打开方式啊，这里边有一个杠flag表示什么意思啊，新窗口打开也有一个杠self表示什么？当前窗口默认就是当前窗口，所以我改成blank block啊好了，那现在我们来看。

再来刷新，刷新完以后我点击去官网，你看这个时候是不是在新窗口打开了，对吧？我当前的页面在这呢，你看再点一个去官网，你看是不是又打开一个看到了吗？诶，这就是咱们的这个超链接啊，那么超链接这里边我给的这个地址，注意了，这个地址我给的是什么，是不是一个绝对路径，对吧？他加上什么，加上的协议吧，哎，加上协议，那问题来了，如果说我不给这种地址啊，我给一个什么呢。我给一个相对路径呢，相对。煮酒。相对路径啊，什么叫相对路径，什么叫绝对路径？刚才咱们说了，这里边给的是绝对路径，对不对？哎，那也就是说这里边我们会遇到两个新的概念词，一个叫做相对径，一个叫做绝对。

路径对吧，那所谓的绝对路径就是什么呀，从根。开始查找啊，查找什么叫绝对入境，就好比我们寄的快递，对吧，比如说北京市。昌平区回龙对如西。对吧，比如说这个玉荣教育园区。嗯，那你看好了。北京市是不是从根开始查找了，北京市的哪个区对吧，哪个区的哪个地方，哪个地方的哪一块是不是都有了，哎，就说这个。端口八零是吧，八零端口，然后姓名谁谁谁，是不是从跟克尔是寄快递这种方式，我们是不是就知道这么去写，只有这么去写我们是才能收到快递，对吧？所以这里边我也是一样，先是什么协议对吧？HTTPS它的协议，然后冒号3w.ep.c这个域名是不是会绑定到一个地址啊哎，访问这个地址是不是访问他的3W目录了，对不对，哎，也就是到这个目录下，那这个目录下显示的是不就是咱们网站的首页了。

对不对，哎，这就是咱们的绝对路径啊，那如果说我对于相对系统的绝对路径，就当前系统相对于当前系统的绝对路径呢，比如说咱们看啊这里边嗯，不用这个，呃，C盘。8643W。Class，呃，不对，我们是在on line这里边啊，0101这里边，LESSON2LESSON2这里边，比如说啊，我想跳转到哪了，跳转到语义化标签或者文本标签吧，跳转到零四这里边，零四这里边，那你看如果要相对系统的绝，就是要是跟针对于系统的绝对率，那是不是C盘万本643W这这些东西。对吧，那好，那他是本地的文件，注意啊，这是本地的文件，本地的文件我就需要干嘛给他本地的协议，那比如说这里面我们再来演示一下啊，这叫做。叫做相对于系统绝对路径查找。是吧，或者是跳转文件地址。

对吧，那怎么给一样还是A标签结束A标签我要干嘛呀用。绝对。路径跳转到哪里，跳转到这个。零四文本。及。文本。格式标签。文本格式标签对吧，那一样，这里边给他h ref属性h ref，然后呢，在这里边什么呀。我要是访问的是本地文件协议对吧？本地文件我们就使用fair协议，它是三个旗限，然后呢，在C盘有一个什么呀，有一个wap目录ONE64对吧，在这里边有个3W 3W下边有个online online下边有一个0101下边有一个lesson Les。On lesson02 lesson02下边有一个叫0404什么呀，零四这个文本。及。文本。

格式标签啊，第二赫特莫勒，咱们来看一下我的地址给的对不对啊，来一样在这里边找到这个路径。鼠标放了一点，你看是不是C盘。哎，你看啊，C盘号下面有一个什么，有一个版本64对吧，在下面有3W，在下面online online下面的零一零一下面的LESSON02 lesson02里面有一个零四文本及文本格式的安全码是不是这样的，哎，那这是不是就是通过系统的绝对路径啊，那现在我们来访问看一下是不是这样的啊，在这里边一样刷新。告诉我用绝对路径去查找对吧，那么同样啊，我不在当前页面打开，我也给他指定一个，他给的打开方式叫做杠blank，让他在新窗口去打开，然后我们再来刷新，刷新完之后点击跳转。投篮投篮，跳篮跳篮，呃。没有跳是吧，哎，没有跳那就证明什么，我的这个地址给的不对，对吧，那菲尔冒号。

C盘。C盘冒号对呀，直接给C吗？来刷新跳一下。来吧，咱们自己把这路径复制过来吧，别难为自己了，把它CTRLC拿到我们这里边来。C、冒号。应该我不会写错呀。是不是没有跳转。哎，跳到零四下来，我把这个地址拿过来啊。到这，到这。好了。你看这没有错了，对吧，这是我给的一个绝对路径吧，来一样啊，再来刷新我鼠标放上去，放上去以后你看他是不是自己，我这回没加西菲尔协议，他自己给我加了吧，菲尔协议C盘到这个路径下对不对，那咱们来看可不可以啊。来，周丽。还没我交。呃。Y。File fair file，我自己再加一个啊，三个斜线C盘43W online ref ref，我没有打错。

Ref对吧，然后后面他给的TR-b bla blank，用绝对路径跳转没错呀，来刷新一下。走，你。哦。我知道了，咱们来看啊，我这个地址注意，因为我是在当前，当前在这个编辑器里面，编辑器是用了一个伪服务给我来访问的，对吧，所以我不能去直接给这个本地协议啊，我除非什么样的给本地协议咱们来看啊，在这里边。LET02，这里面是不是咱当前是这个文件吧，我直接双击打开。看到了吗？这个时候你看啊，我当前访问这个文件是不是本地文件协议对吧？这个时候再来周尼跳出来，诶，你看到了，无法理解这个地址啊，我们没加什么，没加协议，File fair斜限线走，你看是不是可以访问到对吧？那我们来改一下这个代码啊，这里边我们需要加什么file fair斜斜限对吧？三个斜线咱们来看啊，这里边我不能通过它打开了，对吧？如果我通过当前编辑器打开的，因为它做了一个什么伪服务，对吧？前面依然是属于logos的，你看这里面墙是依然属于logo host属于logo，是不是就是本地的尾尾这个环境了，哎，然后走这个端口，所以我不能用它啊，一会儿我们再来去解决，用它看也能访问的啊，咱们先来看，在这里面一样超链接，这里面我再来刷新啊，鼠标放上去，放上去以后咱们来看这个地址啊。

来鼠标放上去啊，放上去以后这边这个地址，这边这地址是对的吧，你看菲尔C盘这个下面这个下面这个东西对吧？那OK，这个时候我们再来点击访问，诶你看是不是就能跳转到了这个时候，我是不是有什么用的，是我绝对路径啊，哎，相对这个文件，相对于系统的绝对路径去找的对吧？那么刚才我们在这里边，在这个谷谷歌浏览器里边一直点击都不好使，为什么呢？因为他说了这里边是不是用了一个伪协议对吧？那我要访问的话，我觉应该是从这个协议开始啊。来一样在这里边。

我写个注释啊。由于PP storm编辑器s to to STEM。编辑器。啊，在访问页面时。会制作一个。伪环境。为环境。来访问啊，为环境来访问对吧，所以在给绝对地址时啊，需要按照什么呀，PPSTEM的要求。地址吧，STEM的地址，STEM地址对吧，他的地址是什么呀？他的地址在我这里边对吧，我这里边的这个地址，刚才我给他已经给他复制出来，是不是这段内容啊。诶张用来log host对吧，所以我这里边要访问的话，那应该是A标签这里面一样啊叫做。PPSTEM方式。访问什么呀，这个。

零四。及文本格式标签。好了，那我就要把这个地址过来，过来以后咱们看他管理的是哪，他直接管理到这个目录，这个目录下面有LESSON02对吧，所以我直接把LESSON02这往后的东西拿过来是不是就可以了，所以在这后面直接写。这段内容。这段内容。好了，分之C。翻过来，那这个时候我们看我们可不可以来访问了啊，再来刷新，刷新完以后来PBSTEM方式来访问，点击你看是不是访到零四。对不对，但是呢，它是在我当前页面做跳转的，我需要干嘛，我需要使用他给的T，他给的方式杠block进行新窗口打开，然后返回来再来刷新一下，刷新完之后点它，你看新窗口进行跳转，是不是打开了零四。对吧？哎，这都是用什么？用我们绝对路径对吧？你看我访问本地协议的，我用fair对吧？啊，访问这个远程服务的我用HTPS对吧？这个是用伪环境的，那一个伪环境叫什么，他给的这个地址是什么，我们自己也得加什么呀，对不对？哎，那一样我能用绝对路径，能不能用相对路径呢？所谓的相对路径什么？就是相对于自己当前的位置，相对于自己当前的位置啊，那一样我们通过这个目录来看啊，会好理解一些，你看当前我的文件是不是在这儿对吧？那比如说我要想从这儿去这个零四这里边啊，从当前零七这个去零四，他俩是不是在同一级啊，对不对？哎，同级的话我可以怎么写呢？

来这里边啊，教我做。相对路径跳转。来一个A标签，然后一样去。零四。文本及文本格式标签。隔线啊，咱们找刚才说了，他俩在同一级，同一级点杠代表什么呢？代表的是当前目录对吧，你看我零七，我当前是不是这个目录，这个目录就当前是这个文件啊，这个文件的同级是不是有零四对吧？他们两个是不是都在这个LESSON02这个目录中啊，对吧？所以当前目录里边有一个什么呢？有一个零四。

这个文件啊，直接点杠，那么我也可以把点杠省略掉啊，那咱们先不管它，我先这么写，然后跳转方式一样，我再指定一下啊t target的方式变成杠block好了，那这个时候我们再来看刷新。看好了啊，在这儿呢，对吧，在这块我给了一个HRHR，让它拉一个水平线对吧，然后这这边在那刷新，刷新以后你看去零四这个地方来走，你你看是不是也打开了对吧？当我鼠标放上来以后啊，鼠标放上来以后你看。是不是给我访问的这个地址。对不对，哎，访问这个例子是不是就是正确的，那我一点击是不是就能访问了，没错吧，哎，那么他说了当前路径啊，我能这么写，我还可以怎么写呢。我还可以不要点杠对吧，如果不加点杠，这也代表的是当前的路径，那这个时候再来看刷新还是一样，这个点击去，你看是不是也到达了。

对不对，哎，所以这里边对于相对路径而言，大家要记住这里边有一个东西什么呢？叫做点杠，代表什么代表。当前。代表当前目录，那好了，那比如说我不想访问当前目录了，咱们来看啊，在这里边，当前目录在这儿，对吧，我想访问。上一集。来自。里边是不是也有个HT文件对吧？我想访问这个HT怎么办啊，叫对的HT，那你看就得以它，咱说了相对路径是不是以它为这个为它以他为当前目录去找啊对不对？哎，为当前的这个就是以他为自身去找，那么你看他的这个路径下边应该什么？应该是上一级，有一个LESSON01对吧，LESSON01里面有个DEMO对不对？那么在这里边用什么来表示上一级呢？用点点杠啊，它代表什么？代表上一级。上一级对吧，那么你看这里边也一样，CTRLCCTRLV。

使用上一级的方式查找某个文件，对吧，那这里边咱们来看我点点杠是不是上一级，上一级下边是不是有个Le。So lesson01 lesson01，下边有个什么，是不是有一个叫做DEMO的这个文件，我要访问的是不是这个对吧，那这个时候我们也一样给它改一下内容啊，这个叫什么呀？叫做。去去哪啊，去LESSON01里边访问de莫赫德莫勒对吧，那这个时候来。再来刷新一下，看好了，这里边有这个文件了，对吧？那点击去，你看告诉什么呀，告诉我地址有错了对吧？LESSON01的DEMO点赫特莫勒是不是没有啊，你看404是不是告诉我没找到对吧？依然是走的，走到哪，走到PBSTEM的环境啊，依然是比较PB环境，为什么？因为当前的这个地址它只支持我访问零二里的所有内容。

你看我访问零二里，这没问题。对吧，但但是我访问零一，零一里的DEMO就不行，但零一里面有没有DEMO呢？它是有的，对不对，因为什么，因为这个地址变了，零一的地址就不是这个地址了啊，所以我在这里边用，因为它是在这个PVSTEM里面啊，那我不用PV store打开是没问题的，我这么写路径是没有问题的啊，大家注意这么写路径是没有问题的，只是PPSTEM里边我们用的是伪服务，等到后期我们用真正服务的时候，就不会出现这个问题了啊，咱们来看在这里边。不是这个页面啊，是LESSON01对吧。浏览里面我这么去访问啊，我直接双击打开了，因为它是浏览器，它本来就是浏览器，可以直接解析执行的，对吧，所以我直接双击打开，双击打开以后，这里面是不是有去LICENSE01访问这个DEMO，那OK。我来点击，你看这回走了，是不是来自010的DEMO？对不对？哎，这是不是可以注意跳转了，哎，这就是咱们使用什么使用相对路径去查找啊，点点杠代表什么，代表上一级点杠代表什么？代表的是当前目录啊，所以这块内容大家一定要注意啊，一定要注意好了，这就是咱们的相对路径跟绝对路径，相对路径就相对于自己的当前位置，对吧？点杠代表当前目录，点点杠代表上级目录，而绝对路径呢，绝对目的就是从根开始查找，那么大家记住，从开始上一定要加上这个协议，如果你不加协议，它会把它当什么呢？当成相对路径来看，比如说你看这里边啊一样，我给你来一个叫什么去融资。

我去百度吧。去百度对吧，然后呢，我直接写3W的百度点com。百度。对吧，但是这只是一个域名，没错吧，哎，它并不是一个完整的地址，那现在你来看啊，在这里边一样，我再来刷新一下，应该去百度，当我把鼠标放上去以后，你看它的地址写的是什么。看这地址是什么，是不是依然是走到fair下面，C盘下面万六十四ONLINE01LESS01，然后往后什么呀，3W100度他会认为什么，认为这是当前目录下边的这个地址对不对，所以我们要想访问这种远程的必须是要加什么，加上他的协议HTTP。

加错地方了，哎，对了，好了。HTTP。冒号旗舰旗舰对吧，必须加上这个东西，当我加完以后再来刷新，刷新完之后鼠标放上来，放上来以后你看这个时候他访问的是不是才是百度点com。看到了吧，哎，这就是咱们的这个相对路径和绝对路径，以及我们使用A标签做什么做跳转啊好，那咱们来看一下在这里边啊，我们需要配合的属有这两个，一个half是什么呀，用于定义。跳转页面的地址还有一个什么。他给的是定义打开的方式对吧？常用的值呢，就是杠black blank啊这里面记了啊在这呢啊常用的值对吧？一个杠self是默认的，就是代表在当前窗口打开，一个是杠block在新窗口打开啊这个是咱们的这个A标签啊好了，那A标签看完我们再来看一下我们的这个多媒体标签，也就是我们的这个。图像标签啊好了，那在这里边我们来去定义一个图像，这里面新建一个PHP的文件，然后呢，我们叫什么呢，叫做零八。

图像标签好了。嗯，检出文件了。好，赶回先忙的啊。那08H打开啊，打开以后这个不要了，对吧？然后我们需要的是布局一下那叹号dope，然后合特莫勒，然后这里边也HMR开始也结束了，MR结束里面包含了一个hier对吧，Hier里面有标题叫什么呢？图像标签，然后呢，另外我们需要给它设置一个字符集，那给它叉S等于。UT。F。杠八啊，U杠八。好了，然后再往后呢，还有它的包标签，那在这里边我们要主要学习的是什么去定义图像对吧，叫做定义一个图像啊，那好了，定义图像我们就直接定义了啊，在这里边我就直接是使用以魅力标签，它是一个单标签，所以直接去写就可以了，然后需要干嘛呢？需要告诉图像的地址，Src啊src告诉图像地址啊，那么咱们来看我们刚讲完路径对吧，那么一样，我们再去图片地址的时候，也需要用什么，用我们的相对路径相对。

路径或者是绝对路径啊，那咱先用相对路径来写一下，那相对路径是不是相对于当前自己，当前自己的同级是不是有个叫以image积的目录，以image积这个目录里边是不是有个a.GPG啊，诶，我就仿问这张图片，那就是当前目录下边，当前目录下边有个以image，以image里边有个a.GPG对吧？哎，但这是大家在刚开始学学习的时候都容易蒙的，第一点就是路径这一块啊，所以大家一定要记住啊，我使用相对路径就是相对于当前自己这个文件的位置去找，对吧？我当前零八在哪？当前零八是不是在这个LESSON02里边对吧？所以跟他同级的有个一倍，所以就是当前目录一倍下面的a.GPG那好了，找到以后现在我们再来访问。

来图片是不是就有了，哎，那么图片有了咱们再来看啊，这是我使用相对路径来查找的，那我用绝对路径能不能查找的，这里面一样叫做绝对路径查找。哦，那绝对路径的话，那是不是就是。面积src对吧，那绝对路径咱们就开始从根开始了吧，那咱们来看它的地址，咱再给它复制过来对吧，这是它的地址，然后诶。到来零二啊。这对吧，零二下面有个以面积，面积下面有个a.GPG。好，那这个时候我们再来看。图片是不是又来了，对吧，那我一样，我能不能用本地这个绝对路径呢？本地的绝对路径呢。本地协议的绝对。

路径方式查找对吧，那这个时候来一。Src对吧，后面的属先我们先不管它啊，然后这里边一样绝对路径的话，本地的是菲尔斜斜线斜线C盘ONE64下边的Le不对，是on。Online外面64下面不是有个3W3下边有online啊online online下边有什么？有这个0101下面有lesson Le lesson02下边有image image里面的a.G。A，来记笔记好了，这个组我们再来看，再来走你。诶，你看这个是不是下载不到，看到了吗？这图片是不是碎了。诶诶好了，这图片是不是碎了，也就代表什么，这个路径不对对不对，但实际路径对不对，路径是没有问题的啊，之前我们就说了，你看这个路径啊，在这里呢，你看C盘万六十四3w online01less021倍几对吧，那这里边我是不是这么给的，你看C盘万六十四3w online01。LE021IMAGE没错吧，哎，所以这种方式我们需要怎么办？因为当前我们在这个服务器里边，对吧，在这个伪服务器里边啊，所以我们需要自己去写去或者自己去访问去，在这里边零八我直接双击打开啊，双击打开以后。

刷新。看他访问的是哪个啊，来审核元素。来你看啊，绝对路径那个看到了吗？这块实际上有一个，这还有一个对吧，但这个是谁的，是不是刚才那个地址的，那个地址是不是就不对了，而这个呢，看。这是不是我给的本地协议费尔杠C盘杠八六十四是不是可以了，对吧？哎，也就是说我这种方式的话啊，我这种方式的话就不能用什么，就不能用这个。啊，就不能用什么用服务器这个这个不是用服务器，用编辑器里的环境打开了，如果用编辑器里的环境打开，它是不支持fair这种方式，我只能用这种方式，这是不是也是绝对路径啊，对不对，哎，那OK，这就是咱们使用路径去找图片啊，那么一样，不管怎么样，你看比如说我们用这种方式对吧，用这个服务器的环境下啊，在这里边直接用它了啊。

来我的第三张图片是不是不好使啊，第三张图片不好使，我可以怎么办呢？我可以在这里面加一个属性，加一个什么属性，加一个out的属性，对吧，就说别看了，别看了。别看了，需要什么呀，需要。在本地直接访问才能看到，好了，那现在我们再来看，在这里边刷新，刷新以后你看告诉什么呀，别看了，需要在本地直接访问才能看到，看到了吧，这段内容是不是就有了。对不对，哎，那一样其他的我能不能给呢？来这里面我也给了。叫什么呢？别看了，需要什么呀，需要在。PPS to编辑。器中访问才能看到，好了，现在你再看刷新能看到这句话吗？说没有，哎，那没有标记你看到了，如果这个图片名我改一下，我就aa.gpg注意我有这个图片吗？没有，那没有这个图片是不是加载败啊，再来刷新加载失败，加载失败你看告诉你别看了，需要干嘛？在P评STEM编辑器中访问才能看到，看到了吗？也就是说这个out的属性干嘛呢？是不是就是当图片加载失败时用于显示替换文字的信息啊？

对不对，哎，这就是什么，这就是咱们的这个以背标签的这两个属性啊，一个是src，一个是那么一样，这里边我光用这个属性，这两个我就不看了，看这个啊，比如说它的宽高啊，我觉得它太大了，我能不能给它设置呢？也可以比如说这里边WTH，我说你宽度变成100啊，偏的高偏度，呃，宽度变成100，高度变成多少，变成50。50好了，那现在你再来看，我再来刷新，诶图片是不是变小了，但是注意了，如果宽高我同时给他设置了这张图片是不是被拉伸了对不对？你看宽度被拉伸了，而高度变窄了，对不对？哎，也就是说我们在设置图片宽高的时候，尽量只设置一个值，明白吧，设置一个值它会干嘛呢？它会等比例缩放，你看我把这个高度去掉。

再来刷新。你看这样是不是等比例说话了？对不对，哎，所以大家注意啊，我们在设置的时候不要两个值同时出现，如果两个值同时出现的话，它会干嘛呀，它会强制帮我们进行拉伸的，你看这样的话，这个图片是不是很难看了，哎，所以这块大家一定要注意啊，好，那这里边我给大家补一下这几个属性啊，一个src属性，这是我们常用的干嘛呀，用于设置。图片。加载的地址。对吧，然后还有呢，Alt属性它是干嘛呢，用于。设置。当图片加载失败时啊，用于替换的文字信息啊，另外我们还可以设置一个title，所有标签啊，所有标签都可以。设置title属性啊代表什么呢？标题对吧，什么效果呢，就是当鼠标移动时。

呃，移动。一或者是当鼠标悬停到内容时。啊显示对吧，咱们来看是不是这样的啊，在这里边，比如说这张图片啊，我给他一个什么呢？给他一个T。来，我是帅哥。好了，框高留着吧，来我们再来访问啊刷新刷新完以后你看没有效果对吧，当我鼠标悬停上来，当悬停上来以后，你看下面是不是出现内容我是帅哥了对吧？啊，而且所有标签都可以给他加这个属性啊，所有标签就我们今天所学的所有标签都能去加这个配头属性啊好了，然后再往下还有什么呢？还有宽度width宽度属性。设置图片宽度啊，还有阶梯高度。设置图片的高度啊，这叫什么呢？这就是咱们的这个。

以魅力标签啊，那么这里边要注意的什么呀，注意的是。在设置图片。大小时啊。宽高。尽量采用一个对吧，哎，不要同时同。十。设置宽度或者高度，除非你知道它的比例缩放值啊，除非知道等比例缩放值才可以。缩放值啊，什么意思？就好比说比现在是一个500乘以800的图片，当你把这个宽度缩到100的时候，你要知道另外的高度它应该是多少，那么除非你知道这样的值，你宽高一起设置，否则尽量设置一个啊，不要同时设置宽度或者高度啊，除非知道等比例缩放值对吧，否则。同时设置。

会什么呀，会拉伸图片。也就是说让图片干嘛进行变形啊，这个是咱们的多媒体标签啊，好了，那多媒体标签里面还有两个，一个叫做map，一个叫AA，对吧，它主要干嘛呢？是用来用于定义图像映射。图像映色。图像映射啊定义图像映射，什么叫图像映射呢？就是指。值。带有可点击区域的图像。图像啊，这个是。区域的形状。设置区域的信息啊，这个叫做。

设置区域的信息，那么哪些信息呢？比如说区域的大小啊，区域的形状啊，还有什么呀，点击跳转的地址等。那么这两个东西作为了解就行了啊，这两个东西作为了解就行了，那么我们要想说了做什么呀？做这个带有可点击区域的图像对吗？那现在我的图像带有可点击区域吗？就是我点击能跳转吗？应该还不行。点击跳展不了对吧，那咱们来看啊，这里边我就直接去做一个了，我们在这里面我一样新建一个页面了啊，在这块我们新建一个H文件。叫做。零九图像。好。那我们以面积标签开始来连接当前目录，以M积下边有一个a.GBG，对吧？那OK，那现在我们来先访问一下啊。

嗯，这里边打开它。好了，比如说啊，我想干嘛呢？我想只点击嘴这块让它进行跳转啊转点击嘴这个区域让它进行跳转，那现在行吗？不行，我点哪都跳转不了，对吧，那我想让跳转，我可不可以这样呢？我在A标签的里边去包含了它。诶这样你看这个时候他在不在可点击区域了，来鼠标方刷新鼠标方来是变成小手了，变成小手是不是就能点击了。对不对，但是呢，这会儿不行啊，为什么不行啊，因为我没给他地址啊，对吧，来给一个HTTP极限极限3W点百度点。com。对吧，然后呢，再给他设置什么，他给的属性叫杠block，让他在新窗口去打开啊来刷新，比如说我点点这块能不能跳出。是不是有跳转是我的要求吗？不是吧，我的要求只要求点嘴这一块才能跳转，对不对，那这个时候就需要用到什么，用到我们的图像应色。不要一走。当然这个东西我说了注意了解就可以了啊，因为很少用，基本上不用啊，来来个A标签，不是我不用A标签了啊，来个一面积标签，还是包含一面积里面的A加DBG对吧？我接下来要做图像映射了，那要用图像映射，这里边我需要去定义啊，定义什么呢？定义这个map标签。

你看一定map标签，他让我起个名字，是不是自带一个内部属性好，那比如说叫做my image吧，我瞎给的对吧，你随便起名啊，你叫不叫my image，你叫ABC都行，对不对，哎，我起个关联一点啊，有点有点这个那什么呢，我叫麦。一倍对吧，然后接下来呢，使用a rea标签，这里边你看我一使用快捷键弹出的时候，它是不是自带给我带的这么一些属性啊，这什么呀，表示形状，这是呢，它的坐标值，这个呢是他点击跳转的地址，这个呢是当加载失败用来显示替换的文字信息对吧？那这里边已经是在一个整图当中了，这个属性就很少用了，所以一般它只用这三个属性，那么形状它都有哪些形状recct。

矩形对吧？还有什么呢？C是什么呀？这个圆啊，椭圆或者是PLY是什么呀？多边形以及default，这叫默认它支持这四个值啊，支持这四个值，那么咱们就来看一下，我在这里边给大家演示一下，比如说我们以矩形为例吧，REC，矩形对吧？那矩形我们要怎么给坐标啊？那我们来看一下啊，在这里边我们得先打开这张图片，以面这里面来右键，我用画图方式打开啊。画图咱们来看啊，我要想找这个嘴的位置对吧，那当我鼠标。这样吧，我们先给他画一个来，比如咱只点击这块对不对，这是不是就是一个矩形啊，那当我鼠标放到这块左上角的时候，你看底下啊，我把鼠标放到这块的时候，你们要给我看的是什么呢？你们要给我看这块的坐标，这块是像素看到了吗？这是个是水平，这是不是垂直，哎，那OK，来鼠标放上去，那像素的话八个8227对吧？那OK，这里边我们给的第一个坐标是不是88逗号227对吧？哎，这是开始的点，那矩形我还需要干嘛？给它结束的点，只要给个开支点，给结束点，它会自动连线成矩形来结束点在这儿啊叫148248。

148逗号248好了，那跳转到哪一块呢？比如说跳转HTTP冒号，先写3W点准你点com好了，那现在我们来看可不可以啊，来刷新，刷新完以后这张图不是这张图来是对吧？来点别的都点不了，那放嘴嘴对对对对，诶诶诶诶好使吗？是不是也不好使，为什么不好使，大家看好了啊，我确实是做了这么一个区域对不对，但是他们两个有关系吗。有吗？没有关系吧，你怎么知道这个区域是给他做的呢，对不对？哎，所以他们两个要进行关联，怎么关联呢？使用uz map属性来关联，关联谁呢？关联这个名字叫做my name的这个架构啊好了，那现在我再来看。刷新鼠标放。当我放到嘴里边，你看是不是变成小丑了，看到了吗？

拿出来，你要进来进。这块除进对吧，这边呢。看到了吗？上面诶。是不是只有这个区域是小手点击跳没跳转。是不是在转？对吧，还真有准啊，准你不好使啊，服务器已经关闭了是吧，那OK。啊，同样这里边我可以指定他给的打开方式变成杠block来打开。刷新你看。打开是不是在新窗口来打开了，看到了吧，哎，这就什么，这就是咱们的这个图像映射啊，需要去干嘛，用这几步来去结合啊，所以这里边返回到笔记当中，我给大家再去记一下啊，叫做。优资map对吧，定义客户端五项应色。对吧，然后呢，这里边需要什么呀，需要配合。

那。定义。映色名称。映色。名称对吧，然后在图像的use map。属性进行什么进行关联，怎么关联呀？Use map属性值use map use map选择map对吧？选择map的这个属性值要等于什么呀？等于井号后面跟什么，跟map标签中name。属性的名称是不是才可以啊，对不对，然后AA呢，常用的属性有这么几个啊，有哪些呢？来我们把它。复制一下。CTRLC拿到我们笔记中来。

第一个这叫什么呀，叫做设置。区域的形状对不对，那REC是矩形，Po是多边形。多边形。左边。行。对吧，然后还有什么呢？还有这个def FA default def FA default是默认，默认的，那默认什么，整张图，整张图啊，整张图，然后还有一个什么呢？还有一个cle，这是什么？这是我们的UR。对吧，啊，那要给圆的话，咱们就是给圆心，然后给它半径就可以了，对吧，矩形呢，就是左上角右下角多圆，圆形的那就是你自己点了，你要点成什么边，你就给出哪个边的坐标就可以了啊然后这个cos就是什么，就是它的这个位置。啊，坐标坐标啊，如果是圆的话，需要给什么圆心及。半径。

半径对吧？如果是这个矩形，我们需要给什么？给这个左上角坐标及。右下角。坐标是吧，如果是多边形，那就多边形的话就需要自己定义了，对吧。就是自定义多边形多。边形的下标，那就看你是用什么多边形了，对不对，你比如说你这块要个点，你这块要点这块要点这块要点这块要点这块要点这块再给他这么点，那他最终连线的时候是不是就是一个多边形。对不对，那就是自己来定义这个标标点了，哎，然后再往后他给他是不是一样打开方式。对吧，然后这个呢，就是我们的跳转地址啊，这是咱们客户端的图像映射啊好了，那这节课我们就到这里。