web前端年终工作总结.docx
《web前端年终工作总结.docx》由会员分享，可在线阅读，更多相关《web前端年终工作总结.docx（33页珍藏版）》请在冰豆网上搜索。
web前端年终工作总结
web前端年终工作总结
篇一：
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定义区块：
headernavarticlesectionasidefooterdivspan
三.表单表格
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：
#focurl（）repeat-xscroll00；}
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（）insidesquare;}
五.CSS布局
1.width：
不包括padding，border，margin；max-width设置外围限制；
2.浮动：
float:
left;清除浮动：
clear:
both;
3.设置边框：
border:
dotted4pxred;（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:
2px5px5px#999;}x/y/模糊半径
15.元素加阴影：
{（-moz-/-webkit-）box-shadow:
（inset内阴影）2px5px5px#999;5px10px2px#555（多重阴影）;}
16.多重背景：
{background:
#000url（）50%102%no-repeat,#222url（）12px-150pxrepeat-x;}
17.透明度：
{opacity:
.5;}0→1透明→不透明
18.渐变背景：
{background:
linear-gradient（left,#000,#999）;}（left：
渐变线沿逆时针方向转至水平线的角度）
六.html5视频音频
1.html5支持3种视频：
.ogg/.ogv.mp4/.m4v.webm
2.添加视频：
视频属性：
srcautoplaycontrolsmutedloopposterwidthheightpreload
3.为视频添加多个来源：
//嵌入Flash动画
下载该视频
4.html5支持5中音频：
.ogg.mp3.wav.aac.mp4
5.添加音频：
音频属性：
srcautoplaycontrolsmutedlooppreload。
多个来源同video。
七.一些约定
我们结合常用的一些命名习惯，再结合CSS的实际应用，整理出一些较好的命名习惯。
1.样式名称首字母统一为小写字母，不能为数字，下划线及特殊字符；
2.样式名尽量语义化或简写；
3.样式名需要组合拼写时，采用全部小写拼写并使用下划线连接，即：
all_keyword；
4.使用px（像素）为基本计量单位；
5.页面中空格的使用：
全角：
中文空格半角；
6.项目完成包中，文件夹及文件名称全部采用小写字母，不使用中文文件名；
7.减少DIV的嵌套层数；
8.给重要图片加上alt属性；给重要的元素和截断的元素加上title；
9.使用正确的注释方法（详见“注释”章节）；
10.特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，例如：
style、font
等；
11.双标记签都要有开始和结束标签，单标记标签的后面一定要加“/”,例如：
等，
并且有正确的层次；
12.其它特殊符号：
1） 2）>（>）
八.命名空间
外挂样式名称
全局：
全局样式为全站公用，为页面样式基础，页面中必须包含。
结构：
页面结构类型复杂，并且公用类型较多时使用。
多用在首页级页面和产品类页面中。
私有：
独立页面所使用的样式文件，页面中必须包含。
模块
产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用。
默认
文章
图片
下载
主题
实现换肤功能时应用。
补丁
基于以上样式进行的私有化修补。
常用名称
（1）页面结构
容器:
container
页头：
header
内容：
content/container/content（A）
页面主体：
main
页尾：
footer
导航：
nav
侧栏：
sidebar
栏目：
column
页面外围控制整体布局宽度：
wrapper
篇二：
Web前端基础总结
的基本类型：
Undefined:
只有一个值undefined，它是变量未被赋值时的值，在JS中全局对象有一个undefined属性表示undefined，事实上undefined并非JavaScript的关键字，可以给全局的undefined属性赋值来改变它的值。
Null:
只有一个值null,但是JavaScript为它提供了一个关键字null来表示这个唯一的值。
Null类型的语义是“一个空的对象引用”。
Number:
NaN是其一个特殊的属性值，typeofNaN//“number”）;
String:
其正式解释是一个16位无符号整数类型的序列，它实际上用来表示以UTF-16编码的文本信息。
Boolean:
有两种取值true和false。
0、NaN、空字符串、null、undefined转化为false，其余的全部为true。
Object:
最为复杂的类型就是Object，它是一系列属性的无序集合，Function是实现了私有属性[[call]]的Object，JavaScript的宿主也可以提供一些特别的对象。
typeof
*'3','344'+//‘Object’
关于null和undefined：
null是关键字；undefined不是关键字，undefined是Global对象的一个属性。
运算时null与undefined都可以被类型转换为false，但不等值于false：
（!
null,!
undefined）;//true,true
（null==false）;//false
（undefined==false）;//false
（undefined==null）;//true
nullinstanceofObject//false
typeofnull//Object
的类型转换
手动的转换有：
Number（x）;Boolean（x）;String（x）;以及parseInt,parseFloat,toString,valueOf等等。
自动的转换：
如果“+”操作符的一个操作数是字符串，则会将另一个操作数转换为字符串，一元操作符“*”、“-”将操作数转换为数字，一元操作符“！
”将操作数转换为布尔值并取反。
‘hello’+5//‘hello5’
‘hello’+null//‘hellonull’
‘5’*5//25
‘hello’*5//NaN
X+””//等价于String（x）
+X或者X-0//等价于Number（X）
!
!
X//等价于Boolean（X）
属性
四个参数：
上右下左
三个参数：
上、左右、下
两个参数：
上下、左右
一个参数：
四周
4.关于float问题，浮动元素后跟非浮动元素的情况。
后边非浮动元素若为行内元素且因为定位产生重叠时，行内元素边框、背景和内容都在该浮动元素“之上”显示，若为块级元素且因为定位产生重叠时，该块级元素边框和背景在该浮动元素“之下”显示，只有内容在浮动元素“之上”显示。
【有示例】。
Clear属性规定元素的哪一侧不允许其他浮动元素。
clear属性定义了元素的哪边上不允许出现浮动元素。
在
CSS1和CSS2中，这是通过自动为清除元素（即设置了clear属性的元
素）增加上外边距实现的。
在中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。
不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
5.绝对定位、相对定位与浮动定位
绝对定位：
absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。
元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
相对定位：
relative生成相对定位的元素，相对于其正常位置进行定位。
设置为相对定位的元素框会偏移某个距离。
元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
浮动定位：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
示例代码就是最外层的div是relative，里面的就是absolute。
6.关于DOM元素
利用DOM，JS可以相对简单地寻找、访问和操纵HTML元素，从而动态地改变HTML页面的内容和外观。
节点常用的属性有parentNode,childNodes,firstChild,lastChild,
previousSibling,nextSibling。
7.关于函数
定义顺序：
函数的定义与其他的语句的定义不再同一个时间轴上面，计算机在开始执行语句之前，会先查找所有的function的定义，然后保存。
所以在函数后面定义的调用语句可以调用到定义在前面的函数。
局部变量与全局变量：
局部变量只适合于函数的参数和函数内部已var关键字定义的变量。
如果没有定义同名的局部变量，函数内部则可能访问全局变量。
闭包：
首先要知道在js中，函数在一旦定义的时候就会产生自己的一个作用域，而此后这个函数的执行也是要依赖于这个作用域的。
闭包的最常用的编程模式就是在一个函数中嵌套另一个函数，然后将这个嵌套的函数作为返回值返回，当然外部函数中的局部变量也就存在于这个返回函数的作用域中的，这样就起到了对局部变量的一个访问控制。
但是缺点在于增大了内存的开支。
而且其所派生的子类将不能访问其私有属性，破坏了继承性。
因此还是需要三思而行。
闭包可以用在许多地方。
它的最大用处有两个，一个是前面提到的保护函数内部的变量，另一个就是让在内存中维持变量。
我写的闭包主要用于实现一些插件，因为有一些变量需要避免被全局变量污染。
可选参数：
Js不会限制传入函数的参数数目。
如果传入的参数过多，多余的参数会被忽略掉。
如果过少，缺失的参数会默认为undefined。
apply和call的区别：
相同点:
两个方法产生的作用是完全一样的。
不同点:
方法传递的参数不同，apply（obj,[arg1,arg2..]）call（obj,arg1,arg2）
原型：
所有对象都有一个原型，对象可以共享其原型的属性，但是这种共享是单向的，即原型的属性影响对象，改变对象确不会影响到原型。
原型污染：
使用for/in遍历对象的时候，会同时得到本来的属性和原型的属性，可以使用HasOwnPorperty方法来判断。
匿名函数：
一般用来写已加载就需立即执行的函数。
同时为了避免受全局变量的影响，在一个不是很熟悉的页面增加Javascript时非常有效。
和Span有何区别？
答：
两者最明显的区别在于DIV是块元素，而SPAN是行内元素（也译作内嵌元素）。
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行，
当然这一点也可以通过设置display（block,inline,inline-block）来改变。
9.CSS+DIV开发Web页面的优势有哪些？
答：
1）
2）
3）CSS+DIV，这个页设计模式中，DIV承担了页的内容，CSS承担了页的样式。
这样就使页的内容和样式的分离开来。
有利于页面的维护升级。
有助于提高搜索引擎亲和力（快速找到需要的数据，而不是像在TABLE中一层层的查找）有助于页面的重构（换皮肤如blog，直接套用另外一套样式就可以实现，而不
用改动页脚本。
）
与setTimeout的区别？
答：
setTimeout方法是定时程序，也就是在什么时间以后干什么。
干完了就拉倒。
setInterval方法则是表示间隔一定时间反复执行某操作。
及其优缺点：
答：
AsynchronousJavaScriptandXML”（异步JavaScript和XML）。
在浏览器中使用js进行服务器的请求与响应，使得可以在不更新整个页面的前提下维护数据。
其名字中的xml并非指只支持xml这一种文本格式，xml只是一个选择而已，其他还可以是表单与json。
这样做只是xml流行时的遗迹。
优点：
使用Ajax的最大优点就是可以实现页面的局部刷新，提高用户体验质量。
其他优点有使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。
并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
缺点：
1.干掉了back按钮。
因为在未刷新页面的时候是无法使用back按钮的。
2.安全问题，将一些数据、逻辑暴露在了前台。
3.对搜索引擎的支持较弱。
4.违背了Url资源定位的初衷。
属性的相关注意问题与apply的使用
常用于实现继承。
Call与apply的作用相同，只是参数的形式不一样而已。
如（func1,var1,var2,var3）对应的apply写法为：
（func1,[var1,var2,var3]）
Call的使用Apply的使用
中事件绑定，什么时候有前缀on，什么时候没有？
兼容性问题。
答：
下图显示了采用三种方式注册的事件。
兼容性问题可见：
注意这两句写法：
篇三：
web前端面试总结
1.什么是SemanticHTML（语义HTML）
SemanticHTML是一种编码风格,它通过添加能够被计算器所理解的语义（Metadata），从而使HTML成为一个通用的信息交换媒介。
在语义HTML中，,这类其中的内容不具有实际意义的标签是不应该被使用的，因为他们只是为了进行格式化，没有提供要表达的意义及页面结构。
2.DOCTYPE有什么作用？
DOCTYPE主要作用是告诉浏览器这个页是哪种HTML，浏览器根据这个标示进行页面渲染。
如果DOCTYPE声明不当或没有声明，浏览器将会用quirksmode（怪异模式）对页面进行渲染。
3.什么是quirksmode（怪异模式）？
怪异模式（英语：
quirksmode）是指在计算机领域中，一些页浏览器为了维持对较旧的页设计的向后兼容性，而使用的一种技术，有别于严格遵循万维联盟（W3C）与互联工程任务组（IETF）标准而设计的“标准模式”。
4.标准模式和怪异模式之间的区别是什么？
两者之间突出的不同是对CSSIE盒模型缺陷的处理。
在IE6之前，InternetExplorer曾经使用一种决定一个元素的盒模型的宽度和高度的，与CSS规范所指定相冲突的算法，而且由于InternetExplorer的流行，很多依赖于这种不正确的算法的页被创建。
而在IE6,InternetExplorer在标准模式下渲染时使用了CSS规范的算法，而在quirks模式下使用先前的，不规范的算法。
另一个值得一提的不同点是某些行内（inline）元素的垂直对齐；很多早期的浏览器对齐图片至包含它们的盒子的下边框，虽然CSS的规范要求它们被对齐至盒内文本的基线。
标准模式下，基于Gecko的浏览器将会对齐至基线，而在quirks模式下它们会对齐至底部。
HTML5常见面试题：
1.html5有哪些新的页面元素？
主要有,,,,,,,,,,,,,,,,,,,和
2.HTML5去除了哪些页面元素？
和
3.HTML5有哪些新的表单元素？
和4.HTML5增加了哪些标准的API
MediaAPI,TextTrackAPI,ApplicationCacheAPI,UserInteraction,DataTransferAPI,CommandAPI,ConstraintValidationAPI,和HistoryAPI.
5.HTML5和老的HTML之间的缓存机制
升级会员 