HBuilder的安装及用法

一,简介HBuilder

1.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能够生存就是由于有自身的优点。php

1.2,Hbuilder的优点是什么?

      快,是HBuilder的最大优点,经过完整的语法提示和代码输入法、代码块等,大幅提高HTML、js、css的开发效率。   css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  在HBuilder里预置了一个hello HBuilder的工程,用户敲这几十行代码后会发现,
HBuilder比其余开发工具至少快 5 倍。“最全的浏览器兼容性数据、开发手机App等很
多特色也都是HBuilder强于竞品的地方”,王安表示。
 
  以“快”为核心的HBuilder,引入了“快捷键语法”的概念,巧妙地解决了困扰许多
开发者的快捷键过多而记不住的问题。开发者只须要记住几条语法,就能够快速实现
跳转、转义和其余操做。好比alt + [是跳转到括号,alt + ’是跳转到引号,alt + 字母是
跳转菜单项,而alt + 左则是跳转到上一次光标位置。而Ctrl则是各类操做,好比ctrl + d
就是删除一行。shift则是转义,好比shift + 回车是<br / >,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的架构支持不一样的技
术互相融合通讯。至于咱们的技术选型原则,首先知足用户需求,而后咱们内部用什么技
术能更快完成就会选什么技术”,王安解释道。

  

1.3,目前Web开发领域格局

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

  文本编辑器以轻快方便的特色得到了不少用户的喜好,但商业项目的编写缺乏IDE仍是会很低效。IDE相比文本编辑器最大的特色是拥有语法引擎,可以识别语言。前端

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
编码比其余工具快 5 倍够不够?对极客而言,追求快,没有止境!
 
代码输入法:按下数字快速选择候选项
 
可编程代码块:一个代码块,少敲 50 个按键
 
内置emmet:tab一下生成一串代码
 
无死角提示:除了语法,还能提示 ID 、Class、图片、连接、字体…
 
跳转助手、选择助手,不用鼠标,手不离键盘
 
多种语言支持:php、jsp、ruby、python、nodejs等web语言,less、coffee等编译型语言均支持
 
边改边看:一边写代码,一边看效果
 
强悍的转到定义和一键搜索
 
这里还有最全的语法库、最全的语法浏览器兼容库

  

 

 

二,Hbuilder IDE的下载与安装

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

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

2.1,查找Hbuilder官方网站

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

 2.2,了解Hbuilder

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

 

2.3,下载

  点击下载以后会有一个弹窗,若是是Windows系统则直接点击红色按钮进行下载便可,若是是使用的苹果本,那么点击左下“MacOSX版本”,点击完成以后便开始进行下载而后进入等待便可。编程

2.4,解压下载的安装包

  文件下载完后才能以后获得是一个压缩包,而后咱们进行解压会获得一个文件夹,随便说一句这个文件夹就是Hbuilder的文件包,Hbuilder不用安装解压完成便可使用。windows

2.5,找到执行文件

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

2.6,打开Hbuilder

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

三,Hbuilder IDE的使用

3.1,设置编译器风格

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

3.2,新建web项目

  视觉设置完成以后进入咱们的项目创建阶段,点击“新建WEB项目”建立项目名称,设置项目所在的位置肯定便可,完成以后会在左边的项目栏管理器中出现。我这里建立的名称为demo。

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

3.3,打开文件夹

  打开项目demo的文件夹,咱们会看到里面有首页index.html,有JS文件夹,有CSS文件夹,还有图片的文件夹,基本齐全。

 

3.4,编写代码

  到了这一步以后,咱们即可以编写咱们的代码了

 

 

 四,HBuilder的用法

4.1,什么是代码块?

代码块是经常使用的代码组合,好比在js中输入$,回车,则能够自动输入document.getElementById(id)。

查看、编辑代码块能够在工具-自定义代码块中,选择相应的代码块进行查看和编辑。也能够在激活代码块的代码助手中,点击详细信息右下角的修改图标进行修改和查看。

  • 代码块激活字符原则1:连续单词的首字母。好比:dg激活document.getElementById("");vari激活var i=0;dn激活display: none;

  • 代码块激活字符原则2:整段HTML通常使用tag的名称。好比script、style,一般,敲最多4个字母便可匹配到须要的代码块,不须要完整录入,如sc回车、st回车,便可完成script、style标签的输入。

  • 代码块激活字符原则3:同一个tag,有多个代码块输出,则在最后加后缀。好比meta输出但metau则输出,metag同理。

  • 代码块激活字符原则4:若是原始语法超过4个字符,针对经常使用语法,则第一个单词的激活符使用缩写。好比input button,缩写为inbutton,同理intext是输入框。

  • 代码块激活字符原则5:js的关键字代码块,是在关键字最后加一个重复字母。好比if直接敲会提示if关键字,但iff回车,则出现if代码块。相似的有forr、withh等。因为funtion字母较长,为加快输入速度,取fun缩写,好比funn,输出function代码块,而funa和func,分别输出匿名函数和闭包。

 

不经一番彻骨寒 怎得梅花扑鼻香
相关文章
相关标签/搜索