首先要知道網(wǎng)站訪問(wèn)大概是什么個(gè)過(guò)程：

假設(shè)你在瀏覽器地址欄輸入這個(gè)" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > Web 建站技術(shù)中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什

Web 建站技術(shù)中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什

時(shí)間：2022-07-31 00:12:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-07-31 00:12:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

一個(gè)學(xué)期前我也和樓主差不多不知道這些都是啥，一個(gè)學(xué)期之后差不多都弄懂了，來(lái)講講自己的理解吧 > < 因?yàn)榻佑|的時(shí)間不是很長(zhǎng)，有錯(cuò)誤的地方歡迎指正~

首先要知道網(wǎng)站訪問(wèn)大概是什么個(gè)過(guò)程：

假設(shè)你在瀏覽器地址欄輸入這個(gè)問(wèn)題的地址

http://www.zhihu.com/question/22689579訪問(wèn)過(guò)程和下圖差不多，瀏覽器和服務(wù)器交流，服務(wù)器和數(shù)據(jù)庫(kù)交流（有時(shí)候數(shù)據(jù)庫(kù)就在服務(wù)器那臺(tái)機(jī)子上）


HTML 與 CSS

你家電腦拿到一個(gè) html （就是上圖 HTTP 響應(yīng)的 body 里的內(nèi)容）之后，就會(huì)對(duì)它進(jìn)行解析渲染。HTML 就是一種標(biāo)記語(yǔ)言。類比一下，大家在論壇上經(jīng)常會(huì)用一些代碼來(lái)添加富文本內(nèi)容，舉一些栗子：

這種論壇代碼也是一種標(biāo)記語(yǔ)言，HTML 的作用就和它差不多。服務(wù)器返回給你的html文件里面，寫的是一些代碼，大概是這樣的：

瀏覽器拿到這些代碼之后，分析一下給你渲染好頁(yè)面顯示出來(lái)，如果不用css，效果是這樣的，按照瀏覽器默認(rèn)的樣式顯示出列表、圖片、超鏈接、輸入框、按鈕等等：

是不是覺(jué)得默認(rèn)樣式有點(diǎn)看瞎狗眼呢……所以很多時(shí)候我們需要自定義樣式，現(xiàn)行通用的規(guī)定樣式的語(yǔ)言是CSS，我們可以用它寫一些定義樣式的代碼，然后在 html 文件里用一個(gè)<link>標(biāo)簽把這些規(guī)定樣式的 CSS 代碼與表達(dá)內(nèi)容語(yǔ)義的 HTML 代碼關(guān)聯(lián)起來(lái)，然后你就能看到一個(gè)符合人類正常審美的頁(yè)面了:

CSS 代碼的格式基本是

屬性:值比如本站頂上那個(gè)藍(lán)色的導(dǎo)航條，它的 CSS 大約是這樣的

第一個(gè)屬性對(duì)應(yīng)的代碼翻譯成人話，就是它的位置（position）應(yīng)該是不動(dòng)（fixed）的，瀏覽器會(huì)兢兢業(yè)業(yè)地去實(shí)現(xiàn)這段代碼要求實(shí)現(xiàn)的效果，所以你在頁(yè)面上翻來(lái)翻去頂上那個(gè)導(dǎo)航條都會(huì)死死地黏在窗口頂部不跟著滾動(dòng)。

再拿里面的其他幾個(gè)屬性做栗子解釋一下就是：

瀏覽器就會(huì)根據(jù)這些 CSS 代碼，“畫”出對(duì)應(yīng)的樣式。

HTML 5 與 XHTML

像人的語(yǔ)言一樣，網(wǎng)絡(luò)上的網(wǎng)頁(yè)里的 HTML 代碼也不一定是標(biāo)準(zhǔn)的，好比有時(shí)候你發(fā)音不太標(biāo)準(zhǔn)，別人會(huì)去猜測(cè)你說(shuō)的到底是什么一樣，有些時(shí)候前端程序猿不小心寫錯(cuò)了 HTML，瀏覽器也會(huì)試圖猜測(cè)他們?cè)瓉?lái)想寫的是什么，做對(duì)應(yīng)的渲染，而猜是要有一個(gè)常識(shí)做依據(jù)的。加上有些瀏覽器支持一些標(biāo)簽，有一些又不支持，以及其他混亂的情況，為了防止大家雞同鴨講，我們需要對(duì) HTML 代碼里能有什么標(biāo)簽，標(biāo)簽怎么寫，標(biāo)簽可以有什么屬性這些東西有一定的共識(shí)，建立一個(gè)通行的標(biāo)準(zhǔn)，HTML5 就是其中一個(gè)比較新的標(biāo)準(zhǔn)。這個(gè)標(biāo)準(zhǔn)新加了很多可以用的標(biāo)簽和屬性，然后各大瀏覽器也吭哧吭哧按這個(gè)標(biāo)準(zhǔn)去實(shí)現(xiàn)了很多這些新加的標(biāo)簽和屬性，本來(lái)前端程序員要寫一堆代碼去實(shí)現(xiàn)的效果，現(xiàn)在瀏覽器都給你實(shí)現(xiàn)好了，只要寫兩三行，調(diào)用一下瀏覽器給你實(shí)現(xiàn)的部分就能搞定，簡(jiǎn)單愉快，所以很多人都在熱情地推廣這個(gè)標(biāo)準(zhǔn)~（當(dāng)然新標(biāo)準(zhǔn)也不可能是完美的，總會(huì)有一些問(wèn)題，怕跑題這里按下不表~）

至于 XHTML，就是 HTML 的近親 XML 和 HTML 自己的雜交品種，對(duì)語(yǔ)法要求比較嚴(yán)格，并且為了兼容 XML，在語(yǔ)法上與 HTML 有一些不同~

JavaScript 與瀏覽器腳本

有了表示內(nèi)容和語(yǔ)義的 HTML，規(guī)定樣式的 CSS，得到的是一個(gè)靜態(tài)的頁(yè)面，沒(méi)什么動(dòng)畫（其實(shí)用 CSS 還是可以有一些動(dòng)畫的，不過(guò)這個(gè)跑題了），按 F5 才會(huì)刷新數(shù)據(jù)，都 21世紀(jì)了，這么呆板單調(diào)的網(wǎng)頁(yè)怎么能展現(xiàn)我大智人種族的創(chuàng)造性口胡！于是我們有了 Javascript（JS） 來(lái)給頁(yè)面添加一些動(dòng)態(tài)的效果，比如本站問(wèn)題的標(biāo)簽，鼠標(biāo)移上去會(huì)彈出一個(gè)小窗口，這個(gè)就是 JS 實(shí)現(xiàn)的效果啦。


瀏覽器都會(huì)幫你實(shí)現(xiàn)一些 JS 可以用的工具（函數(shù)，對(duì)象什么的），你只要寫一些 JS 的代碼，保存在 xxx.js 里，在 html 文件中用 <script> 關(guān)聯(lián)進(jìn)來(lái)就可以用了，像上圖這個(gè)效果應(yīng)該就包括了

  1. 鼠標(biāo)懸停到標(biāo)簽上時(shí)創(chuàng)建一個(gè)新的 <div> 小窗口
  2. 用 JS 向本站服務(wù)器發(fā)送一個(gè)請(qǐng)求，得到這個(gè)小窗口應(yīng)該顯示的數(shù)據(jù)，放在這個(gè)小窗口里（這就是所謂的AJAX，不用刷新就能與服務(wù)器進(jìn)行交互，更新頁(yè)面的一小部分~）
瀏覽器拿到這樣的代碼，就會(huì)解析并實(shí)現(xiàn)出相應(yīng)的效果，樓主問(wèn)的瀏覽器腳本，指的就是這樣子的代碼。其實(shí)用來(lái)寫瀏覽器腳本的，也不是非得JavaScript 不可，當(dāng)年還為到底用什么語(yǔ)言寫這種代碼有過(guò)一段戰(zhàn)火紛飛的時(shí)期，但現(xiàn)在塵埃落定，各大瀏覽器都默認(rèn)了：請(qǐng)用 JS 寫這些動(dòng)態(tài)效果的代碼給我解析~

以上就是前端部分的內(nèi)容，下面簡(jiǎn)述一下后端的東西吧> <

Web Server 和 Web Services

瀏覽器給服務(wù)器發(fā)一個(gè)請(qǐng)求，服務(wù)器不是一看就知道怎么響應(yīng)的。首先這些請(qǐng)求和響應(yīng)要有一個(gè)通用的寫法，也就是要有一個(gè)協(xié)議，常用的是 HTTP 協(xié)議。

像最前面的圖，服務(wù)器的響應(yīng)寫了一個(gè)狀態(tài)碼 200 OK ，是 HTTP 協(xié)議里約定俗成的一個(gè)東西，服務(wù)器寫 200 OK 在響應(yīng)里，表示“你請(qǐng)求的這個(gè)東西我有”，如果是404 Not Found，就是“你請(qǐng)求的這個(gè)東西我這里沒(méi)有”。

HTTP 響應(yīng)里還包括很多東西，比如 Content-type 表示服務(wù)器發(fā)過(guò)來(lái)的文件類型是什么（文本？動(dòng)畫？圖片？音頻？），這樣發(fā)過(guò)去了人家瀏覽器好知道怎么展示給用戶看。人家服務(wù)器怎么知道按協(xié)議要寫什么東西進(jìn)去呢，這就是 Web Server 干活的時(shí)候了。

形象化一下HTTP響應(yīng)，大概就長(zhǎng)這樣：

再上個(gè)錘子，瀏覽器和服務(wù)器之間請(qǐng)求響應(yīng)的過(guò)程大致是長(zhǎng)這樣的，右下角的那些東西就是由 Web Server 生成的（服務(wù)器腳本可以做一些改動(dòng)，但這些一般是 Web Server 的份內(nèi)活）：


再比如說(shuō)很多時(shí)候你訪問(wèn)一個(gè)網(wǎng)站，瀏覽器里輸?shù)牡刂凡](méi)有寫明你請(qǐng)求的文件，比如這個(gè)問(wèn)題的地址是：

http://www.zhihu.com/question/22689579但本站的服務(wù)器其實(shí)返回了一個(gè)html給你，服務(wù)器怎么知道這個(gè)地址對(duì)應(yīng)要返回什么樣的 html 代碼給你的？也是 Web Server 干的活。

除了瀏覽器輸?shù)刂非没剀囘@種赤裸裸的訪問(wèn)，客戶端與服務(wù)器的交互還有很多種，比如：

還有其他應(yīng)用軟件與服務(wù)器的交互，比如：

從這些栗子里可以看出，客戶端與服務(wù)器的交互的主體、客體、載體是五花八門的：

像前面提到的 HTML 需要有一定標(biāo)準(zhǔn)一樣，為了防止混亂和雞同鴨講，我們又需要先對(duì)這些機(jī)器需要怎么交互達(dá)成一定共識(shí)，再讓它們進(jìn)行交流。人與人之間通信，需要先有一種大家都認(rèn)識(shí)的寫法（比如簡(jiǎn)體字/繁體字）和一種彼此都懂的語(yǔ)言（比如普通話/廣東話）。要讓這些形形色色的機(jī)器能夠通過(guò)網(wǎng)絡(luò)進(jìn)行交互，我們就需要指明一種協(xié)議（比如 HTTP/HTTPS）和一種數(shù)據(jù)封裝格式（比如 HTML/XML），Web Server 提供的 Web Service，指的就是這種協(xié)議+格式的交流體系。不過(guò) Web Service 的生態(tài)系統(tǒng)和 HTML 的標(biāo)準(zhǔn)不一樣，用戶可以選擇的協(xié)議和數(shù)據(jù)封裝格式更多，普通的網(wǎng)站訪問(wèn)用的 HTTP + HTML 只是其中一種，一些封閉系統(tǒng)內(nèi)的交流還可以自己定義一個(gè)協(xié)議和格式來(lái)用（比如 QQ）。

Web Service 傳輸?shù)臄?shù)據(jù)再經(jīng)由本地客戶端（瀏覽器、QQ/微信，網(wǎng)游客戶端等）的分析渲染，就能夠以普通人能夠理解的形式展現(xiàn)出來(lái)。此外還有一些 Web Service 并不是為普通用戶設(shè)計(jì)的，像前面提到的微博API，是用來(lái)給程序猿進(jìn)行二次開(kāi)發(fā)的~

除了提供 Web Service， Web Server 還會(huì)兼顧很多功能，包括提供緩存，平衡負(fù)載，這樣在訪問(wèn)量比較大的時(shí)候能有有條不紊地接客。常見(jiàn)的現(xiàn)成的 Web Server 有開(kāi)源的 Apache、Nginx和微軟的IIS，你也可以用一些工具（比如 Node.js ）自己定制一個(gè)。因?yàn)?Web Server 需要比較好的性能，所以投產(chǎn)時(shí)用的 Web Server 通常是C/C++/Java寫的，但是其實(shí)很多語(yǔ)言都可以寫，而且配合上語(yǔ)言底層的優(yōu)化和好的模型，其他語(yǔ)言寫的 Web Server也可以有不錯(cuò)的表現(xiàn)。

PHP ，服務(wù)器腳本，Web Framework

開(kāi)頭那張圖里服務(wù)器接到請(qǐng)求之后可以給訪客發(fā)送對(duì)應(yīng)的文件，但21世紀(jì)的服務(wù)器怎么可能只會(huì)“接請(qǐng)求-發(fā)文件”這么弱智的一招呢，人家還可以處理你上傳來(lái)的文件的！還可以接受你發(fā)過(guò)來(lái)的各種請(qǐng)求，去操作服務(wù)器本地的文件or數(shù)據(jù)庫(kù)的！要干這些事，自然服務(wù)器那邊也少不了要有代碼了，這些代碼就是服務(wù)器腳本。前面說(shuō)的 Web Service 傳輸?shù)臄?shù)據(jù)，主要也是由服務(wù)器腳本生成，再交由 Web Server ，按照某種協(xié)議套好整個(gè)響應(yīng)的格式，返回給客戶端的。

同一個(gè)網(wǎng)址，每個(gè)人看到的頁(yè)面不一定是一樣的，比如本站首頁(yè)的網(wǎng)址都是

http://www.zhihu.com/但是沒(méi)登陸和登陸之后看到的東西不一樣，登陸之后每個(gè)人看到的導(dǎo)航欄的用戶信息，關(guān)注的動(dòng)態(tài)，都不一樣。服務(wù)器腳本可以對(duì)這些不同的狀態(tài)，生成不同的頁(yè)面，交給 Web Server 返回給瀏覽器。

本站的主頁(yè)給大家看到的 html 整體來(lái)說(shuō)是差不多的，都有導(dǎo)航欄，左邊是關(guān)注的動(dòng)態(tài)，右邊是廣告和邊欄，每一塊的整體構(gòu)造大同小異，只是一些地方內(nèi)容有所區(qū)別。服務(wù)器腳本就是利用已知的數(shù)據(jù)，在這些因人而異的地方填入相應(yīng)的內(nèi)容，生成給每個(gè)人看的頁(yè)面。

比如我的主頁(yè)，導(dǎo)航欄右邊的頭像和名字跟別人看到的不一樣，就是因?yàn)檫@塊地方有一個(gè)放圖片的<img>標(biāo)簽和一個(gè)寫名字的<span>標(biāo)簽，服務(wù)器腳本在查詢本地的數(shù)據(jù)之后給我返回的頁(yè)面里<img>的標(biāo)簽填了我頭像的圖片鏈接，<span>標(biāo)簽里填了我的名字，給別人的頁(yè)面就填其他鏈接、其他名字，這樣每個(gè)人看到的頁(yè)面就不一樣了。


PHP 就是一種常見(jiàn)的用來(lái)寫服務(wù)器腳本的語(yǔ)言，其實(shí)只要是能拿來(lái)寫大家傳輸數(shù)據(jù)的通用接口（CGI）的語(yǔ)言都可以用來(lái)寫服務(wù)器腳本（也就是說(shuō)幾乎所有編程語(yǔ)言都可以寫 = =b），只是因?yàn)楝F(xiàn)成工具的豐富程度和專攻程度不一樣，所以有一些語(yǔ)言在寫服務(wù)器端腳本的時(shí)候會(huì)比較熱門。

為了方便，我們?cè)趯懛?wù)器腳本的時(shí)候，通常還會(huì)用個(gè)同語(yǔ)言寫的 Web Framework 來(lái)處理各種細(xì)節(jié)，防御一些常見(jiàn)的攻擊，提供跨站認(rèn)證（比如用已有的微博賬號(hào)注冊(cè)其他網(wǎng)站）的接口，利用cookie處理登陸狀態(tài)和用戶設(shè)置，生成網(wǎng)頁(yè)模版之類的。如果你用 C# 或者 Visual Basic 寫服務(wù)器腳本，就可以用 http://ASP.NET 這個(gè)框架實(shí)現(xiàn)這些功能，幫你省點(diǎn)麻煩。不過(guò)現(xiàn)在不少人是反過(guò)來(lái)為了一個(gè)好用的 Web Framework 去選擇它對(duì)應(yīng)的服務(wù)器腳本語(yǔ)言的。

一個(gè)普通網(wǎng)站訪問(wèn)的過(guò)程

簡(jiǎn)單概括一下，對(duì)于我們普通的網(wǎng)站訪問(wèn)，涉及到的技術(shù)就是：

  1. 用戶操作瀏覽器訪問(wèn)，瀏覽器向服務(wù)器發(fā)出一個(gè) HTTP 請(qǐng)求；
  2. 服務(wù)器接收到 HTTP 請(qǐng)求，Web Server 進(jìn)行相應(yīng)的初步處理，使用服務(wù)器腳本生成頁(yè)面；
  3. 服務(wù)器腳本（利用Web Framework）調(diào)用本地和客戶端傳來(lái)的數(shù)據(jù)，生成頁(yè)面；
  4. Web Server 將生成的頁(yè)面作為 HTTP 響應(yīng)的 body，根據(jù)不同的處理結(jié)果生成 HTTP header，發(fā)回給客戶端；
  5. 客戶端（瀏覽器）接收到 HTTP 響應(yīng)，通常第一個(gè)請(qǐng)求得到的 HTTP 響應(yīng)的 body 里是 HTML 代碼，于是對(duì) HTML 代碼開(kāi)始解析；
  6. 解析過(guò)程中遇到引用的服務(wù)器上的資源（額外的 CSS、JS代碼，圖片、音視頻，附件等），再向 Web Server 發(fā)送請(qǐng)求，Web Server 找到對(duì)應(yīng)的文件，發(fā)送回來(lái)；
  7. 瀏覽器解析 HTML 包含的內(nèi)容，用得到的 CSS 代碼進(jìn)行外觀上的進(jìn)一步渲染，JS 代碼也可能會(huì)對(duì)外觀進(jìn)行一定的處理；
  8. 用戶與頁(yè)面交互（點(diǎn)擊，懸停等等）時(shí)，JS 代碼對(duì)此作出一定的反應(yīng)，添加特效與動(dòng)畫；
  9. 交互的過(guò)程中可能需要向服務(wù)器索取或提交額外的數(shù)據(jù)（局部的刷新，類似微博的新消息通知），一般不是跳轉(zhuǎn)就是通過(guò) JS 代碼（響應(yīng)某個(gè)動(dòng)作或者定時(shí)）向 Web Server 發(fā)送請(qǐng)求，Web Server 再用服務(wù)器腳本進(jìn)行處理（生成資源or寫入數(shù)據(jù)之類的），把資源返回給客戶端，客戶端用得到的資源來(lái)實(shí)現(xiàn)動(dòng)態(tài)效果或其他改變。
注意這只是小網(wǎng)站里比較常見(jiàn)的模型，大網(wǎng)站為了解決規(guī)模問(wèn)題還會(huì)有很多處理，每個(gè)環(huán)節(jié)都會(huì)有一些細(xì)微的差異，中間還會(huì)使用各種各樣的工具減輕服務(wù)器的壓力，提高效率，方便日常維護(hù)~

延伸閱讀 —— 那些看花眼的名詞

為了方便調(diào)試，很多 Web Framework 會(huì)自帶一個(gè)簡(jiǎn)單的 Web Server，或者有些 Web Server 會(huì)自帶一個(gè)簡(jiǎn)單的 Web Framework ，實(shí)際部署到服務(wù)器上開(kāi)放使用的時(shí)候?yàn)榱诵阅芑蛘甙踩榷喾矫娴目紤]，可以把內(nèi)置的 Web Server 換成其他的，比如 Apache 或者 Nginx （舉個(gè)栗子，本站用的是 Tornado 做 Framework，Server 換成了 Nginx，見(jiàn)

本站使用了哪些框架和開(kāi)源庫(kù)？）。如果是開(kāi)源的東西，還可以在遵守開(kāi)源協(xié)議的前提下自己改一下再用~

因?yàn)楹蠖瞬幌袂岸艘呀?jīng)有 HTML + CSS + JS 這樣的既定事實(shí)標(biāo)準(zhǔn)，服務(wù)器腳本與 Web Framework 的選擇很多，所以新手會(huì)聽(tīng)到很多眼花繚亂的技術(shù)名詞的地方多在這里~ 舉一些栗子，早年常見(jiàn)的服務(wù)器端語(yǔ)言有：

現(xiàn)在在這方面的應(yīng)用熱起來(lái)的語(yǔ)言有

幾種常見(jiàn)的架構(gòu)包括：

雖然可以用的語(yǔ)言和所屬體系五花八門，其實(shí)服務(wù)器端程序要做的事情本質(zhì)上都差不多的，就好比自然世界中要表達(dá)“吃過(guò)了沒(méi)”這句話的意思，你可以用各種各樣的語(yǔ)言在各種各樣的場(chǎng)景里表達(dá)出來(lái)~

關(guān)鍵詞：技術(shù)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉