前面第一部分的教程結(jié)束了,很多朋友都催著寫后面的教程敦捧,可是须板,學(xué)哥也要上班的,也要養(yǎng)家糊口的兢卵,所以只能業(yè)務(wù)時(shí)間進(jìn)行創(chuàng)作习瑰,因此更新時(shí)間上可能無法保證很及時(shí),請(qǐng)各位朋友們多多諒解秽荤。學(xué)哥也爭(zhēng)取寫的更詳細(xì)一些甜奄,方便很多零基礎(chǔ)的同學(xué)能夠跨過第一個(gè)門檻,從而進(jìn)入編程的美妙世界窃款。
教程規(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)站,如下圖:
什么是網(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)站概念:
下面,我們按照交互次序來解釋對(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):
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)站很方便羞延。
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ò)。
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é)議即可。
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ī)厂僧。
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ù)程序上岗。
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归粉。
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)站原理圖就是下面這樣的:
實(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ì)講解說明疯趟。