创建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