web培训吧 关注:1,992贴子:1,736
  • 2回复贴,共1

前端开发工具HBuilder使用技巧以及快捷键

只看楼主收藏回复

前端开发工具HBuilder使用技巧以及快捷键


1楼2019-12-31 09:11回复
    创建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'


    2楼2019-12-31 09:11
    回复
      2025-06-12 20:12:55
      广告
      创建超链接并设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' ↓


      3楼2019-12-31 09:12
      回复