尚硅谷前端基础 (4)

好，欢迎收看上硅谷的前端视频，我是李立超，上节课我们简单的介绍了一下这个HTML啊，编写了我们的第一个网页，但是我相信你可能写完第一个网页会顿时感觉有点上当了，我的天呐，这玩意儿也能算是网页是吧？写完了以后，咔一行显示完了，这东西也算是网页。呃，严格意义上讲呢，还这还确实算网页，只不过它不是一个完整的网页，所以其实我们上节课去讲叫做超文本标记语言HTML嘛，超文本标记语言其实充其量我们刚刚理解了文本对吧？文本那还有什么呀，还有标记。对吧，标记是干嘛的语言不用说了，对吧，主要就是一个标记，标记是干嘛的啊，那我们来看这一块是我们的源码，而这一块是我们浏览器把我们源码渲染的一个结果啊，一个结果我们来看一下，那从我们这个源码上来看啊。

虽然这些都是文字啊，都是字儿。但是他们的作用一不一样。哎，很明显不一样。这个回乡偶书二首，这是个标题呀，对吧？这是个大标题，其一呢，这是嘘标题对吧？下面肯定还有个秦二的对吧？这是嘘标题，贺知章呢，他是作者名，他也应该是个嘘标题对吧？嘘标题而我们少小离家老大回诶这是不是应该是我们，那等于是一个主要内容对吧？那其实就等于他这里边每一个，每一行都是一个段落对吧？每一行都是一个段落，那段落呢，你应该自己独占一行，就显示你不能跟别人重了对吧，重了所以实际上我在这儿写文本的时候，每一行都是有它的意义的，不是凭空写的，每一行都有它存在的意义，然而这些东西被我们的浏览器去渲染的时候，浏览器它知不知道这玩意儿是标题啊？

他知不知道这玩意儿是作者呀？他知不道好啊，他要知道这事儿就省事儿了，对吧？所以浏览器不知道，对于浏览器来说，我们说对于浏览器来说，这玩意儿就是字好听的，是字儿不好听的，那其实对浏览器来说，这堆玩意儿就是1010各种各样的编码，然而浏览器它不知道这是标题还是什么东西，但是我们网页最终是不是还是需要让浏览器去渲染呀，所以浏览器你是不知道，但是我们作为程序员来讲，我必须得告诉浏览器，这个是标题，这个是作者，这个是段落，我是不是必须得让浏览器知道啊，只有这样浏览器是不是才能按照标题去渲染这个东西，才能按照段落去染这些东西呢？对吧？所以这些东西我就需要给它加个什么呢？诶，我就需要给它加一个标记，标记用来干嘛？标记就是用来标识我们网页中不同的一个内容，你来干嘛呢？

来告诉浏览器这个内容到底是什么东西，比如说就拿这个回旋奥数来说，它是不是一个标题啊，诶我希望告诉浏览器它是一个标题，那既然标题你是不是给我显示的大一些，诶那怎么告诉浏览器，诶那这里边我们来说一下，非常简单，其实标记吧，它有点像一个带有名字的括号，哎带名字的括号，那它怎么写呢？我先写一下啊，首先是一对尖括号，哎一对尖块就是一个大于号，一就是一个小于号，一个大于号在哪呢？在你键盘上M的右边有两个大于小于号，大于号按照shift就除理它啊，按着shift除以它，然后呢，诶这肩块里边，注意可不是空的，它里边写的什么呢？写的是我们标签的名啊，标签的名，标签名，那实际上什么叫标签，这就是标签，标签就是带名字的括号啊，在我们的h.L里，诶，标记就用标签作为标记就是。

用的，那这个东西叫做开始标签啊，这个东西叫做开始标签，那我们标签一般都是成对出现，有一个开始还要有一个结束，也是一对肩块里边加一个标签标签名，哎，但是问题来了，你这洗完了以后，这哥俩是不是长一个模样了，诶区分不开了，那怎么办呢？我们会在结束标签的前边，在标签名的前边加一个鞋带，这个鞋带在哪呢？哎，这仨挨着，就在那个大于号后边，用文shift的直接音就是它，但是前提你得是英文输入法，它就出来了，那这个时候这就是一对标签，那标签里边我们可以写东西，比如说写一个AA，这个AA就叫什么呢？就叫做标签的体，标签的内容，标签的一个主体，那说白了作用就是我通过这两个标签来标识标签内部的一个内容，它是什么啊是什么，所以那比如说现在我这个回乡武术。

二手它是一个标题，那我其实就需要把它放到一个标题标签里，那怎么写呢？哎哎，看着了，首先先写个开始标签，标签啊以这个什么呀，监括号啊，哎监号里边是标签的名，那标题标签我们叫什么呢？叫做H1啊，叫H1有开始有结束，结束写哪呢？你写到标题的最后，你想到谁是标题，哎，那是不是二手这它是一个标题啊，所以我再写一个H1，这表示一个结束标签，为了加以区分，我加一个什么呢？诶，斜杠，那我们H1表示的就是一级标题h hi的一就是一级啊，一级标题最大的标题，那这样的话，这两个标签中间的内容就会被浏览器识别成是标题，那好了，问你了，下边这些内容会不会被认为是标题？诶，注意不会只有标签中间的会认为是标题什么成像。

后呢，来CTRLS保存在这儿，我来点一下刷新啊走，你来看它显示效果跟别人一不一样了，诶不一样了，为什么？因为我用一标签把它圈起来，浏览器一看，H1中间的应该是标题啊，而且还是一级标题，于是浏览器就把H1当中的内容做了一个特殊的处理，作为标题却显示同理，那其一是二级标题怎么办呀？哎，我加一个标签叫做一个H2，那这个时候你再保存CTRLS保存这一刷新是不是变成二级标题啊？哎，它比这个稍微要小一些啊，小一些诶贺知章呢，作者作者我也可以给他设置一个二级标题啊，我CTRLC我直接复制一下啊，保存一下诶这一刷新是不是作业也出来了？哎，那下边这几个都是段落，那我每一个我。

都用一个P标签，注意有开始有结束，每一个都是一个段落，我用一个P标签给它圈起来，表明它是一个段落，那我这是不是就有四个段落呀，哎，四个段落，四个段落每一个我都写一个标签，我直接复制了啊，CTRLCCTRLVCTRLVCTRLV，这呢CTRLC。CTRLVCTRLVCTRLV保存在这里，我们一刷新走一个，哎，你看是不是就每一个就都独占一行了，哎，独占一行了，那现在这里边同样是我们的源码，这同样是被我们浏览器渲染后的一个效果，但是跟之前是不是有很大的区别了，为什么有区别？就是因为我在网页里添加了标签，而标签的作用就是标识中。

标识出网页中不同的内容，每个内容都有它自己对应那个标签。我们作为前端工程师也好，作为程序也好，我们的任务就是给不同的内容添加不同的标签，而学习HTM。其实就是在学习各种各样不同的标签啊，非常简单好，但是其实呢，这儿虽然写完了，但是这个东西严格意义上来讲，它也不算是一个完整的网页，但是现在呢，你先区分一下啊，记住了啊，标签有开始有结束，开始结束之间放的是我们标签的内容，或者也可以叫做标签体啊体，待会自己来写一下，但是我要先强调一下，这个结构也并不是一个完整的结构，那完整结构应该什么样呢？哎，来，我把这一堆啊，我先给它CTRLX剪切掉啊，我先留着，哎，留着，那我们在写网页的时候，网页里边应该有一个根标签叫什么呢？HTML同样有开始有结束，有开始有结束叫HTML根标签，什么叫根，树根的根。

根有什么特点？诶根的特点就是有且只有一个，一个网页中有且只有一个跟标签，而我们网页中的其他内容都应该写到HTML跟标签的里边，也就说我写这行不行，我写这行不行，注意这是错的，一定要都要写到它的里边，不能写到它外边，待会我们会说它外边只能出现一个东西，但是这个我们待会儿再说，但是现在你要注意网页中所有的内容，所有网页的内容都应该写到跟标签的里边，HTML里边有两个子标签，一个叫做hide，一个叫做hi，还有一个叫做body，哎，一个叫做hide，还有个叫做body，那注意了，我们提到一个概念，叫做子标签，什么叫子标签？很简单，你看hide和bodyy这两个标签是不是都是在HTL边的内部啊，诶，内部那这种就叫做子标签，在它里边直接在HL。

里边呢就叫做子标签啊子标签但是这么想完了以后吧，其实你会发现看起来就很恶心，很难看，不不方便你去看，所以我们程序员写代码的时候，除了要实现功能以外，我们最好还要确保我们代码写完了是比较好看的，所以一般情况下我们会换个行，比如说hide这我们会换个行，哎，这个nmr呢，我们也会换个行，那这样我们就比较明显能看出来hide和body它是在HTMMR的里边呢，啊在里边呢，一般情况下我们还会给它做一个缩进啊，Table键做个缩进，那这样呢，哎，通过这一个缩进，我们要表示出一个层级的一个关系啊，层级的一个关系好，所以head和body是HT猫的子标签，Headde里边还有一个标签，Headde里边headde还有一个子标签，氦的子标签叫什么呢？叫title。

哎，T同样有开始有结束啊，T title啊，那我们先说hi hi是H天猫子标签，T是hi的子标签，那我问你了，诶，这T和H猫什么关系？哎，我们说了，这是爷爷，这是孙子呗，哎，注意咱们网页里关系。没那么复杂，你有孙子，这待会是有重孙子呀，有重孙子是不得有，有玄孙子，还有，还得有耷拉孙，对吧？你拎不过来了，所以在网页中害的是H的子标签。Title是head的子标签，那这个时候我们就说title是HTML的后代，而HTMMR是title的祖先，如果泰斗还有祖标签呢，它也是H田毛的后代，也就说我们吝的时候我就不吝那么细了，就是诶，要么父子，要么就是祖先还有后代啊，那害的什么作用？注意啊，每一个标签都有每个标签的作用，你学A苗就要把这个每一个标的作先搞清楚。

He表示的是头对吧，你英语学过你就知道he表示的是一个头的意思。Hi表什么意思？Hi表就是表示我们网页一个头部，那这个头部跟那个头部还不一样，这个头部表什么呢？表示的是一些网页中的一些原数据，哎，简单说吧，在hi里你所写的东西，无论你写什么，你爱写什么写什么，这个东西在网页中是看不见的，诶我们说看不见写它干嘛呀？诶这东西是干嘛的，是给浏览器看，或者说是给我们搜索引擎看的，让浏览器和搜索引擎可以。

解析我们的网页，也就是说它是给浏览器看的，浏览器通过这些信息来更快捷的去解析网页是不是给用户看的，不是啊，一定注意，我们看的内容都不是head head中的内容不会出现在网页中。再来看下边一个叫body body什么意思叫身体？Body是我们网页中的主体，也就是说网页里的所有可见内容都应该写到body里，像我们刚才写的那堆这个玩意儿都应该在body里，那所以像H1啊，H2啊，诶，H2啊，他们实际上都是body的一个子元素，所以你要记住的就是一件事儿，只这个东西，只要说你希望用户能看见。就我们播的这些，你说你不希望看见，你爱干啥写啥写，希望看见，就我们播的这些保存一下，我们来看看有什么神奇的效果，这一刷新有变化吗？没有变化，为什么？因为。

网页中我们核心内容是不是还是这堆啊，哎，内容没变，还是这堆，所以没有变化，但是这个网页跟刚才那个网页相比，它就标准多了，刚才我们写那个网页太草率对吧？太草率了，但是这个就是一个比较标准的一个结构了，但是还不够标准，后边我们还要一点点去完善，当然这里边有一个标签，你看title title这空着对吧，Title是干嘛的，它有什么用？哎，我们来看看，我们写点东西，我们写点东西，诶，哈哈，我在哪出现写这么一个啊，随便写一个，这一保存CTRLS保存一下，看在哪出现啊，刷新一下走一个。哪出现？哎，是不是在这儿出现了？哎，在这儿出现了，所以title就是网页的一个标题，同样它也不会在网页中出现，它出现在哪了？出现在标题栏了啊，出现标题了，这是它的一个作用啊，所以时刻注意每一个标签都有它自己的一个。

作用，哎，你要知道每一个标签的作用到底是什么，好回顾一下这一节课的主要内容，你要记住我们网页的一个结构，首先网页中是由一个一个标签构成的，标签是一对肩块，肩块里边是标签名，标签一般情况下有开始，有结束，结束标前面加个斜杠加以区分啊，加区分网页中的结构HTM是跟标签，所有内容都是在HR里边，你可别往这儿写了啊，不能写到外边。然后HTML有两个子标签，一个叫hide，还有一个叫做。Body head里边有一个叫title title是网页的标题，主要显示在这个标题栏。body是我们网页的主体，所有可见的内容都应该写到包里，这些东西没有什么道理好讲，你就给我。

记吧，好，我们停一下。