你知道HTML、CSS、JS、Services、PHP、ASP.NET 是什么來頭么？
首先我們要知道訪問網(wǎng)站的流程是什么?大家每天也訪問。
假設(shè)大家在瀏覽器地址欄輸入這個(gè)問題的地址。
https://www.頭條.com/question/22689579
HTML 與 CSS
當(dāng)自己的電腦得到一個(gè) html頁面 (圖中HTTP 響應(yīng)中 body 里的內(nèi)容)之后，就會(huì)對它進(jìn)行解析。HTML 就是一種超文本標(biāo)記語言。給大家舉一些實(shí)例看看：
- [img]圖片[/img] 用來粘貼圖片
- [url]超鏈接[/url] 用來粘貼地址
服務(wù)器返回給你的html文件，寫的是一些代碼，大概是這樣的：
瀏覽器拿到這些代碼之后，將分析渲染好頁面顯示出來，如果不用css，效果如下圖，按照瀏覽器默認(rèn)的樣式顯示出表格，超鏈接等。
大家有么有覺得默認(rèn)樣式有點(diǎn)ε(┬┬﹏┬┬)3……所以很多情況我們需要自定義這些樣式，目前通用的樣式語言就是CSS，我們用CSS寫一些自定義樣式的代碼，之后在 HTML 文件里用一個(gè)標(biāo)簽把這些規(guī)定樣式的 CSS 與表達(dá)內(nèi)容語義的 HTML 代碼鏈接起來，然后大家就能看到以往所謂的正常的頁面，是不是很厲害呢~~~
CSS 代碼的基本格式
屬性:值
比如頭條的分布框架排版，它的 CSS ，截圖大體如下：
把第一個(gè)屬性對應(yīng)的代碼翻譯一下的話，背景圖像位置偏移量(background - position)在圖像距離頁面內(nèi)左上角水平1px垂直2px處，瀏覽器會(huì)規(guī)規(guī)矩矩的地實(shí)現(xiàn)代碼要求的效果，所以當(dāng)大家在頁面上下滾動(dòng)時(shí)，頂上那個(gè)導(dǎo)航條都會(huì)牢牢地黏在窗口頂部固定的位置，不發(fā)生偏移。
再講講其他幾個(gè)屬性解釋一下：
- left 為240px 說明這個(gè)模塊需緊貼著窗口的左240px處
- width 和 height 指定模塊的寬和高
- border 指明這個(gè)模塊的邊界范圍
換句話說，就是瀏覽器就會(huì)根據(jù)這些 CSS 代碼，自動(dòng)描繪出對應(yīng)的樣式。
HTML 5 與 XHTML
像語言一樣，大家在網(wǎng)頁里的 發(fā)現(xiàn)的HTML 代碼也不一定是標(biāo)準(zhǔn)的，就好比有時(shí)候發(fā)音不太標(biāo)準(zhǔn)，別人就會(huì)去猜測你說的是什么一樣，sometimes，程序猿不小心寫錯(cuò)了一個(gè) HTML代碼，瀏覽器也會(huì)試圖猜測這些人類原來到底想寫什么，之后做出對應(yīng)的處理，而這里的猜是要有一個(gè)常識做依據(jù)的。加上有些瀏覽器的功能不一，有的支持一些標(biāo)簽，有一些又不支持，還有一些混亂的情況。
為了防止大家混淆，我們要對 HTML 代碼里的標(biāo)簽，標(biāo)簽how寫，標(biāo)簽可以hava屬性這些東西，建立一個(gè)符合的標(biāo)準(zhǔn)，HTML5 就是其中一個(gè)比較新的標(biāo)準(zhǔn)。其中新加了很多可以用的標(biāo)簽和屬性，然后各大瀏覽器也大刀闊斧的按這個(gè)標(biāo)準(zhǔn)去實(shí)現(xiàn)了很多新標(biāo)簽和屬性。
本來前端程序員要寫一堆代碼去實(shí)現(xiàn)的效果，現(xiàn)在瀏覽器都給實(shí)現(xiàn)了，只需程序猿寫兩三行，調(diào)用一下瀏覽器就給搞定了，十分簡單，所以很多人都愿意去推廣這個(gè)標(biāo)準(zhǔn)~(當(dāng)然新標(biāo)準(zhǔn)也不可能是完美的，也會(huì)有一些問題，有興趣的朋友可以去查查)
至于 XHTML，就是 HTML 的表親，XML 和 HTML 自己的雜交系列，對語法要求十分的嚴(yán)格，為了兼容 XML，在語法上與 HTML 有一些不同。
JavaScript 與瀏覽器腳本
有了表示內(nèi)容和語義的 HTML，規(guī)定樣式的 CSS，得到的是靜態(tài)的頁面，沒什么動(dòng)畫，雖然用 CSS 可以有一些動(dòng)畫，需要刷新數(shù)據(jù)才可以，這么呆板單調(diào)的網(wǎng)頁怎么能展現(xiàn)我大智人種族的創(chuàng)造性!于是我們創(chuàng)造了 Javascript(JS) 來給頁面添加一些動(dòng)態(tài)的效果，比如頭條的發(fā)表的標(biāo)簽，鼠標(biāo)移上去會(huì)彈出一個(gè)小窗口，這個(gè)就是 JS 實(shí)現(xiàn)的效果啦。
瀏覽器都會(huì)幫大家實(shí)現(xiàn)一些Javascript可以用的工具(函數(shù)，對象等)，只要寫一些 JS 的代碼，保存在 xxx.js 里，在 html 文件中用 <script>關(guān)聯(lián)進(jìn)來就可以用了，像上圖這個(gè)效果應(yīng)該就包括了
- 鼠標(biāo)懸停到標(biāo)簽上時(shí)創(chuàng)建一個(gè)新的<div> 小窗口
- 用 JS 向頭條服務(wù)器發(fā)送一個(gè)請求，得到這個(gè)小窗口應(yīng)該顯示的數(shù)據(jù)，放在這個(gè)小窗口里(這就是所謂的AJAX，不用刷新就能與服務(wù)器進(jìn)行交互，更新頁面的一小部分~)
瀏覽器拿到這樣的代碼，就會(huì)解析并實(shí)現(xiàn)出相應(yīng)的效果。其實(shí)用來寫瀏覽器腳本的，也不是非得JavaScript 不可，不過是各大瀏覽器都默認(rèn)了：請用 JS 寫這些動(dòng)態(tài)效果的代碼給我解析~
以上就是前端部分的內(nèi)容，下面簡述一下后端的東西吧> <
Web Server 和 Web Services
瀏覽器給服務(wù)器發(fā)一個(gè)請求，服務(wù)器不是一看就知道怎么響應(yīng)的。首先這些請求和響應(yīng)要有一個(gè)通用的寫法，也就是要有一個(gè)協(xié)議，常用的是 HTTP 協(xié)議。
像最前面的圖，服務(wù)器的響應(yīng)寫了一個(gè)狀態(tài)碼 200 OK ，是 HTTP 協(xié)議里約定俗成的一個(gè)東西，服務(wù)器寫 200 OK 在響應(yīng)里，表示“你請求的這個(gè)東西我有”，如果是404 Not Found，就是“你請求的這個(gè)東西我這里沒有”。
HTTP 響應(yīng)里還包括很多東西，比如 Content-type 表示服務(wù)器發(fā)過來的文件類型是什么(文本?動(dòng)畫?圖片?音頻?)，這樣發(fā)過去了人家瀏覽器好知道怎么展示給用戶看。人家服務(wù)器怎么知道按協(xié)議要寫什么東西進(jìn)去呢，這就是 Web Server 干活的時(shí)候了。
形象化一下HTTP響應(yīng)，大概就長這樣：
再上個(gè)錘子，瀏覽器和服務(wù)器之間請求響應(yīng)的過程大致是長這樣的，右下角的那些東西就是由 Web Server 生成的(服務(wù)器腳本可以做一些改動(dòng)，但這些一般是 Web Server 的份內(nèi)活)：
再比如說很多時(shí)候你訪問一個(gè)網(wǎng)站，瀏覽器里輸?shù)牡刂凡]有寫明你請求的文件，比如這個(gè)問題的地址是：
http://www.頭條.com/question/22689579
但頭條的服務(wù)器其實(shí)返回了一個(gè)html給你，服務(wù)器怎么知道這個(gè)地址對應(yīng)要返回什么樣的 html 代碼給你的?也是 Web Server 干的活。
除了瀏覽器輸?shù)刂非没剀囘@種赤裸裸的訪問，客戶端與服務(wù)器的交互還有很多種，比如：
- 前面提到的用 JS 完成的 AJAX，有點(diǎn)像瀏覽器和服務(wù)器之間的悄悄話~
還有其他應(yīng)用軟件與服務(wù)器的交互，比如：
- 微信、QQ 與騰訊的服務(wù)器的交互
- 網(wǎng)游客戶端與網(wǎng)游公司服務(wù)器的交互
- 搜索引擎用來搜集網(wǎng)頁信息的程序(爬蟲)與各種各樣的網(wǎng)站服務(wù)器的交互
- 只要你知道用什么地址訪問、怎樣訪問人家的服務(wù)器，并且有相應(yīng)權(quán)限，你也可以自己寫一些程序去和他們的服務(wù)器交互(比如用微博API - 新浪微博API獲取微博，開發(fā)第三方應(yīng)用或者做數(shù)據(jù)分析)。
從這些例子里可以看出，客戶端與服務(wù)器的交互的主體、客體、載體是五花八門的：
- 服務(wù)器可以是大型機(jī)也可以是個(gè)人電腦，只要能跑相應(yīng)的程序就行
- 客戶端像前面舉的栗子里一樣，可以是各種軟件，而且這些軟件不一定運(yùn)行在個(gè)人電腦上，也可以是手機(jī)、平板、智能穿戴設(shè)備等等
- 有時(shí)候不是傳生成好的 HTML 或者其他服務(wù)器上已經(jīng)有的文件，而是傳輸經(jīng)過一定邏輯處理后生成的字符串或者其他各種封裝好的數(shù)據(jù)
像前面提到的 HTML 需要有一定標(biāo)準(zhǔn)一樣，為了防止混亂和雞同鴨講，我們又需要先對這些機(jī)器需要怎么交互達(dá)成一定共識，再讓它們進(jìn)行交流。人與人之間通信，需要先有一種大家都認(rèn)識的寫法(比如簡體字/繁體字)和一種彼此都懂的語言(比如普通話/廣東話)。
要讓這些形形色色的機(jī)器能夠通過網(wǎng)絡(luò)進(jìn)行交互，我們就需要指明一種協(xié)議(比如 HTTP/HTTPS)和一種數(shù)據(jù)封裝格式(比如 HTML/XML)，Web Server 提供的 Web Service，指的就是這種協(xié)議+格式的交流體系。不過 Web Service 的生態(tài)系統(tǒng)和 HTML 的標(biāo)準(zhǔn)不一樣，用戶可以選擇的協(xié)議和數(shù)據(jù)封裝格式更多，普通的網(wǎng)站訪問用的 HTTP + HTML 只是其中一種，一些封閉系統(tǒng)內(nèi)的交流還可以自己定義一個(gè)協(xié)議和格式來用(比如 QQ)。
Web Service 傳輸?shù)臄?shù)據(jù)再經(jīng)由本地客戶端(瀏覽器、QQ/微信，網(wǎng)游客戶端等)的分析渲染，就能夠以普通人能夠理解的形式展現(xiàn)出來。此外還有一些 Web Service 并不是為普通用戶設(shè)計(jì)的，像前面提到的微博API，是用來給程序猿進(jìn)行二次開發(fā)的~
除了提供 Web Service， Web Server 還會(huì)兼顧很多功能，包括提供緩存，平衡負(fù)載，這樣在訪問量比較大的時(shí)候能有有條不紊地接客。常見的現(xiàn)成的 Web Server 有開源的 Apache、Nginx和微軟的IIS，你也可以用一些工具(比如 Node.js )自己定制一個(gè)。因?yàn)?Web Server 需要比較好的性能，所以投產(chǎn)時(shí)用的 Web Server 通常是C/C++/Java寫的，但是其實(shí)很多語言都可以寫，而且配合上語言底層的優(yōu)化和好的模型，其他語言寫的 Web Server也可以有不錯(cuò)的表現(xiàn)。
PHP ，服務(wù)器腳本，Web Framework
開頭那張圖里服務(wù)器接到請求之后可以給訪客發(fā)送對應(yīng)的文件，但21世紀(jì)的服務(wù)器怎么可能只會(huì)“接請求-發(fā)文件”這么弱智的一招呢，人家還可以處理你上傳來的文件的!還可以接受你發(fā)過來的各種請求，去操作服務(wù)器本地的文件or數(shù)據(jù)庫的!要干這些事，自然服務(wù)器那邊也少不了要有代碼了，這些代碼就是服務(wù)器腳本。前面說的 Web Service 傳輸?shù)臄?shù)據(jù)，主要也是由服務(wù)器腳本生成，再交由 Web Server ，按照某種協(xié)議套好整個(gè)響應(yīng)的格式，返回給客戶端的。
同一個(gè)網(wǎng)址，每個(gè)人看到的頁面不一定是一樣的，比如頭條的網(wǎng)址都是
http://www.toutiao.com/
但是沒登陸和登陸之后看到的東西不一樣，登陸之后每個(gè)人看到的導(dǎo)航欄的用戶信息，關(guān)注的動(dòng)態(tài)，都不一樣。服務(wù)器腳本可以對這些不同的狀態(tài)，生成不同的頁面，交給 Web Server 返回給瀏覽器。
知乎的主頁給大家看到的 html 整體來說是差不多的，都有導(dǎo)航欄，左邊是關(guān)注的動(dòng)態(tài)，右邊是廣告和邊欄，每一塊的整體構(gòu)造大同小異，只是一些地方內(nèi)容有所區(qū)別。服務(wù)器腳本就是利用已知的數(shù)據(jù)，在這些因人而異的地方填入相應(yīng)的內(nèi)容，生成給每個(gè)人看的頁面。
比如我的主頁，導(dǎo)航欄右邊的頭像和名字跟別人看到的不一樣，就是因?yàn)檫@塊地方有一個(gè)放圖片的標(biāo)簽和一個(gè)寫名字的標(biāo)簽，服務(wù)器腳本在查詢本地的數(shù)據(jù)之后給我返回的頁面里
的標(biāo)簽填了我頭像的圖片鏈接，標(biāo)簽里填了我的頭條名，給別人的頁面就填其他鏈接、其他名字，這樣每個(gè)人看到的頁面就不一樣了。
PHP 就是一種常見的用來寫服務(wù)器腳本的語言，其實(shí)只要是能拿來寫大家傳輸數(shù)據(jù)的通用接口(CGI)的語言都可以用來寫服務(wù)器腳本(也就是說幾乎所有編程語言都可以寫 = =b)，只是因?yàn)楝F(xiàn)成工具的豐富程度和專攻程度不一樣，所以有一些語言在寫服務(wù)器端腳本的時(shí)候會(huì)比較熱門。
為了方便，我們在寫服務(wù)器腳本的時(shí)候，通常還會(huì)用個(gè)同語言寫的 Web Framework 來處理各種細(xì)節(jié)，防御一些常見的攻擊，提供跨站認(rèn)證(比如用已有的微博賬號注冊其他網(wǎng)站)的接口，利用cookie處理登陸狀態(tài)和用戶設(shè)置，生成網(wǎng)頁模版之類的。如果你用 C# 或者 Visual Basic 寫服務(wù)器腳本，就可以用 http://ASP.NET 這個(gè)框架實(shí)現(xiàn)這些功能，幫你省點(diǎn)麻煩。不過現(xiàn)在不少人是反過來為了一個(gè)好用的 Web Framework 去選擇它對應(yīng)的服務(wù)器腳本語言的。
一個(gè)普通網(wǎng)站訪問的過程
簡單概括一下，對于我們普通的網(wǎng)站訪問，涉及到的技術(shù)就是：
- 用戶操作瀏覽器訪問，瀏覽器向服務(wù)器發(fā)出一個(gè) HTTP 請求;
- 服務(wù)器接收到 HTTP 請求，Web Server 進(jìn)行相應(yīng)的初步處理，使用服務(wù)器腳本生成頁面;
- 服務(wù)器腳本(利用Web Framework)調(diào)用本地和客戶端傳來的數(shù)據(jù)，生成頁面;
- Web Server 將生成的頁面作為 HTTP 響應(yīng)的 body，根據(jù)不同的處理結(jié)果生成 HTTP header，發(fā)回給客戶端;
- 客戶端(瀏覽器)接收到 HTTP 響應(yīng)，通常第一個(gè)請求得到的 HTTP 響應(yīng)的 body 里是 HTML 代碼，于是對 HTML 代碼開始解析;
- 解析過程中遇到引用的服務(wù)器上的資源(額外的 CSS、JS代碼，圖片、音視頻，附件等)，再向 Web Server 發(fā)送請求，Web Server 找到對應(yīng)的文件，發(fā)送回來;
- 瀏覽器解析 HTML 包含的內(nèi)容，用得到的 CSS 代碼進(jìn)行外觀上的進(jìn)一步渲染，JS 代碼也可能會(huì)對外觀進(jìn)行一定的處理;
- 用戶與頁面交互(點(diǎn)擊，懸停等等)時(shí)，JS 代碼對此作出一定的反應(yīng)，添加特效與動(dòng)畫;
- 交互的過程中可能需要向服務(wù)器索取或提交額外的數(shù)據(jù)(局部的刷新，類似微博的新消息通知)，一般不是跳轉(zhuǎn)就是通過 JS 代碼(響應(yīng)某個(gè)動(dòng)作或者定時(shí))向 Web Server 發(fā)送請求，Web Server 再用服務(wù)器腳本進(jìn)行處理(生成資源or寫入數(shù)據(jù)之類的)，把資源返回給客戶端，客戶端用得到的資源來實(shí)現(xiàn)動(dòng)態(tài)效果或其他改變。
注意這只是小網(wǎng)站里比較常見的模型，大網(wǎng)站為了解決規(guī)模問題還會(huì)有很多處理，每個(gè)環(huán)節(jié)都會(huì)有一些細(xì)微的差異，中間還會(huì)使用各種各樣的工具減輕服務(wù)器的壓力，提高效率，方便日常維護(hù)~
延伸閱讀 —— 那些看花眼的名詞
為了方便調(diào)試，很多 Web Framework 會(huì)自帶一個(gè)簡單的 Web Server，或者有些 Web Server 會(huì)自帶一個(gè)簡單的 Web Framework ，實(shí)際部署到服務(wù)器上開放使用的時(shí)候?yàn)榱诵阅芑蛘甙踩榷喾矫娴目紤]，可以把內(nèi)置的 Web Server 換成其他的，比如 Apache 或者 Nginx (舉個(gè)栗子，知乎用的是 Tornado 做 Framework，Server 換成了 Nginx，見知乎使用了哪些框架和開源庫?)。如果是開源的東西，還可以在遵守開源協(xié)議的前提下自己改一下再用~
因?yàn)楹蠖瞬幌袂岸艘呀?jīng)有 HTML + CSS + JS 這樣的既定事實(shí)標(biāo)準(zhǔn)，服務(wù)器腳本與 Web Framework 的選擇很多，所以新手會(huì)聽到很多眼花繚亂的技術(shù)名詞的地方多在這里~ 舉一些栗子，早年常見的服務(wù)器端語言有：
- 開源的 PHP
- Sun 公司的 JSP 中使用的 Java
- 微軟的 ASP 中使用的 VBScript
現(xiàn)在在這方面的應(yīng)用熱起來的語言有
- Python，對應(yīng)常見的 Framework 包括知乎和Quora有用到的 Tornado(其實(shí)是自帶 Framework 的 Web Server)，社區(qū)很成熟的 Django (用戶包括 Instagram、Pinterest)等
- Ruby，一般都用 Rails 這個(gè) Framework，用戶包括 Github、早期的 Twitter 等
- 逆天的 JavaScript，有了 Node.js 這個(gè)平臺，Web Server、服務(wù)器腳本和瀏覽器腳本全都可以用 JavaScript 來寫……Node.js上最常用的 Framework是Express
- 微軟家的則跟著 http://ASP.NET 轉(zhuǎn)移到了C# 或者 Visual Basic
- Erlang，擅長大規(guī)模的并發(fā)，不少游戲公司拿來寫服務(wù)器，靠幾十個(gè)工程師支撐幾億用戶的WhatsApp也是用的這個(gè)~
幾種常見的架構(gòu)包括：
- LAMP = Linux + Apache + MySQL + PHP(P還可能是Python或Perl。有時(shí)候L會(huì)改成W=Windows。)，也就是服務(wù)器上的操作系統(tǒng)是 Linux，Web Server 用 Apache，數(shù)據(jù)庫用 MySQL，服務(wù)器腳本用 PHP，這些都是開源技術(shù)，網(wǎng)站起步時(shí)用起來的成本會(huì)比較低，所以是普通網(wǎng)站里非常常見的架構(gòu)(雖然對于發(fā)展得很大的網(wǎng)站會(huì)遇到很多瓶頸)，F(xiàn)acebook就是這種，淘寶也曾經(jīng)是。
- J2EE，Java 世界的架構(gòu)，通常是企業(yè)用的(銀行、大型公司,.etc)，比較常見地還會(huì)搭配一種 UNIX 做操作系統(tǒng)，Apache 做 Web Server，Tomcat 轉(zhuǎn)換 JSP 到 Java 給服務(wù)器程序用(其實(shí)它也自帶 Web Server)，Oracle 數(shù)據(jù)庫等等。不一定拿來建站，常常用來提供企業(yè)里的各種需要用到網(wǎng)絡(luò)的業(yè)務(wù)。我們學(xué)校教務(wù)系統(tǒng)就是用J2EE做的=。= 淘寶現(xiàn)在也是從LAMP轉(zhuǎn)型到了這個(gè)。關(guān)于tomcat等之前的文章也有提及環(huán)境的配置。
- http://ASP.NET，微軟家的架構(gòu)，通常會(huì)搭配 Windows Server 操作系統(tǒng)，SQL Server 數(shù)據(jù)庫，IIS 做 Web Server。StackOverflow和京東(曾經(jīng))就是這個(gè)架構(gòu)。
- 神奇的MEAN架構(gòu)，MongoDB做數(shù)據(jù)庫，Express做 Web Framework，Angular 做前端的 JavaScript 框架，Node.js 用于編寫 Web Server。神奇之處在于這幾個(gè)東西的語言都是 JavaScript (MongoDB的實(shí)現(xiàn)不是，但與外界溝通用的語言是)。因?yàn)槭潜容^新的架構(gòu)，還有待時(shí)間的考驗(yàn)，不過被很多人(尤其是靠 JavaScript 吃飯的前端程序猿們)熱切關(guān)注。
- 一般來說重點(diǎn)不在技術(shù)而且在乎成本的新網(wǎng)站比較喜歡用 LAMP，重視安全穩(wěn)定和速度的企業(yè)和機(jī)構(gòu)喜歡 J2EE，想省事的網(wǎng)站喜歡 http://ASP.NET，比較 Geek 的網(wǎng)站和創(chuàng)業(yè)公司喜歡折騰各種 Python、Ruby、Node.js世界的東西，Google 這樣現(xiàn)成的技術(shù)都解決不了需求的超大型網(wǎng)站就自己折騰解決方案。
