18.尚硅谷_HTML&CSS基础_超链接2.avi原创

来看这么一个练习，这个练习呢，其实来说整体来说是比较比较简单的，但是我们要说的是一个以后我们怎么去呃练习的这么一个思路，那么说我们说这个前端的话，其实没什么捷径，就是多练，你做的页面多了，你自然这个水平就就提高了，那问题是往往没有那么多页面时候，让我们去做呀，所以往往我们需要自己去网上去找一些页面，自己去干嘛呀，模仿啊，模仿别人怎么写的，我照着写，我写多了自然而然就干嘛了，就会了，那比如说以后我们可能学完了以后，可能我们可以自己干嘛呀，你模仿一些什么呀，像什么京东啊，像什么淘宝啊，像什们这些比较大型的网站，模仿一下的首页啊，自己尝试做一下，做完以后你会发现什么呢？你的水平提高会很快啊，很快，但是现在我们要说的一个问题，就是我们怎么去模仿一个页面，那首先你要模仿一个页面，你要先大概对这个页面的一个整体结构，你要一个什么样要了解，你看咱们这个页面其实比较简单，也没什么难度啊，咱们就直接写了，咱们一边遇到问题咱们再去说，那首先咱们来看页面，咱们从上边开始写。

上边这是一个，这是我的这个个人博客，这是一个什么呢？我们刚才说了是一个一级标题吧，诶一级标题，所以这里边我们来这样先来创建一个页面，CTRLCCTRLV，改个名叫做一个exer，我们这个练习，然后呢，直接在这编辑一下，这里边呢，我把这些没用的我先都给它去掉，去掉这个是我们一个练习吧，然后一个一上来是我们一个H1的一个标题，那这个字呢，你就不用去打了，直接干嘛呀？诶直接把它复制过来就行了，这是我的一个个人博客，然后CTRLCCTRL1粘贴这就OK了啊，然后咱们一边打开笔老来看，但是打开以后发现字是一样，但是发现什么呢？哎，是不是位置不一样啊，这个它是靠左的，而文这个整个是一个什么样，是一个居中的效果是吧，那么说最简单的方式就是把我们这些所有标签是不是统一放到一个center里啊，哎，Center里来，那所以这里边我们直接来一个标签c center。C，然后干嘛呢？把我这些所有东西都放到这个center里，就可以达到这么一个居中的一个效果，来CTRLV粘过来，这回再看一刷新是不是居中过来了，好居中过来，然后再看这博客，这完了以后下边是一条什么呀？哎，水平线，水平线下边是一个这个诶东方破，这是一个二级标题是吧？二级标题下边一个周杰伦，周杰伦这应该是一个什么，诶超链接可以点的啊，可以点的，所以这里边下边我们就来一个这个HR是一个字结束标签，然后这是一个H22，我们这个二级标题，二级标题里边写的是一个东风破，然后再往这来一什么呢？来一个这个超链接，诶诶，我们这里边是一个诶周杰伦，这是可以去点击的，但是问题又来了，那这里边现在干嘛呢。

我这一刷新链接，虽然是上边标题，HR还有这二级标题都是一样的效果，周杰伦也是一个超链接，但是现在这个超链接干嘛呀，是不是没有那个效果呀，他是不是也不能点呀？哎，不能点，那为什么不能点呀，我们是不是没有写这个HF属性啊？诶那这会儿问题来了，HF属性我们到底要要写啥呢？

这东西咱们是不是不知道啊，哎，像这种包括咱们工作的时候也是往往这个一上来链接地址我们上来能不能确定啊，不能确定，往往我们都随着什么呀，随着开发的时候，这个链接地址才能去确定，那现在不能确定，可是这链接你不写它是不是也没有效果呀，那怎么办呀，我们就需要写一个东西是不是给他。占着地方啊，哎，占地方我们可以写一什么呀，哎，写一个井号啊井号，所以这里边我们来干嘛呢？创建我们这个超链接时，如果什么呢？如果这个地址不确定可以什么呢？可以直接诶写一个什么呀，写一个这个井号作为什么呢？作为这个站位符，诶那井号有什么作用，我们先来看看啊，现在我设置完井号了，我这一刷新现在诶超链接是这样对吧，我这一点走，诶看页面变了吗？没变，点完了以后页面不会跳转，而这块是不是多了一个井号啊，所以井号这链接就是干嘛呀，你点完以后它不会跳，但是它具体作用待会我们再说，其实它有一个其他作用啊，其他作用好，那接下来我们再来说这个东西，设置完了，超链接有了，然后再往下边，是不是就我们这个这歌词了呀，这歌词其实就是一个什么呀，是不是段落呀，诶所以干嘛呢，直接一复制文字，一复制文字，然后这儿我们来写一个什么呀，写一个。

P标签，然后干嘛呢？将这些文字是不是直接放到我们这个P标签的这个里边啊，但是注意它这一块又不是纯文字，怎么不是纯文字呢？在文字之间是不是还有图片啊，诶图片的位置我们先干嘛呀，给它空出来，我们先不写，待会儿在这儿说要放一个图片啊，然后图片下边还有什么呀。还有文字，来CTRLC还是给它粘过来，留一个空行，这空行是我们这个图片的一个位置啊，然后再往下再来看，再来看下边是不是还有一个图片啊，图片下边还有一堆啊，来CTRLC给它粘过来，粘过来以后呢，这来一个，诶好，那现在我们这个文字是不是都粘过来了，诶我们先来看什么呢？先来看我们这个文字的一个效果，保存一下，这一刷新来走你有。

你发现我这文字他说写成一堆了呀，而我们中间这个效果它是什么呀，它是一行一行的吧，这是为什么呀？哎，那我这不是写换这不是换行了吗？哎，他是不认识啊，哎，你写再多换行他是不都给你当成空格啊，所以干嘛呀，我们是不是希望在每一句话后边都换一个行啊，所以干嘛呀，我可以在每句话里边都写一个点，但是这个事儿呢，稍微的有点有点麻烦啊，我们来给他写一下，都给它写一个这么一个点，诶那这块呢，就没有什么技术含量了是吧，你就粘吧，啊，CTRLCCTRLVC就不用CTRLC了，CTRLC一次就行了是吧，但是呢，你千万别给它粘错了。

CTRLVCTRLV，所以你们在写这个东西的时候，一定要习惯去使用一些什么呀，快捷键啊，快捷键会提升你这个编码的一个速度，好换行都写完了，我这一刷新整个效果是不是出来了，诶出来以后中间还差什么诶图片，那图片怎么办呀，图片怎么办呀？诶我们可以看页面是不是都给你了呀，你可以干嘛呀，直接选中页面里边图片直接干嘛呀，哎，有一个什么呀，将图像是不是另存为呀，哎，你就给他保存也行，那还可以干嘛呀，咱们这东西实践干嘛呀，原文件是不是都给咱们了，原件给你的图片是不是就跟这儿了，直接把这东西CTRLC。CTRLV你给它粘过来是不是就行了呀，那如果你在网上时候没有的时候干嘛直接文件另存为，然后直接保存到桌面一保存是不是也有啊，诶也可以啊，多种方式，但是源码都有了，我们直接粘过来就行了，有了图片以后，我们就直接来一个引入这个图片，一共是几张图片啊，一共是两张，一和二这个位置我们都给空出来了，引入图片用我们这个img mg标签，M标签有两个属性，一个叫做src，一个叫做这个二组，诶，ISRC我们直接写了，叫做一个一点是GPG吧，呃，一点这个GBG，还有一个2.jbg，那这个奥特没给写上叫一个什么，就随便写一个吧，图片，但是你真正做的时候，这个描述要描述的是图片这个内容啊，然后说C这也粘过来，这是一个二代主意，这是一个图片二我这一保存，咱们再来看一刷新来走你诶图片是不是过来了，诶他们看问你。

我这图片是不是跟我这文字就在一行了呀，为什么呀，那是不是证明我这图片它也是不会自动换行的呀，那所以我们可以干嘛呀，诶我在图片后边同样也给它加一个换行啊，图片后边也给加一个B2，这回再保存一刷新走你是不是就行了呀，哎，就行了，但是呢，明显感觉到咱们这图片好像比人家那是不是大一些呀，那这俩图片明显是是不是一边大的呀，那这个时候你就可以干嘛了，给图片指定一个宽度，比如说拿这个图片举例子，我直接来什么呀，在这儿在后边写吧，来一个这个YY我来等于什么呢？等一个，呃，咱们等一个这个400个像素，我来看看行不行，我这一刷新走你。

诶400好像还大是吧，那这玩意儿这大小我们指定多少合适呢？诶那我们这里边实际上有很多种方式啊，很多种方式，那比如说最简单的一种方式干嘛呢？源码是不是都有了呀，直接右键查看页面源代码往这一看是不是看见了，哎，直接查询代码就可以看见了，还可以干嘛呢？有人知道我们每个人电脑里基本上都应该都装那什么呀，截图工具啊，直接把截图工具打开，我这块呢，在我这个搜狗输入法里边有一个截图工具，我就装上了，直接摁这个截图快捷键，是不是出来这么一个框啊，那怎么量啊，诶这块量的时候可能就不是特别准确了啊，直接在这文字这咔，从左边一直拖到右边。

诶，你看它这边是不是一个大小啊，是一个300乘以97，这个300就是什么呀？宽97是什么呀？高，而我们这块是不是要量的是宽呀？诶所以我这一看，大概我是不是知道它这个宽是300的呀？哎，可以干嘛呢？可以通过我们这个截图工具去量一下啊，量一下也可以干嘛呢？我们不是装了一个fire bug吗？点开这个fire bug fire bug这有一个什么呀？有这么一个玩意儿，这个东西叫什么呀？叫做查看元素，你点它干嘛呢？你看当我鼠标一入到这儿，它是不是就能被一个选中状态啊，那我们现在是不是想看这个图片大小啊，直接拿这鼠标一点这个图片，一点它来看这儿，与这个图片对应的这个HTL代码是就出来了，诶，你看这是不是也能看见啊，哎，Y等于一个300PS，所以这个方法很多啊，但是一定要习惯使用我们这个开发者工具，那不仅用它可以用我们的chome里边也行啊也行，好，那这儿看完了，我们知道宽度了，就直接来一个什么呀，300PS2。

图片是一边宽的是不是都是300啊，那高度我们还用不用设置了，诶高度让他自己调整就OK了啊，自己调整OK了，来这里边我再一刷新，诶这回是不是就OK了呀？哎，基本上就一样了啊来那再往下写，上边都写完了，再往下写，这是一个水平线，水平线下边有什么呀？那是不是有几个超链接呀？哎，有几个超链接啊来我们这来先来一个这个水平线，这来一个这个HR，然后下边是一个友情，友情链接，友情链接这里边一共有几个呀，一共有五个链接是吧？那这样咱们就不写了，直接干嘛呀，CTRLC给它粘过来啊CTRLCCTRL给它粘过来，粘过来以后呢，我们现在这么写，看看什么效果啊，一保存来这块一刷新来走你诶是不是出来了呀，但是咱们这链接现在是写成一行是吧，哎，写成一行了，而且这个东西得干嘛呀，是不是得放到一个。

啊，A标条里啊，诶A标条里，所以这些呢，咱们都给它干嘛呀？诶给它放到一个这个超链接h drive这里边也是用井号作为摘符，那这个玩意儿就有点有点麻烦了，我直接复制啊CTRLC这个是我们这个B网站，那这都无所谓了啊，这个是我们这个C网站。然后这个是我们一个回到顶部。然后呢，最后一个是一个这个连线，我们我们都用什么呀，都用我这个，哎drive这个井号做一占有符，现在我这一刷新走你哎是不是都变成一个超链接的一个状态啊，变完了以后呢，我们说实际上我们这个C网站和回道顶部他们之间是不是有一个换行啊，换行就简单了，呃直接在这儿加一个这个边是不是就行了呀，保存我们再来看一刷新，诶这换行是换回来了，好整个页面呢，实际上我们就算给它完成了啊，给他完成，然后呢，这里边完成以后，但是好像。

他的距离。比我们这个距离要要大一点是吧？哎，其实就是什么呀，哎多写一会儿是不就行了呀，哎来保存，再来一刷新走，你这时候就OK了呀，好，那写完了以后呢，我们整个页面从直观上看的效果就已经完成了，但是我们来看有哪些地方我们还没有处理的来，那首先友情链接A网站B网站C网站，这就没啥可说的了，对吧？往下看它有一个功能叫什么呀？叫回到顶部，什么叫回到顶部呀？诶我这一点这链接咔咔咔干嘛呀，是不是直接回到我网页的最上面啊？诶最上面就回到顶部，那我们说了我这功能，我这个链接现在有没有回到顶部，这功能没有，诶我们来试试，现在我设置了什么呀？我设置是不是井号啊，诶井号我们来看看行不行，我这一点来走你。

走你，诶走你是不是就回到顶部了呀？诶所以我们发现这个链接如果设成井号就是什么呀，是不是会自动回到我们这个页面的一个顶部啊，哎，所以这里边我们来说井号这么一个功能，哎，如果将我们这个链接地址干嘛呢？设置为什么呀，井号则什么呢？则点击我们这个超链接以后会什么呢？会自动跳转到，跳转到哪呢？跳转到我们这个当前页面是什么呀，顶部啊，会自动跳转到我们这个当前页面的一个顶部，所以这是我们井号的一个作用，它除了可以站位还干嘛呀，回到这个顶部，那我们说了，那有的时候我们还有什么呀，我可能上边我需要来一个链接。

哎，我可能在这儿写一个链接，在这写吧，哎，怎么，诶去去底部，诶去去底部什么意思呀？来回到这儿，我一刷新最上面是不是一个链接啊，我希望一点它一点它一点走走走走走干嘛了，是不是走到最下边啊，哎，走到最下边，那现在这链接行不行？我这写的是什么呀？是不是还是井号啊，你只要写井号，他是不是一直都去这什么呀，去上边啊，那这怎么办？我想去下边，那怎么办呀？那我要想去下边，这下边我们是不是先得下边到哪儿，你是到到这块呢，还是到这块呢？你是不是得有一个位置啊，那我们要想去哪啊，我是不是想要去最下边啊，最下边是谁啊？最下边举个例子，我就拿这个举例子，我想回到什么呢？我想回到这个超链接所在的什么呀，所在的位置，那这个超链接所在位置是不是正好是。

底部啊，哎，我想去掉这个超链接所在的位置，那问题来了，那我是不是得告诉这个超链接我一点它以后你干嘛呢？你直接给我定位到什么呀？是不是下边这儿啊，诶定到这个超链接这个元素，这那问题来了，那这个超链接它有没有什么标志啊，没有什么标志吧，那我希望干嘛呢？我希望我能给这个超链接加一个什么呀，加一个标识，也也就是说干嘛呀，我通过这个标识是不是可以指定我要来到这个位置啊，诶来到这个位置，那这里边我们就要说一个什么呀，说一个属性，诶说一个属性，我们说在我们这个HTM2中有一个属性，每一个元素都可以干嘛呀，都可以设置，也就是说这个属性每一个元素都可以设置，该什么呢？诶，该属性可以什么呢？可以作为我们的这个标签的什么呀，唯一，诶唯一标志，我叫唯一标识，什么属性呢？哎，我们说诶这个属性就是什么呀。

就是ID啊，那个属性idd什么意思呀？哎，就是你那编号你的ID是吧，叫什么呀？我们身份证号是不是有一个ID呀？诶身份证号ID，那比如说我给这个A加一个ID来一什么呢？来一个ID等于一个bott OM什么意思啊，Bottom啊，Bottom叫一个底部的意思，那注意这ID你想起什么就起什么，Abcde汤姆克鲁斯想起什么就起什，这东西比较随意，但是注意这种东西不能以什么呀，不能以数字开头，也就是说你要你不能写个123，包姆能理解吧，哎，必须得以什么呀，以字母开头，这个属性是ID，那我们说ID有什么特点呢？我们说一旦我们说ID属性在什么呢？在同一个页面中干嘛呢？哎，页面中只能有一个，不能什么呀，不能重复啊，不能重复，换句话说，我这个A它的ID已经叫bottom了，其他元素还能不能叫了？

哎，不等调了，所以在页面里我只要说找到ID为bottom那个元素，是不是就是这呀，是不是就是这个A啊，哎，就是这A，那现在我希望干嘛呢？来回到这儿，我们去底部，这功能就变了，我希望干嘛呢？我希望跳转到什么呀？ID为bottom的什么呀，的元素所在的什么呀，位置啊，我要跳转到ID为bottom的元素所在的位置，那这块我要这么写呀，哎，直接在我们这个HRI中干嘛呢？写叫什么呀，井号来什么呀，ID属性值去哪你就写谁我想去哪啊是不是包到没呀，所以我就写什么呀，井号bottm包腾，我们来看什么效果啊，来看什么效果，来看这我这火焰腿，我这一刷新，现在去底部，诶，我们来看效果。

啊，一点走是跑最下边来了，诶再一点是跑最下边了，为什么跑最下边了，因为这个是不是我idv包的元素啊，哎，它给它显出来只能干嘛呀，跑到这个位置，诶那我们说了我要干嘛呢。我们来看啊，假如说给这PI加一个ID等于什么呢？等于一个hello，我想干嘛呢？去这个ID为hello这个位置的元素，那我怎么办？哎，我是不是这来一个井号哈啊哎号哈，去哪你就写哪啊来一个井号，Hello来我们来一个，诶去我们这个诶指定的一个位置，包括同学我们来看啊，这块一刷新回退，我这一点走诶是不是定位到这儿了，哎定到这了啊所以你想去哪，你井号后边就干嘛呀，是不是就跟着谁的这个ID呀，哎想去哪井号后边就跟着谁来着ID啊可以定位到我们元素，定位到我们这个页面的一个什么呀，任意位置啊，任意位置，但是一定要注意ID干嘛呀，不能重复，它是一个什么呀，唯一的啊，唯一的好，这是一个啊，我们这个定位在我们当前页面里进行一个定位的这么一个超链接，还有一个接下来我们接着说还。

这个什么呀，再看下边我们最后还有一个叫什么呀，叫联系我们，联系我们其实这种东西其实用的不是很多，那联系我们应该是一个什么效果，诶直接看我们这个吧，做好的这个联系我们，我这一点走，诶你看什么效果。他是不是直接打开了我这个计算机里安装的这个电子邮件的这个客户端了呀，哎客户端了，然后你看收件人这是不是已经给你写好了，哎写好了，所以这个联系我们呢，说白了就叫一个什么呀，叫做发送电子邮件的一个什呀，超链接发送什么呢？哎，我们这个电子邮件的一个什么呀？哎超链接什么意思呀，链接链接以后可以干嘛呢？可以自动打开我们这个计算机中的什么呀，默认的什么呀，邮件客户端啊，可以打开我们计算中的默认邮件客户端，那这个链接我们要怎么写呀，其实你想想只有哪特殊，是不是只有HRA的这个值是特殊的呀，那怎么写呀？来说一下怎么写HRA等于一个里边写什么呀？哎，叫做一个mail mail什么意思呀，邮件，哎，M。

还有什么呢？To后边一个冒号跟的是我们这个邮件地址，按件地址，那看我们这怎么写，我直接来什么呢？来一个这个mail to to谁呢，随便写一个，随便写一个什么呀，ABC艾特一个艾特硅谷点com是不是写这么一个原地址啊，诶我这一保存，咱们来看什么效果啊，现在我这儿回到这儿一刷新，现在联系我们在这儿呢啊看这我一点走。

诶，看是不是打开我这个默认的邮件客户端了呀，诶我这个默认邮件客户端是这个Outlook，所以打开了我这个Outlook，然后来看收件人干嘛了。是不是ABC艾特艾特硅谷啊，这是谁呀？这是我在这配置的这个什么呀，地址吧，诶配置的地址啊，这是我们说发送电子邮件的这个什么呀，超链接，当点击这个超链接时会什么呢？会默认打开我们这个计算机的什么呀？默认电子邮件客户端，诶那问题来了，有的同学干嘛呀，你说了我这计算机里。没有这玩意儿，这玩意儿是啥，我是不是都不知道啊，没有这玩意儿怎么办呀，没有这玩意儿那他就干嘛了，就不打了，那不同的浏览器处理方式不同，这种方式只针对于什么呀，你有这个客户端的有一些干嘛呀，它会给你打开浏览器啊，那这种如果没有的话，它的各种这个浏览器处理方式呢，不同啊不同啊会默认如果有的话就会干嘛呀，默认打开计算机的这个默认电子这个邮件客户端，并且什么呢？并且将什么呀，收件人设置为什么呀？诶mail to后的什么呀，后的这个邮件，诶地址，说白了它的一个作用就是方便你给什么呀，给这个网站的主人发邮件啊，发邮件这是我们的一个什么呀，联系我们这个邮件，但是这种东西其实现在来说用的干嘛呀，用的不多啊，用的不多，现在都干嘛呀，可能在最后给你放一个什么呀，二维码是吧，哎，放个二维码二码。

干嘛呀，支付宝那个是吧，扫一扫直接给捐款了是吧？诶直接给捐款了啊好，那现在这是我们说的这么一个超链接，就这个练习把这几个超链接给刷完了，又说了两个，一个是在什么呀？在我们当前页面跳转的一个后边跟着一个井号，井号后边跟的是我们这个ID属性值，还有一个是干嘛呀，是打开我们这个邮件客户端的这么一个超链接，这种呢，用的相对来说不多啊，而这种会用的比较比较多啊，比较多，好这一块我们来停一下。