前端工程师试用期总结范文第1篇
在这两个月的时间里，在领导和同事们的悉心关怀和指导下，通过自身的
不懈努力，我很快适应了周围的生活与工作环境，对工作也逐渐进入了状态。
在这段工作与学习过程中，我体会到了自己的职责与不足，现对自身负责的工
作总结如下:
1、对工程前期资料的收集整理及分类存档工作。
2、在施工期间能够较好的协助公司项目管理人员及工程相关人员，为他们提供
所需的资料并做好类似工作。
3、收集并保存好公司及相关部门下发的文件及会议文件工作，并把原来没有具
体整理的文件按照类别整理好放入档案盒内，为查阅文件提供方便。
4、做好工程部各类文件传阅及传递工作并将文件存档，并将文件进行分类整理
并存档。
5、负责工程类合同的整理、存档工作，每签署完毕一份合同，都按照公司规定
将原件交由办公室，然后工程部对复印件进行存档管理，以便于领导及工程师
查阅合同内容，也为现场更好的进行施工管理、进度管理及质量管理提供有力
的依据。
6、负责工程部范围内的各施工单位工程款支付流程的手续工作，按照上级领导
的指示，根据现场的轻重缓急情况，确保流程的及时完成。
7、负责各种工程信息的收集、传递、反馈，必要时及时向领导汇报等，除此之
外，还有领导交办的其他临时性工作。
在此工作期间，工作显得紧张，而又有秩序。整个工作过程中，我认为自
己工作比较认真、负责，具有较强的责任心和进取心，能够认真负责的完成领
导交付的工作;并积极学习多方面的专业知识，以提高自身的综合素质，注重
自身发展与进步。但同时也意识到自身存在着诸多不足：在日常工作中有时不
够干练，言行举止没有注重约束自己，且工作主动性发挥的还不够，对工作的
预见性和处理紧急事务的灵活性还需要更进一步的提高，在专业知识方面，还
需要平时多加强专业知识的学习。但是这些不足，在以后的工作中，我会积极
的做到多学、多看、多听、多问，同时做到眼勤、手勤、嘴勤、腿勤，因为我相信“勤能补拙是良训”。
前端工程师试用期总结范文第2篇
从事前端开发工作1年多了，从最初的DIV+CSS学起，到现在学到html
5、css
3、javascript，jquery等等，我觉得前端要学的技术太多了，很多人认为前端开发要掌握的技能简单，就是网页制作，其实不然，前端开发是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本是HTML
5、CSS3，以及SVG等。JavaScript作为最难的语言之一，许多编程高手也不敢妄自菲薄、自封精通。
关于兼容性的问题我相信对于每个做前端开发的人来讲是一个很头疼的问题，互联网目前主流浏览器有IE6789，Firefox，Chrome，Opera，Safari，遨游，包括国内主流的搜狗，腾讯 TT，360等等;从内核上讲主要有IE的，遨游版IE，safari，firefox以及opera的，这些都是大家常见的。所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，用户用什么浏览器来查看同一网站，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。这个时候就需要针对不同的浏览器写不同的CSS，这个过程叫CSS hack。虽然我们写代码都要求按照标准，不写hack代码，但实际工作中为了兼容主流浏览器，hack代码是免不了的，所以这也应该是每个前端开发人员必备的技能。
前端的开发工具很多，比较常见的有Dreamweaver，Notepad，webstrom，Sublime Text等等，我现在在使用webstorm，强大的提示功能可以帮助我们很快的熟悉并掌握网页布局,检查错误等。调试代码的工具我使用的Firebug。Firebug是网页浏览器Mozilla firefox 下的一款开发类插件，它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。Firebug也是一个除错工具。用户可以利用它除错、编辑、甚至删改任何网站的CSS、HTML、Dom 以及Javascript代码。
前端工程师试用期总结范文第3篇
span
行级元素，多个
同行块级元素，独占
一行块级元素，前后
保留一行
标题标签，h1~h6表6个等级，加粗，前后保留一行width：设置宽
度height：设置高
度alt：图片加载失败显示的文本
div
文本类
p
h
图片标签img
color：颜色
水平线常用标签
hr
size：高度(粗
细)width：宽度(长度)herf：超链接转到的地址
超链接a
target
_self:默认值，在当前页面打开_blank:在新窗口
打开
带标题的框fieldsetlegend设置标题
disc：实心圆
无序列表
列表标签
有序列表
ul
square：小方块
olcircle：空心圆
tr表示行
th
表示标题单元格，居中、加粗
td
表格标签
caption
表示一个单元格
表示标题，定义在第一行，居中
rowspan
设置单元格占的行
数
colspan
设置单元格占的列
数
action表单提交地址
get：显示提交参数，将参数用?和&拼接到url上
带到服务器端
method
post：隐式提交参
数optgroup 表示分组,分组不能选,只能选分组中的option
下拉菜单selected默认选中multiple 设置下拉菜单为多选模式表单项rows: 显示文本的行数(高度)文本域
cols: 显示文本的列
数(宽度)
name：参数名
size：显示字符长度(控制文本框长
度)maxlength：最大可
输入字符数
input文本框type=“text”
placeholder：提示
内容
disabled：不会被提交到服务器readonly：只读(会被提交到服务
器)
value：默认值
密码框
type=“password”单选按钮type=“radio”复选框
type=“checkbox”文件选择框type=“file”
按钮
type=“button”提交
type=“submit”checked：默认选
中
input
按钮
重置type=“reset”
noresize：不能改变框架大小
frame：表示框架
scolling：是否显示滚动条(yes、no、auto)设置框架集在纵向上的拆分策略设置框架集在横向上的拆分策略
rows
cols
border
框架集
框架边框的宽度
borderColor框架边框颜色
frameBorder
设置框架是否有边框(yes|no)_blank:新窗口中
打开_self:在当前窗口
打开
框架集中的超链接打开方式target_parent:父窗口
中打开_top在最顶层窗口中打开frameName：在对应name框架打
开
ifame
在页面中嵌入框架
dl、dt、dd其他标签
- 数码
- 手机
marquee：滚动标签
shape="circle"
coords="309,257,20"target="_blank"
href="http:///s?wd=帽子">
shape="poly"
coords="258,316,277,283,340,280,356,314"target="_blank"
href="http:///s?wd=t恤">
img usemap
ruby：用rt包含的内容对前面
的普通文本进行注释
漢
呵呵呵
吃了没?
range：范围选择
color：颜色选择
输入控件html5新标签
number：数字输入
date picker：日期选择
datalist：自动提示
video：动画
媒体
radio：音频
autocomplete：是否关闭自动提示(off |
on)html5新标签
autofocus: 自动获得
焦点
required: 表示控件
必须输入内容
controls : 播放控制条
autoplay ：自动播放
loop ：循环播放preload ：预加载，如果设置了autoplay，就可以不用设置preload
CSS知识点总结
内联：直接在标签的style属性上编写
样式样式定义方式
样式块：在style标签中编写样式块，并通过一定规则(选择器)应用到对应的那些标签上(通常写在head中)
外部样式文件：将样式块编写在外部
的css文件中(不用写style标签)* 在需要使用样式的页面通过link标签引入样式文件(通常写在head中)
id选择器#xxx 针对id为xxx的标签
类选择器.xxx 针对class属性为xxx的标
签
标签选择xxx 针对标签名为xxx的标签
*选择器选择所有元素选择器
后代元素关系选择selector1 selector2 {...} 针对selector1下的所有的selector2
子元素关系选择selector1 > selector2 {...} 只针对selector1的selector2子元素(如果有后代selector2元素则不会应用)
紧邻兄弟关系选择selector1 + selector2 {...} 只针对紧接在selector1后
的selector2元素
所有随后的兄弟关系selector1 ~ selector2 {...} 针对selector1后的所有的
selector2兄弟元素
color：字体颜色
font-size：字体大小
font-family：字体样式
字体
font-weight: bolder(加粗) | normal(不加粗)font-style: 设置字体倾斜(normal | italic | oblique) *italic和oblique实际显示效果
几乎一致font-variant: 设置字体显示为小型大写字母
text-align: 水平对齐方式(left | center | right)常用属性
vertical-align: 垂直对齐方式(top | middle |
bottom)
line-height: 设置行高(通常用于设置文本居
中)
white-space: nowrap 不换行, pre 当做pre标签
border: 边框(1px solid
red)
文本
width: 宽度
underline 下划线
height: 高度
overline 上划线
text-decoration: 文本装
饰
line-through 贯穿线(删
除线)
blink 闪烁
none 无
dtext-shadow: 3px 3px 5px red;第一个参数: 阴影水平位置(x轴上的偏移量)
text-shadow: 文本阴影
第二个参数: 阴影垂直位置(y轴上的偏移量)
第三个参数: 模糊程度第四个参数: 阴影颜色
padding：内边距
padding: xxpx;
padding: xxpx xxpx;
padding: xxpx xxpx xxpx;
padding: xxpx xxpx xxpx xxpx;padding: auto;
padding: xxpx auto;padding-toppadding-leftpadding-rightpadding-bottom盒子模型
margin：外边距
margin: xxpx;
margin: xxpx xxpx;
margin: xxpx xxpx xxpx;
margin: xxpx xxpx xxpx xxpx;margin: auto;
margin: xxpx auto;margin-topmargin-leftmargin-rightmargin-bottom
border：边框
color：颜色;width：宽度;
style：outset|inset|solid|double|dottedborder-radius: 10px; /* 同时设置4个角*/
background-color: 背景颜色
background-image: 背景图片
background-repeat: no-repeat | repeat-x |
repeat-y | repeat背景
background-position: xxxpx xxpx | xx%
xx%; (可以为负数)
background-size: xxxpx xxpx | xx% xx% |
cover | contain; (不能为负数)
cover: 拉伸,可以超出contain: 拉伸不能超出
background-attachment: scroll(随着内容
一起滚动) | fixed (不滚动)
hidden：隐藏
scroll：滚动
overflow：当内容溢出
时的处理方式
visible：直接显示
auto：如果溢出就滚动，否则不显示滚动条
visible 显示
visibility：设置元素是
否显示
hidden 隐藏，保留占位
none：隐藏，不保留占
位
block：设置为块级元
素
display：设置元素是否
显示
inline：设置为行级元
素
布局
inline-block：设置为行
内块元素
left 左浮动
float: 浮动right 右浮动
none 不浮动
left 不允许左边有浮动
clear: 清除浮动right 不允许右边有浮动
both 不允许两边有浮动
ul或ol 自带样式：
列表样式
list-style-type: 列表项的
样式
margin: 16px 0px;padding: 0px 0px 0px
40px;
absolute：如果有父元素被定位按照父元素的原点进行定位，否则按照浏览器原点进行定位
position
定位
z-index: 设置z轴的值，
越大越在最前
relative：相对定位参照元素本身的位置
fixed：固定位置，不
会滚动
link 超链接默认样式
hover 鼠标悬停样式
active 鼠标点击样式
visited 访问之后的样式(主要控制颜色)
伪类
focus 获得输入焦点的
样式
first-child 第一个元素
last-child 最后一个元素
:not 不包含指定的选
择器
:noly-child 是父元素的唯
一子元素
cursor 鼠标样式
其他样式
box-shadow 阴影
translate: 平移
rotate：旋转transform：变换
scale：缩放
skew：扭曲
matrix：以变换矩阵变换
第一个值表示需要过渡的样式属性transition 过渡
transition:transform2s,background-color .5s;
第二个值表示整个过渡过程需要的时间第三个值表示过渡时的贝塞尔曲线第四个值表示延迟多久才开始过渡animation 动画
@keyfarmes 关键帧用于定义动画的细节(每一帧如何显示)
@keyframes myanimation {0% { background-color: #cfc; }30% {
background-color: #ccf;border-radius: 50px;}80% {
width: 300px;
background-color: #fcc;}
100% {
width: 300px;height: 300px;
background-color: #000;}}
@-o-keyframes myanimation {}@-ms-keyframes myanimation {}@-moz-keyframes myanimation {}@-webkit-keyframes myanimation {}
需要显示动画的地方通过animation属性来使用声明的关键帧
.ac:active {
animation: myanimation 5s;-o-animation: myanimation 5s;-ms-animation: myanimation 5s;-moz-animation: myanimation 5s;-webkit-animation: myanimation 5s;}opacity透明度从0.0 ~ 1.0 0.0完全透明，1.0 完全不透明浏览器兼容前缀
-webkit-chrome，safari, opera-o-opera
-moz-firefox
-ms-ie(ie9以上)
JavaScript
javascript代码必须包含在标签中
也可以书写到外部的.js文件中,通过来引入
script标签只能同时做一件事情.如果既有src属性也包含代码则只会执行外部文件的代码
通过alert来弹出提示框
通过document.write来输入文本到页面上(可以输入标签)Number: 数值型整数和小数Boolean: 布尔型(true |
false)
String: 字符串
字符串必须被""或'包含必须对称
如果字符串中包含引号可以单引号中包含双引号或者是双引号中包含单引号
也可以使用'来表示一个单引号"来表示一个双引号
表示换行数据类型
表示制表符表示书写方式
NaN: Not A Number 当使用非数字来进行运算时
的值
undefied: 未定义
null: 空值
substring 截取子串, 从start到end-1处,如果
没指定end则取到最后一个字符
toUpperCase 将所有字符变成大写
toLowerCase 将所有字符变成小写
indexOf 查找子串首次出现的位置, 如果找不到则
返回-1字符串处理
lastIndexOf 查找子串最后一次出现的位置, 如果找不到则返回-1charAt 取指定位置上
的字符slice 也是取子串,效果和substring一样可以用-1,-2,-3...从末尾
开始计数split 将字符串按照指定的字符进行拆分成
为数组
获取当前时间var now = new Date()
获取指定时间的日期对象
var date = new Date(yyyy,MM,dd,HH,mm,ss)
设置指定时间(将时间对象设置为一个指定时间)
now.setFullYear(yyyy,MM,dd,HH,mm,ss)
now.setMonth日期Date
now.setDatenow.setHours
...
获取指定时间信息
now.getFullYear() // 年只能取出年份,如: 2015
now.getMonth // 月0-11月
now.getDate // 日
now.getDay // 星期0-6 (0表示星期天)
now.getHours // 时24小时制
now.getMinutes // 分now.getSeconds // 秒now.getMilliseconds// 毫秒
通过new Array()来创建数组var names = new Array();
var names = new Array("小王", "大王", "炸弹"); // 创建时给数组设置默认值
//用json格式表示数组
var names = [];
var names = ["小王", "大王", "炸弹"];数组Array
可以通过length来设置或获取数组的长度
push : 往数组末尾添加元素
pop: 删除并返回数组的最后一个元素unshift: 往数组的开头添加元素shift: 删除并返回数组的第一个元素reverse: 颠倒数组顺序
sort: 按"字符串"的自然排序规则进行升序
splice: 删除指定位置处的指定个数元素并将第三个参数之后的参数添加到被删除位置(设置第二个参数为0则实现只添加不删除, 之传入两个参数实现只删除不添加)
slice: 获取start到end处的子数组
join: 将数组元素以指定分隔符进行连接成为字符串
function xxx(....) {
声明函数
....}
var xxx = function (...) {
...
函数变量
}var ooo = xxx;
ooo();函数
function fn(fx) {
fx();
将函数作为参数
}fn(function () {
...});(function (...) {
立即执行函数
....})(...);
getElementById 根据id获取唯一的元素var xx = document.getElementById("xx");DOM(Document Object Model) 文档对象模型
获取元素
getElementsByTagName 根据标签名获取元
素数组
onclick 鼠标点击事件
getElementsByClassName 根据类获取元素数组(如果元素被改变了class值将会从数组
中删除)
onmouseover 鼠标进入事件
onmouseout 鼠标离开事件
onmousemove 鼠标被移动
onmousedown 鼠标按钮被按下事件机制
onmouseup 鼠标按钮被松开
onkeydown 某个键盘按键被按下
onkeyup某个键盘按键被松开
onload 一张页面或图像被完成加载
onchange 域的内容被改变
onfocus 元素获得焦点
onblur 元素失去焦点
setTimeout: 延迟执行(只会执
行一次)var xx = setTimeout(xxx, 1000);setTimeout("fn();", 3000);BOM(Browser Object Model)
window
清除使用clearTimeout(xx);setInterval: 定时执行(间隔指
定时间循环执行)
xx.offsetLeft获取元素的位置和尺寸(只读)
xx.offsetTopxx.offsetWidthxx.offsetHeight
var xx = setInterval(xxx,1000);
清除使用clearInterval(xx);
[] 表示[]中的字符任意取一个
在[] 中的^ 表示非不包含该字符
() 表示将多个表达式合并为一个表达式
在()中的|表示将两个匹配条件进行逻辑“或”(Or)运算。+ 前一个表达式出现至少一次1~n {1,}* 前一个表达式出现任意次0~n {0,}? 前一个表达式出现0~1次{0,1}{n} 前一个表达式出现n次
{n,} 前一个表达式出现至少n次{n,m} 前一个表达式出现n~m次. 任意字符(不包含
)正则表达式
^ 匹配字符串的开头$ 匹配字符串的结尾
w 表示一个任意的单词字符包括_ [a-zA-Z0-9_] * 不包含破折号
W 对w取反(不包含单词字符) [^a-zA-Z0-9_]d 表示一个数字字符[0-9]D 对d取反[^0-9]s 表示一个任意空白字符空格中文状态的空格制表符全角空格
S 对s取反非空格
换行符 单词边界
B 不是单词边界(对取反)
eval
执行字符串形式的
代码。
for(var i in array) {var item = array[i];
}
for(var key in obj) {var value = obj[key];
}
迭代数组迭代出的值为数组的下标
for...in
迭代对象迭代出的值为对象的属性名其他
with
设置以某个对象为代码块作用域对象
delete attribute删除属性
isNaN
如果被判断值不是一个数字则返回true，