HBuilderX是轻量编辑器和抢答IDE的完美结合体。敏捷的性能，清爽的界面，强大的功能集于一身，HBuilderX操作安装操作非常简单，上手容易，很适合刚接触前端开发的人员使用。话不多说，我么你直接进入安装步骤：

软件安装：

第一步：打开HBuliderX官网下载地址

HBuilderX官网下载地址：http://www.dcloud.io/hbuilderx.html

第二步：点击DOWNLOAD下载安装包

第三步：选择–>正式版–>下载App开发版

第四步：下载完成后解压即可使用

双击HBuliderX.exe打开运行

打开之后进入到一下下图：

HBuilderX创建html项目：

安装完成之后我们接下来搭建一个最简单的前端项目练练手，一起领略一下Hbuilderx的便捷之处吧！

1. 新建项目：点击上图中的新建项目，可以根据自己所需选择新建项目类型和模板，如下图：

1. 新建页面：新建完项目之后在左侧项目管理器中找到项目点击右键选择新建，就然后找到html就可以新建页面如下图：

1. 快速写html代码：在页面body中输入H5标签，然后按tab键即可生成相对应的标签，如果想要生成多个标签可以写：div.box*5即可生成五个拥有box类名的div标签
2. 显示内置浏览器：一边编程一边看效果，按alt+p即可打开内置浏览器，如下图：

1. Hbuilderx支持多光标：每次按ctrl+鼠标左键就可以在鼠标点击位置增加一个光标，ctrl+右键课取消一个光标
2. 快速搜索：ctrl+f在当前文件中搜索输入的内容，选中项目按ctrl+alt+f可在当前项目中搜索输入内容。如下图：

1. 常用快捷键：
1. 整理代码格式：右键选择重排代码格式或者ctrl+k
2. 快捷注释或反注释：ctrl+/
3. 运行html页面：ctrl+r然后选择想要打开的浏览器比如：chrome，IE，Firefox
4. 复制文件路径：ctrl+shift+c
5. 撤销：ctrl+z
6. 在当前项目查找文件：ctrl+p
7. 打开文件：ctrl+o
8. 多行操作：alt+鼠标左键选中多行
9. 改变编辑器中字体大小：ctrl+鼠标滚轮

1. 缩进调整：默认使用tab缩进，tab长度为4个空格，如果想要设置缩进长度，可以在工具设置-编辑器中调整。如下图：

1. 代码块激活：
1. 代码块激活字符原则1:连续单词的首字母。比如：dg激活document.getElementById("");vari激活var i=0;dn激活display: none;
2. 代码块激活字符原则2:整段HTML一般使用tag的名称。比如script、style，通常，敲最多4个字母即可匹配到需要的代码块，不需要完整录入，如sc回车、st回车，即可完成script、style标签的输入。
3. 代码块激活字符原则3:同一个tag，有多个代码块输出，则在最后加后缀。比如meta输出但metau则输出，metag同理。
4. 代码块激活字符原则4:如果原始语法超过4个字符，针对常用语法，则第一个单词的激活符使用缩写。比如input button，缩写为inbutton，同理intext是输入框。
5. 代码块激活字符原则5:js的关键字代码块，是在关键字最后加一个重复字母。比如if直接敲会提示if关键字，但iff回车，则出现if代码块。类似的有forr、withh等。由于funtion字母较长，为加快输入速度，取fun缩写，比如funn，输出function代码块，而funa和func，分别输出匿名函数和闭包。

1. 文件路径自动提示：新建的外部样式表，图片素材和js文件在引入的时候都会有路径提示，直接敲回车就可以自动填充，如下图：

1. 强大的JS解析引擎大大加快JS开发的速度，JS中提示HTML，css
1. JS提示HTML中的ID，class，tagname

1. JS提示默认语法

1. JS提示对象引用及其属性，方法

1. 跳转到class，id，js方法定义处：按下Alt,左键点击引用的方法名、ID、CSS类、文件(链接、图片),均可跳转到引用的地方,跨文件的引用也可以，如下图

跳转到css文件

前端页面写好之后如果运行到自己的浏览器中有些样式出现了异常，那么我们可以怎样利用浏览器来调试样式呢？接下来这一块作为一个小惊喜送给看到这里的观众（手动滑稽）

如下图所示，我们在页面中只写了一个div并设置样式宽高都为300像素，并且加了一个蓝色背景，但是运行的时候却发现效果跟我们想想的有所不同

我们可以在页面中右键点击检查，或者按F12打开控制台，然后在控制台中的左上角有一个小尖角，点击之后鼠标在页面中移动的时候会看到当前元素的属性值如下图所示

我们鼠标点击一下这个div会在控制台中间的位置看到有一个.box{

width;300;

height:300px;

background:blue;

}

如下图所示“

其中width这一行前面有黄色警告，这行样式就是有问题的，因为width后面的300没有加单位，在这里把单位加上之后页面就变得正常了，只不过不要忘了在代码中找到对应的位置改正哦，否则刷新一下页面又会变成刚刚的情况。

好了，今天的内容先说到这里，希望这篇内容会给你带来帮助。环境搭建好之后赶紧开始制作自己的第一个页面项目吧~~