[TOC]
* * * * *
# Hbuilder的使用技巧

### 下載安裝
下載地址:[Hbuilder](http://www.dcloud.io/)
### 準(zhǔn)備工作
第一步 新建一個(gè)web項(xiàng)目
為什么需要新建項(xiàng)目?
HBuilder會(huì)為項(xiàng)目建立索引,工程間文件的鏈接引用關(guān)系都在管理中。 這樣在跨文件引用提示、轉(zhuǎn)到定義、重構(gòu)、移動(dòng)圖片路徑等很多操作中HBuilder都能智能處理。 如果單獨(dú)打開(kāi)文件,功能就弱了很多,當(dāng)然也比普通文本編輯器多。
在實(shí)際的工作中,通常每個(gè)項(xiàng)目我們都需要建立相應(yīng)的目錄結(jié)構(gòu)。如寫(xiě)一個(gè)新聞網(wǎng)站,目錄結(jié)構(gòu)至少是這樣的:

依次點(diǎn)擊文件→新建→選擇Web項(xiàng)目(按下Ctrl+N,W可以觸發(fā)快速新建(MacOS請(qǐng)使用Command+N,然后左鍵點(diǎn)擊Web項(xiàng)目))
<br/><br/><br/>
**第二步 新建一個(gè)HTML文件**

如上圖,請(qǐng)?jiān)贏處填寫(xiě)新建項(xiàng)目的名稱(chēng),B處填寫(xiě)(或選擇)項(xiàng)目保存路徑(更改此路徑HBuilder會(huì)記錄,下次默認(rèn)使用更改后的路徑),C處可選擇使用的模板(可點(diǎn)擊自定義模板,參照打開(kāi)目錄中的readme.txt自定義模板) 創(chuàng)建HTML頁(yè)面 在項(xiàng)目資源管理器中選擇剛才新建的項(xiàng)目,依次點(diǎn)擊文件→新建→選擇HTML文件(按下Ctrl+N,W可以觸發(fā)快速新建(MacOS請(qǐng)使用Command+N,然后左鍵點(diǎn)擊HTML文件)),并選擇空白文件模板,如下圖

完成準(zhǔn)備工作 新建HTML后準(zhǔn)備工作已經(jīng)完成,此時(shí)的項(xiàng)目資源管理器如下圖

同時(shí)getstart.html應(yīng)已打開(kāi)
* * * * *
### 使用邊改邊看試試查看編程效果
win系統(tǒng)按下Ctrl+P(MacOS為Command+P)進(jìn)入邊改邊看模式,在此模式下,如果當(dāng)前打開(kāi)的是HTML文件,每次保存均會(huì)自動(dòng)刷新以顯示當(dāng)前頁(yè)面效果(若為JS、CSS文件,如與當(dāng)前瀏覽器視圖打開(kāi)的頁(yè)面有引用關(guān)系,也會(huì)刷新)
### 代碼塊大量減少重復(fù)代碼工作量
在打開(kāi)的getstart.html中輸入H,如下圖

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

**什么是代碼塊?**
代碼塊是常用的代碼組合,比如在js中輸入$,回車(chē),則可以自動(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的名稱(chēng)。比如script、style,通常,敲最多4個(gè)字母即可匹配到需要的代碼塊,不需要完整錄入,如sc回車(chē)、st回車(chē),即可完成script、style標(biāo)簽的輸入。
代碼塊激活字符原則3:同一個(gè)tag,有多個(gè)代碼塊輸出,則在最后加后綴。比如meta輸出但metau則輸出,metag同理。
代碼塊激活字符原則4:如果原始語(yǔ)法超過(guò)4個(gè)字符,針對(duì)常用語(yǔ)法,則第一個(gè)單詞的激活符使用縮寫(xiě)。比如input button,縮寫(xiě)為inbutton,同理intext是輸入框。
代碼塊激活字符原則5:js的關(guān)鍵字代碼塊,是在關(guān)鍵字最后加一個(gè)重復(fù)字母。比如if直接敲會(huì)提示if關(guān)鍵字,但iff回車(chē),則出現(xiàn)if代碼塊。類(lèi)似的有forr、withh等。由于funtion字母較長(zhǎng),為加快輸入速度,取fun縮寫(xiě),比如funn,輸出function代碼塊,而funa和func,分別輸出匿名函數(shù)和閉包。
### 靈活的快捷鍵使得編程過(guò)程手不離鍵盤(pán)
**代碼輸入法:一個(gè)數(shù)字,少敲10下鍵盤(pán)。**

按下候選列表前的數(shù)字,自動(dòng)把該候選項(xiàng)輸入到編輯區(qū),你將不用把所有字都敲一遍了。當(dāng)然除了數(shù)字選擇,跳字輸入也是支持的。
codeassist
**代碼塊:一個(gè)代碼塊,少敲20下鍵盤(pán)。**

圖標(biāo)為codeblock的候選項(xiàng)為代碼塊。
代碼塊是常用的代碼組合,比如在js中輸入$,回車(chē),則可以自動(dòng)輸入document.getElementById(id)。
再舉例,在HTML中輸入i,回車(chē),可以得到input button標(biāo)簽。
codeblock_input
查看、編輯代碼塊可以在工具-自定義代碼塊中,選擇相應(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的名稱(chēng)。比如script、style,通常,敲最多4個(gè)字母即可匹配到需要的代碼塊,不需要完整錄入,如sc回車(chē)、st回車(chē),即可完成script、style標(biāo)簽的輸入。
代碼塊激活字符原則3:同一個(gè)tag,有多個(gè)代碼塊輸出,則在最后加后綴。比如meta輸出<meta name="" content=""/>但metau則輸出<meta charset="UTF-8"/>,metag同理。
代碼塊激活字符原則4:如果原始語(yǔ)法超過(guò)4個(gè)字符,針對(duì)常用語(yǔ)法,則第一個(gè)單詞的激活符使用縮寫(xiě)。比如input button,縮寫(xiě)為inbutton,同理intext是輸入框。
代碼塊激活字符原則5:js的關(guān)鍵字代碼塊,是在關(guān)鍵字最后加一個(gè)重復(fù)字母。比如if直接敲會(huì)提示if關(guān)鍵字,但iff回車(chē),則出現(xiàn)if代碼塊。類(lèi)似的有forr、withh等。由于funtion字母較長(zhǎng),為加快輸入速度,取fun縮寫(xiě),比如funn,輸出function代碼塊,而funa和func,分別輸出匿名函數(shù)和閉包。
**全時(shí)提示**
HBuilder不僅僅提示全面的語(yǔ)法,非語(yǔ)法的各種候選輸入也都能提示。包括圖片、鏈接、顏色、字體、腳本、樣式、URI、ID、class、自定義JS對(duì)象、方法。
舉例,在img src=后激活代碼助手,可以看到本工程所有圖片列表;輸入 sc 可以看到本工程所有js列表;在js的document.getElementById(id)中提示本工程已經(jīng)定義的ID列表;在css的color:后可以列出本工程所有使用過(guò)的顏色。
**Emmet支持**
HBuilder內(nèi)嵌了emmet(即zencoding)插件。輸入div#id1,按下tab,可以自動(dòng)生成 <div id="id1"></div>。Emmet的詳細(xì)語(yǔ)法請(qǐng)查閱其官方網(wǎng)站emmet.io。
**框架語(yǔ)法支持**
HBuilder內(nèi)嵌了jquery、bootstrap、angular、mui等常用框架的語(yǔ)法提示庫(kù),并且這些框架語(yǔ)法一樣可以享受到HBuilder的全時(shí)提示機(jī)制,提示圖片、顏色、id、class...
如果要使用框架語(yǔ)法,需要在工具菜單/項(xiàng)目的右鍵菜單中,點(diǎn)擊引入框架語(yǔ)法提示的子項(xiàng),為該項(xiàng)目選擇框架語(yǔ)法提示。提示效果如下:




### 常用快捷鍵






* * * * *
[更多技巧](http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/95)
- 前言
- 走進(jìn)前端工程師的世界
- 前端知識(shí)圖譜
- 前端學(xué)習(xí)方法
- 計(jì)算機(jī)基礎(chǔ)知識(shí)
- 寫(xiě)一封信給4個(gè)月后的自己
- Github的使用
- 網(wǎng)頁(yè)基礎(chǔ)知識(shí)
- 2.1認(rèn)識(shí)網(wǎng)頁(yè)
- 2.2網(wǎng)頁(yè)相關(guān)名詞
- 2.3Web標(biāo)準(zhǔn)
- 2.4開(kāi)發(fā)環(huán)境配置
- 2.4.1Hbuilder使用技巧
- 2.4.2SublineText使用技巧
- 大前端必會(huì)的PS技巧
- HTML
- 網(wǎng)頁(yè)制作入門(mén)
- CSS
- HTML+CSS整站開(kāi)發(fā)
- HTML5
- HTML5 概述
- HTML5 語(yǔ)法
- HTML5 屬性
- HTML5 事件
- HTML5 瀏覽器支持
- HTML5 新元素
- HTML5 Video(視頻)
- HTML5 Audio(音頻)
- HTML5 Input類(lèi)型
- HTML5 表單元素
- HTML5 語(yǔ)義元素
- HTML5 表單屬性
- CSS3
- CSS3 介紹
- CSS3 選擇器
- 基本選擇符
- 關(guān)系選擇符
- 屬性選擇符
- 偽類(lèi)選擇符
- 偽對(duì)象選擇符
- CSS3 邊框
- CSS3 圓角
- CSS3 背景
- CSS3 漸變
- CSS3 文本效果
- CSS3 字體
- CSS3 2D轉(zhuǎn)換
- CSS3 3D轉(zhuǎn)換
- CSS3 過(guò)渡
- CSS3 動(dòng)畫(huà)
- CSS3 多列
- CSS3 用戶(hù)界面
- CSS3 圖片
- CSS3 按鈕
- CSS3 分頁(yè)
- CSS3 框大小
- CSS3 彈性盒子
- CSS3 顏色
- CSS3 多媒體查詢(xún)
- 附錄1
- HTML5+CSS3整站開(kāi)發(fā)
- 前端開(kāi)發(fā)規(guī)范
- 規(guī)范目的
- 命名規(guī)則
- HTML開(kāi)發(fā)規(guī)范
- CSS開(kāi)發(fā)規(guī)范
- SCSS開(kāi)發(fā)規(guī)范
- JavaScript開(kāi)發(fā)規(guī)范
- JavaScript基礎(chǔ)
- JavaScript簡(jiǎn)介
- JavaScript的發(fā)展歷史
- JavaScript是前臺(tái)語(yǔ)言
- 用法
- 認(rèn)識(shí)語(yǔ)句和符號(hào)
- JavaScript輸出
- JavaScript注釋
- 體驗(yàn)js輸出
- JavaScript 變量
- JavaScript 數(shù)據(jù)類(lèi)型
- JavaScript數(shù)據(jù)類(lèi)型的轉(zhuǎn)換
- JavaScript運(yùn)算符
- JavaScript流程控制語(yǔ)句
- 前端庫(kù)
- 百度靜態(tài)資源公共庫(kù)
- 前端資源
- 學(xué)習(xí)網(wǎng)站類(lèi)
