web前端开发知识点总结

HTML知识总结常用标签文本类span行级元素，多个同行div块级元素，独占一行p块级元素，前后保留一行h标题标签，h1~h6表6个等级，加粗，前后保留一行图片标签imgwidth：设置宽度height：设置高度alt：图片加载失败显示的文本水平线hrcolor：颜色size：高度（粗细）width：宽度（长度）超链接aherf：超链接转到的地址target_self:默认值，在当前页面打开_blank:在新窗口打开带标题的框fieldsetlegend设置标题列表标签无序列表uldisc：实心圆square：小方块circle：空心圆有序列表ol表格标签tabletr表示行th表示标题单元格，居中、加粗td表示一个单元格caption表示标题，定义在第一行，居中rowspan设置单元格占的行数colspan设置单元格占的列数表单项formaction表单提交地址methodget：显示提交参数，将参数用?和&拼接到url上带到服务器端post：隐式提交参数下拉菜单selectoptionoptgroup表示分组,分组不能选,只能选分组中的optionselected默认选中multiple设置下拉菜单为多选模式文本域textarearows:显示文本的行数(高度)cols:显示文本的列数(宽度)input文本框type=“text”name：参数名size：显示字符长度（控制文本框长度）maxlength：最大可输入字符数placeholder：提示内容disabled：不会被提交到服务器readonly：只读（会被提交到服务器）value：默认值input密码框type=“password”单选按钮type=“radio”checked：默认选中复选框type=“checkbox”文件选择框type=“file”按钮按钮type=“button”提交type=“submit”重置type=“reset”框架集framesetframe：表示框架noresize：不能改变框架大小scolling：是否显示滚动条（yes、no、auto）rows设置框架集在纵向上的拆分策略cols设置框架集在横向上的拆分策略border框架边框的宽度borderColor框架边框颜色frameBorder设置框架是否有边框(yes|no)框架集中的超链接打开方式target_blank:新窗口中打开_self:在当前窗口打开_parent:父窗口中打开_top在最顶层窗口中打开frameName：在对应name框架打开其他标签ifame在页面中嵌入框架dl、dt、dddldt数码/dt!--dt不会缩进--dd手机/dd!--dd会缩进--/dlmarquee：滚动标签imgusemapimgsrc=usemap_img.jpgusemap=#yifuMapmapname=yifuMapid=yifuMapareashape=circlecoords=309,257,20target=_blankhref==帽子areashape=polycoords=258,316,277,283,340,280,356,314target=_blankhref==t恤/maphtml5新标签ruby：用rt包含的内容对前面的普通文本进行注释ruby漢rtㄏㄢˋ/rt呵呵呵rthehehe/rt吃了没？rtareyouchile?/rt/ruby输入控件range：范围选择color：颜色选择number：数字输入datepicker：日期选择datalist：自动提示datalistid=arealistoptionsichuan/optionoptionchongqing/optionoptionguangzhou/optionoptionshanghai/optionoptionbeijing/optionoptiontianjin/option/datalistinputtype=textlist=arealisthtml5新标签媒体video：动画radio：音频controls:播放控制条autoplay：自动播放loop：循环播放preload：预加载，如果设置了autoplay，就可以不用设置preloadautocomplete：是否关闭自动提示（off|on）autofocus:自动获得焦点required:表示控件必须输入内容CSS知识点总结样式定义方式内联：直接在标签的style属性上编写样式inputtype=textstyle=color:blue;background-color:#eeeeff;样式块：在style标签中编写样式块，并通过一定规则（选择器）应用到对应的那些标签上(通常写在head中)stylespan{color:green;background-color:#eeffee;}/style外部样式文件：将样式块编写在外部的css文件中(不用写style标签)*在需要使用样式的页面通过link标签引入样式文件(通常写在head中)linkhref=hehe.cssrel=stylesheet选择器id选择器#xxx针对id为xxx的标签类选择器.xxx针对class属性为xxx的标签标签选择xxx针对标签名为xxx的标签*选择器选择所有元素后代元素关系选择selector1selector2{...}针对selector1下的所有的selector2子元素关系选择selector1selector2{...}只针对selector1的selector2子元素(如果有后代selector2元素则不会应用)紧邻兄弟关系选择selector1+selector2{...}只针对紧接在selector1后的selector2元素所有随后的兄弟关系selector1~selector2{...}针对selector1后的所有的selector2兄弟元素常用属性字体color：字体颜色font-size：字体大小font-family：字体样式font-weight:bolder(加粗)|normal(不加粗)font-style:设置字体倾斜(normal|italic|oblique)*italic和oblique实际显示效果几乎一致font-variant:设置字体显示为小型大写字母文本text-align:水平对齐方式(left|center|right)vertical-align:垂直对齐方式(top|middle|bottom)line-height:设置行高(通常用于设置文本居中)white-space:nowrap不换行,pre当做pre标签border:边框(1pxsolidred)width:宽度height:高度text-decoration:文本装饰underline下划线overline上划线line-through贯穿线(删除线)blink闪烁none无text-shadow:文本阴影dtext-shadow:3px3px5pxred;第一个参数:阴影水平位置(x轴上的偏移量)第二个参数:阴影垂直位置(y轴上的偏移量)第三个参数:模糊程度第四个参数:阴影颜色盒子模型padding：内边距padding:xxpx;padding:xxpxxxpx;padding:xxpxxxpxxxpx;padding:xxpxxxpxxxpxxxpx;padding:auto;padding:xxpxauto;padding-toppadding-leftpadding-rightpadding-bottommargin：外边距margin:xxpx;margin:xxpxxxpx;margin:xxpxxxpxxxpx;margin:xxpxxxpxxxpxxxpx;margin:auto;margin:xxpxauto;margin-topmargin-leftmargin-rightmargin-bottomborder：边框color：颜色；width：宽度；style：outset|inset|solid|double|dottedborder-radius:10px;/*同时设置4个角*/背景background-color:背景颜色background-image:背景图片background-repeat:no-repeat|repeat-x|repeat-y|repeatbackground-position:xxxpxxxpx|xx%xx%;(可以为负数)background-size:xxxpxxxpx|xx%xx%|cover|contain;(不能为负数)cover:拉伸,可以超出contain:拉伸不能超出background-attachment:scroll(随着内容一起滚动)|fixed(不滚动)布局overflow：当内容溢出时的处理方式hidden：隐藏scroll：滚动visible：直接显示auto：如果溢出就滚动，否则不显示滚动条visibility：设置元素是否显示visible显示hidden隐藏，保留占位display：设置元素是否显示none：隐藏，不保留占位block：设置为块级元素inline：设置为行级元素inline-block：设置为行内块元素float:浮动left左浮动right右浮动none不浮动clear:清除浮动left不允许左边有浮动right不允许右边有浮动both不允许两边有浮动列表样式list-style-type:列表项的样式ul或ol自带样式：margin:16px0px;padding:0px0px0px40px;定位positionabsolute：如果有父元素被定位按照父元素的原点进行定位，否则按照浏览器原点进行定位relative：相对定位参照元素本身的位置fixed：固定位置，不会滚动z-index:设置z轴的值，越大越在最前伪类link超链接默认样式hover鼠标悬停样式active鼠标点击样式visited访问之后的样式（主要控制颜色）focus获得输入焦点的样式first-child第一个元素last-child最后一个元素:not不包含指定的选择器:noly-child是父元素的唯一子元素其他样式cursor鼠标样式box-shadow阴影transform：变换translate:平移rotate：旋转scale：缩放skew：扭曲matrix：以变换矩阵变换transition过渡transition:transform2s,background-color.5s;第一个值表示需要过渡的样式属性第二个值表示整个过渡过程需要的时间第三个值表示过渡时的贝塞尔曲线第四个值表示延迟多久才开始过渡animation动画@keyfarmes关键帧用于定义动画的细节（每一帧如何显示）@keyframesmyanimation{0%{background-color:#cfc;}30%{background-color:#ccf;border-radius:50px;}80%{width:300px;background-color:#fcc;}100%{width:300px;height:300px;background-color:#000;}}@-o-keyframesmyanimation{}@-ms-keyframesmyanimation{}@-moz-keyframesmyanimation{}@-webkit-keyframesmyanimation{}需要显示动画的地方通过animation属性来使用声