HBuilder的安装及用法

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一，简介HBuilder

1，什么是Hbuilder？

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。
　　它基于Eclipse，所以顺其自然地兼容了Eclipse的插件
　　从Frontpage、Dreamweaver、UE，到Sublime Text和JetBrains的WebStorm，Web编程的IDE已经更换了几批。但是HBuilder可以生存就是因为有自身的优势。

2，Hbuilder的优势是什么？

• 快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。
• 在HBuilder里预置了一个hello HBuilder的工程，用户敲这几十行代码后会发现，
  HBuilder比其他开发工具至少快5倍。“最全的浏览器兼容性数据、开发手机App等很
  多特点也都是HBuilder强于竞品的地方”，王安表示。
• 以“快”为核心的HBuilder，引入了“快捷键语法”的概念，巧妙地解决了困扰许多
  开发者的快捷键过多而记不住的问题。开发者只需要记住几条语法，就可以快速实现
  跳转、转义和其他操作。比如alt+[是跳转到括号，alt+’是跳转到引号，alt+字母是
  跳转菜单项，而alt+左则是跳转到上一次光标位置。而Ctrl则是各种操作，比如ctrl+d
  就是删除一行。shift则是转义，比如shift+回车是
  ，shift+空格是 。
• 另外，HBuilder的生态系统可能是最丰富的Web IDE生态系统，因为它同时兼容
  Eclipse插件和Ruby Bundle。SVN、git、ftp、PHP、less等各种技术都有Eclipse插件。
• HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，
  它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。但因为Java效率太低，所以用C
  写了启动器。HBuilder柔和的绿色界面设计需要动态调节屏幕亮度，它还支持手机数据线
  真机联调，而这些都是用C写的。
• HBuilder很多界面，比如用户信息界面都是使用Web技术来做的，既漂亮，开发起来
  又快。最后，代码块、快捷配置命令脚本，都是用Ruby开发的。

“这4种技术各有各的用途，我们团队内部也灵活运用，HBuilder的架构支持不同的技
术互相融合通信。至于我们的技术选型原则，首先满足用户需求，然后我们内部用什么技
术能更快完成就会选什么技术”，王安解释道。

3，目前Web开发领域格局

目前主流的前端开发工具有Sublime为代表的文本编辑器，以及Webstorm、Brackets、Dreamweaver、vs等IDE。但说道为HTML5设计或做了特殊优化的，只有HBuilder、Webstorm和Brackets。

文本编辑器以轻快方便的特点获得了很多用户的喜爱，但商业项目的编写缺少IDE还是会很低效。IDE相比文本编辑器最大的特点是拥有语法引擎，能够识别语言。

• 编码比其他工具快5倍够不够？对极客而言，追求快，没有止境！ 代码输入法：按下数字快速选择候选项
• 可编程代码块：一个代码块，少敲50个按键 内置emmet：tab一下生成一串代码
• 无死角提示：除了语法，还能提示ID、Class、图片、链接、字体… 跳转助手、选择助手，不用鼠标，手不离键盘
• 多种语言支持：php、jsp、ruby、python、nodejs等web语言，less、coffee等编译型语言均支持
• 边改边看：一边写代码，一边看效果 强悍的转到定义和一键搜索 这里还有最全的语法库、最全的语法浏览器兼容库

二，Hbuilder IDE的下载与安装

HBuilder下载地址：在HBuilder官网http://www.dcloud.io/点击免费下载，下载最新版的HBuilder。

HBuilder目前有两个版本，一个是windows版，一个是mac版。下载的时候根据自己的电脑选择适合自己的版本。

1，查找Hbuilder官方网站

首先去这款前端开发编辑器的官方网站，之后进到官方网站中，如下界面

2，了解Hbuilder

进入官网之后，找到“Hbuilder”的栏目，建议仔细看完这一页面的内容以便于简历一个对Hbuilder的初步了解，看完后找到下载按钮进行下载。

3，下载

点击下载之后会有一个弹窗，根据电脑版本进行选择，点击完成之后便开始进行下载然后进入等待即可。新一代的版本为HBuilderx,上一代的版本为Hbuilder

4，解压下载的安装包

文件下载完后才能之后得到是一个压缩包，然后我们进行解压会得到一个文件夹，随便说一句这个文件夹就是Hbuilder的文件包，Hbuilder不用安装解压完成即可使用。

5，找到执行文件

打开解压后的文件夹，找到一个叫做“Hbuilder.exe”的可执行文件，这个可执行文件就是Hbuilder的启动文件。

6，打开Hbuilder

双击这个文件就可以打开Hbuilder这个开发编辑器了，因为我们是直接解压使用的所以找起来会很麻烦，你可以将“Hbuilder.exe”这个执行文件发送到桌面快捷方式，这样每次使用的时候直接在桌面就可以打开。

三，Hbuilder IDE的使用

1，设置编译器风格

Hbuilder打开之后，会出现一些很人性话的设置，还有一点就是Hbuilder的编辑器风格是黄色系，对眼睛比较好，不同于其他的编辑器一般是以黑白为主，这里我一般使用标准模式。

2 使用

     HBuilder在Eclipse的基础上添加和删除了很多插件。

2.1 创建项目
HBuilder没有“工作空间workspace”的概念，其创建的项目，可以指定到任意位置。

     HBuilder只能创建“WEB项目”和“移动APP”两种项目。

1.    依次点击文件→新建→选择Web项目(按下Ctrl+N,W可以触发快速新建(MacOS请使用Command+N,然后左键点击Web项目))
   

2.    填写项目名称，选择项目位置
   

3.    创建完成，点击项目查看目录结构
   

2.2 创建HTML页面

1.    在项目资源管理器中选择刚才新建的项目,依次点击文件→新建→选择HTML文件(按下Ctrl+N,W可以触发快速新建(MacOS请使用Command+N,然后左键点击HTML文件))
   

2.    选中文件位置，编写文件名称，选中文件使用版本
   

3.    创建完成，自动生成html模板
   

2.3 快速提示
HBuilder特点，需要输入触发字符，就可以快速的提示需要的内容。

l <：注释

l h+8：html模板，先按h，再按8

l in：创建input标签；int：创建文本框；insu：创建添加按钮

l t+enter：创建表格

l s+enter：js模块

l fun+3：创建js函数