- 浏览: 196832 次
文章分类
- 全部博客 (224)
- jsp (5)
- jsf (7)
- web (11)
- js (12)
- COBOL (5)
- php (7)
- jconsole (1)
- java (11)
- ajax (1)
- PHP魔法方法 (1)
- 项目管理工具 (3)
- 项目管理 (2)
- svn (8)
- redmine (1)
- mysql (4)
- qrcode,php (1)
- qrcode (1)
- 多进程 (3)
- html (1)
- excel (2)
- seasar2 (1)
- db (1)
- entity (1)
- IOS8 (1)
- SWIFT (1)
- 正则表达式 (1)
- RabbitVCS (1)
- url (1)
- thinkphp (2)
- c++ (5)
- win32 API函数 (1)
- htaccess (1)
- makefile (3)
- C/C++ (12)
- Linux (1)
- miui (2)
- unix (1)
- wechat (1)
- websocket (1)
- SpringMVC (3)
- VSAM (1)
- centos (2)
- wamp (1)
- server (1)
- 优酷视频上传并去除广告 (1)
- owncload (1)
- cloud (1)
- ubuntu (1)
- pdf转换成word (1)
- 微信,weixin (1)
- 行业系统 (3)
- 超级外卖源代码 (0)
- 软件专利 (1)
- 申请 (1)
- vba (1)
- UML (1)
- 程序切片 (1)
- 股票心得 (1)
- 威客建站 (1)
- 微信开发学习路线 (1)
- 远程开机 (1)
- spring mvc (1)
- JEECMS (1)
- Node.js (1)
- ThinkJS (1)
- maven (2)
- MyEclipse+Tomcat+MAVEN+SVN (1)
- Spring+SpringMVC+MyBatis (1)
- wampserver (0)
- RESTful (1)
- hibernate (4)
- Spring+SpringMVC (1)
- 响应式布局 (1)
- 响应式布局模板 (1)
- Aptana (3)
- 遗传算法 (1)
- 进化算法 (1)
- bower (1)
- HTML5 (1)
- Android官方培训课程 (1)
- MySQL锁 (1)
- 扫描枪 (1)
- 微信公众平台 (1)
- 企业号 (1)
- ddns (1)
- java获取外网ip (1)
- DDNS,阿里云,云解析,万网域名,阿里云域名 (1)
- SEO (1)
- Jboss (2)
- wildfly (1)
- WildFly8 (2)
- NT Kernel (1)
- 反向代理 (1)
- Spring嵌套事务 (1)
- apache (3)
- 防止浏览器记住用户名及密码的简单实用方法 (1)
- 时间戳 (1)
- 字体 (1)
- 网络爬虫准 (1)
- 屏蔽后退按钮 (1)
- java web (1)
- JavaMail (1)
- windows服务 (1)
- Freemarker (1)
- TortoiseGit (2)
- oschina (1)
- JSON (1)
- Boost (1)
- MUI (1)
- github (1)
- Python2.7 (1)
- Python3.0 (1)
- Odoo (1)
- java socket (1)
- OpenERP (2)
- werkzeug (1)
- JNA (2)
- proxifier (1)
- WebService (1)
- 企业应用集成 (1)
- vmware (1)
- Navicate (1)
- 三体 (1)
- oracle同步 (1)
- 微信 (3)
- java设计模式 (1)
- 工具 (1)
- JavaScript跨域 (1)
- LB (1)
- 负载均衡 (1)
- AngularJS (1)
- HBuilder (1)
- Echarts (1)
- Json Web Token (1)
- PassportSDK (1)
- ubuntu kylin xterm 乱码 (1)
- ubuntu kylin17 安装字体教程 (1)
- wps (1)
- jetbrains (1)
- MySQL5.7 (1)
- Nginx (1)
- JDK (1)
最新评论
-
cuiyadll:
谢谢楼上的推荐
实战:jQuery Mobile开发HTML5移动应用 -
marty:
使用JQueryMobile,推薦使用這免費開發工具,提供可視 ...
实战:jQuery Mobile开发HTML5移动应用 -
men_clslji:
按照目前的方法只是防止刷新页面时不再执行X(添加),而toke ...
有了上一篇博文,类似地顺便说说表单防重复提交。
http://www.runoob.com/w3cnote/hbuilder-intro.html
HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写,它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。
如何安装 HBuilder?
HBuilder下载地址:在HBuilder官网http://www.dcloud.io/点击免费下载,下载最新版的HBuilder。
HBuilder目前有两个版本,一个是windows版,一个是mac版。下载的时候根据自己的电脑选择适合自己的版本。
使用HBuilder新建项目
依次点击文件→新建→选择Web项目(按下Ctrl+N,W可以触发快速新建(MacOS请使用Command+N,然后左键点击Web项目))
image
image
如上图,请在A处填写新建项目的名称,B处填写(或选择)项目保存路径(更改此路径HBuilder会记录,下次默认使用更改后的路径),C处可选择使用的模板(可点击自定义模板,参照打开目录中的readme.txt自定义模板)
使用HBuilder创建HTML页面
在项目资源管理器中选择刚才新建的项目,依次点击文件→新建→选择HTML文件(按下Ctrl+N,W可以触发快速新建(MacOS请使用Command+N,然后左键点击HTML文件)),并选择空白文件模板,如下图
image
使用HBuilder边改边看试试查看编程效果
win系统按下Ctrl+P(MacOS为Command+P)进入边改边看模式,在此模式下,如果当前打开的是HTML文件,每次保存均会自动刷新以显示当前页面效果(若为JS、CSS文件,如与当前浏览器视图打开的页面有引用关系,也会刷新)
HBuilder代码块大量减少重复代码工作量
在打开的getstart.html中输入H,如下图
image
然后按下8,自动生成HTML的基本代码如下图
image
什么是代码块?
代码块是常用的代码组合,比如在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输出但metau则输出,metag同理。
代码块激活字符原则4:如果原始语法超过4个字符,针对常用语法,则第一个单词的激活符使用缩写。比如input button,缩写为inbutton,同理intext是输入框。
代码块激活字符原则5:js的关键字代码块,是在关键字最后加一个重复字母。比如if直接敲会提示if关键字,但iff回车,则出现if代码块。类似的有forr、withh等。由于funtion字母较长,为加快输入速度,取fun缩写,比如funn,输出function代码块,而funa和func,分别输出匿名函数和闭包。
灵活的快捷键使得编程过程手不离键盘
效果如下图
image
新建html基本模板后,当前光标处于title标签内,此时我们给HTML设置title:hellohbuilder,完成后使用Ctrl+回车在当前的下一行插入空行,并将光标移动到下一行
我们在此处使用sc代码块生成一个script块来编写js代码(输入sc,回车)如下图
image
使用funn代码块编写一个JS方法helloworld(输入funn,回车)如下图
image
此时生成的方法的方法名是选中状态,我们只需要直接输入新的方法名helloworld即可,如下图
image
上图中的绿色竖线,是代码块中指定的下一个编辑位置,敲击回车光标会直接跳转至竖线位置
此时按向下、向下,Ctrl+回车,输入style回车,生成css代码区域
定义一个Css类classA:输入. c l a s s A { 回车,f o n t 回车 回车 回车
然后按alt+下,alt+下跳转至下一个编辑区域
依次输入< d i v 也可输入<dv回车、<iv回车,语法助手可以通过模糊匹配获知想要生成的标签)如下图
image
如上图所示,代码助手左侧包含数字,可以使用这些数字选择对应的条目,右侧包含浏览器兼容性数据及示例
输入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生成代码如下图
image
HBuilder集成了Emmet功能,可以通过CSS选择器语法来快速开发HTML和CSS,如想深入了解Emmet请移步http://www.emmet.io/
强大的JS解析引擎大大加快JS开发的速度
JS中提示HTML、CSS
JS提示html的ID
image
JS提示html的tagname
image
JS提示css类名
image
JS通过ID、tagname、css类名不但可以获取HTML元素,还可以精确分析出其元素类型,准确提示其属性,如上图可以提示出list[0].type
JS中提示JSON
image
JS提示自定义系统方法
image
JS提示对象引用及其属性、方法
image
JS提示闭包对象
image
image
跳转到class、id、js方法定义处
按下Alt,左键点击引用的方法名、ID、CSS类、文件(链接、图片),均可跳转到引用的地方,跨文件的引用也可以哦
跳转到JS方法定义处 如下图
image
跳转到CSS类定义处 如下图
image
跳转到ID定义处 如下图
image
跳转到文件 如下图
image
更多挖宝
跳转助手、选择助手、转义助手、快捷键助手,让你手不离键盘。
HTML5+支持、手机真机连调、云编译,方便开发跨手机平台的APP。
更多精彩功能:重构 | 大纲 | 任务 | 版本历史 | 内置webserver | 实时升级 | 安全工程管理 | 包围 | 掩码转换 | 智能纠错 | 折叠代码 | 转到定义 | 格式化代码 | URL编解码 | 进制转换 | 自动闭合。
还不满足?下载插件增强更多功能,高手更可开发插件,并共享插件造福所有开发者。
HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写,它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。
如何安装 HBuilder?
HBuilder下载地址:在HBuilder官网http://www.dcloud.io/点击免费下载,下载最新版的HBuilder。
HBuilder目前有两个版本,一个是windows版,一个是mac版。下载的时候根据自己的电脑选择适合自己的版本。
使用HBuilder新建项目
依次点击文件→新建→选择Web项目(按下Ctrl+N,W可以触发快速新建(MacOS请使用Command+N,然后左键点击Web项目))
image
image
如上图,请在A处填写新建项目的名称,B处填写(或选择)项目保存路径(更改此路径HBuilder会记录,下次默认使用更改后的路径),C处可选择使用的模板(可点击自定义模板,参照打开目录中的readme.txt自定义模板)
使用HBuilder创建HTML页面
在项目资源管理器中选择刚才新建的项目,依次点击文件→新建→选择HTML文件(按下Ctrl+N,W可以触发快速新建(MacOS请使用Command+N,然后左键点击HTML文件)),并选择空白文件模板,如下图
image
使用HBuilder边改边看试试查看编程效果
win系统按下Ctrl+P(MacOS为Command+P)进入边改边看模式,在此模式下,如果当前打开的是HTML文件,每次保存均会自动刷新以显示当前页面效果(若为JS、CSS文件,如与当前浏览器视图打开的页面有引用关系,也会刷新)
HBuilder代码块大量减少重复代码工作量
在打开的getstart.html中输入H,如下图
image
然后按下8,自动生成HTML的基本代码如下图
image
什么是代码块?
代码块是常用的代码组合,比如在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输出但metau则输出,metag同理。
代码块激活字符原则4:如果原始语法超过4个字符,针对常用语法,则第一个单词的激活符使用缩写。比如input button,缩写为inbutton,同理intext是输入框。
代码块激活字符原则5:js的关键字代码块,是在关键字最后加一个重复字母。比如if直接敲会提示if关键字,但iff回车,则出现if代码块。类似的有forr、withh等。由于funtion字母较长,为加快输入速度,取fun缩写,比如funn,输出function代码块,而funa和func,分别输出匿名函数和闭包。
灵活的快捷键使得编程过程手不离键盘
效果如下图
image
新建html基本模板后,当前光标处于title标签内,此时我们给HTML设置title:hellohbuilder,完成后使用Ctrl+回车在当前的下一行插入空行,并将光标移动到下一行
我们在此处使用sc代码块生成一个script块来编写js代码(输入sc,回车)如下图
image
使用funn代码块编写一个JS方法helloworld(输入funn,回车)如下图
image
此时生成的方法的方法名是选中状态,我们只需要直接输入新的方法名helloworld即可,如下图
image
上图中的绿色竖线,是代码块中指定的下一个编辑位置,敲击回车光标会直接跳转至竖线位置
此时按向下、向下,Ctrl+回车,输入style回车,生成css代码区域
定义一个Css类classA:输入. c l a s s A { 回车,f o n t 回车 回车 回车
然后按alt+下,alt+下跳转至下一个编辑区域
依次输入< d i v 也可输入<dv回车、<iv回车,语法助手可以通过模糊匹配获知想要生成的标签)如下图
image
如上图所示,代码助手左侧包含数字,可以使用这些数字选择对应的条目,右侧包含浏览器兼容性数据及示例
输入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生成代码如下图
image
HBuilder集成了Emmet功能,可以通过CSS选择器语法来快速开发HTML和CSS,如想深入了解Emmet请移步http://www.emmet.io/
强大的JS解析引擎大大加快JS开发的速度
JS中提示HTML、CSS
JS提示html的ID
image
JS提示html的tagname
image
JS提示css类名
image
JS通过ID、tagname、css类名不但可以获取HTML元素,还可以精确分析出其元素类型,准确提示其属性,如上图可以提示出list[0].type
JS中提示JSON
image
JS提示自定义系统方法
image
JS提示对象引用及其属性、方法
image
JS提示闭包对象
image
image
跳转到class、id、js方法定义处
按下Alt,左键点击引用的方法名、ID、CSS类、文件(链接、图片),均可跳转到引用的地方,跨文件的引用也可以哦
跳转到JS方法定义处 如下图
image
跳转到CSS类定义处 如下图
image
跳转到ID定义处 如下图
image
跳转到文件 如下图
image
更多挖宝
跳转助手、选择助手、转义助手、快捷键助手,让你手不离键盘。
HTML5+支持、手机真机连调、云编译,方便开发跨手机平台的APP。
更多精彩功能:重构 | 大纲 | 任务 | 版本历史 | 内置webserver | 实时升级 | 安全工程管理 | 包围 | 掩码转换 | 智能纠错 | 折叠代码 | 转到定义 | 格式化代码 | URL编解码 | 进制转换 | 自动闭合。
还不满足?下载插件增强更多功能,高手更可开发插件,并共享插件造福所有开发者。
相关推荐
HBuilder使用教程及下载,无需编程可以直接生成安卓和IOS应用,内附APP打包H5应用的详细教程图片及百度盘下载。
本人小白,刚接触app,由于Android Stuido原生开发比较困难,所以采用Hbuilderx进行h5开发,由于使用HbuilderX云打包要进行排队,而且要付费,考虑到以后项目在上线后,若遇到紧急bug修复,采用云打包模式有可能还要...
html是计算机中最简单易学的语言,而此工具能帮助大家快速进行开发,全中文版本,能同时开发网页,安卓,ios,还犹豫什么呢,快快下载吧!
HBuilder跟MUI文字教程适合初次使用HBuilder编辑器跟MUI框架的人员,能让你快速掌握HBuilder使用方法跟MUI框架。
HBuilderX.3.7.9.20230324 安装包,附安装使用教程 HBuilderX是HBuilder的升级版。它是是DCloud(数字天堂)推出为前端开发者服务的通用IDE,或者称为编辑器。 BuilderX标准版可直接用于web开发、markdown、字处理...
当你做完一个网页想要让它打包成一个APP的时候,可以参考此文档。此教程是我在工作中经常使用的一种方法,并且实践过无数次。
HBuilderx是一个前端开发常用的软件,本压缩包含有HBuilderX.3.1.9.20210413.full.dmg、HBuilderX.3.1.9.20210413.full.zip、2345好压.exe和Chrome_69.0.3497.100_x64.exe等软件,视频教程:...
CrossApp 中文文档、Dart 编码风格指南、Excel 教程:实用技巧系列、Hadoop 笔记(PennyWong)、HBuilder 使用教程、HomeKit App 开发指南、imobilebbs CodeSmith 教程、Markdown 语法说明、Revel 中文文档、SSDB ...
基于HBuilder快速开发移动端APP的设计与实现.pdf
本压缩文件总结了如何安装与使用HBuilderX,视频教程:https://www.bilibili.com/video/BV1Um4y1i76b/?spm_id_from=333.999.0.0
node.js安装及HbuilderX配置详解 npm安装教程: 官网:https://nodejs.org/en/ webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。 vue-cli:...
HelloMUI demo (html页面代码)
下面小编就为大家带来一篇HBuilder打包App方法(图文教程)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
hbuilderx压缩包,解压即可直接使用,uniapp开发小程序专用工具,请搜索中二少年学编程的小程序系列教程学习使用
1、 DCloud介绍和产品架构_高清;2、官方的文档和工具案例展示_高清;3、 用HBuilder开发一个HelloWorld_高清;4、 页面构成、跳转和网络通讯_高清;5、页面构成-创建子页面_高清;等等
HBuilderX前端软件社区+thinkphp后端源码,搭建好后台在前端找到 util 这个文件把两个js文件上面的填上自己的域名,登录HBuilderX账号没有账号就注册账号然后上传文件即可。打包选择发行 可以打包app或h5等等
HBuiderX很适合初学者使用,在学习HTML + CSS 过程中很有帮助,不仅提供学习教程、还提供不同的使用界面,同时界面的设计十分友好,不仅能提高学习效率,也能提高编程的速度。该压缩包为整个编译器的安装完成后的...
适合初学者的HTML网页制作教程,简单明了易懂。
app开发教程之用HBuilder(后改名uni-app)跨平台开发app教程
详细教程在上篇图文教程,懒得去官网可以直接拖这个压缩包,比较方便 这是为了增加能力值打的字, 在电脑端查看App的效果,不用真机调试,下载一个模拟器就可以了 --- Nox Player,夜神模拟器,是一款 Android ...