有一個好的編輯器我們可以方便的開發(fā)項目，編寫代碼，配置和管理我們的項目。所以我們開始編寫html代碼之前需要搭建開發(fā)環(huán)境。

基于html項目的開發(fā)和代碼編寫現(xiàn)在網(wǎng)上有很多編輯器，也有免費的，也有收費的編輯器。基于在Windows系統(tǒng)環(huán)境下開發(fā)和編寫html代碼最簡單的編輯器就是Windows自帶的記事本，我們可以使用記事本編輯html代碼。

使用記事本編寫html的步驟是首先新建一個文本文檔，按照html的語法規(guī)則編寫相關的代碼和保存文件，然后把文件的后綴名改為.html，使用電腦上的瀏覽器打開就可以查看我們代碼的運行結(jié)果。

雖然記事本也能編寫html代碼，但是效率不高也不方便，所以我們使用專業(yè)的編輯器來開發(fā)項目，編寫代碼和管理項目。

常用html代碼編寫的免費軟件有HBuilderX，vs code，Sublime Text 等等。

HBuilderX官網(wǎng)下載地址：

https://www.dcloud.io/hbuilderx.html

vs code的官網(wǎng)下載地址：

https://code.visualstudio.com/

Sublime Text官網(wǎng)下載地址：

http://www.sublimetext.com/

我們以后的教程都使用HBuilderX，所以下面為了同學們的學習方便，對HBuilderX的下載和安裝做詳細的教程。

一，下載

首先訪問HBuilderX的官網(wǎng)網(wǎng)址：

https://www.dcloud.io/hbuilderx.html

打開上面的HBuilderX下載網(wǎng)址后點擊頁面上download，在彈出的對話框里選擇適合自己電腦的HBuilderX版本下載。

在Windows10環(huán)境下下載后的文件是一個壓縮的.zip文件。

二，安裝

鼠標右擊下載下來的壓縮文件進行解壓。

解壓完成后是一個名為HBuilderX的文件夾。

解壓完成后鼠標雙擊HBuilderX文件夾：

雙擊運行名為HBuilderX.exe的應用程序文件即可啟動HBuilderX編輯器：

因為HBuilderX是一個綠色軟件所以沒有桌面快捷方式和開始菜單快速啟動程序，我們可以右擊HBuilderX.exe文件創(chuàng)建桌面快捷方式。

小百科：

綠色軟件指一類小型軟件，多數(shù)為免費軟件，最大特點是軟件無需安裝便可使用，可存放于閃存中，移除后也不會將任何記錄留在本機計算機上。通俗點講綠色軟件就是指不用安裝，下載直接可以使用的軟件。綠色軟件不會在注冊表中留下注冊表鍵值，所以相對一般的軟件來說，綠色軟件對系統(tǒng)的影響幾乎沒有，所以是很好的一種軟件類型。

三，新建項目

HBuilderX編輯器初次啟動時的默認界面是下圖所示：

按照下圖所示可以創(chuàng)建一個新的名為demo1空白項目：

名為demo1的空白項目創(chuàng)建成功后的界面如下圖所示：

接下來在剛我們新建的demo1項目下創(chuàng)建名為helloworld的html文件

鼠標右擊創(chuàng)建的demo1項目選擇新建在選擇.html文件：

在彈出的對話框里填入html文件的名稱：

編寫一段代碼：

運行：

在瀏覽器上觀察效果：

好了，到這里html的開發(fā)環(huán)境搭建和HBuilderX的安裝教程結(jié)束了。

下面再給大家教一下怎樣修改HBuilderX的主題風格，HBuilderX自身提供了修改軟件主題的功能，使用者可以自身需求和喜好修改HBuilderX的風格。在喜歡自己喜歡的環(huán)境下做開發(fā)也是令人羨慕的一件事。

按照一下步驟可以修改HBuilderX的主題，默認主題是綠柔，我們可以改成雅黑，雅藍或者自定義主題：

雅黑主題：

雅藍主題：

好了本節(jié)全部內(nèi)容全部結(jié)束了，希望我準備的內(nèi)容對你有所幫助

你的支持是我的最大動力，若覺得我的教程還可以對你有幫助為我點贊加關注！謝謝！