Web前端知识点总结

1、WORD格式.资料HTM即识点、功能用来制作静态网页，网页中的全部内容都是通过 Html语言展现出来。使用场合：开发静态网页。、思想一切功能都由标签实现，标签具有四要素三、常用标签标签关键字功能常用属性<font></font>设置字体，字号，颜色face, color, size<br/>换行<center> </center>居中对齐<hn> </hn>设置标题级别H1最大h6最小align<hr />插入水平线size, width, align<p> </p>划分段落

2、，align<ol > </ol>创建有序编号列表type, start<li > </li>定义一个列表项<ul > </ul>定义无序符号列表type<img />插入图片src,width,height,border,title,alt<table ></table>插入表格border,width,height,bgcolor,bordercolor,cellpadding,cellspacing<tr ></tr>创建一行<td ></

3、td>创建一列colspan, rowspan<th></th>创建一列，元素居中，粗体<caption ></caption>设置表格的标题<form > </form>收集用户输入信息，并提交给服务器action, method<input type=" text " />创建义本框name, valuereadonly, disabled<input type=" password" />创建密码框<input type=" rad

4、io " />创建单选按钮checked<select > </select>创建下拉列表框name<option > </option>创建列表项value, selected<input type=" checkbox" />创建复选框checked<textarea > </textarea>创建义本区域name,rows, cols<input type=" hidden " />创建隐藏控件<input type="

5、submit "/>创建提交按钮<input type=" reset "/>创建重置按钮<a > </a>超级链接，网页跳转href, target专业.整理<meta name="keywords" content=" 淘宝网"/>指定快速的查询到该网页的关键字<meta name= "description" content="淘宝网-亚洲最大 />/提供网页内容的描述信息<meta http-equiv="

6、content-type" content="text/html; charset=utf-8”/>/指定文档类型和页面字符集四、案例1、诗篇2、学生课程表3、注册页CS砌识点一、功能1、css格式化页面中的各组成元素2、css决定元素在页面的具体位置二、思想属性是css最小构成单元，每个属性都有特定功能，多个属性构成样式，由样式修饰html语言的标签。三、样式修饰标签1、style 属性html标签添加style属性，属性值是多个css属性的组合。2、标签选择器样式名与标签关键字相同，根据名称相同自动关联。3、ID选择器1样式名以#开始；2标签添加id属性与样式关联

7、。4、类选择器1样式名以.开始；2标签添加class属性与样式关联。5、属性选择器标签名属性名=属性值,根据标签关键字和属性值自动关联。6、包含选择器1子样式名中间加 或空格分隔（ 直接包含）；2看最后一个子样式是什么选择器就如何关联标签。7、多个样式名同一样式体1样式名中间加逗号分隔；2根据样式类型决定如何与标签关联。8、多条件同时成立选择器1多个子样式名紧挨着2一个标签必须同时具备这多个条件才可以被该样式修饰9、各选择器使用场合1）如果想根据标签名用一个样式修饰所有同名标签时，用标签选择器；2）如果一个样式只想修饰唯一的一个标签时，用 id选择器；3）如果一个样式想修饰多个任意标签时，用类

8、选择器；4）尽量使用包含选择器。四、元素定位1、盒子模型通过设置标签的内外边距从而改变元素的位置，没有脱离标准文档流相关属性：marging-top : 外上边距margin-right :外右边距margin-bottom :外下边距margin-left :外左边距margin :同时设置上右下左四个外边距（顺时针）padding-top :内上边距padding-right :内右边距padding- bottom :内下边品Epadding-left :内左边距padding :同时设置上右下左四个内边距border-top :设置上边线的粗细，颜色，线型border-right :设

9、置右边线的粗细，颜色,线型border-bottom :设置下边线的粗细，颜色，线型border- left :设置左边线的粗细，颜色，线型border：同时设置四个边线的粗细，颜色，线型border-width :只设置4个边线的宽度（粗细）border-color : /只设置4个边框的边框颜色border-style :只设置4个边框的边框线型2、绝对定位有2套坐标系统：1）如果该元素所有父标签都没有设置相对定位，那么浏览器左上角为坐标原点，根据left与top值确定元素的位置。2）第一个设置相对定位的父标签左上角为坐标原点，根据left与top值确定元素的位置。脱离标准文档流相关属性：

10、position: absolute;/表示绝对地址定位，通过绝对定位，元素可以放置到页面上的任何位置。left:100Px/绝对定位时表示与浏览器左边框距离。top:100Px/绝对定位时表示与浏览器上边框距离。z-index :/在绝对定位层改变各元素层叠顺序属性值是整数越大越在上方。3、相对定位元素原位置（标准文档流的位置）左上角为坐标原点，根据left与top值改变位置。 没有脱离标准文档流。相关属性position: relative;表示相对地址定位，通过相对定位；元素可以放置到页面上的任何位置。left:100Px/相对定位时表示与元素原始位置的左边距离。top:100Px/相对

11、定位时表示与元素原始位置的上边距离。4、浮动定位把元素靠在在父容器左边或右边.兄弟元素都设置浮动后成为一行，脱离标准文档 流。相关属性float : 设置浮动定位clear:清除浮动定位的影响5、各定位方式使用场合1）靠左或靠右，兄弟标签一列变一行，文字环绕一一浮动定位。2）移动位移比较小，用盒子模型。3）移动位移比较大，父容器相对定位，子元素绝对定位。五、添加独立css文件3步骤1、创建子文件夹和css文件2、在html页面用link标签导入独立 css文件3、定义样式弁修饰各html标签六、静态网页开发思想1、对网页元素通用属性进行设置。2、分析页面的组成，整个网页布局划分为多个矩形区域，

12、在矩形区域内部又可以 划分子矩形区域，每个矩形区域都用 div标签实现。3、用html标签把实际元素放在div标签中，再用css实现元素定位和格式化（对 每个元素和div）,依次类推，搞定每个div区域。七、css常用属性属性名功能属性值font-size设置字号1）像素2）百分比color设置字体颜色1）英义单词2）rgbfont-family设置字体宋体|黑体font-weight设置文字粗体normal、lightar 、boldfont-style设置字体斜体normal、italicfont设置字体所有属性必须按顺序设置text-decoration设置文本下划线格式none、und

13、erline、line-throughtext-align元素中的内容水平方向对齐方式left 、rigth 、centerline-height设置行高vertical-align元素中的内容垂直方向的对齐top、bottom、middletext-indent段落首行缩进1)像素2)emtext-transform控制英义字母大小写none、capitalize 、uppercase、lowercasewidth设置元素的宽度heigth设置元素的高度background-color设置背景颜色1）英义单词2）rgbbackground-image设置背景图片url（'图片路径）b

14、ackground-repeat设置背景图像重复方式repeat、no-repeatrepeat-x、repeat-ybackground-size设置背景图像的大小1）像素2）百分比background-position设置背景图片的出现位置background/设置所有背景属性display设置兀素是否可见none、block、inlineoverflow设置内容超出父区域时如何处理hidden、visiblelist-style-type设置列表符号类型disc、circle 、nonelist-style-image用图片作为编号url（"图片路径"）opacity

15、设置元素的透明度从0.0 （完全透明）到1.0 （完全不透明）cursor设置鼠标到达元素上的鼠标形状pointer、textborder-radius设置圆角矩形a:link (color: 4FF00001/ 禾访问的福接a:visited color: frOOFFOC /* 已访问的错接 a:hcv£r cclor-：声FFQQFF尸当有鼠标悬停卷a:active coIde:神选择的窃楼八、案例1、房地产首页2、注册页3、登录页4、二级菜单JavaScript 知识点一、功能浏览器执行html代码后实现动态改变网页内容和格式从而实现动态效果二、思想1、分析有哪些动态效果，确

16、定事件三要素弁关联从而实现一切功 能。2、要实现某功能找已经存在的对象和方法。三、html导入独立的js文件的步骤1、创建文件夹和独立js文件。2、用 <script type="text/javascript" src=”">标签在 html 页面中导入。3、在js文件中定义方法，并与html页面的标签关联。四、事件关键字1、onclick :鼠标单击时触发。2、onload :页面全部内容被加载后立即触发，该事件源是body。3、onmouseover：鼠标进入区域时触发。4、onmouseout：鼠标退出区域时触发。5、onmousemove鼠标

17、在某区域移动时触发。6、onchange：内容改变时触发。7、onsubmit:表单提交数据时触发。8、onblur ：控件失去焦点时触发。9、onfocus :控件获取焦点时触发。五、浏览器对象和方法1、特性所有对象都是由浏览器负责提供的，编程时可以直接调用方法，又称BOM寸象2、浏览器对象的方法总结内置对象名功能常用方法1、window代表浏览器窗口alert （"提示内容"）setInterval （"方法名（）"，数值）clearInterval （对象名）setTimeout （"方法名（）"，时间）open（"&

18、quot;, "_blank", "width=800, height=500"）;parseInt （数值） eval （）prompt（"提示信息"，"默认信息"）/弹出对话框，接受文本框内容confirm（"对话框上的提示信息"）/弹出对话框，有确定和取消2个2、document代表整个网页getElementById （"标签的 id 属性"）getElementsByTagName （"标签关 键字"）getElementsByName （&qu

19、ot;标签的 name属性值"）createElement （"标签关键字"）write （"内容"）3、 event事件对象event.x鼠标此时位直的横坐标event.y鼠标此时位直的纵坐标4、locationwindow. location= locationlocation.href（"地址”）六、DOM寸象的方法1、原理Dom寸象可以获取html文档的每个标签，以及该标签的属性和内容，并可以对这些 标签，属性和内容进行修改从而实现动态的改变网页内容和格式。2、DOM寸象方法总结方法功能说明getElementByld （&q

20、uot;标签的 id 属性"）根据标签的id状取标签对象1）任何标签对象可以调用2）document对象都可以调用getElementsByTagName （"标签名"）根据标签名获取包含全部标 签的数组2个getElementsByName （"name 属性 值"）根据标签的name的属性值获 取所有标签对象数组1）只后document对象可以调用该方法createElement （"标签关键字"）根据标签关键字创建标签对 象1）只后document对象可以调用该方法appendChild（node）把参数对象添加到父标

21、签内2个insertBefore （newnode,oldnode）为父标签对象增加一个子标 签对象2个removeChild（node）为父标签对象删除一个子标 签对象2个getAttributeNode （"属性名"）根据属性名获取属性对象1）标签对象可以调用该方法setAttribute （"属性名","属性值 "）为标签对象添加一个新的属 性或改变它现有属性的值1）标签对象可以调用该方 法属性意义nnerHTML用来获取或修改标签对象中 的文本内容1）标签对象可以调用该方法parentNode返回子标签的父标签对象1）标签对象

22、可以调用该方法2）文本对象firstChild用来获取父标签的第一子标 签对象1）标签对象可以调用该方法lastChild返回父标签的最舟-个子标 签对象1）标签对象可以调用该方法childNodes返回父标签所有子节点对象1）标签对象可以调用该方法nextSibling返回当前标签对象的下一个 兄弟节点1）标签对象可以调用该方法2）属性对象previousSibling返回当前标签对象的上一个 兄弟节点1）标签对象可以调用该方法2）属性对象七、正则表达式1、正则表达式使用场合客户端表单数据校验2、创建正则表达式的对象1> var regex = new RegExp（"A.6

23、$"）;2> var pwdRegex = /A.6$/;RegEx偿的方法：test()/ 检测字符串是否与正则表达式匹配3、正则表达式各通配符(1)字符匹配符：:匹配多个字符中的任意一个字符例如：abc匹配a,b,c其中的任意一个字符-:用来指定范围也可以表示字符"-"本身例如：a-z: 表示匹配从a到z的任意一个字符A-Z: 表示匹配从A到Z的任意一个字符0-9: 表示匹配从0到9的任意一个字符u4e00-u9fa5:表示匹配所有汉字中任意一个汉字A :取反，注意只有用口包围才是取反例如：AA-Z: 表示匹配不是从A到Z的任意一个字符A0-9: 表示匹

24、配不是从0到9的任意一个字符Aabc:匹配不是a,b,c中的任意一个字符d:匹配任意一个数字字符相当于0-9D:匹配任意一个非数字字符相当于A0-9w:匹配字母、数字、下划线中的一个字符，相当于a-zA-Z0-9W:与w 相反，相当于Aa-zA-Z0-9_ .:匹配一个任意字符，除了 n.:表示一个小数点，转义字符s :匹配任何一个空白字符(空格，制表位)S:匹配任何一个非空白字符(空格，制表位)(2)定位符：规定字符出现的位置人:字符串必须以A后面的字符开始，开始标记，此时 人不能用口包围$ :字符串必须以$前面的字符结束，结束标记。(3)限定字符出现次数：数1,数2:限定前方字符出现次数

25、=数1并且次数 哪2;数1:前方字符出现次数=数1数1,:前方字符出现次数 哪1+ :限定前方字符出现次数=1等同于1,* :限定前方字符出现次数=0?:限定前方字符出现次数0次或1次| :或者的关系 例如：/(Axue&)|(A学$)|(a薛$)/()：构成一个整体，括号内的内容作为一个子表达式来处理。例如：abc:表示a、b、c其中的一个(abc)：表示子用"abc"/Aabc?$/ : 0 个或 1 个 c/A(abc)?$/ : 0 个或 1 个"abc"var unameRegex= /(Aabc$)|(A|iming$)|(Azxy$

26、)/;/要么是 abc,要么是liming ,要么是 zxy(4)需要用到转义的字符有.*()$ 八？人:例如：. *说明：在口中八口 这4个字符必须写转义字符才能表达本身其它字符写不写转义都行能表达本身在口外必须用转义字符(5)附加参数：var regex = /Ad4$/gii ：力口 i匹配时忽略大小写，没有i就严格区分大小写。g：主要在从字符串中查找匹配的子用时起作用，加g表示查找出所有的匹配子用例如：absdfwabdfWab34324ab ;var regex = /Aab$/只找至 U 1 个absdfwabdfWab34324ab ; var regex = /Aab$/g 只

27、找至U 4 个4、表单数据验证7步骤(1)获取各表单控件对象(2)获取各控件的value值(3)根据id获取显示错误信息的span标签对象(4)定义正则表达式对象(5)用if选择结构对数据进行校验.一个控件对应一个if结构：如果对一个控件有多个校验用if多分支如果对一个控件只有1个校验用if单分支每个分支的条件：正则表达式.test（" 控件value值”）我们对其取反运算如果字符串符合要求则取反后返回假，不符合取反后返回真每个分支的语句：错误信息处理语句（给保存错误信息的变量赋值）注意：数据不合法才执行if语句体（6）为显示错误信息的span标签添加内容返回值（str=null&a

28、mp;&stt2=null）注意：如果验证单选按钮或复选框第（2）步获取checked属性。八、案例1、图片切换2、级联城市3、表单数据验证4、植物大战僵尸Jquery知识点一、功能和思想1、功能浏览器执行html代码后实现动态改变网页内容和格式从而实现动态效果2、思想(1)分析有哪些动态效果，确定事件三要素并关联从而实现一切功能(2)要实现某功能找已经存在的对象和方法二、html添加jquery的3步骤1、创建js文件夹和独立的js文件2、在html页面中导入jQuery函数库和独立的js文件3、在独立文件中编写jQuery代码$( function ()$("选择器&qu

29、ot;).事件方法(function () $("选择器").方法()；);)注意：导入jQuery函数库语句必须在导入独立js文件语句的上方三、选择器1、id选择器$("#id属性值")2、类选择器$(".class属性的值")3、标签选择器$("标签名")4、包含选择器(1)间接包含：$("#sss .ttt input");(2)直接包含：$("#sss>input>.ttt");5、属性选择器$("inputname='newslette

30、门“)6、基本过滤选择器$("input: eq(0)")7、表单标签属性过滤选择器$("input:checked")四、事件处理机制1、语法$("选择器").事件方法(function () 方法语句；);2、常用事件方法名click ( fn ): /当鼠标单击时触发blur ( fn ): /当标签失去焦点时触发change( fn ): /当标签内容发生改变时触发dblclick ( fn ): /当鼠标双击击时触发focus (fn): /当标签获得焦点时触发keydown( fn ): /当键盘被按下时触发keyup( fn ): /当键盘被释放时触发keypress ( fn ): /按下并释放时触发mousedownfn): /鼠标按下mouseupfn) : /鼠标释放时触发mousemovfn) : / 鼠标移动mouseout(fn) : /鼠标退出区域mouseover(fn): /鼠标进入区域resize (fn) : /当窗口改变大小时触发submit (