HTML&CSS基礎-前端免費開發工具Hbuilder介紹
作者：尹正傑
版權聲明：原創作品，謝絕轉載！否則将追究法律責任。
工欲善其事必先利其器，想要幹好活得有一個好的工具。
一.文本編輯工具
在windows中我們隻需要使用最簡單的記事本就可以完成所有的網頁的開發，但是一般我們會使用一些具體提示功能的純文字編輯器，比如常見的Notepad++(免費)，Sublime（收費），當然還有很多其它的工具。 二.IDE
IDE擁有比純文字編輯器更加強大的提示功能，也是我們開發中用的比較多的工具。比如DreamWeaver(比較占用系統資源，收費),WebStorm(收費)，Hbuilder(中國人開發，免費使用)，當然其它IDE。
我們在生産環境中要使用工具，但是我們不能依賴工具，如果在某些特定的場景下你不能離開IDE就啥代碼也不會寫就尴尬了。 三.Hbuilder的安裝步驟詳解
1>.下載下傳Hbuilder解壓該檔案并進入到解壓目錄，輕按兩下"HBuilder.exe"
2>.運作"HBuilder.exe"後會彈出如下所示的一個對話框，點選"暫不登入"
3>.如下圖所示，選擇你能看得清除的條形圖，如果你連最後一點都看不清楚說明你有輕度近視了喲~(小哥哥小姐姐們，保護好眼睛吧)，或者直接關閉也可以
4>.安裝成功
5>.建立web項目
6>.HBuilder有相應的提示資訊
四.使用HBuilder建立一個檔案并打開
1>.右擊"myweb",建立一個新的html檔案
2>.建立檔案成功後，會自動建立html的檔案代碼格式，如果沒有如下圖所示的提示，可以在第一行輸入"!"，然後按一下"tab"鍵就會自動補齊如下圖所示的資訊喲~
3>.編輯html檔案
4>.使用HBuilder的IDE打開浏覽器
5>.HBuilder會啟動一個web伺服器并打開我們編輯的檔案，很真切的模拟生産環境
五.修改HBuilder的預設模式
1>.如下圖所示，預設是"開發模式"
2>.修改HBuilder的模式
3>.開發時HBuilder會有相應的提示資訊
六.檢視HBuilder的快捷鍵使用
1>.點選"幫助"，選擇"快捷鍵清單"，會彈出如下圖所示的右側的對話框
2>.檢視你要使用的快捷鍵
當你的才華還撐不起你的野心的時候，你就應該靜下心來學習。當你的能力還駕馭不了你的目标的時候，你就應該沉下心來曆練。問問自己，想要怎樣的人生。
歡迎加入基礎架構自動化運維：598432640，大資料SRE進階之路：959042252，DevOps進階之路：526991186