web前端基礎知識及快速入門指南

　　　　　　　　　　　　　　　　web前端基礎知識及快速入門指南

       作前端開發有幾個月了，雖說是幾個月，可是中間斷斷續續的上課、考試以及其它雜七雜八的事情，到如今竟然一直感受本身雖然不少前端的知識很眼熟，卻也感受本身貌似也知識在門口徘徊。不過還好，相比以前一直苦逼不知道如何下手，沒人指點的時候，好多了。如今相對來講，知道怎麼走了。如今總結一下前端的基礎知識，順便推薦幾本書。由於每一個知識點均可以拉開架勢寫幾本書都不必定寫的全，因此我就不去詳細展開了，就大概講一下前端的一點概念，順便介紹下前端的基礎知識等。若是能給你帶來點知識涵養或者頂點價值，那花這老半天的時間算值得了；若是寫的很差，歡迎批評和交流。固然大牛直接忽略這篇文章。

1、總介紹

一、前端的概念

Web前端開發是從網頁製做演變而來的，名稱上有很明顯的時代特徵。

Web 1.0時代：那時網站的主要內容都是靜態的，用戶使用網站的行爲也以瀏覽爲主。故主要是網頁製做。時間在2004年及之前。

Web 2.0時代：各類相似桌面軟件的Web應用大量涌現，網站的前端由此發生了翻天覆地的變化。網頁再也不只是承載單一的文字和圖片，各類富媒體讓網頁的內容更加生動，網頁上軟件化的交互形式爲用戶提供了更好的使用體驗，這些都是基於前端技術實現的。如今的網頁製做主要是利用前端的技術（主要Html、CSS、JavaScript等）進行前端開發，故而都更接近傳統的網站後臺開發，因此如今再也不叫網頁製做，而是叫Web前端開發。時間是2005年之後。

二、前端技術

最基本的技術，也是作前端開發程序員的飯碗就是：HTML、CSS和JavaScript。這三樣東西被稱爲前端技術的三要素，也是最根本的東西。如今咱們知道和了解的一些前端框架、插件等全都是基於這三要素，並作了良好的封裝後發展起來的。

高大上的技術同時不只包括以上提到的基礎知識，同時還要包括交互設計、視覺設計以及產品定義等設計到的工做和技術。

如圖示：

 

 

三、前端工程師

Web前端開發工程師，簡單的說就是利用前端技術進行web前端開發的程序員。

主要職責：

利用(X)HTML/CSS/JavaScript/Flash等各類Web技術進行客戶端產品的開發；

完成客戶端程序（也就是瀏覽器端）的開發，開發JavaScript以及Flash模塊；

結合後臺開發技術模擬總體效果，進行豐富互聯網的Web開發；

改善用戶體驗；

四、前端MVC概念：即將表現、控制和視圖分開，具體的就是指HTML、CSS和javascript各司其職，減小他們的耦合度。

2、Html、CSS和JavaScript

一、 Html技術

①概念：HTML 是用來描述網頁的一種語言；HTML 指的是超文本標記語言 (Hyper Text Markup Language)；HTML 不是一種編程語言，而是一種標記語言 (markup language)；HTML 使用標記標籤來描述網頁。

②Html結構

 

③Html元素

http://www.w3school.com.cn/html/html_elements.asp

④Html屬性

http://www.w3school.com.cn/html/html_attributes.asp

⑤其它關於html的基礎知識

http://www.w3school.com.cn/html/index.asp

⑥Html5

新增了一些特性，主要體如今兩個方面：Web 網頁的表現性能和追加了本地數據庫等 Web 應用的功能。

欣賞下Html5作出來的網站案例：http://www.chinaz.com/design/2011/0726/201831.shtml

推薦書籍《head first Html and Xhtml》

二、 CSS技術

CSS是可以真正作到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，CSS可以對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎全部的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，並可以進行初步交互設計，是目前基於文本展現最優秀的表現設計語言。CSS可以根據不一樣使用者的理解能力，簡化或者優化寫法，針對各種人羣，有較強的易讀性。

CSS建立應用：http://www.w3school.com.cn/css/css_howto.asp

CSS語法（規則）：CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。以下：

selector {declaration1; declaration2; ... declarationN }。其中每條聲明都是一個鍵值對，以下：selector {property: value}

CSS選擇器：基礎的id選擇器和class選擇器。

基礎選擇器： http://www.w3cplus.com/css3/basic-selectors

屬性選擇器：http://www.w3cplus.com/css3/attribute-selectors

僞類選擇器：http://www.w3cplus.com/css3/pseudo-class-selector

推薦書籍《CSS權威指南》《CSS那些事兒》

三、 JavaScript

JavaScript是一種基於對象和事件驅動並具備相對安全性的客戶端腳本語言。同時也是一種普遍用於客戶端Web開發的腳本語言，經常使用來給HTML網頁添加動態功能，好比響應用戶的各類操做。

JavaScript教程：http://www.w3school.com.cn/js/

JavaScript實現：http://www.w3school.com.cn/js/js_howto.asp

JavaScript Dom: http://www.w3school.com.cn/js/js_htmldom.asp

推薦書籍：《JavaScript高級程序設計》、《JavaScript Dom編程藝術》等

3、插件及相關技術

一、jquery庫

http://www.w3school.com.cn/jquery/

二、Ajax技術

http://www.w3school.com.cn/ajax/

三、 jQuery ui

http://jqueryui.com/

四、 DataTable

http://www.datatables.net/

五、 ztree

http://www.ztree.me/v3/main.php

六、 highchart

http://www.highcharts.com/

七、Ext JS

http://www.sencha.com/

七、 其它包括D3等不少插件和框架

http://net.tutsplus.com/articles/web-roundups/40-super-neat-javascript-plugins/

可自行百度。

 

　　以上不少內容都只是簡單介紹了下並附上了對應的一些連接，沒有詳細展開。可是若是按照以上思路簡單學習個把月前端應該可以本身獨立開發了。