一，簡介HBuilder
1.1，什麼是Hbuilder？
HBuilder是DCloud（數字天堂）推出的一款支援HTML5的Web開發IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。
它基于Eclipse，是以順其自然地相容了Eclipse的插件
從Frontpage、Dreamweaver、UE，到Sublime Text和JetBrains的WebStorm，Web程式設計的IDE已經更換了幾批。但是HBuilder可以生存就是因為有自身的優勢。
1.2，Hbuilder的優勢是什麼？
快，是HBuilder的最大優勢，通過完整的文法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css的開發效率。
在HBuilder裡預置了一個hello HBuilder的工程，使用者敲這幾十行代碼後會發現，
HBuilder比其他開發工具至少快5倍。“最全的浏覽器相容性資料、開發手機App等很
多特點也都是HBuilder強于競品的地方”，王安表示。
以“快”為核心的HBuilder，引入了“快捷鍵文法”的概念，巧妙地解決了困擾許多
開發者的快捷鍵過多而記不住的問題。開發者隻需要記住幾條文法，就可以快速實作
跳轉、轉義和其他操作。比如alt+[是跳轉到括号，alt+’是跳轉到引号，alt+字母是
跳轉菜單項，而alt+左則是跳轉到上一次光标位置。而Ctrl則是各種操作，比如ctrl+d
就是删除一行。shift則是轉義，比如shift+回車是<br/>，shift+空格是 。
另外，HBuilder的生态系統可能是最豐富的Web IDE生态系統，因為它同時相容
Eclipse插件和Ruby Bundle。SVN、git、ftp、PHP、less等各種技術都有Eclipse插件。
HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫，
它基于Eclipse，是以順其自然地相容了Eclipse的插件。但因為Java效率太低，是以用C
寫了啟動器。HBuilder柔和的綠色界面設計需要動态調節螢幕亮度，它還支援手機資料線
真機聯調，而這些都是用C寫的。
HBuilder很多界面，比如使用者資訊界面都是使用Web技術來做的，既漂亮，開發起來
又快。最後，代碼塊、快捷配置指令腳本，都是用Ruby開發的。
“這4種技術各有各的用途，我們團隊内部也靈活運用，HBuilder的架構支援不同的技
術互相融合通信。至于我們的技術選型原則，首先滿足使用者需求，然後我們内部用什麼技
術能更快完成就會選什麼技術”，王安解釋道。
1.3，目前Web開發領域格局
目前主流的前端開發工具有Sublime為代表的文本編輯器，以及Webstorm、Brackets、Dreamweaver、vs等IDE。但說道為HTML5設計或做了特殊優化的，隻有HBuilder、Webstorm和Brackets。
文本編輯器以輕快友善的特點獲得了很多使用者的喜愛，但商業項目的編寫缺少IDE還是會很低效。IDE相比文本編輯器最大的特點是擁有文法引擎，能夠識别語言。
編碼比其他工具快5倍夠不夠？對極客而言，追求快，沒有止境！
代碼輸入法：按下數字快速選擇候選項
可程式設計代碼塊：一個代碼塊，少敲50個按鍵
内置emmet：tab一下生成一串代碼
無死角提示：除了文法，還能提示ID、Class、圖檔、連結、字型…
跳轉助手、選擇助手，不用滑鼠，手不離鍵盤
多種語言支援：php、jsp、ruby、python、nodejs等web語言，less、coffee等編譯型語言均支援
邊改邊看：一邊寫代碼，一邊看效果
強悍的轉到定義和一鍵搜尋
這裡還有最全的文法庫、最全的文法浏覽器相容庫
二，Hbuilder IDE的下載下傳與安裝
HBuilder下載下傳位址：在HBuilder官網http://www.dcloud.io/點選免費下載下傳，下載下傳最新版的HBuilder。
HBuilder目前有兩個版本，一個是windows版，一個是mac版。下載下傳的時候根據自己的電腦選擇适合自己的版本。
2.1，查找Hbuilder官方網站
首先去這款前端開發編輯器的官方網站，之後進到官方網站中，如下界面
2.2，了解Hbuilder
進入官網之後，找到“Hbuilder”的欄目，建議仔細看完這一頁面的内容以便于履歷一個對Hbuilder的初步了解，看完後找到下載下傳按鈕進行下載下傳。
2.3，下載下傳
點選下載下傳之後會有一個彈窗，如果是Windows系統則直接點選紅色按鈕進行下載下傳即可，如果是使用的蘋果本，那麼點選左下的“MacOSX版本”，點選完成之後便開始進行下載下傳然後進入等待即可。
2.4，解壓下載下傳的安裝包
檔案下載下傳完後才能之後得到是一個壓縮包，然後我們進行解壓會得到一個檔案夾，随便說一句這個檔案夾就是Hbuilder的檔案包，Hbuilder不用安裝解壓完成即可使用。
2.5，找到執行檔案
打開解壓後的檔案夾，找到一個叫做“Hbuilder.exe”的可執行檔案，這個可執行檔案就是Hbuilder的啟動檔案。
2.6，打開Hbuilder
輕按兩下這個檔案就可以打開Hbuilder這個開發編輯器了，因為我們是直接解壓使用的是以找起來會很麻煩，你可以将“Hbuilder.exe”這個執行檔案發送到桌面快捷方式，這樣每次使用的時候直接在桌面就可以打開。
三，Hbuilder IDE的使用
3.1，設定編譯器風格
Hbuilder打開之後，會出現一些很人性話的設定，還有一點就是Hbuilder的編輯器風格是黃色系，對眼睛比較好，不同于其他的編輯器一般是以黑白為主，這裡我一般使用标準模式。
3.2，建立web項目
視覺設定完成之後進入我們的項目建立階段，點選“建立WEB項目”，建立項目名稱，設定項目所在的位置确定即可，完成之後會在左邊的項目欄管理器中出現。我這裡建立的名稱為demo。
依次點選檔案→建立→選擇Web項目(按下Ctrl+N,W可以觸發快速建立(MacOS請使用Command+N,然後左鍵點選Web項目))
3.3，打開檔案夾
打開項目demo的檔案夾，我們會看到裡面有首頁index.html，有JS檔案夾，有CSS檔案夾，還有圖檔的檔案夾，基本齊全。
3.4，編寫代碼
到了這一步之後，我們便可以編寫我們的代碼了
四，HBuilder的用法
4.1，什麼是代碼塊？
代碼塊是常用的代碼組合，比如在js中輸入$，回車，則可以自動輸入document.getElementById(id)。
檢視、編輯代碼塊可以在工具-自定義代碼塊中，選擇相應的代碼塊進行檢視和編輯。也可以在激活代碼塊的代碼助手中，點選詳細資訊右下角的修改圖示進行修改和檢視。
- 代碼塊激活字元原則1:連續單詞的首字母。比如：dg激活document.getElementById("");vari激活var i=0;dn激活display: none;
- 代碼塊激活字元原則2:整段HTML一般使用tag的名稱。比如script、style，通常，敲最多4個字母即可比對到需要的代碼塊，不需要完整錄入，如sc回車、st回車，即可完成script、style标簽的輸入。
- 代碼塊激活字元原則3:同一個tag，有多個代碼塊輸出，則在最後加字尾。比如meta輸出但metau則輸出，metag同理。
- 代碼塊激活字元原則4:如果原始文法超過4個字元，針對常用文法，則第一個單詞的激活符使用縮寫。比如input button，縮寫為inbutton，同理intext是輸入框。
- 代碼塊激活字元原則5:js的關鍵字代碼塊，是在關鍵字最後加一個重複字母。比如if直接敲會提示if關鍵字，但iff回車，則出現if代碼塊。類似的有forr、withh等。由于funtion字母較長，為加快輸入速度，取fun縮寫，比如funn，輸出function代碼塊，而funa和func，分别輸出匿名函數和閉包。
不經一番徹骨寒 怎得梅花撲鼻香