03Web前端知识点总结解析

1、HTML 知识点、功能用来制作静态网页，网页中的全部内容都是通过Html 语言展现出来。使用场合：开发静态网页。二、思想一切功能都由标签实现，标签具有四要素。三、常用标签标签关键字功能常用属性vfontx/font设置字体，字号，颜色face, color, sizevbr/换行vcenter v/center居中对齐vhn v/hn设置标题级别H1 最大 h6 最小alignvhr /插入水平线size, width, alignvp v/p划分段落，alignvol v/ol创建有序编号列表type, startvli v/li定义一个列表项vul v/ul定义无序符号列表typevimg

2、 /插入图片src,width,height,border,title,altvtablev/table插入表格border,width,height,bgcolor,bordercolor,cellpadding,cellspacingvtrv/tr创建一行vtdv/td创建一列colspan, rowspanvthx/th创建一列，元素居中，粗体vcaptionv/caption设置表格的标题vform v/form收集用户输入信息，并提交给服务器action, methodvinput type=text /创建文本框name, value readonly,disabledvinput

3、 type= password /创建密码框vinput type=radio /创建单选按钮checked v/select创建下拉列表框namevoption v/option创建列表项value, selectedvinput type=checkboX* /创建复选框checkedvtextarea v/textarea创建文本区域name,rows, colsvinp ut type= hidden /创建隐藏控件vinput type=submit/创建提交按钮vinput type=reset7创建重置按钮 v/a超级链接，网页跳转href, targetvmeta name=k

4、eywords content=淘宝网/指定快速的查询到该网页的关键字vmeta name= description content=淘宝网-亚洲最大 /提供网页内容的描述信息vmeta http-equiv=content-type content=text/html; charset=utf-8/ /指疋文档类型和页面字符集四、案例1 诗篇2、学生课程表3、注册页css 知识点、功能1 1、csscss 格式化页面中的各组成元素2 2、csscss 决定元素在页面的具体位置二、思想属性是 css 最小构成单元，每个属性都有特定功能，多个属性构成样式，由样式修 饰 html语言的标签。三、样

5、式修饰标签1 1、stylestyle 属性html 标签添加 style 属性，属性值是多个 css 属性的组合。2 2、标签选择器样式名与标签关键字相同，根据名称相同自动关联。3 3、IDID 选择器1样式名以#开始；2标签添加 id 属性与样式关联。4 4、类选择器1样式名以.开始；2标签添加 class 属性与样式关联。5 5、属性选择器标签名属性名=属性值，根据标签关键字和属性值自动关联。6 6、包含选择器1子样式名中间加 或空格分隔（直接包含）；2看最后一个子样式是什么选择器就如何关联标签。7 7、多个样式名同一样式体1样式名中间加逗号分隔；2根据样式类型决定如何与标签关联。8 8

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

7、（顺时针）padding-top :内上边距 padding-right:内右边距 padding- bottom 内下边距padding-left:内左边距padding：同时设置上右下左四个内边距 border-top：设置上边线的粗细，颜色，线型border-right:设置右边线的粗细，颜色，线型 border-bottom：设置下边线的粗细，颜色，线型 border- left:设置左边线的粗细，颜色，线型 border:同时设置四个边线的粗细,颜色，线型 border-width:只设置 4 个边线的宽度（粗细）border-color：/只设置 4 个边框的边框颜色 border

8、-style：只设置 4 个边框的边框线型2 2、绝对定位有 2 套坐标系统：1）如果该元素所有父标签都没有设置相对定位，那么浏览器左上角为坐标原点，根 据 left与 top 值确定元素的位置。2）第一个设置相对定位的父标签左上角为坐标原点，根据left 与 top 值确定元素的位置。脱离标准文档流相关属性：position: absolute;/表示绝对地址定位，通过绝对定位，元素可以放置到页面上的任何位置。left:100px/绝对定位时表示与浏览器左边框距离。top:100px/绝对定位时表示与浏览器上边框距离。z-index:/在绝对定位层改变各元素层叠顺序属性值是整数越大越在上方。

9、3 3、相对定位元素原位置（标准文档流的位置）左上角为坐标原点，根据 left 与 top 值改变位置。没 有脱离标准文档流。相关属性position: relative;/表示相对地址定位，通过相对定位；元素可以放置到页面上的任何位置。left:100px/相对定位时表示与元素原始位置的左边距离。top:100px/相对定位时表示与元素原始位置的上边距离。4 4、浮动定位把元素靠在在父容器左边或右边兄弟元素都设置浮动后成为一行，脱离标准文档流。相关属性float :设置浮动定位clear:清除浮动定位的影响5 5、各定位方式使用场合1）- 靠左或靠右，兄弟标签一列变一行，文字环绕- 浮动定位

10、。2）移动位移比较小，用盒子模型。3）移动位移比较大，父容器相对定位，子元素绝对定位。五、 添加独立css文件3步骤1 1、创建子文件夹和 csscss 文件2 2、在 htmlhtml 页面用 vlinkvlink标签导入独立 csscss 文件3 3、定义样式并修饰各 htmlhtml 标签六、 静态网页开发思想1、对网页元素通用属性进行设置。2、 分析页面的组成，整个网页布局划分为多个矩形区域，在矩形区域内部又可以 划分子矩形区域，每个矩形区域都用 div标签实现。3、 用 html 标签把实际元素放在div标签中，再用 css 实现元素定位和格式化（对 每个元素和 div），依次类推，

11、搞定每个 div 区域。七、css常用属性属性名功能属性值font-size设置字号1）像素 2）百分比color设置字体颜色1）英文单词 2）rgbfont-family设置字体宋体|黑体font-weight设置文字粗体normal、lightar、boldfont-style设置字体斜体normal、italicfont设置字体所有属性必须按顺序设置text-decoration设置文本下划线格式none、underline、line-throughtext-align元素中的内容水平方向对 齐方式left、rigth、centerline-height设置行高像素vertical-al

12、ign元素中的内容垂直方向的 对齐top、bottom、middletext-indent段落首行缩进1)像素 2) emtext-transform控制英文字母大小与none、capitalize、uppercase lowercasewidth设置元素的宽度像素heigth设置元素的高度像素background-color设置背景颜色1）英文单词 2）rgbbackground-image设置背景图片url（图片路径）background-repeat设置背景图像重复方式repeat、no-repeatrepeat-x、repeat-ybackground-size设置背景图像的大小1）像

13、素 2）百分比background-position设置背景图片的出现位置像素background设置所有背景属性display设置元素是否可见none、block、inlineoverflow设置内容超出父区域时如 何处理hidden、visiblelist-style-type设置列表符号类型disc、circle nonelist-style-image用图片作为编号url（图片路径）opacity设置元素的透明度从 0.0 （完全透明）到1.0 （完全不透明）cursor设置鼠标到达元素上的鼠 标形状pointer、textborder-radius设置圆角矩形像素a:link CGI

14、DC: 4FF00001禾访 1 可的确接a:visitedcolor: #00FF00/* 已访问的槌接aihsver cclor: #FF00FF八当有鼠标县停広aactive color: #OOOOFFJL 彼选择的超接八、案例1 房地产首页2、注册页3、登录页4、二级菜单JavaScript 知识点一、功能浏览器执行 html 代码后实现动态改变网页内容和格式从而实现动态效果二、思想1 1、分析有哪些动态效果，确定事件三要素并关联从而实现一切功能。2 2、要实现某功能找已经存在的对象和方法。三、html导入独立的js文件的步骤1 创建文件夹和独立 js 文件。2、用 vscript

15、type=text/javascript src=标签在 html 页面中导入。3、在 js 文件中定义方法，并与 html 页面的标签关联。四、事件关键字1 onclick：鼠标单击时触发。2、 onload:页面全部内容被加载后立即触发，该事件源是body。3、onmouseover鼠标进入区域时触发。4、onmouseout 鼠标退出区域时触发。5、onmousemove 鼠标在某区域移动时触发。6、onchange 内容改变时触发。7、onsubmit 表单提交数据时触发。8 onblur:控件失去焦点时触发。9、onfocus 控件获取焦点时触发。五、浏览器对象和方法1 1、特性所有

16、对象都是由浏览器负责提供的，编程时可以直接调用方法，又称BOM 对象2 2、浏览器对象的方法总结内置对象名功能常用方法1、window代表浏览器窗口alert （”提示内容”）setinterval (方法名(),数值)clearinterval （对象名）setTimeout（” 方法名（）,时间）open（”, _bla nk, width=800,height=500）;parseInt （数值）eval （）prompt（提示信息，”默认信息）/弹出对话框，接受文本框内容confirm（对话框上的提示信息 ）/弹出对话框，有确定和取消 2 个2、document代表整个网页getEle

17、mentById （标签的 id 属性）getElementsByTagName（标签关键字）getElementsByName （标签的name 属性值）createElement（标签关键字）write （内容）3、 event事件对象event.x 鼠标此时位置的横坐标 event.y鼠标此时位置的纵坐标4、locationwindow. location= locationlocation.href（地址”）六、DOM对象的方法1 1、原理Dom 对象可以获取 html 文档的每个标签，以及该标签的属性和内容，并可以对这 些标签，属性和内容进行修改从而实现动态的改变网页内容和格式。2

18、2、DOMDOM 对象方法总结方法功能说明getElementById （标签的 id 属 性）根据标签的 id 获取标签对象1） 任何标签对象可以调用2） document 对象都可以调用getElementsByTagName （标签名）根据标签名获取包含全部标 签的数组2 个getElementsByName （name 属 性值）根据标签的 name 的属性值 获取所有标签对象数组1） 只有 document 对象可以调 用该方法createElement（标签关键字）根据标签关键字创建标签对 象1） 只有 document 对象可以调 用该方法appendChild （node）把参

19、数对象添加到父标签内2 个insertBefore (newno de,old no de)为父标签对象增加一个子标 签对象2 个removeChild(node)为父标签对象删除一个子标 签对象2 个getAttributeNode (属性名)根据属性名获取属性对象1）标签对象可以调用该方法setAttribute (属性名,属性值)为标签对象添加一个新的属 性或改变它现有属性的值1）标签对象可以调用该方 法属性意义innerHTML用来获取或修改标签对象中 的文本内容1）标签对象可以调用该方法parentNode返回子标签的父标签对象1） 标签对象可以调用该方法2） 文本对象firstCh

20、ild用来获取乂标签的第 子标 签对象1）标签对象可以调用该方法lastChild返回父标签的最后一个子标 签对象1）标签对象可以调用该方法childNodes返回父标签所有子节点对象M）标签对象可以调用该方法nextSibling返回当前标签对象的下一个 兄弟节点1） 标签对象可以调用该方法2） 属性对象previousSibling返回当前标签对象的上一个 兄弟节点1） 标签对象可以调用该方法2） 属性对象七、正则表达式1 1、正则表达式使用场合客户端表单数据校验2 2、创建正则表达式的对象1 var regex = new RegExp（d6$）;2 var pwdRegex = /A.

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

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

23、1+ :限定前方字符出现次数=1 等同于1,* :限定前方字符出现次数=0?:限定前方字符出现次数 0 次或 1 次|:或者的关系 例如:/(Axue&)|(A 学$)|(A 薛$)/():构成一个整体，括号内的内容作为一个子表达式来处理。例如：abc:表示 a、b、c 其中的一个(abc):表示子串abc/Aabc?$/: 0 个或 1 个 c/A(abc)?$/: 0 个或 1 个abcvar un ameRegex= /(Aabc$)|(A|imi ng$)|(Azxy$)/;要么是 abc,要么是 liming，要么是 zxy(4) 需要用到转义的字符有.* ( ) $八八？八

24、八：例如：. *说明：在中八这 4 个字符必须写转义字符才能表达本身其它字符写不写转义都行能表达本身在外必须用转义字符(5) 附加参数:var regex = /Ad4$/gii：加 i 匹配时忽略大小写，没有 i 就严格区分大小写。g：主要在从字符串中查找匹配的子串时起作用，加g 表示查找出所有的匹配子串例如：absdfwabdfWab34324ab ;var regex = /Aab$/只找到 1 个 absdfwabdfWab34324ab ; varregex = /Aab$/g 只找到 4 个4 4、表单数据验证 7 7 步骤(1) 获取各表单控件对象(2) 获取各控件的 value

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

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

27、on （）（） $（选择器）方法）;）;）注意：导入 jQuery 函数库语句必须在导入独立 js 文件语句的上方三、 选择器1 1、idid 选择器$（#id 属性值）2 2、类选择器$（.class 属性的值）3 3、标签选择器$（标签名）4 4、包含选择器间接包含：$(#sss .ttt input);(2)直接包含：$(#sssinput.ttt);5 5、属性选择器$(inputname=newsletter)6 6、基本过滤选择器$( inp ut: eq(0)7 7、表单标签属性过滤选择器$(input:checked)四、事件处理机制1 1、语法$(选择器).事件方法(function () 方法语句；);2 2、常用事件方法名click( fn ) : /当鼠标单击时触发 blur( fn): 当标签失去焦点时触发Chang fn ) :/当标签内容发生改变时触发dblclick( fn):当鼠标双击击时触发focus( fn ) :/当标签获得焦点时触发keydown( fn ) : /当键盘被按下时触发 keyup( fn): 当键盘被释放时触发keypress fn): 按下并释放时触发 mousedowifn): 鼠标按下mouseupfn): /鼠标释放时触发 mousemovfn) :/ 鼠标移动mouseoufn) :/鼠标退出区域mouseo