平板电脑打字怎么样加行号(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
增加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/