写几十行代码,来一场无鼠标编程之旅,看看who is e———(HTML5:HBuilder5.0.0)

*注:本教程针对HBuilder5.0.0*
创建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+空格是&nbsp;。
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,分别输出匿名函数和闭包。

************************************************不算完美的分隔符

以上的指令和代码如有误,请大家多多交流;小编真心的期望H5技术可以快速的成长。

时间: 2024-09-29 09:28:56

写几十行代码,来一场无鼠标编程之旅,看看who is e———(HTML5:HBuilder5.0.0)的相关文章

十行代码获取抖音无水印视频地址

Videoparse(https://www.videoparse.cn) 提供视频去水印解析接口,下面代码中的appId和appSecret可以在开发者后台获得. PHP代码实例如下: //开发者后台生成的appid $appId = ''; //开发者后台生成的appsecret $appSecret = ''; //需要解析的url $url = ''; $param = [ 'appid' => $appId, 'appsecret' => $appSecret, 'url' =>

分享《父与子的编程之旅python》第2版中英文PDF代码+《趣学Python编程》中英文PDF代码

<父与子的编程之旅python>作者是一对父子,他们以Python语言为例,详尽细致地介绍了Python如何安装.字符串和操作符等程序设计的基本概念,介绍了条件语句.函数.模块等进阶内容,最后讲解了用Python实现游戏编程.书中的语言生动活泼,叙述简单明了. 为了让学习者觉得编程有趣,编排了很多卡通人物及场景对话,让学习者在轻松愉快之中跨入计算机编程的大门.第 2 版增加了一些说明,解释 Python 2 和 Python 3 的区别,增加了一节关于 Python 字典的内容. <趣学

写出优美代码的方式,两个习惯:一步到位VS迭代优化

最近把手头这个安卓APP的所有事务性方法都写完了,有了以下体会,新手体会,老鸟轻拍 想写成优美代码的人一般都会有这样的想法: 一定要在写每一句代码,写每一个方法,构造每一个类的时候,都要记得优化:解耦以复用,拆分方法以复用,使用循环减少冗余,限制循环次数减少无效操作,等等.. 这个想法一定没有错,但很多时候往往会是这样的情况: 当功能一复杂,比如你已经分解了几个方法,比如你已经使用了几层循环(有点过分...),比如在多线程中 你经常无法一步到位地完成那么多优化 这往往造成你写一句代码会思考很久

专心10年,写ASP.NET代码开始,从0到拥有5系

工作到现在,几乎就没离开过这里,写这篇文章也是给自己这10年做个总结,也希望能给选择了程序员这个职业的朋友,带来一些激励与感悟,写这文章又不想影响到自己的工作与生活,所以专门注册了一个马甲帐号请谅解,我也是园子的常客,有写过很多博文. 起点高低不会左右你的人生在这个职业里.我的同事与朋友里,好像我的起点还真是挺低的,高中辍学,妈妈看了我这样白上了10年学,到工地打工浪费了,拿出了家里仅有的5000元报了一个职业学校,学了一年的计算机技术,PHOTOSHOP,网页制作三剑客,还有后来ASP语言.在

redis的过期策略都有哪些?内存淘汰机制都有哪些?手写一下LRU代码实现?

redis的过期策略都有哪些? 设置过期时间: set key 的时候,使用expire time,就是过期时间.指定这个key比如说只能存活一个小时?10分钟?指定缓存到期就会失效. redis的过期策略的话 定期删除加惰性删除 定期删除:redis默认是每隔100ms就会随机抽取一些设置了过期时间的key,检查其是否过期,如果过期就删除, 假设redis里放了10万个key,都设置了过期时间,你每隔几百毫秒,就检查10万个key,那redis基本上就死了,cpu负载会很高的,消耗在你的检查过

4.redis 的过期策略都有哪些?内存淘汰机制都有哪些?手写一下 LRU 代码实现?

作者:中华石杉 面试题 redis 的过期策略都有哪些?内存淘汰机制都有哪些?手写一下 LRU 代码实现? 面试官心理分析 如果你连这个问题都不知道,上来就懵了,回答不出来,那线上你写代码的时候,想当然的认为写进 redis 的数据就一定会存在,后面导致系统各种 bug,谁来负责? 常见的有两个问题: 往 redis 写入的数据怎么没了? 可能有同学会遇到,在生产环境的 redis 经常会丢掉一些数据,写进去了,过一会儿可能就没了.我的天,同学,你问这个问题就说明 redis 你就没用对啊.re

mp4网页播放代码,有声音无图像的解决办法~

mp4网页播放代码,有声音无图像的解决办法~ 关于网页播放mp4格式的视频,找了一些插件,这里推荐一下video.js 官方网址:http://www.videojs.com/ github :https://github.com/videojs/video.js/ demo:http://www.videojs.com/downloads/video-js-4.12.5.zip 使用方法: ①引入文件:指派flash播放的swf文件 <link href="//example.com/p

jQuery表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. 改变默认提示方式. 三.jQuery表单验证插件----通过name属性来关联字段来验证,将校验规则写到 js 代码中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

[Eclipse]已经写好的代码怎样切换为unix下的换行符?

切换换行符的显示格式, 一般的设置是这样的: 但是这样只能对新文件起作用,原来已经写好的还是那熊样.(怎么办呢,得吃后悔药啊,谁让你开始没准备好呢?!T_T) 下面就是后悔药: 这样就OK了. 附:有图有真相 转换前: 转换后: [Eclipse]已经写好的代码怎样切换为unix下的换行符?,布布扣,bubuko.com