HBuilder是一款深度集成Eelipse的IDE編輯器，但其主要集中在Web前端的開發(fā)，不能進(jìn)行Java等后臺(tái)開發(fā)。HBuilder提供了對(duì)JavaScrijpt、jQuery、HTML5+、MUI等語法的提示功能，同時(shí)包含很多快捷鍵，讓前端開發(fā)更加便捷。

訪問HBuilder官方網(wǎng)站(http://www.dcloud.io),下載最新版的HBuilder,如下圖所示。

在圖上圖中單擊“下載”按鈕，會(huì)出現(xiàn)下載提示框，如下所示。

在圖片中可以看到HBuilder的當(dāng)前版本、歷史版本以及各平臺(tái)的不同版本，讀者在下載時(shí)根據(jù)自己的設(shè)備選擇適合的版本即可。

HBuilder下載完成，解壓到指定的路徑后，雙擊啟動(dòng)文件HBuilder.exe,會(huì)出現(xiàn)一個(gè)啟動(dòng)頁面，完成用戶注冊(cè)并登錄后，便可開始使用HBuilder。HBuilder開發(fā)界面如圖所示。

在上圖中，左側(cè)項(xiàng)目管理器中會(huì)出現(xiàn)一個(gè)名稱為HelloHBuilder的示例項(xiàng)目，右側(cè)會(huì)出現(xiàn)一個(gè)HBuilder入門的窗口，該窗口中顯示的內(nèi)容是HBuilder官方的使用教程，提供了HBuilder的詳細(xì)使用方法。

下面以新建項(xiàng)目、新建文件以及運(yùn)行文件為例簡單講解HBuilder的使用。

首先，在C盤下創(chuàng)建jQuery目錄用于保存項(xiàng)目文件。然后選擇“文件”一“新建”→“Web項(xiàng)目”命令，打開“創(chuàng)建Web項(xiàng)目”對(duì)話框，如下所示。

在上圖中，填寫項(xiàng)目名稱(如chapter01ln,選擇項(xiàng)目的保存位置(如C：\jQuery)，單擊“完成”按鈕創(chuàng)建Web項(xiàng)目。

最后，編寫項(xiàng)目中默認(rèn)的文件index.html,利用HBuilder提供的工具完成文件的運(yùn)行，頁面效果如下。

在上圖中，單擊方框內(nèi)的圖標(biāo)，即可在瀏覽器運(yùn)行此文件，頁面效果如下所示。

HBuilder中有很多快捷鍵，開發(fā)者使用這些快捷鍵，可以更加高效地工作。HBuilder常用快捷鍵如表所示。

HBuilder 常用快捷鍵