web开发IDE,HBuilder了解下

什么是HBuilder

HBuilder是DCloud (数字天堂)推出的一款支持html5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写,它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。

如何安装 HBuilder?

在HBuilder官网点击免费下载,下载最新版的HBuilder。

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

使用HBuilder新建项目

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

web开发IDE,HBuilder了解下web开发IDE,HBuilder了解下

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

使用HBuilder创建HTML页面

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

web开发IDE,HBuilder了解下

使用HBuilder边改边看试试查看编程效果

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

HBuilder代码块大量减少重复代码工作量

在打开的getstart.html中输入H,如下图

web开发IDE,HBuilder了解下

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

web开发IDE,HBuilder了解下

什么是代码块?

代码块是常用的代码组合,比如在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 输出 <meta name=\”\” content=\”\”/> 但 metau 则输出 <meta charset=\”UTF-8\”/>,metag同理。

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

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

灵活的快捷键使得编程过程手不离键盘

效果如下图

web开发IDE,HBuilder了解下

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

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

web开发IDE,HBuilder了解下

使用funn代码块编写一个JS方法helloworld(输入funn,回车)如下图

web开发IDE,HBuilder了解下

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

web开发IDE,HBuilder了解下

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

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

定义一个Css类classA:输入. c l a s s A { 回车,f o n t 回车 回车 回车

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

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

web开发IDE,HBuilder了解下

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

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

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

Ctrl 回车

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

向下,回车

使用CSS选择器语法来快速开发HTML和CSS(支持Emmet)

输入div#page>div.logo ul#navigation>li*2>a,按下tab生成代码如下图

web开发IDE,HBuilder了解下

HBuilder集成了Emmet功能,可以通过CSS选择器语法来快速开发HTML和CSS。

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

JS中提示HTML、CSS

JS提示html的ID

web开发IDE,HBuilder了解下

JS提示html的tagname

web开发IDE,HBuilder了解下

JS提示css类名

web开发IDE,HBuilder了解下

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

JS中提示JSON

web开发IDE,HBuilder了解下

JS提示自定义系统方法

web开发IDE,HBuilder了解下

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

web开发IDE,HBuilder了解下

JS提示闭包对象

web开发IDE,HBuilder了解下

跳转到class、id、js方法定义处

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

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

web开发IDE,HBuilder了解下

同样的方式也可以跳转到CSS类定义处、ID定义处、文件

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2023年9月2日 上午9:11
下一篇 2023年9月2日 上午9:27

相关推荐

  • 教育科研课题开题的程序

    教育科研课题开题的程序 教育科研课题开题是进行课题策划的第一步,其目的是为后续的课题申请、论证和实施提供基础和支持。以下是教育科研课题开题的程序步骤: 1. 确定课题方向和目标 在…

    科研百科 2024年8月20日
    33
  • 简单项目管理软件

    项目管理软件是项目管理中不可或缺的工具,可以帮助项目经理有效地组织、跟踪和管理项目进度、资源和预算。虽然项目管理软件有很多版本和功能,但今天我想向大家介绍一种非常简单、易于使用的项…

    科研百科 2024年8月21日
    32
  • 好用的开源OA系统

    好用的开源OA系统 随着数字化时代的到来,企业信息化已经成为企业发展的必然趋势。而OA系统(办公自动化系统)则是企业信息化的重要一环。选择一个好用的开源OA系统,可以帮助企业快速实…

    科研百科 2024年10月18日
    0
  • 98年女孩回村上班每月上15天工资1800元:工作地点离家只有两三分钟路程,每天都很舒服快乐

    4月19日,根据九派新闻视频援引巨流视频报道,近日,广西桂林一名98年女生在城市工作一段时间后,去年回到村里担任党建组织员,每月只需上15天工资1800元,此事引发热议。

    科研百科 2024年6月8日
    63
  • 企业办公网接入认证技术详解(企业办公网接入认证技术详解图)

    背 景 办公网承载着企业内部众多关键业务系统,如果终端连接到网络中便可直接访问办公网络资源,会带来网络被攻击的风险,企业内部资料有可能被具有非法意图的攻击者窃取。如何保证用户接入网…

    科研百科 2024年3月14日
    115
  • 软件项目管理有哪些

    软件项目管理有哪些 软件项目管理是软件开发过程中非常重要的一个环节,它涉及到项目计划、进度控制、风险管理、质量管理和沟通管理等方面。一个好的软件项目管理可以帮助团队更好地规划和管理…

    科研百科 2024年9月26日
    21
  • 合同管理包括哪些内容(合同管理包括哪些方面)

    合同管理是指在组织或企业中对合同进行有效的管理和协调,以确保合同的履行和执行。合同管理包括以下几个方面: 1.合同签订:合同签订是合同管理的第一步。合同管理人员需要审查合同的内容、…

    科研百科 2024年6月4日
    44
  • 求助execl如何实现合同管理

    合同管理是企业管理中的重要一环,对于企业的合规性和效率性都有着至关重要的影响。而execl作为企业常用的办公软件,如何实现合同管理呢? 首先,在execl中建立一个合同库是实现合同…

    科研百科 2024年11月14日
    0
  • 研发项目进度管理系统

    研发项目进度管理系统 随着科技的不断进步,企业的研发项目变得越来越复杂,需要更加高效、精准、可靠的项目管理方法。研发项目进度管理系统是一种用于跟踪和管理项目进度、资源、风险的工具,…

    科研百科 2024年5月25日
    44
  • 资金管理系统项目招标

    资金管理系统项目招标 随着现代商业的不断发展,企业的资金管理变得越来越重要。资金管理系统是一种可以帮助企业有效管理资金、提高资金利用效率的软件系统。为了更好地满足客户需求,我们公司…

    科研百科 2024年12月26日
    0