尚硅谷前端基础 (3)

好，欢迎收看上硅谷的前端视频，我是讲师李立超，这节课我们来学习HTML，上节课我们介绍了这个网页的一个组成部分，W3C。我们的。老大哥，哎，我们的大哥大它规定了我们这个网页由三个部分组成，结构、表现，还有行为，还记得三个部分对应。哪个语言吗？结构对应的是我们的HTL，表现对应的是我们的CSS，行为对应的是我们的javascript，那今天我们先来哎聊聊我们的结构，也就是我们要学习的第一个语言，叫做HTML啊，HHT毛这东西太简单了，诶，叫什么东西呢？诶，叫做hyperex markup language啊，像超文本标记语言，一看到这个名字啊，很多初学者可吓坏了，哎呦，我的妈呀，怎么这么长啊，对吧？但是其实啊，就是我们。

看这个语言呀，或者学习什么东西啊，一定注意，千万不要被他的名字所吓坏，哎，我们看新闻你会发现，就是我们发发的一些新闻稿，你会发现其实就是字越少越重要，哎，在我们技术这其实有时候也是这样，字越少可能越难。那像这种，你想A字毛这名起的J老长J老长的，那像这种语言一般情况下都会比较什么呀，比较简单啊，当然这可能是我胡说的是吧，但是HTML这个语言确实比较简单，别的语言咱们随着说，随着再去研究。HTM2叫做一个超文本标记语言，哎，不要看它长。我们一点点来说，先说第一个叫做一个文本，什么叫文本呀，文本这个东西作为一个程序员来说啊，如果你是一个程序员，这概念太简单了，不用提了啊，都不用提了，但是如果你是一个计算机的初学者，哎哟。

这还真是有点难，什么叫文本？什么叫文本？嗯？如果这东西要深究啊，还能聊一会儿呢，还能聊一会儿，但是现在我们刚开始学这个东西，我还是希望咱们有一个更简单的一个入门的，所以文本的这个概念，我先不去给你一个标准的解答，我现在就告诉你什么是啊，什么是？简单来说，你用纯文本编辑器所写的东西就是文本。哎，比如说最简单的在我们Windows里边，我们是不是有这个note pad有这个记事本啊，哎，这个记事本就是一个纯编辑辑，我在这写一个，我写一个hello，诶，那这个hello就是文本，当然你在其他的文本编辑辑里写的也OK，像什么呀？哎，Subli，哎像什么这个这个bris，哎，像什么h builder，哎，你可能用这个web storm，可能用这个eclips，还有什么加等等等等，在这些里面写的东西都叫。

纯文本，所以你在写的时候，你只需要看一下你用的这个软件是不是纯文编辑，只要是你就可以写，它就是纯文本啊，它就是文本，那纯文本有什么特点，纯文本你注意它里面只能写字啊，只能写东西，只能写东西，你说哎呀老师，我这是想整个图片行不行不行，我整个视频行不行不行，整个音频行不行不行，它里边只能写字，只要是字往里边写一点问题没有，但是字以外的东西都不能写，甚至你说我想把这个字调大一点。我想把这字改个颜色行不行啊，也不行，你说老师你胡说八道。胡说八道，你选中地点格式字体。

我整一个整大点，来个小二走，你行不行啊行，确实行，但是注意这个字体的大小也好，字体颜色也好，它这个调整是在哪调整的。只是在显示的时候调整的，当你换一个编辑器去打开这个文件的时候，它的大小就会变成另一个大小，不行，待会儿你可以试试是吧，你用记录本保存完了，你换个编辑器，你再打开，你发现大小还是那么大个，因为这个大小指什么？只是在这儿显示的大小，它不是存到了这个文件里面，所以注意我们的这种纯文本，它只能存储什么。数据，数据无关的什么格式啊，背景啊，图片啊，颜色呀，字体这些东西都不能存，只能存数据啊，只能存数据，那我们说一个典型的，比如说我这有一个word word word word我写一个hello，问你了，这叫不叫文本，我们记word里边我也就写1HELLO，这叫不叫文本，哎，注意只要是word就不是文本，只要是word就不是文本，为什么？哎，因为word里边，你想一下，Word里边我存个图片，存个音频，存个视频，是不是都没问题，哎，它都可以存，所以像word这种格式，它叫做副文本。

他这个文，因为他可以存很多的信息，那我们写代码，你能不能word写，哎，不能，当然你说你非得较，你非得较劲，你说我就跟word里写，也不是绝对不能写，但是写起来你会很痛苦，没必要啊，没必要，所以这个时候，现在你要了解，你只需要记住一句话，在我们纯文本编辑器，在像记事本这样的纯编辑器里边写的东西叫做。文本啊，其他里边都不叫文本，而且严格讲应该叫纯文本啊，叫做纯文本好，所以你就记住了啊，我们程序员编写的程序，无论你是Java，无论是GS，无论是Python，无论是PP，无论是我们的LCSS也好，我们所写的代码都是纯文本，所以你能不能在记事文里写代码呢？可以写是吧？待会我们会说，当然它里边也会有些问题，但是它可以写，但是你能不能在word里写是绝对不行啊，是绝对不行的。好，那既然叫做超文本标记语言，那为什么叫超文本呢？哎，超文本在这儿你可以简单理解超什么意思，哎，超一说什么什么超就是比较比较厉害的意思，对吧？那你说超文本就是很厉害的文本，什么意思呀？那文本里面不能存图片，不能存视频，但是网页里有没有，哎，有，所以超文本你可以简单理解成超过了文本，诶当然这个时候。

胡说八道啊，胡说八道，我就先帮你记一下抄这个东西，待会我们再去解释，哎，再解释抄是什么？所以写网页非常简单，你打开一个记事本，咔咔一写就是一个网页啊，比如说我写一个吧，我写一个，我写些什么呢？

哎，我在这儿啊，吟诗一首，写一首什么诗呢？哎呀，一上来就想写这个锄禾日当午，哎，但是还好我忍住了，对吧，我写一首诗啊，写一首有文采一点的啊，哎，叫回乡偶书啊，回乡偶书，哎，回乡偶书二手啊，二手哎，二手哎，然后这写一个其一啊，当然二手，这我应该给加一个括号啊，加一个括号二首嘛，哎，括号二首，然后其一，诶作者是谁呢？作者叫贺知章，哎，贺知章它内容什么呢？哎，内容叫做少小离家老大回，诶相因无改鬓毛催，哎，儿童相见不相识，笑问客从何处来？诶诶写这么一首诗，那这里边注意我这首诗我写完了，我是不是就是一个。文本啊文本，那网页也是一个文本，那我能不能说我这个就是一个网页呀。

没问题，完全可以说它是一个网页，那这网页，那既然是网页，是不是应该可以通过浏览器打开呀？诶，那我们需要先。保存一下，诶，摁你键盘上的CTRLS，诶出现这么一个存储的对吧，在这儿让你写名，写名这个名可有讲究了，你在这儿想写什么名都行，那一般我们网页首页一般我们叫index，所以我起个名叫index啊OK，或者你叫hello，你叫ABC，你叫什么名都行，名没有什么太限太大的限制，但是注意后边这个可注意了，后边这个点，后边这个东西我们叫做扩展名，扩展名是干嘛的？扩展名它决定了我们文件的格式，也就是说它决定了最后这个文件有哪个程序打开，而如果你希望你的文件是被let题打开，那我们的扩展名应该叫做HTML，哎，那可能你之前还看过别的扩展名，不管了，现在我们最简单的最常用的就是HTML，所以你要做的就是现在看我啊，我把文件存到了桌面上，然后起了一个名叫做index.html。你可以起别的名，但。

但是如果你是初学者，最好我怎么写你就怎么写，为什么呀？诶，听话不挨打对吧？你写的跟我一样出问题了，你可以跟我这个对照不一样，那可能不一定是不一样出的问题，可能是，呃，你写其他东西写的不对出的问题，所以作为初学者来说，最好老师怎么做你就怎么做啊，听话不挨打啊，当然你不听话我也打不着你对吧？好，我在这儿直接保存一下，保存完了以后，你会发现桌面出现了一个叫做index.m2，它的图标换成了浏览器的图标，那我的浏览器，我默认的浏览器是Chrome，所以显示Chrome，你的默认浏览器如果是IE，它显示应该是IE，如果是360，那肯定360，如果是搜狗，那肯定是搜狗，总之哎，你默认浏览器是什么，它的图标就应该是什么，如果不是你写的可能有问题啊，可能有问题，那建议你装一个Chrome啊，建议装一个ome，后边我会给你提供一个。

大链接啊，但是现在你先看我怎么写，写完了以后我直接双击打开，你会发现什么呢？诶你看刚才我写的这些东西是不是在这儿都给显示出来了，哎，显出来了当然跟我这个格式不太一样，但是别着急，内容也都显示出来了，所以现在这两个关系是什么关系？诶这个啊，我给它拖到这边，这个我放这边，诶这个东西叫什么？这个叫做源码，这个东西叫源码，而这个东西叫什么？这个东西就是我们浏览器渲染出来结果，也就是说我这个源码被浏览器渲成了这个样子啊，这个样子非常简单啊，非常简单，我们再回顾一下刚才的一个步骤啊，刚才一个步骤你待会儿需要自己来做一下，第一步打开记事本啊，打开记事本怎么打开的，开始菜单，在这直接搜一个notepad回车就出来了啊，直接搜一个notepad。

你那个如果是WIN10是不是有一个那个叫叫小娜对吧，直接点一下那个小娜搜索也行，找到你的记事本，呃，你建议你不要先直接在桌面上去新建文本文档，先不要新建，因为他可能存在一些问题，还没说遇到问题你可能解决不了，尤其是老师不在你身边，所以你我建议你我怎么来，你先怎么来，开始菜单，打开一个记事本notepad回车，然后这儿随便写，什么鬼玩意儿，随便写点就行，我建议你写一个你喜欢的诗，如果你不像我这么有文采，你就写回乡偶书，对吧，你写它就OK了，粘过来写上去，诶当然最好呢，从练打字的角度来讲，你最好自己自己试试写写啊，自己试试写熟悉一下，尤其是计算机没有基础的同学，有基础同学你爱怎么着怎么着，我也不，我也不管你对吧，但是没基础同学千万不要嫌麻烦，开始慢慢咱就慢的。

慢慢练一点点就快了啊，写完了以后，然后CTRLS保存，存储到你的桌面，随便写一个叉叉叉点HTML，然后通过网页，通过浏览器去打开就OK了，自己先来做一下，待会儿我们来讲它的一些问题啊，讲一下它的细节，好，我们还是先来听一下。