整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
有一個(gè)好的編輯器我們可以方便地的開發(fā)項(xiàng)目，編寫代碼，配置和管理我們的項(xiàng)目。所以我們開始編寫html代碼之前需要搭建開發(fā)環(huán)境。
基于html項(xiàng)目的開發(fā)和代碼編寫現(xiàn)在網(wǎng)上有很多編輯器，也有免費(fèi)的，也有收費(fèi)的編輯器。基于在Windows系統(tǒng)環(huán)境下開發(fā)和編寫html代碼最簡(jiǎn)單的編輯器就是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.htmlvs 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打開上面的HBuilderX下載網(wǎng)址后點(diǎn)擊頁面上download，在彈出的對(duì)話框里選擇適合自己電腦的HBuilderX版本下載。
在Windows10環(huán)境下下載后的文件是一個(gè)壓縮的.zip文件。
二，安裝
鼠標(biāo)右擊下載下來的壓縮文件進(jìn)行解壓。
解壓完成后是一個(gè)名為HBuilderX的文件夾。
解壓完成后鼠標(biāo)雙擊HBuilderX文件夾：
雙擊運(yùn)行名為HBuilderX.exe的應(yīng)用程序文件即可啟動(dòng)HBuilderX編輯器：
因?yàn)镠BuilderX是一個(gè)綠色軟件所以沒有桌面快捷方式和開始菜單快速啟動(dòng)程序，我們可以右擊HBuilderX.exe文件創(chuàng)建桌面快捷方式。
小百科：
綠色軟件指一類小型軟件，多數(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)界面是下圖所示：
按照下圖所示可以創(chuàng)建一個(gè)新的名為demo1空白項(xiàng)目：
名為demo1的空白項(xiàng)目創(chuàng)建成功后的界面如下圖所示：
接下來在剛我們新建的demo1項(xiàng)目下創(chuàng)建名為helloworld的html文件
鼠標(biāo)右擊創(chuàng)建的demo1項(xiàng)目選擇新建在選擇.html文件：
在彈出的對(duì)話框里填入html文件的名稱：
編寫一段代碼：
運(yùn)行：
在瀏覽器上觀察效果：
好了，到這里html的開發(fā)環(huán)境搭建和HBuilderX的安裝教程結(jié)束了。
下面再給大家教一下怎樣修改HBuilderX的主題風(fēng)格，HBuilderX自身提供了修改軟件主題的功能，使用者可以自身需求和喜好修改HBuilderX的風(fēng)格。在喜歡自己喜歡的環(huán)境下做開發(fā)也是令人羨慕的一件事。
按照以下步驟可以修改HBuilderX的主題，默認(rèn)主題是綠柔，我們可以改成雅黑，雅藍(lán)或者自定義主題：
雅黑主題：
雅藍(lán)主題：
好了本節(jié)全部?jī)?nèi)容全部結(jié)束了，希望我準(zhǔn)備的內(nèi)容對(duì)你有所幫助
你的支持是我的最大動(dòng)力，若覺得我的教程還可以或?qū)δ阌袔椭鸀槲尹c(diǎn)贊加關(guān)注！謝謝！
有試過自己寫一個(gè)網(wǎng)頁嗎？聽上去難，其實(shí)操作起來很簡(jiǎn)單，不夸張地說——有手就行。來試試看吧。
1）一個(gè)網(wǎng)站由若干個(gè)網(wǎng)頁構(gòu)成，這些網(wǎng)頁是用超級(jí)鏈接有邏輯地聯(lián)系起來的。
2）網(wǎng)站由網(wǎng)址來識(shí)別和存取。
3）網(wǎng)頁需要上傳到網(wǎng)絡(luò)空間中，才能供瀏覽者訪問網(wǎng)站中的內(nèi)容。
即，一個(gè)網(wǎng)站需要有域名（網(wǎng)址）、網(wǎng)頁、網(wǎng)絡(luò)空間三部分。
1）語言
我們可以使用HTML來編寫網(wǎng)頁，HTML文件就是增加了標(biāo)記的普通文本文件。
可以簡(jiǎn)單地使用記事本來編寫一個(gè)網(wǎng)頁，只需將文件后綴名改為html，然后用瀏覽器打開。
現(xiàn)在編寫網(wǎng)頁的語言其實(shí)由三部分構(gòu)成：HTML,CSS,JavaScript。
1）HTML：早期編寫網(wǎng)站的語言。
2）CSS：負(fù)責(zé)網(wǎng)站內(nèi)容的表現(xiàn)形式。是在HTML原來的功能中分離出來的，這種分離可以使維護(hù)站點(diǎn)外觀更容易，也讓文檔代碼更簡(jiǎn)練，網(wǎng)頁加載快。
3）JavaScript：負(fù)責(zé)動(dòng)態(tài)部分。 使網(wǎng)頁更加生動(dòng)活潑，增加和用戶的互動(dòng)。
2）軟件
前面已經(jīng)講到，可以簡(jiǎn)單地使用記事本來編輯網(wǎng)頁。
這里在提出兩款編輯軟件：EditPlus，Dreamweaver。它們的能力是遞增的。
EditPlus:
EditPlus相比記事本的優(yōu)點(diǎn)是，可以帶有html語言的語法高亮，而且可以在這個(gè)編輯頁面中直接預(yù)覽網(wǎng)頁（點(diǎn)擊左上角部分的小地球圖標(biāo)）。
前面已經(jīng)提到，html語言文件就是增加了標(biāo)記的普通文本。
那么首先，我們就要了解標(biāo)記的作用：
一些簡(jiǎn)單的標(biāo)記，可以讓文本在網(wǎng)頁中以另一種形式呈現(xiàn)出來。
簡(jiǎn)單起見，接下來就使用記事本來編寫我們的網(wǎng)頁。
首先，新建一個(gè)文本文件（txt），給它起個(gè)隨便的名字。
然后用記事本打開它，輸入以上內(nèi)容，記得保存。
重命名文件，將文件后綴名改為html。
（<br>的意思是換行）
接著選擇打開方式為某個(gè)瀏覽器（系統(tǒng)默認(rèn)的瀏覽器就可以），就可以顯示出我們剛剛編寫的網(wǎng)頁了。
是不是感覺樸素地有點(diǎn)過頭了？沒關(guān)系，第一次嘛。
<html>
<body>
<br>
<br>
<br>
這是我們的第一個(gè)網(wǎng)頁。
<br>
<br>
<br>
</body>
</html>
這里我們用到了三個(gè)基本的標(biāo)簽：<html>、<body>和<br>。
其中<html>標(biāo)志著我們html文件的開始，<body>則表示正文內(nèi)容的開始。而</html>和</body>分別代表著對(duì)應(yīng)部分的結(jié)束。<body>和</body>之間的一行文本，則是我們要展現(xiàn)的內(nèi)容。而<br>則是換行，我們經(jīng)常用這個(gè)標(biāo)簽來調(diào)整網(wǎng)頁的上下距離。
增加一些其它的標(biāo)簽，讓我們的網(wǎng)頁更加生動(dòng)一點(diǎn)。
<!doctype html>
<html>
<title>第一個(gè)網(wǎng)頁</title>
<body
background = "宇宙.jpeg"
text = "#ccff66"
leftmargin = "300">
<h1>這是我們的第一個(gè)網(wǎng)頁！</h1>
<p>可以簡(jiǎn)單留作一個(gè)紀(jì)念。</p>
<p>但我們的征途，是星辰大海！</p>
</body>
</html>標(biāo)簽 | 功能 |
<!doctype html> | 標(biāo)識(shí)文件的語言標(biāo)準(zhǔn)，這里指的是html5 |
<title> | 網(wǎng)頁的標(biāo)題，即瀏覽器中頁面的名字 |
<h1> | 一級(jí)標(biāo)題 |
<p> | 一個(gè)段落的開始 |
在<body>標(biāo)記中，還可以控制一些全局的呈現(xiàn)效果：
標(biāo)識(shí)符 | 控制內(nèi)容 |
background | 背景圖片（需要在html文件相同目錄下，加入相應(yīng)的圖片文件） |
text | 文本內(nèi)容的顏色 |
leftmargin | 兩邊間距大小 |
下面是新的網(wǎng)頁：
位小伙伴好，黑客技術(shù)離不開代碼，做為一個(gè)滲透測(cè)試工程師，也一定要有一些代碼基礎(chǔ)。網(wǎng)絡(luò)安全行業(yè)，現(xiàn)在人才缺口大，再加上就業(yè)形勢(shì)又很嚴(yán)峻，介于這些，我們想培養(yǎng)一批優(yōu)秀的網(wǎng)絡(luò)安全人才，將對(duì)網(wǎng)絡(luò)安全行業(yè)、黑客技術(shù)，以及滲透測(cè)試技術(shù)感興趣的小白培養(yǎng)成精英。
跟隨我們，不管你有多白，都可以逐步進(jìn)入網(wǎng)絡(luò)安全行業(yè)，并最終在這個(gè)行業(yè)找到高薪職業(yè)。
然后呢，我要說一句，關(guān)于“黑客”可能并不是大多數(shù)人所了解的那樣。關(guān)于這些，可以參考：什么是黑客？什么是滲透測(cè)試？2分鐘看完這800多字你就懂了
那么，我們就先從代碼基礎(chǔ)——HTML的基本語方開始。
首先給大家描述三個(gè)概念：語言、程序、代碼之前的關(guān)系。
首先我們就要搞清楚什么是語言？可能說HTML語言不太好理解，那么我們想一想日常生活當(dāng)中比較常見的我們中國人彼此之間都會(huì)交流，是不是叫做漢語呢？所以說漢語就是一門語言。
那么這時(shí)候大家腦子里面就可以構(gòu)思一下啊什么樣的東西大致就是語言了。它應(yīng)該是一種溝通交流的一種方法的一個(gè)集合，包括我們?nèi)绾伟l(fā)音，如何寫字，這些字如何拼在一起，能夠產(chǎn)生具體的意義，有一定的含義，這些所有所有的集合在一起，形成了一套規(guī)則，然后大家都去遵循這套規(guī)則，就能夠彼此交流，那么這就叫做語言。
我們?cè)倥e一個(gè)例子，比如說英國人或者美國人，他們也有自己的語言，叫做英語，那么我在這里就是換了另一種語言，
了解了語言之后，我們就再來看一看，什么是代碼，那代碼跟我們?nèi)粘Ｉ钪械倪@種能夠聯(lián)系起來的又是什么東西呢？
我們還是拿漢語來做比喻哈，我們說漢語就是一種交流溝通的一種規(guī)則，它是一門語言。在大家小的時(shí)候肯定就會(huì)去學(xué)這門語言。這門學(xué)科在小學(xué)的時(shí)候就叫語文，對(duì)吧。那么我們上語文課的時(shí)候，就要學(xué)一些最基礎(chǔ)的有關(guān)語言的東西，比如說漢語拼音生字詞，當(dāng)時(shí)要記很多的這種生字生詞，那么他是不是可以理解成是我們漢語的一種最基本的那種組成結(jié)構(gòu)？
那么英語呢？我們?cè)趯W(xué)習(xí)英語的時(shí)候也會(huì)去記一些東西啊，就比如英文字母，緊接著就是背各種各樣的單詞，是不是當(dāng)我們單詞量有了一定的積累之后，我們對(duì)這個(gè)語言呢就掌握得更深刻了。
那么漢語要背生字詞，英語呢要背單詞，這些最基本的組成結(jié)構(gòu)。那么在程序語言里面，代碼就可以理解成是生字詞或者是單詞。
最后，我們?cè)賮砜纯词裁词浅绦颉Ｋ怯珊芏嗪芏嘁恍幸恍械拇a組成在一起，能夠完成一個(gè)綜合性的或者一個(gè)比較大的一個(gè)目標(biāo)的這樣的一個(gè)代碼的集合。
那么我們對(duì)照一下自然的這種語言，比如說漢語英語呢它是什么樣？好多的文字放在一起，是不是句子？或者說再多一點(diǎn)兒就是一篇文章。一篇文章甚至再大一點(diǎn)兒可能是一本書，
那么漢語能寫文章，用英語英文也能寫文章，這個(gè)文章可大可小，可能幾千字能大一點(diǎn)兒的一本書，也可以理解成是文章，那么用生字詞組成的這種集合就成了文章了。然后我們?cè)僬劤绦颍鞘裁茨兀繉?duì)照一下大家可能就理解了，它就是一個(gè)由代碼組成的文章。
那么回過頭來我們看我們要學(xué)的HTML語言，它也是一門語言，只不過呀它跟我們理解的漢語和英語有一定的區(qū)別。
漢語的主流是中國人之間交流的時(shí)候溝通的時(shí)候用的語言。那么英語呢應(yīng)用的比較廣泛，是一些英語國家之間彼此交流溝通的時(shí)候用的語言。那么HTML語言它也是一種語言，只不過它不是人和人之間去交流的語言，那么它到底是做什么用的呢？我們來看一下HTML的概念。
HTML中文名稱叫做超文本標(biāo)記語言，用HTML編寫的超文本文檔稱為HTML文檔。它能夠獨(dú)立于各種操作系統(tǒng)平臺(tái)，使用HTML語言將所需要表達(dá)的信息按某種規(guī)則寫成HTML文件，通過專用的瀏覽器來識(shí)別，并將這些HTML文件翻譯成可以識(shí)別的信息，即現(xiàn)在所見到的網(wǎng)頁。
那么從中我們能看到什么呢？首先我們知道它的中文名稱了。HTML叫做超文本標(biāo)記語言。
那么再往下我們看他提到了。
在這里瀏覽器是吧？提到了瀏覽器，那么這時(shí)候我們就知道了HTML語言啊它是一種與瀏覽器之間進(jìn)行交流的這么一種語言。就是我們?nèi)懸恍┐a，那么寫這些代碼的目的是什么呢？目的就是為了和瀏覽器去交流，只要我們寫的這個(gè)東西瀏覽器能看得懂，他就會(huì)根據(jù)我們寫的代碼呈現(xiàn)出最終的網(wǎng)頁。這就是HTML語言的一個(gè)基本概念。
（1）HTML中的各種元素都是通過標(biāo)記（標(biāo)簽）來表示。
（2）HTML當(dāng)中的標(biāo)簽分為單標(biāo)簽和雙標(biāo)簽。
（3）單標(biāo)簽格式為<名稱/>，雙標(biāo)簽格式為<名稱></名稱>。
（4）HTML對(duì)大小寫不敏感。
然后，我們可以對(duì)照一下HTML的基本結(jié)構(gòu)
（1）<html></html>
（2）<body></body>
（3）<head></head>
（4）<title></title>
首先，我們打開一個(gè)記事本。
單擊窗口圖片，在列表中找到記事本
然后在記事本中輸入<html></html>,這表示告訴瀏覽器，這是一個(gè)標(biāo)準(zhǔn)的HTML網(wǎng)頁。
在記事本中輸入<html></html>
那么為什么是兩個(gè)呢？前面1個(gè)，后面1個(gè)，這就有點(diǎn)類似于我們標(biāo)點(diǎn)符號(hào)里邊的括號(hào)，前面有一個(gè)開始，左半邊括號(hào)后面有一個(gè)結(jié)束。右半邊括號(hào)在這里也是前面的HTML表示網(wǎng)頁從這兒開始，那么后邊這個(gè)-html表示網(wǎng)頁呢至此結(jié)束。
那我們網(wǎng)頁這才剛開始就結(jié)束了呢，別著急，我們來看我在這里敲了幾次回車把它分開了。那么表示什么意思呀？表示中間呀是有很多內(nèi)容的，就是在網(wǎng)頁開始到網(wǎng)頁結(jié)束的中間是會(huì)有其他的東西的。
分開html開始和結(jié)束標(biāo)簽
我們接著往下看，第二個(gè)標(biāo)簽?zāi)亟凶?lt;body></body>,里面的單詞呢表示的是身體，那么它呢表示的就是網(wǎng)頁的主體，這個(gè)網(wǎng)頁的主體也屬于基本結(jié)構(gòu)，那么它在哪兒呢？注意啊網(wǎng)頁的主體也屬于網(wǎng)頁，那么它呀要放在<html></html>的中間。
將<body></body>標(biāo)簽插入到<body></body>中
下面，我們開始將第3個(gè)標(biāo)簽<head></head>寫入記事本，它代表頭部。他表示頭是吧？我們可以想象一下，這個(gè)腦袋注意它和身體之間到底應(yīng)該是個(gè)什么樣的關(guān)系呢？就我們想象有一個(gè)人站在那兒，腦袋應(yīng)該是在上面，身子應(yīng)該是在下邊哈。所以注意我們這個(gè)<head>標(biāo)簽呀要放在<body></body>標(biāo)簽的上方。注意！它們之間沒有包含關(guān)系！是一上一下的。
在<body></body>標(biāo)簽的上方插入<head></head>
最后一個(gè)叫做<title></title>這個(gè)單詞的意思呢叫做標(biāo)題。那么這個(gè)標(biāo)題你應(yīng)該放在哪？告訴大家，它屬于網(wǎng)頁的頭部，在頭部的里邊。
好了，整理一下格式
插入<title></title>標(biāo)簽
我們來看4個(gè)基本結(jié)構(gòu)的組成標(biāo)簽，我們都已經(jīng)寫到了這個(gè)文檔里面了。
大家需要注意的是，我寫的這種結(jié)構(gòu)啊這個(gè)包含的關(guān)系非常重要。最外邊是html表示網(wǎng)頁開始，到網(wǎng)頁結(jié)束，中間呢有頭、身子，還有標(biāo)題，那么頭和身子是一上一下的關(guān)系，那么標(biāo)題呢屬于頭部里邊兒。要記住這個(gè)格式！
那么到現(xiàn)在為止呀我們這個(gè)網(wǎng)頁的基本結(jié)構(gòu)就算是真正寫完了，我們把它保存一下。現(xiàn)在這個(gè)文檔里邊啊我們寫的是網(wǎng)頁的程序，雖然很簡(jiǎn)單，但它也是一個(gè)完整的網(wǎng)頁了。
那么既然是一個(gè)網(wǎng)頁，那我們?nèi)绾文艽蜷_它看這個(gè)網(wǎng)頁呢？注意這個(gè)HTML寫出來的這個(gè)程序啊需要放在HTML文件里邊，
那么我們?cè)趺醋瞿兀恐苯影堰@個(gè)記事本改后綴，他現(xiàn)在是個(gè).txt文檔，我們把這個(gè)文件的后面的txt擴(kuò)展名改成html。
將.txt格式改成.html格式
雙擊“網(wǎng)頁.html”，就會(huì)打開一個(gè)網(wǎng)頁。
用代碼創(chuàng)建的第1個(gè)初始網(wǎng)頁
果然是用瀏覽器打開的一個(gè)網(wǎng)頁，但是里邊呢還沒有東西是吧？空白的。
那么我們就來看一下，重新用記事本的方式把它打開。
我現(xiàn)在要想在里邊簡(jiǎn)單的寫點(diǎn)文字，哎我看看我這個(gè)網(wǎng)頁是否能夠正常顯示。
那么在哪兒能夠?qū)懳淖帜兀扛蠹艺f一下，
在我們這個(gè)基本結(jié)構(gòu)里啊有兩個(gè)地方是可以寫內(nèi)容的，一個(gè)就是<body></body>主體，另外一個(gè)呢就是<title></title>標(biāo)題，這兩個(gè)地方中是可以寫文字內(nèi)容的。
右鍵單擊這個(gè)html文件，選擇打開方式→打開其他應(yīng)用，然后找到記事本，用記事本打開。
用記事本打開html文件
然后在<title></title>中間寫上“我的第一個(gè)網(wǎng)頁”，<body></body>中間寫上“這里是主體文字”
標(biāo)簽中間插入文字，讓網(wǎng)頁中有內(nèi)容
好了，寫完之后我們?cè)俦４妗ｊP(guān)閉這個(gè)窗口，重新打開看一下效果。那么大家看這會(huì)兒在網(wǎng)頁里面顯示出來了。首先呢在網(wǎng)頁主體里邊顯示出了“這里是主體文字”，并且在頁面的上方的標(biāo)簽?zāi)仫@示的是“我的一個(gè)網(wǎng)頁”。
用代碼創(chuàng)建的第1個(gè)網(wǎng)頁
那么我們今天的講解你看懂了么？
帶你學(xué)代碼、學(xué)編程、學(xué)語言、學(xué)網(wǎng)絡(luò)安全、學(xué)黑客技術(shù)、學(xué)滲透技術(shù)，逐步成為網(wǎng)絡(luò)高手，拿到年薪30W+的offer，在網(wǎng)絡(luò)江湖，從小刀客變成大俠。如果感興趣，請(qǐng)關(guān)注我，私信我，可獲得更多學(xué)習(xí)資料。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
