Hbuilder特別版介紹

Hbuilder特別版是一款功能強(qiáng)大的HTML編輯器，支持多種程序語言，兼容發(fā)大部分瀏覽器數(shù)據(jù)。HBuilder免費(fèi)版的生態(tài)系統(tǒng)可能是最豐富的Web IDE生態(tài)系統(tǒng)，因?yàn)樗�同時(shí)兼容Eclipse插件和Ruby Bundle。SVN、git、ftp、PHP、less等各種技術(shù)都有Eclipse插件。

Hbuilder特別版特色

1、內(nèi)置代碼輸入法，按數(shù)字快速輸入候選項(xiàng)。

2、可編程代碼塊，一個(gè)代碼塊，少敲50個(gè)按鍵。

3、各種代碼提示，不僅僅是語法。

4、跳轉(zhuǎn)助手，手不離鍵盤。

5、多語言支持，輕松兼容。

6、邊看邊寫，效果實(shí)時(shí)展現(xiàn)。

7、護(hù)眼主題，關(guān)愛你的眼睛。

Hbuilder特別版亮點(diǎn)

編碼比其他工具快5倍夠不夠？對極客而言，追求快，沒有止境！

代碼輸入法：按下數(shù)字快速選擇候選項(xiàng)

可編程代碼塊：一個(gè)代碼塊，少敲50個(gè)按鍵

內(nèi)置emmet：tab一下生成一串代碼

無死角提示：除了語法，還能提示ID、Class、圖片、鏈接、字體…

跳轉(zhuǎn)助手、選擇助手，不用鼠標(biāo)，手不離鍵盤

多種語言支持：php、jsp、ruby、python、nodejs等web語言，less、coffee等編譯型語言均支持

邊改邊看：一邊寫代碼，一邊看效果

強(qiáng)悍的轉(zhuǎn)到定義和一鍵搜索

這里還有最全的語法庫、最全的語法瀏覽器兼容庫

Hbuilder特別版使用說明

打開文件夾，找到Hbuilder的啟動文件，然后郵件選擇發(fā)送到桌面快捷方式，這樣方便我們之后快速的啟動。

點(diǎn)擊桌面的Hbuilder快捷方式，打開我們的Hbuilder登錄郵箱進(jìn)入到Hbuilder的工作臺中并進(jìn)行一些基礎(chǔ)設(shè)置。

設(shè)置完成后，我們的Hbuilder就算是已經(jīng)安裝好了，記下來我們就開始學(xué)習(xí)怎么使用它，首先我們新建一個(gè)web項(xiàng)目，之后命名，選擇存儲位置。

然后我們就可以打開這個(gè)文件，開始我們的代碼編寫之旅了，而且Hbuilder編寫代碼是由提示的，比如我們想創(chuàng)建一個(gè)塊元素div，那么我們輸入d后面就會出現(xiàn)相應(yīng)的提示，大大的加快了代碼的編寫速度。

Hbuilder常用快捷鍵

1.文件(4)

新建 Ctrl + N

關(guān)閉 Ctrl + F4

全部關(guān)閉 Ctrl + Shift + F4

屬性 Alt + Enter

2.編輯(13)

激活代碼助手 Alt + /

激活快捷鍵視圖 Ctrl + Shift + L

開啟關(guān)閉注釋整行 Ctrl + /

開啟關(guān)閉注釋已選內(nèi)容 Ctrl + Shift + /

刪除當(dāng)前行 Ctrl + D

刪除當(dāng)前標(biāo)簽 Ctrl + Shift + T

刪除至行首 Shift + Backspace

刪除至行尾 Shift + del

合并下一行 Ctrl + Alt + J

整理代碼格式 Ctrl + Shift + F

向下移動行 Ctrl + 向下

向上移動行 Ctrl + 向上

選中當(dāng)前行 Ctrl + L

3.插入(3)

重復(fù)插入當(dāng)前行或選中區(qū)域 Ctrl + Shift + R

快速插入

(在html中) Shift + Enter

快速插入\n(在css或js中) Shift + Enter

4.選擇(4)

向左選詞 Ctrl + Shift + 向左

向右選詞 Ctrl + Shift + 向右

選擇相同詞 Ctrl + Shift + A

選擇成對內(nèi)容 Ctrl + ‘[‘

5.跳轉(zhuǎn)(9)

上一個(gè)選項(xiàng)卡 Ctrl + Tab

前一詞 Ctrl + 向左

后一詞 Ctrl + 向右

轉(zhuǎn)到上一個(gè)文本輸入點(diǎn) Alt + 向上

轉(zhuǎn)到下一個(gè)文本輸入點(diǎn) Alt + 向下

行首 Home

行尾 End

頁首 Ctrl + Home

頁尾 Ctrl + End

6.查找(8)

搜索條 Ctrl + F

搜索框 Ctrl + H

查找文件 Ctrl + T

隱藏搜索條 ESC

聚焦到搜索條件框內(nèi) Ctrl + Alt + F

聚焦到替換輸入框內(nèi) Ctrl + Alt + E

在搜索條內(nèi)換行 Alt +Enter

HTML標(biāo)簽規(guī)范 Ctrl + Shift + H

7.運(yùn)行(1)

運(yùn)行 Ctrl + R

8.工具(1)

CSS/HTML語法校驗(yàn) Ctrl + Shift + V

9.視圖(6)

活動視圖或編輯器最大化 Ctrl + M

顯示行號菜單 Ctrl + F10

激活邊看邊改視圖 Ctrl + P

激活開發(fā)視圖 Ctrl + Shift + P

全部折疊 Ctrl + Alt + -

全部展開 Ctrl + Alt + +

Hbuilder實(shí)用技巧和常見問題

Q:怎么實(shí)現(xiàn)代碼追蹤？

A:在編輯代碼時(shí)經(jīng)常會出現(xiàn)需要跳轉(zhuǎn)到引用文件或者變量定義的地方，HBuilder提供了一個(gè)非常好用的代碼追蹤功能，

只需要按住Alt+鼠標(biāo)左鍵即可實(shí)現(xià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è)試試：

Q:有沒有快速比較兩個(gè)文件差異的辦法？

A:比較兩個(gè)文檔的方法是，在項(xiàng)目管理器按ctrl選兩個(gè)文件，點(diǎn)右鍵，選比較對象

點(diǎn)擊查找-歷史版本比較，里邊保存有改=該文件的所有歷史版本代碼

Q:怎么才能快速記住快捷鍵？

A:記快捷鍵，不如記快捷鍵語法。

Alt是轉(zhuǎn)到，Shift是轉(zhuǎn)移，Ctrl是操作。

比如Alt+括號、引號，即使轉(zhuǎn)到對于的符號。

Shift+回車是<br/>，shift+空格是&nbsp;。

Ctrl+D是刪除行，F(xiàn)2是重構(gòu)命名。

Q:為什么不能手機(jī)預(yù)覽？

A:WEB項(xiàng)目不可以手機(jī)預(yù)覽頁面。只有移動APP才可以。

確定項(xiàng)目是移動APP后,確保移動設(shè)備插好數(shù)據(jù)線并連接到電腦。

如果是iOS設(shè)備,請確保電腦安裝有itunes,如果是Android,請確定手機(jī)驅(qū)動已經(jīng)安裝。

此時(shí)在HBuilder下方的狀態(tài)欄也會提示手機(jī)已連接

然后點(diǎn)運(yùn)行,選擇對應(yīng)的設(shè)備即可。

如果你只是想預(yù)覽web項(xiàng)目，那么在菜單工具->選項(xiàng)->HBuilder->web服務(wù)器->內(nèi)建服務(wù)器里，

選擇一個(gè)內(nèi)網(wǎng)ip，比如192.xxx，然后手機(jī)通過wifi連入這臺機(jī)器，即可預(yù)覽。

Q:如何修改使用瀏覽器預(yù)覽時(shí),地址欄顯示的IP

A:依次點(diǎn)擊工具-選項(xiàng)-HBuilder-Web服務(wù)器-內(nèi)建服務(wù)器

可修改內(nèi)建服務(wù)器的IP地址為127.0.0.1或本機(jī)網(wǎng)卡IP

內(nèi)建服務(wù)器不可以運(yùn)行PHP

需要重啟HBuilder才生效

Q:真機(jī)聯(lián)調(diào)的Development圖標(biāo)如何去掉？

A:真機(jī)聯(lián)調(diào)僅是為了制作手機(jī)APP，調(diào)試完畢后,需要將資源打包制作成為APP。

如果是為了在手機(jī)瀏覽器上使用的WEB應(yīng)用，還是應(yīng)該使用手機(jī)瀏覽器來訪問。HBuilder內(nèi)置的web

服務(wù)器地址配成192.168等內(nèi)網(wǎng)地址，手機(jī)wifi連入，即可訪問。

更改HBuilder內(nèi)置的web服務(wù)器地址請點(diǎn)擊菜單工具-選項(xiàng)，展開左邊的HBuilder-web服務(wù)器-內(nèi)建服

務(wù)器，在右邊更改地址，需要重啟HBuilder才生效

Q:沒有黑色主題嗎？

A:在菜單工具-視覺主題設(shè)置-高級設(shè)置里有各種主題，兼容eclipse的其他主題方案。

另外小小提示下，使用黑色傷眼。激發(fā)視紫紅質(zhì)、消耗維生素A、還容易引發(fā)暗適應(yīng)和暈眩。

綠柔主題是認(rèn)真的研究了色彩心理學(xué)和生理學(xué)后制作的環(huán)保主題。

Q:如何調(diào)整編碼?

A:HBuilder1.7以前版本在資源管理中對著文件點(diǎn)右鍵，點(diǎn)屬性（快捷鍵是Alt+Enter）。

在文件編碼處選其他，選擇或輸入你需要的編碼，比如GBK。

1.8以上的版本可以在文件->其他編碼方式打開,選擇需要的編碼即可。

8、關(guān)于PHP

Q:PHP怎么運(yùn)行?

A:HBuilder自帶的web服務(wù)器是不能解析php的。

如果想解析php，需要自己安裝php服務(wù)器，比如Apache。

安裝好后，在HBuilder的工具-選項(xiàng)-web服務(wù)器中點(diǎn)新建外部web服務(wù)器，配置地址和參數(shù)，保存后重啟HBuilder。

然后點(diǎn)運(yùn)行即可。

Q:PHP怎么不高亮不提示？

A:PHP的語法高亮需要安裝PHP插件。

在工具-插件安裝中，可以安裝Aptana PHP插件。

如果確定安裝了php插件，那么在工具-選項(xiàng)，搜索文件關(guān)聯(lián)，在里面配置php文件和PHP Editor的關(guān)聯(lián)。

也可以在項(xiàng)目管理器里對文件點(diǎn)右鍵，打開方式，里面選PHP Editor。

Q:我怎么使用HBuilder編輯JSP、ASP或.vm文件中的HTML代碼部分？

A:HBuilder有很多文件編輯器。

右鍵點(diǎn)擊文件-打開方式，可以看到所有編輯器。

很多不常用的文件后綴名其實(shí)都可以通過HTML編輯器打開。

10、在Hbuilder中使用git

①安裝git插件：工具———安裝插件——EGIT。

②右擊項(xiàng)目文件——Team——共享項(xiàng)目，項(xiàng)目里邊的文件就會自動添加了一個(gè)倉庫小圖標(biāo)：

③管理倉庫文件時(shí)：右擊文件 team，然后進(jìn)行你需要的操作，commit、pull、push等