下图是前端工程师的示意图：前端开发的核心是HTML+CSS+JavaScript。本质上，它们构成了一个MVC框架，即HTML作为信息模型（Model），CSS控制样式（View），JavaScript负责调度数据和实现一些显示逻辑（Controller）。HTML1。标签的分类标签表示一个元素按性质划分：Block-Level和Inline-Level按语义划分：Headings:h1,h2,h3,h4,h5,h6Paragraphs:pTextFormatting:em,strong,sub,del,ins,small列表：ul,li,ol,dl,dt,dd表：table,thead,tbody,tr,th,td表单和输入：form,input,select,textarea其他：div,span,a,img,HTML5:header,footer,article,section2.XHTMLXHTML于2000年1月26日成为W3C标准。W3C将XHTML定义为HTML的最新版本。XHTML将逐渐取代HTML。XHTML是结合了HTML和XML各自的长处而形成的。XHTML语法规则如下：属性名和标签名必须小写属性值必须带引号属性不能缩写使用Id属性代替name属性XHTML元素必须正确嵌套XHTML元素必须闭合，不能用于样式，一个结构良好的文档向浏览器传达了尽可能多的语义，无论是在掌上电脑上还是在时尚的桌面图形浏览器上。结构良好的文档向用户传达视觉语义，即使在较旧的浏览器或用户已关闭CSS的现代浏览器中也是如此。同时，结构良好的HTML代码也有助于搜索引擎索引您的网站。不要使用表格布局，表格用于表格显示。不要到处滥用div标签。Div用于块。不要使用样式标签，例如font、center、big、small、b、i。样式可以通过CSS控制，b和i可以用strong和em代替。不要使用换行符和空格来控制样式，而是使用CSS。尽量不要使用inlineCSSCSS1.基本级联继承优先盒模型定位浮动2.高级CSSSprite：CSSSprite主要作为前端性能优化的一种技术。原理是将多张背景图片合成一张，这样可以减少HTTP请求，加快加载速度。浏览器兼容性：在大多数情况下，我们需要考虑浏览器兼容性。目前使用的浏览器版本很多，如IE6、IE7、IE8、IE9、IE10、Chrome、Firefox、Safari。IEHasLayout和BlockFormatContent：IEHasLayout是InternetExplorerforWindows的一个私有概念，它决定了一个元素如何显示和约束它包含的内容，如何与其他元素交互和建立联系，如何响应和传递应用程序事件，用户事件等。此呈现功能可以由某些CSS属性不可逆转地触发。并且某些HTML元素默认具有“布局”。目前只有IE6和IE7有这个概率。BFC是W3CCSS2.1规范中的一个概念，它确定元素如何定位其内容，以及它们如何与其他元素关联和交互。这其实和浏览器的兼容性有关，因为大部分的兼容性问题都是由它们引起的。CSSFrameworks：CSS框架是一系列CSS文件的集合，包括基本元素重置、页面布局、网格布局、表单样式、通用规则等代码块，用于简化web前端开发工作，提高工作效率效率。目前常见的框架有：960GridSystem[BlueprintCSS](http://code.google.com/p/blue...Bluetrip[MinimumPage](http://www.minimumpage.com/)还是比较完善的-众所周知和特殊的Twitter框架是Bootstrap，Bootstrap是一个用于快速开发Web应用程序的前端工具包。它是CSS和HTML的集合，使用最新的浏览器技术为您的Web开发提供时尚的排版、表单、按钮、表格、网格系统等。它是基于Less开发的。不支持IE6，在IE7和IE8中效果不佳。CSS3：虽然CSS3还没有正式成为标准，但是现代浏览器包括IE9+、chrome、Firefox等都支持CSS3。CSS提供了很多以前用JavaScript和图像切割来完成的功能。目前主要功能有：圆角、多背景@font-face动画和gradient渐变色BoxshadowRGBa-添加透明色文字阴影CSS性能优化：CSS代码是控制页面显示风格最直接的“工具”和效果，但在性能调整过程中，它们通常被Web开发工程师忽略。事实上，不规范的CSS会对页面渲染效率产生严重影响，尤其是对于结构复杂的Web2.0页面，这种影响更是不可磨灭。因此，编写规范的、高性能的CSS代码将大大提高应用程序的效率。LESS和SASS：CSS预处理器，用来给CSS增加一些编程特性，不考虑浏览器兼容性问题，比如你可以在编程语言中的CSS中使用变量，简单的程序逻辑，函数等一些基本的技巧可以让你的CSS更简洁、更具适应性、更直观的代码和许多其他好处。SASS是基于Ruby开发的。LESS可以在客户端或服务器端使用Node.js或Rhino运行。javascript1.基本数据类型变量表达式和运算符控制语句函数异常OO事件BOM闭包2.高级DOM：DOM是文档对象模型，HTMLDOM定义了访问和操作HTML文档的标准方法。几乎所有的现代浏览器都很好地支持DOM。JSON：（JavaScriptObjectNotation）是一种轻量级的数据交换格式，易于人类读写，也易于机器解析和生成。它是目前事实上的数据交换标准格式。几乎所有的语言都支持JSON，比XML强多了。AJAX：“AsynchronousJavaScriptandXML”（异步JavaScript和-XML），AJAX不是首字母缩略词，是由JesseJamesGaiiett创造并由Google发扬光大的术语。用于创建更好、更快和更具交互性的Web应用程序的技术。JavaScriptFrameworks：大大简化了我们的JavaScript编程工作量，它主要提供以下主要功能：DOM操作、跨浏览器兼容性、程序架构。当然，像jQuery本身并不是一个框架，它是一个库（lib）。目前主流的框架或库如下：jQueryYUIDOJOHML5：类似于CSS3，即虽然没有成为标准，但主流浏览器都支持。HTML5不是HMTL，虽然也提供了一些新的标签，但它的主要用途是JavaScript。HTML5主要提供以下功能：本地音视频播放、Canvas/SVG地理信息硬件加速、本地操作、本地存储、从桌面拖拽文件到浏览器、上传语义标签。将模板语言转换成HTML结构可以大大简化工作量，同时大大提高了代码的可维护性。目前主流的前端模板有：MustCacheJsRender前端MVC：Web应用越来越强大，Javascript代码也越来越多。用什么样的架构来组织大量的JS代码已经成为一个亟待解决的问题。有人将传统的MVC架构移植到前端来解决这些问题。目前主流的前端MVC框架主要有以下几种：Backbone.jsSpineYUIAgility.jsEmber.jsBatman.jsDojoAngularJS(MVVM)KnockoutJS(MVVM)模块化开发：特点是“模块化开发，按需加载”。其中，CommonJS组织定义了AMD规范来规范浏览器端的模块定义。RequireJS和SeaJS是实现AMD的两个优秀框架。详见：http://www.weakweb.com/articles/341.htmlJavaScript单元测试：QUnitJavaScript设计模式NodeJS：将JavaScript移植到服务端，让前后端使用相同技术便于统一开发。而且NodeJS号称是非阻塞的，在特定领域的表现非常强。而这对于前端开发者进入后端开发，然后前后端统一开发，而不用去学习其他后端开发语言，是一个很好的机会。ES5：ECMAScript5，也就是最新的JavaScript规范，对之前的JavaScript做了很多改进，增加了很多新特性，比如JSONECMAScript5，这是最新的JavaScript规范，对之前的JavaScript做了很多改进，增加了很多新的特性功能，例如JSON。其他响应式设计：随着各种智能设备的普及，响应式设计现在很火。以前网页只需要面向PC浏览器，页面宽度可以直接固定，比如960px，但是现在手机访问量已经超过了PC，设备尺寸也越来越大。多种多样，以后还会有更多。在这样的背景下，网页支持全设备访问是一个基本需求，响应式设计可以很好的解决这些问题。Http1.1：GET、POST方法、Request/Response头、状态码等。Web移动开发：开发方式一般为native方法或Web方法。作为一名前端开发者，自然而然的要学习Web移动开发。PhoneGap是必须的，jQueryMobile、SenchaTouch、jQTouch等前端框架都是不错的选择。前端安全：随着前端技术的发展，安全问题已经从服务器端悄悄来到每一个用户身边，窃取用户数据，制造恶意的自我复制蠕虫代码，让病毒在用户间传播，让服务器端更甚，用户可能会在用户不知情的情况下成为攻击者。这绝对不令人震惊。富客户端的应用越来越广泛，前端的安全问题也越来越多。常见的攻击方式有：XSS、跨站脚本（CrossSiteScript）。它是指恶意攻击者在网页中插入恶意的html代码。当用户浏览页面时，会执行嵌入的恶意html代码，从而达到恶意用户的特殊目的。CSRF（CrossSiteRequestForgery），跨站伪造请求。顾名思义，就是通过在用户不知情的情况下伪造连接请求，让用户以自己的身份完成一些攻击者需要达到的目标。Cookie劫持，通过获取页??面的权限，在页面中写入对恶意站点的简单请求，并携带用户的cookie。获取cookie后，可以通过cookie以被盗用户身份直接登录站点。跨域处理：同源策略规定跨域的脚本是隔离的，一个域中的脚本不能访问和操作另一个域的大部分属性和方法。所谓跨域处理就是不同域中的脚本相互调用。有很多方法可以处理它。调试工具：前端调试工具有很多，比如Webkit核心的Firebug、webinspector、IE的iedeveloper等。HTTP相关的fiddler、httpwatch等，还有格式化代码的jsbeatutifier，有助于读取压缩后的JavaScript代码。IETester可以模拟所有的IE版本，是调试IE兼容性的好工具。SEO：搜索引擎优化A/B测试：要确定两个元素或版本（A和B）中哪个更好，您需要同时对两个版本进行试验。最后，选择要使用的最佳版本。Usability/Accessibility：可用性是指产品是否易于使用，用户能否完成任务，效率如何，用户在使用过程中的主观体验有多好。从用户的角度来看，它是产品的质量。好的可用性意味着好的产品质量，这是一个企业的核心竞争力。辅助功能：有视力障碍的网络用户使用屏幕阅读器通过键盘命令向他们朗读网页内容。用语义HTML（将结构和表示分离的HTML）编写的网页可以使这些用户更容易导航，并且这些用户更有可能找到Web文件中的重要信息。前端流程/部署：Grunt、Bower、Yeoman几乎是目前最流行的前端自动化项目构建工具。正则表达式浏览器插件开发很多人的工作是息息相关的。不管怎样，前端工程师至少要满足以下四类客户的需求。产品经理——这些人负责策划应用程序。他们可以想象如何通过应用程序满足用户需求，以及如何通过他们设计的模型赚钱（经常适得其反）。一般来说，这些人追求的是丰富的功能。UI设计师——这些人负责应用程序的视觉设计和交互模拟。他们关心用户对什么敏感、交互的一致性和整体可用性。他们热衷于流畅美观但不易实现的用户界面，但他们往往没有经过深思熟虑。项目经理——这些人实际运行和维护应用程序。项目管理的主要关注点无外乎正常运行时间（uptime）——应用程序始终可用的时间、性能和截止日期。项目经理追求的目标往往是让事情尽可能简单，升级更新时不引入新的问题。最终用户——当然是应用程序的主要消费者。虽然我们不经常与最终用户打交道，但他们的反馈很重要；一款没人愿意使用的应用程序毫无价值。最终用户最需要的是对个人有用的功能，以及竞争产品中的功能。从某种意义上说，一个好的前端工程师就像一位大使，需要时刻以外交官的心态去处理每一天的工作。如何提高前端技术Github是一个优秀的代码托管网站，我们可以在上面创建自己的个人项目，也是一个学习的好地方，可以关注其他优秀的项目。JSFiddle是web开发人员的游乐场，一个可以以多种方式应用的工具。我们可以用它在线编辑一些HTML、CSS、javascript片段。您编辑的代码可以分享给他人，也可以嵌入您的博客等。阅读优秀的开源代码，紧跟技术发展趋势，了解最新的行业技术。您可以通过订阅知名博客和阅读技术新闻来写博客/做笔记。知识的积累。前端实践之路入门：打好基础，同时参与项目。HMTL&XHTMLCSS基础知识JavaScriptDOMJSONAJAXJavaScriptFrameworks基础知识深入：掌握前端核心技术，能够独立工作。HTML5标签、TML标签语义CSSSprite浏览器兼容性IEHasLayout和块格式内容CSS3精通JavaScript框架HTML5前端模板前端MVC模块化开发Http1.1调试工具正则表达式前端项目架构师。CSS性能优化LESS和SASSJavaScript单元测试JavaScript设计模式NodeJSES5Web移动端开发浏览器插件开发前端安全跨域处理SEOA/B测试Usability/B测试Usability/Accessibility前端流程/部署浏览器原理部门：一代宗师。不断学习新的技术交互设计能力和管理能力前端未来走的是技术流路线，即深入研究前端相关的各种技术，比如浏览器原理，研究JavaScript本身、各种W3C标准等。前端技术发展日新月异，各种新技术层出不穷。走这条路很累。往交互设计方向走，前端工程师的交互设计能力在达到一定水平后会有很大的提升，对整个信息架构的把握能力也会更强。可以很好的弥补交易所设计中视觉设计师的不足。其实这条路和第一条并不冲突，甚至可以理解为同一条路。往前走，就是去学习后台开发的技术，比如JAVA/PHP等。其实传统的后台开发人员，大部分都是这种状态，就是前后台都做。我个人认为，如果是这样的话，其实是又回到了老路子。毕竟前端是独立于原来的后台开发的。管理方向，比如项目经理，或者干脆转行，比如公务员。学前端的同学注意啦！！！如果您在学习过程中遇到任何问题或者想获取学习资源，欢迎加入前端学习交流QQ群：328058344
