-Web前端知识点总结知识分享 .pdf

《-Web前端知识点总结知识分享 .pdf》由会员分享，可在线阅读，更多相关《-Web前端知识点总结知识分享 .pdf（19页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、此文档仅供收集于网络，如有侵权请联系网站删除只供学习与交流HTML 知识点一、功能用来制作静态网页，网页中的全部内容都是通过Html 语言展现出来。使用场合：开发静态网页。二、思想一切功能都由标签实现，标签具有四要素。三、常用标签标签关键字功能常用属性 设置字体 ,字号,颜色face, color, size 换行 居中对齐 设置标题级别H1 最大h6 最小align 插入水平线size, width, align 划分段落 , align 创建有序编号列表type, start 定义一个列表项 定义无序符号列表type 插入图片src,width,height,border, title,a

2、lt 插入表格border,width,height, bgcolor,bordercolor, cellpadding,cellspacing 创建一行 创建一列colspan, rowspan 创建一列，元素居中，粗体 设置表格的标题 收集用户输入信息 ,并提交给服务器action, method 创建文本框name, value readonly, disabled 创建密码框 创建单选按钮checked 创建下拉列表框name 创建列表项value, selected 创建复选框checked 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - -

3、 - - - - - 名师精心整理 - - - - - - - 第 1 页，共 19 页 - - - - - - - - - 此文档仅供收集于网络，如有侵权请联系网站删除只供学习与交流 创建文本区域name,rows, cols 创建隐藏控件 创建提交按钮 创建重置按钮 超级链接 ,网页跳转href, target 指定快速的查询到该网页的关键字 /提供网页内容的描述信息 /指定文档类型和页面字符集四、案例1、诗篇2、学生课程表3、注册页名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第

4、 2 页，共 19 页 - - - - - - - - - 此文档仅供收集于网络，如有侵权请联系网站删除只供学习与交流CSS知识点一、功能1、css格式化页面中的各组成元素2、css决定元素在页面的具体位置二、思想属性是 css最小构成单元，每个属性都有特定功能，多个属性构成样式，由样式修饰 html 语言的标签。三、样式修饰标签1、style 属性html 标签添加 style 属性，属性值是多个css属性的组合。2、标签选择器样式名与标签关键字相同，根据名称相同自动关联。3、ID 选择器1样式名以 #开始； 2标签添加 id 属性与样式关联。4、类选择器1样式名以. 开始； 2标签添加 c

5、lass属性与样式关联。5、属性选择器标签名 属性名 =属性值 ，根据标签关键字和属性值自动关联。6、包含选择器1子样式名中间加 或空格分隔(直接包含 )；2看最后一个子样式是什么选择器就如何关联标签。7、多个样式名同一样式体1样式名中间加逗号分隔；2根据样式类型决定如何与标签关联。8、多条件同时成立选择器名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 19 页 - - - - - - - - - 此文档仅供收集于网络，如有侵权请联系网站删除只供学习与交流1多个子样式名紧

6、挨着2一个标签必须同时具备这多个条件才可以被该样式修饰9、各选择器使用场合1)如果想根据标签名用一个样式修饰所有同名标签时，用标签选择器；2)如果一个样式只想修饰唯一的一个标签时，用id 选择器；3)如果一个样式想修饰多个任意标签时，用类选择器；4)尽量使用包含选择器。四、元素定位1、盒子模型通过设置标签的内外边距从而改变元素的位置，没有脱离标准文档流。相关属性：marging-top ：外上边距margin-right ：外右边距margin-bottom ：外下边距margin-left ：外左边距margin ：同时设置上右下左四个外边距(顺时针 ) padding-top ：内上边距p

7、adding-right ：内右边距padding- bottom ：内下边距padding-left ：内左边距padding：同时设置上右下左四个内边距border-top ：设置上边线的粗细 ,颜色,线型border-right ：设置右边线的粗细 ,颜色,线型border-bottom ：设置下边线的粗细 ,颜色,线型border- left ：设置左边线的粗细 ,颜色,线型border ：同时设置四个边线的粗细,颜色,线型border-width ：只设置 4 个边线的宽度 (粗细 ) border-color ：/只设置 4 个边框的边框颜色名师资料总结 - - -精品资料欢迎下载

8、 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 19 页 - - - - - - - - - 此文档仅供收集于网络，如有侵权请联系网站删除只供学习与交流border-style ：只设置 4 个边框的边框线型2、绝对定位有 2套坐标系统：1)如果该元素所有父标签都没有设置相对定位，那么浏览器左上角为坐标原点，根据 left 与 top 值确定元素的位置。2)第一个设置相对定位的父标签左上角为坐标原点，根据left 与 top 值确定元素的位置。脱离标准文档流相关属性：position: absolute; /表

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

10、元素原始位置的上边距离。4、浮动定位名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 19 页 - - - - - - - - - 此文档仅供收集于网络，如有侵权请联系网站删除只供学习与交流把元素靠在在父容器左边或右边. 兄弟元素都设置浮动后成为一行，脱离标准文档流。相关属性float : 设置浮动定位clear: 清除浮动定位的影响5、各定位方式使用场合1)靠左或靠右，兄弟标签一列变一行，文字环绕浮动定位。2)移动位移比较小，用盒子模型。3)移动位移比较大，父容器相对定位

11、，子元素绝对定位。五、添加独立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 f

12、ont-family 设置字体宋体 |黑体font-weight 设置文字粗体normal 、lightar 、boldfont-style 设置字体斜体normal 、italicfont 设置字体所有属性必须按顺序设置text-decoration 设置文本下划线格式none、underline 、line-through 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 19 页 - - - - - - - - - 此文档仅供收集于网络，如有侵权请联系网站删除只供学习

13、与交流text-align 元素中的内容水平方向对齐方式left、rigth 、center line-height 设置行高像素vertical-align 元素中的内容垂直方向的对齐top、bottom、middle text-indent 段落首行缩进1)像素 2)emtext-transform 控制英文字母大小写none、capitalize 、uppercase、lowercase width 设置元素的宽度像素heigth 设置元素的高度像素background-color 设置背景颜色1)英文单词 2)rgb background-image 设置背景图片url(图片路径 )

14、background-repeat 设置背景图像重复方式repeat、no-repeat repeat-x、repeat-y background-size 设置背景图像的大小1)像素 2)百分比background-position 设置背景图片的出现位置像素background /设置所有背景属性display 设置元素是否可见none、block 、inline overflow 设置内容超出父区域时如何处理hidden 、visible list-style-type 设置列表符号类型disc、circle、none list-style-image 用图片作为编号url( 图片路径

15、) opacity 设置元素的透明度从 0.0（完全透明）到1.0（完全不透明）cursor 设置鼠标到达元素上的鼠标形状pointer 、text border-radius 设置圆角矩形像素八、案例1、房地产首页2、注册页3、登录页名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 19 页 - - - - - - - - - 此文档仅供收集于网络，如有侵权请联系网站删除只供学习与交流4、二级菜单名师资料总结 - - -精品资料欢迎下载 - - - - - - - - -

16、 - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 19 页 - - - - - - - - - 此文档仅供收集于网络，如有侵权请联系网站删除只供学习与交流JavaScript 知识点一、功能浏览器执行 html 代码后实现动态改变网页内容和格式从而实现动态效果二、思想1、分析有哪些动态效果，确定事件三要素并关联从而实现一切功能。2、要实现某功能找已经存在的对象和方法。三、 html 导入独立的js 文件的步骤1、创建文件夹和独立js 文件。2、用标签在 html 页面中导入。3、在 js 文件中定义方法，并与html 页面的标签关联。四、事件关键字

17、1、onclick ：鼠标单击时触发。2、onload：页面全部内容被加载后立即触发，该事件源是body。3、onmouseover：鼠标进入区域时触发。4、onmouseout：鼠标退出区域时触发。5、onmousemove：鼠标在某区域移动时触发。6、onchange：内容改变时触发。7、onsubmit ：表单提交数据时触发。8、onblur ：控件失去焦点时触发。9、onfocus：控件获取焦点时触发。五、浏览器对象和方法1、特性所有对象都是由浏览器负责提供的，编程时可以直接调用方法，又称BOM 对象。2、浏览器对象的方法总结内置对象名功能常用方法1、window代表浏览器窗口aler

18、t (提示内容 ) setInterval (方法名 (),数值 ) 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 19 页 - - - - - - - - - 此文档仅供收集于网络，如有侵权请联系网站删除只供学习与交流clearInterval(对象名 ) setTimeout (方法名 (),时间 ) open(, _blank, width=800, height=500); parseInt (数值 ) eval() prompt(提示信息 , 默认信息 ) /

19、弹出对话框 ,接受文本框内容confirm(对话框上的提示信息) /弹出对话框 ,有确定和取消2 个2、document代表整个网页getElementById(标签的 id 属性 ) getElementsByTagName ( 标 签 关键字 ) getElementsByName (标签的name 属性值 ) createElement (标签关键字 ) write (内容 ) 3、event事件对象event.x 鼠标此时位置的横坐标event.y 鼠标此时位置的纵坐标4、locationwindow. location= location location.href( “ 地址 ”

20、) 六、 DOM 对象的方法1、原理Dom 对象可以获取 html 文档的每个标签，以及该标签的属性和内容，并可以对这些标签，属性和内容进行修改从而实现动态的改变网页内容和格式。2、DOM 对象方法总结方法功能说明getElementById(标签的 id 属性) 根据标签的id 获取标签对象1)任何标签对象可以调用2)document 对象都可以调用getElementsByTagName (标签名 ) 根据标签名获取包含全部标签的数组2 个getElementsByName (name 属性值 ) 根据标签的name 的属性值获取所有标签对象数组1)只有 document 对象可以调用该方

21、法createElement (标签关键字 ) 根据标签关键字创建标签对象1)只有 document 对象可以调用该方法appendChild (node) 把参数对象添加到父标签内2 个名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 19 页 - - - - - - - - - 此文档仅供收集于网络，如有侵权请联系网站删除只供学习与交流insertBefore (newnode,oldnode) 为父标签对象增加一个子标签对象2 个removeChild (node)

22、 为父标签对象删除一个子标签对象2 个getAttributeNode(属性名 ) 根据属性名获取属性对象1)标签对象可以调用该方法setAttribute(属性名 , 属性值) 为标签对象添加一个新的属性或改变它现有属性的值1) 标签对象可以调用该方法属性意义innerHTML 用来获取或修改标签对象中的文本内容1)标签对象可以调用该方法parentNode 返回子标签的父标签对象1)标签对象可以调用该方法2)文本对象firstChild 用来获取父标签的第一子标签对象1)标签对象可以调用该方法lastChild 返回父标签的最后一个子标签对象1)标签对象可以调用该方法childNodes

23、返回父标签所有子节点对象1)标签对象可以调用该方法nextSibling 返回当前标签对象的下一个兄弟节点1)标签对象可以调用该方法2)属性对象previousSibling 返回当前标签对象的上一个兄弟节点1)标签对象可以调用该方法2)属性对象七、正则表达式1、正则表达式使用场合客户端表单数据校验2、创建正则表达式的对象1 var regex = new RegExp(.6$); 2 var pwdRegex = /.6$/; RegExp类的方法： test()/检测字符串是否与正则表达式匹配3、正则表达式各通配符（1）字符匹配符 : ：匹配多个字符中的任意一个字符例如：abc 匹配 a,

24、b,c其中的任意一个字符- ：用来指定范围也可以表示字符- 本身名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 19 页 - - - - - - - - - 此文档仅供收集于网络，如有侵权请联系网站删除只供学习与交流例如: a-z : 表示匹配从 a到 z 的任意一个字符A-Z : 表示匹配从 A 到 Z 的任意一个字符0-9 : 表示匹配从 0 到 9 的任意一个字符u4e00-u9fa5 : 表示匹配所有汉字中任意一个汉字 ：取反 ,注意只有用 包围才是取反例如:

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

26、必须以 $前面的字符结束，结束标记。（3）限定字符出现次数 : 数 1,数 2：限定前方字符出现次数 = 数 1 并且次数 =数 1 + ：限定前方字符出现次数=1 等同于 1, * ：限定前方字符出现次数=0 ? ：限定前方字符出现次数0 次或 1 次|：或者的关系例如: /(xue&)|( 学$)|(薛$)/ 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 19 页 - - - - - - - - - 此文档仅供收集于网络，如有侵权请联系网站删除只供学习与交流()：

27、构成一个整体，括号内的内容作为一个子表达式来处理。例如：abc：表示 a、b、c 其中的一个(abc)：表示子串 abc /abc?$/：0 个或 1 个 c /(abc)?$/：0 个或 1 个abc var unameRegex= /(abc$)|(liming$)|(zxy$)/; /要么是 abc，要么是 liming ，要么是 zxy （4）需要用到转义的字符有. * ( ) $ / ? : 例如： . * 说明：在 中/ 这 4 个字符必须写转义字符才能表达本身其它字符写不写转义都行能表达本身在外必须用转义字符（5）附加参数 :var regex = /d4$/gi i：加 i 匹

28、配时忽略大小写，没有i 就严格区分大小写。g：主要在从字符串中查找匹配的子串时起作用，加g 表示查找出所有的匹配子串。例如：absdfwabdfwab34324ab ;var regex = /ab$/ 只找到 1 个absdfwabdfwab34324ab ; var regex = /ab$/g 只找到 4 个4、表单数据验证7 步骤(1)获取各表单控件对象(2)获取各控件的 value 值(3)根据 id 获取显示错误信息的span标签对象(4)定义正则表达式对象(5)用 if 选择结构对数据进行校验. 一个控件对应一个if 结构：如果对一个控件有多个校验用if 多分支如果对一个控件只有

29、1 个校验用 if 单分支名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 19 页 - - - - - - - - - 此文档仅供收集于网络，如有侵权请联系网站删除只供学习与交流每个分支的条件：正则表达式 .test(控件 value 值) 我们对其取反运算如果字符串符合要求则取反后返回假,不符合取反后返回真每个分支的语句：错误信息处理语句 (给保存错误信息的变量赋值) 注意：数据不合法才执行if 语句体(6)为显示错误信息的span标签添加内容(7)返回值 (str=

30、null&stt2=null) 注意：如果验证单选按钮或复选框第(2)步获取 checked属性。八、案例1、图片切换2、级联城市3、表单数据验证4、植物大战僵尸名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 14 页，共 19 页 - - - - - - - - - 此文档仅供收集于网络，如有侵权请联系网站删除只供学习与交流Jquery 知识点一、功能和思想1、功能浏览器执行 html 代码后实现动态改变网页内容和格式从而实现动态效果。2、思想（1）分析有哪些动态效果 ,确定事件三

31、要素并关联从而实现一切功能（2）要实现某功能找已经存在的对象和方法二、 html 添加 jquery 的 3 步骤1、创建 js 文件夹和独立的 js 文件2、在 html 页面中导入 jQuery 函数库和独立的 js 文件3、在独立文件中编写jQuery 代码$( function () $( 选择器 ). 事件方法 (function () $( 选择器 ) .方法 (); ); ) 注意：导入 jQuery 函数库语句必须在导入独立js 文件语句的上方三、选择器1、id 选择器$(#id 属性值 ) 2、类选择器$(.class 属性的值 ) 3、标签选择器$( 标签名 ) 4、包含选

32、择器名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 15 页，共 19 页 - - - - - - - - - 此文档仅供收集于网络，如有侵权请联系网站删除只供学习与交流(1)间接包含： $(#sss .ttt input) ; (2)直接包含：$(#sssinput.ttt) ;5、属性选择器$(inputname=newsletter) 6、基本过滤选择器$(input: eq(0) ) 7、表单标签属性过滤选择器$(input:checked) 四、事件处理机制1、语法$( 选

33、择器 ). 事件方法 (function () 方法语句 ; ); 2、常用事件方法名click( fn ) ：/当鼠标单击时触发blur ( fn ) ：/当标签失去焦点时触发change( fn ) ： /当标签内容发生改变时触发dblclick ( fn ) ： /当鼠标双击击时触发focus( fn ) ： /当标签获得焦点时触发keydown( fn ) ：/当键盘被按下时触发keyup( fn ) ： /当键盘被释放时触发keypress( fn ) ：/按下并释放时触发mousedown(fn)：/鼠标按下mouseup(fn)： /鼠标释放时触发mousemove(fn)： /

34、鼠标移动mouseout(fn)： /鼠标退出区域mouseover(fn)： /鼠标进入区域名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 16 页，共 19 页 - - - - - - - - - 此文档仅供收集于网络，如有侵权请联系网站删除只供学习与交流resize(fn)： /当窗口改变大小时触发submit ( fn ) ： /表单提交五、方法1、操作标签（1）删除remove() 无参时把对象删除；有参时从多个对象中删除符合条件的，只能是字符串。empty() 删除内容，

35、不删除标签本身。jquery 方法参数就 3 种形式：$(#myul) 、#myul 、html 标签代码（2）增加append();父子关系最后after();兄弟before();兄弟$(p).appendTo(div);父子关系，把自己添加到父标签的最后。$(p).insertBefore(#foo); 兄弟，新增加在原有兄弟的前面。（3）修改replaceWith(); 参数只能是 jquery 对象, 不能是字符串（4）创建标签对象$(html 代码); 2、操作 html 标签的属性attr(,); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - -

36、- - - - - - - - 名师精心整理 - - - - - - - 第 17 页，共 19 页 - - - - - - - - - 此文档仅供收集于网络，如有侵权请联系网站删除只供学习与交流removeAttr(); val(); 3、操作标签内容html(); text(); 4、操作标签的css属性css() addClass() removeClass() 5、获取标签对象的相关方法为了获取标签对象有2 种方式： 1)选择器 2)相关方法$(p).eq(1); $(p).parent(); 获取 p 的父亲$(p).next(); 获取 p 的下一个兄弟$(p).prev(); 获

37、取 p 的上一个兄弟六、循环语法$.each(object, function(i, n) 循环体语句 ; ) 功能循环遍历 jquery 对象数组中的每个一个标签对象，遍历普通数组。参数参数 1：jquery 对象数组，普通数组。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 18 页，共 19 页 - - - - - - - - - 此文档仅供收集于网络，如有侵权请联系网站删除只供学习与交流参数 2：方法定义，在方法体内写循环体参数 i：整形，每次循环的循环变量，从0 开始参数 n：每次循环时真正的值。每次循环的当前对象，本身是DOM 对象，使用时转换成JQuery对象。$(js 对象 )-jquery 对象； $arri -js对象。function(i, n)方法里返回 false将停止循环 (就像在普通的循环中使用break)；function(i, n)方法里返回 true 跳至下一个循环 (就像在普通的循环中使用continue)。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 19 页，共 19 页 - - - - - - - - -