HBuilder常用快捷键

素颜马尾好姑娘i 2022-06-05 10:12 287阅读 0赞

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 Space e ; Enter  
为e赋值：e Space = Space d o Enter . g 6 ” Enter （可提示样式列表）  
使用回车或Tab跳转光标到绿色竖线（若没有绿色竖线请使用End到行尾）：Enter ; Enter  
为e赋值2：e Space = Space d o Enter . g 8 ” d 8 Enter ; Enter （可提示标签列表）  
为e赋值3(这个代码块很常用)：e Space = Space (或者dg)Enter2Enter;Enter（可提示id列表，注意选择d1）为e设置algin属性：e.se2”alEnter→,”cEnterEnter;Enter设置自定义属性：e.se2”dEnter→,”2Enter;Enter提示字体列表：e.stEnter.fo2=”EnterEnter;Enter提示图片列表：e.stEnter.b7=”hbEnterEnter;Enter还能这么写css：e.stEnter.cs2=”b7hbEnter→;Enter写switch对e判断：sw2e.stEnter.disEnterTabcase处提示display的值域：”−weEnter跳转到switch结尾（有绿色竖线）：EnterEnter写if代码块：iffEnter(或者使用if2)为if添加条件判断属性里的样式：e.getatEnter”cEnterEnter!=”Enter↓设置e的样式：e.cl2(此处也可以用clnEnter)=”EnterEnter;↓Enterjs里可以提示html：e.innEnter=”<foEnterSpacecoEnterEnterEnter;Entere赋值改为超链接：eSpace=Space Enter Enter Enter ; Enter  
给a1加链接地址：e . h r Enter = ” Enter Enter ; Enter  
给a1加target：e . t 5 = ” Enter Enter ; Enter  
e赋值改为image对象：e Space = Space n e w Space i m 6 Enter ; Enter  
为img增加图片： e . s r Enter = ” Enter Enter ; 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 Enter ; ↓ 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 Enter ; Enter （with里的head可直接识别子对象）  
去掉该子节点：r e m 6 l → ; ↓ Enter （head的lastElementChild就是外部引用的css）  
动态生成一个css文件引用：e Space = Space d c Enter l 5 Enter ; Enter  
添加属性：e . r 3 = ” s t y Enter Enter ; Enter  
设置type： e . t y Enter = ” c Enter Enter ; Enter  
设置href：e . h r Enter = ” . c Enter Enter ; Enter  
将e加入head中：h Enter . a p Enter e Enter Enter ; 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 Enter ; ‘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，左边保存右边自动刷新

转载于：[http://blog.csdn.net/solo\_two/article/details/51425398][http_blog.csdn.net_solo_two_article_details_51425398]

[http_blog.csdn.net_solo_two_article_details_51425398]: http://blog.csdn.net/solo_two/article/details/51425398