提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔

文章目錄

• 一，簡介HBuilder
• • 1，什么是Hbuilder？
  • 2，Hbuilder的優勢是什么？
• 3，目前Web開發領域格局
• 二，Hbuilder IDE的下載與安裝
• • 1，查找Hbuilder官方網站
  • 2，了解Hbuilder
  • 3，下載
  • 4，解壓下載的安裝包
  • 5，找到執行文件
  • 6，打開Hbuilder
• 三，Hbuilder IDE的使用
• • 1，設置編譯器風格
  • 2 使用

---

一，簡介HBuilder

1，什么是Hbuilder？

HBuilder是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。
　　它基于Eclipse，所以順其自然地兼容了Eclipse的插件
　　從Frontpage、Dreamweaver、UE，到Sublime Text和JetBrains的WebStorm，Web編程的IDE已經更換了幾批。但是HBuilder可以生存就是因為有自身的優勢。

2，Hbuilder的優勢是什么？

• 快，是HBuilder的最大優勢，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css的開發效率。
• 在HBuilder里預置了一個hello HBuilder的工程，用戶敲這幾十行代碼后會發現，
  HBuilder比其他開發工具至少快5倍。“最全的瀏覽器兼容性數據、開發手機App等很
  多特點也都是HBuilder強于競品的地方”，王安表示。
• 以“快”為核心的HBuilder，引入了“快捷鍵語法”的概念，巧妙地解決了困擾許多
  開發者的快捷鍵過多而記不住的問題。開發者只需要記住幾條語法，就可以快速實現
  跳轉、轉義和其他操作。比如alt+[是跳轉到括號，alt+’是跳轉到引號，alt+字母是
  跳轉菜單項，而alt+左則是跳轉到上一次光標位置。而Ctrl則是各種操作，比如ctrl+d
  就是刪除一行。shift則是轉義，比如shift+回車是
  ，shift+空格是 。
• 另外，HBuilder的生態系統可能是最豐富的Web IDE生態系統，因為它同時兼容
  Eclipse插件和Ruby Bundle。SVN、git、ftp、PHP、less等各種技術都有Eclipse插件。
• HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫，
  它基于Eclipse，所以順其自然地兼容了Eclipse的插件。但因為Java效率太低，所以用C
  寫了啟動器。HBuilder柔和的綠色界面設計需要動態調節屏幕亮度，它還支持手機數據線
  真機聯調，而這些都是用C寫的。
• HBuilder很多界面，比如用戶信息界面都是使用Web技術來做的，既漂亮，開發起來
  又快。最后，代碼塊、快捷配置命令腳本，都是用Ruby開發的。

“這4種技術各有各的用途，我們團隊內部也靈活運用，HBuilder的架構支持不同的技
術互相融合通信。至于我們的技術選型原則，首先滿足用戶需求，然后我們內部用什么技
術能更快完成就會選什么技術”，王安解釋道。

3，目前Web開發領域格局

目前主流的前端開發工具有Sublime為代表的文本編輯器，以及Webstorm、Brackets、Dreamweaver、vs等IDE。但說道為HTML5設計或做了特殊優化的，只有HBuilder、Webstorm和Brackets。

文本編輯器以輕快方便的特點獲得了很多用戶的喜愛，但商業項目的編寫缺少IDE還是會很低效。IDE相比文本編輯器最大的特點是擁有語法引擎，能夠識別語言。

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

二，Hbuilder IDE的下載與安裝

HBuilder下載地址：在HBuilder官網http://www.dcloud.io/點擊免費下載，下載最新版的HBuilder。

HBuilder目前有兩個版本，一個是windows版，一個是mac版。下載的時候根據自己的電腦選擇適合自己的版本。

1，查找Hbuilder官方網站

首先去這款前端開發編輯器的官方網站，之后進到官方網站中，如下界面

2，了解Hbuilder

進入官網之后，找到“Hbuilder”的欄目，建議仔細看完這一頁面的內容以便于簡歷一個對Hbuilder的初步了解，看完后找到下載按鈕進行下載。

3，下載

點擊下載之后會有一個彈窗，根據電腦版本進行選擇，點擊完成之后便開始進行下載然后進入等待即可。新一代的版本為HBuilderx,上一代的版本為Hbuilder

4，解壓下載的安裝包

文件下載完后才能之后得到是一個壓縮包，然后我們進行解壓會得到一個文件夾，隨便說一句這個文件夾就是Hbuilder的文件包，Hbuilder不用安裝解壓完成即可使用。

5，找到執行文件

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

6，打開Hbuilder

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

三，Hbuilder IDE的使用

1，設置編譯器風格

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

2 使用

HBuilder在Eclipse的基礎上添加和刪除了很多插件。

2.1 創建項目
HBuilder沒有“工作空間workspace”的概念，其創建的項目，可以指定到任意位置。

HBuilder只能創建“WEB項目”和“移動APP”兩種項目。

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

填寫項目名稱，選擇項目位置

創建完成，點擊項目查看目錄結構

2.2 創建HTML頁面

在項目資源管理器中選擇剛才新建的項目,依次點擊文件→新建→選擇HTML文件(按下Ctrl+N,W可以觸發快速新建(MacOS請使用Command+N,然后左鍵點擊HTML文件))

選中文件位置，編寫文件名稱，選中文件使用版本

創建完成，自動生成html模板

2.3 快速提示
HBuilder特點，需要輸入觸發字符，就可以快速的提示需要的內容。

l <：注釋

l h+8：html模板，先按h，再按8

l in：創建input標簽；int：創建文本框；insu：創建添加按鈕

l t+enter：創建表格

l s+enter：js模塊

l fun+3：創建js函數

總結

以上是生活随笔為你收集整理的HBuilder的安装及用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。