本教程針對HBuilder5.0.0，製作日期2014-12-31（從HBuilder工具上獲得）

/*注：本教程針對HBuilder5.0.0，製作日期2014-12-31*/
建立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，分別輸出匿名函式和閉包。