XXweb前端工作总结

第一篇：XXweb前端工作总结

XXweb前端工作总结

web前端XX年最火的职业，你是否也想学前端呢,那快来看看吧，下面是小编整理的几篇XXweb前端工作总结范文，希望能够给你带来不一样的体会。

XXweb前端工作总结范文篇一

工作回顾

在我进入公司的这七个月里，我陆续接触了公司的软件开发平台，一些已经完成的项目,b2b,收银等。在工作之余，我也在努力的学习，和同事及客户友商进行交流，学习先进的开发技术，请教别人相关开发技术问题。

存在问题

1.由于开始对公司开发平台不是很熟悉，所以在了解客户所要开发的功能及表单过程中多次出现因为需求的原因，而不断修改的情况。在与客户交流的时候，这个问题多次困扰着我，对方的需求不明，每次交流的过程中都在变更需求，从而导致了效率比较低的问题。

2.在工作过程中，用到很多我所不知道或很多我知道但不太熟悉的领域，在这个领域内，我需要不断的学习。

3.学习的知识不够广泛。对专业知识技能方面还需要努力的加强，这方面也是目前最欠缺，希望高总能给予指导和培养。一个项目中，涉及的技术往往有多种，知识多了，就会灵活变通，所以我会加强这方面的学习。

工作心得

1.每一个项目在开始着手的第一步，一定要和客户把需求沟通清楚，只有了解了项目的需求，才有可能真正做好一个项目。

2.工作中，有一个无论是技术，还是经验都比较让人肯定的前辈带领，将任务详细化，详细到，每个页面、甚至是一个页面中的图片什么时候做好，做到什么程度，这样把工作进度有计划有方向的赞定下来，做事很有效率。所以希望高总多给予我们一些指导。

3.每周的工作小结真的很重要，这让我们每天都有计划的知道自己干了什么，不是漫无目的的工作，所以我们应该养成，周记、月记、年记的工作习惯。

4.工作并不是一成不变的，也许有一天你要去其他岗位帮忙，所以同事之间的技术要互相学习，也许有一天，公司需要你发挥其他的技能帮忙，所以互相学习也是很重要的。自己的工作不能仅仅局限于自己的业务范畴。

工作计划

1.要提高工作的主动性，做事干脆果断，不拖泥带水。

2.工作要注重实效、注重结果，一切工作围绕着目标的完成。

3.要提高大局观，是否能让其他人的工作更顺畅作为衡量工作的标尺。

4.精细化工作方式的思考和实践。

5.虚心请教比我做的优秀的其他同事，向他们学习技术或经验。其实作为一个新员工，所有的地方都是需要学习的，多听、多看、多想、多做、多沟通，向每一个员工学习他们身上的优秀工作习惯，丰富的专业技能，配合着实际工作不断的进步，不论在什么环境下，我都相信这两点：一是三人行必有我师，二是天道酬勤。

在参加工作的这短短的七个月中，我深刻的体会到，把自己所有的精力都投入进去，技术工作都不可能做到完美程度，毕竟技术工作太繁杂，项目多而人手少，但多付出一些，工作就会优化一些，这就需要认认真真沉下心去做事情，职业做事，诚信待人。

XXweb前端工作总结范文篇二

时光飞快，自八月份转前端以来，已经过去了半年时间。这期间经历了第一次真正意义上的项目前后端分离的开发模式。对于之前从事了三年后端java开发的我来说，一切都很新鲜与刺激。当然，收获颇丰。下面，就具体从这个项目中学习的东西进行一次总结。

1.技术方面

首先，这次项目的开发环境是基于, 引入了npm包管理工具来对各种js插件进行管理。

这种方式避免了以前引入js插件时分别到各自的官网网站去下载，用了npm后只需要在终端进行全局安装或者局部安装，后续只需要在js文件中require就能进行调用。这种统一管理的方式不仅使开发变的更加简单，减少了很多无谓的操作，也分离了一些开发人员不需要关注的关注点。

其次，项目引用了gulp + webpack，基于构建工具的开发更接近现代web开发，一套流程走下来，自动打包，自动对html，css,js，图片文件进行压缩，合并和版本号管理以及对文件的改动进行自动监控。这样不仅仅是方便了开发人员，更重要的是极大地提升了客户端页面性能。与以前需要分别手动的对文件进行压缩，合并，混淆处理相比，这种自动构建工具效率更高,减少出错率。

最后，项目引入了coala框架，使我更加清晰的明白基于web component的开发，页面上每一个功能块，都可以化为一个组件，每个组件有它自己的生命周期与初始的属性。在不同的交互方式上绑定不同的事件用以来响应用户的行为，具体体现在个体的组件数据变化不会影响到页面上其他组件，这样就做到了页面性能的提升和用户体验的双赢。

另外，在页面布局和html，css实现页面的时候，如何能够绘制出更规范，更有结构化的页面也是一个考验。从前期的id,class命名不规范，html结构混乱到现在一点点的提升，终于也领会到了前端开发的细致活。

2.团队协作

这次的前后端分离和后端开发人员进行了接口联调。不得不承认前期花费了很多时间在沟通上面。

基于QQ工具的一问一答低效率的沟通和问题表述不清都会花费时间和打断工作中的思维，使人不能专注很长一段时间。另外,接口文档编写不规范，格式不美观等都是不能忽视的问题。当然，这些沟通技巧和提升效率的工具需要花费时间去慢慢的提升，包括我,包括团队里面所有的人员，只有这样，每个开发人员才能专心有效率的进行项目开发。

3.继往开来

新的一年开始了，希望自己能够保持良好的学习态度和状态继续迎接新的挑战。尤其感谢同事和领导的厚爱，才能让自己 不断成长，不断进步。在此，祝愿公司所有开发人员快乐生活，生活快乐。

XXweb前端工作总结范文篇三

我自xxxx

年xx月xx日入职至今已经10个多月，在这10个多月不知不觉的忙碌工作中，美好而充实的一年即将悄然逝去，蓦然回首，感慨万千，收获亦多。使我个人在工作中学到了很多的经验，从经历的每件事情中去总结工作经验，学习并且已经适应工作环境，并且考虑在我的工作中能够有一个新的工作创新，这是我工作成长中一段宝贵的经验。回顾今年我个人的工作情况，特别是刚刚步入到这个工作环境的时候，说起来还真的有点不习惯，不过后来慢慢的自己也习惯了。

进入公司以来，我的主要工作是网站建设和公司的软硬件及网络维护。在此期间特别要感谢詹金桥经理以及公司各位同事对我工作和生活各方面的帮助。

作为刚从校园走出的入职菜鸟来说，这是我的第一份正式工作，我很重视和珍惜这一份工作。一年的时间从学生到职业的转变，让我受益颇多，经验的积累，心态的转变，工作的方法，技能的提升。

本岗位目前主要有三项主要工作内容，现对前期工作做出如下总结：

一、xxxx年工作总结，“xxxx”网站建设

自我接手本项工作以来，xxxx网站从无到有，从简单到复杂，一切都是从零开始，域名备案、空间重建、网站策划、页面设计、前端静态代码的编写、PHP+MySQL、后台管理系统、SEO搜索引擎优化，一步一步的都有序进行。

到目前为止，网站一期建设已经完成，驻地中心湖北站已经上线。在各大搜索引擎上的收录量数据可观，搜索引擎网站收录数据如下：

百度收录: 1029 反链：745 360收录：1100 反链：2392

备注：谷歌(Google)已经退出中国市场，所有中国业务全部取消，数据失效无用

二、xxxx年岗位工作计划

xxxx年即将到来，现对做出如下工作计划安排：

1、网站一期已经完成，剩下的主要是升级维护 a)网页页面升级，现在的页面在视觉上看着不太成熟;

b)功能扩展，现有的功能还是过于简单，尤其在项目展示方面不够合理(针对项

目作出单独的版块结构，包含公司品牌介绍、加盟政策、项目留言、项目展示等等，站内搜索);

2、取消网站之前使用的空间，租用云服务器(之前使用的是雪狼空间，这个服务提供商太差了，功能支持不完善，安全漏洞太多，访问速度过慢，对客户的一些基本问题都不能解决)

三、个人职业规划

“知己知彼，百战不殆”，在任何时候我们都要有一个明确的职业目标，一个好的职业目标会促使我们成长，找到一个未来的参考方向。

1、xxxx年-xxxx年个人职业规划 a)技能：每个人都应该有自己擅长的领域，我热爱互联网的发展，未来几

年必将致力于互联网的开发大潮。这是一个善变的行业，或许今年出现的新型开发工具、语言到明年就过时了，所以我们要学习的东西也就更多，不断的学习不断的成长，在工作中学习，在学习中工作;

b)责任：二十多年的生活一直在关怀中度过，大学毕业、走向社会，我们

不在是襁褓中的小孩。我们将要面对来自工作和家庭的双重责任，在此期间，我们要学会善于勇担责任，为自己、为工作、为朋友、为家庭负责;

c)心态：刚刚走向社会，我们很多心态都处在学校的时候，短暂的工作让

我明白，没有一个良好的心态，很难在社会上立足。在很多时候我们都要去学会接纳，学会忍让，也要善于与他人相处;

d)目标：不想当将军的兵，不是好兵，在未来几年我想通过各方面的学习，能得到各个阶层的赏识，达到技术主管的职位，2、三年内对自己及公司的期望 a)对自己：3年内通过自己的努力，希望能达到年薪十万左右，并学习很多

的专业及其它方面的知识。

b)对公司：希望能将创业扶助中心做大做强，跟多的为广大想创业的人提

供最基本的服务，将扶助指导的思想贯彻到生活的每个角落3、3-5个可实现的目标

a)在工资上能得到提升，年薪十万左右;

b)不再是一个底层员工，能带领一个团队从事工作;

4、个人有何打算

这几年是关键的几年，我希望在最近的几年，能从事专业的网站建设，只有这样，才能在最短的时间里通过更多的实战，学习跟多的知识，积累跟多的经验

5、对自己所在的部门及公司有何看法及建议

虽然我在职时间不长，但我觉得公司的很多机制都不完善，没有明确的奖惩制度，没有规范的办公OA体系，各种资料杂而乱，没有明确的职位责任，职位薪资无体系，各种安排没有规范，想一出是一出。

6、对自身所在的不足及问题，并提出如何改进

a)过于懒散，在很多时候都无法集中精力做事;

b)很容易受周围的环境与影响自己的心态和工作;

第二篇：Web前端工作总结

Web前端学习总结

一.名词解释 1.横切

在固定页面的宽度(按栅格化进行)并且对高度没有限制的容器称为一个标准横切 2.留白 两个容器或碎片之间的上、下、左、右的空白距离 3.继承

元素可以从其父级元素中获得一些可为自己使用的属性或值。4.图片定位

把图片元素放置到一个静态的、相对的、绝对的、或固定的位置中，利用CSS中对图片进行遮罩属性，多用于页面中的修饰图 5.底图

页面中在标签中使用的背景图 6.齐底(图)线 用于区分横切或碎片结束的线或图 7.页面结构

页面的基础框架，由横切、布局元素组成 8.焦点区(图)最易注意的区域 9.导航

在页面中具有导向性的链接集合 10.头图 页面主题图片 11.间距

碎片或文字间的距离 12.行高

文字段落中行与行之间的距离 13.首行缩进 文字段落首行缩进 14.浮动

使被定义的区域脱离正常的页面文档流 15.碎片 由文字、图片组合成的内容区域 16.通栏广告 与页面内容区同宽的广告区域 17.功能按钮 具有交互属性的按钮 18.私有样式

当前页面独立使用的样式，不具备公用性 19.水平(垂直)居中

在页面中的某个元素处于父级的上下或左右的相同距离 20.标准头(尾)定义相同的页面头或尾元素集合 二.文本格式化 1.段落：p 2.斜体：address（联系信息）em（强调）i（突出不同）cite（引用）dfn（首次定义术语）3.粗体：strong（重要）b（提醒）4.图片块：figure 5.引述文段，段落缩进：blockquote 6.背景颜色：mark 7.虚线下划线：abbr 8.上标下标：sub/sup 9.下划线：ins 10.删除线：del（标记已删除内容）s（标记不准确内容）11.等宽字体：code 12.预格式化：pre 13.字号减小，表注释：small 14.时间：time 15.换行：br 16.html5定义区块：header nav article section aside footer div span 三.表单表格

1.

...

2.表单元素的组织：

...

...

3.创建各种框: 注：text→password/url/tel/email Id:为了让对应的标签识别，添加CSS Name：为了让服务器和脚本识别，通常与id设为一样 Size：文本框大小 Maxlength：能输入的最大字符数 Pattern：正则表达式

4.添加标签： „ 5.单(多)选按钮：

北京 上海 注：id各自唯一，name必须相同。checked：默认选择 6.下拉框：

北京 上海 成都 注：size:选择框的高度 multiple：允许多选 selected：默认选择 用„对选择框进行分组 7.上传文件： 注：size：输入路径和文件名的字段的宽度 8.禁用表单元素： 9.创建提交按钮： 创建带图像的提交按钮：点击这里 创建图像按钮： Submit→reset重置

10.文本区域：请在此输入字符 11.表格 :

..	..
..	..	..

四.文本格式化 1.{font：（斜体 粗体 小型大写字母）字体大小(必有)行距 字体集（必有）;} 2.文本背景：{ background：#foc url（1.jpg）repeat-x scroll 0 0；} 3.字间距：word-spacing:12px;4.字偶距：letter-spacing:12px;5.缩进增加：text-indent:12px;6.小型大写字母: font-variant:small-caps;7.文本对齐：text-align:left；适用于block，inline-block 8.单词大小写: text-transform:capitalize(单词首字母大写)/uppercase(大写)/lowercase(小写)9.文本上的线：text-decoraion:underline/overline/line-through;11.空格：white-space:pre(显示所有空格回车)/nowrap（非断行空格）； 12.h3—16px;h5—12px;verdana,Geneva,sans-serif;13.列表属性： li{list-style:url(1.jpg)inside square;} 五.CSS布局

1.width：不包括padding，border，margin；max-width设置外围限制； 2.浮动：float:left;清除浮动：clear:both;3.设置边框： border:dotted 4px red;(dotted点状、dashed虚线、solid实线)4.使元素对齐：vertical-align:baseline/middle/text-bottom..5.显示：display:black/inline/inline-block;6.显示：visibility:visible/hiddle;7.相对定位：{position:relative;top:5px;} 相对于该元素的原始位置 8.绝对定位：{position:absolute;top:5px;} 相对于body或离他最近定位的祖先元素 9.三维位置：{z-index:50;} 越大的在最上面

10.厂商前缀：-webkit-(safari)–moz-(firefox)–ms-(IE)–o-(opera)11.创建圆角： {-moz-border-radius-topleft:50px;-webkit-border-top-left-radius:50px;border-top-left-radius:50px;}(左上角,角的半径是50px){border-radius:50px;}(所有角简写)12.创建椭圆角：{„ „ border-radius:40px/20px;}（x半径/y半径）13.创建圆形：{„ „ border-radius:50px;} 50px为元素半径大小 14.文本加阴影：{text-shadow: 2px 5px 5px #999;} x/y/模糊半径

15.元素加阴影：{(-moz-/-webkit-)box-shadow:(inset内阴影)2px 5px 5px #999;5px 10px 2px #555(多重阴影);} 16.多重背景：{background:#000 url(1.png)50% 102% no-repeat,#222 url(2.png)12px-150px repeat-x;} 17.透明度： {opacity:.5;} 0→1 透明→不透明

18.渐变背景：{background:linear-gradient(left,#000,#999);}(left ：渐变线沿逆时针方向转至水平线的角度)六.html5视频音频

1.html5支持3种视频：.ogg/.ogv.mp4/.m4v.webm 2.添加视频： 视频属性：src autoplay controls muted loop poster width height preload 3.为视频添加多个来源： 4.html5支持5中音频：.ogg.mp3.wav.aac.mp4 5.添加音频： 音频属性：src autoplay controls muted loop preload。多个来源同video。七.一些约定

我们结合常用的一些命名习惯，再结合CSS的实际应用，整理出一些较好的命名习惯。1.样式名称首字母统一为小写字母，不能为数字，下划线及特殊字符；

3.设置边框： border:dotted 4px red;(dotted点状、dashed虚线、solid实线)4.使元素对齐：vertical-align:baseline/middle/text-bottom..5.显示：display:black/inline/inline-block;6.显示：visibility:visible/hiddle;7.相对定位：{position:relative;top:5px;} 相对于该元素的原始位置 8.绝对定位：{position:absolute;top:5px;} 相对于body或离他最近定位的祖先元素 9.三维位置：{z-index:50;} 越大的在最上面

10.厂商前缀：-webkit-(safari)–moz-(firefox)–ms-(IE)–o-(opera)11.创建圆角： {-moz-border-radius-topleft:50px;-webkit-border-top-left-radius:50px;border-top-left-radius:50px;}(左上角,角的半径是50px){border-radius:50px;}(所有角简写)12.创建椭圆角：{„ „ border-radius:40px/20px;}（x半径/y半径）13.创建圆形：{„ „ border-radius:50px;} 50px为元素半径大小 14.文本加阴影：{text-shadow: 2px 5px 5px #999;} x/y/模糊半径

15.元素加阴影：{(-moz-/-webkit-)box-shadow:(inset内阴影)2px 5px 5px #999;5px 10px 2px #555(多重阴影);} 16.多重背景：{background:#000 url(1.png)50% 102% no-repeat,#222 url(2.png)12px-150px repeat-x;} 17.透明度： {opacity:.5;} 0→1 透明→不透明

18.渐变背景：{background:linear-gradient(left,#000,#999);}(left ：渐变线沿逆时针方向转至水平线的角度)六.html5视频音频

1.html5支持3种视频：.ogg/.ogv.mp4/.m4v.webm 2.添加视频： 视频属性：src autoplay controls muted loop poster width height preload 3.为视频添加多个来源： 4.html5支持5中音频：.ogg.mp3.wav.aac.mp4 5.添加音频： 音频属性：src autoplay controls muted loop preload。多个来源同video。七.一些约定

我们结合常用的一些命名习惯，再结合CSS的实际应用，整理出一些较好的命名习惯。1.样式名称首字母统一为小写字母，不能为数字，下划线及特殊字符； 2.样式名尽量语义化或简写； 3.样式名需要组合拼写时，采用全部小写拼写并使用下划线连接，即：all_keyword； 4.使用px(像素)为基本计量单位； 5.页面中空格的使用：全角：中文空格 半角；  6.项目完成包中，文件夹及文件名称全部采用小写字母，不使用中文文件名； 7.减少DIV的嵌套层数；

8.给重要图片加上alt属性；给重要的元素和截断的元素加上title； 9.使用正确的注释方法（详见“注释”章节）； 10.特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，例如：style、font 等；

11.双标记签都要有开始和结束标签，单标记标签的后面一定要加“ /”,例如：
等，并且有正确的层次； 12.其它特殊符号： 1)<(<)2)>(>)八.命名空间

8.1外挂样式名称 全局：public.css 全局样式为全站公用，为页面样式基础，页面中必须包含。结构：layout.css 页面结构类型复杂，并且公用类型较多时使用。多用在首页级页面和产品类页面中。私有：style.css 独立页面所使用的样式文件，页面中必须包含。模块 module.css 产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用。默认 default.css 文章 article.css 图片 photo.css 下载 soft.css 主题 themes.css 实现换肤功能时应用。补丁 mend.css 基于以上样式进行的私有化修补。8.2 常用名称(1)页面结构 容器: container 页头：header 内容：content/container/content(A)页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 浮左浮右：fl fr 清除浮动 clear(2)导航 导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题：title 摘要：summary 路径：path(3)模块化命名 模块头部：hd 模块内容部分：bd 模块底部：ft(4)各内容页对应 标题：title 副标题：subtitle 属性：properties 简介：infor 内容：content 分页：page 插入广告：insert_ad 表情：expression 功能选项：options 上下篇：up_down 评论：comments 相关内容：related 下载地址：download 播放地址：play_add(5)功能 标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：regsiter 搜索：search 日期：date 功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll 标签页：tab 文章列表：list 提示信息：msg 当前的：current 小技巧：tips 图标：icon 注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright 九.基本设置-public.css 9.1 全局设置

上下边距(margin、padding)：0(px)左右边距(margin)：auto(自动)底色(background):#FFF(白色)字体(font-family)、字号(font-szie)、字色(color)：”宋体” 12px #666 代码： /* 全局CSS定义 */ body{margin:0 auto;padding:0;background:#FFF;color:#666;font:12px ‘宋体';} div,form,ul,ol,li,span,p,dl,dt,dd,img{margin:0;padding:0;border:0;} h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;} ul,ol,li{list-style:none} table,td,input,textarea{font-size:12px} 9.2 页面标签初始化设置 1.常用基本标div,form,ul,ol,li,span,p,dl,dt,dd,img 设置基本标签的间距、边框默认值为0。2.h1～h6标题

默认标题内字号12px，内外间距为0px，文字不加粗。3.ul,ol,li 列表 默认不显示项目符号。4.h2 栏目标题

说明：h2标签被定义为栏目标题特殊使用，在标签中非标题文字默认居右显示，主标题文字使用span标签包含，居左显示。5.默认链接颜色

常态下不显示文字下划线，颜色为灰(#333)，鼠标悬浮时：显示文字下划线，颜色变为暗红(#ccc)。6.状态：a:link{未点} a:visited{已点} a:focus{键盘选中} a:hover{指针停留} a:active{正在点} 9.3 页面宽度 默认页面宽(命名规范)：按栅格化进行 9.4.clear 结束容器内各元素的浮动属性，使相邻容器或元素节点正常显示。以下是清除浮动的几种方法 方法一.clear { clear:both;height:0;font-size:0;line-height:0 } 或.clear { border-top: 1px solid transparent!important;margin-top:-1px!important;border-top: 0px;margin-top: 0px;height: 0px;clear: both;background: none;font-size: 0px;visibility: hidden;} 或.clear{ clear:both;font-size:1px;width:1px;height:0;visibility:hidden;margin-top:0px!important;*margin-top:-1px;line-height:0 } 使用方法: