粉丝1618获赞4196

好的,大家,那么接下来呢,我们就对网页的这个标准结构里边的这几个标签啊,我们做一个解释说明,看看这些标签呢,都有一些什么样的作用啊?起到一些什么样的功能,对吧?我们一个一个的从上往下说, 先说第一个,这个呢叫做一个叹号刀太夫,这个是什么东西呢?这叫做文档声明,这文档声明起到什么作用呢?就是用于告诉浏览器我当前的这个 html 文档啊,采用的是什么版本? 是用于告诉浏览器浏览器当前这个 html 文档采用的是什么版本。那告诉了浏览器有什么用呢?那就是告诉浏览器你将用什么标准去解析我当前的这个 html l 文档,比如说什么意思呢?我这一个 dog type html, 这表示什么呢?表示告诉浏览器我当前的这篇文档是用 html 五写的, 那么你将采用 stml 五的标准来解析我这篇文档,听懂吧。那么比如说我这里右键,我再去创建一个文档啊, 注意看,大家看这里是不是可以选择呀?啊?我可以选选选择创建 h 五还是 h 四的,还是一些其他的标准的一个文档,那么比如说我们去创建一个 h 四的,对吧?叫做,哈喽, ok, 注意看,那么这个呢,就是 html 四的文档声明,那么当我这个页面一直行的话,那我已经明确告诉浏览器了,说我这篇文档采用的是 html 四,那么你将用 htm 四的标准来解析我当前的这个网页以及里边的内容和标签,能听懂这意思吧,哎,所以说文档声明就是告诉浏览器我这个,哎,我这篇文档是用的哪个版本?然后呢?那浏览器,浏览器, 浏览器将按照什么版本解析我当前页面按照哪个版本去解析当前页面,对吧?哎,当前是不?之前是不是给大家介绍过呀?我当前这个也叫文档,也叫页面,是不是也可以叫网页啊?哎, 啊,别,别把这个概念搞混淆了,之前的特别白听。那么这个文档声明呢,有一个非常重要的点,就是他必须写在当前 htm 文档的首行啊,必须 写在当前 html html 文档的首行,或者叫做可执行代码的首行,比如说我上边有点注视,这有关系吗?哎,没关系啊,叫做可执行代码的首行也行。 好,那这就是高科泰吧,大家注意一下,那么下一个,下一个叫做 html, 这个 html 啊,他是整个 html 文档的根标签,他是根标签,那么根标签意味着我整个 html 文档中所有的标签都得 被他包裹,对吧?哎,都得包裹在 html 跟标签中啊,整个 html 文档中所有的标签都必须包裹在 html html, ht html 啊,跟标签中啊,整个 ht 啊, hhtml 啊, htm 整个文档里边所有的标签都得包裹在跟标签中。说白了这俩标签的作用啊,这,这个,这对标签的作用啊,就是表示我文档开始了,文档结束了, 看我,哎,那一刻为 htm 表示文档开始啊,你浏览器开始解析吧里边的标签,对吧?解析到这个位置结束了,其他的啊,没有了,听懂吧,就是表示开始和结束的,但是呢,这里有个浪, 这个浪啊,是个属性啊,这个浪,浪是个属性,这属性,至于什么是属性,咱们后边再详细的解释,但是这个浪呢,咱们先解释一下,浪表示的就是浪个位置。语言含义是什么意思呢?含义是 告诉浏览器,或者是告诉搜索引擎。我当前的这个文档是英文的网页还是中文的网页啊?就是用于说明当前文档啊,使用的 语言,对吧?哎,当前文档使用的语言,例如我们说 en 呢,表示英文网页,这一次杠 cn 呢啊,表示表示中文网, 说白了就是你的这篇文呐,到底主要是给英国人看呃,还是中国人看?就是给哪国人看?就是人之间交流的语言, 这就是一个什么意思呢?比如说现在我这是不是 en 表示英文网页啊,我这一执行,执行了之后有什么效果呢?他这个浏览器吧,有的时候识别不了,哎,现在已经识别了, 这是为什么会出现他说帮不帮你翻译这个事呢?大家注意我们这个浏览器啊,当我们安装的时候呢,实际上他有一个默认的语言啊,设置高级,可以在这里看一下。 那我的这个谷歌可是我们浏览器他是不是中文的语言呐?因为他跟我本地系统环境有关啊,我们本地系统就是中文的,所以说我安装浏览器默认的语言是中文啊,也就是说主要是中国人看的,那么这时我写的这个网页呢? 我的这个浪鬼浪标志的是英文网页,那也就意味着你要浏览的这个网页啊,他是英文的, 而我的浏览器呢,是中国人主要看的。那这时浏览器有一个特别好的功能是,那他要不要把这个网页里边的内容呢,按照英语给你发, 翻译成中文,帮助你浏览呢,听懂吧。哎,那这个就是语言的一个作用,所以说我这样一刷新 f 五,他说啊,他发他识别到了你这个,呃,浪是个 en, 是个英文的, 我要不要帮你翻译呢?把里边所有看到的这个英文字母都给你翻译成中文,比如说我写点内容吧, 网页内容,我来个 h 一啊,来个哈喽哈喽,这是不是英国人英文呐,我这一直行他,他就帮你翻译了,对吧?哎,说这识别到你这浏览器这个,这个网页是个英文的啊,我浏览器有个功能可以帮你翻译成中文啊,一翻译就翻译过来, 听懂这意思吧,哎,说白了就是你的这个网页啊,主要是给哪国人用的,那假如说我这是要改成这是杠 cn, 那说明我这个网页是个中文网页,专门主要给中国人看的。那这时我看看还有没有那个翻译没了,刷新刷新,刷新没了,是不没有那个翻译啦,哎,那这个就是这个浪啊的一个作用,好,那么这个就是 html 标签,下一个叫做嗨的标签, 这个嗨的标签呢,指的是 h t m l 文档的头部标签啊,说嗨的呢,是叫做,呃,头部标签,头部标签, 头部标签,这个害的头部标签,头部标签是用来干什么呢?首先我们要知道一点,就是害的中的内容,害的标签中的内容啊,他不会再 网页中直接显示,这点大家要注意一下,说害的中的内容内容补,通常通常补 不会在网页中直接显示,那这害的是用来干什么呢?他就是用于描述当前我这个文档的一些信息的啊,描述信息用的啊, 用于描述当前 html 文档的一些信息的,那什么样的信息呢?例如, 例如我这个文档的标题呀,对吧?与其他文档的关系呀,然后我当前文档有没有什么样式啊,有没有什么行为呀?等等这些的, 就是这些内容啊,他不会在页面中直接显示出来,用于描述信息的,听懂吧,哎,就是专门用于描述 一些信息的,那么主要有哪些呢?这里先接触俩。第一个叫做 mate 标签, mate 麦塔呢?是什么呢?我们说整个害的都是用于描述的,那麦塔用于描述啥了呢?他用于描述原数据的啊, m eta 麦塔标签呢?他是用来用来设置网页的原数据的,这时大家蒙圈, 原数据,那么什么是原数据啊?哎,我们说所有的原数据叫做描述数据的数据,我们就把它称为 原数据。哎,描述数据的数据就叫原数据,咱们先把这句话写着,大家先有个印象,一会呢咱们针对这个麦特标签呢,详细的说明,他呢,还是挺重要的,听懂吧。哎,非常重要,咱们一会 详细说他啊,下一个,下一个呢,叫做抬头标签,抬头标签,抬头标签呢,这就是标题吗?翻译过来大家应该也知道了,叫做文档的标题, 文档的标题,文档标题呢?它显示在哪呢?就是显示在浏览器的标题栏上,说抬头中的内容显示在浏览器的标题栏上啊,比如说什么意思呢?我搁这里改一下,叫做网页的标准结构, 我这一直行,注意看,在哪呢?在这呢,对吧?哎,这就是网页标题对吧?之前没改之前是不是叫这个呀?现在叫这个,这就是文档的标题,就是我既然他是个文档,那你文档里边有内容,内容,他整体是不是得有个标题啊?哎,所以说这个抬头啊,其实 也是非常关键,推推这个抬头,加上刚才我们说的那个迈特标签非常关键,抬头呢,他可以告诉浏览器,告诉搜索引擎,我这个整个这篇文档的主要内容是什么,就 如同咱们平时用的文章,文章我们是不是也得有个问,也得有个标题啊?标题是不能主要概括你这篇文档的主要内容啊,哎,这就是抬头,那么抬头以及 这个迈特标签对于搜索引擎优化,也就是所谓的 seo 啊,起到了至关重要的作用。一会呢我们会详细的给大家说。 好,那么最后一个呢,就是这个包的标签,那么包的标签啊,那就是整个页面的主体啊,叫做页面的主体,整个页面的 啊主体,也就是说你只要是希望在页面中显示的内容,你就都把它写到包的标签中啊,就是页面中所有可见的内容都写在这个包的标签中, 比如说,当然我这里写了一个哈喽了,对吧?我们来个叫,这是第一个标准网页,然后一直行是不?就在这啊?你在页面中想显示的内容啊,都把它写到 body 标签当中去, 好吧,好的,那么以上呢,就是对整个一个标准结构的这个网页呢啊,这几个标签呢做了一个说明,哪一块用来说明什么问题的啊?就给大家做了一个解释。


哈喽,各位小伙伴们大家好,欢迎来到前端课堂,从今天开始呢,我们将给大家讲解前端相关的知识,那这节课呢,我们来完成第一个前端程序, 我们学习前端啊,无非呢是希望找到一份前端相关的工作,从而呢能拿到更高的薪资待遇,无论是二十万或者是三十万的年薪都好,那都需要我们踏踏实实的一步一个脚印的慢慢来学习前端相关的知识。 这节课呢,我们带着大家一起来完成第一个前端程序,让大家感受一下,其实学习前端真的很简单, 我们只需要两个步骤就能完成第一个前端程序,也就是说网页程序了。第一个步骤呢是我们使用记事本来进行编写代码,具体的操作呢就是我们选择一个盘符或者是一个盘符下的某一个 路径,然后呢创建一个文件,这个文件命名为 welcome 点 html, 如图所示。接下来呢,我们只需要把这样一段代码放进去啊就可以了,这就是我们的第一步,使用记事本来编写代码。接下来呢,我们来给大家操作一下, 现在呢我打开了我的电脑,然后选择了我一个盘符,我这里呢选择的是一盘下的某一个路径,大家也可以在你的电脑当中选择任意一个盘符。注意大家要创建一个空的文件夹,比如我这里的文件夹叫圆码,然后来存储咱们接下来要写的这个代码了, 在这里咱们怎么操作呢?空白处右键点心键往下找,是不是有一个文本文档呀,就是咱们所说的 txt 文档,咱们创建一个,创建好这个文档之后呢,首 首先要做的第一件事就是把这个文档的名字改一下,这个文档现在呢叫新建文本文档,咱们把它改成 welcome, 写成一个单词, 那这个单词我们也建议大家首字母经大写好吧,然后它变成了这样一个文本信息。 现在还有问题,你们很多同学会发现你所创建出来的文件跟我不一样,不一样在哪呢?你没有后面这个点 txt, 为什么你们没有呢?那是因为你们缺少了一部设置。我们现在需要做的是点开文件夹顶部的有一个叫查看的选项, 然后点开之后呢,下面呢会弹出这样一个框,这个框在后边你可以看到他有一个叫文件扩展名的选项,默认这个选项是未勾选的,你需要把它勾选上,勾选 选上之后呢,你就可以看到你的文件名跟我这个保持一致了,那么后面也会有点 txt 了。为什么要强调这点呢?因为这个后面这个点 txt, 我们要把它改成点 html, 这是必须的。 然后我们回车会弹出一个重命名,就问我们是否允许这样操作,我们点试就可以了。然后此时你会发现这个文件他变样子了,前面的图标变成了一个浏览器的图标。 注意,这个浏览器图标你的不一定跟我一样,它所变成的是你电脑的默认浏览器的图标,我的默认浏览器是可入门浏览器,所以你看到是这样图标,你的可能是 i e, 也可能是百度,也可能是其他的浏览器, 明白吗?这个大家不需要操心,那这是我们的第一步创建文件,好,创建完这个文件之后,选中这 这个文件,右键点开打开方式,然后选择记事本,如果你在这个位置没有这个记事本的选择,你就点击其他应用,就是选择其他应用,我们来给大家演示一下, 选择其他应用,然后往下找,一定会找到一个记事本的选项,把它打开,那么现在大家所看到的就是我们已经打开了这个文件,然后呢我们现在把这个文件呢需要放大一些字体呢,我们稍稍改大一点,为了大家能看到更清楚一些,咱们改成小三号, 小三号还是稍微有点小就可以了,基本大家看得清就行了。然后接下来呢,大家可以复制一下我们这一段代码,放在这个里边点保存就可以了。当然呢,很多东西 对复制这件事可能并不认可,没关系,如果你感觉复制不好,你也可以自己写,那么自己写要有注意事项, 所有的代码编写的情况都必须在英文的输入法状态下,比如说我现在是个中文输入法,这行吗?不行,你必须给他改成一个英文的输入法,比如说嗨喽,你看对吧?然后在这个里边咱们写一对尖角号,就是左右的大于号和小于号写入一个 html, 回车再写一个 html, 而且呢你需要在第二个 html 的前面加一个斜杠, 然后在这两个中间呢回车往后呢按推波按键往后退格一下,这个退格呢是为了格式好看,然后再写一对尖角号,害的在后面呢再 写一个斜盖 pad, 我们现在所写的代码,这个 html, 这个就是我们网页的一个 专属代码,你可以这么来理解,就是一定要写的为什么叫专属啊?就是一定要写的代码,然后这个嗨的代表浏览器的头部信息,具体头部信息长成什么样子,一会我们运行再给大家看,好吧,然后在这中间回车 啊,退格一下,保持他的良好的这个格式,然后在这里我们输入一个推头,也就是标题,再输一个斜杠推头,他都是成对出现的。注意这个剪脚号一定是英文状态下啊,那这里边呢,我们可以写一个中文的文本了,我的第一个网页。 好,接下来呢,在包的下面会退退格一下,咱们再来写一个包的,就是在嗨的下面写一个包的, 再来写一个斜杠包的,此时呢在这个包的里边我们也回车一下,回车之后呢,在这里咱们就可以写文本了,比如说欢迎来到 百战程序员写一个叹号保存,那现在这个代码就与我们这里的代码其实是一样的,唯一不同就是这个文本信息不同,这个文本信息不会影响到我们网页的一个展示。 然后写完代码一定要记得做一件事,什么事呢?就是 ctrl 加 s 保存, 如果你观察到你的名字的旁边有一个星号,代表你没有保存,如果你保存了之后,他就没有信号了,所以一定要记住按一下 ctrls 保存,然后保存之后呢,把这个文件给关掉,这样的话咱们的第一步 就完成了,使用记事本来编写代码这件事就做完了,那么在整个的编写过程当中呢,我们是有注意事项的,第一个注意事项就是我们文件的后缀一定要以点 html 结尾,也就是大家所看到的我们这个文件大家刚刚所修改的点 html, 这是必须的。 然后在整个编写的代码的过程当中,这个箭头必须保证是英文状态下听书的。刚刚我们说了, 在写整个代码的时候,除了你要写中文的情况下,都必须切换成英文来进行编写代码,明白吗?因为我们知道中文的尖角号和英文的尖角号是完全不一样的, 我们可以打开这个文件,以记事本的方式再给大家演示一下中文它是什么样子。在下面如果中这是中文的情况,英文的情况是这个样子,明显能区分出来中文和英文的差异性对不对?绝不能使 中文好吗?可以使用后面这个英文状态。好,我们把这个删掉了,再重新保存一下。 第一步我们已经大功告成了,这一步骤并不困难吧,大家跟着我们的操作,然后第二步就更加简单了。第二步我们只需要以浏览器方式打开,怎么打开呢? 右键打开方式,以浏览器方式打开即可。回到我们这个代码当中,我这个默认其实他已经是浏览器文件了,所以我双击就已经能打开了,我们先关掉他。 如果你们现在这前面并没有显示一个浏览器图标的情况下,你右键点打开方式,选择一个浏览器的打开方式,明白吗?或者是其他更多应用,然后选择一个浏览器,这个浏览器目前呢是没有需求的,你使用什么浏览器都可以,我这里边默认是谷歌的浏览器,我就使用谷歌了。点, 点击确定,大家可以看打开了,打开之后,在这个页面中你会看到一些信息,第一个信息是左上角会呈现我的第一个网页,这就是我们说的网页标题,来源于代码的哪一个部分呢?我们把这个代码在以记事本的方式打开, 来源于我们嗨点里边的这个推特文本信息。我的第一个网页跟他是对应的,所以大家看到长成这个样子, 再往下这还有一个文本信息,欢迎来到百战程序员。那这个信息呢?对应的就是我们代码中包的这个里边的这句话看到了吗? 我们现在先不要去理解这些内容,每一个都是干嘛的,我们只需要按照我的操作,大家能展示出来这个信息就可以了,后续呢,我们会一个一个详细讲解。那大家可以看到这是不是就呈现出来了,你的第一个网页就已经存在 在了,非常的简单。好,那这两个步骤我们就完成了我的第一个前端程序。 那接下来呢,我们来考验一下大家,做一个实时的效果反馈,看看大家在本节课学习掌握的如何。 网页文件是有其特殊的后桌名规则的,对不对?我们改过对吗?以下正确的事来看答案, a, 标签后桌文点 txt, 这个正确吗?不正确,这个是错误的,我们把它改掉了,对不对?因为默认的文件是它 后缀名为点 html, 这个对不对啊?哎,这个是对的,我们确实把这个 txt 改成了 html, 对不对?那至于后坠名 welcome, 这是不对的,这是我们的文件名称,当然这个文件名称也不一定非要叫 welcome, 你也可以改名。 我建议大家在最初的学习的情况下,你不要想着去举一反三,你只需要我讲什么,你学什么就可以了,当你哪一天把这些知识学的融会贯通了,那你再去做举一反 满三的情况好吗?因为咱们程序啊,有很多细节啊,是我们在讲课的时候呢,故意忽略的,因为这些细节呢,会给大家带来额外的干扰, 明白吗?所以大家我怎么写就按照我的写法来进行操作好吧,后桌名为点浏览器,这不可能,不以,不可能存在中文的情况,对不对?所以正确答案选择 b 答案来,我们来看第二题,以下是编写的标签符合规范的事,第一个是 html, 符合规范吗?不符合,错在哪啊?错在这个尖角号必须是英文的,不能是中文的对吧? b 答案呢? b 答案也有错误,当然不仔细观察,你们可能忽略了这个斜杠在哪呀?这个斜杠一定是在 htm 没有前面,而不能在后边吧,对不对?所以 b 答案也错了, 来看 c 答案, c 答案对不对啊? c 答案是正确的,他没有任何问题,那么 d 答案错在哪啊? d 答案是少了一个斜杠,对不对?好,正确答案选择 c 答案。 如果这两道题呢,大家都可以很快的搞定,说明本节课的知识大家已经学到位了,那么这节课呢,我们就给大家说到这里,感谢各位聆听,咱们下期再见!







