前端知识点总结

1、羃HTML知识点羁一、功能螆用来制作静态网页，网页中的全部内容都是通过Html语言展现出来。莄使用场合：开发静态网页。肃二、思想肈一切功能都由标签实现，标签具有四要素。蒇三、常用标签膃标签关键字膃功能蒈常用属性羅膅设置字体,字号,颜色芃face, color, size衿 蚇换行羄莃 芀居中对齐肅蚃 蒃设置标题级别蚁H1最大 h6最小袇align螆薂插入水平线袈size, width, align蕿 蒅划分段落,薂align艿 羇创建有序编号列表芄type, start蚂 蚀定义一个列表项虿肃 螂定义无序符号列表肁type膆肆插入图片袂src,width,height,border, titl

2、e,alt膇膂肈膆袂插入表格薀border,width,height, bgcolor,bordercolor, cellpadding,cellspacing袇芆创建一行芃莂袀创建一列莆colspan, rowspan蚄螀创建一列，元素居中，粗体虿蒅肅设置表格的标题蒂蒈薅膂羀 芇收集用户输入信息,并提交给服务器蚅action, method薃蚂创建文本框芀name, value螅readonly, disabled羄聿创建密码框聿螅 莅创建单选按钮袁checked螇 袅创建下拉列表框螅name艿 袀创建列表项羅value, selected羂 羁创建复选框蕿checked肅 莃创建文本区域螃

3、name,rows, cols莈膄创建隐藏控件螄膁 膇创建提交按钮芄膅袃创建重置按钮膀莄节莁罿 莄超级链接,网页跳转蚃href, target肃蚈指定快速的查询到该网页的关键字 螈肄 /提供网页内容的描述信息蒀螁 /指定文档类型和页面字符集袈蒄四、案例节1、诗篇葿2、学生课程表 羈3、注册页袅蚀CSS知识点芈一、功能肈1、css格式化页面中的各组成元素羂2、css决定元素在页面的具体位置莂二、思想肇属性是css最小构成单元，每个属性都有特定功能，多个属性构成样式，由样式修饰html语言的标签。肇三、样式修饰标签莃1、style属性袀html标签添加style属性，属性值是多个css属性的组合。

4、肀2、标签选择器膇样式名与标签关键字相同，根据名称相同自动关联。螄3、ID选择器薂1样式名以#开始；2标签添加id属性与样式关联。衿4、类选择器芇1样式名以 . 开始；2标签添加class属性与样式关联。膅5、属性选择器肀标签名属性名=属性值，根据标签关键字和属性值自动关联。蚈6、包含选择器莇1子样式名中间加或空格分隔 (直接包含)；莂2看最后一个子样式是什么选择器就如何关联标签。螂7、多个样式名同一样式体莇1样式名中间加逗号分隔；蒇2根据样式类型决定如何与标签关联。螃8、多条件同时成立选择器腿1多个子样式名紧挨着 蒀2一个标签必须同时具备这多个条件才可以被该样式修饰薇9、各选择器使用场合膃1

5、)如果想根据标签名用一个样式修饰所有同名标签时，用标签选择器；羁2)如果一个样式只想修饰唯一的一个标签时，用id选择器；膈3)如果一个样式想修饰多个任意标签时，用类选择器；蚇4)尽量使用包含选择器。薄四、元素定位荿1、盒子模型羇通过设置标签的内外边距从而改变元素的位置，没有脱离标准文档流。蚇相关属性：羅marging-top：外上边距肁margin-right：外右边距羀margin-bottom：外下边距螆margin-left：外左边距肂margin：同时设置上右下左四个外边距 (顺时针)螃padding-top：内上边距蝿padding-right：内右边距袆padding- botto

6、m：内下边距蒃padding-left：内左边距芁padding：同时设置上右下左四个内边距薈border-top：设置上边线的粗细,颜色,线型羆border-right：设置右边线的粗细,颜色,线型袄border-bottom：设置下边线的粗细,颜色,线型羃border- left：设置左边线的粗细,颜色,线型芇border：同时设置四个边线的粗细,颜色,线型肆border-width：只设置4个边线的宽度(粗细) 芅border-color：/只设置4个边框的边框颜色 蒁border-style：只设置4个边框的边框线型莀膆2、绝对定位蒂有2套坐标系统：膂1)如果该元素所有父标签都没有设置

7、相对定位，那么浏览器左上角为坐标原点，根据left与top值确定元素的位置。肈2)第一个设置相对定位的父标签左上角为坐标原点，根据left与top值确定元素的位置。膆脱离标准文档流袂相关属性：薀position: absolute;袇/表示绝对地址定位,通过绝对定位,元素可以放置到页面上的任何位置。芆left:100px 芃 /绝对定位时表示与浏览器左边框距离。莂top:100px袀/绝对定位时表示与浏览器上边框距离。莆z-index: 蚄/在绝对定位层改变各元素层叠顺序 属性值是整数 越大越在上方。螀3、相对定位虿元素原位置(标准文档流的位置)左上角为坐标原点，根据left与top值改变位置

8、。没有脱离标准文档流。蒅相关属性肅position: relative;蒂/表示相对地址定位,通过相对定位；元素可以放置到页面上的任何位置。蒈left:100px 薅/相对定位时表示与元素原始位置的左边距离。膂top:100px 羀/相对定位时表示与元素原始位置的上边距离。芇4、浮动定位蚅把元素靠在在父容器左边或右边. 兄弟元素都设置浮动后成为一行，脱离标准文档流。薃相关属性蚂float : 设置浮动定位芀clear: 清除浮动定位的影响螅5、各定位方式使用场合羄1)靠左或靠右，兄弟标签一列变一行，文字环绕浮动定位。聿2)移动位移比较小，用盒子模型。聿3)移动位移比较大，父容器相对定位，子元素

9、绝对定位。螅五、添加独立css文件3步骤莅1、创建子文件夹和css文件袁2、在html页面用标签导入独立css文件螇3、定义样式并修饰各html标签袅六、静态网页开发思想螅1、对网页元素通用属性进行设置。艿2、分析页面的组成，整个网页布局划分为多个矩形区域，在矩形区域内部又可以划分子矩形区域，每个矩形区域都用标签实现。袀3、用html标签把实际元素放在标签中，再用css实现元素定位和格式化(对每个元素和div)，依次类推，搞定每个div区域。羅七、css常用属性羂属性名羁功能蕿属性值肅font-size莃设置字号螃1)像素2)百分比莈color膄设置字体颜色螄1)英文单词2)rgb膁font-

10、family膇设置字体芄宋体|黑体膅font-weight袃设置文字粗体膀normal、lightar、bold莄font-style节设置字体斜体莁normal、italic罿font莄设置字体所有属性蚃必须按顺序设置肃蚈螈肄text-decoration蒀设置文本下划线格式螁none、underline、袈line-through蒄text-align节元素中的内容水平方向对齐方式葿left、rigth、center羈line-height袅设置行高蚀像素芈vertical-align肈元素中的内容垂直方向的对齐羂top、bottom、middle莂text-indent肇段落首行缩进肇1

11、)像素2)em莃text-transform袀控制英文字母大小写肀none、capitalize、膇uppercase、lowercase螄袆膃薁width葿设置元素的宽度芄像素袂heigth蚁设置元素的高度薆像素羆蚁蚁羇background-color蒃设置背景颜色蚄1)英文单词2)rgb螁background-image蒇设置背景图片膅url(图片路径)蒂background-repeat袁设置背景图像重复方式袈repeat、no-repeat蚃repeat-x、repeat-y芁background-size羁设置背景图像的大小艿1)像素2)百分比莅background-position

12、芄设置背景图片的出现位置肁像素莆background肇/设置所有背景属性肃膀螇薅螂display芀设置元素是否可见膈none、block、inline芇overflow薁设置内容超出父区域时如何处理芀hidden、visible蕿list-style-type蚅设置列表符号类型薄disc、circle、none莀list-style-image蚆用图片作为编号莆url(图片路径)莃opacity蒀设置元素的透明度肆从0.0（完全透明）到1.0（完全不透明）袄cursor膁设置鼠标到达元素上的鼠标形状薀pointer、text蒇border-radius薆设置圆角矩形膄像素蚀袈八、案例肄1、房地

13、产首页 羃2、注册页 螀3、登录页 艿4、二级菜单螆JavaScript知识点蚂一、功能衿浏览器执行html代码后实现动态改变网页内容和格式从而实现动态效果蒆二、思想膄1、分析有哪些动态效果，确定事件三要素并关联从而实现一切功能。蒁2、要实现某功能找已经存在的对象和方法。衿三、html导入独立的js文件的步骤袇1、创建文件夹和独立js文件。羆2、用标签在html页面中导入。螈3、在js文件中定义方法，并与html页面的标签关联。芃四、事件关键字蒂1、onclick：鼠标单击时触发。蚈2、onload：页面全部内容被加载后立即触发，该事件源是body。薇3、onmouseover：鼠标进入区域时

14、触发。莃4、onmouseout：鼠标退出区域时触发。袃5、onmousemove：鼠标在某区域移动时触发。莀6、onchange：内容改变时触发。莆7、onsubmit：表单提交数据时触发。蒃8、onblur：控件失去焦点时触发。芄9、onfocus：控件获取焦点时触发。螇五、浏览器对象和方法荿1、特性蒃所有对象都是由浏览器负责提供的，编程时可以直接调用方法，又称BOM对象。蒀2、浏览器对象的方法总结蕿内置对象名膇功能薃常用方法袁1、window芁代表浏览器窗口袆alert(提示内容)蚃节虿setInterval(方法名(),数值)蚅螂蚃clearInterval(对象名)蒁蚈袂setTim

15、eout(方法名(),时间) 螀衿蒇open(, _blank, width=800, height=500);羂膁薁parseInt(数值)芆eval()芆薂聿prompt(提示信息,默认信息)艿/弹出对话框,接受文本框内容 莆羃螀confirm(对话框上的提示信息)肈/弹出对话框,有确定和取消2个蒆2、document代表整个网页getElementById(标签的id属性)getElementsByTagName(标签关键字)getElementsByName(标签的name属性值)createElement(标签关键字)write(内容)3、event事件对象event.x 鼠标此时位

16、置的横坐标event.y 鼠标此时位置的纵坐标4、locationwindow. location= locationlocation.href(“地址”)六、DOM对象的方法1、原理Dom对象可以获取html文档的每个标签，以及该标签的属性和内容，并可以对这些标签，属性和内容进行修改从而实现动态的改变网页内容和格式。2、DOM对象方法总结方法功能说明getElementById(标签的id属性)根据标签的id获取标签对象1)任何标签对象可以调用2)document对象都可以调用getElementsByTagName(标签名)根据标签名获取包含全部标签的数组2个getElementsByNa

17、me(name属性值)根据标签的name的属性值获取所有标签对象数组1)只有document对象可以调用该方法createElement(标签关键字)根据标签关键字创建标签对象1)只有document对象可以调用该方法appendChild(node)把参数对象添加到父标签内2个insertBefore(newnode,oldnode)为父标签对象增加一个子标签对象2个removeChild(node)为父标签对象删除一个子标签对象2个getAttributeNode(属性名)根据属性名获取属性对象1)标签对象可以调用该方法setAttribute(属性名,属性值)为标签对象添加一个新的属性或

18、改变它现有属性的值1) 标签对象可以调用该方法属性意义innerHTML用来获取或修改标签对象中的文本内容1)标签对象可以调用该方法parentNode返回子标签的父标签对象1)标签对象可以调用该方法2)文本对象firstChild用来获取父标签的第一子标签对象1)标签对象可以调用该方法lastChild返回父标签的最后一个子标签对象1)标签对象可以调用该方法childNodes返回父标签所有子节点对象1)标签对象可以调用该方法nextSibling返回当前标签对象的下一个兄弟节点1)标签对象可以调用该方法2)属性对象previousSibling返回当前标签对象的上一个兄弟节点1)标签对象可

19、以调用该方法2)属性对象七、正则表达式1、正则表达式使用场合客户端表单数据校验2、创建正则表达式的对象1 var regex = new RegExp(.6$);2 var pwdRegex = /.6$/;RegExp类的方法：test()/检测字符串是否与正则表达式匹配3、正则表达式各通配符 （1）字符匹配符:：匹配多个字符中的任意一个字符例如：abc 匹配a,b,c其中的任意一个字符- ：用来指定范围也可以表示字符-本身 例如:a-z : 表示匹配从a到z的任意一个字符A-Z : 表示匹配从A到Z的任意一个字符0-9 : 表示匹配从0到9的任意一个字符u4e00-u9fa5 : 表示匹配

20、所有汉字中任意一个汉字 ：取反 ,注意只有用包围才是取反 例如:A-Z : 表示匹配不是从A到Z的任意一个字符0-9 : 表示匹配不是从0到9的任意一个字符abc :匹配不是a,b,c中的任意一个字符d：匹配任意一个数字字符 相当于0-9D：匹配任意一个非数字字符 相当于0-9 w：匹配字母、数字、下划线中的一个字符，相当于a-zA-Z0-9_W：与w相反，相当于a-zA-Z0-9_ .：匹配一个任意字符，除了n.：表示一个小数点，转义字符s：匹配任何一个空白字符(空格，制表位)S：匹配任何一个非空白字符(空格，制表位)（2）定位符：规定字符出现的位置 ：字符串必须以后面的字符开始，开始标记，

21、此时不能用包围$ ：字符串必须以$前面的字符结束，结束标记。（3）限定字符出现次数:数1,数2：限定前方字符出现次数= 数1 并且次数=数1+ ：限定前方字符出现次数=1等同于1,* ：限定前方字符出现次数=0 ? ：限定前方字符出现次数0次或1次|：或者的关系 例如: /(xue&)|(学$)|(薛$)/ ()：构成一个整体，括号内的内容作为一个子表达式来处理。例如：abc：表示a、b、c其中的一个(abc)：表示子串abc/abc?$/：0个或1个c/(abc)?$/：0个或1个abcvar unameRegex= /(abc$)|(liming$)|(zxy$)/;/要么是abc，要么是

22、liming，要么是zxy（4）需要用到转义的字符有. * ( ) $ / ? :例如：. *说明：在中/ 这4个字符必须写转义字符才能表达本身 其它字符写不写转义都行能表达本身在外必须用转义字符（5）附加参数:var regex = /d4$/gi i：加i匹配时忽略大小写，没有i就严格区分大小写。g：主要在从字符串中查找匹配的子串时起作用，加g表示查找出所有的匹配子串。例如：absdfwabdfwab34324ab ;var regex = /ab$/ 只找到1个absdfwabdfwab34324ab ; var regex = /ab$/g 只找到4个4、表单数据验证7步骤(1)获取各

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

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

25、导入jQuery函数库语句必须在导入独立js文件语句的上方三、选择器1、id选择器$(#id属性值) 2、类选择器$(.class属性的值)3、标签选择器$(标签名) 4、包含选择器 (1)间接包含：$(#sss .ttt input) ; (2)直接包含： $(#sssinput.ttt) ;5、属性选择器$(inputname=newsletter)6、基本过滤选择器$(input: eq(0) )7、表单标签属性过滤选择器$(input:checked)四、事件处理机制1、语法$(选择器).事件方法(function () 方法语句;);2、常用事件方法名click( fn ) ：/当鼠

26、标单击时触发blur( fn ) ：/当标签失去焦点时触发change( fn )： /当标签内容发生改变时触发 dblclick( fn )： /当鼠标双击击时触发 focus( fn )： /当标签获得焦点时触发 keydown( fn ) ：/当键盘被按下时触发 keyup( fn )： /当键盘被释放时触发keypress( fn ) ：/按下并释放时触发mousedown(fn)：/鼠标按下mouseup(fn)： /鼠标释放时触发mousemove(fn)： /鼠标移动mouseout(fn)： /鼠标退出区域mouseover(fn)： /鼠标进入区域resize(fn)： /当

27、窗口改变大小时触发submit( fn )： /表单提交五、方法1、操作标签（1）删除remove()无参时把对象删除；有参时从多个对象中删除符合条件的，只能是字符串。empty()删除内容，不删除标签本身。jquery方法参数就3种形式：$(#myul)、#myul、html标签代码（2）增加append();父子关系 最后 after();兄弟 before();兄弟$(p).appendTo(div);父子关系，把自己添加到父标签的最后。$(p).insertBefore(#foo);兄弟，新增加在原有兄弟的前面。（3）修改replaceWith();参数只能是jquery对象, 不能是字符串（4）创建标签对象$(html代码);2、操作html标签的属性attr(,);removeAttr();val(); 3、操作标签内容html();text();4、操作标签的css属性css()addClass()removeClass()5、获取标签对象的相关方法为了获取标签对象有2种方式：1)选择器 2)相关方法$(p).eq(1);$(p).parent();