• 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 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) Enter 2 Enter ; Enter (可提示id列表,注意选择d1)
    为e设置algin属性: e . s e 2 " a l Enter → , " c Enter Enter ; Enter
    设置自定义属性:e . s e 2 " d Enter → , " 2 Enter ; Enter
    提示字体列表: e . s t Enter . f o 2 = " Enter Enter ; Enter
    提示图片列表: e . s t Enter . b 7 = " h b Enter Enter ; 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 Enter ; ↓ Enter
    js里可以提示html: e . i n n Enter = " < f o Enter Space c o Enter Enter Enter ; Enter 
    e赋值改为超链接:e Space = 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,左边保存右边自动刷新

     
     
  • 相关阅读:
    ORA-01565 ORA-15025 ORA-27041
    11g r2 vip启动过程
    控制文件多路径复用ORA-00205错误
    sqlmap 整合Meterpreter
    Mataasploit 常见问题
    AWVS的安装、破解与使用
    hydra常见场景
    php 学习笔记
    python学习笔记
    计算机网络基础,网络协议,常见状态码
  • 原文地址:https://www.cnblogs.com/zjfjava/p/6141188.html
Copyright © 2020-2023  润新知