《web前端年终工作总结》由会员分享，可在线阅读，更多相关《web前端年终工作总结（59页珍藏版）》请在金锄头文库上搜索。
1、webweb 前端年终工作总结前端年终工作总结篇一：web 前端学习总结(精华版)Web 总结一.名词解释1. 横切在固定页面的宽度(按栅格化进行)并且对高度没有限制的容器称为一个标准横切2. 留白两个容器或碎片之间的上、下、左、右的空白距离3. 继承元素可以从其父级元素中获得一些可为自己使用的属性或值。4. 图片定位把图片元素放置到一个静态的、相对的、绝对的、或固定的位置中，利用 CSS 中对图片进行遮罩属性，多用于页面中的修饰图5. 底图页面中在标签中使用的背景图6. 齐底(图)线用于区分横切或碎片结束的线或图7. 页面结构页面的基础框架，由横切、布局元素组成8. 焦点区(图)最易注意的区
2、域9. 导航在页面中具有导向性的链接集合10. 头图页面主题图片11. 间距碎片或文字间的距离12. 行高文字段落中行与行之间的距离13. 首行缩进文字段落首行缩进14. 浮动使被定义的区域脱离正常的页面文档流15. 碎片由文字、图片组合成的内容区域16. 通栏广告与页面内容区同宽的广告区域17. 功能按钮具有交互属性的按钮18. 私有样式当前页面独立使用的样式，不具备公用性19. 水平(垂直)居中在页面中的某个元素处于父级的上下或左右的相同距离20. 标准头(尾)定义相同的页面头或尾元素集合二.文本格式化1. 段落：p2. 斜体：address（联系信息）em（强调）i（突出不同）cite（
3、引用）dfn（首次定义术语）3. 粗体：strong（重要）b（提醒）4. 图片块：figure5. 引述文段，段落缩进：blockquote6. 背景颜色：mark7. 虚线下划线：abbr8. 上标下标：sub/sup9. 下划线：ins10. 删除线：del（标记已删除内容）s（标记不准确内容）11. 等宽字体：code12. 预格式化：pre13. 字号减小，表注释：small14. 时间：time15. 换行：br16. html5 定义区块：header nav article section aside footer div span三.表单表格1. .2. 表单元素的组织：3.
4、 创建各种框:注：textpassword/url/tel/emailId:为了让对应的标签识别，添加 CSSName：为了让服务器和脚本识别，通常与 id 设为一样Size：文本框大小Maxlength：能输入的最大字符数Pattern：正则表达式4. 添加标签：5. 单(多)选按钮：北京上海注：id 各自唯一，name 必须相同。checked：默认选择6. 下拉框：北京上海成都注：size:选择框的高度 multiple：允许多选 selected：默认选择 用对选择框进行分组7. 上传文件：注：size：输入路径和文件名的字段的宽度8. 禁用表单元素：9. 创建提交按钮：创建带图像的提
5、交按钮：点击这里 创建图像按钮：Submitreset 重置10. 文本区域：请在此输入字符11. 表格 :四.文本格式化1. font：（斜体 粗体 小型大写字母） 字体大小(必有) 行距 字体集（必有）;2. 文本背景： background：#foc url（）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，i
6、nline-block8. 单词大小写: text-transform:capitalize(单词首字母大写)/uppercase(大写)/lowercase(小写)9. 文本上的线：text-decoraion:underline/overline/line-through;11. 空格：white-space:pre(显示所有空格回车)/nowrap（非断行空格） ；12. h316px; h512px; verdana,Geneva,sans-serif;13. 列表属性： lilist-style:url() inside square;五.CSS 布局1. width：不包括 pad
7、ding，border，margin；max-width 设置外围限制；2. 浮动：float:left; 清除浮动：clear:both;3. 设置边框： border:dotted 4px red;(dotted 点状、dashed 虚线、solid 实线)4. 使元素对齐：vertical-align:baseline/middle/text-bottom5. 显示：display:black/inline/inline-block;6. 显示：visibility:visible/hiddle;7. 相对定位：position:relative; top:5px; 相对于该元素的原始位
8、置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. 创建椭圆角：
9、 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() 50% 102% no-repeat,#222 url() 12px -150px repeat-x;
10、17. 透明度： opacity:.5; 01 透明不透明18. 渐变背景：background:linear-gradient(left,#000,#999); (left ：渐变线沿逆时针方向转至水平线的角度)六.html5 视频音频1. html5 支持 3 种视频：.ogg/.ogv .mp4/.m4v .webm2. 添加视频：视频属性：src autoplay controls muted loop poster width height preload3. 为视频添加多个来源：/嵌入 Flash 动画下载该视频4. html5 支持 5 中音频：.ogg .mp3 .wav .a
11、ac .mp45.添加音频：音频属性：src autoplay controls muted loop preload 。多个来源同 video。七.一些约定我们结合常用的一些命名习惯，再结合 CSS 的实际应用，整理出一些较好的命名习惯。1. 样式名称首字母统一为小写字母，不能为数字，下划线及特殊字符；2. 样式名尽量语义化或简写；3. 样式名需要组合拼写时，采用全部小写拼写并使用下划线连接，即：all_keyword；4. 使用 px(像素)为基本计量单位；5. 页面中空格的使用：全角：中文空格 半角； 6. 项目完成包中，文件夹及文件名称全部采用小写字母，不使用中文文件名；7. 减少 D
12、IV 的嵌套层数；8. 给重要图片加上 alt 属性；给重要的元素和截断的元素加上 title；9. 使用正确的注释方法（详见“注释”章节） ；10. 特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，例如：style、font等；11. 双标记签都要有开始和结束标签，单标记标签的后面一定要加“ /”,例如：等，并且有正确的层次；12. 其它特殊符号：1) 2) ()八.命名空间外挂样式名称全局：全局样式为全站公用，为页面样式基础，页面中必须包含。结构：页面结构类型复杂，并且公用类型较多时使用。多用在首页级页面和产品类页面中。 私有：独立页面所使用的样式文件，页面中必须包含。模块产品
13、类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用。默认文章图片下载主题实现换肤功能时应用。补丁基于以上样式进行的私有化修补。常用名称(1)页面结构容器: container页头：header内容：content/container/content(A)页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper篇二：Web 前端基础总结的基本类型：Undefined:只有一个值 undefined，它是变量未被赋值时的值，在 JS 中全局对象有一个 undefined 属性表示undefined，事实上 undefin
14、ed 并非 JavaScript 的关键字，可以给全局的 undefined 属性赋值来改变它的值。 Null:只有一个值 null,但是 JavaScript 为它提供了一个关键字null 来表示这个唯一的值。Null 类型的语义是“一个空的对象引用” 。Number:NaN 是其一个特殊的属性值，typeof NaN / “number”);String:其正式解释是一个 16 位无符号整数类型的序列，它实际上用来表示以 UTF-16 编码的文本信息。 Boolean:有两种取值 true 和 false。0、NaN、空字符串、null、undefined 转化为 false，其余的全部为
15、 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(undefi
16、ned=false); / false(undefined=null); / truenull instanceof Object /falsetypeof null/Object的类型转换手动的转换有：Number(x);Boolean(x);String(x);以及 parseInt,parseFloat,toString,valueOf 等等。自动的转换：如果“+”操作符的一个操作数是字符串，则会将另一个操作数转换为字符串，一元操作符“*” 、 “-”将操作数转换为数字，一元操作符“！”将操作数转换为布尔值并取反。hello+5 / hello5hello+null / hellonull5*5/25hello*5/NaNX+” ”/等价于 String(x)+X 或者 X-0/等价于 Number(X)!X/等价于 Boolean(X)属性四个参数：上右下左三个参数：上、左右、下两个参数：上下
