尚硅谷前端基础 (5)

好，通过刚才的学习呢，我们已经可以编写了我们的第一个网页了，那你主要需要做的一件事就是需要把这个网页的格式给它记住了啊。但是其实。你在写这个网页的时候呢，可能会出现一些小的问题，比如说第一个问题。现在我这些网页都已经打开了，这边浏览器这边是编辑器啊，现在我它关上，我在关上啊，这个网页刚才我其实是保存到了这个桌面上了，桌面上以后呢，我现在想打开，打开很简单，我直接双击就可以打开了，对吧，直接双击，但是呢，我要想编辑它怎么办呀？诶双击的话默认就是用浏览器打开，但是我要想对它里边内容进行修改呢？诶那这个时候稍微会有点麻烦，那我需要去点击右键，它会有一个打开方式，你需要选中这个记事本，然后对它进行编辑，当然还有一种可能，你这里边压根儿就没有记事本啊，然后你就需要去选择默认程序，当然这块的话会稍微有点麻烦，我就不建议你去改了，因为我们一般也不会直接去用记事本去编辑，所以呢，如果就记事本来讲，我们最简单的方式直接打开一个新的技术，Not the pad。

遮，然后把这个东西拖到记事本里，然后在这一块就可以对它进行编辑啊，是这么一个东西啊，所以这里边呢，如果没有的话，你就打开一个寄盒给它拖进去就OK了啊就OK了，所以一定要熟练的去操作这个电脑，还有像我这种方式是吧，当我们这个两个窗口的时候，你想让它左边一个右边一个，那怎么办呢？你可能你你你可能是这样的，对吧，你要左边一个右边一个怎么办呢？诶拖着一个想去右边的往右边拖，使劲拖，你看这时候出现一个篮筐，一松手，它就站左边一边，右边一边啊这个呢，同样你想放左边了，往左边一直拖，就站左边一边，那这样就可以一边看一边写了，你要想换方向一样，这放到左边，然后呢，这个给它拖到，哎，右边隐形啊，它是一样的，好，这是我们的一个问题，然后还有一个比较重要的问题啊，我给它关掉，有的同学呢，他不习惯通过这儿去打开这个记事本，他可能习惯什么呢？哎，我直接在桌面上又建一个新的一个。

文本文档，诶比如说我叫一个这个hello，诶hello.ts诶hello，那这个时候注意你在这创建这个文档的时候，它这扩展名在这就就已经给你写好了，是一个TXT，而我们要写的是一个网页，你一定不要忘了给它改成HTML啊N但是有一些同学那个你再去给他新建完了文件啊，我还给它删掉，你新建完了文件，你会发现你这里边没有扩展名，哎，他可能就随便写了一个hello，点一根条，注意这样可不行啊，这样可不行，我们来说一下为什么没有，因为在默认情况下，我们计算机的这个扩展名它是隐藏起来的，也就是说它默认情况是不需要你不让你看的，所以作为我们程序员来讲，扩展名这个东西是我们识别文件呀，以及我们使用一些编辑器呀，很很常用的一个功能，也就是说对于我们来讲，这个扩展名是必须要打开的，你要是不打开，很多功能你做起来。

它不方便，所以我们需要先把这扩展名给它打开，怎么打开，打开你的文件夹，随便打开一个文件夹啊，随便一个文夹就行，它里边有一个组织啊，WIN7为例，WIN10类似啊，WIN10类似组织里边有一个文件夹和搜索选项，文件夹和搜索选项下边有一个查看啊，有一个标签叫查看，查看往下，往下有一个叫做隐藏已知文件类型的扩展名，它默认是勾上的啊，你看我改过来勾上以后，你看这个时候你看文件扩展名还有没有了，哎，就没有了，就隐藏起来了，为什么？因为它避免一些普通用户去改扩展名，导致我们程序出现一些异常情况，所以它默认情况下这个勾是勾上的啊，所以我们在这干嘛呢？我把这勾给它取消掉，然后点击应用，这个时候这个扩展名我们可以看到，所以这个时候你才可以真正的去改这个扩展名，所以如果你右键新建的形式，一定不要忘记打开这个扩。

改名，当然如果你那个是WIN10的话，我印象里WIN10这块应该还会有一个更简单的方式，你不用点进去，好像有一个标签，有一个查看，你直接点完查看，在这个位置就应该有一个扩展名，那个你可以看一下啊，看一下文字描述可以看一下，如果找不到，你就按照我这种方式去改就OK了啊，就OK了，好，那现在你像这个扩展名我们一改就可以改了，直接诶F2改名的快捷键，我们直接改成一个叫做HTL就OK了啊问你是否选择是就行了啊，当然这个我们现在没什么用，我这给删掉，好，那这个是我们说的一些注意事项，但是实际上像我们刚才我在使用这种记事本去编写我们的这个网页，其实它的体验不是不是特别的好啊，它的体验并不是特别的好，所以我们在开发的时候往往还需要安装一些功能比较强大的文本编辑器来帮助我们去编写代码。

那这种编辑器有很多很多，那由于我们是初学，所以现在呢，我不去让你们装一些功能比较复杂的编辑器，我们就装一些最最最简单的编辑器，我们来尝试了，先熟悉一下，那我们先说一下记事本，记事本是我们Windows自带的，之前我们也提到过这个事儿，我们在真正开发的时候是不会去使用这个记事本去开发的，因为记事本存在很多很多的问题啊，总之你就记住了，我们编写这个文本文件的时候，能不用记事本，尽量就不用记事本，你说除非我这没辙了，哎呀，没别的用了，那我就用记事本，那你就用了，但是尽量能不用就别用，因为他会给我们带来一些这种呃，未知的问题吧，就是也不能说未知吧，他的问题很很很明白，就是因为我在保存文件的时候，它会给我文件的编码前面加一些其他的乱七八糟的东西，影响我的文件的一个加载，它是问题是已知的，但是这个问题如果你是一个初学者的话，会感到。

很奇怪啊，很奇怪，但是我们还是说那句话，我们在学习的时候，老师讲给你的，老师说给你的，那基本上是一个比较。是一个结论吧，是一个最简化的一个结论，很多的时候它里边的一些细节情况，我没有办法说那么那么的细致，所以像我说的记事本说最好不要用，所以你也不是说以后哎呀没有东西我就真的一点不用了，你说我这实在没有了，不用记事本，我就我别的我用不了了，那这时候你就只能用记事本，所以我跟你说最好不要用，你去灵活去掌控一下学知识千万不要学死了，哪怕说你说老师我就不相信你说的，我就自己用了，哎，用也没关系，出了问题你再去改，其实也还行，这样的话，其实这个知识印象还会比较深，但是如果你自己的探索能力比较差的话，那还是那句话是吧，听话不挨打，你就听我的就完事了。好，那现在记事本不用了，我们就需要有一个记事本的一个替代品，那我们用什么来替代记事本吗？工具有很多，那这里我们推荐一个啊，或者说说一个我比较常用的一个工具，叫做notepad加。

加notepad就是记事本意思加加plus plus它表示是一个增强版，所以notepad加这个工具你就可以直接理解成是一个记事本的一个增强版，诶他解决了一些我们这个记事本存在的一些缺陷，并且他写起东西来也会更爽，也会让你更舒服，实际上还会让你的代码写的时候会更加的漂亮啊这是我们说包派加这么一个东西，那这个东西呢，我们来先来安装一下，怎么安装，诶，但是因为我现在实际上已经装好了，对吧，我已经装好了，所以在这里呢，我先把我的这个卸载，卸载完了以后我再装一个新的，诶那与此同时呢，诶，你不要看。

你没有，你说老师我就不用卸载了，你的卸载这我是不是就不用看了，嗯，你这么想也没问题，如果你的电脑操作已经很熟了，诶安装软件卸载软件已经很熟悉了，那你可以忽略这个过程，但是如果你是一个初学者，平时没怎么接触过电脑，没怎么接触过计算机的，那这个时候卸载的过程我建议你也仔细的看一下啊，仔细看一下，首先卸载一个软件，我们先打开我们的控制面板，控制面板怎么打开WIN7很简单，直接开始菜单，控制面板就进来了啊控制面板就进来了，WIN10的话，那玩意儿，WIN10设计挺缺德的，那控制面板但是不好找了啊，他可能不太建议我们这种呃普通用户去用这个控制面板，但是我们开发的时候一定得用控制面板，所以WIN10的时候，WIN10里边有那那个那个那个小娜，就是这这会有一个圆圈或者一个框，你可以在那儿去输东西，那个是吧，你直接在那搜一下控制面板也行，或者其实举例子可能就像像这个我直接搜一下控制面。

哎，我可以直接用中文搜啊控制面板哎，然后回车也可以进到这个画面，诶，总之无论你是什么系统，你要下载软件先进到这个画面啊，这个画面当然你那个可能看上去跟我的不太一样，你那可能东西一个一个列的非常非常多啊，别着急，看这儿还有一个查看方式，你选成类别就行了啊，当然我习惯用类别，你说我就习惯用这方式啊，我就习惯用这小图标，用这方式那任真挑选你喜欢的，你就用就完事儿了，这东西没有什么固定，你只要能找到就行啊，我还是习惯用类别，在这儿有一个程序，我们直接点这个卸载程序，我要卸的是note PA叠加在这儿，你找不到的话，你直接摁一下你键盘上那个N，那这样所有N导头的程序就都出来了，我这个note PA加在这儿，直接右键点击卸载，点击解除安装。

诶，然后点击这个，诶是就完事儿了，它这个东西非常简单，然后关上就OK了啊，这样这个软件就已经卸载完毕了啊，可以说是非常简单，没什么技术含量，装也简单，这个卸载呢也简单，现在我们大部分用的软件都是这样的，我给你们提供软件，我也尽量给你们推荐一些，诶安装起来，使用起来，卸载起来都比较容易的软件啊好，那现在你看我桌面这个note加这个图标也没了，那我们来一起再装一下，那装这个软件第一步呢，我们需要先去下载软件，下载软件很简单，直接去百度，百度你去搜一下notepad加价啊，Notepad价。然后呢，直接点开这个主页啊，主页它这里边呢，我们来看看啊。

哎呀，这个网站会稍微的有一点点的慢，因为毕竟不是我们这个这个国内的网站，所以你可能需要稍微的稍微等一下啊，稍微等一下打开这个网站以后呢，其他的也不用看了，我们直接找这个download download表示的是一个下载啊，我放到中间吧，点那个download下载。哎，那现在你看最新的版本是7.7.1，但是你看到我这个视频的时候，可能已经有个新版本了，那这东西你可以就直接选择这个最新版本去下载，那这里边你看这有，哎，在这个位置，你看这写了一个note外加的一个安装器是吧？Install yeah installer就一个安装器，32位的，这儿还有一个是64位的，你根据你的系统选择就行了啊，你是32位系统，你就装32位的，你是64位系统，你就装64位的，这东西在哪看计算机右键属性它会有一个。操作系统啊，64位的啊，你你看我这个我就应该装64位的，你那如果这写的是32，你就装32就完事了啊，那这里边其实如果你说老师不行，你这玩意儿我不会看呀，我看不见，我看不着我这个多少位系统，那没关系，你不知道多少位的，你就装32位的，一般的话问题也不大，还有一点就是建议现在你的系统是32位，你就是32位吧，是64位，就是64位的，无所谓了，但是以后如果你再去重新安装系统，重新安装的时候，那你一定要安装64位的系统，哎，因为32位系统相对来说它支持的内存会比较的小，随着我们开发的深入的话，我们用的工具越来越多，它对你的内存的要求也会越来越高啊，所以尽量安装的话都装这个64位的啊，这是官网下载啊，官网下载地址，官网下载地址的话会稍微的有点有点慢啊，或者说你可能你个人不是特别愿意去去搜这个东西，那你也可以去。

哪啊，你也可以去我的，哎，我的网站就是我的名字点com，然后呢，我在这儿放了一个专门放一个链接，叫做下载，你可以在这儿下载一下，就是以后我们上课所用的软件，我都会在这儿放一个链接，我都会放一个百度网盘的一个下载地址，为什么要放它呢？因为以前的话经常会收到同学的反馈，问问题是吧？诶老师你这个东西啊，代码啊，在哪下载的呀，诶这软件在哪下载的呀，经常会收到这些问题，所以我觉得这些问题回答起来也没有什么太大意义，所以这个时候我就直接给你提供一个页面，你可以直接到这个页面里边去下载百度云的速度相对来说也会比较的比较快一些，那你就自己去下载一下就完事儿了啊，下载一下就完事了，然后我们课上所有资料啊，我都会放到这个位置啊，你需要的时候直接上那去找一下，包括代码哎，包括一些软件，当然现在我的视频还没有录完嘛，所以资料还没放全，所以当我你看到这个视频的时候。

这个页面我应该已经补充完整啊，好，那我就不再去下载了啊，我就不再下载了，这块你我建议你的话用百度云下载地址写个提取码就OK了，呃，但是的话有可能的话，你在下载的时候，这个版本可能已经很旧了，所以如果你追求新版本的话，可以去官网去下载啊，保证一个最新版本，但是这个软件新旧无所谓啊，无所谓，我这个已经下载好了，我直接找一下在我的下载的目录下，在这儿呢啊，我直接在这儿，我CTRLC复制一下，这个是64位的，因为我的是三六十四位系统，我这装64装32都行啊，你的也是自己找一个你定的版本，这个东西装起来非常简单，直接双击。

诶，然后点击试试完了以后中文简体是吧，你选语言是吧，你是哪国人你就选哪国语言，一般的话我们都是中文啊，一般都是中文是吧？诶我直接点击OK，然后点击下一步，诶点击我接受这块呢，它会让你选择一个目标文件夹的一个安装目录，这个目录我们来简单的说一下，尤其是对于初学者来说，目录的话，呃，你像我的话，我其实只有一个C盘，我没有什么CDE，我没有什么DEFFG那一盘，我只有一个C盘，所以我安装软件没得选，我只能装在这个C盘，但是有一些同学可能更习惯把这些软件装到de盘呀，E盘呀，F盘，这都无所谓啊，这都无所谓，但是其实我建议我们这些软件都装C盘就省事了，因为你你下次重做系统，咔一块隔了，然后再重新装就完事了，因为你你有些软件，你你留在那个D盘的话，C盘重做系统的话，其实依然不好用，所以这时候我还是建议装到这个C盘，但是看你个人情况，反正我一般的话装软件我都。

是默认目录啊，你要想改自己改随意啊，但是要求你改的时候两点要求，第一个要求这个路径，这个路径中不要有特殊符号，或者说尽量不要带中文什么特殊符号，你前我同学可能写这名，可能这路径里面他比较可能比较萌一点是吧，他直接是打的什么呢？哎，直接打个特殊号，比如说这个这便写一个，这写一个可能在路径里直接打了一个，比如说就这个吧，打这么一个符号，哎，你这打完了，你看着挺好看对吧，看着挺好看，但是当你软件运行的时候，这个符号有可能出现编码的问题，我们的软件不能识别，就会导致你的软件不能正常启动，所以我建议你的软件的目录当中不要。

有中文不要有特殊符号，中文还好说，特殊符号尽量就不要带了，像这玩意儿尽量不要带了，像这种空格的话，其实能没有啊都尽量没有啊，能没有都尽量没有空格，其实也会有一些隐患，尽量就是纯英文的，那像我这个program file就默认目录我就不改了，这带个空格的，空格的话问题也不是特别大啊，也不特别大，我直接点击下一步啊，你要改自己改啊，自己改，改完了以后一定要知道你自己装哪了，这就是我们说的第二个要求，就是你要知道你的软件装哪儿了，也就是说把你的电脑规置的立枝了，对吧，什么软件装哪了，你自己能找到啊，以前在上课的时候去给同学去指导是吧，我刚说完这句话，我说啊，你装完软件一定要知道你自己装哪了是吧？刚说完，然后可能出问题了，让我去给你调试，我这一问，软件装哪儿了？咔一拍脑袋。

忘了，诶刚说完就忘了，所以这个时候我建议你啊，你的软件装到一个固定的位置啊，装到一个固定的位置，你能找到的，那我就是默认路径了啊，然后点击下一步，这些东西都不用管，默认的下一步。然后呢，这里边我们有两个选项，下边那个不用管它啊，什么乱七八糟不用管它，上边那个create short cut on desktop，在桌面上创建一个快捷方式，建议你勾上啊，但是这个勾不勾也都行啊，建议你勾上，勾上以后点击安装，装起来是非踌的啊，一点击完成就运行了，这就不用管了，它是一个介绍文档，估计你也看不懂是吧，看不懂给它关上就完事了，不用看它啊，不用看它，然后你就会发现你桌面上出现了一个note pad叠加这么一个图标啊，你我放到这块位置，到时好找啊，然后它的界面就这样，也是一个纯中文的界面，在这里你就可以直接去编写这个网页了，哎，比如说我写一个我们之前那个网页啊，我写一个HTML，我们的跟标签，哎，其实你看看跟记事本啊，没什么太大区别啊，没什么太大区别，然后呢，小的话，你可以调这加号，把这字可以给它诶放大啊，可以给它放大啊，我给它放调下来。

这个是我们说的一个HTMR跟标签，它里边有两个子标签，一个叫做hide，一个叫做body，哎包head里面有一个子标签，我们叫做一个title title呢是设置我们这个网页的一个标题的啊网页标题的，那这写一个吧，写一个这是。

这是我的第二个网页啊，第二个网页包里里边呢，我们简单点写，我就直接写一个H2H1，诶你看它会有一些简单的这个提示，对吧，简单提示比如说写一个H，诶H1诶然后呢，我们来一个H1，写一个我直接复制了啊，这是我的第二个网页，CTRLCCTRLV复制粘贴我页写完了，同样你还是需要去保存啊，CTRLS保存的快捷键我选到桌面上起个名，我叫做一个INEX2点还是不要忘记扩展名叫做一个H2TML，然后在这儿我们这文件是不是就有了呀？诶直接双击你就可以打开这个文件，那我们的第二个网页也就写完了，当然其实你会发现整个写的过程当中，它跟我们的这个记事本倒是没有什么太大的区别，诶的确如此，文本编辑器嘛，都是诶大同小异的，但是这个时候其实你会发现。

跟记事本现在会有一个最大特点，就是你看它这里边，当我保存完这个文件以后，当我把这个文件保存成HTML文件以后，它这些标签是不是会有一个变蓝色的一个效果呀，诶这种效果我们叫做高亮显示，或者叫语法的一个高亮显示，那这样的显示的话，我们就很能区分出这个文字，还有我们这个网页中的一个标签，那这个也是一个它的一个优点啊，一个优点，所以这几次课的话，我们再去写代码，我们就暂时先用这个note pad叠加来编写代码，当然我们还会有一些功能更加强大的一个文本编辑器啊，后边我们随时讲，随时再去引入，随时再去使用，但是如果你是初学者，还是建议你跟着我的这个步骤一步一步来，好，接下来你要做的是下载并安装好这个note pad加加，然后尝试用它来写一个你的第二个。

行业还是这些标签不要忘记，好，我们先来停一下。