您的位置:零度軟件園編程工具編程工具HBuilder編輯器 v9.1.29 中文免費版

HBuilder編輯器 v9.1.29 中文免費版HBuilder編輯器 v9.1.29 中文免費版

軟件大小:261M

軟件官網:HomePage

用戶評分:

軟件類型:國產軟件

運行環境:WinAll

軟件語言:簡體中文

軟件分類:編程工具

更新時間:2019/10/9

授權方式:免費軟件

插件情況:無 插 件

平臺檢測 無插件 360通過 騰訊通過 金山通過 瑞星通過
軟件標簽: HBuilder
HBuilder編輯器是DCloud推出的一款支持HTML5的Web開發IDE,HBuilder編輯器通過完整的語法提示和代碼輸入法、代碼塊等,大幅提升HTML、js、css的開發效率,同時它還為您提供最全的語法庫和瀏覽器兼容性數據,讓您不在為瀏覽器的兼容問題煩惱。

HBuilder下載第1張預覽圖

HBuilder編輯器軟件介紹

HBuilder是數字天堂推出的一款支持HTML5的Web開發IDE。HBuilder的編寫用到了Java、C、Web和Ruby,其核心主體是由Java編寫的,基于Eclipse所研發,順其自然地兼容了Eclipse大量的插件,也是目前受到廣泛開發者的認可和使用,其功能性和操作性都是市面上最出眾之一。

目前主流前端開發工具有Sublime為代表的文本編輯器,以及Webstorm、Brackets、Dreamweaver、vs等IDE。但說道為HTML5設計或做了特殊優化的,只有HBuilder、Webstorm和Brackets。對于在大學學習編程的學生來說,HBuilder是一款比較容易入門的開發工具。HBuilder的功能性比較實用和簡易,對于一般的開發需求能夠容易的應付得到。

HBuilder下載第2張預覽圖

HBuilder編輯器特色介紹

編碼比其他工具快5倍夠不夠?對極客而言,追求快,沒有止境!
代碼輸入法:按下數字快速選擇候選項
可編程代碼塊:一個代碼塊,少敲50個按鍵
內置emmet:tab一下生成一串代碼
無死角提示:除了語法,還能提示ID、Class、圖片、鏈接、字體…
跳轉助手、選擇助手,不用鼠標,手不離鍵盤
多種語言支持:php、jsp、ruby、python、nodejs等web語言,less、coffee等編譯型語言均支持
邊改邊看:一邊寫代碼,一邊看效果
強悍的轉到定義和一鍵搜索
這里還有最全的語法庫、最全的語法瀏覽器兼容庫

HBuilder下載第3張預覽圖

HBuilder編輯器快捷鍵說明

Alt+[匹配括號
Alt+↓跳轉到下一個可編輯區
Ctrl+Alt+j合并下一行
Ctrl+Alt+←選擇助手
Shift+回車
Shift+空格
Ctrl+回車換行
Strl+Shift+回車向上換行
Ctrl+d刪除一行
Ctrl+Shift+d復制上一行

HBuilder下載第4張預覽圖

HBuilder編輯器的安裝與使用

1、在零度軟件下載HBuilder編輯器安裝包,下載完后才能之后得到是一個壓縮包,然后我們進行解壓會得到一個文件夾,隨便說一句這個文件夾就是Hbuilder的文件包,Hbuilder不用安裝解壓完成即可使用。

HBuilder下載第5張預覽圖

2、打開解壓后的文件夾,找到一個叫做“Hbuilder.exe”的可執行文件,這個可執行文件就是Hbuilder的啟動文件。

HBuilder下載第6張預覽圖

3、雙擊這個文件就可以打開Hbuilder這個開發編輯器了,因為我們是直接解壓使用的所以找起來會很麻煩,你可以將“Hbuilder.exe”這個執行文件發送到桌面快捷方式,這樣每次使用的時候直接在桌面就可以打開。

HBuilder下載第7張預覽圖

4、完成第3步之后,我們的桌面會出現一個Hbuilder的快捷方式,然后我們雙擊這個快捷方式,Hbuilder這個編輯器就打開了。

HBuilder下載第8張預覽圖

5、Hbuilder打開之后,會出現一些很人性話的設置,還有一點就是Hbuilder的編輯器風格是黃色系,對眼睛比較好,不同于其他的編輯器一般是以黑白為主,這里我一般使用標準模式。

HBuilder下載第9張預覽圖

6、視覺設置完成之后進入我們的項目建立階段,點擊“新建WEB項目”,創建項目名稱,設置項目所在的位置確定即可,完成之后會在左邊的項目欄管理器中出現。我這里創建的名稱為demo。

HBuilder下載第10張預覽圖

7、打開項目demo的文件夾,我們會看到里面有首頁index.html,有JS文件夾,有CSS文件夾,還有圖片的文件夾,基本齊全。

HBuilder下載第11張預覽圖

8、到了這一步之后,我們便可以編寫我們的代碼了,在這里我就隨便寫了幾句作為項目的演示。

HBuilder下載第12張預覽圖

9、代碼的運行有兩種方式,以下圖為例,點擊對應的瀏覽器之后回跳轉到一個對應的頁面。

HBuilder下載第13張預覽圖

HBuilder編輯器使用技巧

HBuilder如何新建一個web項目?
依次點擊文件→新建→選擇Web項目(按下Ctrl+N,W可以觸發快速新建(MacOS請使用Command+N,然后左鍵點擊Web項目))

HBuilder下載第14張預覽圖

請在A處填寫新建項目的名稱,B處填寫(或選擇)項目保存路徑(更改此路徑HBuilder會記錄,下次默認使用更改后的路徑),C處可選擇使用的模板(可點擊自定義模板,參照打開目錄中的readme.txt自定義模板)

HBuilder下載第15張預覽圖

HBuilder如何創建HTML頁面?
在項目資源管理器中選擇剛才新建的項目,依次點擊文件→新建→選擇HTML文件(按下Ctrl+N,W可以觸發快速新建(MacOS請使用Command+N,然后左鍵點擊HTML文件)),并選擇空白文件模板,如下圖

HBuilder下載第16張預覽圖

Hbuilder如何更改字體?
首先打開Hbuilder,點擊工具菜單

HBuilder下載第17張預覽圖

接著點擊下拉菜單中的設置

HBuilder下載第18張預覽圖

然后定位到常用配置,如下圖所示,直接可以更改英文字體

HBuilder下載第19張預覽圖

另外中文字體也單獨出了一個下拉框,如下圖所示

HBuilder下載第20張預覽圖

如果要自定義字體,點擊源碼視圖,如下圖所示

HBuilder下載第21張預覽圖

在如下圖所示的位置自己配置即可

HBuilder下載第22張預覽圖

HBuilder如何改變字體大小?
首先,打開軟件,找到菜單欄“工具”->“選項”。打開選項。

HBuilder下載第23張預覽圖

點擊“HBuilder”->“主題”,打開主題。

HBuilder下載第24張預覽圖

在主題頁面,點擊“選擇...”。

HBuilder下載第25張預覽圖

在這個頁面可以設置字體、字形、字體大小。我們將字體大小修改為“小二”,點擊“確定”。

HBuilder下載第26張預覽圖

讓我們來看看修改之前的字體大小。

HBuilder下載第27張預覽圖

在看看修改字體大小之后是不是看起來舒服清晰很多呢。

HBuilder下載第28張預覽圖

如何解決HBuilder亂碼問題?
打開HBuilder這個軟件,要保證正常運行HBuilder。檢查沒有其他錯誤,比如插件問題,自動閃退等等現象。

HBuilder下載第29張預覽圖

在正常運行情況下,新建一個html文件,輸入中文。選擇“文件”—>"其他編碼格式打開"—>"utf-8"。

HBuilder下載第30張預覽圖

現在“工具-選項”彈出框架

HBuilder下載第31張預覽圖

在常規里有“工作空間”,文本文件編碼的其他改成:utf-8。

HBuilder下載第32張預覽圖

改完以上問題,我們發現我們中文頁面沒有亂碼。

HBuilder下載第33張預覽圖
最后關閉軟件,重啟軟件并新建html文件,再次訪問就正常了。

HBuilder下載第34張預覽圖
HBuilder怎么導入html文件?
進入編輯頁面

HBuilder下載第35張預覽圖

打開目錄文件

HBuilder下載第36張預覽圖

選擇目錄

HBuilder下載第37張預覽圖

瀏覽選擇

HBuilder下載第38張預覽圖

導入文件

HBuilder下載第39張預覽圖
編輯HTML文件

HBuilder下載第40張預覽圖

Hbuilder怎樣設置更改快捷鍵?
如圖,在Hbuilder點擊“選項”就OK了,選項在工具下邊喔。

HBuilder下載第41張預覽圖

既然是要設置修改快捷鍵,則點擊“快捷鍵”即可喲。展開常規列表就可以看到了。

HBuilder下載第42張預覽圖

如圖,可以設置某一種編輯器,這樣快捷鍵就會跟著變化哦。

HBuilder下載第43張預覽圖

也可以指定特定的選項,為它設置快捷鍵喲,如圖,我就設置這個。

HBuilder下載第44張預覽圖

之后,就可以為指定好的選項編輯快捷鍵列表,根據自己的情況來。

HBuilder下載第45張預覽圖

修改過Hbuilder快捷鍵列表之后,后悔的話可以還原喲,哈哈。

HBuilder下載第46張預覽圖

最后保存快捷鍵設置,讓它啟用就行了,哈哈,還是挺簡單的。

HBuilder下載第47張預覽圖

HBuilder編輯器常見問題

Q:什么叫滾動條信息點?
A: 當代碼中有重要的標記出現時,會生成滾動條信息點,在滾動條右側出現顏色各異的點。點擊這些點或使用跳轉到下一個信息點功能,可以快速到達這些代碼處。如下標記會生成信息點:書簽、任務、錯誤提示。

Q:怎么才能快速掌握HBuilder開發技巧?
A: 軟件自帶HelloHBuilder項目,該項目為教程項目(如果不小心刪除了不要擔心,可以在新建WEB項目時,使用HelloHBuilder模板新建出來),按照項目中的lesson1.txt中的快捷鍵敲一遍即可快速掌握HBuilder快速開發技巧。

Q:什么是HTML5+?
A: HTML5+規范是基于HTML5的擴展規范,用于彌補HTML5和原生應用功能之間的差距。HTML5+規范是一個開放的規范,在W3C中國的指導下,由HTML5中國產業聯盟運作,所有規范都是面向開發者的,開發者提需求、開發者評審實現方案、開發者投票選定規范。

Q:怎么實現代碼追蹤?
A:在編輯代碼時經常會出現需要跳轉到引用文件或者變量定義的地方,HBuilder提供了一個非常好用的代碼追蹤功能,只需要按住Ctrl+鼠標左鍵即可實現追蹤。

Q:輸入small不提示,語法庫是不是不全?
A:代碼塊是否提示,取決于是否設置了這個代碼塊,代碼塊是可自定義的。默認沒有預置small代碼塊,你也可以在代碼塊彈出界面點右下角的編輯圖標,進行代碼塊的補充修改。另外可以使用emmet(ZenCoding)語法,這個沒有提示,但敲完small,按tab,就會自動生成標簽。emmet是一種前端公開技術,網上教程很多。

Q:為什么有時候我輸入代碼塊的名稱,卻沒有出現想要的代碼塊?
A:代碼塊的顯示名稱和激活字符是不同的,查看激活字符請在激活代碼助手后選擇代碼塊,看右邊信息欄的詳情

Q:編輯器怎么實現分欄?A:HBuilder編輯器分欄功能可以實現左右分欄和上下分欄以及組合分欄。

1、左右分欄實現:鼠標點著編輯器選項卡往最右邊拖動即可實現左右分欄

HBuilder下載第48張預覽圖

左右分欄實現效果:

HBuilder下載第49張預覽圖

2、上下分欄實現:鼠標點著編輯器選項卡往最下邊拖動即可實現上下分欄

HBuilder下載第50張預覽圖

上下分欄實現效果:;

HBuilder下載第51張預覽圖

3、組合分欄實現:組合分欄就是即有的文件向下拖動,有的文件向右拖動,下面給出一個效果圖,感興趣的話您可以拖個試試:

HBuilder下載第52張預覽圖

  • 下載地址
有問題? 投訴報錯

用戶評論

(您的評論需要經過審核才能顯示)0人參與,0條評論
140

最新評論

我要搶沙發

請簡要描述您遇到的錯誤,我們將盡快予以修訂

返回頂部
骨牌