小菜的前端編程散談（1）

小菜的前端編程散談（1）

前端，傳統的前端包含哪些東西呢？

1. HTML（HTML5)
2. CSS（CSS3）
3. Javascript（ECMAScript）

我把這3樣東西統稱爲資源，在一個Web系統中，用戶經過瀏覽器上網，輸入URL的那一刻起，就意味着經過HTTP協議發送一個遠程請求，服務端會將一個URL請求映射到一個具體的URL，而後將關聯的資源分別返回給瀏覽器端，瀏覽器拿到了這些資源以後，負責解釋、執行並呈現（渲染）。（藉助於Fiddler或者瀏覽器開發者工具中能夠很容易監視到這一個過程，不妨動手試一下）

那麼請問，爲何要分紅3種資源呢？爲何不使用統一的語言來表示呢？OK，計算機編程中，不一樣的領域有不一樣的語言（特定領域語言，DSL），他們分別是應對不一樣的場景，扮演不一樣的角色，執行不一樣的功能職責，這樣實際上是一種模塊化分工的思想，代碼寫得多了就知道這樣的好處了，OK，這3種資源有啥不同的呢？

HTML，標記語言，負責呈現網頁的結構以及內容，顯示什麼？。打個比方，一棟房子，它有多少層，每一層裏面，有幾間房間，臥室、廚房、衛生間的分佈，玻璃窗戶的分佈，房子的結構和房子的內容。能夠經過靜態HTML標記呈現，也能夠經過Javascript編程動態展示，對於JS來講，一個完整的HTML文檔就是一棵樹，稱之爲DOM（Document Object Model，文檔對象模型）
CSS，樣式語言，負責網頁內容的顯示樣式，如何顯示？仍是上面的例子，一個房子裏面某個房間的牆是什麼顏色？窗戶是什麼顏色什麼風格？等等
Javascript，腳本語言，爲何有了HTML和CSS還須要腳本語言呢？腳本實際上就是爲整個HTML Document增長了動態交互的能力。再打個比方，好比人的身體是HTML爲內容，人的衣服爲CSS樣式，可是，這樣的人只是一個靜態的人，實際的人實際上是具有行爲的，好比天冷了要加件衣服，天熱了要脫衣服。這其實就表示動態處理內容（Document）的能力

那麼，如何學習這3件套呢？

OK，其實要學好一個東西，首先要理解它的精粹，而後圍繞着精粹進行展開，就比較容易融會貫通幫助學習提升效率
HTML，其實HTML要按兩個部分來分，HTML5以前的HTML和HTML5，爲何要這麼分呢？由於HTML5這個版本在整個版本的HTML中的更新是一個跨時代的里程碑式的版本，裏面涵蓋了不少現代式Web應用和移動Web應用的特性，因此HTML5的東西要單獨放到後面再講，一步一步來嘛。

工欲善其事，必先利其器。找個好的代碼編輯器吧，這樣寫代碼就更加有效率了，寫出來的代碼也支持自動格式化，也比較美觀，暫推薦Sublime配合其豐富的插件，固然其實使用Visual Studio Code也不錯

說到HTML的學習，有哪些比較重要的資源呢？我以爲對於新手來講，HTML基本上不必看書，主要去w3cschool和MDN這兩個站點去學習就徹底夠了。那麼HTML包含哪些重要的部分已經怎樣的學習步驟呢？我大概列一下

1. 熟悉大部分的HTML元素，佈局元素（div table p ul ol等），表單元素（input type），知道每一個元素是幹嗎用的
2. 知道對HTML元素進行分類，知道行內元素和塊級元素有什麼區別。有哪些塊級元素有哪些行內元素
3. 熟悉如何在HTML中引用CSS和javascript，有哪些方式呢？

CSS,那麼CSS裏面有哪些比較重要的東西呢？我也把CSS3以前的羅列一下

1. 熟悉大部分經常使用的CSS樣式屬性元素和屬性值
2. 熟悉CSS選擇器
3. 熟悉CSS的一些設計，按HTML元素設計按Id設計按Class設計，樣式類的複用和繼承，能夠找一個不錯的網站，使用瀏覽器開發工具看看別人的樣式是怎樣設計的，而後吸收一些經驗
4. 深刻玩轉CSS盒子模型，知道Margin、Padding和Border的區別以及它們各自的應用場景分別是怎樣的呢？還有定位、浮動、對齊等

Javascript，其實Javascript發展到ECMAScript 6版本以後不少東西都和原來不同了，可是考慮到市場上大部分仍是原有老版本的Javascript，何況做爲學習必須從原來的版本開始學着是必須的。

等一下，Javascript已經進入編程的範疇了，因此，須要直接進入Javascript編程嗎？不！我仍是講講編程的東西吧，讓歷來沒有接觸編程的人大體體會一下編程是個啥子東西呢？因此，下篇見！