web前端开发知识点总结

常用标签文本类span行级元素，多个同行div块级元素，独占一行p块级元素，前后保留一行h标题标签，h1~h6表6个等级，加粗，前后保留一行图片标签imgwidth：设置宽度height：设置高度alt：图片加载失败显示的文本水平线hrcolor：颜色size：高度（粗细）width：宽度（长度）超链接 aherf：超链接转到的地址target_self:默认值，在当前页面打开_blank:在新窗口打开带标题的框fieldset legend 设置标题列表标签无序列表uldisc：实心圆square：小方块circle：空心圆有序列表ol表格标签<table>tr 表示行th表示标题单元格，居中、加粗td 表示一个单元格caption表示标题，定义在第一行，居中rowspan设置单元格占的行数colspan设置单元格占的列数表单项<form>action 表单提交地址methodget：显示提交参数，将参数用?和&拼接到url上带到服务器端post：隐式提交参数下拉菜单<select><option>optgroup 表示分组,分组不能选,只能选分组中的optionselected默认选中multiple 设置下拉菜单为多选模式文本域<textarea>rows: 显示文本的行数(高度)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”框架集<frameset> frame：表示框架noresize：不能改变框架大小scolling：是否显示滚动条（yes、no、auto）rows设置框架集在纵向上的拆分策略cols设置框架集在横向上的拆分策略border 框架边框的宽度borderColor 框架边框颜色frameBorder设置框架是否有边框 (yes|no)框架集中的超链接打开方式target_blank:新窗口中打开_self:在当前窗口打开_parent:父窗口中打开_top在最顶层窗口中打开frameName：在对应name框架打开其他标签ifame 在页面中嵌入框架dl、dt、dd<dl><dt>数码</dt> <!-- dt不会缩进 --><dd>手机</dd> <!-- dd会缩进 --></dl>marquee：滚动标签img usemap<img src="usemap_img.jpg"usemap="#yifuMap"><map name="yifuMap" id="yifuMap"><areashape="circle"coords="309,257,20"target="_blank"href="/s?wd=帽子"><areashape="poly"coords="258,316,277,283,340,280,356,314"target="_blank"href="/s?wd=t恤"></map>html5新标签ruby：用rt包含的内容对前面的普通文本进行注释<ruby>漢 <rt>ㄏㄢˋ</rt>呵呵呵 <rt>hehehe</rt>吃了没？<rt>are you chi le?</rt></ruby>输入控件range：范围选择color：颜色选择number：数字输入date picker：日期选择datalist：自动提示<datalist id="arealist"><option>sichuan</option><option>chongqing</option><option>guangzhou</option><option>shanghai</option><option>beijing</option><option>tianjin</option></datalist><input type="text" list="arealist">html5新标签媒体video：动画radio：音频controls : 播放控制条autoplay ：自动播放loop ：循环播放preload ：预加载，如果设置了autoplay，就可以不用设置preload autocomplete：是否关闭自动提示（off |on）autofocus: 自动获得焦点required: 表示控件必须输入内容样式定义方式内联：直接在标签的style属性上编写样式<input type="text" style="color:blue;background-color: #eeeeff;">样式块：在style标签中编写样式块，并通过一定规则（选择器）应用到对应的那些标签上(通常写在head中)<style>span {color: green;background-color: #eeffee;}</style>外部样式文件：将样式块编写在外部的css文件中(不用写style标签)* 在需要使用样式的页面通过link标签引入样式文件(通常写在head中)<link href="hehe.css" rel="stylesheet">选择器id选择器 #xxx 针对id为xxx的标签类选择器 .xxx 针对class属性为xxx的标签标签选择 xxx 针对标签名为xxx的标签*选择器选择所有元素后代元素关系选择 selector1 selector2 {...} 针对selector1下的所有的selector2 子元素关系选择 selector1 > selector2 {...} 只针对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: 边框(1px solidred)width: 宽度height: 高度text-decoration: 文本装饰underline 下划线overline 上划线line-through 贯穿线(删除线)blink 闪烁none 无text-shadow: 文本阴影dtext-shadow: 3px 3px 5px red;第一个参数: 阴影水平位置(x轴上的偏移量)第二个参数: 阴影垂直位置(y轴上的偏移量)第三个参数: 模糊程度第四个参数: 阴影颜色盒子模型padding：内边距padding: xxpx;padding: xxpx xxpx;padding: xxpx xxpx xxpx;padding: xxpx xxpx xxpx xxpx;padding: auto;padding: xxpx auto;padding-toppadding-leftpadding-rightpadding-bottommargin：外边距margin: xxpx;margin: xxpx xxpx;margin: xxpx xxpx xxpx;margin: xxpx xxpx xxpx xxpx;margin: auto;margin: xxpx auto;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: xxxpx xxpx | xx%xx%; (可以为负数)background-size: xxxpx xxpx | 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: 16px 0px;padding: 0px 0px 0px40px;定位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 关键帧用于定义动画的细节（每一帧如何显示）@keyframes myanimation {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-keyframes myanimation {}@-ms-keyframes myanimation {}@-moz-keyframes myanimation {}@-webkit-keyframes myanimation {}需要显示动画的地方通过animation属性来使用声明的关键帧.ac:active {animation: myanimation 5s;-o-animation: myanimation 5s;-ms-animation: myanimation 5s;-moz-animation: myanimation 5s;-webkit-animation: myanimation 5s;}opacity透明度从0.0 ~ 1.0 0.0完全透明， 1.0 完全不透明浏览器兼容前缀-webkit- chrome，safari, opera -o- opera-moz- firefox-ms- ie（ie9以上）书写方式javascript代码必须包含在<script></script>标签中也可以书写到外部的.js文件中,通过<script src="xxx.js"></script>来引入script标签只能同时做一件事情.如果既有src属性也包含代码则只会执行外部文件的代码通过alert来弹出提示框通过document.write来输入文本到页面上(可以输入标签)数据类型Number: 数值型整数和小数Boolean: 布尔型 (true |false)String: 字符串字符串必须被""或''包含必须对称如果字符串中包含引号可以单引号中包含双引号或者是双引号中包含单引号也可以使用 \'来表示一个单引号 \"来表示一个双引号\n 表示换行\t 表示制表符\\ 表示 \NaN: Not A Number 当使用非数字来进行运算时的值undefied: 未定义null: 空值字符串处理substring 截取子串, 从start到end-1处,如果没指定end则取到最后一个字符toUpperCase 将所有字符变成大写toLowerCase 将所有字符变成小写indexOf 查找子串首次出现的位置, 如果找不到则返回-1lastIndexOf 查找子串最后一次出现的位置, 如果找不到则返回-1charAt 取指定位置上的字符slice 也是取子串,效果和substring一样可以用-1,-2,-3...从末尾开始计数split 将字符串按照指定的字符进行拆分成为数组日期 Date获取当前时间var now = new Date()获取指定时间的日期对象var date = new Date(yyyy,MM,dd,HH,mm,ss)设置指定时间 (将时间对象设置为一个指定时间) now.setFullYear(yyyy,MM,dd,HH,mm,ss)now.setMonthnow.setDatenow.setHours...获取指定时间信息now.getFullYear() // 年只能取出年份,如: 2015 now.getMonth // 月 0-11月now.getDate // 日now.getDay // 星期 0-6 (0表示星期天)now.getHours // 时 24小时制now.getMinutes // 分now.getSeconds // 秒now.getMilliseconds// 毫秒数组 Array通过new Array()来创建数组var names = new Array();var names = new Array("小王", "大王", "炸弹"); // 创建时给数组设置默认值//用json格式表示数组var names = [];var names = ["小王", "大王", "炸弹"];可以通过length来设置或获取数组的长度push : 往数组末尾添加元素pop: 删除并返回数组的最后一个元素unshift: 往数组的开头添加元素shift: 删除并返回数组的第一个元素reverse: 颠倒数组顺序sort: 按"字符串"的自然排序规则进行升序splice: 删除指定位置处的指定个数元素并将第三个参数之后的参数添加到被删除位置(设置第二个参数为0则实现只添加不删除, 之传入两个参数实现只删除不添加)slice: 获取start到end处的子数组join: 将数组元素以指定分隔符进行连接成为字符串函数声明函数function xxx(....) {....} 函数变量var xxx = function (...) {...}var ooo = xxx;ooo();将函数作为参数function fn(fx) {fx();}fn(function () {...});立即执行函数（function (...) {....})(...);DOM(Document Object Model) 文档对象模型获取元素getElementById 根据id获取唯一的元素var xx = document.getElementById("xx");getElementsByTagName 根据标签名获取元素数组getElementsByClassName 根据类获取元素数组(如果元素被改变了class值将会从数组中删除)事件机制onclick 鼠标点击事件onmouseover 鼠标进入事件onmouseout 鼠标离开事件onmousemove 鼠标被移动onmousedown 鼠标按钮被按下onmouseup 鼠标按钮被松开onkeydown 某个键盘按键被按下onkeyup某个键盘按键被松开onload 一张页面或图像被完成加载onchange 域的内容被改变onfocus 元素获得焦点onblur 元素失去焦点BOM(Browser Object Model) window setTimeout: 延迟执行(只会执行一次)var xx = setTimeout(xxx, 1000); setTimeout("fn();", 3000);清除使用 clearTimeout(xx); setInterval: 定时执行(间隔指定时间循环执行)var xx = setInterval(xxx,1000);清除使用clearInterval(xx);获取元素的位置和尺寸(只读)xx.offsetLeft xx.offsetTop xx.offsetWidth xx.offsetHeight正则表达式[] 表示[]中的字符任意取一个在[] 中的 ^ 表示非不包含该字符() 表示将多个表达式合并为一个表达式在()中的|表示将两个匹配条件进行逻辑“或”（Or）运算。