【0004】HBuilderX的安装和使用（保姆级教程）

本文知识体系如下图所示：

上一篇文章中，我们学习了使用记事本开发HTML代码，但是效率很低，操作不方便。为了提高代码编写效率，我们需要借助专业的软件工具类编写网页代码。编写网页的专业工具有很多，比如国产软件HBuildeX，微软的Visual Studio Code（VSCode）等，这也是在实际开发中，用的比较多的两款软件，本文讲解HBuildeX软件的安装和使用。下篇文章我们讲述Visual Studio Code（VSCode）的安装和使用。

一、HBuildeX的安装

HBuildeX软件是免安装的，直接在官网下载解压，即可使用。

（1)搜索HBuildeX官网

在搜索网站百度中输入“HBuildeX官网”，效果如下：

（2）进入HBuildeX官网

点击官网超链接，进入官网，效果如下：

（3）下载HBuildeX压缩包

根据自己电脑的操作系统和软件版本需要，点击下载超链接，我的电脑是Windows系统，选择Windows下载，进入下载页面，选择下载位置，我选择下载到D盘，如下所示：

下载成功后再D盘可以看到HBuildeX的压缩文件，如下所示：

（4）解压HBuildeX压缩包

进入D盘，在HBuildeX压缩包上右击鼠标，将HBuildeX软件压缩包解压到指定位置，我这里选择解压到E盘，如下所示：


点击立即解压，软件开始解压，如下图所示 ：

解压成功后，在E盘可以看见解压后的HBuildeX软件文件夹，如下图所示：

（5）创建HBuildeX桌面快捷方式

解压成功后 ，桌面上还没有快捷方式，可以生成一个。进入HBuildeX解压后的文件夹，找到HBuildeX.exe文件，右击鼠标，选择“发送到…"，选择快捷方式，即可在桌面上生成一个快捷方式。

除了这种方式生成桌面快捷方式之外，还可以在打开此软件后，关闭软件时，软件会提示你软件还没有安装快捷方式，要不要安装快捷方式，点击“是”，即可在桌面上安装快捷方式。

二、HBuildeX的使用

（1）启动HBuildeX软件

双击HBuildeX软件快捷图标，启动软件，第一次启动软件会让你选择主题，选择自己喜欢的主题即可。

（2）新建项目

点击软件中间的“新建项目”或者点击文件菜单，选择新建，选择项目，都可以创建一个新的项目，如下所示：

选择项目模板，填写项目名称，选择项目所在路径（在电脑磁盘中的位置），点击创建，如下图所示：

项目创建好后，在软件左边可以看到创建的项目，是一个空文件夹，在F盘的webDemo文件夹中也可以看到项目。如下图所示：

（3）新建HTML文件

在项目文件夹上右击鼠标，选择新建，选择html文件，效果如下图所示：

给创建的文件取名，选择路径和模板，如下图所示：

创建好的HTML文件如下图所示：

在HTML文件中编写代码，保存，如下图所示：

如果HTML文件没有保存，在窗口会有一个*号，如下图所示：要养成随手保存文件的习惯。

（4）运行HTML文件

文件编写号保存后，就可以运行HTML文件了，在HBuildeX中运行HTML文件只需要点击运行菜单中的运行到浏览器选项，选择一个电脑中已经安装的浏览器，HBuildeX即可自动调用浏览器运行HTML文件，如下图所示：

浏览器运行HTML文件结果，如下图所示：

三、总结

本文内容介绍了HBuildeX软件的下载，解压安装，以及使用HBuildeX软件创建项目，创建HTML文件和选择浏览器运行HTML文件的操作。内容简单，动手实践一遍即学会。