0027 編程實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的網(wǎng)站要做哪些工作

前面第一部分的教程結(jié)束了,很多朋友都催著寫后面的教程敦捧,可是须板,學(xué)哥也要上班的,也要養(yǎng)家糊口的兢卵,所以只能業(yè)務(wù)時(shí)間進(jìn)行創(chuàng)作习瑰,因此更新時(shí)間上可能無法保證很及時(shí),請(qǐng)各位朋友們多多諒解秽荤。學(xué)哥也爭(zhēng)取寫的更詳細(xì)一些甜奄,方便很多零基礎(chǔ)的同學(xué)能夠跨過第一個(gè)門檻,從而進(jìn)入編程的美妙世界窃款。

002701.jpg

教程規(guī)劃

第二部分:html+css靜態(tài)網(wǎng)站和阿里云上線
學(xué)習(xí)做網(wǎng)站程序课兄,學(xué)習(xí)html構(gòu)造網(wǎng)頁內(nèi)容布局,css來控制網(wǎng)頁顯示效果
學(xué)會(huì)做好自己的個(gè)人簡(jiǎn)歷網(wǎng)站晨继,學(xué)習(xí)如何設(shè)計(jì)烟阐,開發(fā),測(cè)試網(wǎng)頁
學(xué)會(huì)在本地運(yùn)行網(wǎng)頁踱稍,以及如何將網(wǎng)站部署到阿里云
詳細(xì)說明一下規(guī)劃:
首先介紹一些網(wǎng)站基礎(chǔ)原理曲饱,將一個(gè)網(wǎng)站如何訪問的原理說明清楚
然后讓大家了解一個(gè)最簡(jiǎn)單的helloworld網(wǎng)頁是如何一行一行寫出來,并可以呈現(xiàn)在瀏覽器中
再接著就是介紹關(guān)于html當(dāng)中的各種各樣的標(biāo)簽珠月,具體的用法
然后以完成一個(gè)個(gè)人簡(jiǎn)歷網(wǎng)站為實(shí)際例子來做講解說明
逐漸一個(gè)一個(gè)頁面的完成整個(gè)網(wǎng)站的設(shè)計(jì)扩淀,開發(fā),部署
同時(shí)引入css將整個(gè)網(wǎng)站進(jìn)行美化和優(yōu)化啤挎,看起來更美觀
詳細(xì)講解css一些常用的標(biāo)簽屬性參數(shù)等等
最后是將完成的網(wǎng)站部署到公網(wǎng)上
具體要說明如何在阿里云購買一個(gè)服務(wù)器驻谆,并安裝一些必要的服務(wù)器軟件
然后將代碼部署上去,如何進(jìn)行網(wǎng)站測(cè)試
最后說明如何在阿里云購買一個(gè)域名庆聘,并進(jìn)行域名備案胜臊,然后將域名解析到對(duì)應(yīng)的服務(wù)器
最后通過瀏覽器測(cè)試部署好的網(wǎng)站,完成整個(gè)項(xiàng)目
當(dāng)然伙判,系列課程少不了練習(xí)題目象对,練習(xí)題目就是模仿實(shí)現(xiàn)一個(gè)真實(shí)的公司網(wǎng)站,如下圖:

002702.jpg

什么是網(wǎng)站

網(wǎng)站的概念宴抚,絕大多數(shù)人應(yīng)該都理解勒魔。在電腦或者手機(jī)上甫煞,打開一個(gè)瀏覽器軟件或者App,然后在地址欄中輸入一個(gè)網(wǎng)站地址冠绢,例如www.toutiao.com抚吠,然后輸入回車,就可以看到網(wǎng)站的內(nèi)容了弟胀。
網(wǎng)站都有哪些概念或者元素呢楷力?用下面這個(gè)圖來描述一個(gè)經(jīng)典的網(wǎng)站概念:

002703.jpg

下面,我們按照交互次序來解釋對(duì)應(yīng)的概念孵户。
1.客戶端系統(tǒng)

要訪問一個(gè)網(wǎng)站萧朝,一般是在某個(gè)操作系統(tǒng)里面訪問,那這個(gè)操作系統(tǒng)一般在某個(gè)硬件設(shè)備上夏哭。
例如可以是一個(gè)臺(tái)式機(jī)安裝了蘋果系統(tǒng)剪勿,也可以是一個(gè)筆記本安裝了windows系統(tǒng),還可以是一個(gè)手機(jī)安裝的是安卓系統(tǒng)或者蘋果手機(jī)系統(tǒng)方庭。
一個(gè)經(jīng)典的例子是一個(gè)筆記本安裝了Windows 7操作系統(tǒng):

002704.jpg

2.瀏覽器軟件

訪問網(wǎng)站,一般都是通過瀏覽器酱固。
瀏覽器軟件常用的比如windows里面的IE, 或者chrome 械念,或者Firefox,或者蘋果系統(tǒng)里面的safari瀏覽器运悲。
瀏覽器軟件有很多種龄减,不同的瀏覽器軟件都必須遵循一定的規(guī)范,這樣可以讓網(wǎng)站在不同的瀏覽器中都能正常顯示班眯,但是也有很多瀏覽器會(huì)有自己定義的一些規(guī)范希停,碰到這種規(guī)范就一定要小心,要正確盡量使用標(biāo)準(zhǔn)的規(guī)范署隘,讓自己的網(wǎng)站在盡可能多的瀏覽器軟件中都能正常訪問宠能。
有的客戶端系統(tǒng)安裝的時(shí)候會(huì)打包帶著瀏覽器,這樣就無需安裝瀏覽器軟件磁餐。
大多數(shù)時(shí)候违崇,我們都需要下載安裝我們喜歡的瀏覽器軟件。
建議大家在自己的電腦上安裝Chrome瀏覽器诊霹,因?yàn)橛盟鼇碚{(diào)試我們開發(fā)的網(wǎng)站很方便羞延。

002705.jpg

3.域名

一般要訪問一個(gè)網(wǎng)站,都是通過域名進(jìn)行訪問脾还。
域名就是網(wǎng)絡(luò)上一臺(tái)服務(wù)器或者一群服務(wù)器對(duì)外提供的一個(gè)地址索引伴箩。
就好比:上海市人民公園 就是一個(gè)域名 www.renmingongyuan.com,它具體的地址是 南京西路231號(hào) 對(duì)應(yīng)的就是服務(wù)器的IP地址鄙漏,假設(shè)是121.38.234.124 嗤谚,一般很難記住一個(gè)IP地址棺蛛,但比較容易記住域名。
域名的用途是通過名稱進(jìn)行索引到對(duì)應(yīng)的網(wǎng)絡(luò)IP地址呵恢。

4.網(wǎng)絡(luò)連接

一般訪問網(wǎng)站都不是訪問本機(jī)操作系統(tǒng)中的程序鞠值,都是訪問互聯(lián)網(wǎng)絡(luò)上的一個(gè)機(jī)器上的程序,這就需要客戶端系統(tǒng)能夠和網(wǎng)絡(luò)進(jìn)行連接渗钉,確保物理連接層面是連接著的彤恶,這樣瀏覽器才可以訪問對(duì)應(yīng)的機(jī)器上的網(wǎng)站程序。
當(dāng)然鳄橘,剛開始測(cè)試網(wǎng)站的時(shí)候声离,是可以放在自己機(jī)器電腦上進(jìn)行測(cè)試,測(cè)試完成后再部署到網(wǎng)絡(luò)機(jī)器上進(jìn)行測(cè)試瘫怜。
網(wǎng)絡(luò)連接可以簡(jiǎn)單分為局域網(wǎng)連接和互聯(lián)網(wǎng)連接术徊。
局域網(wǎng)連接就是電腦和電腦之間組成的網(wǎng)絡(luò)是一個(gè)訪問受到限制的網(wǎng)絡(luò),也就是一般不能在很遠(yuǎn)的地方進(jìn)行訪問鲸湃,基本上都在一個(gè)比較靠近的物理空間之中赠涮。例如一個(gè)公司內(nèi)部的網(wǎng)絡(luò),不能上網(wǎng)的網(wǎng)絡(luò)暗挑。
互聯(lián)網(wǎng)連接就是電腦和電腦之間可以通過網(wǎng)絡(luò)運(yùn)營商提供的互聯(lián)網(wǎng)接入方式進(jìn)行連接的網(wǎng)絡(luò)笋除。例如家里通過光纖和撥號(hào)設(shè)備進(jìn)行連接到互聯(lián)網(wǎng)的網(wǎng)絡(luò)。俗稱可以上網(wǎng)炸裆。也就是可以訪問公網(wǎng)垃它,也就是互聯(lián)網(wǎng)公共網(wǎng)絡(luò)。

002706.jpg

5.Http網(wǎng)絡(luò)協(xié)議

從客戶端系統(tǒng)的瀏覽器上烹看,輸入一個(gè)域名国拇,然后瀏覽器通過一個(gè)數(shù)據(jù)協(xié)議向互聯(lián)網(wǎng)絡(luò)進(jìn)行索引定位到對(duì)應(yīng)的服務(wù)器。
然后服務(wù)器上面的web服務(wù)程序根據(jù)訪問請(qǐng)求惯殊,找到對(duì)應(yīng)的網(wǎng)站頁面程序酱吝,解釋運(yùn)行之后,將生成的網(wǎng)站內(nèi)容數(shù)據(jù)通過網(wǎng)絡(luò)返回給瀏覽器土思。
瀏覽器收到這些數(shù)據(jù)之后掉瞳,按照html語法進(jìn)行描繪并顯示在瀏覽器當(dāng)中,就是我們看到的網(wǎng)站內(nèi)容了浪漠。
這當(dāng)中計(jì)算機(jī)瀏覽器和服務(wù)器web服務(wù)程序之間進(jìn)行通訊陕习,遵循的協(xié)議就叫Http協(xié)議。
當(dāng)然址愿,這只是一個(gè)最簡(jiǎn)單的解釋该镣,真正的計(jì)算機(jī)網(wǎng)絡(luò)協(xié)議一共有7層,適用于不同的理解模式响谓。
具體大家可以去搜索“分層網(wǎng)絡(luò)協(xié)議”损合,進(jìn)行學(xué)習(xí)省艳。這里我們只要知道http網(wǎng)絡(luò)協(xié)議即可。

002707.jpg

6.服務(wù)器

服務(wù)器就是一臺(tái)能提供網(wǎng)站服務(wù)的機(jī)器設(shè)備嫁审。
它可以是一臺(tái)物理機(jī)器跋炕,也可以是一臺(tái)虛擬機(jī)器。
關(guān)鍵在于它上面安裝了操作系統(tǒng)律适,操作系統(tǒng)提供了一些服務(wù)程序辐烂,對(duì)外提供web服務(wù)。
操作系統(tǒng)可能是Windows系統(tǒng)捂贿,也可能是linux系統(tǒng)纠修,也可能是unix系統(tǒng)。
一個(gè)經(jīng)典的服務(wù)器是阿里云的一臺(tái)安裝了ubuntu操作系統(tǒng)的虛擬機(jī)厂僧。

002708.jpg

7.web服務(wù)程序

在服務(wù)器上一般要對(duì)外提供網(wǎng)站訪問服務(wù)扣草,都需要安裝web服務(wù)程序。
比如windows系統(tǒng)上的IIS服務(wù)程序颜屠,linux系統(tǒng)上的Apache服務(wù)程序辰妙。
將網(wǎng)頁代碼部署到www服務(wù)程序規(guī)定的目錄下,我們就可以從互聯(lián)網(wǎng)訪問這些網(wǎng)頁了甫窟。
一個(gè)經(jīng)典的web服務(wù)程序是Nginx服務(wù)程序上岗。

002709.jpg

8.網(wǎng)站程序文件

不同的網(wǎng)站頁面,意味著是用不同的網(wǎng)站程序文件來實(shí)現(xiàn)的蕴坪。
一個(gè)登錄網(wǎng)站頁面,和一個(gè)產(chǎn)品詳細(xì)介紹網(wǎng)站頁面敬锐,肯定是不一樣的文件背传。
將這些網(wǎng)站程序文件部署到www服務(wù)程序規(guī)定的目錄下,才能對(duì)外提供網(wǎng)站服務(wù)台夺。
然后不同的客戶端通過瀏覽器訪問該網(wǎng)站時(shí)径玖,看到的才是一樣的內(nèi)容。
網(wǎng)站程序文件颤介,一般分為靜態(tài)程序文件和動(dòng)態(tài)程序文件梳星。
靜態(tài)程序文件,就是里面的輸出內(nèi)容是固定的滚朵,主要是以.html文件結(jié)尾的程序文件冤灾。例如 index.html 或者 product.html。
動(dòng)態(tài)程序文件辕近,就是根據(jù)情況輸出的內(nèi)容是變化的韵吨,主要是根據(jù)web服務(wù)程序提供的可用程序語言來實(shí)現(xiàn)。
例如login.php文件 或者 logout.aspx文件 等等移宅。
一個(gè)經(jīng)典的網(wǎng)站程序文件就是用helloworld.html归粉。

002710.png

9.html語法

瀏覽器收到服務(wù)器web服務(wù)程序返回的結(jié)果數(shù)據(jù)之后椿疗,要按照html語法格式進(jìn)行分析,然后將對(duì)應(yīng)的頁面元素描繪到瀏覽器當(dāng)中糠悼,就是我們看到的內(nèi)容了届榄。
例如<title>網(wǎng)頁標(biāo)題</title>,在瀏覽器的標(biāo)題欄就是現(xiàn)實(shí)“網(wǎng)頁標(biāo)題”倔喂。
例如<table><tr><td>表格元素</td></tr></table>铝条,在瀏覽器里面就會(huì)出現(xiàn)一個(gè)表格。
后面滴劲,我們主要就是要學(xué)習(xí)通過html語法攻晒,將我們要呈現(xiàn)的頁面按照html語法寫成網(wǎng)站程序文件。
綜合上面的說明班挖,一個(gè)經(jīng)典的網(wǎng)站原理圖就是下面這樣的:

002711.jpg

實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的靜態(tài)網(wǎng)站要做哪些工作

根據(jù)不同的需求鲁捏,要做的事情不同。

如果這個(gè)靜態(tài)網(wǎng)站只需要本機(jī)訪問:
1.用編輯器軟件編寫html網(wǎng)頁文件
2.打開瀏覽器訪問這個(gè)文件

如果這個(gè)靜態(tài)網(wǎng)站只需要局域網(wǎng)訪問:
1.用編輯器軟件編寫html網(wǎng)頁文件
2.在本機(jī)安裝web服務(wù)程序
3.將html網(wǎng)頁文件復(fù)制到web服務(wù)程序指定目錄下
4.在局域網(wǎng)中任何一臺(tái)電腦萧芙,打開瀏覽器訪問本機(jī)IP地址的這個(gè)文件

如果這個(gè)靜態(tài)網(wǎng)站需要互聯(lián)網(wǎng)訪問:
1.用編輯器軟件編寫html網(wǎng)頁文件
2.在一臺(tái)具有公網(wǎng)地址的服務(wù)器上安裝web服務(wù)程序给梅,例如購買一個(gè)阿里云服務(wù)器
3.將html網(wǎng)頁文件復(fù)制到該服務(wù)器的web服務(wù)程序指定目錄下
4.任何一臺(tái)能上互聯(lián)網(wǎng)的電腦,打開瀏覽器訪問公網(wǎng)IP地址的這個(gè)文件

如果這個(gè)靜態(tài)網(wǎng)站需要互聯(lián)網(wǎng)域名訪問:
1.用編輯器軟件編寫html網(wǎng)頁文件
2.在一臺(tái)具有公網(wǎng)地址的服務(wù)器上安裝web服務(wù)程序双揪,例如購買一個(gè)阿里云服務(wù)器
3.將html網(wǎng)頁文件復(fù)制到該服務(wù)器的web服務(wù)程序指定目錄下
4.任何一臺(tái)能上互聯(lián)網(wǎng)的電腦动羽,打開瀏覽器訪問公網(wǎng)IP地址的這個(gè)文件
5.購買一個(gè)域名,將域名解析到具有公網(wǎng)地址的服務(wù)器IP地址
6.任何一臺(tái)能上互聯(lián)網(wǎng)的電腦渔期,打開瀏覽器訪問域名的這個(gè)文件

后續(xù)运吓,這4種形式,都會(huì)進(jìn)行詳細(xì)講解說明疯趟。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末拘哨,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子信峻,更是在濱河造成了極大的恐慌倦青,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,635評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件盹舞,死亡現(xiàn)場(chǎng)離奇詭異产镐,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)踢步,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門癣亚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人获印,你說我怎么就攤上這事逃糟。” “怎么了?”我有些...
    開封第一講書人閱讀 168,083評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵绰咽,是天一觀的道長菇肃。 經(jīng)常有香客問我,道長取募,這世上最難降的妖魔是什么琐谤? 我笑而不...
    開封第一講書人閱讀 59,640評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮玩敏,結(jié)果婚禮上斗忌,老公的妹妹穿的比我還像新娘。我一直安慰自己旺聚,他們只是感情好织阳,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評(píng)論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著砰粹,像睡著了一般唧躲。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上碱璃,一...
    開封第一講書人閱讀 52,262評(píng)論 1 308
  • 那天弄痹,我揣著相機(jī)與錄音,去河邊找鬼嵌器。 笑死肛真,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的爽航。 我是一名探鬼主播蚓让,決...
    沈念sama閱讀 40,833評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼讥珍!你這毒婦竟也來了历极?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,736評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤串述,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后寞肖,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體纲酗,經(jīng)...
    沈念sama閱讀 46,280評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評(píng)論 3 340
  • 正文 我和宋清朗相戀三年新蟆,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了觅赊。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,503評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡琼稻,死狀恐怖吮螺,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤鸠补,帶...
    沈念sama閱讀 36,185評(píng)論 5 350
  • 正文 年R本政府宣布萝风,位于F島的核電站,受9級(jí)特大地震影響紫岩,放射性物質(zhì)發(fā)生泄漏规惰。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評(píng)論 3 333
  • 文/蒙蒙 一泉蝌、第九天 我趴在偏房一處隱蔽的房頂上張望歇万。 院中可真熱鬧,春花似錦勋陪、人聲如沸贪磺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽寒锚。三九已至,卻和暖如春呻粹,著一層夾襖步出監(jiān)牢的瞬間壕曼,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評(píng)論 1 272
  • 我被黑心中介騙來泰國打工等浊, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留腮郊,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,909評(píng)論 3 376
  • 正文 我出身青樓筹燕,卻偏偏與公主長得像轧飞,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子撒踪,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理过咬,服務(wù)發(fā)現(xiàn),斷路器制妄,智...
    卡卡羅2017閱讀 134,699評(píng)論 18 139
  • 先討論許多應(yīng)用協(xié)議都要使用的域名系統(tǒng)掸绞。在介紹了文件傳送協(xié)議和遠(yuǎn)程登錄協(xié)議后,就重點(diǎn)介紹萬維網(wǎng)的工作原理及其主要協(xié)議...
    dmmy大印閱讀 1,065評(píng)論 0 1
  • 1耕捞、二叉樹的數(shù)據(jù)結(jié)構(gòu) 2衔掸、二叉樹的創(chuàng)建 樹的結(jié)構(gòu): 輸入:AB#C##D## ; 3、二叉樹的遍歷 二叉樹的遍歷分...
    xiaoyanhan閱讀 898評(píng)論 0 0