尚硅谷前端基础 (22)

好，关于超链接我们还有一些用法，我们一块儿给他说完。呃，这里边我们还是来接着往下走，我们来新建一个文件，我们直接新建文件，这回该我们的一零了，一零还是说我们这个超链接，超链接还有什么特点呢。那这里边我们来看这么一个东西啊，我们还是拿这个，呃百度做演示吧，啊，我们直接来一个A标签，这是直接HTTPS冒号斜盖斜盖，哎，我不写百度啊，我简单点，我们直接跳转到07.1个列表点那头啊这个是我们一个超链接保存一下，然后我们重新给它打开一下这个关掉，这个时候一点它的话就可以给我跳转到我们这个零七列表点毛很典型的一个功能，也很简单一个功能，但是有些时候呢，其实我们来看一下啊，有些时候我们不希望这种效果，我们希望什么效果呢？诶，我们希望的是现在我这个超链接打开的时候，我一打开直接把我们当前页面就给刷新了，对吧，它是在我们当前页面去打开这个超链接的啊，这是我们说的一个，呃，现在的一个效果，那有些时候我们希望什么呢？我希望我一点这个超链接当前页面不动。

他应该给我打开一个新的标签，在这个标签里。给我显示我们那个超链接的那个页面，而我们之前那个还给我们留着，其实就相当于我们那个，你看百度，百度随便搜一个，搜完了以后，你看我一点超链接，你看我原来那个搜索结果在这儿是不是还能显示啊，啊还能显示它的真实结果，是在我们新的V片中显示的啊这么一个效果，这个效果怎么做？那这里边我们来说一下，也是一个属性啊，这种东西肯定都是属性啊，都是属性，我们有一个属性叫做一个target的属性，Target的属性它用来什么呢？哎，用来指定我们这个超链接打开的一个位置啊，把它打开的一个位置，它这个属性，这是我们要特意说一下，因为这个时候我们第一次说到了，它里边是不是你随便写的，它是有可选值的，我们常见的两个值，一个值我们叫下划线，一个self啊self这个东西叫什么呢？叫默认值啊，默认值就是在当前页面中打开。

我们这个超链接啊，这个叫做一个默认值，什么叫默认值，默认值就是你不写就是它，所以在这儿我写一个target target我直接写一个下划线，一个self保存，你看我这刷新，你看写跟不写效果是一样的啊，这么一个效果啊，Target，诶然后这叫默认值啊，Self是默认值，还有一个值叫下划线，下划线bla blank blank，这是你需要改的，你需要填的值啊blank什么意思啊，空白的什么呢？在一个诶新的页面中，诶打开超链接啊，打开超链接，所以这个时候如果你想打开一个新的标签页，你就可以把这个它给的设置成下划线blank啊下划线blank，这时候你再看效果，我再点击的话，诶你看这时候不动，它是打开一个新的标签，诶你给它关掉，再打又一个新的标签，那就是这样一个效果啊，就这样一个效果，所以这个时候就。

我们说的一个哎这么一个功能吧，哎这么一个功能，你可以通过target来指定我们这个链接打开的一个位置啊，Self表示当前自己，哎，Blank表示一个新的一个空白的一个页面去打开啊，两种方式，那这个东西我们多说几句，像这个blank的话，其实我们国内的网站其实特别爱用blank，你像百度啊，像京东啊，很多网站像淘宝也是一样，就是他会用一个blank，你点完一个超链接以你这个页面它会给你保留，会给你打开一个新的标签，其实我用起来挺方便的，方便在哪呢？诶你这看完了以后，你直接回来一点，你这东西就能看了，你不用回退了，对吧，你不用回退了，但是像国外的一些网站，你像谷歌，你像谷歌这个网站是吧，比如说你搜索一些东西，比如我就搜索HTML，你搜索一个东西啊，你看我这一点，它就不是一个blog，它就会直接在我们当前页面里打开啊，就是。

这张当前页面打开，你要想回去再看那个搜索结果，你就得点这个回退才能回去啊，基本上国外的网站都是这个特点，可能是设计理念的不同吧，他们俩各有什么特点，诶，首先呃，Blank它很方便，就是你打开一个新的标签以后啊，你像百度我搜一个镜头，它很方便，你点一个网站，它会直接给你打开一个新的标签，你看完了一关回来以后就可以接着点了，很方便，但是它会有一个缺点，缺点是什么呢？缺点就是。

经常会出现一种情况，你稍微一不注意，稍微一不注意，你的浏览器上就打开了一堆窗口，那这个时候就出现一个问题，你可能打开了十个，打开了20个窗口，这时候你不知道哪个窗口有用，哪个窗口没用，懂这意思吗？因为有些窗口你忘关了，而这个blank就是容易打开很多新窗口啊，所以咱们国内用的还挺多的，但是国外为什么不用，就是因为这个原因啊，会让你不知不觉打开很多新的空白窗口，Self它用起来啊，有的时候感觉不是特别方便，直接咔就没了，对吧，你还得回退self有时候感觉不是那么方便，但是它会有效的避免那个打开多个窗口问题，所以这两个东西呢，各有千秋啊，各有千秋，呃，没有什么好坏之分，但是从我个人角度来看的话，其实我不太支持用blank，因为确实容易打开很多多余的页面啊，但是你真正开发的时候，以你的公司项目，可能以你个人习惯，你说老师我就觉得blank好，OK，你就用。

问题啊，问题不大，这个区别也不是很大啊，区别不是很大，好这个是我们说的他给的这个属性啊，那刚才我们在说超链接的时候，我们还提到一点超链接，它不仅可以干嘛呢？不仅可以跳转到一个其其他页面，还可以干嘛呢？跳转到我们当前页面的一个其他位置，那这是什么意思？诶，你要掩示这个问题，我们这儿啊，我就得写点东西了啊，写点字啊，写点字我桌面上看有没有文字啊，我这有一个中文文本，你在写文本的时候，两种方式，你可以像我这样预备点中文本啊，你直接给它干嘛呢？直接CTRLCCTRLV给它粘过来啊，这样么，给它粘过来，其实我这就直接保存到一行了，其实你在这儿也显示不了多少啊，就是一行啊，就是一行，那这样呢，我们再看我这就会有一些现实的文字了，诶是不是就有字了，哎，有字了，或者你也可以在我们编辑器里自动生成一些英文文本，怎么生成呢？快捷键。Lom，然后摁table键，它就会自动生成一组英文啊，两种方式都行，你有一个地方保存一个中文，或者有个地方你哎你用lom生成也行，但是很明显现在这字啊都不够，所以呢，我把这个啊，我给它复制一下，哎，我直接给它复制啊，复制看，哎，Out shift加下啊out shift加下直接给它复制，那现在复制完了以后呢，很明显现在我们这个文章的内容就多了，也就说我这是不是出现滚动条，需要通过滚动条去查看我们的完整页面啊，诶是这么一个效果，那现在啊，我们来看一下，那这里边呀，有的时候我们经常看到这么一个效果，诶就是我这看文章的，看文章的，诶从下往上看看看看到最后了，诶那这时候我想干嘛呢？我想一下子直接回到我们页面的最上边，诶，我们下边会有一个超链接，这个超链接作用叫什么呢？叫回到顶部，我一点它就直接跳转到顶部了，这么一个效果。

那这个东西我们要怎么写，哎，我们直接来说一下，在这里面我们直接来写一个超链接，哎，我写一个什么呢？写一个回到顶部啊回到顶部，那我们怎么能实现这个回到顶部的效果，诶那这里边注意我们可以什么呢？我们可以直接将我们超链接的h ref属性设置为井号，那这样点击我们这个超链接以后，诶超链接以后页面什么呢？页面不会发生跳转，而是什么呢？而是转到我们当前页面的一个什么呢？顶部的位置，顶部的位置啊，顶部的位置，所以这个时候如果你想实现回到顶部这个功能，你给超链接这写一个HRA属性，写一个井号，然后就OK了，看效果，现在我是不是到最后了，有一个回到顶这链接我一点看到了吗？诶，就跑到了我的这个最上边，所以非常简。

啊，直接写一个井号，就把这个问题很轻松的就给搞定了啊，就给搞定了，这个是我们说这么一个效果啊，回到顶部直接写一个井号，但是这个时候呢，我就可能我又多了一个需求了，这又回到顶部了，可能我这儿有一个超链接，我希望什么呢？诶，我希望在我上边啊，我再写个超链接，这个超链接干嘛呢？哎，我来一个A标签，我想干嘛呢？我想去去底部，也就是说我希望呢，当我一点这个A标签，它就直接跳转到我们页面的最下边。行不行，诶，那我一想这写个井号，我这也写个井号呗，井号能不能实现这个效果，哎，很明显井号不行，不可能一个井号既能去底部，还能回到顶部，井号总是回到顶部，无论你在哪写，它都是回到顶部，但是现在我就有这么一个需求，要去底部怎么办？要去底部怎么办？哎，那在里面我们要说一个问题，底部底部，那我们说了怎么才算一个网页的一个底部。

怎么才算？诶，其实在我们这儿去底部，它也并不是一个我们要的需求，可能我们需要一个更强大的需求，就是要什么呢？我要去到页面的一个任意位置，可能我想去这个位置，我想去这个位置，或者我想去这个位置，比如说我想去任意一个位置，底部只是这些任意位置中的其中一个吧，诶，其中一个，所以我们先确定哪算底部，哪算底部，实际上就是我最后一个标签的位置是不是就算底部，所以我所谓的回到底部就是干嘛，就是去这个A标签所在位置，只要它一露出来，是不是就表示就到底部了，哎，就到底了，那也就是说我们所谓的去底部，就是去到这个A标签，也就是它所在的一个位置，哎呀，那怎么去到这儿啊？那现在就产生一个问题，我们来说一下这个A标签跟其他的A标签现在来看有没有区别，咱不说位置上的区别，就从外形上看有什么区别，其实没什么区别，就是一个A标签里边一个H属性，然后呢，有个字儿就结构上是一模一样的，这仨这哥仨简直长得跟双胞胎是一样一样的，所以这个时候我想去什么呢？我所谓的去底部，实际上就是去这个A所在的位置，但是偏巧了这个A它。

太不特殊了是吧，长得跟别人是一模一样，你想直接跳转到那个位置啊，你没有办法标记，懂这意思吗？因为他跟别人你分不出来，你说我去最后一个A，他区分不出来，所以这个时候如果你要想去到这个A所在的位置，也就是底部，这个时候你要给这个A加一个特殊的标记啊，特殊的标记，那怎么给标签加标记呢？哎，我们来说一下一个属性，我们叫做ID属性，ID这个东西啊，ID这个东西只要你在我们这个计算机语言里，你只要看见ID了，ID你就记住了，哎，ID就是唯一不重复的啊，唯一不重复的如果你不理解，你就想想我们人的身份证。

人都有身份证号，身份证号什么特点，每个人有每个人的自己的身份证号，身份证号会不会重复，不会重复，这就叫ID啊，所以注意ID，只要看见ID就是唯一不重复的啊。ID属性我们来说一下每一个标签，每一个标签都可以添加一个ID属性，ID属性是干嘛的呢？ID属性就是我们元素的一个唯一的一个什么呢？唯一的一个标识啊，唯一标识，那我们说了，哎，我们的页面中不能什么呢？哎，不能出现重复的这个ID属性。同一个啊，同一个页面中不能出现重复代替属性，所以它就像我们这个身这个身身份证号一样啊，身份证号一样，所以在这儿我就可以给A指定一个ID属性啊，ID属性那注意了，ID属性的属性值是区分大小写的，所以你写A跟什么呢？跟这个A它是不一样的啊，大写A跟小写不一样，但是一般我们都小写，而且注意ID你别给我整个什么呀，别整个数字开头，ID都是字母开头，我们基本上所有的属性都应该是字母开头，正常来讲啊，都应该是字母开头，所以在叉呢，我就给他一个ID，叫做一个BOT Tom啊，你千万注意啊，你别写个哎123ABC2AB这个不行，因为是数字开头啊，一定得字母开头，我们直接来一个t Tom叫做一个bottom，那现在注意了，这个A和其他的A就不一样，它有一个ID叫bottom，而其他的A有没有，哎，没有，所以这个时。

我们就可以区分了啊，当然注意了，他叫bottom了，别人还能不能叫了，你写上也没问题，但是这时候这个就废了，为什么呀，因为他在前边肯定是靠前的那个优先生效啊，靠前那个优先生效，所以这个时候一定注意ID就是不能重复的啊，你不要给两个元素指定一个相同的ID，这个东西即使行也是给你自己添麻烦，就违背了ID的意一个意思了啊，那现在我们说了再去底部就是去哪了，就是去到ID为包特姆那个元素所在的位置，那我可以怎么写，我可以直接写一个井号botm啊，井号BOM，所以这里边我们直接说一下，我们也可以什么呢？诶，我们也可以跳转到我们这个页面的一个指定位置，我们只需什么呢？只需将我们这个h re EF这个属性设置，为什么呢？设置为井号。

哎，元素的，哎，目标元素的ID属性值，你想跳转到哪你就写哪，我现在想跳转到包，我就写包特，那看什么效果，我们回到顶部，因为包特是不是给了这个A啊，所以这时候我点去底部，就是去A所在的位置，诶回到顶部去底部，回到顶部去底部是不是就完事了？哎你说老师我不想去底部了，我想去哪呢？我想去这个这儿第三个自然段这那怎么办呢？哎，你给第三个P标签加一个IDID等于什么呢？等于一个P3吧，哎，等于一个P3，那这时候你想去这儿怎么办？哎，那你直接再创建一个。直接复制一下啊，直接复制一下叫什么呢？去第三个自然段，第三个自然自然段那这一块呢，我就别写bottom了，直接来个井号一个P3啊P3看效果啊，看效果我先来一个什么呢？回到顶部去底部，这都没问题啊，回到顶部看这现在我来去第三个自然段直接一点是不是直接定位到这个位置，你看是不是第三个一。

二三是不是正好是第三个呀，哎，正好是第三个啊，所以说白了这个东西就是你想去哪儿，你就把他那ID写上就行了，这东西我们也叫做一个锚点是吧，你想往哪跳就直接就可以去跳转到它指定的这个位置，前提是你得给你得给那个元素指定好这个ID属性啊，ID属性，而且注意ID使用值不能重复啊，这个属性也比较重要，在我们开发中，ID属性是诶常伴我们身边的，经常使用的，经常使用好这个东西我们就说完了是吧，关于A关于超链接的话，其实作用主要就是两个，一个是跳转页面的作用，还有一个就是跳转到我们页面的一个其他的位置啊，还有其他位置，那如果说还有要再补充的话，就是这种情况，因为我们在开发的时候啊，因为超链接做的就是跳转嘛，对吧，诶这是诶比如说我写一超链接，这是一个，诶这是一个新的。

超链接，那我写这么一个超链接，你注意了，往往有一种情况，我们在开发的时候，我们在开发的时候，像这个超链接啊，这个超链接呃，它的样子我们定了，但是呢，它的功能，换句话说，它跳转到哪个页面，这个时候我们还没定呢，我们还没定呢，就是我还不知道他往哪跳呢，可能跳到A页面，可能跳到B页面，也可能跳到C页面，页面我们还没定呢，那这个时候这个HF这个值我们就没法写。诶没法写，可是你不写又不行，因为你不写它就不是一个超链接，不写就没有超链接那个效果了，这东西你还必须写，那所以这个时候我们就得写一个东西，先把这个地儿给占上，可能没什么是意义，所以这个时候我们可以选择写什么呢？写为井号，哎，所以注意在我们这开发中啊，在开发中我们可以什么呢？哎，我们可以将这个井号作为这个超链接这个路径的一个这个站位，站位符使用啊，站位符使用，也就是说我们先把这地儿给占上啊，井号就表示一个占位符，哎，先占个地儿啊就OK了啊就OK了，这是一种战位符啊，这是一种站位符，那这个战符它会有一个特点，它有一个不太好的点，就是实际上这个超链接的作用呢，我们暂时还没有，还没有确定对吧，还没有确定，所以我们希望实际上在我们心里，可能我们希望这个超链接它没有任何作。

就如果点完了以后，说白了就是最好什么也别发生啊，什么也不要发生，就跟就跟没写一样，对吧，就跟没点一样，应该是，但是现在我们这个超链接呢，实际上你点完了它以后，因为你写的是井号嘛，所以你点它也会回到页面的顶部啊，也会回到页面面顶部，所以呢，有的时候我们就想写一个什么呢？写一个纯的没有任何功能的超链接，那怎么办呢？诶我们还有一个战士符，战士符写起来稍微有点长，但是其实也是我们常用的，我可以写什么呢？我可以直接写一个叫做Java s c javascript的冒号分号。

我们直接来说一下啊，来说一下我们可以什么呢？可以使用我们这个javascript的冒号分号来什么呢？来作为这个h ref的一个属性，此时点击我们这个超链接什么也不会发生啊，所以它也属于我们，有时候呢，它作为一个站位符使用，它跟井号的区别就是井号还会跳转到页面的顶部，而这玩意儿的你点完了跟没事儿一样啊，所以看着现在我再点。

我再诶不是他啊，最下边这个我点啊我点走走走是不是没有任何反应啊，哎，没有任何反应，这个就是我们javascript的冒号分号的一个作用啊，冒号分号一个作用，好关于超链接呢，我们就说这么多啊，说这么多也没什么，没什么好说的了，是吧，就这么多内容，你需要自己总结一下，其实也不少了啊，自己在认真总结一下，尤其是那个比较绕的那个相对路径的问题，一定要给它理清楚啊好，我们来听一下。