hbuilder是DCloud推出的一款支持HTML5的Web開發(fā)IDE�？�，是HBuilder的最大優(yōu)勢，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css的開發(fā)效率。同時(shí)，它還包括最全面的語法庫和瀏覽器兼容性數(shù)據(jù)。

hbuilder介紹

HBuilder是一款專業(yè)Web開發(fā)代碼編輯工具，相比其他的代碼編輯工具，HBuilder優(yōu)點(diǎn)多多，可以讓開發(fā)者飛一般的編碼速度，代碼輸入法、代碼塊、模糊匹配、內(nèi)置emme、智能補(bǔ)齊跳轉(zhuǎn)助手、選擇助手，不用鼠標(biāo)，手不離鍵盤；手機(jī)APP開發(fā)，用HBuilder直接創(chuàng)建移動App，連上數(shù)據(jù)線真機(jī)聯(lián)調(diào)，打包為ios或Android原生安裝包。震撼的語法提示，HTML5語法、HTML5+語法、三大瀏覽器擴(kuò)展語法，盡收HBuilder中。自動調(diào)整配色，保護(hù)視力的界面。

HBuilder編輯器特點(diǎn)

1、代碼助手，飛一樣的編碼 

代碼輸入法：一個(gè)數(shù)字，少敲10下鍵盤。         

按下候選列表前的數(shù)字，自動把該候選項(xiàng)輸入到編輯區(qū)。

2、代碼塊：

一個(gè)代碼塊，少敲20下鍵盤。

代碼塊是常用的代碼組合，比如在js中輸入$，回車，則可以自動輸入document.getElementById(id)。

再舉例，在HTML中輸入i，回車，可以得到input button標(biāo)簽。

查看、編輯代碼塊可以在工具-自定義代碼塊中，選擇相應(yīng)的代碼塊進(jìn)行查看和編輯。也可以在激活代碼塊的代碼助手中，點(diǎn)擊詳細(xì)信息右下角的修改圖標(biāo)進(jìn)行修改和查看。

代碼塊激活字符原則1:連續(xù)單詞的首字母。比如：dg激活document.getElementById("");vari激活var i=0;dn激活display: none;

代碼塊激活字符原則2:整段HTML一般使用tag的名稱。比如script、style，通常，敲最多4個(gè)字母即可匹配到需要的代碼塊，不需要完整錄入，如sc回車、st回車，即可完成script、style標(biāo)簽的輸入。

代碼塊激活字符原則3:同一個(gè)tag，有多個(gè)代碼塊輸出，則在最后加后綴。比如meta輸出<meta name="" content=""/>但metau則輸出<meta charset="UTF-8"/>，metag同理。

代碼塊激活字符原則4:如果原始語法超過4個(gè)字符，針對常用語法，則第一個(gè)單詞的激活符使用縮寫。比如input button，縮寫為inbutton，同理intext是輸入框。

代碼塊激活字符原則5:js的關(guān)鍵字代碼塊，是在關(guān)鍵字最后加一個(gè)重復(fù)字母。比如if直接敲會提示if關(guān)鍵字，但iff回車，則出現(xiàn)if代碼塊。類似的有forr、withh等。由于funtion字母較長，為加快輸入速度，取fun縮寫，比如funn，輸出function代碼塊，而funa和func，分別輸出匿名函數(shù)和閉包。

3、全時(shí)提示       

HBuilder不僅僅提示全面的語法，非語法的各種候選輸入也都能提示。包括圖片、鏈接、顏色、字體、腳本、樣式、URI、ID、class、自定義JS對象、方法。

舉例，在img src=后激活代碼助手，可以看到本工程所有圖片列表；輸入<sc可以看到本工程所有js列表；在js的document.getElementById(id)中提示本工程已經(jīng)定義的ID列表；在css的color:后可以列出本工程所有使用過的顏色。 

Emmet支持HBuilder內(nèi)嵌了emmet（即zencoding）插件。輸入div#id1，按下tab，可以自動生成 <div id="id1"></div>。Emmet的詳細(xì)語法請查閱其官方網(wǎng)站emmet.io。 Jquery支持       

HBuilder內(nèi)嵌了jquery插件，可以提示jquery語法。如果要提示jquery的語法，需要在工具菜單/項(xiàng)目的右鍵菜單中，點(diǎn)擊引入框架語法提示的子項(xiàng)，為該項(xiàng)目選擇框架語法提示。

提示效果如下： 邊看邊改想一邊寫代碼，一邊看效果？按下Ctrl+P進(jìn)入邊看邊改視圖。左邊保存右邊立即刷新。 

4、綠柔保護(hù)你的眼睛         

綠柔主題的特點(diǎn)是柔和、低對比度、強(qiáng)光可見、綠色感加強(qiáng)。對著這樣的界面寫一天代碼，感受要比對著太亮或太暗的界面舒服很多。

5、最全語法庫和瀏覽器兼容數(shù)據(jù)        

HBuilder的語法庫包括W3C的HTML、JAVASCRIPT、CSS的正式標(biāo)準(zhǔn)和推薦標(biāo)準(zhǔn)...，ECMAScript中瀏覽器支持的部分，還有各大瀏覽器的擴(kuò)展語法，webkit、moz、ms，均實(shí)時(shí)更新到各瀏覽器的最新版本。

信息欄中的瀏覽器品牌圖標(biāo)，全亮表示無障礙支持該語法，全灰表示不支持，而半亮則表示該瀏覽器部分支持該語法。半亮?xí)r會下圖標(biāo)下方顯示出來詳細(xì)的支持情況，比如video標(biāo)簽，從IE9才開始支持。

HBuilder使用方法

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

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

Q:輸入small不提示，語法庫是不是不全？A:代碼塊是否提示，取決于是否設(shè)置了這個(gè)代碼塊，代碼塊是可自定義的。默認(rèn)沒有預(yù)置small代碼塊，你也可以在代碼塊彈出界面點(diǎn)右下角的編輯圖標(biāo)，進(jìn)行代碼塊的補(bǔ)充修改。另外可以使用emmet（ZenCoding）語法，這個(gè)沒有提示，但敲完small，按tab，就會自動生成標(biāo)簽。emmet是一種前端公開技術(shù)，網(wǎng)上教程很多。
Q:為什么有時(shí)候我輸入代碼塊的名稱，卻沒有出現(xiàn)想要的代碼塊？A:代碼塊的顯示名稱和激活字符是不同的，查看激活字符請?jiān)诩せ畲�碼助手后選擇代碼塊，看右邊信息欄的詳情
Q:編輯器怎么實(shí)現(xiàn)分欄？A:HBuilder編輯器分欄功能可以實(shí)現(xiàn)左右分欄和上下分欄以及組合分欄。
1、左右分欄實(shí)現(xiàn)：鼠標(biāo)點(diǎn)著編輯器選項(xiàng)卡往最右邊拖動即可實(shí)現(xiàn)左右分欄

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

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

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

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

更新日志

修復(fù)問題
解決某些情況下Android手機(jī)真機(jī)運(yùn)行無法連接到手機(jī)的問題

常見問題

1、怎么才能快速掌握HBuilder開發(fā)技巧？

軟件自帶HelloHBuilder項(xiàng)目，該項(xiàng)目為教程項(xiàng)目（如果不小心刪除了不要擔(dān)心，可以在新建WEB項(xiàng)目時(shí)，使用HelloHBuilder模板新建出來），按照項(xiàng)目中的lesson1.txt中的快捷鍵敲一遍即可快速掌握HBuilder快速開發(fā)技巧。 

2、什么是HTML5+？

HTML5+規(guī)范是基于HTML5的擴(kuò)展規(guī)范，用于彌補(bǔ)HTML5和原生應(yīng)用功能之間的差距。HTML5+規(guī)范是一個(gè)開放的規(guī)范，在W3C中國的指導(dǎo)下，由HTML5中國產(chǎn)業(yè)聯(lián)盟運(yùn)作（www.html5plus.org），所有規(guī)范都是面向開發(fā)者的，開發(fā)者提需求、開發(fā)者評審實(shí)現(xiàn)方案、開發(fā)者投票選定規(guī)范。

3、輸入small不提示，語法庫是不是不全？

代碼塊是否提示，取決于是否設(shè)置了這個(gè)代碼塊，代碼塊是可自定義的。

默認(rèn)沒有預(yù)置small代碼塊，你也可以在代碼塊彈出界面點(diǎn)右下角的編輯圖標(biāo)，進(jìn)行代碼塊的補(bǔ)充修改。

另外可以使用emmet（ZenCoding）語法，這個(gè)沒有提示，但敲完small，按tab，就會自動生成標(biāo)簽。

emmet是一種前端公開技術(shù)，網(wǎng)上教程很多。

4、不建項(xiàng)目單獨(dú)打開文件會提示有部分功能無法使用，具體是哪些功能無法使用？

主要是跨文件的項(xiàng)目管理功能受影響。

HBuilder會為項(xiàng)目建立索引，工程間文件的鏈接引用關(guān)系都在管理中。

這樣在跨文件引用提示、轉(zhuǎn)到定義、重構(gòu)、移動圖片路徑等很多操作中HBuilder都能智能處理。

如果單獨(dú)打開文件，功能就弱了很多，當(dāng)然也比普通文本編輯器多。

舉個(gè)例子，<a class="classA">，在HBuilder里寫class=時(shí)，可以提示工程中各種css，classA如果是外部的css文件定義的， 可以按下ctrl點(diǎn)鼠標(biāo)跳轉(zhuǎn)到那個(gè)css中。

這都是普通文本編輯器做不到的。

如果您習(xí)慣了資源管理器做項(xiàng)目管理、文本編輯器做代碼編輯，那么建議改變下工作習(xí)慣。

用HBuilder做統(tǒng)一的項(xiàng)目管理和文本編輯，你會發(fā)現(xiàn)工作效率更高。