22.尚硅谷_HTML&CSS基础_hbuilder安装.avi原创

哎，我们来说什么呢？我们发现之前我们写的这些所有的页面，我用的都是什么呀，都是用我们的这个notepad加加，虽然这个工具比我们这个记事本要干嘛呀要强很多了，但是实际上我们开发起来体验干嘛呀，它还不是那么的好，有些地方它还不是干嘛呀，不是很方便，所以这里边我们开发中一般我们需要一个什么呀，我们就需要一个更加强大的一些工具，那我们说了，那这里边我们就要用到了一些工具，我们来看一下，那一般讲到这我们来看看啊，打开我们这个PPT。诶讲到这个开发这个工具的事，一般说到这儿呢，我们就要说一句话叫什么呀，哎，公欲善其事，必先什么呀，利其器，哎说白了你要想干嘛呀，你要想干好活，你得先有一个什么呀，先得一个好工具啊先在一个好工具，那我们来简单的介绍一下这工具，那这个工具呢，诶其实是什么呢？在Windows里边，我们只需要用最简单的记事本就可以完成我们所有的一个网页的开发，但是我们知道记事本的功能比较弱，编开发简单的体验效果不好，所以这里边我们会用一些这个比较强大的一个文本编辑，比如说我们的这个note PA加加，比如说还有我们一个前端用的比较多的一个sub sub lab，这两款工具呢，其实都还不错，但是这两款工具相对于其他工具来说还干嘛呀，还比较的简单，所以这里边我们就需要一款更强要的工具，那这种工具我们叫什么呢？叫做一个。

IDE啊，IDE叫什么呀？叫做一个集成开发工具，那IDE拥有比我们这个纯本纯文本编辑器更加强大的提示功能，也是我们开发中用的干嘛呀，比较多的什么呀？工具啊，比较多的工具，那我们在前端这块用的比较多的，简单介绍一下，有这么三款啊，诶第一个我们叫一个比较出名传统的一个，用的比较多的叫什么呢？叫做一个dream river啊dream riverver这个工具时间比较长了，也是一个传统的一个，诶用的比较多的这么一个工具，但是它有一个特点，它是什么呀。

它是收费的，诶它是收费，但是它这个收费吧，对于咱们来说，其实呢，其实不叫事儿是吧，诶收费咱们也不差钱啊，咱们也不差钱，那关键问题是什么呢？这个东西时间太长了，它这个效做的这个东西做的干嘛呀，越来越大，你要用它这个软件会占用我们这个非常多的一个计算机的一个空间，你像我这个电脑，我一打开dreamwever，其他东西什么都不用开，我这小风扇就开始揉揉转了，能理解吧，它会耗费我们非常多的这个系统资源，所以这个工具呢，我是不太爱用，那可能有的同学习惯用这个东西，用它呢，也没事啊，也没事，那还有一款比较强大的一个工具呢，是我们叫做一个web storm，这个也是我们会用的比较多的一个工具，这个东西呢，它也是什么呀，也是收费的啊，也收费的，但是这个东西暂时我们现在不用，我们等到什么呀，我们讲这个GS高级啊，或者H5这块，我们会使用这个工具，那我们这阶段要用什么呢？用一个工具叫什么，叫做一个h h builder最好的地方它是什么呀，它是免费的是吧，但是其实。

免费到免免不免费倒不重要，最好的一个地方，这个哥们儿是什么呢？是我们这个中国人开发的，是中国人开发就有一个什么好处，诶，中国人开发的界面肯定是中文的是吧，你要中国人开发你都用英文当界面，那就缺了得了是吧，所以这个东西呢，它是一个纯中文的界面，我们操作起来干嘛呢？比较比较容易，比较容易，像这个webto它是一个什么呀，纯英文的，而且这个界面做的还是挺难看的，所以我们用起来需要干嘛呀，需要适应一下，所以这一阶段我们就用什么呀，就用我们这个HB就可以了，这个工具还是比较比较强大，比较方便一个工具，现在在市场内市场上用的也会越来越多，当然还有其他一些I idea，我们这里边主要介绍这三款，那我们现在在安装我们这个软件之前，我们先说一下这个东西吧，它只是一个工具，我们要使用工具，但是一定要注意，我们不要干嘛，不要依赖工具，什么叫依赖工具啊，诶有的同学就是，诶可能我用这款工具用惯了，某的一天干嘛呢，突然不让我用了不。

用了发现什么了，我连一行代码也干嘛了，也写不出来了，这个是最可怕的啊，这是最可怕的，我们要用工具，但是一定要不要依赖于工具，也就是说我要你做到什么工具，有的时候我们可以用，如果没有，即使仅仅给你一个什么呀记事本，你也要能完成开发啊，即使给你一个记事本，你也能完成开发，以后你们去公司面试，有一些公司他就是这样面的，怎么面给你一段代码，一个网页，让你上这个网页里干嘛呀。挑毛病，那他给你什么呀，就给你一个记事本，你去挑去吧，挑的出来就要你，挑不出来就干嘛，你就走吧，所以这个时候就要求你即使用记事本，你也要能看懂代码，你也要能干嘛呀改代码，所以一定要注意，我们要用工具，千万不要依赖工具啊，依赖工具好，那我们来说一下h build的一个安装，如何安装，安装起来其实也比较简单，那这个工具呢，我们来看一下啊，我都发给你们了，这个叫做开盘资料，里边我们有一个工具，这个h build，这是一个我下的应该是一个最新版本了啊，大家自己去尝试装一下，装起来比较简单，拿你的解压工具，点开它，点击提取，当然解压工具操作不一样啊，自己尝试去解一下，解完了以后呢。

哎，稍微等一下。解压完了以后，它会出来这么一个文件夹，HP的这个文件夹，那你把这个文件夹干嘛呢？复制到CTRLC，复制到你这个什么呀，你习惯的一个位置，比如说你习惯干嘛呀，你习惯把它放到C盘，放到D盘，找到一个复制一个你习惯的位置，总之干嘛呢，你能找着就OK啊，你能找着OK，然后复制完了以后点开它，我们这有一个什么呀，H builder.exe直接双击它干嘛呢？启动我们这个软件啊，启动软件，那这里边由于我已经装过了，我就不再点了啊，我就不再点了，这里边儿我截了几个图，咱们通过这个图来演示一下，呃，看看啊，这个图我给放在在这儿了，截了几个图，第一个你点开以后呢，诶，这个会出现，首先一双击那个exe文件，会首先出现这么一个界面，这个呢也是我们国产软件共有的一个特点，干嘛呢。

都让你都让你注册登录是吧？诶都让你注册登录，基本上所有国产软件都有这玩意儿，但是这个里边还有一个好处干嘛呀，它有一个什么呀，暂不登录，如果你不想注册，你就直接点它就OK了啊，直接点它就OK了，点完了以后呢，再往下一步到哪了，到这个会看到这么一个示数，这个示图让你干嘛呀，让你根据你的显示器特点来选择你那护眼的主题，这里边这些色块你就选一个什么呀，选一个你能看见的最清楚的就行了，诶最最后能看见就行了，选中，然后点击这个生成适合你的视觉方案就OK了，然后再往下进行下一步，下一步呢，这块实际上就让你选一个什么呀，选一个主题，哎什么温暖的呀，标准的呀，淡雅的呀，夜间的模式，然后这儿呢，可以选择你的字体，还有字体的一个大小，这个东西根据你的喜好来选择就OK了，但是这里边有一个模式是一个这个夜间模式，这个模式看起来还还挺漂亮的是吧，诶黑不溜秋的，然后里边是那种比较亮的这个字，这个东西吧，呃，看起来挺酷的，但是白天的时候尽量尽量别用，为什么因。

对，你的眼睛不太好啊，眼睛不太好，所以这你最好在这三个里边选，但是看你的习惯啊，然后选完了以后直接点确认并关闭就可以了，然后安装就完毕了啊安装就完毕了，好，那这里边安装完毕以后呢，你一点开这个玩意儿，基本上你会看到跟我同样的这么一个界面，它会分成这么几个区，诶这块有一个叫做一个项目管理器，那什么叫项目管理器呢？在这里边它把我们这个诶软件分成什么呀，分成一个项目，一个项目这么管理呢，你就可以理解为一个项目，就可以理解为是一个小网站啊，一个项目可以理解为一个小网站，那我们要想先创建网网页，我要先干嘛呢？我要先在这个项目管理器里要新右键新建一个什么呀，新建一个web项目啊，Web项目这块我一点击新建we部项目，然后这里起一个名，我们随便起一个叫一个这个day d02啊，我们这个第二篇，然后这里边下边有一个什么呀，有一个位置，什么是位置呢？就是。

那你这个文件创建完了，要保存到你硬盘的哪个位置，我就保存到我的文档下边的一个1013这个文件夹里边，你就找一个你自己能找到位置就行了，这个位置无所谓，只要你能找着就OK了啊，然后下边这两个你就干嘛了，不用理他了，不用理他了，直接点击完成，完成以后你会发现在项目管理器里边就出现了这么一个什么呀，小的文件夹，你点开，实际上它会已经给你生成好了一些什么呀，目录结构，比如说CSSMGGSCS还是干嘛的呀，放我们那个CS文件的样式表的，MG是放我们那呀图片的，GS放我们那个什么呀，GS文件的，当然这三个文件夹里边都是什么呀，都是空的，哎，他让你去可以去添加东西，然后还给你创建好了一个页面，叫做一个引ex.H天门我们的这个主页，当然这个页面里它是想干嘛呀。

只是给你提供好了一个什么呀模板，其他的东西干嘛呢？是不是什么都没给你写呀，诶什么都没给你写，就是给我们生成好这么一个网页的一个架子啊，让我们在这句础上进行写就OK了，那你说那如果没有这个网页，我直接点击删除，那我们能不能自已创建呀，是不是也可以啊，直接选中，诶选中这项目啊，先选中项目右键点击什么呀，新建新建什么呀，HTMMR文件，我直接写一个零一，我们来一个DEMO，然后诶这还能干嘛呀，是让你选择这个模板呀，诶什么A5啊，ML4.01啊，什么空白的呀等等一系列直接一点，咱们就不用改，咱们不用选了，咱们直接选谁啊A点五就OK了，四我们都不用啊N点五的，然后一点完成诶。是不是我们这个网页的结构就默认给你生成好了呀？诶所以我说为什么让你记住了，为什么呀，因为以后我们都不用什么了，不用写了，他都给咱们是不是写好了呀？诶但是说如果他没写怎么办呀，他没写怎么办呀？诶你来个叹号，然后按一下table键，是不是全都出来了，哎来个叹号，摁一个table键，它的所有的格式就都干嘛呀，都显示出来了啊都显示出来了，诶那我们来看看这个工具除了这一块，它还有什么强大的功能，那它呢，这种IDE它都会给我们一个什么呀，给我们一些比较强大的一些提示功能，比如说我想写什么呀，我想在这个body里写一个什么呀，写一个h he标题，那我们之前怎么写的呀，先来个肩块，哎，然后来个h he，然诶这就不用写了是吧，他已经看出来了，我刚写一个什么呀，我刚写一个开始标签，他结束标签是不是给你生成好了呀，哎，你可以这么写，还可以怎么写呀，直接输入一个H完了。

今天这还不给面了是吧？我来给它关上啊，再给他打开，诶你看它有的时候他要你需要干嘛呀，这种软件你需要对它温柔一点啊，不要太暴力啊，不要太暴力啊来你看我一说H，你会发现什么，所有H开头的标签是不是都出来了，H1啊H2H3H4H5H6害H瞄是不是都有了呀，你可以通过什么呀，通过光标你不是选呀，我想输入H2直接一回车，你看开始结束是不是都有了呀？诶开始结束都有了，诶那你要想写一什么呢？写个P标签，你直接来1NPP标签还没有提示是吧？那怎么办呢？直接按出一个P来，那如果没有提示的话，之前我们还得干嘛呀，监号来一个P标签，然后再来一监块是不是还行啊，但是这里边我们可以怎么写，直接来一个P标签，这个P这个字母就行，然后在这来一个什么呀，Table。

诶是不是直接给你生成一个完整标签啊，你要想写H1直接写什么呀，直接来一个这个H一来一个什么呀，Table，你想写这个什么呀，你想写H2，直接来个H2来一个什么呀，Table，诶这块，然后CTRLD这些快捷键干嘛呀，可以去删除一行啊删除一行来我们再写一个H1，写一个这是一个诶非常诶漂亮的网页，来我这一保存，那现在页面写完了，我们是不是需要去查看这个页面啊，两种方式怎么看呢？我第一种方式我可以干嘛呢？直接拖着这个页面选中干嘛呢？往浏览器里拖到这儿，你一撒手，这是不是打开了，诶这打开了啊，可以直接往浏览器里拖，还可以干嘛呢？来看这儿，你看这儿是不是有一个浏览器图标啊，而且这里边可以干嘛呀，是不是可以选呀，CH呀IE呀S啊，什么firefox IE test，我们选一个谁呢？选一个火狐，我这一点走你发现什么了。

它是自动在我们这个火狐浏览器里去打开这个页面里，而且你要注意了，你看这地址就不一样了，它写了一什么呀？127.0.0.1冒号8020DAY02，然后01.1个DEMO点零号，它这边写的是一个IP地址啊，那这是怎么回事啊，我们说h builder它干嘛呢？它在运行我们这个网页的时候，它默认干嘛呢？默认将我们这个网页部署到了它的一个内置的服务器里边，我们在访问网页的时候，实际上是干嘛呀，实际上是通过那个内置的服务器去访问的，所以你会发现看到这儿什么呀，有点像我们这个是不是通过一个IP地址去访问的呀？诶，那他为什么要这么做？诶那我们想想，我们真实开发的项目最终是要部署到哪的，最终是不是都是要部署到服务器里边的，所以他干嘛呢？那既然我们最终都是要部署到服务器里的，所以这个工具干嘛呀，他在你开发的时候就直接给你部署到干嘛呀，服务器里，他要干嘛呀。

最大的程度模仿模拟你的一个真实运行的一个什么呀，环境啊运的环境，这样能测试起来就干嘛呀，更方便一点啊，就像在一个真的服务器里边一样啊一样好，这是一个，如果你不想用火狐干嘛呀，直接换是不是就行了呀，哎，G就行了，或者干嘛呀，有快捷键直接CTRL加上一个二，就直接在你指定的浏览器里边打开了啊，指定浏览器打开了，或者还可以干嘛呢，来看这这有一个什么呀。

编改诶现在就是处在这个边改边看模式是吧，你们一上来应该是什么呀？应该是在这个开发视图啊，开发视图我这一选可以切换到哪呢？可以切换到这个边改边看模式，来这里边你会发现我在这个边开边看模式这块，我这一点它这块你发现有一个什么。是不是有一个web浏览器啊，你会发现在我这个工具里边直接就给你内置了一款浏览器，它这款浏览器是什么呢？它这款浏览器就是我们这个那个chome浏览器啊，Ome浏览器，那你会发现我这个页面里边信息是不是直接在这里边就显出来了，诶那来看着啊，我再写一个，我这来一个H h2，诶诶你看我出不出来，我写这么一句话，这边出没出来没出来为啥？哎，我还没保存呢，注意啊，我这来CTRLS。

是不是就自动的出来了呀，它可以干嘛，它可以实时的教你这个代码的结果是不是在这个浏览器里自动的去显示出来呀，这样我们就不用再去频繁的切换浏览器了，叫什么呀，边改边看一边改是不是就一边看了呀，诶一边改一边看了啊这是一个，然后再看，那现在我要设置一下样式怎么办呀，我是不是在这儿想写一个这个style标签啊，我直接写一个什么呢？直接写一个ST你看。是不是就出来提示了，直接一回车走，你发现什么了，标签连这个type属性是不是都给你生成好了，哎，都给你生成好了，好，那接下来我们再写写什么呢？我想给H1设置一个文字颜色，直接写是不是我们这个直接来一个H1啊，H1表什么意思啊，选中我这个页面里边的所有H1标签，然后后边跟着是我们这个生命块来一个什么玩意儿，大块里边来一什么呢？来一个诶你看我一输CU是不是color就出来了呀，然后这块你看他还能干嘛呢。

诶，这IE火狐这个chome火狐S，它给我显示出一些浏览器的图像干嘛呀？诶他要告诉我这个样式的一个一个什么玩意，一个兼容性，告诉你这个color在这个所有的浏览器里都是什么的，都是兼容的啊，都是兼容的，所以这边来一个color，然后冒号，你看分号是不是给你生成出来了，直接来一个red，诶你看颜色是不是给你显示啊，哎，我不想用red了，你往下点呗，找找找一个你喜欢的。哎，就它吧，易保存走，你是不是这事就出来了呀？哎，所以用它开发的一个好处就是很多东西都给我们干嘛了，进行了一个简化啊，进行了一个简化，诶那你说了，我不想用样式表，我不想用style，我想用什么呀？我想用一个外部的样式表，那怎么办呀？在CSS文件加下右键来新建一个什么呀，CSS文件来起个名叫做一个style，点一个CSS在这儿来写H一来一什么呢？我直接来一个found size来一个100个像素，来一个color，我就来一个这个red，我是不是设置两个样式啊，一保存来，诶但是发现什么了，这个样式有没有应用啊，没有为什么呀，没关系吧，诶所以我这里边是不是需要将这个文件是不是关联进来呀，怎么关联呀？哎，用我们这个是不是link标签啊，诶来你一写link个你一看诶rel type是不是都给你写好了呀，哎，你还用不用记了呀。

哎，不用记了，最可气的什么玩意儿，路径是不是给你提示了，你这一回车走你路径是不是就过来了，然后一保存样式是不是就有了呀，所以为什么当时让你记路径，为什么呀，因为以后其实呢是不用你写了呀，为什么呀，他这你看你删了，你说没了，一保存是不是就没了呀，直接在这摁一下什么呀，Out，加上一个斜盖。

是不是自己就出来了呀，而且这个路径肯定是一个什么呀，是一个正确的路径啊，正确的路径，所以这里边我们来说一下啊，它会都是有一些很强大的这个提示功能啊，很强大的一个提示功能，刚才我又说了一快捷键啊，这个快键我们用的会比较多，叫什么呀？Outt鞋盖outt加鞋盖哪个outt就是你方向键边上那个outt啊，还有那个斜杠也是那个方向键上边啊，斜上边那个鞋杠，Outt鞋杠就是问号那个鞋盖啊，Outt加鞋盖它会有什么呀？有提示功能什么意思呀？比如说你这来写个样式，写一个什么呀，你想写一个，比如说background，我们这个背景颜色你缩BACBAC输入完了后边的词儿干嘛呢？想不起来了，那怎么办呀？Out，加上鞋链，你看BAC开头的样式是不是都出来了，然后这一看back color1回车是不是就出来了，诶奥特鞋垫是一个这个提示功能啊提示功能。

好，那当然功能还有很多啊，比如说我们有什么呀，CTRLD，诶干嘛呢，删除一行啊ctrl shift的R。复制一行啊，Ctrl shift啊复制一行，然后还有一个叫做CTRL加上一个什么呀，CTRL加一个回车什么玩意儿，换行啊换行诶有同学说了换行直接回车不就行了吗？大家注意啊，有的时候是这种情况，我们这光标跟哪呢呀，跟这个来这儿呢，来这儿我一摁回车什么效果呀。是不是整个HR都下来了呀，我希望什么呀，只让光标换行，而你其他东西是不是不动啊，按什么CTRL加回车，看见了吧？诶，这都是一些快捷键，当然这个快捷键还有很多，我们现在只说一小部分，随着我们开发呢，随着我们去讲，当然呢，你可以干嘛呀，你是不是可以查一下啊，跟哪查呢？这有一个叫做帮助，帮助里边有一个快捷键列表，一点开来看这什么文件的呀，什么新建菜单CTRLN呀，新建CTRLN，什么关闭啊，Out ctrl加F4啊，包括一些编辑，什么out斜杠啊，呃，撤销out ctrl z啊，CTRL外在里边都有相应的提示，你想用什么快件去这里边去查一下就OK了啊，查一下OK了，好，那咱们这个介绍呢，就介绍到这儿，那接下来呢，大家可以自己来尝试把这个软件去安装一下，并且创建一个项目来测试一下啊，测试一下你上来的时候，它实际上给你提供了一个什么呀，这么一个hello h标的这么一个项目啊，我随便给它创建出来。

它里边会有一个什么呀。Index页面，它这边有一个LESSON1，这里边儿是都是对我们HP的一个什么呀，简介你感兴趣的话，可以自己通过它来看看啊，来简单的学习一下啊学习下好，那我们就先说到这儿停一下。