1、Web前端知识点总结HTML知识点一、功能用来制作静态网页,网页中的全部内容都是通过Html语言展现出来。使用场合:开发静态网页。二、思想一切功能都由标签实现,标签具有四要素。三、常用标签标签关键字功能常用属性设置字体,字号,颜色face, color, size 换行/ 居中对齐 设置标题级别H1最大 h6最小$align插入水平线size, width, align 划分段落,align 创建有序编号列表type, start 定义一个列表项 定义无序符号列表type插入图片src,width,height,border, title,alt插入表格border,width,height,
2、 bgcolor,bordercolor, cellpadding,cellspacing创建一行创建一列colspan, rowspan创建一列,元素居中,粗体【设置表格的标题 收集用户输入信息,并提交给服务器action, method创建文本框name, valuereadonly, disabled创建密码框 创建单选按钮checked 创建下拉列表框name 创建列表项value, selected 创建复选框checked 创建文本区域)name,rows, cols创建隐藏控件 创建提交按钮*创建重置按钮 超级链接,网页跳转href, target指定快速的查询到该网页的关键字
3、开始;2标签添加class属性与样式关联。5、属性选择器标签名属性名=属性值,根据标签关键字和属性值自动关联。6、包含选择器1子样式名中间加或空格分隔 (直接包含);2看最后一个子样式是什么选择器就如何关联标签。7、多个样式名同一样式体1样式名中间加逗号分隔;|2根据样式类型决定如何与标签关联。8、多条件同时成立选择器1多个子样式名紧挨着 2一个标签必须同时具备这多个条件才可以被该样式修饰9、各选择器使用场合1)如果想根据标签名用一个样式修饰所有同名标签时,用标签选择器;2)如果一个样式只想修饰唯一的一个标签时,用id选择器;3)如果一个样式想修饰多个任意标签时,用类选择器;4)尽量使用包含选
4、择器。四、元素定位1、盒子模型通过设置标签的内外边距从而改变元素的位置,没有脱离标准文档流。相关属性:marging-top:外上边距【margin-right:外右边距margin-bottom:外下边距margin-left:外左边距margin:同时设置上右下左四个外边距 (顺时针)padding-top:内上边距padding-right:内右边距padding- bottom:内下边距padding-left:内左边距;padding:同时设置上右下左四个内边距border-top:设置上边线的粗细,颜色,线型border-right:设置右边线的粗细,颜色,线型border-bot
5、tom:设置下边线的粗细,颜色,线型border- left:设置左边线的粗细,颜色,线型border:同时设置四个边线的粗细,颜色,线型border-width:只设置4个边线的宽度(粗细) /border-color:兄弟元素都设置浮动后成为一行,脱离标准文档流。相关属性float : 设置浮动定位clear: 清除浮动定位的影响5、各定位方式使用场合1)靠左或靠右,兄弟标签一列变一行,文字环绕浮动定位。2)移动位移比较小,用盒子模型。|3)移动位移比较大,父容器相对定位,子元素绝对定位。五、添加独立css文件3步骤1、创建子文件夹和css文件2、在html页面用标签导入独立css文件3、
6、定义样式并修饰各html标签六、静态网页开发思想1、对网页元素通用属性进行设置。2、分析页面的组成,整个网页布局划分为多个矩形区域,在矩形区域内部又可以划分子矩形区域,每个矩形区域都用标签实现。3、用html标签把实际元素放在标签中,再用css实现元素定位和格式化(对每个元素和div),依次类推,搞定每个div区域。七、css常用属性属性名功能属性值font-size-设置字号1)像素2)百分比color设置字体颜色1)英文单词2)rgbfont-family设置字体宋体|黑体font-weight设置文字粗体normal、lightar、boldfont-style设置字体斜体normal、
7、italic#font设置字体所有属性必须按顺序设置text-decoration【设置文本下划线格式none、underline、line-throughtext-align元素中的内容水平方向对齐方式left、rigth、centerline-height!设置行高像素vertical-align元素中的内容垂直方向的对齐top、bottom、middletext-indent段落首行缩进1)像素2)em、text-transform控制英文字母大小写none、capitalize、uppercase、lowercase】width设置元素的宽度像素heigth设置元素的高度像素。back
8、ground-color设置背景颜色1)英文单词2)rgbbackground-image设置背景图片url(图片路径)background-repeat设置背景图像重复方式repeat、no-repeatrepeat-x、repeat-ybackground-size设置背景图像的大小1)像素2)百分比background-position设置背景图片的出现位置像素background(、.:.:%location= location(“地址”)六、DOM对象的方法%1、原理Dom对象可以获取html文档的每个标签,以及该标签的属性和内容,并可以对这些标签,属性和内容进行修改从而实现动态的改
9、变网页内容和格式。2、DOM对象方法总结方法功能说明getElementById(标签的id属性)根据标签的id获取标签对象&1)任何标签对象可以调用2)document对象都可以调用getElementsByTagName(标签名)根据标签名获取包含全部标签的数组2个getElementsByName(name属性值)根据标签的name的属性值获取所有标签对象数组1)只有document对象可以调用该方法createElement(标签关键字)根据标签关键字创建标签对象1)只有document对象可以调用该方法appendChild(node)把参数对象添加到父标签内2个;insertBef
10、ore(newnode,oldnode)为父标签对象增加一个子标签对象2个removeChild(node)为父标签对象删除一个子标签对象2个|getAttributeNode(属性名)根据属性名获取属性对象1)标签对象可以调用该方法setAttribute(属性名,属性值)为标签对象添加一个新的属性或改变它现有属性的值,1) 标签对象可以调用该方法属性意义innerHTML用来获取或修改标签对象中的文本内容1)标签对象可以调用该方法parentNode返回子标签的父标签对象1)标签对象可以调用该方法2)文本对象firstChild用来获取父标签的第一子标签对象1)标签对象可以调用该方法/la
11、stChild返回父标签的最后一个子标签对象1)标签对象可以调用该方法childNodes返回父标签所有子节点对象1)标签对象可以调用该方法nextSibling;返回当前标签对象的下一个兄弟节点1)标签对象可以调用该方法2)属性对象previousSibling返回当前标签对象的上一个兄弟节点1)标签对象可以调用该方法2)属性对象七、正则表达式1、正则表达式使用场合客户端表单数据校验2、创建正则表达式的对象1 var regex = new RegExp(.6$);2 var pwdRegex = /.6$/;RegExp类的方法:test()匹配一个任意字符,除了n .:表示一个小数点,转
12、义字符:s:匹配任何一个空白字符(空格,制表位)S:匹配任何一个非空白字符(空格,制表位)(2)定位符:规定字符出现的位置 :字符串必须以后面的字符开始,开始标记,此时不能用包围$ :字符串必须以$前面的字符结束,结束标记。(3)限定字符出现次数:数1,数2:限定前方字符出现次数= 数1 并且次数=数1+ :限定前方字符出现次数=1等同于1, * :限定前方字符出现次数=0 :限定前方字符出现次数0次或1次|:或者的关系 例如: /(xue&)|(学$)|(薛$)/ ():构成一个整体,括号内的内容作为一个子表达式来处理。例如:abc:表示a、b、c其中的一个(abc):表示子串abc/abc
13、$/:0个或1个c/(abc)$/:0个或1个abcvar unameRegex= /(abc$)|(liming$)|(zxy$)/;* ( ) $ / :例如:. *说明:在中/ 这4个字符必须写转义字符才能表达本身 其它字符写不写转义都行能表达本身在外必须用转义字符(5)附加参数:var regex = /d4$/gi i:加i匹配时忽略大小写,没有i就严格区分大小写。g:主要在从字符串中查找匹配的子串时起作用,加g表示查找出所有的匹配子串。?例如:absdfwabdfwab34324ab ;var regex = /ab$/ 只找到1个absdfwabdfwab34324ab ; va
14、r regex = /ab$/g 只找到4个4、表单数据验证7步骤(1)获取各表单控件对象(2)获取各控件的value值(3)根据id获取显示错误信息的span标签对象%(4)定义正则表达式对象 (5)用if选择结构对数据进行校验.一个控件对应一个if结构:如果对一个控件有多个校验用if多分支如果对一个控件只有1个校验用if单分支每个分支的条件:正则表达式.test(控件value值)(我们对其取反运算如果字符串符合要求则取反后返回假,不符合取反后返回真 每个分支的语句:错误信息处理语句(给保存错误信息的变量赋值) 注意:数据不合法才执行if语句体(6)为显示错误信息的span标签添加内容】(
15、7)返回值(str=null&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 ()
16、$(选择器).事件方法(function () $(选择器) .方法(););, ) 注意:导入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、语法$(选择器).事件方
17、法(function () 方法语句;);2、常用事件方法名click( fn ) :ppendTo(div);父子关系,把自己添加到父标签的最后。$(p).insertBefore(#foo);兄弟,新增加在原有兄弟的前面。(3)修改replaceWith();参数只能是jquery对象, 不能是字符串(4)创建标签对象$(html代码);2、操作html标签的属性attr(,);removeAttr();val(); 3、操作标签内容html();text();4、操作标签的css属性css()addClass()removeClass()5、获取标签对象的相关方法为了获取标签对象有2种方
18、式:1)选择器 2)相关方法$(p).eq(1);$(p).parent();获取p的父亲$(p).next();获取p的下一个兄弟$(p).prev();获取p的上一个兄弟六、循环语法$.each(object, function(i, n) 循环体语句;) 功能循环遍历jquery对象数组中的每个一个标签对象,遍历普通数组。参数参数1:jquery对象数组,普通数组。参数2:方法定义,在方法体内写循环体参数i:整形,每次循环的循环变量,从0开始参数n:每次循环时真正的值。每次循环的当前对象,本身是DOM对象,使用时转换成JQuery对象。$(js对象)-jquery对象;$arri -js对象。function(i, n)方法里返回false将停止循环(就像在普通的循环中使用break);function(i, n)方法里返回true 跳至下一个循环(就像在普通的循环中使用continue)。
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1