尚硅谷前端基础 (12)

嗯，经过了之前一段时间的学习，基本上我们把这个网页的基础的一些知识我们就给它搞定了，那接下来呢，我们就可以来进一步的对我们这个网页的一些细节进行扩充，进行学习了，呃，但是还是在往下讲之前，我们还要说一个问题，那之前我们最开始的时候，我去写这个网页，我用的实际上是我的这个。记事本啊，Windows自带的记事本，那后来呢，我们觉得那个东西太不好用了，于是我们进一步换成了我们现在用到的这个note太加，但是实际上note太加在用的时候，虽然它也要有一些高亮显示，也有一些简单的提示，但是用起来总的还是感觉不是很方便，很多东西啊，像注释这东西，我们还得自己手动去写，很麻烦，所以呢，我们真正开发的时候也不会说去采用这个这个note特加这种方式，它的作用其实就是一个记事本的一个扩展，哎，我们对一些文件做一些微调，做一些快速调整的时候可以用它，但是真正大规模发的时候，它就不太适合了，所以我们这里边还需要一个更加强大的一个文本编辑器来满足我们开发的一个实际需求，那这种文本编辑器实际上有很多可能比较出名的是吧，像我用过的像sublime啊，Sublime，像这个item啊，Item这些都是比较出名的，还有我在桌面上没有体现出来，叫一个break。

对吧，有很多很多这样的文本编辑器啊，我也用过很多啊，从前用过的，现在用过的，我估计可能我自己用过的可能就得就得十种左右了，那这个东西实际上是非常非常多的，所以这个东西对于初学者来说，实际上选择起来会很痛苦，我有这么多种文本变译器，而且功能还都挺强大的，那这里边我到底要用哪个呢？哎，其实虽然有很多种文本编辑器，但实际上每种文本编辑器都有，呃，都不是完美的，诶有缺点也有优点，那我经过了这么长时间的使用，那基本上我确定一个相对来说比较比较好用的，诶就是这个，呃，Vs code啊，微软出的一个，呃，We studio的一个code这个软件，这是这个是微软近几年出的一个非常非常好用的一个文本编辑器啊，功能呢很强大啊，功能很强大，用起来呢很方便，并且最重要它是免费的，但是像我们程序员其实还比较。

主流我们用可能比较多是sublime sublime可能前些年会用的比较多，但是这个东西呀，嗯，它也很好用，也很好用，嗯，但是呢，由于也是一个国外软件的问题，所以它的网络不是特别好，像一些插件的话会很麻烦，并且经常会出现不好用的情况，而且最重要的它还是一个收费软件，所以这个软件我就不推荐你们用了，所以那这一回呢，我们就直接采用一个，呃，可以说是我经过这么长时间的一个使用经验，发现的一个最好的一个，最合适的一个，最适合我们用于软件，但是它可能不是最完美的，但是它可能呃，我认为这应该是最适合我们的，但是还是那句话，我们学习一个东西啊，没有固定的情况，没有一个固定的说，诶老师说这个软件好，那我就必须用这软件没有，诶用哪个软件个人习惯不同，你喜欢用哪个，你就就去用哪个，这个东西无所谓，但是你只要用一个你熟。

记就行了，但是工具虽然好用，我们还是那句话叫什么呀，我们要去用工具，但是不要去依赖于工具，也就是工具虽然好用，有这个工具的候我们能写，没有这个工具的时候我们同样也能写，你做到这点就OK了，好，那我们现在先来安装一下这个Vs code，但是我这已经装完了，对吧，装完了还是先来卸载一下，演示卸载控制面板，卸载程序，找到这个Vs code，直接输一个V，诶V，哎呀，我这它应该是输入M，因为它是微软出的吧，Microsoft Microsoft，哎呀，微软的东西太多了，我们找一下在这Microsoft一个微studio code啊，我们直接给它右键卸载掉，呃，这个软件其实现在用的人越来越多啊，用的越多，基本上大部分现在都在使用这个软件，也是一个最好用的，微软的话有优势，因为它本身在中国就有很大的市场，所以这个软件对于中国人的使用来说，基本上跟国外用的话没有，没有任何任何的区别，也没有网络的区别。

所有插件都可以正常去使用，那这个时候我们来装一下，装的途径还是那个啊，我们在网站上也给你提供下载链接，如果你能找到这个包，自己找一下就OK了，Vs code的，或者去官网下载最新版本也行，现在我的是一个1.37，还是你是多少位你就装多少位，我装的是64位，双击点击运行，哎，然后点击我接受下一步，哎，我就直接默认路径了，你要选自己再选，我不管了，下一步，然后这儿也是下一步，哎，然后呢，这里边注意有几个选项，第一个创建桌面快捷方式，建议勾上，然后第二一个将诶这个这个都勾上啊，都勾上，嗯，这个就最好不要勾了啊，所以这几个勾的话，其实你就注意了，倒数第二个不勾，剩下全都勾上啊，全都勾上，然后点击下一步，诶点击安装啊，这个时候它就会读条，你会发现好的软件安装起来也往往都会比较的省事，那不好的软件安装起来往往也很麻烦，所以你看它的安装。

的方便程度可想而知，它一定是一个比较好用的软件啊，我们直接点击完成就装完了，那现在我们这个软件就已经就已经启动开了，但是呢，你现在看到我这个软件，你那个软件刚装完了以后，跟我这个应该有点不太一样，因为刚才我这个软件它没卸干净啊，没卸干净，因为我这之前装了几个插件，比如说现在这实际上我装了两个插件啊，我把这两个插件啊，我给它卸载掉啊，我直接给卸载啊，这个同样也给它卸载。然后我给它关掉，再打开一下，你打开那个软件的效果应该是这样的。

应该是这样一个状态啊，首先一上来它是一个纯英文的一个界面啊，纯英文界面，那看到这儿不要着急，我们一点一点去调整一下啊，一点调整一下，那现在先看这啊，首先呢，它显示啊，大概分成三部分啊，这儿左边一栏，然后这一栏，然后在最右边一栏，最右边就是我们主要的一个编辑区域，也就说到时候我们去写代码的时候，也主要是在这个区域里边去去写啊，去写中间这栏呢，它是一个我们的一个文件列表啊，文件列表它也不一定是文件列表，因为我们这儿是不是有几个这个小按钮啊，你这点击这个按钮，这个栏会自动切换，第一个作用就是我们文件列表可以显示我们当前正在打开的文件，第二个是搜索，你第一次点的出来，再点就消失啊，可以搜索一些内容，这个呢是我们的版本控制工具，现在我们还没用呢，不管它，这个是我们debug，我们调试的一个工具，同样也还没有用，我们也不管它，第五一个，第五一个我们叫做extensions，叫做一个扩展的管理器，或者叫做一个插件的管理器。

这个插件是一个什么概念呢？就是我们现在用的这个软件，它的功能诶存在可能功能也很强大，但是功能还不完整，往往我们需要往这个软件里去添加一些诶新的功能啊，添加一些新的功能，这些功能我们就称为一个插件，所以插件的东西简单理解就是我们可以通过插件来为我们一个编辑器来扩展新的功能啊，所以你点的它的话，它这是一个搜索框，这个搜索框里边呢，你可以去搜索，诶搜索你要安的插件啊，要的插件，那比如说现在我们来看我的这个软件，现在是一个英文界面，对吧？英文界面，那我现在如果想安一个插件，要怎么安呢？安一个中文插件怎么安呢？在这直接搜啊，直接搜ine，搜一个Chinese，然后它就会自动去找啊，自动去找，那你会发现这是不是有一堆的这个翻译的一个工具啊，哎，翻译的一个这个包，你把它可以稍微的调整一下，它是不是能看到这个包的这个。

这个内容啊，这儿还能看到这个下载量对吧，你看中文简体的，中文繁体的，这也是一个繁体的是吧，等等等等，有各种各样的一个插件啊，有各种各样的插件，那这里面呢，其实啊，用的时候还是我们看一般情况下那个下载量最多的，并且官方的一定是最好，你看这厂商写的是Microsoft，你说这个是微软出的官方插件，那基本上这个东西用起来是诶是没有什么问题的，所以在这里面我们直接。选中第一个这点击一个install，诶，In install，它就会自动去联网安装啊，那你看很快就装完了，所以这是微软出的东西的好处，用起来很方便，很快我们直接点击这个restart重启软件，这个时候我们就得到了一个中文基软件，是不是非常的简单啊，非常简单，好，那这个东西我给它关掉，关掉以后啊，刚才那欢迎界面我没用啊，关掉以后，然后再看，那还有些时候呢，我们可能觉得这个这个主题不是特别好看是吧，黑漆漆的，可能我们希望它更更亮一些，那怎么办呢？哎，还是插件直接这个里边我们除了可以安装插件以外，我们还可以安装什么呢？安装一些这个主题，比如说可能我习惯用的一个主题叫做一个a Yu，有这么一个主题啊，直接搜一下，第一个就是还是直接点击音，当然你在搜的时候，它下边应该会有一个诶预览的效果，它这可能没加载出来，那不管它了，诶你看它需要加载一下，你看这是一个白。

色的主题是吧，后边还有这种颜色，还有这种颜色，有不同颜色的主题，那我直接点击install，它还是会自动安装，安装完了以后，它会自动对这个主题进行切换，然后你看这在这儿是可以点呀，诶默认上边是这种dark的，我换一个哎。这是什么颜色啊，就是这个黑色对吧，我们不用管它，直接点那个设置，诶有一个设置颜色主题，我应该是有一个这个颜色会比较好看，对，那我就选了这个颜色，那这个时候我们会发现这个主题看起来是不是就呃变了一个样子好不好看，咱们单说，但是它就是换了一个风格啊，换了一个风格你也可以自己安装，如果你不喜欢的话，你也可以直接点这个插件，点这儿它有一个禁用，哎禁用就恢复到一个默认状态啊，用哪个都行，看你自己一个需求，总之呢，诶就是你要会通过这个扩展编辑器管理器去安装一些插件啊，全装一下好。

那这个东西整完了，整完了以后呢，我们就要说一下，那整完了以后，我现在要。写代码啊，对吧，等完了我是要写代码的，那首先我们就要打开我们这个。那个网页的那个HL文件。怎么打呢？在south这我的代码是不是都在这个里，诶code里，那现在对我来说，这个code可能就是相当于是我的一个项目啊，我的一个项目，所以我可以直接右键点击code，你注意它会出，当你安装完软件以后，它会出现一个叫做open with code，也就是说它会把我们这个用我的这个呃，Vs code来打开我这个目录，我直接点我们看效果一点击，我点击完了以后的话，其实你会发现什么呢？诶在这儿就会多出了一个code，那这个目录啊，如果没有，你点一下给它点开多出一个code的，那这个code的表示什么意思呢？表示我们正在打开的一个目录，你说这个目录现在就作为我的项目，目录已经被我打开了啊，已经被我打开了，然后你看code里边是不是有一个文件夹，哎，零一叫做intro intro里边有五个文件，从INDEX1直到这个INDEX5，一共有五个文件，你要想新建文件，直接点击这个新建文件这个图标，这是新。

建文件夹，这个是刷新，这个是，诶全都折叠起来啊，全都折叠起来，那我直接点开，我这儿点击一个新建文件啊，新建文件来我写个名零一啊零一我们叫做一个测试吧，诶我们叫做一个测试，我们这个边界器啊，点一个HTML，不要忘记写这个扩展名，那这里面注意了，我们在真正开发的时候是尽量不要用这个中文名啊，尽量不要用中文名，就是不是尽量吧，开发的时候绝对不要用中文名，但是我们现在都在上课，所以我为了诶清楚一点，你看的时候清晰一点，所以我在这儿采取一个中文名方便你看，但是我们真正开发的时候尽量不要用中文的名字，好，那我这写完了，那现在我要写代码，怎么写代码了，诶之前我要写的话，我得写，哎，前面先写一个，你看方便地方来了，是不是do tap就有提示了，哎，然后我再写一个HTM2，你看是不是也有提示了，哎，也就是说其实我就不用再输入这些监括号了，我就直接输入这个H。

TML，你看直接提示回车是不是就补全了，哎，补全了，同样我要想写headde，直接一个ED headde出来了，Headde里边我们有一个Meta Meta Meta，你看还有utf，你看到这儿了吗？你可以通过上下去选择回车，是不是这个编码就出来了，但是它这个编码是一个老版本的，那我们现在的话，其实你就直接写一个叉set，等于一个UTF杠八就完事了，并且也是跟这个编码是一样的，跟它右下角跟这个编码一样就OK了啊，然后往下再写还有什么呀，还有我们这个title，你看都不用写那些东西了啊，我们写一个hello。

诶hero hello，然后再往下写，哎往下写还有一个谁呀，还有一个body，诶你看它写起来就快的多了啊，快多了，我写一个H1H1我写一个哈哈哈哈哈啊这一保存这个网页是不是很快就写完了，诶很快就写完了，所以很方便它会有一些有一些这种这种提示啊这种提示，然后呢，诶你可能会觉得诶这个字好像稍微有点小，这个字我们也可以调整，我看看在哪啊，在我们的这个。

找一下这个位置，应该是在这个。刚才我看到一个，哦，在这儿。我们需要找一下，它会有一个地方可以去设置我们这个字体啊，字体大小等等一系列的，我们来看一下啊，因为这个东西好多我也没我也没找啊，在这它有一个首选项，在文件里面有一个首选项，首选项里面有一个设置啊设置设置呢，在这儿你看edit的一个方size，哎方size这是一个设置自大小，这是14，我觉得小一些，我调成16，我看看效果，调完了以后直接看效果，诶那这个是不是大一些，你说还小，你说我来一个18 18那就会，哎就更大了，对吧？更大了，我觉得16还比较合适，所以我就直接改成16，诶改成16这一保存，那就是这么一个效果啊，就改完了，所以这个时候这个设置在哪啊，文件有一个首选项，有一个设置在这儿，你可以改啊，你可以改好，那网页写完了的话，我们这里边还可以直接去，哎，直接也是也是那种方式，我们也可以通过去双击文件来给它运行啊，来给它运行，但是我们会说们。

可以通过一些插件来快速运行，但是我们还是先熟悉一下它的一个基本操作，直接双击文件，这也可以运行啊，所以这个是我们的一个编写方式，直接这么写，但是其实如果它仅仅是这个功能，其实用起来倒是也没有那么好用啊，所以其实还可以更简单，怎么更简单呢？诶我们直接在这儿啊，你看我直接写一个叹号，直接写一个叹号，然后按一下键盘上那个table键，Table键就是Q左边那个键啊，Q左边那个键，然后那个就是那个大写键上面那个键啊，Tab写着一个，直接摁一下，你看它就可以给我生成一个最最最完整的一个网页的一个结构，当然这两个东西我们暂时用不上，你可以先给它删掉啊，你可以先给它删掉，所以那这个结构就是一个最最完整的这么一个结构了，我还用不用手动一行一行去敲了，哎，就不用了，所以为什么让你们记是吧，因为你如果不记的话，现在记。

你就没有机会记了，对吧，所以之前一定要把这个结给它记清楚啊，给它记清楚，但是这个东西你会以发现它这里边给我们多了一个属性，在HTML跟标签里多一个这个属性，Long什么意思呢？Long等于e long在这表示的是language啊，Language等于这表示什么意思呢？表示我的这个网页是用英语写的啊，是英文网站，那这个东西主要作用就是让浏览器也好，还是搜索引擎也好，来识别当前网页的一个语言，最典型的一个作用就是如果你这写的是in的话，你看在我们的Chrome里，它会问你是否翻译此页，因为我们的Chrome是一个中文的，哎，诶，而在这儿我们这儿是一个英文网站，所以他问你是不是翻译啊，是不是翻译它会有这么一个，如果你不想出这个，你可以把它改成ZZ就表示是一个中文网站啊，表示是一个中文网站，这个时候你再刷新就不会弹出这个提示了啊，就不会弹这个提示了，好，那这个是我们一个软件的一个基本的使用，你要做的事儿啊，我给你写下来。

第一步。诶等会说一下这个快捷键是吧，注释的快捷键CTRL加斜杠注释的快捷键，第一件事你需要干嘛呢？哎，你需要先安装安装我们这个Vs code啊Vs code第二是第二件事啊，尝试安装，哎安装什么呢？诶我们这个中文的一个语言包啊语言包诶然后这块可以尝试安装我们这个a Yu这个主题啊，尝试安装a Yu这个主题，然后第四步，诶将什么呢？诶。将我们一个这个目录作为我们这个项目目录打开啊打开，然后来创建一个新的网页啊，新网页好就是这么一些需求，那你自己来尝试去操作一下，还是刚刚用到一个新的工具，可能很多地方还不习惯，慢慢的来去适应一下，好我们来听一下。