《web前端年终工作总结.doc》由会员分享，可在线阅读，更多相关《web前端年终工作总结.doc（59页珍藏版）》请在金锄头文库上搜索。
1、web前端年终工作总结篇一：web前端学习总结(精华版)Web总结一.名词解释1. 横切在固定页面的宽度(按栅格化进行)并且对高度没有限制的容器称为一个标准横切2. 留白两个容器或碎片之间的上、下、左、右的空白距离3. 继承元素可以从其父级元素中获得一些可为自己使用的属性或值。4. 图片定位把图片元素放置到一个静态的、相对的、绝对的、或固定的位置中，利用CSS中对图片进行遮罩属性，多用于页面中的修饰图5. 底图页面中在标签中使用的背景图6. 齐底(图)线用于区分横切或碎片结束的线或图7. 页面结构页面的基础框架，由横切、布局元素组成8. 焦点区(图)最易注意的区域9. 导航在页面中具有导向性的
2、链接集合10. 头图页面主题图片11. 间距碎片或文字间的距离12. 行高文字段落中行与行之间的距离13. 首行缩进文字段落首行缩进14. 浮动使被定义的区域脱离正常的页面文档流15. 碎片由文字、图片组合成的内容区域16. 通栏广告与页面内容区同宽的广告区域17. 功能按钮具有交互属性的按钮18. 私有样式当前页面独立使用的样式，不具备公用性19. 水平(垂直)居中在页面中的某个元素处于父级的上下或左右的相同距离20. 标准头(尾)定义相同的页面头或尾元素集合二.文本格式化1. 段落：p2. 斜体：address（联系信息）em（强调）i（突出不同）cite（引用）dfn（首次定义术语）3.
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. 创建各种框:注：textpas
4、sword/url/tel/emailId:为了让对应的标签识别，添加CSSName：为了让服务器和脚本识别，通常与id设为一样Size：文本框大小Maxlength：能输入的最大字符数Pattern：正则表达式4. 添加标签：5. 单(多)选按钮：北京上海注：id各自唯一，name必须相同。checked：默认选择6. 下拉框：北京上海成都注：size:选择框的高度 multiple：允许多选 selected：默认选择 用对选择框进行分组7. 上传文件：注：size：输入路径和文件名的字段的宽度8. 禁用表单元素：9. 创建提交按钮：创建带图像的提交按钮：点击这里 创建图像按钮：Submi
5、treset重置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，inline-block8. 单词大小写:
6、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：不包括padding，border，margin；max-w
7、idth设置外围限制；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;
8、 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半径
9、/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;17. 透明度： opacity:.5; 01 透明不透明18. 渐
10、变背景：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 .aac .mp45.添加音频：音频属性：src autoplay controls m
11、uted loop preload 。多个来源同video。七.一些约定我们结合常用的一些命名习惯，再结合CSS的实际应用，整理出一些较好的命名习惯。1. 样式名称首字母统一为小写字母，不能为数字，下划线及特殊字符；2. 样式名尽量语义化或简写；3. 样式名需要组合拼写时，采用全部小写拼写并使用下划线连接，即：all_keyword；4. 使用px(像素)为基本计量单位；5. 页面中空格的使用：全角：中文空格 半角；6. 项目完成包中，文件夹及文件名称全部采用小写字母，不使用中文文件名；7. 减少DIV的嵌套层数；8. 给重要图片加上alt属性；给重要的元素和截断的元素加上title；9. 使
12、用正确的注释方法（详见“注释”章节）；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，事实上undefined并非JavaScript的关键字，可以给全局的undefined属性赋值来改变它的值。 Null:只有一个值null,但是JavaScript为它提供了一个关键字null来表示这个唯一的值。Null类型的语义是“一个空的对象引用”。Number:NaN是其一个特殊的属性值，typeof NaN / “number”);String:其正式解释是一个16位无符号整数类型的序列，它实际上用来表示以UTF-16编码的文本信息。 Boolean:有两种取值true和false。0、NaN、
