用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)

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

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

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

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

常用html代碼編寫的免費(fèi)軟件有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,所以下面為了同學(xué)們的學(xué)習(xí)方便,對(duì)HBuilderX的下載和安裝做詳細(xì)的教程。

一,下載

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

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

用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)

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

用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)

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

用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)


二,安裝

鼠標(biāo)右擊下載下來的壓縮文件進(jìn)行解壓。

用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)

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

用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)

解壓完成后鼠標(biāo)雙擊HBuilderX文件夾:

用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)

雙擊運(yùn)行名為HBuilderX.exe的應(yīng)用程序文件即可啟動(dòng)HBuilderX編輯器:

用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)

因?yàn)镠BuilderX是一個(gè)綠色軟件所以沒有桌面快捷方式和開始菜單快速啟動(dòng)程序,我們可以右擊HBuilderX.exe文件創(chuàng)建桌面快捷方式。

用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)


小百科:

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


三,新建項(xiàng)目

HBuilderX編輯器初次啟動(dòng)時(shí)的默認(rèn)界面是下圖所示:

用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)

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

用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)

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

用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)

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

鼠標(biāo)右擊創(chuàng)建的demo1項(xiàng)目選擇新建在選擇.html文件:

用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)

在彈出的對(duì)話框里填入html文件的名稱:

用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)

編寫一段代碼:

用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)

運(yùn)行:

用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)

在瀏覽器上觀察效果:

用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)


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

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

按照一下步驟可以修改HBuilderX的主題,默認(rèn)主題是綠柔,我們可以改成雅黑,雅藍(lán)或者自定義主題:

用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)

雅黑主題:

用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)

雅藍(lán)主題:

用html代碼編寫的免費(fèi)軟件下載和安裝教程(用html代碼編寫的免費(fèi)軟件下載和安裝教程)

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

你的支持是我的最大動(dòng)力,若覺得我的教程還可以對(duì)你有幫助為我點(diǎn)贊加關(guān)注!謝謝!

相關(guān)新聞

聯(lián)系我們
聯(lián)系我們
公眾號(hào)
公眾號(hào)
在線咨詢
分享本頁
返回頂部