一個學期前小編也是對前臺知之甚少，現在嘛，差不多弄懂了少量，來講講自己的瞭解吧ヽ(￣▽￣)? 由於學習的深度不是很深，有錯誤的地方歡迎指正~假如沒有學會建站，小編教你如何簡單快速搭建網站，喜歡的收藏哦~~不要錯過

首先我們要知道訪問網站的流程是什麼？大家每天也訪問。

假設大家在瀏覽器位址列輸入這個問題的地址

https://www.頭條.com/question/22689579

HTML 與 CSS

當自己的電腦得到一個 html頁面 （圖中HTTP 響應中 body 裡的內容）之後，就會對它進行解析。HTML 就是一種超文字標記語言。給大家舉少量例項看看：

• 1	[img]圖片[/img] 用來貼上圖片

• 1	[url]超連結[/url] 用來貼上地址

伺服器返回給你的html檔案，寫的是少量程式碼，大概是這樣的：

瀏覽器拿到這些程式碼之後，將分析渲染好頁面顯示出來，假如不用css，效果如下圖，按照瀏覽器預設的樣式顯示出表格，超連結等。

大家有麼有覺得預設樣式有點ε(┬┬﹏┬┬)3……所以很多情況我們需要自己設定這些樣式，目前通用的樣式語言就是CSS，我們用CSS寫少量自己設定樣式的程式碼，之後在 HTML 檔案裡用一個標籤把這些規定樣式的 CSS 與表達內容語義的 HTML 程式碼連結起來，而後大家就能看到以往所謂的正常的頁面，是不是很厲害呢~~~

CSS 程式碼的基本格式

比方頭條的分佈框架排版，它的 CSS ，截圖大體如下

把第一個屬性對應的程式碼翻譯一下的話，背景影象位置偏移量(background - position)在影象距離頁面內左上角水平1px垂直2px處，瀏覽器會規規矩矩的地實現程式碼要求的效果，所以當大家在頁面上下滾動時，頂上那個導航條都會牢牢地黏在視窗頂部固定的位置，不發生偏移。

再講講其餘幾個屬性解釋一下：

• left 為240px 說明這個板塊需緊貼著視窗的左240px處

• width 和 height 指定板塊的寬和高

• border 指明這個板塊的邊界範圍

換句話說，就是瀏覽器就會根據這些 CSS 程式碼，自動描繪出對應的樣式。

HTML 5 與 XHTML

像語言一樣，大家在網頁裡的 發現的HTML 程式碼也不肯定是標準的，就好比有時候發音不太標準，別人就會去猜測你說的是什麼一樣，sometimes，程式猿不小心寫錯了一個 HTML程式碼，瀏覽器也會試圖猜測這些人類原來究竟想寫什麼，之後做出對應的解決，而這裡的猜是要有一個常識做依據的。加上有些瀏覽器的功能不一，有的支援少量標籤，有少量又不支援，還有少量混亂的情況。

為了防止大家混淆，我們要對 HTML 程式碼裡的標籤，標籤how寫，標籤可以hava屬性這些東西，建立一個符合的標準，HTML5 就是其中一個比較新的標準。其中新加了很多可以用的標籤和屬性，而後各大瀏覽器也大刀闊斧的按這個標準去實現了很多新標籤和屬性。

原本前臺程式設計師要寫一堆程式碼去實現的效果，現在瀏覽器都給實現了，只要程式猿寫兩三行，呼叫一下瀏覽器就給搞定了，十分簡單，所以很多人都願意去推廣這個標準~（當然新標準也不可能是完美的，也會有少量問題，有興趣的朋友可以去查查）

至於 XHTML，就是 HTML 的表親，XML 和 HTML 自己的雜交系列，對語法要求十分的嚴格，為了相容 XML，在語法上與 HTML 有少量不同。

JavaScript 與瀏覽器指令碼

有了表示內容和語義的 HTML，規定樣式的 CSS，得到的是靜態的頁面，沒什麼動畫，儘管用 CSS 可以有少量動畫，需要重新整理資料才可以，這麼呆板單調的網頁怎樣能展示我大智人種族的創造性！於是我們創造了 Javascript（JS） 來給頁面增加少量動態的效果，比方頭條的發表的標籤，滑鼠移上去會彈出一個小視窗，這個就是 JS 實現的效果啦。

瀏覽器都會幫大家實現少量Javascript可以用的工具（函式，物件等），只需寫少量 JS 的程式碼，儲存在 xxx.js 裡，在 html 檔案中用