尚硅谷前端基础 (11)

好，经过了我们的完善，我们终于得到了一个。完整的一个网页的一个基本结构，那这里我们再把这个结构再重新写一下啊，那这里边我们还是先我先把文件啊存储一下，我们叫做一个INDEX5，也就是我们实际上花了很长一段时间，就是在为了引出这个基本的一个结构啊，基本的一个结构，那这个时候我就希望你还是那句话，把这个结构给它记下来啊，把这结构给它记下来，那在这里边我们先写一个注释，首先啊一定注意啊，我们写一个网页的第一个，最上边是我们网页的一个文档，文档声明作用是声明我们当前网页的一个这个版本啊版本，所以这个时候第一个我们是一个监块，这是一个叫什么呀？诶叹号，我们叫做一个dope do tab后边空格一个HTML，这里边不区分小写，大写，小写都可以啊，这个叫做一个文档声明，它的作用就是声明我们当前的网页是HT门五版本的。

然后往下写是我们的HTML的一个跟标签，HTML的跟标签，嗯，这个东西我们来写一个也是写注释啊，我写一个最完整的，这个是我们一个HTML的跟标签跟标签，那这里边注意了，我们再提到一个新的概念，在我们这里边，我们会说到标签，还会说到一个词叫做元素。元素，那这个标签和元素在我们提到网页的时候，这两个概念其实是一样的啊，没有什么区别，所以我说诶，它是HTM跟标签没问题，我也可以说它是这个HTML跟元素啊，跟标签跟元素都是没有问题的啊，都是没有问题的，所以记住一句话，标签就是元素，元素就是标签啊，那可能我在往后的说的时候，可能说元素会比较多一点，但是你要知道我说元素的时候，实际上说的就是标签啊，这里边我们来说一下，我们叫什么呢？网页中的这个所有内容都会写在我们这个HTMMR都要啊，不是都会啊，都要哎，都要写在我们这个根元素的这个里边，一定注意必须要写到根元素里边，也就是S里边，如果你说有一个除外的话，那就是do TB，其他的都要写到它的里面，然后在HTML里有两个子元素，一个我们叫做T。

Head啊，我们叫子元素，Hi的是我们H天猫的子元素，还有一个，还有一个叫什么呢？还有一个叫body。那接下来是这个body是它的一个两个子元素，那这里边呢，为了说格式好看一点，我们看的清楚一些，一般像这种子元素我们会比负元素多缩进一层，那这样我们就很清晰的看到hide和body是它的一个子元素，那hi是什么东西呢？Hide是我们头部的意思啊，Hide叫做网页的一个头部。

Hide是我们这个网页的一个头部，哎，我们说了hide中的内容，诶一般啊，就是没有一般吧，就是不会在我们这个网页中直接出现啊，不会在网页中逐渐出现，它是用来干嘛的，它主要干嘛的，主要用来帮助我们这个。诶浏览器诶或什么呢，或是搜索引擎来解析网页什么意思啊呃，浏览器解析网页我们应该很清楚是吧，就是浏览器要读这个网页嘛，啊那搜索引擎。为什么要也要解析网页呢？你有没有会发现我们平时可能很多的时候会用到一些搜索引擎，无论是百度也好，还是这个谷歌也好，这些都属于搜索引擎，搜索引擎它会有一个程序叫爬虫程序啊，它会用这个爬虫程序呢，把你这个网页中所有的信息给它爬到它的数据库里，然后呢，当我们去搜索这些关键字的时候，就可以从数据库中搜索出来了。但是问题是。

搜索引擎它所爬的这个数据也是属于我们这个网页的一个源代码，它的具体信息还得通过它那个程序上里边再一点点的一点点的去去爬出来，所以这个时候我们就说这个问题，那我们搜索引擎也是需要获取到一些网页的一些原来的数据的，比如说我网页的编码，比如说我网页的一些这个主要内容，搜索引擎都是没有办法直接获取的，所以这个时候我们还需要在我们headd里边提供一些基础信息，比如说像网页的编码，对吧，像我们这个网页的一个主题，我们的title，网页的关键字，还有网页一些描述，都需要从这个headde里边去去寻找，那总之一句话，Hid的东东西就是不会直接出现，它就是给我们的这个搜索引擎也好，还是这个浏览器也好，提供一些这种帮助信息，你像我们之前设置那个Meta，哎，Meta那个东西在浏览器里边就不会直接出现，但是它确实会起很重要的作用，必须得写的东西，然后下边我们来写一下。

哎，下边一个我们叫什么呢？哎，叫做一个Meta标签，我们直接写什么？来一个Meta Meta Meta里边一个属性叫做一个叉side，叉side在这我们直接等于一个UTF杠八，注意属性名加上引号啊，UTF杠八，那Meta是干嘛的呢？Meta其实作用很多，Meta Meta是圆的意思啊，Meta。标签，诶，它用来设置我们这个网页的一个原数据，什么叫原数据？作为一个初学者来说不太好理解，原数据你可以理解成是什么呢？就是与生俱来的，像一些底层的数据，那这东西就可以理解成是一个原数据，那就可能是相当于我们这个网页的一个属性，你像叉赛的，它就属于是一个。原数据啊，原数据就是可能要拿人来讲，可能就是相当于人的那个DNA底层数据，与生俱来的，一般不会变的那些数据属于原数据，所以Meta就是用来设计这些原数据的，那这里我们的Meta用来干嘛呢？这里Meta，哎，用来设置我们这个网页的一个字符集，主要是什么呢？诶，避免我们这个乱码问题的啊，主要用来避免乱码问题的，那这里边这个UT8还是强调不是瞎写的，看一下你编辑器的右下角，这是UT杠八，你这应该也写UTF杠八，如果这是GBK，你这应该也写GBK啊，根据不同的情况去选择下边一个我们的标签，叫做一个t tle叫做一个title title，这里面我们是网页的一个标题。

网页的一个标题，那这个它的作用我们来说一下网页中所有的，哎，这是网页的标题啊，写错了网页的标题是干嘛的？哎，Title中的内容。

哎，Title中的内容会显示在我们这个浏览器的一个，诶标题栏上啊，标题栏上相当于这么一个，其实就是这么一个标题，但是它还有一个重要作用，就是我们说的浏览器，我们的搜索引擎。搜索引擎会主要根据我们这个title中的这个内容，诶，来判断我们这个网页的一个主要内容啊，主要内容什么意思？还是那句话，搜索引擎拿到你一个网页以后，我们搜索一个关键字，这个网页就会出来，那网搜索引擎他怎么知道你这个网页的主要内容是什么，那他需要通过很多的角度去判断，其中title就是一个比较重要的角度，那可能你title里边写了个美女，那他可能认为你这个网站是跟美女相关的，你写了个赵本山，那可能就认为你这个网站是跟赵本山相关的，通过这个title来判断网站的一个主要内容，那title的话，就像我们这种搜索引擎的优化，我们会专门有一个职位叫做一个SEO啊，SEO这个东西一般讲究一点的公司都会有专门人员去做这个事儿，但是对于我们来讲的话，我们一般不会去做这个东西，所以知道一下它的重要性，了解一下就OK了，再深入内容，不用过多设计。你要知道你只需要。

他知道title对于搜索引擎来说还挺重要啊，还挺重要就没得说了，那这就是我们hi标签啊，Hi标签里边的两个内容啊，Meta title，然后下边我们来说body bodyy是什么？Bodyy也是我们这个HTML的一个子元素。Body它也是一个X的子元素，它表示什么呢？它表示我们这个网页的一个主体啊，主体网页中所有的可见内容都应该写在这个body里边啊，写在body里边，所以凡是你说希望用户看见的，你都可以往这个body里写，那这里面我们可以简单演示一个，比如说我们可以写一个H1。

H1H1是干嘛的呢？H1我们简单说一下，H1是网页的一个标题，H1这是页的一个一级标题，那具体细节我们待会再去讲，常用标签我们再说它现在我们先列一下，这是我们一个网页的一个标题啊，网页一个标题好，那这个是我们的这个大标题吧，网页的大标题大标题好，那这个就是我们一个网页一个最基本的一结，最本的一个结构，我希望如果你是初学者的话，这个结构你一定要记下来，哎，如果怕忘了是吧，可以找一个好一点的纹身师傅是吧，把它纹到你的身上啊，你忘了就就看一下是吧，就看一下啊，开个玩笑，别真纹是吧，真纹了不要怪我啊，那这个时候我们来看一下这个结构，你一定要去记住啊，你一定要能记住这个结构，用的时候一定要知道每一个部分都是干嘛的，当然结构上我们进一步还要去填充一些东西。但是。

是那些东西都不是必备的，但是今天我们这里面所有东西都是必备的，都是一个网页里必须有的，包括H1，其实它也是每个网页里都必须有这么一个东西，这个结构一定要给他记住了下去以后可以去多写两遍啊，多写两遍好这个结构我们算是做一个复习，或者做一个总结，然后我们要说之前我们提到一个问题，之前我们提到过一个一个问题啊，一个问题就是。我们的HTML里边有很多的标签，有很多的标签呢，但是这些标签啊，实在是太多了，没有一个人或者你不可能把这些所有标签都记下来，更何况在标签里还有还有属性，所以这些标签用起来会很很麻烦，所以在我们真正开发的时候，我们都会有一个东西叫做文档，文档是干嘛的呢？文档它就相当于是我们这个程序的一个说明书啊，我们编程的一个说明书，那有一些东西我们记不住，我们就可以直接通过这个文档来查询，你叫它文档也好，就它手册也好，总之它是一个我们开发中离不开的一个东西啊，它是一个必备的东西。那这个文档的使用方式有很多种，我们可以上网去查，我们可以通过百度去查，可以通过谷歌去查，或者找一些专门的网站去去查询，但是呢，相对来说它都会比较依赖于网络，也说这个东西你离开网络，你是。

不好不好用的，或者说你网速比较慢的话，你查起来也会比较慢，所以这个时候我就要给大家介绍一个离线的一个文档的一个查看器在哪儿呢。在我的这个S下边，我们soft的，诶有一个软件叫做一个ZZ呢，我们来说一下这是干嘛的，哎，这个是一个离线的文档查看器，什么作用就是可以让你在没有网络的情况下，直接在你本地去查看这个文档，它可以很方便让我们去查询呀，哎去去搜索呀，去看一些文网上的这个网上的一些关于我们这个各种各样语言的信息。

包括HCSSGS，也包括一些其他语言，总之它是一个我们开发中必备的一个工具，必备的一个工具，那这里边还是提供了两个版本，一个是64位的，还有一个是32位的，根据你的系统选择，然后呢，上边还供这两个东西，这两个东西你是不需要装的啊，一般情况下是不需要装的。但是有一些同学你装这个软件装完了以后，他会给你报错什么错误信息，我忘了啊，反正就是缺少什么什么什么东西，如果你报那个错了，你就再把这个装一下，64位你就装64 32位你就装这个叉八六就OK了啊，自己装一下就行了啊，所以这个64就是把代表64X86就代表32位啊，知道一下，那我就直接装个64位的啊，嗯，还是呢，你要分不出来，你就装叉八六，你说你我这不知道我这是64位还是30位，你装叉八六就行了啊，这个软件装起来也非常简单，下载地址还是去你视频跟观看的位置找链接，或者去我们那个网站去找啊，我在那个网站上都放这个链接，或者直接去官网上下载，当然其实我更建议去官网下载，因为官网上下载的版本应该会更更有保证，它可能会应该更新一点，我们直接点击运行。

然后稍微等一下。软件装起来可能稍微有一点点慢啊，稍等一下。那在它的安装过程当中呢，我们正好再说一说别的东西，那也就是说，诶先别说了是吧，他出来了啊，出来就没办法了，那我们直接点一个这个同意啊，出现这种玩意儿都点同意就不用说了，然后直接点击E次O，它就直接装在默认位置了，你也不用改了，因为它本身呢，也不是很大啊，不是很大，你直接装在默认位置就OK了，他需要跑一会儿，待会儿可能还要弹出这个确认框，但是这个东西就没什么可说的，就是就是等就完事了啊，就是等就完事，我们稍微等一下。

但是这个东西我们说了，它虽然属于一个叫做离线文档查看器啊，我们点是虽然属于一个离线文档查看器，但是它一上来的时候啊，你看我现在安装完了，桌面上就多了这么一个书的图标啊，我给放在这儿来啊，我就放在这儿来，我直接双击它打开，虽然它叫做一个离线文档查看器，你看人家的这个这个Logan写的就是DOS for everywhere，哎叫什么呀，文档，哎叫什么为每个人定义的文档，其实它应该叫everywhere是吧，在任何地点都能使用的一个文档，它虽然是叫做离线文档查看器，但是默认情下，你看这这这什么也没有，也就说默认情况下它是不会给你提供文档的啊，不会给你提供文档的，你还需要自己去先下载，然后才能够使用，我们来看看怎么下载，在这儿它是一点，诶在这是可以下载的，是一个位置，或者可以干嘛呢？诶我点击这个。

叉子还点不了，在这儿我们稍微等一下。诶，他告诉我这个连接的时间超时我们先取消，取消啊，这是一个位置，可以点击这个文档的下载，还有哪呢，在这个这个兔TH啊，兔TH工具这一点开也有一个位置，这也是到我们这个文档的窗口，它分两栏，左边这栏显示的是我已安装的啊，已安装的，然后这个available，这表示什么呢？表示我可以安装的，可以使用的，当然现在你可能一打开这什么也没有，别着急，我们需要先去刷新一下，它需要先去这个网上去加载一下列表，他告诉你连接的超时别着急，重试就完事了啊，重置完事了，因为这个是一个国外的软件，所以服务器也是在国外，所以使用的时候，诶多少可能会稍微的有一些网络不太顺畅的情况下，呃，不太顺畅，没关系，我们就直接点一下，诶别着急，稍微等一会儿就行了，多点几下就行了，你像这种我这个就反复再出来啊，我们就直接点就完事。

不着急。是今天这个网络呢，不是特别好啊，不是特别好。当然这个时候其实有的时候你网速比较慢的时候，它加载速度会稍微有点慢，那你只需要去多尝试几次，但是呢，它很多情况下也并不是这个网速的问题啊，也不是网速的问题，有时候可能就是这个，因为是国外的网络嘛，可能跟国内的网络稍微有点不不太那么通畅，所以你可以换个时间再稍微试一下，总正在用的时候可以多尝试一下，因为用用国外这些服务就是会有一些问题，然后在这个available列这这个这个标签，这列举的是我们现在所有的一些可用的文档，但是这些文档我们还没有去下载下来，所以我们在这儿可以找到我们要用的那个文档，或者你可以在这搜一下，或者直接找一下，比如说我们今天要用的是HTML，你看这写一个H5的图标，选中这个东西啊，选中这个，诶直接呢，诶直接双击。

呃，他现在告诉我是，呃，文档的这个位置是一个只读的，也就说现在这个文档它不能写，那这块怎么办呢？找到我们这个ID，找到这个prefer prefer这块它会有一个目录，这个目录就是你文档的这个存放的目录啊，直接复制一下这个路径，直接复制一下这个路径，然后粘到这个。

我们来看一下啊，粘到这个，找到一个文件夹吧，找到一个文件夹直接粘过来。粘过来，然后回车哦，那就是告诉我们说这个路径干嘛呀，它不存在啊，他找不到这个这个路径，找不到这个路径呢，这个时候我们其实也还有另一种方式，也就是说我可以直接给它换一个路径，哎，我们来看一下啊，直接点击do塞，哎，不是do side，点击我们这个ID的performance，这个路径是它一个默认路径，但是有时候这个路径它其实位置不是那么方便，我们给他点一个路径，我给他换一个路径啊，找到我的一个这个桌面，桌面呢我放到我的计算机，我的C盘，我放到一个div，在dev下边，我新建一个文件夹。新建一个家，叫做dog塞。然后呢，我直接把这个目录设置成我的这个文档的一个存放的目录，那待会儿它下载文档的话，就会下载到这个目录，那你那个如果有这个问题，你可以改一下，如果没有改不改都行啊，改不改都行兔th do set available，这时候还是一样，找到这个HTMLHTML在这儿，然后这个时候当漏就能点了啊，点一下download漏的，因为刚才那个径应该是只读的，其实改一下那个路径的属性也OK，但是现在我先不动它了啊，不动它了，然后在这儿你会发现出现这个进洞条，就表示它现在正在下载，同理，如果你想用的文档是别的文档，你想用go的文档是吧，你想用ground的文档直接在这儿去下载，没什么好说的啊，只要有网能下载啊，但是还是有的时候那个网速不太好的时候，可能需要稍微等一下啊，稍微等一下好，那这个文档我们就下载完了，这文档怎么看呢？诶你直接双击它进来，就看到这个文档的页面。

当然这个文档还有一个缺点，就是这个文档它是一个。纯英文的文档，纯英文档的话，它会有缺点，缺点就是我们作为这个呃，中国人来说，或者使用中文的人来说的话，看这玩意儿会稍微有点有点难受，对吧，或者说你英文不太好的话，看着会比较比较痛苦，但是优点就是中文文英文文档相对来说比较新，也比较这个权威，内容也会比较的准确，所以英文文档可能现在你看着有点别扭，但是这东西没什么好说的，那你就需要去慢慢的去看啊，一点点去习惯。

然后在这的话，你首先你双击这个文档在这打开的啊，先不管这个打开的话就是文档的一个首页，它会有一个大概的一个这么一个参考页面，你看这个main root主要的这个跟标签是不是就是HTML啊，哎，N人，然后呢，下边是这个原数据的文档的一些数据的标签啊，原数据的都是大家hi里的像什么呀，Section的一个root，就是我们这个区块内容的一个跟标签，然后这是内容的一个分块，然后这是一个文本的一个内容的一个分块，就是说下边它会把我们所有标签做一个分类，分类以后它里面的顺序实际上是按照这个字母这个顺序进行这个排序的啊，然后你可以去根据需要去看一下，然后呢，这是标签的名，你看element元素的意思啊，元素的意思，Element标签名，然后description是对这个标签的一个描述，你看写了这个HTML元素啊，它表示这个什么呀，HTML网页的一个跟标签啊，Document表示文档在。

在这个里面，在我们前端开发里边，Document一般也就是表示网页啊，文档就是网页，网页就是文档，所以呢，它诶一般都是表示这个根元素，所有的其他元素必须哎是它的一个什么呢？是这个元素的一个后代元素啊，是它的一个后代元素，所以这个东西描述起来就非常的准确了，如果还不清楚，直接点进来，它里边会有一些更加详细的介绍，可以帮助你去了解到这个内容啊，所以这就这么一个文档啊，一定要现在用起来可能会比较痛苦，但是别着急，慢慢来用，随着用的时间长了，很多东西自然就能看懂了啊，就能看懂了。呃，Tributes属性是这个标签里面可以用的属性，然后如果你不喜欢这种方式的话，在这点开HTL，你看点开以后，它有两个分类，一个类叫attribute，一个类叫attributes，还有一个类叫tax attributes就是我们这里面的所有的属性啊，所有属性tax是表示我们这里边所有的标签，这里边就是。

直接按照字母顺序序排序了，你看人家说了，我这一共有几个标签啊，哎，在我们HTML里边一共有145个标签啊，一共有145个标签，然后这里面你可以查到一些这个标签的一个说明，比如说我们之前是不是用过一个放标签啊，放标签那我直接搜一下放，然后你看这是不就有了，哎直接一点开，然后在这儿就会看到这个放的标签一个描述啊，你看写语法啊叫做什么呢？HTMMR啊，用法AMR的一个字体的一个元素，定义这个字体的一个什么呀，字体大小，颜色，还有字体哎，附什么呀，为它里边的那个内容，Content就是标签里边那个内容叫做content，然后还给你列了它的attributes属性，Color。

Face还有size是不是都给你列出来了，哎，都给你列出来了，所以在这儿也可以通过它去查一下，有不清楚的直接去查一下，然后你注意他还给你个描述了。写什么呢？Do not use this element什么意思？Do not use，不要使用这个元素啊，不要使用这个元素，为什么？我们来说一下，因为这个元素，这个标签它的出现时间比较比较早了啊，比较早了，它最早出现其实就是为了设置字体的颜色、大小啊，还有字体格式这些东西，但是我们想一下，之前我们讲了一个网页分成三个部分，结构、表现、行为，像字体颜色、字体大小，字体格式这些东西它属于什么范畴？哎，它属于的是我们这个表现的范畴，所以既然是表现的话，这个事儿应该由谁来做，诶应该由CSS来做，所以在我们这个前端开发，我们这个几个语言中，我们有一个很重要的一个东西叫做自己的事情，自己做什么意思，HTML就负责定义结构，所有表现的事，HTML管不管，不管全都由什么，全都由CSS来处理，CSS只负责这个表现，我怎么让这个页面更好看一些。而涉及到这个结构相关。

的全部由这个H天门来控制，而同理我们的GS也只控制我们这些行为，也就说每一个语言都自己各干各的事儿啊，自己负责自己那件事儿，互相互不干扰，这是为什么？他就是为了当你这个程序互相干扰以后，我们维护起来会很麻烦，所以这个也是我们的一个思想，也就说我们的结构、表现、行为三者要分离，所以这个标签是不推荐我们使用的，诶那这时候你就会说了，老师啊。

那不推荐我们使用，你干嘛给我们讲了，哎，不推荐使用，但是不影响我们拿它做一个举例子，因为我们讲它主要是为了引出这个属性，这个东西，所以我们学习阶段用一下是没有关系的，但是在真正的开发阶段，这个东西是绝对不建议大家去使用的啊，所以了解一下，所以其实总结归纳所有跟这种表现相关的标签在我们的这个。网页里都是不推荐使用的啊，那这个就是我们说的一个这个Z这么一个离线文档，那这个以后也是它是一个我比较喜欢使用的一个文档，它确实比较权威，里边蕴含的东西也比较也比较多啊，也比较多，后边随着使用，我们还随着去，还要随着去深入去了解这个文档的一个使用方式，那当然很多初学者让你们去看这个的话，可能对你来说确实是很痛苦的，所以它并不是一个唯一选择，还可以看什么呢？呃，百度。

百度找到我们这个打你直接搜一下W3死故啊，W3死故，W3死故呢，在这儿你会发现有一个W3SCHOOL一个在线教程，这是一个，这就是一个我们这个HTML的一个这个文档啊，文档就是不仅MLCSS，包括GS在这里面都能找到啊，都能找到那这里边也同样跟那个内容差不多，但是它相对来说会旧一点啊，会旧一点，但是好处就是中文的，并且准确性上也没什么太大问题，你想看的话也是HTM2往下点HTM2再往下找，找到什么呢？找到我们说它会也有一个标签列表啊，你想看这个放的一样的，找到F开头的FF。放。放的是不是在这儿啊，哎，它也写了一个不赞成使用，但是它里边的细节你可以看一下，包括一些例子啊，都可以看一下，所以这两个文档呢，我们都可以去用，这个网站也比较好记，w3school.com点点C啊，两个东西我们都可以作为一个参考去去查看啊，会去查看，当然文档这个东西我们一边随着使用，还要随着更多的一个了解。

不要着急，我们慢慢的一点一点来好这节课，我们先说这么多，停一下。