web前端基础知识及快速入门指南

　　　　　　　　　　　　　　　　web前端基础知识及快速入门指南

做前端开发有几个月了，虽然说是几个月，但是中间断断续续的上课、考试以及其它杂七杂八的事情，到现在居然一直感觉自己虽然很多前端的知识很眼熟，却也感觉自己貌似也知识在门口徘徊。不过还好，相比之前一直苦逼不知道如何下手，没人指点的时候，好多了。现在相对来说，知道怎么走了。现在总结一下前端的基础知识，顺便推荐几本书。因为每个知识点都可以拉开架势写几本书都不一定写的全，所以我就不去详细展开了，就大概讲一下前端的一点概念，顺便介绍下前端的基础知识等。如果能给你带来点知识涵养或者顶点价值，那花这老半天的时间算值得了；如果写的不好，欢迎批评和交流。当然大牛直接忽略这篇文章。

一、总介绍

1、前端的概念

Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。

Web 1.0时代：那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。故主要是网页制作。时间在2004年及以前。

Web 2.0时代：各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。现在的网页制作主要是利用前端的技术（主要Html、CSS、JavaScript等）进行前端开发，故而都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。时间是2005年以后。

2、前端技术

最基本的技术，也是做前端开发程序员的饭碗就是：HTML、CSS和JavaScript。这三样东西被称为前端技术的三要素，也是最根本的东西。现在我们知道和了解的一些前端框架、插件等全都是基于这三要素，并做了良好的封装后发展起来的。

高大上的技术同时不仅包括以上提到的基础知识，同时还要包括交互设计、视觉设计以及产品定义等设计到的工作和技术。

如图示：

3、前端工程师

Web前端开发工程师，简单的说就是利用前端技术进行web前端开发的程序员。

主要职责：

利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发；

完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块；

结合后台开发技术模拟整体效果，进行丰富互联网的Web开发；

改善用户体验；

4、前端MVC概念：即将表现、控制和视图分开，具体的就是指HTML、CSS和javascript各司其职，减少他们的耦合度。

二、Html、CSS和JavaScript

1、 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》

2、 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那些事儿》

3、 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编程艺术》等

三、插件及相关技术

1、jquery库

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

2、Ajax技术

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

3、 jQuery ui

http://jqueryui.com/

4、 DataTable

http://www.datatables.net/

5、 ztree

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

6、 highchart

http://www.highcharts.com/

7、Ext JS

http://www.sencha.com/

7、 其它包括D3等很多插件和框架

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

可自行百度。

　　以上很多内容都只是简单介绍了下并附上了对应的一些链接，没有详细展开。但是如果按照以上思路简单学习个把月前端应该能够自己独立开发了。