HBuilder如何安装和使用?(教程)

HBuilder如何安装和使用?下面本篇文章给大家介绍一下HBuilder的安装和使用。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。【想要下载HBuilder或者更多工具,可访问:前端工具

1、安装

1)、官网下载地址:http://www.dcloud.io/

2)、安装:解压zip文件到指定目录

3)、运行安装文件下的exe文件

1.png

4)、第一次使用需要登录(可选),不登录的话每次都会提示该窗口

2.png

2、使用

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

2.1 创建项目

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

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

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

3.png

2)、填写项目名称,选择项目位置

4.png

3)、创建完成,点击项目查看目录结构

5.png

2.2、创建HTML页面

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

6.png

2)、选中文件位置,编写文件名称,选中文件使用版本

7.png

3)、创建完成,自动生成html模板

8.png

2.3、快速提示

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

l <:注释

9.png

10.png

l h+8:html模板,先按h,再按8

11.png

12.png

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

13.png

14.png

15.png

16.png

17.png

18.png

l t+enter:创建表格

19.png

20.png

l s+enter:js模块

21.png

22.png

l s+2:js引入文件

23.png

l fun+3:创建js函数

24.png

25.png

3、快捷键

3.1 常用快捷键

l ctrl+向上:向上移动一行代码

l ctrl+向下:向下移动一行代码

l ctrl+r:运行

l ctrl+shift+r:复制当前行,或复制选中区域

l ctrl+/:添加或移除单行注释

l ctrl+shift+/:添加或移除块注释

l ctrl+enter:任意位置向下插入一行

l shift+enter:html页面插入<br/>

l ctrl+shift+x:全部大写

l ctrl+shift+y:全部小写

l ctrl+f:查询

l ctrl+p:边敲边看

l ctrl+d:删除选中行

l ctrl+shift+f:整理代码行

l ctrl+shift+c:复制文件路径

l ctrl+shift+t:删除当前标签

3.2 具体快捷键查看

Ø 点击左下角图标

26.png

Ø 选中“快捷键列表”

27.png

Ø 查看快捷键

28.png

Ø 点击其他区域,快捷键列表自动隐藏,点击左下角图标可以继续查看显示

29.png

Ø 如果希望快捷键列表成为固定窗口,点击图标右键,取消“快速视图”勾选

30.png

Ø 将显示在右边区域

31.png

更多web开发相关知识,请查阅 HTML中文网 !!

以上就是HBuilder如何安装和使用?(教程)的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » HBuilder

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏