軟件特色

hbuilder官方免費(fèi)版是一款適用于前端開發(fā)的Web編程軟件，軟件專門為編程工作人員所使用，通過這款軟件你可以很方便的管理自己的前端文件和編輯內(nèi)容，支持語句高亮和標(biāo)注顯示等功能，軟件還針對(duì)vue進(jìn)行了優(yōu)化升級(jí)，用戶只需要打開vue框架文件，軟件就會(huì)自動(dòng)加載vue語法庫，大大提高了前端開發(fā)效率。

hbuilder電腦版同時(shí)支持JS、jquery、vue語句的調(diào)用，你能夠在不同內(nèi)核瀏覽器來進(jìn)行相關(guān)代碼的測(cè)試，同時(shí)軟件擁有強(qiáng)大的代碼助手幫你快速完成開發(fā)，只需關(guān)鍵詞就為你補(bǔ)全整個(gè)代碼規(guī)范語句，非常方便，是一款值得信賴的前端開發(fā)軟件。

hbuilder官方免費(fèi)版軟件特色

【輕巧、極速】

10M的綠色發(fā)行包。

C++架構(gòu)，啟動(dòng)速度、大文檔打開速度、編碼提示，都極速響應(yīng)。

【強(qiáng)大的語法提示】

一流的ast語法分析能力

語法提示精準(zhǔn)、全面、細(xì)致，轉(zhuǎn)到定義、重構(gòu)完善

【專為vue打造】

提供比其他工具更優(yōu)秀的vue支持

大幅提升你的vue開發(fā)效率

【清爽護(hù)眼】

界面清爽簡(jiǎn)潔，綠柔主題經(jīng)過科學(xué)的腦疲勞測(cè)試，最適合人眼長(zhǎng)期觀看的主題界面。

保護(hù)手腕，減緩鼠標(biāo)手。

【高效極客操作】

HBuilderX對(duì)字處理提供了更崇高的支持。

更強(qiáng)大的多光標(biāo)、智能雙擊、選區(qū)管理...

讓文字處理的效率大幅提升。

【markdown優(yōu)先】

HX是唯一一個(gè)新建文件默認(rèn)類型是markdown的編輯器，也是對(duì)md支持最強(qiáng)的編輯器，你甚至可以直接粘貼表格、圖片進(jìn)來。

hbuilder官方免費(fèi)版怎么實(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è)試試：

hbuilder官方免費(fèi)版使用教程

使用HBuilder新建項(xiàng)目

依次點(diǎn)擊文件→新建→選擇Web項(xiàng)目(按下Ctrl+N,W可以觸發(fā)快速新建(MacOS請(qǐng)使用Command+N,然后左鍵點(diǎn)擊Web項(xiàng)目))

如上圖，請(qǐng)?jiān)贏處填寫新建項(xiàng)目的名稱，B處填寫(或選擇)項(xiàng)目保存路徑(更改此路徑HBuilder會(huì)記錄，下次默認(rèn)使用更改后的路徑)，C處可選擇使用的模板(可點(diǎn)擊自定義模板,參照打開目錄中的readme.txt自定義模板)

使用HBuilder創(chuàng)建HTML頁面

在項(xiàng)目資源管理器中選擇剛才新建的項(xiàng)目,依次點(diǎn)擊文件→新建→選擇HTML文件(按下Ctrl+N,W可以觸發(fā)快速新建(MacOS請(qǐng)使用Command+N,然后左鍵點(diǎn)擊HTML文件)),并選擇空白文件模板,如下圖

使用HBuilder邊改邊看試試查看編程效果

win系統(tǒng)按下Ctrl+P(MacOS為Command+P)進(jìn)入邊改邊看模式,在此模式下,如果當(dāng)前打開的是HTML文件，每次保存均會(huì)自動(dòng)刷新以顯示當(dāng)前頁面效果(若為JS、CSS文件，如與當(dāng)前瀏覽器視圖打開的頁面有引用關(guān)系，也會(huì)刷新)

HBuilder代碼塊大量減少重復(fù)代碼工作量

在打開的getstart.html中輸入H,如下圖

然后按下8,自動(dòng)生成HTML的基本代碼如下圖

什么是代碼塊?

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

查看、編輯代碼塊可以在工具-自定義代碼塊中，選擇相應(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è)字符，針對(duì)常用語法，則第一個(gè)單詞的激活符使用縮寫。比如input button，縮寫為inbutton，同理intext是輸入框。

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

常見問題

問：hbuilder中什么叫滾動(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ò)誤提示。

問：hbuilder中怎么實(shí)現(xiàn)代碼追蹤?

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

問：hbuilder中輸入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)上教程很多。

問：hbuilder中為什么有時(shí)候我輸入代碼塊的名稱，卻沒有出現(xiàn)想要的代碼塊?

答：代碼塊的顯示名稱和激活字符是不同的，查看激活字符請(qǐng)?jiān)诩せ畲�碼助手后選擇代碼塊，看右邊信息欄的詳情