web前端开发工程是是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过五年。web前端开发，是从网页制作演变而来的，名称上有很明显的时代特征。随着人们对用户体验的要求越来越高，前端开发的技术难度越来越大，web前端开发工程师这一职业终于从设计和制作不分的局面中独立出来。

       早期的前端其实就是table布局，后来发展到所谓的div+css网站重构，再到现在的让人眼花缭乱的各种各样的新技术，web前端技术发展是非常快速的，因此选择了前端这个行业就意味着不停的学习吧。让我们先看看张克军绘制的前端知识体系结构：

      前端开发的核心是HTML+CSS+JavaScript。本质上他们构成了一个MVC框架，即HTML作为信息模型（Model），css控制样式（View），JavaScript负责调度数据和实现某种展现逻辑（Controller）。

      HTML

      1.标签的分类，

      2.标签表示一个元素

      3.按性质分类：block-level 和 inline-level

      4.按语义分类：

            Headings:h1,h2,h3,h4,h5,h6

            paragraphs:p

            Text formatting:em,strong,sub,del,ins,small

            Lists:ul,li,ol,dl,dt,dd

            Tables:table,thead,tbody,tr,th,td

            Forms and input: form,input,select,textarea

            Others:div,span,a,img,<!---->

            HTML5:header,footer,article,section

       XHTML

       XHTML于2000年的1月26日成为W3C标准。W3C将XHTML定义为的HTML版本，XHTML将逐渐取代HTML。XHTML是通过把HTML和XML各自的长处加以结合形成的。XHTML语法规则如下：

      属性名和标签名称必须小写

      属性值必须加引号

      属性不能简写

      用ID属性代替name属性

      XHTML元素必须被正确地嵌套

      XHTML元素必须被关闭

     标签语义化

     为表达语义而标记文档，而不是为了样式，结构良好的文档可以向浏览器传达尽可能多的语义，不论是浏览器位于掌上电脑还是时髦的桌面图形浏览器。结构良好的文档都能向用户传达可视化的语义即使是在老的浏览器，或是在被用户关闭了CSS的现代浏览器中。同时结构良好的HTML代码也有助于搜索引擎索引你的网站。

      不要使用table布局，table是用来表格显示的。

      不要到处滥用div标签，div是用来分块用的。

      不要使用样式标签，如font，center，big，small，b，i，样式可以用CSS来控制，b和i可以用strong和em来代替。

      不要使用换行标签<br />和空格来控制样式，请用CSS。

      尽量不要使用内联CSS

      CSS

      1.css基础知识

        层叠和继承

        优先级

        盒模型

        定位

        浮动

     2.css进阶

        css sprite

        浏览器兼容性

        IE haslayout和block format content

        css frameworks 

        css3

        css性能优化

        less and sass

        css sprite主要用于前端性能优化的一种技术，原理是通过多张背景图合成在一张图片上从而减少http请求，加快载入速度。

        浏览器兼容性

        绝大部分情况下，我们需要考虑浏览器的兼容性，目前正在使用的浏览器版本非常多，IE6，IE7，IE8，IE9，IE10，Chrome，Firefox，Safari。

        IE haslayout和block format content

        IE haslayout是一个Internet explore for Windows的私有概念，他决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。而有些HTML元素则默认就有layout。目前只有IE6和IE7有这个概念。BFC是W3C css2.1规范中的一个概念，他决定了元素如何应对其内容进行定位。以及与其他元素的关系和相互作用。这个其实和浏览器的兼容性有关，因为决大部分的兼容性问题都是他们引起的。参考：css BFC和IE haslayout介绍。

        css framework

        css框架是一系列css文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式，通用规则等代码块，用于简化web前端开发的工作，提高工作效率。目前常见框架有：

       960 grid system

       blueprint css

       bluetrip

       minimum page

       还是一个比较出名的和特殊的框架是Twitter的bootstrap，bootstrap是快速开发web应用程序前端的工具包。它是一个css和HTML的集合，它使用了的浏览器技术，给你的web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。它是基于less开发的，不支持IE6，在IE7和IE8里效果也不咋地。

       css3

       虽然css3还没有正式成为标准，但是IE9+，Chrome，Firefox等现代浏览器都支持css3。css3提供了好多以前需要用JavaScript和切图才能搞定的功能，目前主要功能更有：圆角、多背景、@font-face、动画与渐变、渐变色、box阴影、RGBa-加入透明色、文字阴影。

       css性能优化

       css代码是控制页面显示样式与效果的最直接“工具”  ，但是在性能调优时他们通常会被web开发工程师所忽略，而事实上不规范的css会对页面渲染的效率有严重影响，尤其是对于结构复杂的web2.0页面，这种影响更是不可磨灭的。所以，写出规范的、高性能的css代码会极大地提高应用程序的效率。

       less and sass

       less和sass都是css预处理器，用来为css增加一些编辑的特性，无需考虑浏览器的兼容问题，例如你可以在css中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的css更加简洁。适应性更强，代码更直观等诸多好处。

        sass基于ruby开发，less既可以在客户端运行，也可以借助node.js或者rhino在服务器端运行。