怎样下载和安装HBuilder软件?【附HBuilder快捷键】

HBuilder是一款深度集成Eelipse的IDE编辑器,但其主要集中在Web前端的开发,不能进行Java等后台开发。HBuilder提供了对JavaScrijpt、jQuery、HTML5+、MUI等语法的提示功能,同时包含很多快捷键,让前端开发更加便捷。

访问HBuilder官方网站(http://www.dcloud.io),下载最新版的HBuilder,如下图所示。

怎样下载和安装HBuilder软件?【附HBuilder快捷键】_第1张图片

在图上图中单击“下载”按钮,会出现下载提示框,如下所示。

怎样下载和安装HBuilder软件?【附HBuilder快捷键】_第2张图片

在图片中可以看到HBuilder的当前版本、历史版本以及各平台的不同版本,读者在下载时根据自己的设备选择适合的版本即可。

HBuilder下载完成,解压到指定的路径后,双击启动文件HBuilder.exe,会出现一个启动页面,完成用户注册并登录后,便可开始使用HBuilder。HBuilder开发界面如图所示。

怎样下载和安装HBuilder软件?【附HBuilder快捷键】_第3张图片

在上图中,左侧项目管理器中会出现一个名称为HelloHBuilder的示例项目,右侧会出现一个HBuilder入门的窗口,该窗口中显示的内容是HBuilder官方的使用教程,提供了HBuilder的详细使用方法。

下面以新建项目、新建文件以及运行文件为例简单讲解HBuilder的使用。

首先,在C盘下创建jQuery目录用于保存项目文件。然后选择“文件”一“新建”→“Web项目”命令,打开“创建Web项目”对话框,如下所示。

怎样下载和安装HBuilder软件?【附HBuilder快捷键】_第4张图片

在上图中,填写项目名称(如chapter01ln,选择项目的保存位置(如C:\jQuery),单击“完成”按钮创建Web项目。

最后,编写项目中默认的文件index.html,利用HBuilder提供的工具完成文件的运行,页面效果如下。

怎样下载和安装HBuilder软件?【附HBuilder快捷键】_第5张图片

在上图中,单击方框内的图标,即可在浏览器运行此文件,页面效果如下所示。

HBuilder中有很多快捷键,开发者使用这些快捷键,可以更加高效地工作。HBuilder常用快捷键如表所示。

HBuilder 常用快捷键

怎样下载和安装HBuilder软件?【附HBuilder快捷键】_第6张图片

你可能感兴趣的:(前端)