在我們學習大數據的時候，難免要去實現數據的可視化，這時候就需要我們有一定的前端基礎了。前端的東西記憶比較多，玩的好的，一張頁面的確是美的不得了。
有精力的話，完全可以深入學習，成為一名優秀全棧工程師。
網站訪問流程
首先，我們來看看我們是怎樣得到我們看到的頁面。舉個小例子，我們看到的頭條網站是我們通過互聯網連接到服務器之後，接收到的我們要訪問網頁的格式，內容等之後呈現出來的。
如果我們在瀏覽器的地址中輸入像下面這樣格式的地址，就會有這樣的流程：
https://www.頭條.com/question/22689579
HTML 與 CSS
我們在訪問網頁時，電腦會得到一頁 html的頁面 ，在此之後，我們會對這個網頁進行解析。
HTML 本質上是一種超文本標記語言。給大家舉一些實例看看：
[img] 圖片 [/img] 用來顯示圖片[url] 超鏈接 [/url] 用來打開地址
我們瀏覽器中按F12，我們可以查看服務器返回給我們的html文件，其實就是一些代碼，我們看到大概是這樣的：
我們用瀏覽器得到這些代碼後，瀏覽器會將分析渲染好頁面顯示出來。如果我們不使用css，效果就像下圖，按照瀏覽器默認的樣式顯示出表格，超鏈接等。
大家是不是覺得默認樣式有點555555~~
這時候我們就需要自定義一些樣式，現在通用的樣式就是拿CSS製作的，我們用CSS寫自定義的樣式代碼，我們會在HTML 文件裡用一個
標籤把我們規定樣式的CSS與表達內容語義的HTML代碼鏈接起來。於是我們就能看到我們所說的正常頁面啦，是不是很神奇呢~~
CSS 代碼的基本格式
屬性:值
比如頭條的分佈框架排版，它的 CSS 樣式截圖是這個樣子的。
我們把第一個屬性對應的代碼解釋一下，背景圖像的位置偏移量(background - position)在我們頁面內左上角水平1px垂直2px處的那個位置，瀏覽器就會很聽話的實現我們設定代碼的效果。
所以當大家在頁面上下滾動時，頂上那個導航條都會牢牢地黏在窗口頂部固定的位置，不發生偏移。大家可以試一試~
再講講其他幾個屬性解釋一下：
- left 為240px 說明這個模塊需緊貼著窗口的左240px處
- width 和 height 指定模塊的寬和高
- border 指明這個模塊的邊界範圍
直白一點的說，瀏覽器就會根據我們給的CSS代碼，自動描繪出對應的樣式。
在這裡其實很多的樣式需要學習，建議大家可以去菜鳥教程這個網站上查看學習。做出美麗的頁面，還需要很長的路要走。
HTML 5 與 XHTML
在網頁裡面，我們也會發現有些HTML代碼也不一定是標準的，就好比我們說話一樣，有時候我們的發音並不是很標準，別人就會去猜測你在說什麼。
大家想想，有時候我們不小心寫錯了一個 HTML代碼，瀏覽器也會試圖猜測我們原來想表達到底什麼，之後再根據判斷做出相應的處理，而這裡的猜測是需要有一個常識作為我們的依據，再加上有些瀏覽器的功能不一，有的可以支持大多標籤，有的又不支持，當然還有一些混亂的東東。
這裡我們為了防止代碼的混亂，我們建立了一個合適的標準，HTML5 就是其中一個比較新的標準。它其中新加了許多的可用的標籤和屬性，然後各大瀏覽器根據這個標準，實現了很多新標籤和屬性。
本來前端程序員要寫一堆代碼去實現的效果，現在瀏覽器都給實現了，只需程序猿寫兩三行，調用一下瀏覽器就給搞定了，十分簡單。
至於 XHTML，其實就是 HTML 的表親，是XML 和 HTML 自己的雜交的產物，它對語法的要求特別的嚴格，其中為了兼容 XML，在語法上與 HTML 又有一些的不同。
JavaScript 與瀏覽器腳本
有了表示內容和語義的 HTML，規定樣式的 CSS，我們可以得到一張靜態的頁面，就是沒什麼動畫，儘管使用CSS可以有一些動畫，但是需要刷新數據才可以，比較的呆呆，這樣的網頁怎麼能展現我們大智人種族的創造性！於是我們創造了這樣的方式： Javascript（JS） 用來給頁面添加動態的效果，就像是頭條的上面信息的標籤，鼠標移上去就會彈出下面的小窗口，這就是 JS 實現的效果圖啦。
我們的瀏覽器會幫大家實現Javascript可以用的工具，比如函數，對象等，我們只要寫一些 JS 的代碼，保存在 .js文件裡面，之後我們可以在html 文件中用
閱讀更多 女陶愛柚子 的文章
關鍵字: 大數據 JavaScript HTML
