hbuilder編輯器是由“DCloud”最新研發(fā)的一款支持HTML5的WEB集成開(kāi)發(fā)程序。從發(fā)布到現(xiàn)在一直以來(lái)都以“快”這個(gè)稱號(hào)運(yùn)作下去，擁有最全面的語(yǔ)法庫(kù)和瀏覽器兼容性數(shù)據(jù)，利用完整的語(yǔ)法提示和代碼輸入、代碼塊等功能，輕松提升對(duì)HTML、JS、CSS的開(kāi)發(fā)效率。

hbuilder在軟件中預(yù)置了一個(gè)hello HBuilder的工程，用戶敲幾十行代碼后會(huì)發(fā)現(xiàn)，HBuilder比其他開(kāi)發(fā)工具至少快5倍。如果你用來(lái)做HTML5的開(kāi)發(fā)，那么hbuilder編輯器可替代常用的Webstorm、Brackets、Dreamweaver、vs等常用工具。

軟件特色

一、代碼塊：一個(gè)代碼塊，少敲20下鍵盤(pán)

(1)圖標(biāo)為codeblock的候選項(xiàng)為代碼塊。

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

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

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

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

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

(7)代碼塊激活字符原則3:同一個(gè)tag，有多個(gè)代碼塊輸出，則在最后加后綴。比如meta輸出但metau則輸出，metag同理。

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

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

二、全時(shí)提示

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

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

三、Emmet支持

HBuilder內(nèi)嵌了emmet（即zencoding）插件。輸入div#id1，按下tab，可以自動(dòng)生成