前端開發工具HBuilder使用技巧以及快捷鍵

建立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，分別輸出匿名函數和閉包。