學習前準備
先了解，我們看到的網(wǎng)站內(nèi)容，簡單來說，是由前端和后端配合實現(xiàn)的，后端負責將數(shù)據(jù)庫中的數(shù)據(jù)查出來，進行處理之后，通過HTTP請求傳給前端頁面，而前端的責任就是合理的將這些數(shù)據(jù)展示給用戶。
而前端的展示頁面主要由三部分組成：HTML、CSS和JavaScript。
如果用汽車來作對比的話：
- HTML可以想象成組成汽車的基本原材料；
- CSS則是將這些原材料美化加工，使其展現(xiàn)出各種各樣的顏色和形狀；
- JavaScript是汽車中各種各樣的零件，可以確保汽車的運行。
這篇文章也進行了不錯的解釋，但忽略文中的Rails部分。
頁面初體驗
看完上面文章的簡單介紹，現(xiàn)在可以試試寫一個頁面，在線地址：
1. 一個基本的HTML頁面：
下圖左邊部分就是一個構(gòu)成一個頁面的最基礎部分：
-
<!DOCTYPE html>： 聲明為 HTML5 文檔 -
<html>元素：是 HTML 頁面的根元素 -
<head>元素：包含了文檔的元（meta）數(shù)據(jù)，這些數(shù)據(jù)會控制頁面的一些屬性 -
<title>元素：描述了文檔的標題，就是你打開一個網(wǎng)頁標簽的名字 -
<body>元素：包含了可見的頁面內(nèi)容，幾乎所有頁面中見到的內(nèi)容的html元素都是寫在body標簽中的
而上例中body標簽中沒有添加任何元素，所以右邊頁面預覽是空白。
2. 增加簡單html元素：
現(xiàn)在在body中增加一個p元素，寫法是<p>中間是想要顯示的文字</p>，標簽需要閉合，更多細節(jié)在菜鳥教程元素語法中查看。點擊運行后可以看到右邊出現(xiàn)了一行文字：
這樣我們就為我們的頁面增加了一個簡單的元素，任何網(wǎng)站都是由很多各種各樣的元素構(gòu)成的。
3. 初識CSS
現(xiàn)在再在上述例子中增加CSS部分，CSS是寫在<style></style>標簽中的并且一般是放在head標簽內(nèi)，來控制html元素樣式的語法，主要是由選擇器和聲明兩部分構(gòu)成，我們給下面p標簽設置一個顏色：
上圖中的style標簽內(nèi)的語法就是CSS，通過一個p選擇器選中 p元素，然后為為p元素聲明了color:red設置了字體顏色，就有了右邊紅色字體的效果，除了顏色之外還可以設置字體大小、字體間距等，更多CSS內(nèi)容菜鳥教程CSS部分。
4. 初識JavaScript
為了更簡單的了解JavaScript，我們需要給body中新增一個button元素，如下所示：
JavaScript的邏輯語法需要寫在<script></script>標簽中，而我們現(xiàn)在要實現(xiàn)一個該按鈕的點擊事件，即點擊后彈出一個提示框顯示“我被點擊了”。具體代碼如下：
按鈕點擊后的效果：
看完前面的介紹之后應該對前端有了初步的了解，而想要實現(xiàn)更加復雜的頁面，需要完整的學習前端的基礎知識。
學習環(huán)境準備
-
在線工具：
- JSFiddle可以直接編寫HTML、CSS和JS代碼并實時運行測試
- 菜鳥教程自帶的在線頁面預覽
本地開發(fā)測試，使用編輯器和node運行環(huán)境
學習目錄
先系統(tǒng)的瀏覽一遍每個部分，不懂的地方可以問或者先跳過。
HTML部分：菜鳥教程-HTML，HTML5部分可以先不看
CSS部分：菜鳥教程-CSS，CSS3部分可以先不看
JavaScript部分：菜鳥教程-JavaScript
