Web前端工作总结

Web前端工作总结

Web前端工作总结「篇一」

所谓行万里路，必先始于足下。刚开始学习WEB前端基础的时候，老师说，其实你们学的这个后面真正去工作的时候可能也不是很会用到，所以就有很多人会问，既然我们都用不到，那干嘛还学呀？其实，对于一个程序员来说，你不仅要有很好的后端专业能力，你还应当具备一定的前端素养，知道一些起码的前端知识。

来到xx的第一个月，我们是以基础为主吧，因为大家到这里的基础都不一样，有一些本身就具备很高水准的人，也有很多像自己一样从小白开始的人，所以，对我们而言，xx开设的这种双元模式对我们是有很大用处的。我们从最基础的开始学习，在学习HTML的时候，我们还延续着很古老和古老的表格制作网站，然后到后面的CSS学习，用CSS样式去进一步完善我们制作的网址，再到着一期的难点前端开发实习工作总结S课程体系，一级最后的前端开发实习工作总结Q和BOOtstrap，可以说这个过程其实也是一个循序肩颈的过程，有简到难的过程。

第一部分：HTML的学习

其实HTML的四天学习的话，重要的就是一个标记的学习，这大概是学习一门语言最基础的一部分吧。但是也不是说背一背就解决问题的，选择IT，程序员这一方面，只要多练习，多敲代码感觉就好了，所以熟练的使用这些标记其实不是很大的问题，对自己来说，比较难的是一个表格和框架，也许会有人说，表格有什么难的，就行列的问题啊，但是不知道为什么，在学习的那几天对于表格的学习和接受能力都没有别的那么好，表格的整体框架能搭出来，但是就是对于表格的美化总做不到自己心里所预期的那样。其实练习的话也是挺多的，对于表格的网页练习做了应该也有一二十个的，但是就是没那么理想，所以这方面的话也是需要自己多加练习和修正的，因为表格的用处还是挺大的。HTML的学习方面还有框架和表单，框架的话，就是一个网页的主体了，网页的大致形式基本上从你的.框架结构就可以知道的，学习框架，重要的就是网页的布局如何划分，然后利用框架的嵌套，浮动就可以解决的，学习过程也不会是很大的难度。

想想HTML还学了些什么呢？表单！表单对前端开发来说还是挺高的，因为我们能在一个网页中看到很多的表单应用。包括用户的注册啦，密码验证啦，还有搜索栏之类的，几乎全是表单的应用。表单学习比较重要的地方应该就是那十来个表单控件的应用，这些表单控件进一步区分的话还有就是单边标记和双边标的的表单控件，因为很多单边标记的表单，他的值一般只能是存在value当中，如果不注意的话，很多时候我们会忘记写上这个value。这个阶段的表单感觉并不是那么难，当然，学到后面的前端开发实习工作总结S之后，相对于表单验证之类的才感觉难了很多。

第二部分：CSS学习

对我来说，CSS课程虽然只有三天，但是却是更应该学好的一个模块。因为我们都知道，其实一个网站的WEB前端，就是用加CSS来写的，不是用之前的表格来写的，足以见得CSS的重要性。CSS就是网页样式，一个网页的整体美感，在你确定了框架之后，就看你的CSS样式的添加了，所以一直以来都很想把CSS学好。记得CSS学习的那几天，自己的消化还是很好的，自己去独立完成练习的时候也是没有太大难度的，但是不知道是为什么，到后面学习前端开发实习工作总结S、前端开发实习工作总结Q的时候，操作CSS时居然会吧CSS和HTML弄的有点混淆，这一点一直没做好。CSS的学习还有一个地方就是浮动，因为存在块元素和行辈元素，块元素因为其本身特性，一个块元素标记他要占用一整行的空间，而一个行内元素他只能占用行内的一些空间，但是在实际操作中，很多时候我们却要想将多个块元素排在同一行，或者将多个行内元素排在不同行，这时候就可以使用浮动的方法来实现，浮动最主要做的就是这个，唯一要记住的一点就是做了浮动之后，如果他的父元素是没有进行匡高的设定的话，是不是要进行清除浮动，防止下面的操作也是有浮动的。

第三部分：重点学习前端开发实习工作总结

前端开发实习工作总结S是相对于这整个月学习的重点吧，也是很多人没办法很好接触的地方，当然，自己在这里的学习也是有不足的地方。像一些对属性的操作的标记之类，懂得怎么用，但是不是很熟悉，所以经常在操作的时候要去查手册。学的最不好的一个地方应该是将数组中的元素按照一定的规则或者顺序添加到指定或对应的表格中，这中题型是自己做的比较少的，也是掌握很不好的地方，所以也希望用放假的这几天好好练习一下，不能拖到下一个阶段去。个人对前端开发实习工作总结S的理解其实就是大量算法的集合，因为很多时候你都会用到函数，只是多了一些找元素和对元素绑定标记的过程，最重要的还是构造函数，调用函数的过程！

第四部分：前端开发实习工作总结Q及Bootstrap

对于前端开发实习工作总结Q和Bootstrap的学习来说，其实就是一个应用的过程吧，所有的函数都帮你写好了，你只需要学会调用就好了的。当然。调用他，其实对于前端开发实习工作总结Q来说，学习的过程没有具备很大的难度，只是尝试着去多写写，写两三次基本就记住怎么用了。最后还有一天的Bootstrap学习，写过一些案例，只要会改，基本没有太大的难度。

后续：其实对于WEB前端的学习的话重要的就是多用，很多东西我们上课听得时候其实都基本听得懂，但是更重要的是在于你课后的练习，离开了老师的一个思维引导，我们该怎样去完成项目才是我们该学会的。这一个月的。学习难度系数都不是很高。但却是一个比较繁杂的过程，因为作为前端来说，我们需要不断的优化，不断的修正，美化整个页面。不管是前端还是后端，都希望自己能好好学！

Web前端工作总结「篇二」

在我们通过层层考验通过面试进入企业之后，我们面临的考验还远远没有结束，试用期是企业考察一个员工最关键是时期，在这段时间内，除了出色的表现之外，一份好的工作总结也是至关重要的。

其实写一份优秀的工作总结也是有章可循的，一些关键的地方我们必须要清楚的列举出来，一是我们自身进入企业的一些感受，然后是我们承担的工作，获得的收获，自身的优势、（当劣势然这个也是有技巧的，写自己不足的时候注意不要是爱偷懒、不合群、适应力差等企业比较忌讳的缺陷，可以是经验不足，并表示愿意跟老同事学习等。）最后就是对于自身一些规划或是对于做好工作的一些计划和建议等等。

掌握以上几点，写一份领导满意，也能够表现自身实力的试用期工作总结就会变成一件很简单的事情了！亲爱的朋友们，加油哦！祝你工作顺利！试用期工作总结范文在紧张、充实的工作氛围下，时间总是过得很快，转眼之间，来到公司已经快三个月了。从入职到现在，是一个从旧年到新年的过程，也是一个不断成长的过程。

我进入公司的职位是xx，对于公司能够给我这个成长和锻炼的机会，我很珍惜，所以每天我都是非常认真努力的去做我的工作，也因此感到很充实，但是由于xx，所以有不少不足之处需要改进，在这里做一下总结和分析，以求能够扬长避短，更好的发挥自身的优势，把工作做得更好。

对于自身的'职业规划还有待进一步明确，目前的想法是把本职工作做好，并加强相关的技能和知识的学习。然后再根据自己的特点进行相应的调整。短短三个月的时间，我参与并深切感受了公司的，感觉受益颇丰，因工作而成长，因成长而快乐，感谢公司，感谢领导，感谢给予我支持和帮助的同事们，我愿与你们一同成长，为企业的发展贡献自己的力量。

Web前端工作总结「篇三」

进入xxweb班近一个月了，从一无所知的小白到现在也完成了京东详情页的一个小项目。学习过程中除了偶尔遇到困难，总体还算顺利。在这里主要想分享自己以一个文科生——零基础学员的角度来学习web前端开发的感受。

由于之前在大学里是学的旅游专业，和计算机毫无关系，来到xx时对自己有些半信半疑。不少人甚至怀疑xx是行骗机构。在做了全面的了解之后，我劝服家人同意我来这里学习。另一方面，我向老师咨询了自己学习的方向，考虑到自己从文科到计算机专业跨度较大的转变，我在Java与web之间选择了web。相对于Java，web的学习更基础，容易入手，就业的机会也非常多。

Web开班第一天，老师即从网页基础、HTML入手，攫取重点，给我们介绍了它的相关知识。我们主要学习了HTML5，里面有很多的新特性且时下较为流行。它相当于一个网页界面的宏观架构。如果把一个网页的实现比作是一座建筑的建造过程，那么HTML即是这座建筑里的钢筋混泥土，搭建起整个建筑的框架、承重。

之后，我们又学习了CSS基础样式，仍然借用上面的比喻，CSS则相当于建筑里各个房间的不同结构，它们使得这座建筑更加的多样化。且相对于HTML，它更加的复杂、多样化，呈现的效果也具有更多的可能性。老师向我们推荐了《CSS禅意花园》这本书，里面列举了丰富且多种多样的CSS样式。

作为今后可能成为的优秀前端工程师，仅仅学习自己内部的知识是远远不够的。因此，第一个月中我们也学习了UI中PS绘图制作基础，这对于一个前端来说也是非常重要的，在今后的工作中，我们可能会面对各种各样的问题，如果掌握部分PS尤其是切图技术，在和UI的接触中可以减少很多不必要的繁琐工作。

总之，作为一个前端工程师，我们所要掌握的知识是全面的，当我们写代码时的思维是缜密的。HTML和CSS是基础中的基础。之后我们会学习更多的JavaScript相关知识和其他，希望自己在这过程中仍能保持谦逊的的心态，去学习前人留下的珍贵宝藏。

Web前端工作总结「篇四」

一、实训目的

通过对java语言、JavaWeb、Oracle数据库应用设计及SQL语言的复习和锻炼，并且通过使用MyEclipse开发平台设计库存管理系统项目，以达到充分熟悉开发平台及其应用设计。

同时掌握并实践软件项目设计规范及其开发流程：需求分析、概要设计、详细设计、代码编写、系统测试及软件手册编写，以便提前适应软件公司开发流程、环境和工作要求进一步了解java开发的相关知识，掌握java开发的基本技术，丰富java开发的实战经验。

学习SQL的基础知识及正确的运用方法，和有用的相关技术，提高自己的工作效率。

通过实训，培养我们综合运用已学知识Java语言的面向对象编程能力；培养我们动手能力；培养我们良好编程规范、编程方法；以便能较全面地理解、掌握和综合运用所学的知识，提高自身的编程能力；增强自己的团队协作意识，了解软件开发的思考角度和主要流程。

为毕业之后能够更快地进入工作状态并且能够更好的工作，打好一定的基础。

二、实训主要流程

1、公司管理规则，程序员素质，程序员编码规范；

2、需求开发与管理；

3、面向对象分析与设计，面向对象编程的特性；

4、javaSE、javaWeb、页面设计—JSP页面；

5、数据库设计、SQL应用；

6、软件需求分析与设计；

7、项目实战；

三、实训内容

数据库

数据库是数据的结构化集合。

计算机是处理大量数据的理想工具，因此，数据库管理系统在计算方面扮演着关键的中心角色，或是作为独立的实用工具，或是作为其他应用程序的组成部分。

Oracle服务器还有一套实用的特性集合，这些特性是通过与我们用户的`密切合作而开发的。

在我们的基准测试主页上，给出了Oracle服务器和其他数据库管理器的比较结果。

Oracle服务器最初是为处理大型数据库而开发的，与已有的解决方案相比，它的速度更快，多年以来，它已成功用于众多要求很高的生产环境。

尽管Oracle始终在不断发展，但目前Oracle服务器已能提供丰富和有用的功能。

它具有良好的连通性、速度和安全性，这使的Oracle十分适合于访问Internet上的数据库。

与SQL的应用。

Java语言是编写数据库应用程序的杰出语言之一，它提供了方便访问数据的技术。

利用Java语言中的JDBC技术，用户能方便地开发出基于Web网页的数据库访问程序，从而扩充网络应用功能。

JDBC（Java Database Connectivity，Java数据库连接）是一种用于执行SQL语句的Java API，可以为多种关系数据库提供统一的访问接口。

JDBC由一组用Java语言编写的类与接口组成，通过调用这些类和接口所提供的方法，用户能够以一致的方式连接多种不同的数据库系统（如Access、SQL

Server 20xx、Oracle、Sybase等），进而可使用标准的SQL语言来存取数据库中的数据，而不必再为每一种数据库系统编写不同的Java程序代码。

Web前端工作总结「篇五」

一、实训项目

简易记事本

二、实训目的和要求

本次实训是对前面学过的所有面向对象的编程思想以及JavaWEB编程方法的一个总结、回顾和实践，因此，开始设计前学生一定要先回顾以前所学的内容，明确本次作业设计所要用到的技术点并到网上搜索以及查阅相关的书籍来搜集资料。

通过编写采用JSP+Servlet+JavaBean技术框架的应用系统综合实例，以掌握JavaWEB开发技术。

具体要求有以下几点：

1、问题的描述与程序将要实现的具体功能。

2、程序功能实现的具体设计思路或框架，并检查流程设计。

3、代码实现。

4、设计小结。

三、实训项目的开发环境和所使用的技术

基于J2SE基础，利用MyEclipse8.5以上版本的集成开发环境完成实训项目，界面友好，代码的可维护性好，有必要的注释和相应的文档。

四、实训地点、日程、分组情况：

实训地点：4栋303机房

日程：

第一阶段：

1、班级分组，选定课题，查阅相关资料半天。

2、划分模块、小组成员分工半天。

3、利用CASE工具进行系统设计和分析，并编制源程序5天。

第二阶段：上机调试，修改、调试、完善系统2天。

第三阶段：撰写、上交课程设计报告，上交课程设计作品源程序（每人1份）2天。

Web前端工作总结「篇六」

这里跟大家谈谈个人对WEB前端开发的一些经验（当然都是个人的一些理解，有什么地方说的欠妥或不对的地方还请包含和指正），这里我就从WEB标准开始吧。

WEB标准是什么？

说是WEB标准，不过我这里主要是对XHTML1.1和CSS2.1的一些经验总结。因为WEB含盖的内容实在是太多了，“WEB标准”是一系列标准的总称，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以这里要跟大家指出来一下，WEB标准不是我们所说的DIV+CSS。刚刚上面提到了——DIV+CSS，这里要说明下，这样说其实是不正确的。DIV+CSS准确的说法（个人的理解）应该是：采用W3C推荐的WEB标准中的XHTML1.1结合CSS2.0样式表制作页面的方法，DIV应该指的是XHTML标签，而CSS显示是指的CSS样式表了。

采用WEB标准开发的好处？

那么W3C为什么会推荐这样的页面制作方法呢？下面我们就简单的看看采用WEB标准开发（个人理解的）相对以前TABLE布局的优势有哪些？

1、节约运营成本

看看我们的WEB标准制作方法是如何做到的？

采用WEB标准制作，我们可以做到表现很形式的分离，我们用XHTML来表现（数据），用CSS来控制（页面元素呈现的）形式。写的好的页面，XHTML代码中基本上都是用户要看的数据，还其他修饰性的东西，全部由我们的CSS来控制。这

样一来我们的（XHTML）页面的体积就大大减小了，这样你在带宽上的费用就会大家降低了，这个怎么降低的，你可以想象一下，YAHOO的首页小1K，100W个人一起访问，那么带宽节约了多少？而且可以更充分的利用带宽。

而我们的CSS控制了，所有的页面元素的样式，现在想改网站的整体风格，你只需要花几分钟修改一下一个CSS文件，就可以轻松搞定了。维护的成本也下来了，省了不少钱了吧？还有，你开这个页面的速度会快很多啊，一个让你等半分钟的页面，除非里面的信息对你很有用，不然我们大家基本都没有太多的时间去用来等待的。

2、对用户友好更友好，且有机会获得更多的用户。

现在来说说用户友好。首先我想把我们的用户来分下类。

第一类：普通用户（每个访问我们网站的人）；

第二类：搜索引擎；

采用WEB标准开发的页面，结构清晰，页面体积小，浏览器兼容性好。普通用户访问的时候，页面打开速度快，而且不管用户使用那种浏览器，都能够正常访问（显示）页面，且页面的结构清晰，要找的数据可以很方便的浏览到。

而对搜索引擎来说，一个好的采用WEB标准开发的页面，都是做过SEO优化的，它访问起来很友好，很容易理解你的页面中哪里是标题（H1~H6标签），哪里是段落（p标签），哪里是段落里要强调的内容（strong标签）等，它可以很容易的分析出来。而一个SEO好的站点，大家都知道，被搜索引擎收录的机会更多，这个也意味着您的网站会被更多的普通用户访问到，给你的站点带来更多的用户。

一个能帮我们省下大笔费用，提高工作效率。同时又能够提高页面浏览速度，对用户友好，甚至能够不花钱宣传，就能给你带来更多用户的技术。你说你会不会去使用它？这个也正式我们的W3C推荐使用WEB标准开放网站的原因啊。而这个技术也得到了我们广大用户的认可，所以您现在需要学习WEB标准啊。温习完了基础课程，现在正式开始讲XHTML和CSS的`技巧了。

合理的布局

有朋友会开始问了，怎么一开始就开始讲合理的布局了呢?前面我们提到了一些知识点——“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”。这些东西，都是我们做了合理布局的结果。而且我个人觉得，我们采用WEB标准制作的一切都是从这个知识点开始的，所以我这里就先来说这个话题。

那么大家又会开始问，怎样的一个页面，才算是合理的布局的呢？这个问题问题问得好，也是我们大家刚开始学用WEB标准的问得最多的问题之一，我也曾经常被这个问题所困扰，这里就说说我对合理布局的一些理解。

在开始讲合理布局的页面要达到的要素前，我们还是用个实例来讲解会更直观些。先来看看这个图片：不错，这个是一个文章详细页，没有左右两栏布局，不过这里我重点要讲的是合理的布局，在稍后的文章中我会详细的介绍浮动元素。好，回到刚才的话题，大家看到了这个页面了。

Web前端工作总结「篇七」

做了整一年web前端开发，对这个职业感触颇多。

这是一个新的职业，入门相对后台的开发人员较低，会一些基本的技术就可以了，如：html、css、js等。

但是，随着开发时间的增长你就会发现自己很快的就会进入一个瓶颈，可能会错误的认为，做前端开发不过如此。可是，如果你静下心来在回头看你写的代码，你会发现之前需求的实现方式并不是最好的，举个最简单的例子，有没有使用jquery的连缀式编程。

如：$(#id).css({color:red});$(#id).show

可以写成，$(#id).css({color:red}).show

不要小看这次小小的优化，实力都是慢慢积累的。

上面只是一个简单举例，要说明的是，虽然这个职业入门比较低，但是每一次提高都是艰难的。

几乎每个前台工程师都是自学成才，因为牛人本来就少，难得遇见，就算遇到一个你也不一定就有机会能跟着他学习。所以在自学过程是坎坷的，甚至都不知道改如何进步，当然本人也在努力中，呵呵。

分享一点经验：

1.千万注意写代码、和命名规范（也许n久之后或者项目大的时候这才是重中之重）。

的文档结构。好的文档结构会让你写css，js变的简单合理（胜过好的代码实现方式）。

3.尽量尽自己的水平优化代码html，css，js（每一次优化都是提高）。

4.多去关组网站性能优化的方式（最后网站的访问速度和用户体验是证明你能力的时候）。

个人目前的水平有限，就分享这么多吧。

学习经验：

个人觉得，尽量看书加上实际操作来学习，因为从书上学习东西比较系统，学到的东西是系统的而不是一片一片或者一点一点的。最重要的是要去验证书上写的跟实战的结果进行对比，你会发现实际可能还真不一定是那样的。等系统学习完之后，再要提高可能就要找论坛，博客等针对某个点进行突破，后面的成长还有很长。个人能力不到那个地方不在妄加说辞。

如果按照这样的方式来学习，那么开什么书就是最重要的了，看一本好的书可以使你恍然大悟，看一本垃圾的书可能连作者都不知道他写的是什么。个人觉得“图灵”系列的书籍都是不错的，清晰、透彻，比较适合我们来学习，比如：javascript高级程序设计,精通html与css设计模式等。

记得，每个web前台开发工程师都应该具有很强的想象力，发挥想象力，并去验证自己的想法才会提高。

Web前端工作总结「篇八」

时间过的真快，一眨眼时间我在xxxx软件公司为期三个多月的实习生活就要结束了，而我也要重新回到校园继续学习与参加20xx各公司的校园招聘，我的实习生涯要暂时告一段落。

回顾找实习的过程，只能用一个字来形容：“难”。这种困难不同于学校所遇到的，我个人觉得比学校遇到的难题更上了一个层次。首先，找到一份工作都很难。想想也是，谁愿意找一个没有任何经验，而且还是想做短期的学生呀。我找过贴有“招聘启示”的店面。谁知道，当我说出我的原意后。本来笑面相迎的老板来个180度大转弯，冷冷回应一句“我们这里已经找好了人”。鬼才信他的话，那启示明明是新的，而且店里面就他一个人，哪来的新人？陆续还找过别的工作，我甚至找过中介，但都失败了。最后还是通过自己不懈的努力，经历千辛万苦找到了一份比较适合的工作。然而三个多月在公司的工作生活，我感到很庆幸和满意。庆幸的是我比其它一部分同学多了三个月在软件公司工作的经历，这使我毕业后能够更好更快地适应软件公司的工作生活和节奏。满意的是公司为我提供了良好的工作学习环境，我刚到公司不久公司就为我提供了电脑和相应的座位，当我在android、java过程中遇到不懂问题的时候，主管，同事都会毫不吝啬的为我讲解，让我感受到公司团结向上的氛围，软件公司最重要的也就是这种团队合作的精神。看来这也是公司先进的管理理念吧。

这三个月的工作、生活是有味道的，所以现在回想起来，特别怀念，要不没有这些味道，我想我的实习就这样的过去了。那种种的味道还深深的记住我的脑海里，叫人无法忘记。这些都是我的'人生中很难得的一次经验。人生经验都是在人我们的人生中不断的积累的，在实习中我所收获到的不止是我的知识，更重要的是我的精神也有了进一步的提高。在这三个月中，我对软件开发工程师有了新的理解，在以前的观念中软件工程师主要工作就是编写代码。但是通过三个月的工作，我发现软件工程师不仅要会编程，还要把开发的系统大概的思路，构架都构思出来。所以要做一名软件工程师需要的不仅是扎实的编程功底，还要有比较好的逻辑思维和大胆创新的精神，记住要做一个软件工程师需要的是冰冻三尺非一日之寒的努力、踏实、上进、求新、求变、求实的态度和决心！这无疑给我迷惘的未来给了一盏明亮的灯塔。

在这三个多月的时间中，我学习了新的开发extjs框架，ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。以前网站的前端都是用js、jsp、HTML实现一个小功能，往往需要很多的代码，那叫一个累啊！而使用extjs，很复杂的功能只要几行代码就能实现，特别是表格处理方面。无论是界面之美，还是功能之强，ext的表格控件都高居榜首。单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功能ExtJS轻量级实现。自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。再加上可编辑grid，添加新行，删除一或多行，提示多行数据，推拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件里实现了。Extjs的强大是在令人无话可说。

我是属于公司研发部的一员，我对自己技术上的特点作一个概括。熟悉Android架构以及Android SDK开发，熟悉java、C++，对常用的数据结构、算法和设计模式有一定的了解熟悉JSP、JDBC、XML和Javascript，熟悉struts2+Hibernate+Spring框架开发。好的心态+好的技术=好的人生，这是我的人生信条。希望我能用自己的技术为社会创造价值。我虽然离开了公司，我仍然非常感谢公司、领导、主管、同事给我的帮助。

Web前端工作总结「篇九」

大三下学期开始自学的.前端，断断续续半年多，开始找前端相关的工作;到现在，走过了毕业期的十字路口，已经工作一年了;好吧，严重掉底子了，我是个比较懒的人。既然起步较晚，那么就只有马不停蹄的追赶了，奔跑吧，小前端!

写这个20xx的年终总结，没什么经验之谈，只是继往开来，反省反省;继续追逐大神们的脚步，偶尔站在巨人的肩膀上眺望下未来!

一、原谅我，Jquery：

工作之前，那时什么基础都没有，只是逼于即将毕业后的压力，百度到了前端开发，就直接从原生JS开始学了;学不动了，问了下认识的计算机系的学长，知道了Jquery，OK，学吧。然而我并没有太大兴趣。因为我买了本‘高三’，jquery只是对‘高三’进行了整体的封装，他把我要做的事都做了，那好吧，继续原生JS喽;不得不说那时做的最多的就是原生JS仿写各种特效;还想了个主题，弄了一堆静态页面，拼了个网站的样子作为找工作的‘作品’，后来

后来，我知道我错了，写那些只是属于前端基础的一小部分，工作毕竟是工作，Demo终难上台面，团队的配合以及开发的效率才是最重要的;现在工作以jquery为主，至于曾经写的各种效果，现在也都有对应的现成组件，拿来用就是;之前无知时忽视了的jquery，工作后开始马不停蹄的搜索各种资源补缺了，还好原生JS没有丢，作为前端的根基，在jquery以外帮了我不少;现在，基础组件一般都是以jquery插件的形式做的，但是业余有时间我都会用原生JS实现一些，因为我不想因为jquery而逐渐忽视原生JS;

二、必须追求的模块化：

前端的模块化是非常必要的，之前对模块化一直是停留在概念阶段，没有太多实践，只是感觉特别好，毕竟在追逐大神们的脚步嘛!忍不住选择了玉伯老师的Seajs，试着把原来写的jquery和几个组件，划分成模块，用Seajs组织到一起;由于工作中的前端结构已趋于稳定，一下子不可能整体改，所以我只是在本地新建了个目录，一有时间就考虑下，怎么以模块化的搞法从新组织下;私下里，为了证实我在工作的本地前端结构可用，还专门弄了个简单的博客，按照自己对模块化的想法，首先以自己的博客作为实验场，来验证可行性;不管结果怎么样，不管这样做好不好，就当是一种锻炼吧;愚论拙见，只当逗大神们一笑吧;

三、弱小者的强大力量――CSS：

HTML、CSS作为前端开发最基础的一部分，可能在后端眼中不值一提吧(忽视这个小小的吐槽吧。)，确实我也这么认为;但是，我更认为，前提是你能够把这些基础乱熟于心，并且对各种浏览器的兼容性了然于胸，闭着眼睛也能写出简洁明了的HTML、CSS;好吧，其实这只是我对自己的一个长期的要求;因为模块化，不只是JS，对应的少不了HTML、CSS;为了与JS的模块化遥相呼应，那么CSS的模块化是不可忽略的，只是就CSS来说，要想做到极致精简、模块化、可复用，不是想想就可以的;是的，你必须还是得要把一些逻辑性的东西引入CSS才行;恩，SASS是首选的CSS预编译器之一;风行于前后端的Bootstrap之前是基于Less的，后来全部开始转向Sass了;所以，无论现在对于Bootstrap熟练度有多少，我想其对于前端样式的构建思想是非常值得学习的;以Sass作为前端样式的构建工具，来实现精简、模块化、可复用的样式，我想那不是梦，当然，一切都是需要历练和积累的;

四、革命性的转折点：Nodejs

不管Nodejs属于前端还是后端，我想其对于前端工作的变革性影响都是不言而喻的;在我心里，Nodejs将前端的模块化思想做到了极致，包的数量多达十几万的NPM社区足以证明其伟大之处;Nodejs内部实现了Commonjs规范，以require模块的方式调用内部模块和外部模块;所以NPM社区如此强大是必然的;由此各大类库和框架都实现了基于Nodejs的模块化实现;并且远不止这些，基于Nodejs还带来了前端的工程化;各种前端自动化工具推陈出新，不断向前端工作注入新的活力;比如：Grunt、Gulp、Browserify、Webpack等等;

不好意思，Nodejs学的还不多，若有夸大其词的地方，大神还是忽视我吧;花满楼的博客只是对Nodejs小小的探索，诸多不足，有待改进，望大神路过指导;

五、话说，我想多了：

每次信誓旦旦做的规划，都会随着时间的脚步渐渐风化;每次回顾过去，只留一声叹：时间都去哪了?呵呵，还是走好脚下的路吧，毕竟做该做的事总归是好的;愿和我一样的小前端们，梦想都不是白日梦!

六、遇见最好的你：Angularjs

目前工作的情况并没有太大的变动，有些事还是得以团队工作为重;只是业余会多些躁动，20xx年，想学好Angularjs;一方面作为工作内的技术储备，另一方面，我的实验场还是需要多些内含的，打算首先用Angularjs改造博客的后端程序;权当锻炼吧!风靡前端的框架还有很多，大神们也是有各种论调，我想选Angularjs因为我胃口小，一口吃不下一个包子，还是细嚼慢咽的好;主要是：Angularjs的思想很吸引我，MVC、路由、双向数据绑定、依赖注入、指令系统等;对我来说既陌生又无限的吊胃口;无论学的怎么样，我想理解这些思想对现在的我来说恐怕才是最重要的。

Web前端工作总结「篇十」

20xx年不知不觉已经在我们手中流逝，也许是因为忙碌，也许是因为充实，所有觉得时间过得很快。来到来到我们的这个积极向上的长沙seo搜遇网络已经有2年多了。在工作中，经历了很多欢快困难的时刻，结识了一批工作上的好同事，生活上的'好朋友，领悟了很多新技能，感谢领导给了我展示的空间。在20xx年的这段时间里，通过自身的不懈努力，在工作上取得了一定的成果，但也存在了很多不足之处。回首20xx年，现在将web前端开发工作总结一下。

从去年开始，我们项目组就接手了OA系统开发，由于框架的前端样式老旧，我们打算将框架的样式全面改版，包括样式风格，用户体验等多方面着手处理。

一、框架采用样式风格

一个系统好不好，第一映像很重要，就像别人对你的认识是从第一印象开始的，这种第一印象一且形成将很难改变。研究表明，当一个人见到另一个人时第一印象往往是在前3秒确定的，而且是在没有任何语言交流的前3秒，因为别人已从你的形象气质窥见了你的基本特征。在应酬中，如果第一印象不好，想要挽回，就要做很大的努力，所以，一定要特别注意第一印象。所以系统的第一印象也是非常重要的。

我们采用layui样式风格，在layui上加以个性化样式的修改，让网站第一印象看上去大气，清晰，简洁。在中间我们付出了很多努力与坚持，才能让我们现在的OA系统看上去简约而不简单。

二、提升用户体验操作

1、我们采用了简单易懂的网站架构，让用户看到网站界面就知道如何操作，将每个用户桌面做自定义操作，让每个用户都有自己个性化的桌面。

2、系统采用方便明了的操作方式，系统都是为了迎合用户，如果操作界面太麻烦，用户可能直接放弃，所以需要将系统的设置尽量人性化。

3、系统采用用户引导方式的界面，一个步骤接着下一个步骤，让用户不知不觉中处理好工作上的任务。

三、web前端开发存在不足

虽然网站整体样式风格已经调整过来，由于之前系统框架原因，网站样式调整起来十分吃力，有部分样式只能做风格上的调整，离预期效果稍有偏差。在工作时间很仓促的情况下，事情多了，就一定要有详实而主次分明的计划，哪些需要立即完成，哪些可以缓缓加班完成，今年在计划上自己进步很大，但在这方面还有很大的优化空间。

20xx年web前端开发工作计划

在新的一年来临之际，我希望我们的OA系统做得更好，继续完善系统整体前端样式风格，用户体验。不断加强个人web前端开发的技能，提高工作效率，扬长避短，发奋工作，克难攻坚，做好web前端开发的工作计划，力求把OA系统做到更好。也希望我们OA团队给公司带来更大的价值，祝我们搜遇网络公司成功上市！在新的一年里大展宏图。

Web前端工作总结「篇十一」

web前端开发年终总结范文

我们生活在互联网时代，所有前端工程师至少都应该掌握某些基本的知识，才能有效地完成自己的工作。下面是web前端开发年终总结，为大家提供参考。

做了整一年web前端开发，对这个职业感触颇多。

这是一个新的职业，入门相对后台的开发人员较低，会一些基本的技术就可以了，如：html、css、js等。

但是，随着开发时间的增长你就会发现自己很快的就会进入一个瓶颈，可能会错误的认为，做前端开发不过如此。可是，如果你静下心来在回头看你写的代码，你会发现之前需求的实现方式并不是最好的，举个最简单的例子，有没有使用jquery的连缀式编程。

如：$(#id).css({color:red});$(#id).show

可以写成，$(#id).css({color:red}).show

不要小看这次小小的优化，实力都是慢慢积累的。

上面只是一个简单举例，要说明的是，虽然这个职业入门比较低，但是每一次提高都是艰难的。

几乎每个前台工程师都是自学成才，因为牛人本来就少，难得遇见，就算遇到一个你也不一定就有机会能跟着他学习。所以在自学过程是坎坷的，甚至都不知道改如何进步，当然本人也在努力中。

分享一点经验：

1.千万注意写代码、和命名规范（也许n久之后或者项目大的时候这才是重中之重）。

的文档结构。好的文档结构会让你写css，js变的简单合理（胜过好的代码实现方式）。

3.尽量尽自己的水平优化代码html，css，js（每一次优化都是提高）。

4.多去关组网站性能优化的方式（最后网站的访问速度和用户体验是证明你能力的时候）。

个人目前的水平有限，就分享这么多吧。

学习经验：

个人觉得，尽量看书加上实际操作来学习，因为从书上学习东西比较系统，学到的东西是系统的而不是一片一片或者一点一点的。最重要的是要去验证书上写的

跟实战的`结果进行对比，你会发现实际可能还真不一定是那样的。等系统学习完之后，再要提高可能就要找论坛，博客等针对某个点进行突破，后面的成长还有很长。个人能力不到那个地方不在妄加说辞。

如果按照这样的方式来学习，那么开什么书就是最重要的了，看一本好的书可以使你恍然大悟，看一本垃圾的书可能连作者都不知道他写的是什么。个人觉得“图灵”系列的书籍都是不错的，清晰、透彻，比较适合我们来学习，比如：javascript高级程序设计,精通html与css设计模式等。

记得，每个web前台开发工程师都应该具有很强的想象力，发挥想象力，并去验证自己的想法才会提高。

Web前端工作总结「篇十二」

前端工作了一段时间经验总结，献给做前端的同学，希望对大家有所帮助。

一、编辑器的选择

推荐webstorm，绝对的神器。不要用dw了，它最骄傲的所见即所得其实没什么用，因为根本就不准，代码提示也不人性话，不方便。Webstorm的方便之处（目前用到的）

1.可以分屏，左右同时编辑两个文件，比如左边编辑html，右边编辑它的css/js。

2.代码提示很人性话，分级结构也很清洗。

3.方便查找，如ctrl+点击类名，就可自动定位到该css样式。

4.支持自定义模版，这样快速开始完成一些经常用到的代码。

5.支持个性化主题，字体等。

6.强大的插件库，自己去选吧。

7 .ctrl+/,注释所选区域。

sublime编辑器，简单灵活轻量级，支持代码自动完成、代码高亮、快速生成，以及更多好用的插件，也可以配置scss。sublime编辑器配置

二、布局

提到布局最头疼就是浏览器兼容性，现在才发现其实很多兼容性其实是很容易避免的，只要做到你对自己的每一句代码都知道它的意义和作用，还有避免用一些

有兼容性的样式属性就行了，很多情况都可以不用hack，一样能实现多浏览器兼容。

1.不要用hack，一定有更好的解决办法。很多情况都是因为代码结构不够好才会出现兼容性问题。

2. 思考如何用最少的标签及属性实现页面。

3.理解结构，表现，行为分离的意义。

4. 布局前一定要先分析页面结构，磨刀不误砍柴工，分析怎么用更好的办法实现，理清思路后，再切图写代码。

5. 深刻理解类的概念，注重归类元素，多总结，保持代码风格（包括前后代码的空格位置、多少，以及命名风格）严格一致并且尽量简洁。

6. 多用组合，少用继承。

7. 命名空间：驼峰命名法用于区别不同单词，划线用于表明从属关系。

8. 低权重原则------避免滥用子选择器(即类似#test span这样的选择符)。

三、技巧

1. 写js效果时一定要注意先分析好效果的行为，尽量用最简单通用性的代码。分析步骤可以是1.先把要实现的功能一步一步的写在纸上（即自然语言）2.再根据自然语言翻译成机器语言，用jquery写的代码一定要注意代码的可移植性、通用性。

2. 组织css，推荐使用base、common、page三层，base可以分为两大部分：css reset（覆盖掉浏览器提供的默认样式，可以参考：/yui/）和通用原子类。（疑问：如果使用css reset后，那么之前的要求的标签语义化是否就没有意义了呢？因为所有语义化的标签默认样式都被reset了）,不用*{ margin:0;

padding:0;}的原因是因为“*”表示所有标签，其中包含大量生僻标签和为向前兼容而留下来的淘汰标签。

3. 把多个按钮放在一张图定位时，最好两个按钮之间隔一个像素，要不然有些版本的chrome可能解析不准确。

4. .clearfix:before, .clearfix:after { content: ""; display:

table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } 注意如果用了浮动，一定要清除浮动，深刻理解浮动的作用很重要。 在层里调整文字的垂直位置可以用g。 注意模块化布局，增加代码的重用性，尽量只给最里层的内容层设高度，一般如果高度不确定的都设置成自适应，这

样有助于内容拉伸，也便于修改模块的高度。 大框架，尽量简单的分，比如左右结构最好就设置成左右，没必要搞成左中右。 尽量不要在html代码里插入img，把他设置在结构里，然后用css插入图片。

5. jquery编程习惯可以参考：

把所有用$（）选中的元素保存在前缀为$的js变量里2.每个函数结束都要用return false 结束掉函数。

6. 布局前，先构思好整个页面的结构，一个好的结构要便于维护，加载更快，布局时也更容易。布局时，稳扎稳打，一步步弄好后（既没有用hack，也没有兼容性问题了），再布局下一个板块。 布局一个带js效果的页面，要先把效果图上的页面效果，完整布局好后，再考虑加动作的事情。并且一定要分析好页面的结构，以最少的标签，以及标签要与所放内容对应来布局。

7. jquery代码一般要用$(document).ready(function{}确保页面dom准备好了再进行js操作。 页面按钮点击时边框变红，点击完后边框变蓝可以用outline:none;解决。 有动画的层最好设置overflow：hidden以免层里面的内容在外层宽高改变时撑出层外。

8. 写js效果时一定要注意先分析好效果的行为，尽量用最简单通用性的代码。分析步骤：

1.先把要实现的功能一步一步的写在纸上（即自然语言）

2.再根据自然语言翻译成机器语言，用jquery写的代码一定要注意代码的可移植性、通用性。

9. a标签的四种状态的排序问题，可以用love hate 原则，即l（link）ov（visited）e h（hover）a（active）te，顺序写错可能出现点击后hover样式失效。

10. 一般情况下，建议尽量使用class，少用id。

11. css编码风格：多行式和一行式。 多行式：可读性强，但使行数过多，编辑需要来回拖动滚动条，影响开发速度，增大css文件大小。 一行式：可读性稍差，有效减小css文件行数，有利于提高开发速度，同时减小css文件大小。

一行式逐渐成为主流。

12. css sprite：即把多个甚至所有的图标都放在一张图里，然后用背景定位来控制图标的显示。 使用难点：图片如何排列能够紧凑，同时保证不会影响扩展性。 优点：减少http请求数，减小服务器压力。 缺点：影响开发速度，大大降低了可维护性。 是否使用取决于网站流量，对于流量不大的网站来说，css

sprite带来的好处并不明显，而付出的代价是巨大的，不划算。

13. 定义有：hover伪类的样式时，多定义一个它的hover类，这样有助于js调用生成current的效果，如定义btn{xxx}，btn：hover，btn_hover{xxx}。

14. 低权重原则避免滥用子选择器(即类似#test span这样的选择符)。 css的选择符是有权重的，当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。 规则：html标签的权重是1，class的权重是10，id的权重是100.如“div em”的权重是1+1=2，“”的权重是10+1=11，“#”的权重是100+10=110. 如果css选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式，与挂class名的先后顺序无关。 为了保证样式容易被覆盖，提供可维护性，css选择符需保证权重尽可能低。

15. 如果不确定模块的上下margin特别稳定，最好不要将它写到模块的类里，而是使用类的组合，单独为上下margin挂用于边距的原子类（例如mt10、mt20）。模块最好不要混用margintop和marginbottom，统一使用margintop或marginbottom。

16. 拆分模块技巧：

模块与模块之间尽量不要包含相同的部分，如果有相同部分，应将它们提取出来，拆分成一个独立的模块。2.模块应在保证数量尽可能少的原则下，做到尽可能简单，以提高重用性。

17. 触发hasLayout一般情况用zoom：1就行了，但当用dhtml的时候，可能失效，这时用position：relative就行了。

18. 布局最基本的元素：块级元素（常见：div,p,form,ul,ol,li）和行内元素（span,strong,em）等。 块级元素：独占一行，默认情况下，其宽度自动填满父元素宽度（即使设置了宽带也会独占一行）。 行内元素：不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化（没有上下边距，只有左右边距）。 可以用display：inline/block，切换。

19. ie6、7不支持display：inline-block，但行内元素可以用此属性触发hasLayout（是ie浏览器为解析盒模型而设计的一个专有属性，它的设计初衷是用于块级元素的，如果触发行内元素的hasLayout，就会让行内元素拥有一些块级元素的特性），从而模拟出inline-block的效果，然后再用*vertical-align控制文字的垂直对齐。但这样做用hack，所以不推荐。

20. 排列地板砖一样的布局的元素时，尽量用给每个元素用相同的类来实现，如果最左边的元素间距和右边的有区别可以给所有元素套一个父层，然后设置其右边距为负就行了。

21. 如果一个类中有些部分会经常变化，我们可以将这个经常变化的部分抽离出来单独设成一个类，然后用组合来实现最终样式。

22. 可以用(function{})这样的匿名函数来避免全局变量冲突。让js不产生冲突，需要避免全局变量的泛滥，合理使用命名空间以及为代码添加必要的注释。可以定义一个全局对象，然后用其属性来定义全局变量，同时结合命名空间（即类似，,和之类的）。

四、常见问题

1. ie只有a支持hover,并且注意a里要有href才行。

2. IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法加上display:inline

3. 如果存在文字在层居中的问题，水平方向可以用text-align代替，垂直方向可以用line-height来控制，如果只是控制上边距，就用padding-top。这样可以避免在ie6上的某些不必要的错误。

4. ajax传参数时，汉字一定要用encodeURIComponent（string），编码一下，要不然可能变成乱码中文在ie6里。

5. ie6下select元素会以窗口形式显示的，这是ie6的一个bug，所以当你设置一层为相对或绝对定位时，select仍然会浮在那个层之上。 解决方法，用一个和那个层同样大小的iframe放在test下面，select上面，用iframe遮住select。