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/

可自行百度。

 

　　以上不少内容都只是简单介绍了下并附上了对应的一些连接，没有详细展开。可是若是按照以上思路简单学习个把月前端应该可以本身独立开发了。