尚硅谷前端基础 (20)

好，说完了列表，我们的课程继续向上进行，但是我们现在先强调一下啊，现在我们讲的还是偏理论的啊，没有实际的应用，比如说我们在真正写网页的时候，列表是怎么去用的，现在的话暂时还说不了，因为我们还没有讲这个CSS，等我们讲了CSS，了解了布局以后，再往下我们的工作就比较好开展了啊，所以现在诶，基本的基础知识先了解一下啊，了解一下，然后我们下一步往下进行。那这里我们新建一个文件，我们叫做一个零八，我们来说一个也是一个比较重要的东西，叫做一个超链接。嗯，超链接这个东西其实也很简单啊，也很简单，我们直接来改个名，这个东西我们叫做一个超链接，超链接这个东西我们在平时上网的时候也是经常能看见是吧？经常看见比如说诶随便打开一个京东吧，诶你看这里边有这玩意儿是吧？诶，我这一点页面就发生了跳转啊，那这个东西实际上就是一个，诶就是一个超链接啊，这个东西就是超链接啊，也就是说超链接的作用很简单，超链接就是让我们可以从一个界面跳转到另一个页面，诶超链接可以让我们从一个页面诶跳转到我们的哎其他页面，哎跳转到我们其他页面。

嗯，其他页面或者诶是我们当前页面的一个其他的呃位置啊，它还是一个多功能的啊，它可以跳转到一个新的页面，诶也可以跳转到我们当前页面的一个某个指定的位置啊，某个指定位置，至于哪个位置我们先不管它啊，我们先不管它，我们先来说怎么来跳转到其他页面，诶我们说说怎么去创建超链接，诶我们使用什么呢？诶使用我们这个A标签来定义超链接啊，所以这块你要定义超链接的话很简单，在这里面我们先整一个什么呢？还要把这个关掉啊，整一个这个A标签啊A标签那这里我们正好来提一嘴题外话啊，题外话我们之前讲那个HTML叫做超文本标记语言，实际上它这里边的超指的就是什么呢？指的就是超链接啊，指的超链接，也就说超链接实际上它整个是为我们S这门语言它冠名了。

对吧，所以也可想而知，这个东西在我们的诶这个网页里，在我们的HT包里头有多重要啊，很重要的一个东西啊，但是也很简单啊，这里边我们来写一个写一个这来一个这个超链接啊，我们直接保存一下，看这儿是不是就出现这个东西了，诶但是你现在看这玩意儿能不能跳转，诶它是不能跳转的啊，你怎么点它也不会发生跳转啊，怎么点它也不会发生跳转，所以这个时候呢，哎，比如我这复制一下啊，我们复制快捷键ctrl out加诶CTRL，诶trl shift啊，我们ctrl shift加这个，诶这块它。

哦对，Out shift啊是out shift这一块键还记错了，Out shift加方向键的下往下复制，Out shift加方向键的上是往上复制啊，往上复制这是我们说复制啊，然后呢，我们这个我给它复制一下啊，也就是说你摁一下啊，Out加上这个shift啊就可以去复制啊，你点几个就复制几个啊，点几个就复制几个啊，你看我这复制完了是不是就生成了这么多呀？诶生成这么多啊，这个是我们说的一个复制啊，我现在给它删了，你先留一个，哎，那现在我们要看一个什么问题呢。看一个什么问题，这时候我们来看到的话，这个超链接，我们会发现我这两个超链接它是干嘛的，它是。

一个占一行还是诶两个占了一行了，也就是说他有没有说独占一行，哎，没有独占一行，所以通过这儿我们也知道一点我们的什么呢？哎，我们的超链接是什么呢？诶超链接A标签它也是一个这个行内元素啊，超链接也是一个行内元素啊，这1.1定要注意啊，一定要注意，并且超链接这个行内元素比较特殊，诶在我们这个超链接中，诶我们说了一般的话，块元素里边什么都能放，但是行内元素里边就不能去放块元素，你可以放个其他的行内元素，但是不能放块元素，但是在我们这个A标签中啊，A标签中诶可以什么呢？可以嵌套任何的元素，也就是说你甚至你可以干嘛呢？哎，你可以在A里边我直接放一个，这个时候它也是没有问题的啊，也是没有问题的，也可以直接放一个div，它是一点问题都没有的啊。A里边可。

可以放块儿啊，可以放块，也就是说说白了就一句话，A里边呢，什么都能放啊，什么都能放，但是唯独有一个东西不能放，唯独有一个就是什么呢？哎，除了什么呢，可以嵌套除他。自身Y的任何元素啊，任何元素什么意思，A里边什么都能放，但是你不能说我在A里边再放一个A，这样放是不行的，你这么放完了以后，浏览器还是会给你进行纠正啊，所以注意A里边什么都能放，但是就是不能放他自己啊，不能放自己好，这两个链接我们写完了啊，这是一个行内元素，但是你如果想让它换行的话，我可以写一个这个BR就可以直接换行啊，你要想写两个BR也行，你可以直接写一个BR，然后来一个星号一个二，然后table键就可以出现两个换行啊，如果星号三就是三个啊，就是星就表示一个乘法意思啊，出现几次。

那现在我们来看这两个链接啊，无无论是我们上边链接还是下边的链接，实际上它现在都是不能点的啊，都是不能点的，为什么？哎，我们说了超链接是用来从一个页面跳转到其他页面，但是现在问题来了，好，我这写完这超链接了，往哪跳啊。往哪跳啊，哎，现在是不是没有目标的一个位置啊，哎，所以你写完超链接你还得告诉什么，告诉他往哪去跳转啊，往哪去跳转，那怎么告诉呢？诶很明显就是通过我们标签里的属性，所以这里边我们来说一下它的一个属性，最最最最重要的一个属性，叫做一个HRA这个属性，这个属性干嘛呢？它用来指定我们这个跳转的一个目标路径，就是你这个链接往哪跳转，比如说我可以直接写一个ref，等于什么呢？HGDPS冒号斜杠，斜杠3W点百度点com，那这个时候你现在来看这超链接，这是不是就能点了，哎就能点了，能点以后我们来注意，这个时候我一点它会往哪跳，哎，看着效果啊，我们这一点。

是不是直接跳到百度了，诶直接跳到百度了啊，比如说我如果给他直接写一个网址，它就会跳转到我们这个指定的一个网站，同样这个你要想跳的话，你也可以写一个h drive随便写一个啊，HTTPS冒号。斜盖斜盖3W点百度一二三点com，那这个时候我写了这么一个地址，那这个时候你看它是不是也变成了一个链接的状态，哎，他们两个都是一个超链接，但是他们链接的地址不一样，这个链接到的是百度，这个是百度123，所以你看显示上也不一样，这个显示是一个紫颜色，而这个显示是一个蓝颜色，这又是为什么呢？诶很简单，紫颜色的链接默认情况下啊，表示的是我们访问过的链接，因为百度这个地址我是不是访问过呀，而我们蓝颜色这个地址，这个链接表示的是我们这个没访问过的嘞，这个地址百度123号我没有上去过，也没有点过，所以这个时候它是一个蓝色的标志，没访问过，所以注意它是通过这种颜色，诶这个颜色为什么有区别，是因为有些地址我访问过，有些地址我没访问过，好，那这里边我们举的例子是什么呀？这种路径我们可以什么呢？它的值，哎，它的这个值第一种值。

它的这个值以是一个什么呢？诶可以是一个这个外部网站的一个地址啊外部网站的地址，那像这我就写了一个这个百度，那这个时候表示我要跳转到百度，你写京东，你就跳转到京东啊值可以是一个外部网站外部页面一个地址，那现在问题来了，我现在我可能我不想往外部网站跳，我想跳转到什么呢？我想跳转到我的内部页面，诶比如说我这来一个超链接二，超链接二我想干嘛呢？我想跳转到我那个列表这个页面，零七列表这个页面，那这时候怎么办？诶我们也可以什么呢？诶也可以写一个什么呢？写一个内部页面什么呢？页面的一个地址，那这样就是可以跳转到我的内部页面，比如说现在我想跳转到零七列表，那这里边你先注意一个问题，现在我零八超链。

接点HTML和07点列表点HL，它俩是不是在一个目录下，诶都在这个这个目录下，对吧，都在01INTRODUCE这个目录下，所以这里我就可以直接写07.1个列表点H，而且它还有提示直接写，那这个时候看着超链件，我这一点是不是就跳转到07点列表点一毛了，哎，为什么可以这么写，因为现在他们两个是在同一个目录下啊，同一个目录下，换句话说，如果他俩不在同一个目录下，我这么写还行不行了，哎，可能就会有一些小的问题了啊，有小的问题了，但是不用着急，先记住这两个写法，第一种我可以写一个网址，它就可以跳转到我们一个外部的路径，第二种我可以写一个内部的地址，你写的时候也确保啊，你这两个页面在同一个目录下，你这么写就没问题了，待会儿我来解释。

它是什么意思？好，我们来听一下，这是我们一个对超链接的一个介绍，自己先尝试着写一下超链接，先体会一下它的一个作用。