HBuilder是一款非常實(shí)用的編程工具，用戶可以在HBuilder內(nèi)進(jìn)行編程，方便您可以制作出所需的代碼樣式。此外軟件內(nèi)還支持插件服務(wù)，幫助您在使用的時(shí)候可以有效的來導(dǎo)入插件。

【軟件介紹】

HBuilder是數(shù)字天堂推出的一款支持HTML5的Web開發(fā)IDE。HBuilder的編寫用到了Java、C、Web和Ruby，其核心主體是由Java編寫的，基于Eclipse所研發(fā)，順其自然地兼容了Eclipse大量的插件，也是目前受到廣泛開發(fā)者的認(rèn)可和使用，其功能性和操作性都是市面上最出眾之一。

【軟件特色】

1、輕巧
僅10M的綠色發(fā)行包
2、極速
不管是啟動(dòng)速度、大文檔打開速度、編碼提示，都極速響應(yīng)
3、清爽護(hù)眼
界面清爽簡潔，綠柔主題經(jīng)過科學(xué)的腦疲勞測(cè)試，是最適合人眼長期觀看的主題界面
4、無鼠標(biāo)操作
掌握HX的無鼠標(biāo)操作體系，成為高效極客，飛一般編碼
5、markdown優(yōu)先
HX是唯一一個(gè)新建文件默認(rèn)類型是md的編輯器。
除了頂尖的markdown編寫體驗(yàn)、漂亮的著色外，HX的極速啟動(dòng)、多標(biāo)簽、熱退出、各種快捷鍵操作，都給了你充足的理由升級(jí)記事本工具。

【使用教程】

首先從本站進(jìn)行下載，文件下載完后才能之后得到是一個(gè)壓縮包，然后我們進(jìn)行解壓會(huì)得到一個(gè)文件夾，隨便說一句這個(gè)文件夾就是Hbuilder的文件包，Hbuilder不用安裝解壓完成即可使用。



打開解壓后的文件夾，找到一個(gè)叫做“Hbuilder.exe”的可執(zhí)行文件，這個(gè)可執(zhí)行文件就是Hbuilder的啟動(dòng)文件。



雙擊這個(gè)文件就可以打開Hbuilder這個(gè)開發(fā)編輯器了，因?yàn)槲覀兪侵苯咏鈮菏褂玫乃哉移饋頃?huì)很麻煩，你可以將“Hbuilder.exe”這個(gè)執(zhí)行文件發(fā)送到桌面快捷方式，這樣每次使用的時(shí)候直接在桌面就可以打開。



完成第六步之后，我們的桌面會(huì)出現(xiàn)一個(gè)Hbuilder的快捷方式，然后我們雙擊這個(gè)快捷方式，Hbuilder這個(gè)編輯器就打開了。





Hbuilder的使用

Hbuilder打開之后，會(huì)出現(xiàn)一些很人性話的設(shè)置，還有一點(diǎn)就是Hbuilder的編輯器風(fēng)格是黃色系，對(duì)眼睛比較好，不同于其他的編輯器一般是以黑白為主，這里我一般使用標(biāo)準(zhǔn)模式。



視覺設(shè)置完成之后進(jìn)入我們的項(xiàng)目建立階段，點(diǎn)擊“新建WEB項(xiàng)目”，創(chuàng)建項(xiàng)目名稱，設(shè)置項(xiàng)目所在的位置確定即可，完成之后會(huì)在左邊的項(xiàng)目欄管理器中出現(xiàn)。我這里創(chuàng)建的名稱為demo。





打開項(xiàng)目demo的文件夾，我們會(huì)看到里面有首頁index.html，有JS文件夾，有CSS文件夾，還有圖片的文件夾，基本齊全。



到了這一步之后，我們便可以編寫我們的代碼了，在這里我就隨便寫了幾句作為項(xiàng)目的演示。



代碼的運(yùn)行有兩種方式，以下圖為例，點(diǎn)擊對(duì)應(yīng)的瀏覽器之后回跳轉(zhuǎn)到一個(gè)對(duì)應(yīng)的頁面。

【常見問題】

一、什么叫滾動(dòng)條信息點(diǎn)？
當(dāng)代碼中有重要的標(biāo)記出現(xiàn)時(shí)，會(huì)生成滾動(dòng)條信息點(diǎn)，在滾動(dòng)條右側(cè)出現(xiàn)顏色各異的點(diǎn)。點(diǎn)擊這些點(diǎn)或使用跳轉(zhuǎn)到下一個(gè)信息點(diǎn)功能，可以快速到達(dá)這些代碼處。如下標(biāo)記會(huì)生成信息點(diǎn)：書簽、任務(wù)、錯(cuò)誤提示。



二、怎么實(shí)現(xiàn)代碼追蹤？
在編輯代碼時(shí)經(jīng)常會(huì)出現(xiàn)需要跳轉(zhuǎn)到引用文件或者變量定義的地方，HBuilder提供了一個(gè)非常好用的代碼追蹤功能，只需要按住Ctrl+鼠標(biāo)左鍵即可實(shí)現(xiàn)追蹤。

三、輸入small不提示，語法庫是不是不全？
代碼塊是否提示，取決于是否設(shè)置了這個(gè)代碼塊，代碼塊是可自定義的。默認(rèn)沒有預(yù)置small代碼塊，你也可以在代碼塊彈出界面點(diǎn)右下角的編輯圖標(biāo)，進(jìn)行代碼塊的補(bǔ)充修改。另外可以使用emmet（ZenCoding）語法，這個(gè)沒有提示，但敲完small，按tab，就會(huì)自動(dòng)生成標(biāo)簽。emmet是一種前端公開技術(shù)，網(wǎng)上教程很多。

四、為什么有時(shí)候我輸入代碼塊的名稱，卻沒有出現(xiàn)想要的代碼塊？
代碼塊的顯示名稱和激活字符是不同的，查看激活字符請(qǐng)?jiān)诩せ畲a助手后選擇代碼塊，看右邊信息欄的詳情

五、編輯器怎么實(shí)現(xiàn)分欄？
HBuilder編輯器分欄功能可以實(shí)現(xiàn)左右分欄和上下分欄以及組合分欄。
1、左右分欄實(shí)現(xiàn)：鼠標(biāo)點(diǎn)著編輯器選項(xiàng)卡往最右邊拖動(dòng)即可實(shí)現(xiàn)左右分欄。



左右分欄實(shí)現(xiàn)效果：



2、上下分欄實(shí)現(xiàn)：鼠標(biāo)點(diǎn)著編輯器選項(xiàng)卡往最下邊拖動(dòng)即可實(shí)現(xiàn)上下分欄。



上下分欄實(shí)現(xiàn)效果：



3、組合分欄實(shí)現(xiàn)：組合分欄就是即有的文件向下拖動(dòng)，有的文件向右拖動(dòng)，下面給出一個(gè)效果圖，感興趣的話您可以拖個(gè)試試。

【更新日志】

修復(fù)搜索到折疊區(qū)域時(shí)，折疊不展開的bug
修復(fù)了代碼助手在窗體右邊緣時(shí)被遮擋、自閉合標(biāo)簽回車縮進(jìn)錯(cuò)誤等問題
【App插件】快應(yīng)用真機(jī)運(yùn)行基座升級(jí)到1.0.13
【App插件】更新小程序to快應(yīng)用/UniApp轉(zhuǎn)換器
【重要】小程序to快應(yīng)用/UniApp轉(zhuǎn)換器開源了！