整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
有一個好的編輯器我們可以方便地的開發(fā)項目，編寫代碼，配置和管理我們的項目。所以我們開始編寫html代碼之前需要搭建開發(fā)環(huán)境。
基于html項目的開發(fā)和代碼編寫現(xiàn)在網(wǎng)上有很多編輯器，也有免費的，也有收費的編輯器。基于在Windows系統(tǒng)環(huán)境下開發(fā)和編寫html代碼最簡單的編輯器就是Windows自帶的記事本，我們可以使用記事本編輯html代碼。
使用記事本編寫html的步驟是首先新建一個文本文檔，按照html的語法規(guī)則編寫相關(guān)的代碼和保存文件，然后把文件的后綴名改為.html，使用電腦上的瀏覽器打開就可以查看我們代碼的運行結(jié)果。
雖然記事本也能編寫html代碼，但是效率不高也不方便，所以我們使用專業(yè)的編輯器來開發(fā)項目，編寫代碼和管理項目。
常用html代碼編寫的免費軟件有HBuilderX，vs code，Sublime Text 等等。
HBuilderX官網(wǎng)下載地址：
https://www.dcloud.io/hbuilderx.htmlvs code的官網(wǎng)下載地址：
https://code.visualstudio.com/Sublime Text官網(wǎng)下載地址：
http://www.sublimetext.com/我們以后的教程都使用HBuilderX，所以下面為了同學(xué)們的學(xué)習(xí)方便，對HBuilderX的下載和安裝做詳細(xì)的教程。
一，下載
首先訪問HBuilderX的官網(wǎng)網(wǎng)址：
https://www.dcloud.io/hbuilderx.html打開上面的HBuilderX下載網(wǎng)址后點擊頁面上download，在彈出的對話框里選擇適合自己電腦的HBuilderX版本下載。
在Windows10環(huán)境下下載后的文件是一個壓縮的.zip文件。
二，安裝
鼠標(biāo)右擊下載下來的壓縮文件進(jìn)行解壓。
解壓完成后是一個名為HBuilderX的文件夾。
解壓完成后鼠標(biāo)雙擊HBuilderX文件夾：
雙擊運行名為HBuilderX.exe的應(yīng)用程序文件即可啟動HBuilderX編輯器：
因為HBuilderX是一個綠色軟件所以沒有桌面快捷方式和開始菜單快速啟動程序，我們可以右擊HBuilderX.exe文件創(chuàng)建桌面快捷方式。
小百科：
綠色軟件指一類小型軟件，多數(shù)為免費軟件，最大特點是軟件無需安裝便可使用，可存放于閃存中，移除后也不會將任何記錄留在本機計算機上。通俗點講綠色軟件就是指不用安裝，下載直接可以使用的軟件。綠色軟件不會在注冊表中留下注冊表鍵值，所以相對一般的軟件來說，綠色軟件對系統(tǒng)的影響幾乎沒有，所以是很好的一種軟件類型。
三，新建項目
HBuilderX編輯器初次啟動時的默認(rèn)界面是下圖所示：
按照下圖所示可以創(chuàng)建一個新的名為demo1空白項目：
名為demo1的空白項目創(chuàng)建成功后的界面如下圖所示：
接下來在剛我們新建的demo1項目下創(chuàng)建名為helloworld的html文件
鼠標(biāo)右擊創(chuàng)建的demo1項目選擇新建在選擇.html文件：
在彈出的對話框里填入html文件的名稱：
編寫一段代碼：
運行：
在瀏覽器上觀察效果：
好了，到這里html的開發(fā)環(huán)境搭建和HBuilderX的安裝教程結(jié)束了。
下面再給大家教一下怎樣修改HBuilderX的主題風(fēng)格，HBuilderX自身提供了修改軟件主題的功能，使用者可以自身需求和喜好修改HBuilderX的風(fēng)格。在喜歡自己喜歡的環(huán)境下做開發(fā)也是令人羨慕的一件事。
按照以下步驟可以修改HBuilderX的主題，默認(rèn)主題是綠柔，我們可以改成雅黑，雅藍(lán)或者自定義主題：
雅黑主題：
雅藍(lán)主題：
好了本節(jié)全部內(nèi)容全部結(jié)束了，希望我準(zhǔn)備的內(nèi)容對你有所幫助
你的支持是我的最大動力，若覺得我的教程還可以或?qū)δ阌袔椭鸀槲尹c贊加關(guān)注！謝謝！
有試過自己寫一個網(wǎng)頁嗎？聽上去難，其實操作起來很簡單，不夸張地說——有手就行。來試試看吧。
1）一個網(wǎng)站由若干個網(wǎng)頁構(gòu)成，這些網(wǎng)頁是用超級鏈接有邏輯地聯(lián)系起來的。
2）網(wǎng)站由網(wǎng)址來識別和存取。
3）網(wǎng)頁需要上傳到網(wǎng)絡(luò)空間中，才能供瀏覽者訪問網(wǎng)站中的內(nèi)容。
即，一個網(wǎng)站需要有域名（網(wǎng)址）、網(wǎng)頁、網(wǎng)絡(luò)空間三部分。
1）語言
我們可以使用HTML來編寫網(wǎng)頁，HTML文件就是增加了標(biāo)記的普通文本文件。
可以簡單地使用記事本來編寫一個網(wǎng)頁，只需將文件后綴名改為html，然后用瀏覽器打開。
現(xiàn)在編寫網(wǎng)頁的語言其實由三部分構(gòu)成：HTML,CSS,JavaScript。
1）HTML：早期編寫網(wǎng)站的語言。
2）CSS：負(fù)責(zé)網(wǎng)站內(nèi)容的表現(xiàn)形式。是在HTML原來的功能中分離出來的，這種分離可以使維護(hù)站點外觀更容易，也讓文檔代碼更簡練，網(wǎng)頁加載快。
3）JavaScript：負(fù)責(zé)動態(tài)部分。 使網(wǎng)頁更加生動活潑，增加和用戶的互動。
2）軟件
前面已經(jīng)講到，可以簡單地使用記事本來編輯網(wǎng)頁。
這里在提出兩款編輯軟件：EditPlus，Dreamweaver。它們的能力是遞增的。
EditPlus:
EditPlus相比記事本的優(yōu)點是，可以帶有html語言的語法高亮，而且可以在這個編輯頁面中直接預(yù)覽網(wǎng)頁（點擊左上角部分的小地球圖標(biāo)）。
前面已經(jīng)提到，html語言文件就是增加了標(biāo)記的普通文本。
那么首先，我們就要了解標(biāo)記的作用：
一些簡單的標(biāo)記，可以讓文本在網(wǎng)頁中以另一種形式呈現(xiàn)出來。
簡單起見，接下來就使用記事本來編寫我們的網(wǎng)頁。
首先，新建一個文本文件（txt），給它起個隨便的名字。
然后用記事本打開它，輸入以上內(nèi)容，記得保存。
重命名文件，將文件后綴名改為html。
（<br>的意思是換行）
接著選擇打開方式為某個瀏覽器（系統(tǒng)默認(rèn)的瀏覽器就可以），就可以顯示出我們剛剛編寫的網(wǎng)頁了。
是不是感覺樸素地有點過頭了？沒關(guān)系，第一次嘛。
<html>
<body>
<br>
<br>
<br>
這是我們的第一個網(wǎng)頁。
<br>
<br>
<br>
</body>
</html>
這里我們用到了三個基本的標(biāo)簽：<html>、<body>和<br>。
其中<html>標(biāo)志著我們html文件的開始，<body>則表示正文內(nèi)容的開始。而</html>和</body>分別代表著對應(yīng)部分的結(jié)束。<body>和</body>之間的一行文本，則是我們要展現(xiàn)的內(nèi)容。而<br>則是換行，我們經(jīng)常用這個標(biāo)簽來調(diào)整網(wǎng)頁的上下距離。
增加一些其它的標(biāo)簽，讓我們的網(wǎng)頁更加生動一點。
<!doctype html>
<html>
<title>第一個網(wǎng)頁</title>
<body
background = "宇宙.jpeg"
text = "#ccff66"
leftmargin = "300">
<h1>這是我們的第一個網(wǎng)頁！</h1>
<p>可以簡單留作一個紀(jì)念。</p>
<p>但我們的征途，是星辰大海！</p>
</body>
</html>標(biāo)簽 | 功能 |
<!doctype html> | 標(biāo)識文件的語言標(biāo)準(zhǔn)，這里指的是html5 |
<title> | 網(wǎng)頁的標(biāo)題，即瀏覽器中頁面的名字 |
<h1> | 一級標(biāo)題 |
<p> | 一個段落的開始 |
在<body>標(biāo)記中，還可以控制一些全局的呈現(xiàn)效果：
標(biāo)識符 | 控制內(nèi)容 |
background | 背景圖片（需要在html文件相同目錄下，加入相應(yīng)的圖片文件） |
text | 文本內(nèi)容的顏色 |
leftmargin | 兩邊間距大小 |
下面是新的網(wǎng)頁：
TML是制作網(wǎng)頁的基礎(chǔ)，我們在網(wǎng)站建設(shè)中談?wù)摰撵o態(tài)網(wǎng)頁就是基于HTML的網(wǎng)頁。
早期的網(wǎng)頁直接用HTML代碼編寫，但現(xiàn)在有許多智能網(wǎng)頁制作軟件（常用的如frontpage，dream weaver等）通常不需要手動編寫代碼，而是由這些軟件自動生成。雖然不需要自己寫，但是理解HTML代碼仍然是非常重要的。
了解HTML是什么？它是學(xué)習(xí)網(wǎng)站建設(shè)的重要技術(shù)基礎(chǔ)知識
下面我們自己可以動手創(chuàng)建一個非常簡單的網(wǎng)頁，首先我們讓計算機顯示擴展，方法是打開我的電腦，然后現(xiàn)在欄目工具》文件夾選項》查看》高級設(shè)置中找到《隱藏已知文件類型的擴展名》將其不勾選，并單擊“應(yīng)用”以確認(rèn)設(shè)置。然后在桌面上創(chuàng)建一個新的TXT文件，將此文件命名為“xxx.html”（擴展名也可以是htm），這樣你就可以用瀏覽器打開它，你就會看到自己制作的最簡單的頁面。
html是一種超文本標(biāo)記語言，即html（hypertext markup language），是一種用來描述網(wǎng)絡(luò)文檔的標(biāo)記語言。在頁面的開頭和結(jié)尾使用<html></html>標(biāo)簽。
總結(jié)：
1）HTML是我們常說的靜態(tài)網(wǎng)頁；
2）HTML是以Html或htm為擴展名的文件；
3）HTML某些標(biāo)簽代碼規(guī)則，讓內(nèi)容在瀏覽器中呈現(xiàn)出我們所需要的樣式；
4）HTML可以使用記事本創(chuàng)建，并以.html或.htm為擴展名保存。
html文件中的代碼由具有一定的規(guī)則規(guī)律標(biāo)簽與內(nèi)容組成。以指定的HTML結(jié)構(gòu)和內(nèi)容形成完整的html文件。我們可以直接使用瀏覽器來打開，查看網(wǎng)頁效果。
如果您想在瀏覽器中顯示各式各樣的網(wǎng)頁，我們就需要html文件（HTML基本結(jié)構(gòu)+內(nèi)容+標(biāo)簽）和css文件（css樣式）來實現(xiàn)我們需要的漂亮網(wǎng)頁。
動力節(jié)點老杜講解的html學(xué)習(xí)教程，非常詳細(xì)全面，完全適合小白入門
內(nèi)容：講解了HTML基礎(chǔ)語法、HTML概述、W3C概述、B/S架構(gòu)系統(tǒng)原理、table、背景色與背景圖片、超鏈接、列表、表單、框架等知識點。
通過html教程的學(xué)習(xí)之后，不但可以開發(fā)基本的網(wǎng)頁，還可以看懂別人編寫的HTML頁面。
HTML完整資料下載：
http://www.bjpowernode.com/?toutiaoweb.chai
1.HTML教程:課程內(nèi)容概述
2.HTML教程:BS結(jié)構(gòu)介紹
3.HTML教程:軟件環(huán)境準(zhǔn)備
4.HTML教程:HTML概述
5.HTML教程:我的第一個HTML
6.HTML教程:HTML的基本標(biāo)簽
7.HTML教程:HTML的實體符號
8.HTML教程:HTML的表格
9.HTML教程:HTML的單元格合并1
10.HTML教程:HTML的單元格合并2
11.HTML教程:thead tbody tfoot
12.HTML教程:背景色和背景圖片
13.HTML教程:HTML圖片img標(biāo)簽
14.HTML教程:HTML超鏈接
15.HTML教程:超鏈接的作用-request和response的概念
16.HTML教程:HTML列表
17.HTML教程:form表單初步
18.HTML教程:用戶注冊表單的實現(xiàn)
19.HTML教程:下拉列表支持多選
20.HTML教程:form的file控件
21.HTML教程:隱藏域hidden控件
22.HTML教程:隱藏域hidden控件2
23.HTML教程:readonly和disabled
24.HTML教程:控件的maxlength屬性
25.HTML教程:HTML文檔中節(jié)點的id屬性
26.HTML教程:div和span在網(wǎng)頁中的應(yīng)用
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
