日更967

發(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)境和視覺效果,對于學習很有幫助匿沛。

JSFiddle

Glitch

JSBin

CodePen

通過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)頁進行交互了。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末梁厉,一起剝皮案震驚了整個濱河市冬骚,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖只冻,帶你破解...
    沈念sama閱讀 222,627評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件庇麦,死亡現(xiàn)場離奇詭異,居然都是意外死亡喜德,警方通過查閱死者的電腦和手機山橄,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來舍悯,“玉大人航棱,你說我怎么就攤上這事∶瘸模” “怎么了饮醇?”我有些...
    開封第一講書人閱讀 169,346評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長秕豫。 經(jīng)常有香客問我朴艰,道長,這世上最難降的妖魔是什么混移? 我笑而不...
    開封第一講書人閱讀 60,097評論 1 300
  • 正文 為了忘掉前任祠墅,我火速辦了婚禮,結(jié)果婚禮上歌径,老公的妹妹穿的比我還像新娘毁嗦。我一直安慰自己,他們只是感情好回铛,可當我...
    茶點故事閱讀 69,100評論 6 398
  • 文/花漫 我一把揭開白布狗准。 她就那樣靜靜地躺著,像睡著了一般茵肃。 火紅的嫁衣襯著肌膚如雪腔长。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,696評論 1 312
  • 那天免姿,我揣著相機與錄音饼酿,去河邊找鬼。 笑死胚膊,一個胖子當著我的面吹牛故俐,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播紊婉,決...
    沈念sama閱讀 41,165評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼药版,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了喻犁?” 一聲冷哼從身側(cè)響起槽片,我...
    開封第一講書人閱讀 40,108評論 0 277
  • 序言:老撾萬榮一對情侶失蹤何缓,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后还栓,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體碌廓,經(jīng)...
    沈念sama閱讀 46,646評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,709評論 3 342
  • 正文 我和宋清朗相戀三年剩盒,在試婚紗的時候發(fā)現(xiàn)自己被綠了谷婆。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,861評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡辽聊,死狀恐怖纪挎,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情跟匆,我是刑警寧澤异袄,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站玛臂,受9級特大地震影響烤蜕,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜垢揩,卻給世界環(huán)境...
    茶點故事閱讀 42,196評論 3 336
  • 文/蒙蒙 一玖绿、第九天 我趴在偏房一處隱蔽的房頂上張望敛瓷。 院中可真熱鬧叁巨,春花似錦、人聲如沸呐籽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽狡蝶。三九已至庶橱,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間贪惹,已是汗流浹背苏章。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留奏瞬,地道東北人枫绅。 一個月前我還...
    沈念sama閱讀 49,287評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像硼端,于是被迫代替她去往敵國和親并淋。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,860評論 2 361

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

  • Building a Shop with Sub-Second Page Loads: Lessons Learn...
    treelake閱讀 2,339評論 1 7
  • 1珍昨、從輸入url到瀏覽器呈現(xiàn)頁面中間經(jīng)歷了什么县耽? 在輸入url的時候句喷,會進行本地歷史記錄和標簽頁的查詢,提供模糊查...
    林思念閱讀 2,525評論 2 24
  • 一兔毙、js的數(shù)據(jù)類型 值類型(基本類型):字符串(String)唾琼、數(shù)字(Number)、布爾(Boolean)澎剥、對空...
    sskingfly閱讀 200評論 0 0
  • HTTP HTTP:超文本傳輸協(xié)議(HTTP父叙,HyperText Transfer Protocol)是互聯(lián)網(wǎng)上應...
    Moon_f3e1閱讀 228評論 0 0
  • 開始上網(wǎng),輸入 url 當我們開始輸入 url 的時候肴裙,瀏覽器就已經(jīng)開始匹配 url 趾唱,從歷史紀錄,書簽等蜻懦,找到已...
    白日夢想家x閱讀 423評論 0 0