HBuilder 常用快捷键小结
作者：佚名
字体：[ ] 来源：互联网 时间：11-10 16:35:14
朋友推荐用Hbuilder编辑器，看了下Hbuilder官网和那视频，感觉牛逼哄哄的，自己也就体验了一下，打开Hbuilder的快捷键列表，每个快捷键都体验了一下，以下展示出来的，每一个都是精华，每一个快捷键都要知道怎么用，而且会经常用
朋友推荐用Hbuilder编辑器，看了下Hbuilder官网和那视频，感觉牛逼哄哄的， 自己也就体验了一下，打开Hbuilder的快捷键列表，每个快捷键都体验了一下，以下展示出来的，每一个都是精华，每一个快捷键都要知道怎么用，而且会经常用。
HBuilder是当前最快的HTML开发工具，强大的代码助手帮你快速完成开发，最全的语法库和浏览器兼容性数据让浏览器碎片化不再头痛。 利用HBuilder快捷键可以代替鼠标做一些工作，可以利用键盘快捷键打开、关闭和导航&开始&菜单、桌面、菜单、对话框以及网页，Word里面也可以用到快捷键。那就几乎可以脱离鼠标来写前端代码了。
另外还有一些实用的组合键： Alt+T&V　　(检验语法文档) Alt+L&H　　(代码历史版本) Hbuilder也要吐槽一下： 1.打开相对慢。 2.新建文件，为什么不能存放到电脑的目录。 3.emmet输入 w100，变成了w1&white-space: ;，弄得每次都要w&Tab&再输入100px，这个体验超级繁琐。 4.style，script标签默认就不要带'type=***'了，所有浏览器都支持。 5.图片不能自动获取宽高。
下面是其他网友的补充：
Alt+[匹配括号 Alt+&跳转到下一个可编辑区 Ctrl+Alt+j合并下一行 Ctrl+Alt+&选择助手 Shift+回车 Shift+空格 Ctrl+回车换行 Strl+Shift+回车向上换行 Ctrl+d删除一行 Ctrl+Shift+d复制上一行创建HTML结构： h 8 （敲h激活代码块列表，按8选择第8个项目，即HTML代码块，或者敲h t Enter） 中途换行： 'Ctrl+Enter' 设置charset： m e 6 Enter 引用外部js： s 2 Enter 'Ctrl+Enter' 创建js区块： s Enter 创建函数： f u n 3 （或者 f u n n Enter） 为函数命名：W h o i s E 跳转到函数末尾： End 'Alt+[' & 'Ctrl+Enter' （Alt+[是跳转到匹配括号的意思） 创建style节点： s t Enter & 'Ctrl+Enter' 引用外部css： l Enter Enter 跳转到下一个可编辑区： 'Alt+&' 创建img标签： i m Enter Enter 'Ctrl+Enter' 插入换行符： 'Shift+Enter' Enter 创建div并设id和class： d i Enter d 1 & Space c Enter Enter （这里提示的class列表是在test.css里定义的） 转到class的定义处：'Ctrl+Alt+D' （按Alt点击鼠标也可以） 关闭标签页：'Ctrl+w' （切换标签页则可以用Ctrl+e） 添加自定义属性data-test并赋值1： & Space d 7 t e s t Tab 1 合并下行：'Ctrl+Alt+j' 'Ctrl+Enter' 创建超链接并设id： a Enter Enter & Space i Enter a 1 使用选择助手选中#d1：'Ctrl+Alt+&' 'Ctrl+Alt+&' 'Ctrl+Alt+&' (如果快捷键冲突,可使用Alt+S U，或者鼠标双击引号) 重新修改链接指向新创建的a1： BackSpace 'Alt+/' Enter 'Ctrl+Enter' 创建ul： u Enter 折叠代码：'Ctrl+Alt+-' 向上插入空行：'Ctrl+Shift+Enter' Tab （一般Ctrl+某字母的快捷键，变成Ctrl+Shift+相同字母，大多代表相反意义） 没有代码块时，使用emmet语法创建标签：n a v Tab （如果不知道emmet技术，请搜索学习，前端必学） 使用shift转码输入空格：'Shift+Space' （如果与输入法快捷键冲突，也可输入& n 2） 创建按钮：'Ctrl+Enter' i n Enter Enter Tab Tab w h o Space i s Space e & 添加点击事件： Space o n c k Enter w h o Enter & （onck是模糊匹配，不用输入完整单词也会模糊匹配，除代码块外所有语法提示都支持模糊匹配） 使用转到定义到js函数：'Ctrl+Alt+D' & ------以下为js部分 定义一个变量e： v a r S Enter 为e赋值：e Space = Space d o Enter . g 6 & Enter （可提示样式列表） 使用回车或Tab跳转光标到绿色竖线（若没有绿色竖线请使用End到行尾）：E Enter 为e赋值2：e Space = Space d o Enter . g 8 & d 8 E Enter （可提示标签列表） 为e赋值3(这个代码块很常用)：e Space = Space $ (或者dg) Enter 2 E Enter （可提示id列表，注意选择d1） 为e设置algin属性： e . s e 2 & a l Enter & , & c Enter E Enter 设置自定义属性：e . s e 2 & d Enter & , & 2 E Enter 提示字体列表： e . s t Enter . f o 2 = & Enter E Enter 提示图片列表： e . s t Enter . b 7 = & h b Enter E Enter 还能这么写css： e . s t Enter . c s 2 = & b 7 h b Enter & ; Enter 写switch对e判断：s w 2 e . s t Enter . d i s Enter Tab case处提示display的值域：& - w e Enter 跳转到switch结尾（有绿色竖线）：Enter Enter 写if代码块：i f f Enter (或者使用i f 2) 为if添加条件判断属性里的样式：e . g e t a t Enter & c Enter Enter ! = & Enter & 设置e的样式：e . c l 2 (此处也可以用c l n Enter) = & Enter E & Enter js里可以提示html： e . i n n Enter = & & f o Enter Space c o Enter Enter E Enter e赋值改为超链接：e Space = Space $ Enter Enter E Enter 给a1加链接地址：e . h r Enter = & Enter E Enter 给a1加target：e . t 5 = & Enter E Enter e赋值改为image对象：e Space = Space n e w Space i m 6 E Enter 为img增加图片： e . s r Enter = & Enter E Enter e赋值改为indexedDB对象：e Space = Space w i Enter . i Enter Space | | Space w i Enter . i n d e x e d 5 Space | | Space w i Enter . i n d e x e d 3 Space | | Space w i Enter . i n d e x e d 2 ; Enter 确认e可被浏览器识别：i f f Enter (也可以使用i f 2) t y 4 e Enter & 执行indexdb的方法：e . o p Enter & t e s t E & Enter ------以下为删除又添加上外部css引用 定义head变量：v a r Space h e a d Space = Space d o Enter . g 8 & h e Enter Enter [ 0 & ; Enter with里也可以提示： w i t h h (或者w i t 2) Enter h Enter & 获取head的最后一个子节点：v a r Space l Space = Space l e c E Enter （with里的head可直接识别子对象） 去掉该子节点：r e m 6 l & ; & Enter （head的lastElementChild就是外部引用的css） 动态生成一个css文件引用：e Space = Space d c Enter l 5 E Enter 添加属性：e . r 3 = & s t y Enter E Enter 设置type： e . t y Enter = & c Enter E Enter 设置href：e . h r Enter = & . c Enter E Enter 将e加入head中：h Enter . a p Enter e Enter E Enter ------演示重构，即重命名变量 用代码块定义一个变量s：v a r s Enter Tab e Space i s Space 'Ctrl+Enter' 判断e的属性：i f e（或i f 3） Enter e . g 2 & d Enter Enter = = n u 2 & 为s赋值：s = s + e . o u E 'Alt+&' 为s赋值：s = s + & u n k n o w & ; & Enter 将s打印出来：a l Enter s 选择s并转到定义：'Shift+&' 'Ctrl+Alt+D'（按Alt点击鼠标也可以） 重构s的命名为ss：'Ctrl+F2' Enter s s Enter Enter (弹出对话框可预览重构结果) 跳转到函数末尾：'Alt+&' 'Alt+&' Enter 添加一个启动事件： a d Enter & d o m l o Enter & , f u n a Enter (此处也可以是f u 6) & 提示自定义函数的jsdoc： f i n i Enter 1 ------css部分 跳转到CSS：'Alt+&' 给body加样式：b o Enter { Enter emmet方式增加textalign：t c Tab Enter 模糊匹配增加user-select：u s e r s 4 5 写下一个样式：& Enter 为input增加样式：i n Enter [ t y Enter = Enter & { Enter 使用代码块设置宽度：w 9 9 0 & Enter 为ul加样式：u l { d n Enter 'Ctrl+Enter' ID也可以提示：# 2 { Enter 提示字体列表：f f Enter Enter Enter 回车自动补行尾分号：Enter 增加background-image：b i Enter h b Enter 大功告成，保存并运行起来看看：'Ctrl+s' 'Ctrl+r' 如果你屏幕够宽，也可以点击右上角视图切换，换到边改边看视图Ctrl+P，左边保存右边自动刷新
HBuilder快捷键： 中途换行： 'Ctrl+Enter' 向上插入空行：'Ctrl+Shift+Enter' Tab （一般Ctrl+某字母的快捷键，变成Ctrl+Shift+相同字母，大多代表相反意义） 跳转到函数末尾： End 'Alt+[' & 'Ctrl+Enter' （Alt+[是跳转到匹配括号的意思） 插入换行符： 'Shift+Enter' 转到class的定义处/转到function的定义处：'Ctrl+Alt+D' （按Alt点击鼠标也可以） 合并下行：'Ctrl+Alt+j' 折叠代码：'Ctrl+Alt+-' 使用shift转码输入空格：'Shift+Space'
大家感兴趣的内容
12345678910
最近更新的内容HBuilder设置iOS9平台沉浸式状态栏显示效果 - 绿盟文章
&HBuilder（下载页：）设置iOS9等平台沉浸式状态栏显示效果配置方法、效果图，绿盟小编带给你：应用可视区域到系统状态栏下透明显示效果，如下图所示：此模式下应用占用全屏区域，而系统状态栏会拦截用户操作事件，此时需要预留出系统状态栏高度。HBuilder创建的应用默认不使用沉浸式状态栏样式，需要进行如下配置开启：打开应用的manifest.json文件，切换到代码视图，在plus -& distribute -& apple 下添加UIReserveStatusbarOffset节点并设置值为false。&UIReserveStatusbarOffset&: false,如下图所示：保存后提交App云端打包注意：1. 真机运行不生效，需提交App云端打包后才生效；2. 此功能仅在iOS7及以上系统有效。
文章来自绿盟()转载请注明来路。
上一篇文章：在HBuilder中怎样设置平线的颜色和粗细
目前K线图上能显示3条均线，用不同颜色的线分别表示5日、10日、30日。
不同软件颜色有所不同，但在K线图上方应有各均线的价格，上方均线价格用的颜色与图中均线...
K线上面有颜色的线是移动平均线，有三根或五根它与颜色一样按自已喜欢爱好可以自已设定。5曰均线就是5日平均价、、、、、、
移动平均线：：
移动平均线可设...
交直流动力主线用红色的线
病情分析：
你好，在孕试纸检查为弱阳性是要考虑由于体内孕激素分泌不稳定造成的，为怀孕的情况。
指导意见：
建议你可以及时去医院抽血化验血hcg检测怀孕的，对于宫...
这个应该是涉及了违轨的内容吧！
答: 导电双面胶带质量比较好呢？
答: 考试合格啊！
答: 当前世界上有四个最大的科学难题，全球各专业的科学家都在设法揭开大自然的这些秘密，如能解开这些谜团，那么人类的生活以及对世界的看法将发生根本的变化。
答: 　2011年二级建造师考试时间(部分省市时间不统一)
6月26日　 上午9:00-12:00...
大家还关注
确定举报此问题
举报原因(必选)：
广告或垃圾信息
激进时政或意识形态话题
不雅词句或人身攻击
侵犯他人隐私
其它违法和不良信息
报告，这不是个问题
报告原因(必选)：
这不是个问题
这个问题分类似乎错了
这个不是我熟悉的地区最近大家的目光都已经被 iPhone 8 给吸引走了，有多少人还能够回想起早就被遗忘了好些...
Metal 会成为 Mac 的标准图形 API吗？
这份专利设计主要是为了优化镜头中的肖像位置，还原真实拍摄。
在苹果没有推出触屏MacBook之前，这不失为一个好方案。
Filmer's Kit将作为限量版产品销售，全球只有2,000台，售价为199美元。
设备的简单性是公司能够降低成本的关键。
据悉这款智能手机将使用模块化设计。
对这次搜狗输入法更新的这些功能，你对哪个更有兴趣，自己最常用的输入法又是哪个？
　在本周的 App Store 更新当中，我们迎来了一款由国内游戏人打造的 Roguelike 游戏—...
Chibig, S.L.U. 旗下的《安可拉（Ankora）》是一款融入了模拟养成元素的冒险游戏，与...
SQUARE ENIX 近期在日区推出了一款非常不错的手游，披着一身偶像女团外皮，实际上切开...
与前作相比，《暗影格斗3》的提升还是非常显著的，感兴趣的玩家可以等待游戏的正式上...
轻松的旋律在巷尾的小酒吧环绕，结合门缝中偶尔缓缓流淌出的鼓点，营造出了这特定场合...
Jam City 近日推出了新作《史努比泡泡（Snoopy Pop）》，从名字就可以看出这是一款泡...
在苹果没有推出触屏MacBook之前，这不失为一个好方案。
Filmer's Kit将作为限量版产品销售，全球只有2,000台，售价为199美元。
设备的简单性是公司能够降低成本的关键。
简单来说，PIECE 其实就是 iPhone 的一个外接卡槽。
市面上大多数的保护壳都掩盖了 iPhone 的设计和手感。
LifeBattery AIR 可以在电池本身充电的同时为用户的苹果设备进行充电。
它会根据 iPhone 接收到的不同通知而显示不同的颜色。
HoverPlate 的设计灵感来源于苹果公司，提供的配色款式也跟 iPhone 相符。
DCloud HBuilder-做最好的HTML5开发工具
注册时间 最后登录
在线时间234 小时 UID
主题帖子人气
小苹果, 积分 44, 距离下一级还需 6 积分
HBuilder.PNG (132.77 KB, 下载次数: 1)
11:20 上传
下载信息见附件（无法发网址 ）：
(96 Bytes, 下载次数: 265)
11:59 上传
点击文件名下载附件
注册时间 最后登录
在线时间130 小时 UID
主题帖子人气
看着不错的样子
注册时间 最后登录
在线时间20 小时 UID
主题帖子人气
谢谢分享~fu
注册时间 最后登录
在线时间969 小时 UID
主题帖子人气
需要 Java SE 6 环境。。。。。。我流汗了啊。。。。。。
您需要登录后才可以回帖
回帖后跳转到最后一页
威锋旗下产品
Hi~我是威威！
沪公网安备 29号　|　沪ICP备号-1
新三板上市公司威锋科技（836555）
增值电信业务经营许可证：
Powered by Discuz!HBuilder实现软件自动升级前言 & &&& & & &移动APP开发好后需要实现软件自动升级功能，经过一番搜索，发现HBuilder具有“App资源在线升级更新”的功能，遂研究之。经过一番测试，在源码思想的基础之上对其进行了优化。代码如下: var wgtVer =
function plusReady(){
// 获取本地应用资源版本号
plus.runtime.getProperty(plus.runtime.appid,function(inf){
wgtVer=inf.
console.log(&当前应用版本：& + wgtVer);
console.log(&=================版本测试=================&);
if(window.plus){
plusReady();
document.addEventListener('plusready',plusReady,false);
document.addEventListener('plusready',checkUpdate,false);
// 检测更新
var checkUrl=&/lmapp/versionCheck.html&;
function checkUpdate(){
plus.nativeUI.showWaiting(&检测更新...&);
$ionicLoading.show({
template: &检测更新...&
$timeout(function() {
$ionicLoading.hide();
}, 1200);*/
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
switch(xhr.readyState){
plus.nativeUI.closeWaiting();
if(xhr.status == 200){
console.log(&检测更新成功：& + xhr.responseText);
// 读取最新版本号
var newVer = xhr.responseT
console.log(&最新版本:& + newVer);
if(wgtVer && newVer && (wgtVer != newVer)){
// H5 plus事件处理,弹出提示信息对话框
plus.nativeUI.confirm(&\&立马送药\&检测到新版本,是否更新?&, function(e) {
if(e.index == 0){
console.log(&确定！&);
downWgt(); // 下载升级包
立马送药&, [&确定&, &取消&]);
plus.nativeUI.alert(&无新版本可更新！&);
console.log(&检测更新失败！&);
plus.nativeUI.alert(&检测更新失败！&);
xhr.open('GET',checkUrl);
xhr.send();
// 下载wgt文件
var wgtUrl = &/lmapp/files/download/H5202FBD5.wgt&;
function downWgt(){
plus.nativeUI.showWaiting(&下载wgt文件...&);
plus.downloader.createDownload( wgtUrl, {filename:&_doc/update/&}, function(d,status){
if ( status == 200 ) {
console.log(&下载wgt成功：&+d.filename);
installWgt(d.filename); // 安装wgt包
console.log(&下载wgt失败！&);
plus.nativeUI.alert(&下载wgt失败！&);
plus.nativeUI.closeWaiting();
}).start();
// 更新应用资源
function installWgt(path){
plus.nativeUI.showWaiting(&安装wgt文件...&);
// force:false进行版本号校验，如果将要安装应用的版本号不高于现有应用的版本号则终止安装，并返回安装失败
plus.runtime.install(path,{force:false},function(){
plus.nativeUI.closeWaiting();
console.log(&安装wgt文件成功！&);
plus.nativeUI.alert(&应用资源更新完成！&,function(){
plus.runtime.restart();
},function(e){
plus.nativeUI.closeWaiting();
console.log(&安装wgt文件失败[& + e.code + &]：& + e.message);
plus.nativeUI.alert(&安装wgt文件失败[& + e.code + &]：& + e.message);
} &span style=&font-family: Arial, Helvetica, sans- background-color: rgb(255, 255, 255);&& &/span&问题&&& & & 注:确实在文件名上出问题,同一wgt文件名多次升级则出错提示了,即使提示&应用资源更新完成！&&,但版本号还是没更新的,因此同一wgt文件名只能使用一次,&这不知是哪里的bug.
上一篇： 下一篇：