教程之家 > 常用软件 > 工具软件 > 正文

DCloud HBuilder如何下载安装 HTML5开发工具HBuilder使用技巧分享

2020-01-10 16:28  教程之家  媛媛  
字号:T|T

DCloud HBuilder如何安装?DCloud HBuilder如何使用?作为web前端开发IDE(集成开发环境),DCloud HBuilder的优势在哪?HBuilder是HTML5编程软件,是少数几款为HTML优化的开发工具,以快为核心,开发效率大大提高。下面来看看DCloud HBuilder安装和使用图文教程。

HBuilder有什么作用?HBuilder快在哪

HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby,其核心主体是由Java编写的,基于Eclipse所研发,顺其自然地兼容了Eclipse大量的插件,也是目前受到广泛开发者的认可和使用,其功能性和操作性都是市面上最出众之一。

快,是hbuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。

对于在大学学习编程的学生来说,HBuilder是一款比较容易入门的开发工具。HBuilder的功能性比较实用和简易,对于一般的开发需求能够容易的应付得到。

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

以“快”为核心的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开发的。

国人开发的HTML5编码神奇,号称为编码极客而生的的IDE。

代码输入法:一个数字键,少敲10个按键;

代码块:一个代码块,少敲50个按键;

模糊匹配:跳着敲字母就能匹配到单词;

内置emmet,tab一下生成一串代码;

智能补齐:感知你的意图,自动完成输入;

跳转助手、选择助手,不用鼠标,手不离键盘;

DCloud HBuilder如何下载和安装

1、下载HBuilder安装包,解压。

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

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

2、找到应用程序,双击打开

3、等待安装完成,运行软件

DCloud HBuilder如何使用

一、HBuilder如何新建一个web项目?

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

如下图,请在A处填写新建项目的名称,B处填写(或选择)项目保存路径(更改此路径HBuilder会记录,下次默认使用更改后的路径),C处可选择使用的模板(可点击自定义模板,参照打开目录中的readme.txt自定义模板)

二、HBuilder如何创建HTML页面?

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

DCloud HBuilder使用技巧

Q:什么叫滚动条信息点?

A:当代码中有重要的标记出现时,会生成滚动条信息点,在滚动条右侧出现颜色各异的点。点击这些点或使用跳转到下一个信息点功能,可以快速到达这些代码处。如下标记会生成信息点:书签、任务、错误提示。

Q:怎么实现代码追踪?

A:在编辑代码时经常会出现需要跳转到引用文件或者变量定义的地方,HBuilder提供了一个非常好用的代码追踪功能,只需要按住Ctrl+鼠标左键即可实现追踪。

Q:输入small不提示,语法库是不是不全?

A:代码块是否提示,取决于是否设置了这个代码块,代码块是可自定义的。默认没有预置small代码块,你也可以在代码块弹出界面点右下角的编辑图标,进行代码块的补充修改。另外可以使用emmet(ZenCoding)语法,这个没有提示,但敲完small,按tab,就会自动生成标签。emmet是一种前端公开技术,网上教程很多。

Q:为什么有时候我输入代码块的名称,却没有出现想要的代码块?

A:代码块的显示名称和激活字符是不同的,查看激活字符请在激活代码助手后选择代码块,看右边信息栏的详情

Q:编辑器怎么实现分栏?

A:HBuilder编辑器分栏功能可以实现左右分栏和上下分栏以及组合分栏。

1、左右分栏实现:鼠标点着编辑器选项卡往最右边拖动即可实现左右分栏

左右分栏实现效果:

2、上下分栏实现:鼠标点着编辑器选项卡往最下边拖动即可实现上下分栏

上下分栏实现效果:

3、组合分栏实现:组合分栏就是即有的文件向下拖动,有的文件向右拖动,下面给出一个效果图,感兴趣的话您可以拖个试试:

DCloud HBuilder常见问答

1、HBuilder的快捷键在哪

打开帮助——快捷键列表进行查看即可

2、使用HBuilder的小技巧

按下Alt键,移动鼠标到样式或变量的引用处,会出现了可点击的下划线,点下去吧,这就是转到定义。

3、如何新建模板组?

点击菜单——文件——HTML文件,点击“自定义模板组”如下图

将常用的若干文件压缩为zip保存到该目录,新建HTML文件时,模板组列表会多出以该zip文件的文件名命名的模板组。如下图

以该模板组新建HTML文件,HBuilder会自动生成zip里的文件(含内容)。

DCloud HBuilder软件特色

在HBuilder里预置了一个hello HBuilder的工程,用户敲这几十行代码后会发现,HBuilder比其他开发工具至少快5倍。

HBuilder的生态系统可能是最丰富的Web IDE生态系统,因为它同时兼容Eclipse插件和Ruby Bundle。SVN、git、ftp、PHP、less等各种技术都有Eclipse插件。

以上就是HTML5开发工具DCloud HBuilder的安装和使用图文教程。DCloud HBuilder最的的优势是快,比同类工具至少快5倍。DCloud HBuilder有着丰富的生态系统,内置各种插件,还能使用快捷键,让用户码代码更快。如果你想开发HTML5,那么DCloud HBuilder就是个效率工具。关注教程之家,解锁更多软件教程。

点击加载更多