前端是什么？
前端通常也称为web 前端，是指利用HTML,CSS,JavaScript等技术生成开发人员想要生成的网页。网页就是大家在浏览器所看到的，我们电脑里的.html和.jsp等等为后缀的文件也属于网页。
浏览器
无论是前端的新手学习者，还是开发人员，浏览器是我们开发和调试中必不可少的工具。常见的浏览器有Chrome（谷歌），IE，Firefox（火狐），Safari等等。
由统计图中可以看出，如今使用的较火的是Chrome浏览器和IE浏览器。近几年，Firefox因为不佳的用户体验等原因逐渐减少使用量，而Safari则是属于特定的系统：Mac。在这里，我也建议大家使用Chrome浏览器，不仅体验极佳，而且对于测试方面也有很好的支持，接下来的教程也都以Chrome浏览器为例。
工欲善其事，必先利其器
想要编写前端代码，就要备有好的开发工具，以下就介绍好的开发工具
- 记事本
记事本也行？听起来好像有点夸张。其实前端开发自由度很高，大家只要打开记事本，复制如下代码，保存后将后缀.txt改为.html，再使用Chrome浏览器打开即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
</head>
<body>
<b>HelloWorld</b>
</body>
</html>但是，只有顶尖高手和傻子才会用记事本写代码，因为记忆如此多的代码很耗精力，另一个就是效率低下。所以，绝大部分的开发者都会使用更为高效的开发工具。
2.Sublime Text3
Sublime Text3作为一个尽为人知的代码编辑器，其优点不用赘述。同时支持Windows、Linux、Mac OS X等操作系统。界面整洁美观、文本功能强大，支持众多插件扩展，非常适合编写前端代码，同时也适合编写Python，JavaScript等脚本。
3.Webstorm
Webstorm的强大之处在于它对于HTML5和JavaScript的支持，代码提示，检错等功能会让开发变得得心应手。但是缺点也很明显，没有像Sublime Text3那么轻便，打开速度很慢。
4.Vim
Vim是从 vi 发展出来的一个文本编辑器。代码补全、编译及错误跳转等方便编程的功能特别丰富，是linux系统最常用的文本编辑器。
5.像其它的编辑器还有Editplus，Dreamweaver，HBuilder等等。
在这里，我建议大家使用Sublime Text3和Webstorm进行开发，二者相互配合，取两者优点，会让开发变得简单容易。
6.后面我会再推出Sublime Text3和Webstorm的教程，大家敬请期待！
看到这里，相信大家也对前端有个初步的了解了。下面就为大家介绍前端三剑客。什么是前端三剑客？就是HTML，CSS，JavaScript。
web有三个标准：
1.结构标准：结构用于对网页元素进行整理的分类，主要包括HTML；
2.样式标准：表现用于设置网页元素的颜色，大小，格式等等，主要包括CSS；
3.行为标准：对网页模型进行交互，让网页不再“死气沉沉”，主要包括JavaScript；
大家还不懂的话，请看下图：
以建房子为例，HTML是规划哪个地方建厨房，哪里建厕所，哪里建客厅，CSS则是指定厨房建多大，用什么样的瓷砖，用什么颜色的染料，JavaScript则是让这些房间“动起来”，门可以关上和打开，打开煤气炉就可以烧菜等等。
学习路线和书籍推荐
第一阶段：HTML和CSS 最好学会PS
HTML和CSS是入坑前端的两把钥匙，想学习前端必须先学习HTML和CSS。对于HTML和CSS的学习，不需要死记硬背，只需学会看懂就行，不懂就查，查哪里？w3c标准。学习HTML和CSS要善于查文档，熟能生巧，你就能脱离文档编写代码了！
推荐书籍：《Head First HTML与CSS》，《CSS权威指南》，《CSS揭秘》
第二阶段：JavaScript
在这个阶段，你要理解ECMAScript、Dom和Bom，懂得利用dom写一些特效，如：导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图等等。千万不要以为这样就学会JavaScript了，路还远着呢！
推荐书籍：《Javascript DOM 编程艺术》（入门），《JavaScript高级程序设计》（强烈推荐），《高性能JavaScript》
第三阶段：HTML5和CSS3
HTML5和CSS3是对HTML和CSS的拓展和加强，拥有更多的属性，可以使用更为强大的特效。
推荐书籍：无
第四阶段：数据结构，jQuery，bootstrap
数据结构是每一门语言的核心部分，对于代码的理解和设计有很大的帮助，本阶段，学习者应该学会使用JavaScript学习数据结构和算法；jQuery是基于JavaScript的库，jq封装了很多的方法，方便开发者使用，处理了浏览器兼容，提高了兼容性，但是因为内部要作各种复杂的判断，开发效率会略微降低；bootstrap是CSS的库，很强大，提高了开发效率。
推荐书籍：《学习JavaScript数据结构与算法》，《锋利的jquery》，《Bootstrap用户手册：设计响应式网站》（非必需，可以通过bootstrap学习文档学习）
**学习到这里，相信大家对前端有自己的了解和理解了，大家可以根据自己的兴趣再从事自己的学习方向，如移动端开发，小程序开发，j2ee的开发，结合node.js，python全栈开发等等。
新手上路，如有错误麻烦大家告诉我，谢谢！本次的学习就到此结束啦！感兴趣的读者或者想和我聊聊的请私信我，或者关注公众号：程序员吃橘子。
原文地址：http://blog.51cto.com/14065757/2315505