您的位置:彩神8app大发快3编程工具编程工具HBuilder编辑器 v9.1.29 中文免费版

HBuilder编辑器 v9.1.29 中文免费版HBuilder编辑器 v9.1.29 中文免费版

软件大小:261M

软件官网:HomePage

用户评分:

软件类型:国产软件

运行环境:WinAll

软件语言:简体中文

软件分类:编程工具

更新时间:2019/10/9

授权方式:免费软件

插件情况:无 插 件

平台检测 无插件 360通过 腾讯通过 金山通过 瑞星通过
软件标签: HBuilder
HBuilder编辑器是DCloud推出的一款支持HTML5的Web开发IDE,HBuilder编辑器通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率,同时它还为您提供最全的语法库和浏览器兼容性数据,让您不在为浏览器的兼容问题烦恼。

HBuilder下载第1张预览图

HBuilder编辑器软件介绍

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

目前主流前端开发工具有Sublime为代表的文本编辑器,以及Webstorm、Brackets、Dreamweaver、vs等IDE。但说道为HTML5设计或做了特殊优化的,只有HBuilder、Webstorm和Brackets。对于在大学学习编程的学生来说,HBuilder是一款比较容易入门的开发工具。HBuilder的功能性比较实用和简易,对于一般的开发需求能够容易的应付得到。

HBuilder下载第2张预览图

HBuilder编辑器特色介绍

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

HBuilder下载第3张预览图

HBuilder编辑器快捷键说明

Alt+[匹配括号
Alt+↓跳转到下一个可编辑区
Ctrl+Alt+j合并下一行
Ctrl+Alt+←选择助手
Shift+回车
Shift+空格
Ctrl+回车换行
Strl+Shift+回车向上换行
Ctrl+d删除一行
Ctrl+Shift+d复制上一行

HBuilder下载第4张预览图

HBuilder编辑器的安装与使用

1、在零度软件下载HBuilder编辑器安装包,下载完后才能之后得到是一个压缩包,然后我们进行解压会得到一个文件夹,随便说一句这个文件夹就是Hbuilder的文件包,Hbuilder不用安装解压完成即可使用。

HBuilder下载第5张预览图

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

HBuilder下载第6张预览图

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

HBuilder下载第7张预览图

4、完成第3步之后,我们的桌面会出现一个Hbuilder的快捷方式,然后我们双击这个快捷方式,Hbuilder这个编辑器就打开了。

HBuilder下载第8张预览图

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

HBuilder下载第9张预览图

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

HBuilder下载第10张预览图

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

HBuilder下载第11张预览图

8、到了这一步之后,我们便可以编写我们的代码了,在这里我就随便写了几句作为项目的演示。

HBuilder下载第12张预览图

9、代码的运行有两种方式,以下图为例,点击对应的浏览器之后回跳转到一个对应的页面。

HBuilder下载第13张预览图

HBuilder编辑器使用技巧

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

HBuilder下载第14张预览图

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

HBuilder下载第15张预览图

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

HBuilder下载第16张预览图

Hbuilder如何更改字体?
首先打开Hbuilder,点击工具菜单

HBuilder下载第17张预览图

接着点击下拉菜单中的设置

HBuilder下载第18张预览图

然后定位到常用配置,如下图所示,直接可以更改英文字体

HBuilder下载第19张预览图

另外中文字体也单独出了一个下拉框,如下图所示

HBuilder下载第20张预览图

如果要自定义字体,点击源码视图,如下图所示

HBuilder下载第21张预览图

在如下图所示的位置自己配置即可

HBuilder下载第22张预览图

HBuilder如何改变字体大小?
首先,打开软件,找到菜单栏“工具”->“选项”。打开选项。

HBuilder下载第23张预览图

点击“HBuilder”->“主题”,打开主题。

HBuilder下载第24张预览图

在主题页面,点击“选择...”。

HBuilder下载第25张预览图

在这个页面可以设置字体、字形、字体大小。我们将字体大小修改为“小二”,点击“确定”。

HBuilder下载第26张预览图

让我们来看看修改之前的字体大小。

HBuilder下载第27张预览图

在看看修改字体大小之后是不是看起来舒服清晰很多呢。

HBuilder下载第28张预览图

如何解决HBuilder乱码问题?
打开HBuilder这个软件,要保证正常运行HBuilder。检查没有其他错误,比如插件问题,自动闪退等等现象。

HBuilder下载第29张预览图

在正常运行情况下,新建一个html文件,输入中文。选择“文件”—>"其他编码格式打开"—>"utf-8"。

HBuilder下载第30张预览图

现在“工具-选项”弹出框架

HBuilder下载第31张预览图

在常规里有“工作空间”,文本文件编码的其他改成:utf-8。

HBuilder下载第32张预览图

改完以上问题,我们发现我们中文页面没有乱码。

HBuilder下载第33张预览图
最后关闭软件,重启软件并新建html文件,再次访问就正常了。

HBuilder下载第34张预览图
HBuilder怎么导入html文件?
进入编辑页面

HBuilder下载第35张预览图

打开目录文件

HBuilder下载第36张预览图

选择目录

HBuilder下载第37张预览图

浏览选择

HBuilder下载第38张预览图

导入文件

HBuilder下载第39张预览图
编辑HTML文件

HBuilder下载第40张预览图

Hbuilder怎样设置更改快捷键?
如图,在Hbuilder点击“选项”就OK了,选项在工具下边喔。

HBuilder下载第41张预览图

既然是要设置修改快捷键,则点击“快捷键”即可哟。展开常规列表就可以看到了。

HBuilder下载第42张预览图

如图,可以设置某一种编辑器,这样快捷键就会跟着变化哦。

HBuilder下载第43张预览图

也可以指定特定的选项,为它设置快捷键哟,如图,我就设置这个。

HBuilder下载第44张预览图

之后,就可以为指定好的选项编辑快捷键列表,根据自己的情况来。

HBuilder下载第45张预览图

修改过Hbuilder快捷键列表之后,后悔的话可以还原哟,哈哈。

HBuilder下载第46张预览图

最后保存快捷键设置,让它启用就行了,哈哈,还是挺简单的。

HBuilder下载第47张预览图

HBuilder编辑器常见问题

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

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

Q:什么是HTML5+?
A: HTML5+规范是基于HTML5的扩展规范,用于弥补HTML5和原生应用功能之间的差距。HTML5+规范是一个开放的规范,在W3C中国的指导下,由HTML5中国产业联盟运作,所有规范都是面向开发者的,开发者提需求、开发者评审实现方案、开发者投票选定规范。

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

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

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

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

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

HBuilder下载第48张预览图

左右分栏实现效果:

HBuilder下载第49张预览图

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

HBuilder下载第50张预览图

上下分栏实现效果:;

HBuilder下载第51张预览图

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

HBuilder下载第52张预览图

  • 下载地址
有问题? 投诉报错

用户评论

(您的评论需要经过审核才能显示)0人参与,0条评论
140

最新评论

我要抢沙发

请简要描述您遇到的错误,我们将尽快予以修订

返回顶部