目錄

• 1. 基礎(chǔ)
• • 網(wǎng)頁(yè)的制作方法
  • 簡(jiǎn)單的網(wǎng)頁(yè)加載過(guò)程
  • 引用路徑

1. 基礎(chǔ)

在這一章里，我們將對(duì)網(wǎng)頁(yè)應(yīng)用的開(kāi)發(fā)和原理有一個(gè)大體上的了解。

本章可能是最無(wú)聊的章節(jié)，因?yàn)楸菊虏话瑢?shí)踐內(nèi)容，而且概念略微復(fù)雜比較勸退。了解的不是很透徹也不會(huì)影響網(wǎng)頁(yè)制作，各位初學(xué)者了解一下就好！

網(wǎng)頁(yè)的制作方法

很遺憾地告訴大家，得寫(xiě)代碼。

網(wǎng)頁(yè)的內(nèi)容、形式和交互，完全是由HTML、CSS和JS三組代碼指定和控制的。因此，完成一個(gè)網(wǎng)頁(yè)應(yīng)用的主要任務(wù)，就是用代碼將這個(gè)應(yīng)用的所有內(nèi)容和邏輯表達(dá)出來(lái)。

有人就會(huì)問(wèn)了，難道沒(méi)有可視化的工具幫助我們像繪圖一樣繪制網(wǎng)頁(yè)嗎？當(dāng)然有，但是效果不好。當(dāng)下流行的網(wǎng)頁(yè)制作軟件還是Adobe公司的Dreamweaver，它確實(shí)可以快速有效地捏一個(gè)網(wǎng)頁(yè)，但是我認(rèn)為用可視化工具畫(huà)圖做出來(lái)的網(wǎng)頁(yè)，有如下幾點(diǎn)問(wèn)題：

• 很難很好地兼容各種移動(dòng)端平臺(tái)
• 很難實(shí)現(xiàn)靈活的交互邏輯
• 很難使用各種組件庫(kù)
• 不能深入地理解網(wǎng)頁(yè)，阻止你進(jìn)一步地設(shè)計(jì)出更好的網(wǎng)頁(yè)

其實(shí)我也沒(méi)好好研究過(guò)這些做網(wǎng)頁(yè)的軟件，當(dāng)年我?guī)煾狄矝](méi)怎么跟我提。總的來(lái)說(shuō)，代碼還是要寫(xiě)的。就好像傳說(shuō)中的$L_A{T}^{E}X$一樣，網(wǎng)頁(yè)不是一種所見(jiàn)即所得的東西，我們需要用抽象的代碼去表述形象化的界面和交互模式。

簡(jiǎn)單的網(wǎng)頁(yè)加載過(guò)程

本節(jié)是原理性的闡述，對(duì)初學(xué)者來(lái)說(shuō)相對(duì)復(fù)雜，建議暫時(shí)先快速瀏覽一下并繼續(xù)學(xué)習(xí)后面的實(shí)踐章節(jié)。

假設(shè)你在電腦上的Google Chrome瀏覽器中訪問(wèn)了某個(gè)公司的網(wǎng)頁(yè)，讓我們了解一下，你輸入網(wǎng)址按下回車的那一瞬間發(fā)生了什么。

DNS 尋址：瀏覽器根據(jù)你輸入的URL中的域名部分查詢DNS服務(wù)器，找到域名對(duì)應(yīng)的主機(jī)IP地址。

是不是有超多不懂的？沒(méi)關(guān)系，這里就是解釋概念的地方！

• IP地址：就像你家地址一樣，IP地址就是某一臺(tái)主機(jī)在互聯(lián)網(wǎng)上的地址，通常是一系列數(shù)字。
• 域名：域名同樣相當(dāng)于互聯(lián)網(wǎng)上的地址。如果IP地址類似經(jīng)緯度，那么域名就類似于街道地址了。相對(duì)于IP地址來(lái)說(shuō)，域名更加方便人類識(shí)讀。
• DNS：Domain Name System，專門負(fù)責(zé)提供域名和IP的對(duì)應(yīng)查詢。
• URL：Uniform Resource Locator，統(tǒng)一資源定位符，說(shuō)白了就是網(wǎng)址。簡(jiǎn)單來(lái)說(shuō)，如果你想要找到互聯(lián)網(wǎng)上的某個(gè)特定的資源（文件），光有目標(biāo)主機(jī)的地址可不行，你還需要知道目標(biāo)主機(jī)的訪問(wèn)協(xié)議、目標(biāo)文件的位置（路由）和參數(shù)等等。URL的固定格式像這樣：協(xié)議://域名或IP地址:端口號(hào)/路由?查詢參數(shù)字符串。舉個(gè)例子：https://baike.baidu.com/item/統(tǒng)一資源定位系統(tǒng) 這就是一個(gè)典型的URL，不過(guò)它省略了端口，并且沒(méi)有查詢字符串。

現(xiàn)在再看一眼第一步，是不是感覺(jué)更清晰一點(diǎn)？如果不懂的話也沒(méi)有關(guān)系，本章內(nèi)容不怎么影響后面的網(wǎng)頁(yè)制作部分！

請(qǐng)求：瀏覽器向目標(biāo)地址發(fā)起http或者h(yuǎn)ttps協(xié)議的網(wǎng)絡(luò)請(qǐng)求（一個(gè)數(shù)據(jù)包），包含URL等信息，等待服務(wù)器回復(fù)。

• http：HyperText Transfer Protocol，超文本傳輸協(xié)議。所謂協(xié)議，就是把數(shù)據(jù)打包成一種傳輸雙方都能夠看懂的形式。
• https：Hyper Text Transfer Protocol over SecureSocket Layer，簡(jiǎn)單理解就是加了一層加密算法的http協(xié)議，在這里不做詳細(xì)論述。
• 服務(wù)器：其實(shí)就是一臺(tái)主機(jī)（電腦），只不過(guò)它是目標(biāo)資源（比如某個(gè)網(wǎng)頁(yè)）的存儲(chǔ)位置。

服務(wù)器響應(yīng)：服務(wù)器上運(yùn)行的Web服務(wù)軟件根據(jù)http協(xié)議返回URL中指定的資源（或者錯(cuò)誤碼），在正常訪問(wèn)網(wǎng)頁(yè)的時(shí)候通常是一個(gè)HTML格式的內(nèi)容。對(duì)于靜態(tài)網(wǎng)頁(yè)來(lái)說(shuō)，就是一個(gè).html文件的內(nèi)容（沒(méi)錯(cuò)，你在上一章里面新建的index.html就是一個(gè).html文件）。

• Web服務(wù)軟件：一種服務(wù)端軟件，在服務(wù)器上長(zhǎng)期保持運(yùn)行，負(fù)責(zé)響應(yīng)和處理http或者h(yuǎn)ttps請(qǐng)求。
• HTML：（這是下一章的內(nèi)容）一種描述網(wǎng)頁(yè)內(nèi)容的代碼語(yǔ)言。
• 靜態(tài)網(wǎng)頁(yè)：指頁(yè)面的所有內(nèi)容是由一個(gè)文件指定的，訪問(wèn)網(wǎng)頁(yè)的時(shí)候等效于訪問(wèn)目標(biāo)文件（通常是.html文件）。相對(duì)應(yīng)的：
• 動(dòng)態(tài)網(wǎng)頁(yè)：指頁(yè)面的內(nèi)容是動(dòng)態(tài)生成的。通常是服務(wù)端程序在處理訪問(wèn)請(qǐng)求的時(shí)候，根據(jù)請(qǐng)求中包含的信息（例如用戶身份信息）生成的HTML代碼。
  P.S. 關(guān)于動(dòng)態(tài)網(wǎng)頁(yè)的更多細(xì)節(jié)，會(huì)在7. 網(wǎng)絡(luò)章節(jié)討論。

瀏覽器加載其它資源：服務(wù)器響應(yīng)的HTML代碼中可能有調(diào)用別的資源（例如JS代碼，CSS代碼或者各種圖片等等），瀏覽器會(huì)根據(jù)HTML中的設(shè)定自動(dòng)加載對(duì)應(yīng)的資源，步驟與1-4步相同。

瀏覽器渲染：瀏覽器根據(jù)HTML代碼指定的網(wǎng)頁(yè)內(nèi)容和CSS代碼指定的網(wǎng)頁(yè)樣式，以及JS代碼指定的網(wǎng)頁(yè)交互邏輯進(jìn)行頁(yè)面渲染，把代碼轉(zhuǎn)化為UI界面，于是我們就看到了一個(gè)網(wǎng)頁(yè)。

• 瀏覽器：瀏覽器是一個(gè)本地應(yīng)用程序，它根據(jù)一定的標(biāo)準(zhǔn)引導(dǎo)頁(yè)面加載和渲染頁(yè)面，其中的技術(shù)和細(xì)節(jié)極其復(fù)雜。
• CSS：Cascading Style Sheets，層疊樣式表。用于設(shè)定HTML中各個(gè)元素的顯示樣式。我們會(huì)在第三章中詳細(xì)學(xué)習(xí)。
• JS：Javascript，屬于Web的編程語(yǔ)言，在Web應(yīng)用中用于實(shí)現(xiàn)用戶和網(wǎng)頁(yè)應(yīng)用的交互邏輯。我們會(huì)在第四章中詳細(xì)學(xué)習(xí)。
• UI：User Interface，也就是我們看到的用戶界面。

一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)加載過(guò)程到這里就結(jié)束了，更多的相關(guān)內(nèi)容會(huì)在7. 網(wǎng)絡(luò)和9. 發(fā)布章節(jié)中討論。

引用路徑

在網(wǎng)頁(yè)中引用別的資源（例如圖片或CSS文件等），都涉及到引用路徑的問(wèn)題。基本規(guī)則如下：

• /表示從根目錄開(kāi)始
• ./表示當(dāng)前路徑下
• ../表示上一級(jí)目錄下

例如，在protocol://domain/web/index.html中引用protocal://domain/logo.png這張圖片，可以使用的引用方式有：

• /logo.png 根目錄下
• ../logo.png 上一級(jí)目錄下

總結(jié)

以上是生活随笔為你收集整理的【九层之台】Web开发教程：1. 基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。