發(fā)布網(wǎng)站
獲取主機服務和域名
主機服務——在主機服務提供商的Web服務器上租用文件空間躁锁,服務器會提供Web用戶需求的內(nèi)容崔挖。
域名——一個可以讓人們訪問的獨一無二的地址串塑,可以從域名注冊商租界域名。
一個文件傳輸協(xié)議程序——用主機服務商提供的信息登錄web服務器娃承,然后就可以看到本地文件和服務器文件奏夫,并且可以進行傳輸。
尋找主機服務和域名的建議
需要主機服務和域名購買的操作历筝,只需要在網(wǎng)上搜索“主機服務”和“域名”就可以了酗昼。
有的公司會同時提供這兩種服務
一些免費的服務提供商:Neocities、Blogspot梳猪、Wordpress麻削。
使用在線工具Github或Google App Engine在線發(fā)布網(wǎng)站的兩個工具。免費春弥,但是使用的功能有所限制呛哟。
使用CodePen這樣基于Web的集成開發(fā)環(huán)境仿真一個網(wǎng)頁的開發(fā)環(huán)境和視覺效果,對于學習很有幫助匿沛。
通過Github發(fā)布1.注冊github賬號
2.新建一個倉庫(repository)
3.給自己的倉庫取名4.將網(wǎng)站文件夾內(nèi)容拖拽到資源庫(repository)扫责,再點擊Commit changes。
5.將瀏覽器轉(zhuǎn)到自己定義的倉庫名在線查看自己的網(wǎng)站逃呼。
(注:這一步在我實際操作過程中發(fā)現(xiàn)網(wǎng)頁并沒有按照預想的形式呈現(xiàn)出來公给,具體原因正在排查。)出錯的原因找到了蜘渣,在將代碼上傳到github倉庫時淌铐,index.html文件不能包含在文件夾中,否則的話無法正常顯示蔫缸,然后index.html文件中對css和js樣式的路徑引用也需要修改腿准,否則的話也會導致樣式設置不成功。簡單來說就是本地寫好的路徑在上傳到github上的時候不統(tǒng)一,導致自己的網(wǎng)頁無法正常顯示吐葱,所以只要修改路徑街望,問題就解決了。
萬維網(wǎng)是如何工作的弟跑?
客戶端和服務器
連接到互聯(lián)網(wǎng)的計算機被稱為客戶端和服務器灾前。
客戶端是典型的Web用戶入網(wǎng)設備,如鏈接了wifi的電腦和設備上可聯(lián)網(wǎng)的軟件孟辑。
服務器是存儲網(wǎng)頁哎甲,站點和引用的計算機。當客戶端設備想要獲取一個網(wǎng)頁時饲嗽,一份網(wǎng)頁的拷貝將從服務器上下載到客戶端上以供顯示炭玫。
其他部分
僅有客戶端和服務器并不能完成全部工作,還有其他部分貌虾。
網(wǎng)絡鏈接:允許在互聯(lián)網(wǎng)上發(fā)送和接收的數(shù)據(jù)吞加。
TCP/IP協(xié)議:傳輸控制協(xié)議和因特網(wǎng)互聯(lián)協(xié)議是定義數(shù)據(jù)如何傳輸?shù)耐ㄐ艆f(xié)議。類似于去商店購物所使用的交通方式尽狠,比如汽車和自行車衔憨。
DNS:域名系統(tǒng)服務器。域名系統(tǒng)服務器像是一本網(wǎng)站通訊錄袄膏,當在網(wǎng)站中輸入一個網(wǎng)址巫财,瀏覽器獲取網(wǎng)頁前會查看域名系統(tǒng)。瀏覽器需要找到存放你想要的網(wǎng)頁服務器哩陕,才能發(fā)送HTTP請求到正確的地方平项。
HTTP:超文本傳輸協(xié)議是一個定義客戶端和服務器交流語言的協(xié)議。
組成文件:一個網(wǎng)頁有許多文件組成悍及,這些文件有兩種類型
代碼:網(wǎng)頁大體由HTML闽瓢、CSS、Javascript組成心赶,不過也包含其他技術扣讼。
資源:其他組成網(wǎng)頁的東西,如音樂缨叫、圖像椭符、視頻等。
到底發(fā)生了什么
當在瀏覽器中輸入一個網(wǎng)址的時候:
1.瀏覽器在域名系統(tǒng)(DNS)服務器上找出存放網(wǎng)頁服務器的實際地址耻姥。2.瀏覽器發(fā)送HTTP請求到服務器拷貝一份網(wǎng)頁到客戶端销钝,消息以及客戶端和服務器之間的數(shù)據(jù)傳輸都是用TCP/IP協(xié)議傳輸?shù)摹?.服務器同意客戶端的請求之后,會返回一個“200 OK”信息琐簇,并將網(wǎng)頁文件以數(shù)據(jù)包的形式傳輸?shù)綖g覽器蒸健,這意味著可以查看這個網(wǎng)頁。4.瀏覽器將接收到的數(shù)據(jù)包聚集成完整的網(wǎng)頁并呈現(xiàn)出來。
解析組成文件的順序
當瀏覽器想服務器發(fā)送請求獲取HTML文件時似忧,HTML文件通常包含<link>和<script>元素渣叛,這些元素分別指向了外部的CSS樣式表和JavaScript腳本文件。了解這些文件被瀏覽器解析的順序是很重要的:
瀏覽器首先解析HTML文件盯捌,并從中識別出所有的<link>和<script>元素淳衙,獲取他們指向的外部文件的鏈接。
繼續(xù)解析HTML文件的同時饺著,瀏覽器根據(jù)外部的鏈接向服務器發(fā)送請求獲取并解析CSS文件和JavaScript腳本文件箫攀。
接著瀏覽器會給解析后的 HTML 文件生成一個 DOM樹(在內(nèi)存中),會給解析后的 CSS 文件生成一個 CSSOM樹(在內(nèi)存中)瓶籽,并且會編譯和執(zhí)行解析后的 JavaScript 腳本文件匠童。
DOM樹(文檔對象模型樹):
DOM樹是一種用于表示HTML或XML文檔結(jié)構(gòu)的樹狀數(shù)據(jù)結(jié)構(gòu)埂材。每個HTML或XML文檔都由元素(如標簽塑顺、文本、屬性等)組成俏险,這些元素按照它們在文檔中的層次結(jié)構(gòu)排列严拒。DOM樹將這些元素以及它們之間的關系表示為樹狀結(jié)構(gòu)。每個HTML或XML標簽都在DOM樹中表示為一個節(jié)點(Node)竖独,這些節(jié)點之間的父子關系反映了它們在文檔中的嵌套關系裤唠。開發(fā)者可以使用JavaScript來操作DOM樹,以便動態(tài)地更新和改變網(wǎng)頁的內(nèi)容和結(jié)構(gòu)莹痢。
CSSOM樹(CSS對象模型樹):
CSSOM樹是一種用于表示CSS樣式的樹狀數(shù)據(jù)結(jié)構(gòu)种蘸。它包含了網(wǎng)頁中所有的CSS規(guī)則、選擇器和樣式屬性竞膳。與DOM樹類似航瞭,CSSOM樹也是樹狀結(jié)構(gòu),其中每個CSS規(guī)則被表示為一個節(jié)點坦辟,這些節(jié)點之間的關系反映了CSS規(guī)則的嵌套和繼承關系刊侯。瀏覽器使用CSSOM樹來計算每個元素的最終樣式,以便正確呈現(xiàn)網(wǎng)頁锉走。
伴隨著構(gòu)建 DOM 樹滨彻、應用 CSSOM 樹的樣式、以及執(zhí)行 JavaScript 腳本文件挪蹭,瀏覽器會在屏幕上繪制出網(wǎng)頁的界面亭饵;用戶看到網(wǎng)頁界面也就可以跟網(wǎng)頁進行交互了。