瀏覽器拿到這些程式碼之後，分析一下給你渲染好頁面顯示出來，如果不用css，效果是這樣的，按照瀏覽器預設的樣式顯示出列表、圖片、超連結、輸入框、按鈕等等：
是不是覺得預設樣式有點看瞎狗眼呢……所以很多時候我們需要自定義樣式，現行通用的規定樣式的語言是CSS，我們可以用它寫一些定義樣式的程式碼，然後在 html 檔案裡用一個<link>標籤把這些規定樣式的 CSS 程式碼與表達內容語義的 HTML 程式碼關聯起來，然後你就能看到一個符合人類正常審美的頁面了:
CSS 程式碼的格式基本是

屬性:值

比如知乎頂上那個藍色的導航條，它的 CSS 大約是這樣的
第一個屬性對應的程式碼翻譯成人話，就是它的位置（position）應該是不動（fixed）的，瀏覽器會兢兢業業地去實現這段程式碼要求實現的效果，所以你在頁面上翻來翻去頂上那個導航條都會死死地黏在視窗頂部不跟著滾動。
再拿裡面的其他幾個屬性做栗子解釋一下就是：

• left 和 top 為零指明這個導航條要緊貼著視窗的左上角
• width 和 height 指定這個導航條的寬和高
• background 指明這個導航條的背景是一種漸變的藍色

瀏覽器就會根據這些 CSS 程式碼，“畫”出對應的樣式。

HTML 5 與 XHTML
像人的語言一樣，網路上的網頁裡的 HTML 程式碼也不一定是標準的，好比有時候你發音不太標準，別人會去猜測你說的到底是什麼一樣，有些時候前端程式猿不小心寫錯了 HTML，瀏覽器也會試圖猜測他們原來想寫的是什麼，做對應的渲染，而猜是要有一個常識做依據的。加上有些瀏覽器支援一些標籤，有一些又不支援，以及其他混亂的情況，為了防止大家雞同鴨講，我們需要對 HTML 程式碼裡能有什麼標籤，標籤怎麼寫，標籤可以有什麼屬性這些東西有一定的共識，建立一個通行的標準，HTML5 就是其中一個比較新的標準。這個標準新加了很多可以用的標籤和屬性，然後各大瀏覽器也吭哧吭哧按這個標準去實現了很多這些新加的標籤和屬性，本來前端程式設計師要寫一堆程式碼去實現的效果，現在瀏覽器都給你實現好了，只要寫兩三行，呼叫一下瀏覽器給你實現的部分就能搞定，簡單愉快，所以很多人都在熱情地推廣這個標準~（當然新標準也不可能是完美的，總會有一些問題，怕跑題這裡按下不表~）

至於 XHTML，就是 HTML 的近親 XML 和 HTML 自己的雜交品種，對語法要求比較嚴格，並且為了相容 XML，在語法上與 HTML 有一些不同~

JavaScript 與瀏覽器指令碼
有了表示內容和語義的 HTML，規定樣式的 CSS，得到的是一個靜態的頁面，沒什麼動畫（其實用 CSS 還是可以有一些動畫的，不過這個跑題了），按 F5 才會重新整理資料，都 21世紀了，這麼呆板單調的網頁怎麼能展現我大智人種族的創造性口胡！於是我們有了 Javascript（JS） 來給頁面新增一些動態的效果，比如知乎問題的標籤，滑鼠移上去會彈出一個小視窗，這個就是 JS 實現的效果啦。

&amp;amp;lt;img data-rawheight=&quot;274&quot; data-rawwidth=&quot;532&quot; src=&quot;https://pic4.zhimg.com/50/dcb4e911b7ee1e74346a821f03363213_hd.jpg&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;532&quot; data-original=&quot;https://pic4.zhimg.com/dcb4e911b7ee1e74346a821f03363213_r.jpg&quot;&amp;amp;gt;瀏覽器都會幫你實現一些 JS 可以用的工具（函式，物件什麼的），你只要寫一些 JS 的程式碼，儲存在 xxx.js 裡，在 html 檔案中用 <script> 關聯進來就可以用了，像上圖這個效果應該就包括了

1. 滑鼠懸停到標籤上時建立一個新的 <div> 小視窗
   
2. 用 JS 向知乎伺服器傳送一個請求，得到這個小視窗應該顯示的資料，放在這個小窗口裡（這就是所謂的AJAX，不用重新整理就能與伺服器進行互動，更新頁面的一小部分~）

瀏覽器拿到這樣的程式碼，就會解析並實現出相應的效果，樓主問的瀏覽器指令碼，指的就是這樣子的程式碼。其實用來寫瀏覽器指令碼的，也不是非得JavaScript 不可，當年還為到底用什麼語言寫這種程式碼有過一段戰火紛飛的時期，但現在塵埃落定，各大瀏覽器都默認了：請用 JS 寫這些動態效果的程式碼給我解析~

以上就是前端部分的內容，下面簡述一下後端的東西吧> <

Web Server 和 Web Services
瀏覽器給伺服器發一個請求，伺服器不是一看就知道怎麼響應的。首先這些請求和響應要有一個通用的寫法，也就是要有一個協議，常用的是 HTTP 協議。
像最前面的圖，伺服器的響應寫了一個狀態碼 200 OK ，是 HTTP 協議里約定俗成的一個東西，伺服器寫 200 OK 在響應裡，表示“你請求的這個東西我有”，如果是404 Not Found，就是“你請求的這個東西我這裡沒有”。
HTTP 響應裡還包括很多東西，比如 Content-type 表示伺服器發過來的檔案型別是什麼（文字？動畫？圖片？音訊？），這樣發過去了人家瀏覽器好知道怎麼展示給使用者看。人家伺服器怎麼知道按協議要寫什麼東西進去呢，這就是 Web Server 幹活的時候了。

形象化一下HTTP響應，大概就長這樣：
再上個錘子，瀏覽器和伺服器之間請求響應的過程大致是長這樣的，右下角的那些東西就是由 Web Server 生成的（伺服器指令碼可以做一些改動，但這些一般是 Web Server 的份內活）：


再比如說很多時候你訪問一個網站，瀏覽器裡輸的地址並沒有寫明你請求的檔案，比如這個問題的地址是：

http://www.zhihu.com/question/22689579

但知乎的伺服器其實返回了一個html給你，伺服器怎麼知道這個地址對應要返回什麼樣的 html 程式碼給你的？也是 Web Server 乾的活。

除了瀏覽器輸地址敲回車這種赤裸裸的訪問，客戶端與伺服器的互動還有很多種，比如：

• 前面提到的用 JS 完成的 AJAX，有點像瀏覽器和伺服器之間的悄悄話~

還有其他應用軟體與伺服器的互動，比如：

• 微信、QQ 與騰訊的伺服器的互動
• 網遊客戶端與網遊公司伺服器的互動
• 搜尋引擎用來蒐集網頁資訊的程式（爬蟲）與各種各樣的網站伺服器的互動
  
• 只要你知道用什麼地址訪問、怎樣訪問人家的伺服器，並且有相應許可權，你也可以自己寫一些程式去和他們的伺服器互動（比如用微博API - 新浪微博API獲取微博，開發第三方應用或者做資料分析）。

從這些栗子裡可以看出，客戶端與伺服器的互動的主體、客體、載體是五花八門的：

• 伺服器可以是大型機也可以是個人電腦，只要能跑相應的程式就行
• 客戶端像前面舉的栗子裡一樣，可以是各種軟體，而且這些軟體不一定執行在個人電腦上，也可以是手機、平板、智慧穿戴裝置等等
• 有時候不是傳生成好的 HTML 或者其他伺服器上已經有的檔案，而是傳輸經過一定邏輯處理後生成的字串或者其他各種封裝好的資料

像前面提到的 HTML 需要有一定標準一樣，為了防止混亂和雞同鴨講，我們又需要先對這些機器需要怎麼互動達成一定共識，再讓它們進行交流。人與人之間通訊，需要先有一種大家都認識的寫法（比如簡體字/繁體字）和一種彼此都懂的語言（比如普通話/廣東話）。要讓這些形形色色的機器能夠通過網路進行互動，我們就需要指明一種協議（比如 HTTP/HTTPS）和一種資料封裝格式（比如 HTML/XML），Web Server 提供的 Web Service，指的就是這種協議+格式的交流體系。不過 Web Service 的生態系統和 HTML 的標準不一樣，使用者可以選擇的協議和資料封裝格式更多，普通的網站訪問用的 HTTP + HTML 只是其中一種，一些封閉系統內的交流還可以自己定義一個協議和格式來用（比如 QQ）。

Web Service 傳輸的資料再經由本地客戶端（瀏覽器、QQ/微信，網遊客戶端等）的分析渲染，就能夠以普通人能夠理解的形式展現出來。此外還有一些 Web Service 並不是為普通使用者設計的，像前面提到的微博API，是用來給程式猿進行二次開發的~

除了提供 Web Service， Web Server 還會兼顧很多功能，包括提供快取，平衡負載，這樣在訪問量比較大的時候能有有條不紊地接客。常見的現成的 Web Server 有開源的 Apache、Nginx和微軟的IIS，你也可以用一些工具（比如 Node.js ）自己定製一個。因為 Web Server 需要比較好的效能，所以投產時用的 Web Server 通常是C/C++/Java寫的，但是其實很多語言都可以寫，而且配合上語言底層的優化和好的模型，其他語言寫的 Web Server也可以有不錯的表現。

PHP ，伺服器指令碼，Web Framework
開頭那張圖裡伺服器接到請求之後可以給訪客傳送對應的檔案，但21世紀的伺服器怎麼可能只會“接請求-發文件”這麼弱智的一招呢，人家還可以處理你上傳來的檔案的！還可以接受你發過來的各種請求，去操作伺服器本地的檔案or資料庫的！要幹這些事，自然伺服器那邊也少不了要有程式碼了，這些程式碼就是伺服器指令碼。前面說的 Web Service 傳輸的資料，主要也是由伺服器指令碼生成，再交由 Web Server ，按照某種協議套好整個響應的格式，返回給客戶端的。

同一個網址，每個人看到的頁面不一定是一樣的，比如知乎首頁的網址都是

http://www.zhihu.com/

但是沒登陸和登陸之後看到的東西不一樣，登陸之後每個人看到的導航欄的使用者資訊，關注的動態，都不一樣。伺服器指令碼可以對這些不同的狀態，生成不同的頁面，交給 Web Server 返回給瀏覽器。
知乎的主頁給大家看到的 html 整體來說是差不多的，都有導航欄，左邊是關注的動態，右邊是廣告和邊欄，每一塊的整體構造大同小異，只是一些地方內容有所區別。伺服器指令碼就是利用已知的資料，在這些因人而異的地方填入相應的內容，生成給每個人看的頁面。
比如我的主頁，導航欄右邊的頭像和名字跟別人看到的不一樣，就是因為這塊地方有一個放圖片的<img>標籤和一個寫名字的<span>標籤，伺服器指令碼在查詢本地的資料之後給我返回的頁面裡<img>的標籤填了我頭像的圖片連結，<span>標籤裡填了我的名字，給別人的頁面就填其他連結、其他名字，這樣每個人看到的頁面就不一樣了。

PHP 就是一種常見的用來寫伺服器指令碼的語言，其實只要是能拿來寫大家傳輸資料的通用介面（CGI）的語言都可以用來寫伺服器指令碼（也就是說幾乎所有程式語言都可以寫 = =b），只是因為現成工具的豐富程度和專攻程度不一樣，所以有一些語言在寫伺服器端指令碼的時候會比較熱門。

為了方便，我們在寫伺服器指令碼的時候，通常還會用個同語言寫的 Web Framework 來處理各種細節，防禦一些常見的攻擊，提供跨站認證（比如用已有的微博賬號註冊其他網站）的介面，利用cookie處理登陸狀態和使用者設定，生成網頁模版之類的。如果你用 C# 或者 Visual Basic 寫伺服器指令碼，就可以用http://ASP.NET 這個框架實現這些功能，幫你省點麻煩。不過現在不少人是反過來為了一個好用的 Web Framework 去選擇它對應的伺服器指令碼語言的。

一個普通網站訪問的過程
簡單概括一下，對於我們普通的網站訪問，涉及到的技術就是：

1. 使用者操作瀏覽器訪問，瀏覽器向伺服器發出一個 HTTP 請求；
2. 伺服器接收到 HTTP 請求，Web Server 進行相應的初步處理，使用伺服器指令碼生成頁面；
3. 伺服器指令碼（利用Web Framework）呼叫本地和客戶端傳來的資料，生成頁面；
4. Web Server 將生成的頁面作為 HTTP 響應的 body，根據不同的處理結果生成 HTTP header，發回給客戶端；
5. 客戶端（瀏覽器）接收到 HTTP 響應，通常第一個請求得到的 HTTP 響應的 body 裡是 HTML 程式碼，於是對 HTML 程式碼開始解析；
6. 解析過程中遇到引用的伺服器上的資源（額外的 CSS、JS程式碼，圖片、音視訊，附件等），再向 Web Server 傳送請求，Web Server 找到對應的檔案，傳送回來；
7. 瀏覽器解析 HTML 包含的內容，用得到的 CSS 程式碼進行外觀上的進一步渲染，JS 程式碼也可能會對外觀進行一定的處理；
8. 使用者與頁面互動（點選，懸停等等）時，JS 程式碼對此作出一定的反應，新增特效與動畫；
9. 互動的過程中可能需要向伺服器索取或提交額外的資料（區域性的重新整理，類似微博的新訊息通知），一般不是跳轉就是通過 JS 程式碼（響應某個動作或者定時）向 Web Server 傳送請求，Web Server 再用伺服器指令碼進行處理（生成資源or寫入資料之類的），把資源返回給客戶端，客戶端用得到的資源來實現動態效果或其他改變。

注意這只是小網站裡比較常見的模型，大網站為了解決規模問題還會有很多處理，每個環節都會有一些細微的差異，中間還會使用各種各樣的工具減輕伺服器的壓力，提高效率，方便日常維護~