HTML&CSS基础-前端免费开发工具Hbuilder介绍

时间:2020-12-22 20:42:50

          HTML&CSS基础-前端免费开发工具Hbuilder介绍

                                          作者:尹正杰

版权声明:原创作品,谢绝转载!否则将追究法律责任。

  工欲善其事必先利其器,想要干好活得有一个好的工具。

一.文本编辑工具

  在windows中我们只需要使用最简单的记事本就可以完成所有的网页的开发,但是一般我们会使用一些具体提示功能的纯文本编辑器,比如常见的Notepad++(免费),Sublime(收费),当然还有很多其它的工具。

二.IDE

  IDE拥有比纯文本编辑器更加强大的提示功能,也是我们开发中用的比较多的工具。比如DreamWeaver(比较占用系统资源,收费),WebStorm(收费),Hbuilder(中国人开发,免费使用),当然其它IDE。

  我们在生产环境中要使用工具,但是我们不能依赖工具,如果在某些特定的场景下你不能离开IDE就啥代码也不会写就尴尬了。

三.Hbuilder的安装步骤详解

1>.下载Hbuilder解压该文件并进入到解压目录,双击"HBuilder.exe"

HTML&CSS基础-前端免费开发工具Hbuilder介绍

2>.运行"HBuilder.exe"后会弹出如下所示的一个对话框,点击"暂不登录"

HTML&CSS基础-前端免费开发工具Hbuilder介绍

3>.如下图所示,选择你能看得清除的条形图,如果你连最后一点都看不清楚说明你有轻度近视了哟~(小哥哥小姐姐们,保护好眼睛吧),或者直接关闭也可以

HTML&CSS基础-前端免费开发工具Hbuilder介绍

4>.安装成功

HTML&CSS基础-前端免费开发工具Hbuilder介绍

5>.创建web项目

HTML&CSS基础-前端免费开发工具Hbuilder介绍

6>.HBuilder有相应的提示信息

HTML&CSS基础-前端免费开发工具Hbuilder介绍

四.使用HBuilder创建一个文件并打开

1>.右击"myweb",新建一个新的html文件

HTML&CSS基础-前端免费开发工具Hbuilder介绍

2>.创建文件成功后,会自动创建html的文件代码格式,如果没有如下图所示的提示,可以在第一行输入"!",然后按一下"tab"键就会自动补齐如下图所示的信息哟~

HTML&CSS基础-前端免费开发工具Hbuilder介绍

3>.编辑html文件

HTML&CSS基础-前端免费开发工具Hbuilder介绍

4>.使用HBuilder的IDE打开浏览器

HTML&CSS基础-前端免费开发工具Hbuilder介绍

5>.HBuilder会启动一个web服务器并打开我们编辑的文件,很真切的模拟生产环境

HTML&CSS基础-前端免费开发工具Hbuilder介绍

五.修改HBuilder的默认模式

1>.如下图所示,默认是"开发模式"

HTML&CSS基础-前端免费开发工具Hbuilder介绍

2>.修改HBuilder的模式

HTML&CSS基础-前端免费开发工具Hbuilder介绍

3>.开发时HBuilder会有相应的提示信息

HTML&CSS基础-前端免费开发工具Hbuilder介绍

六.查看HBuilder的快捷键使用

1>.点击"帮助",选择"快捷键列表",会弹出如下图所示的右侧的对话框

HTML&CSS基础-前端免费开发工具Hbuilder介绍

2>.查看你要使用的快捷键

HTML&CSS基础-前端免费开发工具Hbuilder介绍