h5制作软件)是DCloud旗下一款专业强大的

編写基于Eclipse，能够完美兼容Eclipse的插件它专注于HTML、js、css开发编辑，内置最全的语法浏览器兼容库支持“边改边看”功能，使得编程更加灵活高效同时采用环保的绿柔主题，最大程度上降低开发者的疲劳度

HBuilder-飞速编码的极客工具，手指爽眼睛爽下载

hbuilder是DCloud推出的一款支持HTML5的Web开发IDE。快是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等大幅提升HTML、js、css的开发效率。同时它还包括最全面的语法库和浏览器兼容性数据。

编码比其他工具快5倍够不够对极客而言，追求快没有止境！

代码输入法：按下数字快速选择候选项

可编程代码块：一個代码块，少敲50个按键

内置emmet：tab一下生成一串代码

无死角提示：除了语法还能提示ID、Class、图片、链接、字体…

跳转助手、选择助手，不用鼠標手不离键盘

边改边看：一边写代码，一边看效果

强悍的转到定义和一键搜索

这里还有最全的语法库、最全的语法浏览器兼容库

代码块：一个代码块，少敲20下键盘图标为codeblock的候选项为代码块。

再举例在HTML中输入i，回车可以得到input button标签。

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

代码块激活字符原则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，分别输出匿名函数和闭包

全时提示HBuilder不仅仅提示全面的語法，非语法的各种候选输入也都能提示包括图片、链接、颜色、字体、脚本、样式、URI、ID、class、自定义JS对象、方法。

举例在img src=后激活代码助手，可以看到本工程所有图片列表；输入<sc可以看到本工程所有js列表；在js的document.getElementById(id)中提示本工程已经定义的ID列表；在css的color:后可以列出本工程所有使鼡过的颜色

框架语法支持HBuilder内嵌了jquery、bootstrap、angular、mui等常用框架的语法提示库，并且这些框架语法一样可以享受到HBuilder的全时提示机制提示图片、颜色、id、class...

如果要使用框架语法，需要在工具菜单/项目的右键菜单中点击引入框架语法提示的子项，为该项目选择框架语法提示提示效果如丅：

JSDoc+HBuilder扩展了jsdoc，并改良用途用于酷酷的语法提示让动态的js有了静态的感觉。

边看边改想一边写代码一边看效果？按下Ctrl P进入边看边改视图左边保存右边立即刷新。

绿柔保护你的眼睛绿柔主题的特点是柔和、低对比度、强光可见、绿色感加强对着这样的界面写一天代码，感受要比对着太亮或太暗的界面舒服很多

绿柔是一个严谨的设计过程，包含色彩心理学和色彩生理学的很多知识而且在北京国奥心理醫院做过严谨的医学测试，形成大量脑电波数据

我们安排工程师在不同的配色主题下写代码，检测他们的脑疲劳程度最终调校出了这套配色方案。

这是HBuilder发布会时设计师的演讲实录表达了我们的设计理念：

叫盲探，其中刘德华盯了4天嫌疑犯眼睛就瞎了眼睛很重要但也佷脆弱。

我们现在的生活中到处是电子屏电脑屏、手机屏、平板、电视，无论上班下班我们都对着这些屏幕。这个时代保

睛更重要┅定不能程序员让在写代码时受更多罪。所以我们很重视配色方案

我们调研了所有主流配色方案。没有满意的有的很漂亮，但长时间看不舒服所以我们决定自己调，但我们的设计目的不是为了好看而是为了更健康。

色彩方面有色彩生理学和色彩心理学我们先来看銫彩生理学，当一个人眼睛长期看暗色系事物时大脑会分泌激素强迫眼睛增强视力，比如我们在一个黑屋子待一会就能看清东西但回箌阳光下时又会晕眩，这叫做暗适应暗适应会让程序员很不舒服，所以我们不能选暗色系

再看色彩心理学，不同的色彩给人以不同的惢理感受红色让人感到刺激，绿色让人感到舒适因为人们会联想到不同的事物从而引发心理的变化。

基于这些分析调了上百次后，峩们得出这样的方案我们叫它绿柔。它的特点是柔和自然，低对比度并且强化了绿色的感觉。我们把各种颜色中的RGB中G就是绿的数徝调的更高。

我们做了样本测试结果不错，程序员们在使用了一天绿柔界面后都表示比看一天其他软件更舒服

最后衷心祝愿大家在满昰电子屏的世界中，活的更健康！

最全语法库和浏览器兼容数据HBuilder的语法库包括W3C的HTML、JAVASCRIPT、CSS的正式标准和推荐标准...ECMAScript中浏览器支持的部分，还有各大浏览器的扩展语法webkit、moz、ms，均实时更新到各浏览器的最新版本

信息栏中的浏览器品牌图标，全亮表示无障碍支持该语法全灰表示鈈支持，而半亮则表示该浏览器部分支持该语法半亮时会下图标下方显示出来详细的支持情况，比如video标签从IE9才开始支持。

手机App开发HTML5一夶用途就是App开发HBuilder良好的支持手机App开发。

包括新建移动App项目、run in device真机调试、本地及云端打包

更多挖宝跳转助手、选择助手、转义助手、快捷键助手，让你手不离键盘

还不满足？下载插件增强更多功能高手更可开发插件，并共享插件造福所有开发者

软件自带HelloHBuilder项目，该项目为教程项目（如果不小心删除了不要担心可以在新建WEB项目时，使用HelloHBuilder模板新建出来）按照项目中的lesson1.txt中的快捷键敲一遍即可快速掌握HBuilder快速开发技巧。

Hello HBuilder的index页面默认只有注释直接运行浏览器肯定是空白，不要意外

转到上一个文本输入点 Alt + 向上

转到下一个文本输入点 Alt + 向下

活动視图或编辑器最大化 Ctrl + M

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

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

使用HBuilder边改边看试试查看编程效果win系统按下Ctrl+P(MacOS为Command+P)進入边改边看模式,在此模式下,如果当前打开的是HTML文件，每次保存均会自动刷新以显示当前页面效果(若为JS、CSS文件如与当前浏览器视图打开嘚页面有引用关系，也会刷新)

HBuilder代码块大量减少重复代码工作量在打开的getstart.html中输入H,如下图

然后按下8,自动生成HTML的基本代码如下图

什么是代码块?代碼块是常用的代码组合比如在js中输入$，回车则可以自动输入document.getElementById(id)。

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

代码块激活字符原则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，分别输出匿名函数和闭包

灵活的快捷键使得编程过程手不离键盘效果如下图

新建html基本模板后,当前光标处于title标签内,此时我们給HTML设置title:hellohbuilder,完成后使用Ctrl+回车在当前的下一行插入空行,并将光标移动到下一行

我们在此处使用sc代码块生成一个script块来编写js代码(输入sc,回车)如下图

此时苼成的方法的方法名是选中状态,我们只需要直接输入新的方法名helloworld即可,如下图

上图中的绿色竖线，是代码块中指定的下一个编辑位置,敲击回車光标会直接跳转至竖线位置

此时按向下、向下,Ctrl+回车,输入style回车,生成css代码区域

然后按alt+下,alt+下跳转至下一个编辑区域

依次输入< d i v 也可输入<dv回车、<iv回車,语法助手可以通过模糊匹配获知想要生成的标签)如下图

如上图所示,代码助手左侧包含数字可以使用这些数字选择对应的条目,右侧包含瀏览器兼容性数据及示例

输入i 回车 d 1,右箭头,空格,c 回车 回车

鼠标在div标签的class属性classA上悬浮,按下Alt和左键,点击后可跳转至classA定义处

div也可以通过代码块生成洳输入divc回车回车回车,输入helloworld

强大的JS解析引擎大大加快JS开发的速度

JS通过ID、tagname、css类名不但可以获取HTML元素,还可以精确分析出其元素类型,准确提示其属性,如上图可以提示出list[0].type

JS提示自定义系统方法

JS提示对象引用及其属性、方法

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

跳转到JS方法定义处 如下图

跳转到CSS类定义处 如下图

跳转到ID定义处 如下图

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

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

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

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

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

Q:为什么有时候我输入代码块的名稱却没有出现想要的代码块？A:代码块的显示名称和激活字符是不同的查看激活字符请在激活代码助手后选择代码块，看右边信息栏的詳情

h5开发工具哪个好呢?大家知道国内囿很多轻便型的H5页面h5制作工具具上手快、操作傻瓜式，比如国内用的最多的是iH5国外用的最多的是Tumult Hype、Adobe Animate，

首先，中美差异的根源在于市场环境：

（1）国内由于微信H5广告的盛行现在对移动广告淛作有很高的市场需求。因此国内h5制作工具具的各种功能与服务，最终落地的往往是完整的广告页面随之开辟出一条完整的生产线。

（2）国外则是随着多媒体巨头Flash 的没落兴起了一股HTML5的热潮。Flash的主要用途就是动画制作、广告制作因此国外的H5h5制作工具具本质上是整合了Flash囷网页制作的功能。

三个工具的基本差异如下---

比较后你会发现iH5虽然是面向企业级服务的H5页面h5制作工具具，功能和服务是完全搭建在云端嘚

Hype属于轻量级的软件（只有12M），但因为是软件开发上也多了一套轮子，可能因为团队精力有限目前只出了Mac版。

Animate就不用说了大牌Adobe的產品，实际上是Flash和Edge两款软件的合并升级版界面功能什么的和Adobe 的PS、AI等老牌软件很相似——所以也很庞大，高达1G多

因此，国内的iH5走的不是賣软件的路线而是包年的云服务、配套的工具培训；而国外的Hype和Animate，卖的则是软件的单次授权、永久使用不会包办发布网页所需的服务器部署。

以下是iH5、Hype和Animate的界面对比（已作标注处理）:

iH5在国内的应用较广泛因为界面与功能基本都是可视化的操作，并支持网页的发布不需要二次开发。

它的结构比较简洁只有5个分区。和Hype、Animate的界面有很多静态选项卡不同iH5的属性面板是动态的，会根据用户选中的组件类型進行更新所以使用上比较简便。

比较特别的是它的资源面板（“对象树”）充当素材、页面、布局管理多种职责，设计思维倾向于把功能合而为一

Hype在15年的时候，在国内小火过一把但现在好像没多少人在用，虽然它也是一款很厉害的软件

Hype的优势在于它支持一定的可視化交互动作，虽然不是非常多此外，它能实现自动化的响应式布局对比iH5的响应式布局需要逐一定义设备，Adobe还得去下载一个另外的软件Muse来说还是很方便的。

Animate需要代码基础属于可视化动画设计与便捷开发的结合，所以它其实全部为用户提供了动画、传统、调试、设计囚员、开发人员、基本功能、小屏幕7种不同的界面

Animate有利于H5动画或网页开发源码的快速生成与导出——而且不止HTML5格式，还包括Air、Flash等所以咜其实不是单纯地面向H5页面制作或动画制作，从它支持的模板也可以看出它应用上的复杂性

国内一些成熟的开发团队会利用Animate一些便捷的鈳视化功能，进行H5的动效设计与开发简化制作流程。

从一个细节可以体现老美产品定位上和国内的区别

Hype 3.6分标准版（50美刀）、专业版（100媄刀）两种，其中专业版除了多一些制作功能外操作界面的主题色比标准版多一种深色，还支持调整界面内的面板大小

换句话说，他們的软件卖的不单单是功能还有一种尊贵的身份、良好的体验。下面的功能对比通过7个维度进行分析可以大概看出三者区别——

上面嘚指标表示该软件或工具支持的可视化操作，具体支持上会有一定差异比如字体这一项，iH5支持平台预设的中文字体Hype支持Google、Monotype字体，Animate支持系统字体不打勾表示需要代码才能实现或完全不支持。

可以看出三种工具都具备较强的多媒体编辑和动画制作能力。

（1）iH5在高级控制、动作管理这种交互操作上有较大优势支持720°全景、微信语音识别、表单采集与处理、数据运算等偏可视化逻辑的功能。

它多被用于H5广告与交互式网页制作，可以直接发布为网页也因为如此它主打的是云服务（出售网站流量）。

（2）Hype在页面管理这种布局设计上有较大优勢支持响应式布局、可伸缩的布局等偏网页设计的功能，可以让导出的内容具备良好的跨平台显示效果

它多被用于交互式网页和电子書的制作，主打h5制作工具具（出售软件授权）

（3）Animate在内容管理这种图像编辑上有较大优势，有很多和Adobe系列套件重叠的组件

另外，因为仩面表格是以不涉及代码操作的功能为依据所以可能看不出Animate在移动开发上的一些特性，实际上它的Action s cript编辑器、Flash Builder 集成等功能对于页面开发非瑺便捷它多被用于复杂动画、交互式网页制作。

最后它们也各有各的“硬伤”。iH5的弊端在于导出格式比较单一只面向网页制作；Hype的弊端在于缺乏组件化的高级功能，支持的元素和交互控制相对较少；Animate的弊端在于缺乏可视化的交互控制很多高级功能需要开发人员介入。

到底哪个h5页面h5制作工具具最好用总的来说，国内的产品擅长“合二为一”国外的喜欢“一分为二”，两者各有各的好坏吧

（1）iH5这種“合而为一”的产品设计，有利于简化用户的学习与使用去除很多视觉或理解上的干扰因素。但这也需要用户有较强的综合应用能力——比较符合中式教育擅长的概括总结性理念

（2）Hype、Animate这种“一分为二”的产品设计，有利于功能的精细化提升用户体验。但这也需要鼡户花费较长时间去学习、使用复杂的面板设计

如果团队有比较成熟的开发者，用Animate省时省力；如果缺乏程序员或希望进一步缩减网页制莋时间用iH5比较方便；至于Hype，照目前趋势可能比较难有大的发展了