竭诚为您提供优质文档/双击可除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.段落：p2.斜体：address（联系信息）em（强调）i（突出不同）cite（引用）dfn（首次定义术语）3.粗体：strong（重要）b（提醒）4.图片块：figure5.引述文段，段落缩进：blockquote6.背景颜色：mark7.虚线下划线：abbr8.上标下标：sub/sup9.下划线：ins10.删除线：del（标记已删除内容）s（标记不准确内容）11.等宽字体：code12.预格式化：pre13.字号减小，表注释：small14.时间：time15.换行：br16.html5定义区块：headernavarticlesectionasidefooterdivspan三.表单表格1....2.表单元素的组织：......3.创建各种框:注：text→password/url/tel/emailId:为了让对应的标签识别，添加cssname：为了让服务器和脚本识别，通常与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-block8.单词大小写: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.webm2.添加视频：视频属性：srcautoplaycontrolsmutedloopposterwidthheightpreloa d3.为视频添加多个来源：div{float:left;margin-left:10px;width:200px;height: 200px;border:1pxsolidred;}浮动后本来外边距10px,但Ie解释为20px,解决办法是加上display:inline;三、为什么中火狐浏览器下文本无法撑开容器的高度？标准浏览器中固定高度值的容器是不会象Ie6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px;这里为了照顾不认识min-height的Ie6可以这样定义：div{height:auto!important;height:200px;min-height:200px;}四、为什么web标准中无法设置Ie浏览器滚动条颜色了？原来样式设置：body{scrollbar-face-color:#f6f6f6;scrollbar-highlight-color:#fff;scrollbar-shadow-color:#eeeeee;scrollbar-3dlight-co lor:#eeeeee;scrollbar-arrow-color:#000;scrollbar-track-color:#f ff;scrollbar-darkshadow-color:#fff;}解决办法是将body换成html五、如何定义1px左右高度的容器？Ie6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden|zoom:0.08|line-height:1px六、怎么样才能让层显示在FLAsh之上呢？解决的办法是给FLAsh设置透明::七、怎样使一个div层居中于浏览器中？div{position:absolute;top:50%;left:50%;margin:-100px00-100px;width:200px;height:200px;border:1pxsolidred;}–>这里使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二八、firefox浏览器中嵌套div标签的居中问题的解决方法假定有如下情况：如果要实现b在a中居中放置，一般只需用css设置a 的text-align属性为center。
这样的方法在Ie里看起来一切正常；但是在Firefox中b却会是居左的。
解决办法就是设置b的横向margin为auto。
例如设置b的css样式为：margin:0auto;新手必看hTmL之DocType 的几种类型(20XX-08-0314:17:40)转载▼标签：doctype类型详细doctype的几种类型html之doctype分类：前端文摘在默认情况下，FF和。