HBuilder 使用教程(入門篇)

HBuilder是DCloud(數(shù)字天堂)推出的一款支持HTML5的Web開發(fā)IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫,它基于Eclipse,所以順其自然地兼容了Eclipse的插件???,是HBuilder的最大優(yōu)勢,通過完整的語法提示和代碼輸入法、代碼塊等,大幅提升HTML、js、css的開發(fā)效率。
如何安裝 HBuilder?HBuilder下載地址:在HBuilder官網(wǎng)http://www.dcloud.io/點擊免費下載,下載最新版的HBuilder。
HBuilder目前有兩個版本,一個是windows版,一個是mac版。下載的時候根據(jù)自己的電腦選擇適合自己的版本。
使用HBuilder新建項目依次點擊文件→新建→選擇Web項目(按下Ctrl+N,W可以觸發(fā)快速新建(MacOS請使用Command+N,然后左鍵點擊Web項目))
如上圖,請在A處填寫新建項目的名稱,B處填寫(或選擇)項目保存路徑(更改此路徑HBuilder會記錄,下次默認(rèn)使用更改后的路徑),C處可選擇使用的模板(可點擊自定義模板,參照打開目錄中的readme.txt自定義模板)
使用HBuilder創(chuàng)建HTML頁面在項目資源管理器中選擇剛才新建的項目,依次點擊文件→新建→選擇HTML文件(按下Ctrl+N,W可以觸發(fā)快速新建(MacOS請使用Command+N,然后左鍵點擊HTML文件)),并選擇空白文件模板,如下圖
win系統(tǒng)按下Ctrl+P(MacOS為Command+P)進(jìn)入邊改邊看模式,在此模式下,如果當(dāng)前打開的是HTML文件,每次保存均會自動刷新以顯示當(dāng)前頁面效果(若為JS、CSS文件,如與當(dāng)前瀏覽器視圖打開的頁面有引用關(guān)系,也會刷新)
HBuilder代碼塊大量減少重復(fù)代碼工作量在打開的getstart.html中輸入H,如下圖
然后按下8,自動生成HTML的基本代碼如下圖
代碼塊是常用的代碼組合,比如在js中輸入$,回車,則可以自動輸入document.getElementById(id)。
查看、編輯代碼塊可以在工具-自定義代碼塊中,選擇相應(yīng)的代碼塊進(jìn)行查看和編輯。也可以在激活代碼塊的代碼助手中,點擊詳細(xì)信息右下角的修改圖標(biāo)進(jìn)行修改和查看。
代碼塊激活字符原則1:連續(xù)單詞的首字母。比如:dg激活document.getElementById("");vari激活var i=0;dn激活display: none;
代碼塊激活字符原則2:整段HTML一般使用tag的名稱。比如script、style,通常,敲最多4個字母即可匹配到需要的代碼塊,不需要完整錄入,如sc回車、st回車,即可完成script、style標(biāo)簽的輸入。
代碼塊激活字符原則3:同一個tag,有多個代碼塊輸出,則在最后加后綴。比如meta輸出 但metau則輸出 ,metag同理。
代碼塊激活字符原則4:如果原始語法超過4個字符,針對常用語法,則第一個單詞的激活符使用縮寫。比如input button,縮寫為inbutton,同理intext是輸入框。
代碼塊激活字符原則5:js的關(guān)鍵字代碼塊,是在關(guān)鍵字最后加一個重復(fù)字母。比如if直接敲會提示if關(guān)鍵字,但iff回車,則出現(xiàn)if代碼塊。類似的有forr、withh等。由于funtion字母較長,為加快輸入速度,取fun縮寫,比如funn,輸出function代碼塊,而funa和func,分別輸出匿名函數(shù)和閉包。
靈活的快捷鍵使得編程過程手不離鍵盤效果如下圖
新建html基本模板后,當(dāng)前光標(biāo)處于title標(biāo)簽內(nèi),此時我們給HTML設(shè)置title:hellohbuilder,完成后使用Ctrl+回車在當(dāng)前的下一行插入空行,并將光標(biāo)移動到下一行
我們在此處使用sc代碼塊生成一個script塊來編寫js代碼(輸入sc,回車)如下圖
上圖中的綠色豎線,是代碼塊中指定的下一個編輯位置,敲擊回車光標(biāo)會直接跳轉(zhuǎn)至豎線位置
此時按向下、向下,Ctrl+回車,輸入style回車,生成css代碼區(qū)域
定義一個Css類classA:輸入. c l a s s A { 回車,f o n t 回車 回車 回車
然后按alt+下,alt+下跳轉(zhuǎn)至下一個編輯區(qū)域
依次輸入< d i v 也可輸入<dv回車、<iv回車,語法助手可以通過模糊匹配獲知想要生成的標(biāo)簽)如下圖
如上圖所示,代碼助手左側(cè)包含數(shù)字,可以使用這些數(shù)字選擇對應(yīng)的條目,右側(cè)包含瀏覽器兼容性數(shù)據(jù)及示例
輸入i 回車 d 1,右箭頭,空格,c 回車 回車
鼠標(biāo)在div標(biāo)簽的class屬性classA上懸浮,按下Alt和左鍵,點擊后可跳轉(zhuǎn)至classA定義處
Ctrl+回車
div也可以通過代碼塊生成如輸入divc回車回車回車,輸入helloworld如下圖
向下,回車
使用CSS選擇器語法來快速開發(fā)HTML和CSS(支持Emmet)輸入div#page>div.logo+ul#navigation>li*2>a,按下tab生成代碼如下圖
HBuilder集成了Emmet功能,可以通過CSS選擇器語法來快速開發(fā)HTML和CSS,如想深入了解Emmet請移步http://www.emmet.io/
強(qiáng)大的JS解析引擎大大加快JS開發(fā)的速度JS中提示HTML、CSSJS提示html的IDJS通過ID、tagname、css類名不但可以獲取HTML元素,還可以精確分析出其元素類型,準(zhǔn)確提示其屬性,如上圖可以提示出list[0].type
JS中提示JSON按下Alt,左鍵點擊引用的方法名、ID、CSS類、文件(鏈接、圖片),均可跳轉(zhuǎn)到引用的地方,跨文件的引用也可以哦
跳轉(zhuǎn)到JS方法定義處 如下圖跳轉(zhuǎn)到CSS類定義處 如下圖
跳轉(zhuǎn)到ID定義處 如下圖
跳轉(zhuǎn)到文件 如下圖
跳轉(zhuǎn)助手、選擇助手、轉(zhuǎn)義助手、快捷鍵助手,讓你手不離鍵盤。
HTML5+支持、手機(jī)真機(jī)連調(diào)、云編譯,方便開發(fā)跨手機(jī)平臺的APP。
更多精彩功能:重構(gòu) | 大綱 | 任務(wù) | 版本歷史 | 內(nèi)置webserver | 實時升級 | 安全工程管理 | 包圍 | 掩碼轉(zhuǎn)換 | 智能糾錯 | 折疊代碼 | 轉(zhuǎn)到定義 | 格式化代碼 | URL編解碼 | 進(jìn)制轉(zhuǎn)換 | 自動閉合。
還不滿足?下載插件增強(qiáng)更多功能,高手更可開發(fā)插件,并共享插件造福所有開發(fā)者。
相關(guān)文章
WebStorm如何調(diào)試Vue項目? webstorm配置vue開發(fā)環(huán)境指南
WebStorm 支持多種調(diào)試工具,包括瀏覽器的開發(fā)者工具,但本文主要講解的是使用 WebStorm 自帶的調(diào)試功能2025-04-15VSCode和webstorm怎么設(shè)置綠色護(hù)眼背景? 綠豆沙背景色的設(shè)置方法
護(hù)眼色一定程度能保護(hù)眼睛,緩解疲勞,VSCode和webstorm這兩款常用的軟件怎么設(shè)置護(hù)眼色呢?詳細(xì)請看下文介紹2025-04-15- WebStorm本身已經(jīng)足夠強(qiáng)大,但一些優(yōu)秀的插件能錦上添花,顯著提升開發(fā)效率,詳細(xì)請看下文介紹2025-04-15
如何安裝配置WebStorm? WebStorm安裝與使用全方位指南
WebStorm軟件在前端和后端開發(fā)領(lǐng)域都備受青睞,很多朋友不知道該怎么下載安裝,下面我們就來看看詳細(xì)的安裝配置教程2025-04-15Webstorm怎么配置? Webstorm入門之軟件配置教程
WebStorm是一款功能強(qiáng)大的集成開發(fā)環(huán)境(IDE),支持各種前端開發(fā)技術(shù),今天我們就來看看Webstorm的配置教程2025-04-15Webstorm怎么設(shè)置字體大小/背景顏色/背景圖片?
WebStorm 允許您自定義界面顏色,以創(chuàng)建更個性化和美觀的工作空間,今天我們就來看看Webstorm改變字體大小、背景顏色、設(shè)置背景圖片的方法2025-04-15- VScode上安裝PlatformIO插件能成功安裝,嘗試卸載VScode并刪除插件,這些錯誤仍然存在,下面我們就來看看這個問題的解決辦法2025-04-03
提升代碼搜索效率! VSCode里DeepSeek插件安裝與配置指南
今天我們將向大家介紹如何在Visual Studio Code中安裝并配置 DeepSeek 插件,幫助你更高效地進(jìn)行代碼搜索2025-04-07提升你的編程效率! VSCode的初級使用教程超詳細(xì)版
VSCode是一款免費且開源的代碼編輯器,因其強(qiáng)大的功能和良好的用戶體驗而廣受歡迎,本文將詳細(xì)介紹 VSCode 的基本使用方法,并通過插圖幫助你更好地理解2025-04-03- 今天我們來聊聊如何安裝和配置VS Code,讓它成為你編程路上的得力助手,這個過程其實很簡單,只要跟著我的步驟走,你絕對能搞定2025-04-03