web前端开发工具HBuilder使用技巧之快捷键 - 知乐享 - 博客园
知识乐于分享，好记性不如有个博客，记录点点滴滴。
交流qq，个人网站atxqw.com
/*注：本教程针对HBuilder5.0.0，制作日期*/
创建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-代码块。 若需要自定义代码块，点击菜单工具-扩展代码块。 若需修改或搜索快捷键，点击菜单工具-选项-常规-快捷键。 若浏览快捷键，点击菜单帮助-快捷键。
##快捷键语法： 很多软件有几百个快捷键但没人记的住。为了解决这个问题，HBuilder引入了快捷键语法。 HBuilder的快捷键是有规律的，虽然与其他软件不同。但记忆几条快捷键语法，就能记住大多数快捷键。 1. Alt是跳转，Shift是转义，Ctrl是操作。 &比如Alt+括号、引号，即转到对应的符号。 &Shift+回车是&br/&，shift+空格是&。 &Ctrl+D是删除行，Ctrl+F2是重构命名。 2. Ctrl+某字母的快捷键，变成Ctrl+Shift+相同字母，大多代表相反意义 &比如Ctrl+p和Ctrl+Shift+p，分别是开启和关闭边看边改模式。 3. HBuilder继承windows所有标准快捷键。 &比如Tab和Shift+Tab的缩进与反缩进，Ctrl+左右是光标跳转一个单词 4. 所有菜单命令都有&快捷键 &按下Alt+F等字母就可以激活菜单，菜单里每个项目文字后面括号里的字母都是&快捷键，敲下字母就激活那个菜单项。 虽然你可能习惯了原来使用的工具的快捷键，但可以忘掉它了，这套快捷键语法才是值得记忆的。
##代码块激活字符原则 1. 连续单词的首字母。 &比如js中：dg激活document.getElementById(""); &vari激活var i=0; &而css中，dn激活display: 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，分别输出匿名函数和闭包。
转载至HBuilderHBuilder编辑器的快捷键语法是什么？有什么用？ - 绿盟文章
&HBuilder编辑器（）的快捷键语法是什么？有什么用？绿盟小编下面为大家简要的介绍一下，希望能帮助到您：这里要提到一点：「如果你想快速记住快捷键，不如记快捷键语法。」为什么这么说呢？快捷键语法是这样的：Alt是转到，Shift是转移，Ctrl是操作。比如Alt+括号、引号，即使转到对于的符号。Shift+回车是&br/&，shift+空格是&。Ctrl+D是删除行，Ctrl+F2是重构命名。这样一来记住捷键语法是不是比记快捷键简单多了！没错！HBuilder编辑器的快捷键语法就是因此而来的。
文章来自绿盟(xDowns.com)转载请注明来路。
上一篇文章：HBuilder从下载到使用
听别人谈论这货，于是决定长长见识，见见世面，便屁颠屁颠到网上下一个，满怀好奇的研究了一下。对用过eclipse这款软件的人来说，上手非常容易。
　　☆ 准备工作
　　① 确认自己的电脑连接网络，能下载东西。
　　② 最好有一款主流浏览器。如谷歌，火狐，IE，Opera等(用这个工具都是做web的，浏览器很重要。)
　　☆ 下载HBuilder
　　方式一： 在浏览器的地址栏中输入 然后回车进入
　　方式二： 打开浏览器，访问百度搜索，输入HBuilder官网，然后点击进入
　　上面的两种方式，任选一种。访问官网后如下图所示
　　选择HBuilder之后，点击下载处弹出提示界面。
　　点击即可下载。
　　注：一般都是选择保存在哪，有部分会调用你的下载工具进行下载，如，迅雷，电驴等。
　　☆使用HBuilder
　　找到下载HBuilder文件，这文件时绿色解压缩版。就是说不用安装，解压后直接可以使用。因此，我们必须找到自己存放这种绿色版的工具位置，粘贴该文件，然后解压，解压后删除压缩包。
　　打开如上图所示的HBuilder文件夹，找一个HBuilder.exe文件，如下图所示
　　选中该文件，右键-弹出菜单中选择“发送到”弹出菜单中选择“桌面快捷方式”，点击他。
　　然后，我们在桌面就可以看到这样一个图标，将文件的名字改成HBuilder就可以。以后直接双击这个快捷方式，就可以直接打开HBuilder开发工具。
　　☆ 使用HBuilder
　　双击HBuilder这个图标，打开软件。然后你会看到这样一个界面
　　你可以选择注册一个用户来使用，也可以直接使用。点击暂不登录跳过这个界面，直接使用此工具。如果需要注册的可以自己注册,此处省略注册过程。
　　进入的这个界面是一个欢迎界面，同时下面有该工具的使用的教程。可以先浏览器一遍，然后在来使用这个工具。同时整个软件界面使用的都是简体中文，看起来也相对容易。
　　使用步骤：
　　1，建立web项目(工具帮助你构建开发和解析html环境)
　　2，建立web页面(这是就是我们经常说的网页)
　　新建页面时，注意选择html5这一项，因为时下流行的就是html，选择这个之后，软件会自动生成html5的代码结构。
　　注：meta标记的charset属性一般设置为utf-8
　　这个工具的最大优点就是快捷键使用起来舒服和方便。
　　☆ HBuilder快捷键
　　点击”帮助”菜单,在里面找到”快捷键列表”这一项，点击他，然后在整个工具布局的右边看到一个列表，这里面就是对快捷键的描述。
　　对于快捷键的使用，大家可以自己慢慢体验和琢磨。只有用的时间长了，快捷键就会信手而来，练得次数多了，写起代码才有飞一般的感觉。
技术分享：www.kaige123.com
没有更多推荐了，每一条走过的路都有不得不这样跋涉的理由，每一条将要走下去的路都有不得不这样选择的方向。...
HBuilder常用快捷键总结
HBuilder常用快捷键大概共9类（【4 13 3】文件、编辑、插入；【4 9 8】选择、跳转、查找；【1 1 6】运行、工具、视图）
新建 Ctrl + N
关闭 Ctrl + F4
全部关闭 Ctrl + Shift + F4
属性 Alt + Enter
2.编辑(13)
激活代码助手 Alt + /
激活快捷键视图 Ctrl + Shift + L
开启关闭注释整行 Ctrl + /
开启关闭注释已选内容 Ctrl + Shift + /
删除当前行 Ctrl + D
删除当前标签 Ctrl + Shift + T
删除至行首 Shift + Backspace
删除至行尾 Shift + del
合并下一行 Ctrl + Alt + J
整理代码格式 Ctrl + Shift + F
向下移动行 Ctrl + 向下
向上移动行 Ctrl + 向上
选中当前行 Ctrl + L
重复插入当前行或选中区域 Ctrl + Shift + R
快速插入&br/&(在html中) Shift + Enter
快速插入\n(在css或js中) Shift + Enter
向左选词 Ctrl + Shift + 向左
向右选词 Ctrl + Shift + 向右
选择相同词 Ctrl + Shift + A
选择成对内容 Ctrl + ‘[‘
上一个选项卡 Ctrl + Tab
前一词 Ctrl + 向左
后一词 Ctrl + 向右
转到上一个文本输入点 Alt + 向上
转到下一个文本输入点 Alt + 向下
页首 Ctrl + Home
页尾 Ctrl + End
搜索条 Ctrl + F
搜索框 Ctrl + H
查找文件 Ctrl + T
隐藏搜索条 ESC
聚焦到搜索条件框内 Ctrl + Alt + F
聚焦到替换输入框内 Ctrl + Alt + E
在搜索条内换行 Alt +Enter
HTML标签规范 Ctrl + Shift + H
运行 Ctrl + R
CSS/HTML语法校验 Ctrl + Shift + V
活动视图或编辑器最大化 Ctrl + M
显示行号菜单 Ctrl + F10
激活边看边改视图 Ctrl + P
激活开发视图 Ctrl + Shift + P
全部折叠 Ctrl + Alt + -
全部展开 Ctrl + Alt + +
没有更多推荐了，hbuilder的快捷键有哪些_百度知道
hbuilder的快捷键有哪些
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
HBuilder常用的快捷键：Alt + [ 匹配括号Alt + ↓跳转到下一个可编辑区Ctrl + Alt + j 合并下一行Ctrl + Alt + ←选择助手Ctrl + 回车 换行Ctrl + Shift + 回车 向上换行Ctrl + d 删除一行Ctrl + Shift +R 复制上一行创建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 Tabcase处提示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 ↓ Enterjs里可以提示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 Entere赋值改为image对象：e Space = Space n e w Space i m 6 E Enter为img增加图片： e . s r Enter = & Enter E Entere赋值改为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 → ; Enterwith里也可以提示： 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 { Enteremmet方式增加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，左边保存右边自动刷新。
采纳率：95%
来自团队：
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。