zoukankan      html  css  js  c++  java
  • HBuilder各种快捷键

    另外还有一些实用的组合键: 

    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 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,左边保存右边自动刷新

    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'

    百度上顺的给自己看

  • 相关阅读:
    mongodb
    python中读取文件的read、readline、readlines方法区别
    uva 129 Krypton Factor
    hdu 4734
    hdu 5182 PM2.5
    hdu 5179 beautiful number
    hdu 5178 pairs
    hdu 5176 The Experience of Love
    hdu 5175 Misaki's Kiss again
    hdu 5174 Ferries Wheel
  • 原文地址:https://www.cnblogs.com/yyy251/p/7026536.html
Copyright © 2011-2022 走看看