首页 » SEO优化 » hbuilderphp代码折叠技巧_HBuilder快捷键

hbuilderphp代码折叠技巧_HBuilder快捷键

访客 2024-12-18 0

扫一扫用手机浏览

文章目录 [+]

1.文件(4)

新建 Ctrl + N

hbuilderphp代码折叠技巧_HBuilder快捷键

关闭 Ctrl + F4

hbuilderphp代码折叠技巧_HBuilder快捷键
(图片来自网络侵删)

全部关闭 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

3.插入(3)

重复插入当前行或选中区域 Ctrl + Shift + R

快速插入<br/>(在html中) Shift + Enter

快速插入\n(在css或js中) Shift + Enter

4.选择(4)

向左选词 Ctrl + Shift + 向左

向右选词 Ctrl + Shift + 向右

选择相同词 Ctrl + Shift + A

选择成对内容 Ctrl + ‘[‘

5.跳转(9)

上一个选项卡 Ctrl + Tab

前一词 Ctrl + 向左

后一词 Ctrl + 向右

转到上一个文本输入点 Alt + 向上

转到下一个文本输入点 Alt + 向下

行首 Home

行尾 End

页首 Ctrl + Home

页尾 Ctrl + End

6.查找(8)

搜索条 Ctrl + F

搜索框 Ctrl + H

查找文件 Ctrl + T

隐蔽搜索条 ESC

聚焦到搜索条件框内 Ctrl + Alt + F

聚焦到更换输入框内 Ctrl + Alt + E

在搜索条内换行 Alt +Enter

HTML标签规范 Ctrl + Shift + H

7.运行(1)

运行 Ctrl + R

8.工具(1)

CSS/HTML语法校验 Ctrl + Shift + V

9.视图(6)

活动视图或编辑器最大化 Ctrl + M

显示行号菜单 Ctrl + F10

激活边看边改视图 Ctrl + P

激活开拓视图 Ctrl + Shift + P

全部折叠 Ctrl + Alt + -

全部展开 Ctrl + Alt + +

————————————————

1.缩进方法:

整多行代码:选择多行,tab键向右移动,shift+tab键向左

代码补齐、帮修正:Alt+/

创建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-代码块。

若须要自定义代码块,点击菜单工具-扩展代码块。

若需修正或搜索快捷键,点击菜单工具-选项-常规-快捷键。

若浏览快捷键,点击菜单帮助-快捷键。

##快捷键语法:

很多软件有几百个快捷键但没人记的住。
为理解决这个问题,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: none;

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,分别输出匿名函数和闭包。

移动App开拓 (制作韶光 2015-8-12)

用HTML5却不做手机App?那HTML4就够用了。

用HBuilder直接创建移动App,连上数据线真机联调,打包为iOS或Android原生安装包。

HBuilder支持HTML5+规范,它使得js可以调用二维码、语音输入、摄像头、位置、陀螺仪...几十万原生API!

打开以下网址,下载HTML5+APP入门开拓教程:

http://ask.dcloud.net.cn/docs/

标签:

相关文章