前端个人工作总结.docx
《前端个人工作总结.docx》由会员分享，可在线阅读，更多相关《前端个人工作总结.docx（21页珍藏版）》请在冰豆网上搜索。
前端个人工作总结
前端个人工作总结
篇一：
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（1.jpg）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（1.jpg）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（1.png）50%102%no-repeat,#222url（2.png）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）>（>）
八.命名空间
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
篇二：
wEB前端开发经验总结
wEB前端开发经验总结
发布时间：
20XX-04-20XX:
05:
33来源：
作者：
shengman点击：
21015
这里跟大家谈谈个人对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标准的问得最多的问题之一，我也曾经常被这个问题所困扰，这里就说说我对合理布局的一些理解。
在开始讲合理布局的页面要达到的要素前，我们还是用个实例来讲解会更直观些。
先来看看这个图片：
不错，这个是一个文章详细页，没有左右两栏布局，不过这里我重点要讲的是合理的布局，在稍后的文章中我会详细的介绍浮动元素。
好，回到刚才的话题，大家看到了这个页面了。
我这里先把代码写给大家看看（省略了部分代码）：
domain来源：
发布时间：
20XX年4月28日
代码篇
之前整理发表了《XmLHTTPRequest的属性和方法简介》,它ajax要使用的核心的技术之一，现在就来实际运用它。
这个ajax标签导航，是我很久前就写的一个脚本，很实用的（还被很多网站收录了哦），现在拿它来做实例讲解吧！
当然个人能力有限，有什么不对的地方还请多包含!
效果大家看到了，核心功能有：
1、将当前选中标签以特殊的样式显示
2、将异步加载的页面信息显示到指定的dom节点中
我们来看看处理脚本的代码吧：
程序代码：
ajaxtab.js
//判断是否支持activeX
varuseactiveX=（typeofactiveXobject!
=“undefined”）;
//判断是否支持dom
varusedom=document.implementation&&document.implementation.createdocument;
//判断是否支持XmLHttpRequest对象
varuseXmlHttp=（typeofXmLHttpRequest!
=“undefined”）;
//XmLHttpRequest对象版本
varaRR_XmLHTTP_VERS=[“mSXmL2.XmlHttp.6.0”,”mSXmL2.XmlHttp.3.0”];
//dom对象版本
varaRR_dom_VERS=[“mSXmL2.domdocument.6.0”,”mSXmL2.domdocument.3.0”];
/*===========================================================
*函数名称：
$（i）
*参数说明：
i-目标节点名称
*函数功能：
获取指定的目标dom节点
*返回值：
返回要搜索的目标dom节点
*使用方法：
$（“frmSearch”）
============================================================*/
function$（i）{
if（!
document.getElementByid）returnfalse;
if（typeofi===“string”）{
if（document.getElementByid&&document.getElementByid（i））{
//w3cdom
returndocument.getElementByid（i）;
}
elseif（document.all&&document.all（i））{
//mSiE4dom
returndocument.all（i）;
}
elseif（document.layers&&document.layers[i]）{
//nn4dom..note:
thiswon'tfindnestedlayers
returndocument.layers[i];
}
else{
returnfalse;
}
}
else{returni;}
}
//-->
id=“news”-news就是我们的导航标签的id；
id=“newscnt”-newscnt就是我们要写入信息的目标dom节点；
class=“first”-first当前（第一个）标签的样式；
id=“news-0”-news-0通过”-“分开，我们就分别可以得到news（导航标签id），0（标签[li]在导航标签中的索引值）
网站重构-超链接
-标签间的分割线
我罗列的这些东西，相信大家开始看出了些头绪了，呵呵，不过别急！
在我们看处理的脚本之前，先让我们来看看导航标签的样式，主要是看看我们对分割线的处理（一点cSS处理的技巧
XHTmL
cSS
Javascript
dom
XmLHttpRequest对象
innerHTmL
还有XmL，我们这个例子没有涉及到。
东西虽小，包含的（web前端开发）知识可是都用到了啊，我把我会的点东西都端出来了（要失业了），呵呵！
当然我很喜欢跟大家多交流，以后有时间，我们在来谈谈cSS的HacKS技巧，Javascriptdom编程等等的，今天就收工了，谢谢捧场先！
！
！
copyright©20XX-20XXhref=“”>,allrightsreserved.PoweredBy:
domain
看出来什么没有？
（代码是很多）可能大家已经发现，整个页面里基本上都是用户要看的数据，其中只包含了很少（必要）的布局（XHTmL）标签（请允许我这么说）。
整个页面基本都是由最基础的h1~h6、p、ul、ol、li、form、div标签来实现的。
说到这里就要讲到我在前面提到的“结构清晰、SEo优化、页面体积小、XHTmL代码中基本上都是用户要看的数据”，看看我的这个例子做到了没有？
结构清晰--也就是我们常说的，XHTmL标签要结构化（语意化）。
什么叫结构化？
由于个人认为这个知识点是十分重要的，所以请允许我在这里多罗嗦几句，我们采用wEB标准的方法制作页面的优势就体现在页面结构清晰。
我们以前用table布局的时候，我们的表现（数据）和形式（布局样式）是混在一起的，有很多冗余的数据混杂在一起，而大家再看看我上面给大家展示的代码，很明显，结构十分清晰。
说了半天，还是没有说什么是结构化，什么才是结构清晰啊？
不要急。
还记得我刚才提到的那几个标签吗？
篇三：
web前端面试总结
web前端面试笔试题+优化
前端是庞大的，包括HTmL、cSS、Javascript、image、Flash等等各种各样的资源。
前端优化是复杂的，针对方方面面的资源都有不同的方式。
那么，前端优化的目的是什么
1.从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
2.从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。
前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等;第二类则是代码级别的优化，例如Javascript中的dom操作优化、cSS选择符优化、图片优化以及HTmL结构优化等等。
另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。
一、页面级优化
1.减少HTTP请求数
这条策略基本上所有前端人都知道，而且也是最重要最有效的。
都说要减少HTTP请求，那请求多了到底会怎么样呢?
首先，每个请求都是有成本的，既包含时间成本也包含资源成本。
一个完整的请求都需要经过dnS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个“漫长”而复杂的过程。
时间成本就是用户需要看到或者“感受”到这个资源是必须要等待这个过程结束的，资源上由于每个请求都需要携带数据，因此每个请求都需要占用带宽。
另外，由于浏览器进行并发请求的请求数是有上限的（具体参见此处），因此请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间，会给用户造成站点速度慢这样一个印象，即使可能用户能看到的第一屏的资源都已经请求完了，但是浏览器的进度条会一直存在。
减少HTTP请求数的主要途径包括：
（1）.从设计实现层面简化页面
如果你的页面像XX首页一样简单，那么接下来的规则基本上都用不着了。
保持页面简洁、减少资源的使用时最直接的。
如果不是这样，你的页面需要华丽的皮肤，则继续阅读下
面的内容。
（2）.合理设置HTTP缓存
缓存的力量是强大的，恰当的缓存设置可以大大的减少HTTP请求。
以有啊首页为例，当浏览器没有缓存的时候访问一共会发出78个请求，共600多K数据（如图1.1），而当第二次访问即浏览器已缓存之后访问则仅有10个请求，共20多K数据（如图1.2）。
（这里需要说明的是，如果直接F5刷新页面的话效果是不一样的，这种情况下请求数还是一样，不过被缓存资源的请求服务器是304响应，只有Header没有Body，可以节省带宽）
怎样才算合理设置?
原则很简单，能缓存越多越好，能缓存越久越好。
例如，很少变化的图片资源可以直接通过HTTPHeader中的Expires设置一个很长的过期头;变化不频繁而又可能会变的资源可以使用Last-modifed来做请求验证。
尽可能的让资源能够在缓存中待得更久。
（3）.资源合并与压缩
如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。
另外，cSS、Javascript、image都可以用相应的工具进行压缩，压缩后往往能省下不少空间。
（4）.cSSSprites
合并cSS图片，减少请求数的又一个好办法。
（5）.inlineimages
使用data:
URLscheme的方式将图片嵌入到页面或cSS中，如果不考虑资源管理上的问题的话，不失为一个好办法。
如果是嵌入页面的话换来的是增大了页面的体积，而且无法利用浏览器缓存。
使用在cSS中的图片则更为理想一些
（6）.LazyLoadimage
这条策略实际上并不一定能减少HTTP请求数，但是却能在某些条件下或者页面刚加载时减少H
升级会员 