台式电脑

平板电脑打字怎么样加行号(HBuilder快捷键)

HBuilder常用快捷键大概共9类(【4133】文件、编辑、插入;【498】选择、跳转、查找;【116】运行、工具、视图)

1.文件(4)

新建Ctrl+N

关闭Ctrl+F4

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

快速插入
(在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结构:h8(敲h激活代码块列表,按8选择第8个项目,即HTML代码块,或者敲htEnter)

中途换行:'Ctrl+Enter'

设置charset:me6Enter

引用外部js:s2Enter'Ctrl+Enter'

创建js区块:sEnter

创建函数:fun3(或者funnEnter)

为函数命名:WhoisE

跳转到函数末尾:End'Alt+['↓'Ctrl+Enter'(Alt+[是跳转到匹配括号的意思)

创建style节点:stEnter↓'Ctrl+Enter'

引用外部css:lEnterEnter

跳转到下一个可编辑区:'Alt+↓'

创建img标签:imEnterEnter'Ctrl+Enter'

插入换行符:'Shift+Enter'Enter

创建div并设id和class:diEnterd1→SpacecEnterEnter(这里提示的class列表是在test.css里定义的)

转到class的定义处:'Ctrl+Alt+D'(按Alt点击鼠标也可以)

关闭标签页:'Ctrl+w'(切换标签页则可以用Ctrl+e)

添加自定义属性data-test并赋值1:→Spaced7testTab1

合并下行:'Ctrl+Alt+j''Ctrl+Enter'

创建超链接并设id:aEnterEnter→SpaceiEntera1

使用选择助手选中#d1:'Ctrl+Alt+←''Ctrl+Alt+←''Ctrl+Alt+←'(如果快捷键冲突,可使用Alt+SU,或者鼠标双击引号)

重新修改链接指向新创建的a1:BackSpace'Alt+/'Enter'Ctrl+Enter'

创建ul:uEnter

折叠代码:'Ctrl+Alt+-'

向上插入空行:'Ctrl+Shift+Enter'Tab(一般Ctrl+某字母的快捷键,变成Ctrl+Shift+相同字母,大多代表相反意义)

没有代码块时,使用emmet语法创建标签:navTab(如果不知道emmet技术,请搜索学习,前端必学)

使用shift转码输入空格:'Shift+Space'(如果与输入法快捷键冲突,也可输入&n2)

创建按钮:'Ctrl+Enter'inEnterEnterTabTabwhoSpaceisSpacee→

添加点击事件:SpaceonckEnterwhoEnter→(onck是模糊匹配,不用输入完整单词也会模糊匹配,除代码块外所有语法提示都支持模糊匹配)

使用转到定义到js函数:'Ctrl+Alt+D'↓

------以下为js部分

定义一个变量e:varSpacee;Enter

为e赋值:eSpace=SpacedoEnter.g6"Enter(可提示样式列表)

使用回车或Tab跳转光标到绿色竖线(若没有绿色竖线请使用End到行尾):Enter;Enter

为e赋值2:eSpace=SpacedoEnter.g8"d8Enter;Enter(可提示标签列表)

为e赋值3(这个代码块很常用):eSpace=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.disEnterTab

case处提示display的值域:"-weEnter

跳转到switch结尾(有绿色竖线):EnterEnter

写if代码块:iffEnter(或者使用if2)

为if添加条件判断属性里的样式:e.getatEnter"cEnterEnter!="Enter↓

设置e的样式:e.cl2(此处也可以用clnEnter)="EnterEnter;↓Enter

js里可以提示html:e.innEnter="< f o Enter Space c o Enter Enter Enter ; Enter

e赋值改为超链接:eSpace=Space$EnterEnterEnter;Enter

给a1加链接地址:e.hrEnter="EnterEnter;Enter

给a1加target:e.t5="EnterEnter;Enter

e赋值改为image对象:eSpace=SpacenewSpaceim6Enter;Enter

为img增加图片:e.srEnter="EnterEnter;Enter

e赋值改为indexedDB对象:eSpace=SpacewiEnter.iEnterSpace||SpacewiEnter.indexed5Space||SpacewiEnter.indexed3Space||SpacewiEnter.indexed2;Enter

确认e可被浏览器识别:iffEnter(也可以使用if2)ty4eEnter↓

执行indexdb的方法:e.opEnter"testEnter;↓Enter

------以下为删除又添加上外部css引用

定义head变量:varSpaceheadSpace=SpacedoEnter.g8"heEnterEnter[0→;Enter

with里也可以提示:withh(或者wit2)EnterhEnter↓

获取head的最后一个子节点:varSpacelSpace=SpacelecEnter;Enter(with里的head可直接识别子对象)

去掉该子节点:rem6l→;↓Enter(head的lastElementChild就是外部引用的css)

动态生成一个css文件引用:eSpace=SpacedcEnterl5Enter;Enter

添加属性:e.r3="styEnterEnter;Enter

设置type:e.tyEnter="cEnterEnter;Enter

设置href:e.hrEnter=".cEnterEnter;Enter

将e加入head中:hEnter.apEntereEnterEnter;Enter

------演示重构,即重命名变量

用代码块定义一个变量s:varsEnterTabeSpaceisSpace'Ctrl+Enter'

判断e的属性:ife(或if3)Entere.g2"dEnterEnter==nu2↓

为s赋值:s=s+e.ouEnter;'Alt+↓'

为s赋值:s=s+"unknow→;↓Enter

将s打印出来:alEnters

选择s并转到定义:'Shift+←''Ctrl+Alt+D'(按Alt点击鼠标也可以)

重构s的命名为ss:'Ctrl+F2'EnterssEnterEnter(弹出对话框可预览重构结果)

跳转到函数末尾:'Alt+↓''Alt+↓'Enter

添加一个启动事件:adEnter"domloEnter→,funaEnter(此处也可以是fu6)↓

提示自定义函数的jsdoc:finiEnter1

------css部分

跳转到CSS:'Alt+↓'

给body加样式:boEnter{Enter

emmet方式增加textalign:tcTabEnter

模糊匹配增加user-select:users45

写下一个样式:↓Enter

为input增加样式:inEnter[tyEnter=Enter→{Enter

使用代码块设置宽度:w990↓Enter

为ul加样式:ul{dnEnter'Ctrl+Enter'

ID也可以提示:#2{Enter

提示字体列表:ffEnterEnterEnter

回车自动补行尾分号:Enter

平板电脑打字怎么样加行号(HBuilder快捷键)

增加background-image:biEnterhbEnter

大功告成,保存并运行起来看看:'Ctrl+s''Ctrl+r'

如果你屏幕够宽,也可以点击右上角视图切换,换到边改边看视图Ctrl+P,左边保存右边自动刷新

#后记:

日后若需查阅所有代码块,点击菜单视图-显示视图-其他-HBuilder-代码块。

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

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

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

##快捷键语法:

很多软件有几百个快捷键但没人记的住。为了解决这个问题,HBuilder引入了快捷键语法。

HBuilder的快捷键是有规律的,虽然与其他软件不同。但记忆几条快捷键语法,就能记住大多数快捷键。

1.Alt是跳转,Shift是转义,Ctrl是操作。

比如Alt+括号、引号,即转到对应的符号。

Shift+回车是
,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激活vari=0;

而css中,dn激活display:none;

2.整段HTML一般使用tag的名称。

比如script、style,通常,敲最多4个字母即可匹配到需要的代码块,不需要完整录入。

如sc回车、st回车,即可完成script、style标签的输入。

3.同一个tag,有多个代码块输出,则在最后加后缀。

比如meta输出

但metau则输出,metag同理。

4.如果原始语法超过4个字符,针对常用语法,则第一个单词的激活符使用缩写。

比如inputbutton,缩写为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/

相关新闻

返回顶部