【www.zgzsclpt.com--年终总结】
web前端年度工作总结
web 前端年度工作总结 Web 前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash 等各种 Web 技术进行客户端产品的开发。下面是整理的 web 前端年度工作总结范文，欢 迎参考。
web 前端年度工作总结(1) 从入职到现在，我在 XXX 导师的指导下走上了前端之路。在这段时间的学习和 项目中使我对前端业务需求和项目开发流程有一定的了解和认识， 对前端也有自 己的理解。前端是建立在以产品为核心，用户体验为基础的一门技术(其实我个 人更喜欢用艺术来形容前端)，每一个细微的视觉效果、交互体验都能给用户带 去不同的感受，舒适、简单、不失高雅的前端产品更能获得用户的好评。
项目中我参与讨论产品实现的技术方案，例如：移动端中 webview 空页面加载 方式和有内容页面加载方式是采用进度条还是蒙层加载， 对比分析那种加载方式 对用户更加友好;PC 端中置顶小动画按钮应该在什么情况下出现，是在出现滚动 条的情况下马上出现， 还是滚动到一定距离的时候再出现会对用户更加友好。前 端开发中 细心 极为重要，任何一个页面的行为，它都可能关系着产品的成败， 更是对用户的责任。
作为一名前端， 在项目上需要熟悉整个业务才能更好的开发， 例如：花币领取项目中，由于对需求了解的不够透彻，在完成开发后发现有很多 场景未考虑完全而大大的延迟了迭代周期，如果一开始就熟悉业务，了解需求， 考虑到所有的场景，那么可以大大的减少开发的时间。
学习中在我导师的指导下了解到前端基础的重要性，了解结构和表现在前端技 能中的分量。前端基础就好比大楼的地基，只有拥有坚固的地基，才能搭建起一 座摩天大厦。结构和表现是区分后端的重要凭证，前端注重视觉效果，后端着重 功能实现， 作为一名合格的前端，在结构和表现的技能上必须具备自己的专业优 势。
前端是整个项目的桥梁，沟通产品、后台、和设计。整个项目中不仅需要对自 己技术肯定，更需要了解业务，才能更有效率的开发和维护产品。
十年磨一剑， 我怀揣着梦想站在巨人的肩膀上， 紧跟着的脚步希望能越走越快， 有朝一日，晚霞落幕，回望过往，那片片云彩皆在欢笑。
web 前端年度工作总结(2) 大三下学期开始自学的前端， 断断续续半年多， 开始找前端相关的工作;到现在， 走过了毕业期的十字路口，已经工作一年了;好吧，严重掉底子了，我是个比较 懒的人。
。
。既然起步较晚，那么就只有马不停蹄的追赶了，奔跑吧，小前端! 写这个 201X 的，没什么经验之谈，只是继往开来，反省反省;继续追逐大神们 的脚步，偶尔站在巨人的肩膀上眺望下未来! 一、原谅我，Jquery： 工作之前，那时什么基础都没有，只是逼于即将毕业后的压力，百度到了前端 开发，就直接从原生 JS 开始学了;学不动了，问了下认识的计算机系的学长，知 道了 Jquery，OK，学吧。
。
。然而我并没有太大兴趣。
。
。因为我买了本 高三 ， jquery 只是对 高三 进行了整体的封装，他把我要做的事都做了，那好吧，继 续原生 JS 喽;不得不说那时做的最多的就是原生 JS 仿写各种特效;;还想了个主 题，弄了一堆静态页面，拼了个网站的样子作为找工作的 作品 ，后来 后来， 我知道我错了， 写那些只是属于前端基础的一小部分， 工作毕竟是工作， Demo 终难上台面， 团队的配合以及开发的效率才是最重要的;现在工作以 jquery 为主，至于曾经写的各种效果，现在也都有对应的现成组件，拿来用就是;之前 无知时忽视了的 jquery，工作后开
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. <form method="post" action="show.php" enctype="multipart/form-data">...</form> 2. 表 单 元 素 的 组 织 ： <fieldset>...</fieldset><fieldset>...</fieldset> 3. 创 建 各 种 框 : <input type="text" id="name" name="name" class="zky" required="required" placeholder=" 请 输 入 " value="http://" autofocus="autofocus" size="12" maxlength="20" pattern=".." /> 注：text→password/url/tel/email Id:为了让对应的标签识别，添加 CSS Name：为了让服务器和脚本识别，通常与 id 设为一样 Size：文本框大小 Maxlength：能输入的最大字符数 Pattern：正则表达式 4. 添加标签： <label for="idname">?</label> 5. 单(多)选按钮： <input tupe="radio/checkbox" id="aaa" name="zky" value="beijing" /> <label for="aaa">北京</label> <input tupe="radio/checkbox" id="bbb" name="zky" value="shanghai" /> <label for="bbb">上海</label> 注：id 各自唯一，name 必须相同。checked：默认选择 6. 下拉框： <select id="zky" name="zky" size="12" multiple="multiple"> <option value="beijing"> 北 京 </option> <option value="shanghai">上海</option> <option value="chengdu">成都</option> </select> 注：size:选择框的高度 multiple：允许多选 selected：默认选择 用<optgroup label="东北">?</label>对选择框进行分组 7. 上传文件：<input type="file" id="zky" name="zky" size="5" /> 注：size：输入路径和文件名的字段的宽度 8. 禁用表单元 素：<input ? disabled> 9. 创 建 提 交 按 钮 ： <input type="submit" value=" 点 此 提 交 " /> 创 建 带 图 像 的 提 交 按 钮 ： <button type="image"><img src="1.jpg"> 点 击 这 里 </button> 创 建 图 像 按 钮 ： <input type="image" alt=" 提 交 " src="1.jpg" /> Submit→reset 重置 10. 文本区域：<textarea name="zky" maxlength="30" rows="5" cols="5">请在此输入字符</textarea> 11. 表格 : <table> <caption></caption> <thead> <tr> <th scope="rowgroup">..</th> <th scope="col">..</th> </tr> </thead> <tbody> <tr> <th scope="row">..</th> <td rowspan="3">..</td> <td>..</td> </tr> </tbody> </table> 四.文本格式化 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. 添加视频：<video src="1.webm"></video> 视 频 属 性 ： src autoplay controls muted loop poster width height preload 3. 为 视 频 添 加 多 个 来 源： <video controls="controls"> <source src="1.mp4" type="video/mp4"> <source src="1.webm" type="video/webm"> <object type="application/x-shockw ave-flash" data="1.swf?videourl=1.mp4&control=true"> <param name="movie" value="1.swf?videourl=1.mp4&control=true"> </object> //嵌入 Flash 动画 <a href="1.mp4">下 载该视频</a> </video> 4. html5 支持 5 中音频：.ogg .mp3 .wav .aac .mp4 5.添加音频：<audio src="1.ogg"></audio> 音频属性：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. 添加视频：<video src="1.webm"></video> 视 频 属 性 ： src autoplay controls muted loop poster width height preload 3. 为 视 频 添 加 多 个 来 源： <video controls="controls"> <source src="1.mp4" type="video/mp4"> <source src="1.webm" type="video/webm"> <object type="application/x-shockw ave-flash" data="1.swf?videourl=1.mp4&control=true"> <param name="movie" value="1.swf?videourl=1.mp4&control=true"> </object> //嵌入 Flash 动画 <a href="1.mp4">下 载该视频</a> </video> 4. html5 支持 5 中音频：.ogg .mp3 .wav .aac .mp4 5.添加音频：<audio src="1.ogg"></audio> 音频属性：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. 双标记签都要有开始和结束标签，单标记标签的后面一定要加“ /”,例如：<br />等， 并且有正确的层次； 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; clea r: 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 } 使用方法: <div class="clear"></div> 方法二 .clear{zoom:1;} .clear:after { clear:both; height:0; overflow:hidden; display:block; visibility:hidden; content:" ."; } 或 .claer { height:auto; _height:200px; min-height:200px; verflow:auto; zoom:1; _overflow:visible; } 使用方法: <div class=""> <ul class="clear"> <li><a href="#">送水送气 </a></li> <li><a href="#">送花服务 </a></li> <li><a href="#">宾馆住宿 </a></li> <li><a href="#"> 家电维修</a></li> <li><a href="#">餐饮电话</a></li> <li><a href="#">电脑网络</a></li> </ul> </div> 9.5 自定义属性 1. 文字列表 ： (样式名) 用于文字列表，区分为两种字体(12px/14px)，默认行内间距上下 3px。
2. 图片列表 ：(样式名) 用于组图型碎片，默认具有 claar 属性，容器内 img、span 标签为块级元素,并清除图片上下外间距 3. 图文混排： (样式名) 碎片内使用<div>、<p>区分图片及文字，默认形态为左图右文，且图片与文字间距为 10px。 4. 文字类：加粗(b)、arial 字体(.fontArial) 处理局部应用 5. 浮动： (fl/fr) 用于构建页面框架 6. 留白: (blank5/blank8) 设定页面中留白高度为 5px、8px 两种 9.6 完整代码 /* 全局 CSS 定义 */ body{text-align:center;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;} ?? 需要举例说明 十.框架设置 10.1 约定 1. 横切结构样式为 area，所有横要带有 id，名称：contentA,contentB 2. 结构元素使用 div 标签，标签嵌套注意层级关 系，如： 10.2 说明 6.2.1 栏间留白 三栏时定义中间栏，多栏定义时从第二栏开始定义。
6.2.2 横切留白 横切间留白，在下一个横切中定义，如：margin‐top:10px
个人总结的web前端面试题
1、 自我介绍 2、 之前做过的项目（用到什么技术） 3、 H5 特性（举例几个标签，canvas、本地缓存） Canvas 画圆 function draw(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext('2d'); context.fillStyle = #EEEEFF; context.fillRect(0, 0, 400, 300); var n = 0; for (var i = 0; i < 10; i++) { context.beginPath(); context.arc(i * 25, i * 25, i *10, 0, Math.PI * 2, true); context.closePath(); context.fillStyle = 'rgba(255, 0, 0, 0.25)'; context.fill(); } } HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。两种本地存储方案： localStorage 用于持久化的本地存储， 数据永远不会过期， 关闭浏览器也不会丢失。
[?lo?kl] ['st?r?d?] sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储 4、 有哪些 Js 框架（Jqeury，yui，Prototype，dojo,ext.js,mootools） Jqeury 库中的 $() 是什么？$() 函数是 jQuery() 函数的别称 window.onload 事件和 jQuery ready 函数？jQuery ready() 函数只需对 DOM 树的等待，不需要等待 图片、视频加载完后在执行。如何使用 jQuery 来代替一个元素？$('#thatdiv').replaceWith('fnuh'); 5、 Node.js 的理解？ Node.js 简单，高性能、避免了频繁的线程切换开销、占用资源小、单线程内存占用低、线程安全、没 有加锁、解锁、死锁的问题。如何解决高并发 6、 你理解的页面性能优化方法有哪些？ 提倡前端开发工程师在书写 xhtml 的时候做到结构语义化 css，js 文件数量及大小的优化、背景图片数量及大小的优化、内容图片的大小的优化 把样式表置于顶部、 把脚本置于页面底部、 避免使用 CSS 表达式 （Expression） 、 使用外部 JavaScript 和 CSS、削减 JavaScript 和 CSS、用 <link> 代替 @import 7、 哪些 Css 框架(Bootstrap,jquery ui,BootMetro,Flat UI,Cardinal 移动框架，) 扁平化、极简化、轻量、迅捷、移动优先！ 可以利用 bootstrap 快速搭建跨平台的应用程序，而且特别优雅（优点） 容易上手，和 jquery 非常像。不兼容 IE8 以下浏览器（指 Bootstrap3） 但不编写代码只会写标签，很容易让我们产生惰性而不思进取（缺点） 8、 用什么工具开发（Sublime Text,Eclipse,Notepad,Firebug,HttpWatch,Yslow） 9、 作为前端对 seo 的理解，走开发过程中需要如何注意？ 通过添加