Web前端知识点总结.doc

HTML知识点
一、功能
用来制作静态网页,网页中得全部内容都就是通过Html语言展现出来。
使用场合:开发静态网页。
二、思想
一切功能都由标签实现,标签具有四要素。
三、常用标签
标签关键字
功能
常用属性
<font></font>
设置字体,字号,颜色
face, color, size
<br/>
换行

<center> </center>
居中对齐

<hn> </hn>
设置标题级别
H1最大 h6最小
align
<hr />
插入水平线
size, width, align
<p> </p>
划分段落,
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></td>
创建一列
colspan, rowspan
<th></th>
创建一列,元素居中,粗体

<caption></caption>
设置表格得标题

<form> </form>
收集用户输入信息,并提交给服务器
action, method
<input type="text" />
创建文本框
name, value
readonly, disabled
<input type="password" />
创建密码框

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

<input type="submit"/>
创建提交按钮

<input type="reset"/>
创建重置按钮

<a > </a>
超级链接,网页跳转
href, target
<meta name="keywords" content="淘宝网"/>
指定快速得查询到该网页得关键字
<meta name= "description" content= "淘宝网亚洲最大/>
//提供网页内容得描述信息
<meta equiv="contenttype" content="text/html; charset=utf8"/>
//指定文档类型与页面字符集
四、案例
1、诗篇
2、学生课程表
3、注册页
CSS知识点
一、功能
1、css格式化页面中得各组成元素
2、css决定元素在页面得具体位置
二、思想
属性就是css最小构成单元,每个属性都有特定功能,多个属性构成样式,由样式修饰html语言得标签。
三、样式修饰标签
1、style属性
html标签添加style属性,属性值就是多个css属性得组合。
2、标签选择器
样式名与标签关键字相同,根据名称相同自动关联。
3、ID选择器
1>样式名以#开始;2>标签添加id属性与样式关联。
4、类选择器
1>样式名以 、 开始;2>标签添加class属性与样式关联。
5、属性选择器
标签名[属性名=属性值],根据标签关键字与属性值自动关联。
6、包含选择器
1>子样式名中间加>或空格分隔 (>直接包含);
2>瞧最后一个子样式就是什么选择器就如何关联标签。
7、多个样式名同一样式体
1>样式名中间加逗号分隔;
2>根据样式类型决定如何与标签关联。
8、多条件同时成立选择器
1>多个子样式名紧挨着
2>一个标签必须同时具备这多个条件才可以被该样式修饰
9、各选择器使用场合
1)如果想根据标签名用一个样式修饰所有同名标签时,用标签选择器;
2)如果一个样式只想修饰唯一得一个标签时,用id选择器;
3)如果一个样式想修饰多个任意标签时,用类选择器;
4)尽量使用包含选择器。
四、元素定位
1、盒子模型
通过设置标签得内外边距从而改变元素得位置,没有脱离标准文档流。
相关属性:
margingtop:外上边距
marginright:外右边距
marginbottom:外下边距
marginleft:外左边距
margin:同时设置上右下左四个外边距 (顺时针)
paddingtop:内上边距
paddingright:内右边距
padding bottom:内下边距
paddingleft:内左边距
padding:同时设置上右下左四个内边距
bordertop:设置上边线得粗细,颜色,线型
borderright:设置右边线得粗细,颜色,线型
borderbottom:设置下边线得粗细,颜色,线型
border left:设置左边线得粗细,颜色,线型
border:同时设置四个边线得粗细,颜色,线型
borderwidth:只设置4个边线得宽度(粗细)
bordercolor://只设置4个边框得边框颜色
borderstyle:只设置4个边框得边框线型
2、绝对定位
有2套坐标系统:
1)如果该元素所有父标签都没有设置相对定位,那么浏览器左上角为坐标原点,根据left与top值确定元素得位置。
2)第一个设置相对定位得父标签左上角为坐标原点,根据left与top值确定元素得位置。
脱离标准文档流
相关属性:
position: absolute;
//表示绝对地址定位,通过绝对定位,元素可以放置到页面上得任何位置。
left:100px
//绝对定位时表示与浏览器左边框距离。
top:100px
//绝对定位时表示与浏览器上边框距离。
zindex:
//在绝对定位层改变各元素层叠顺序 属性值就是整数 越大越在上方。
3、相对定位
元素原位置(标准文档流得位置)左上角为坐标原点,根据left与top值改变位置。没有脱离标准文档流。
相关属性
position: relative;
//表示相对地址定位,通过相对定位;元素可以放置到页面上得任何位置。
left:100px
//相对定位时表示与元素原始位置得左边距离。
top:100px
//相对定位时表示与元素原始位置得上边距离。
4、浮动定位
把元素靠在在父容器左边或右边、 兄弟元素都设置浮动后成为一行,脱离标准文档流。
相关属性
float : 设置浮动定位
clear: 清除浮动定位得影响
5、各定位方式使用场合
1)靠左或靠右,兄弟标签一列变一行,文字环绕——浮动定位。
2)移动位移比较小,用盒子模型。
3)移动位移比较大,父容器相对定位,子元素绝对定位。
五、添加独立css文件3步骤
1、创建子文件夹与css文件
2、在html页面用<link>标签导入独立css文件
3、定义样式并修饰各html标签
六、静态网页开发思想
1、对网页元素通用属性进行设置。
2、分析页面得组成,整个网页布局划分为多个矩形区域,在矩形区域内部又可以划分子矩形区域,每个矩形区域都用<div>标签实现。
3、用html标签把实际元素放在<div>标签中,再用css实现元素定位与格式化(对每个元素与div),依次类推,搞定每个div区域。
七、css常用属性
属性名
功能
属性值
fontsize
设置字号
1)像素2)百分比
color
设置字体颜色
1)英文单词2)rgb
fontfamily
设置字体
宋体|黑体
fontweight
设置文字粗体
normal、lightar、bold
fontstyle
设置字体斜体
normal、italic
font
设置字体所有属性
必须按顺序设置

textdecoration
设置文本下划线格式
none、underline、
linethrough
textalign
元素中得内容水平方向对齐方式
left、rigth、center
lineheight
设置行高
像素
verticalalign
元素中得内容垂直方向得对齐
top、bottom、middle
textindent
段落首行缩进
1)像素2)em
texttransform
控制英文字母大小写
none、capitalize、
uppercase、lowercase

width
设置元素得宽度
像素
heigth
设置元素得高度
像素

backgroundcolor
设置背景颜色
1)英文单词2)rgb
backgroundimage
设置背景图片
url('图片路径')
backgroundrepeat
设置背景图像重复方式
repeat、norepeat
repeatx、repeaty
backgroundsize
设置背景图像得大小
1)像素2)百分比
backgroundposition
设置背景图片得出现位置
像素
background
//设置所有背景属性

display
设置元素就是否可见
none、block、inline
overflow
设置内容超出父区域时如何处理
hidden、visible
liststyletype
设置列表符号类型
disc、circle、none
liststyleimage
用图片作为编号
url("图片路径")
opacity
设置元素得透明度
从0、0(完全透明)到1、0(完全不透明)
cursor
设置鼠标到达元素上得鼠标形状
pointer、text
borderradius
设置圆角矩形
像素

八、案例
1、房地产首页
2、注册页
3、登录页
4、二级菜单
JavaScript知识点
一、功能
浏览器执行html代码后实现动态改变网页内容与格式从而实现动态效果
二、思想
1、分析有哪些动态效果,确定事件三要素并关联从而实现一切功能。
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:鼠标在某区域移动时触发。
6、onchange:内容改变时触发。
7、onsubmit:表单提交数据时触发。
8、onblur:控件失去焦点时触发。
9、onfocus:控件获取焦点时触发。
五、浏览器对象与方法
1、特性
所有对象都就是由浏览器负责提供得,编程时可以直接调用方法,又称BOM对象。
2、浏览器对象得方法总结
内置对象名
功能
常用方法
1、window
代表浏览器窗口
alert("提示内容")

setInterval("方法名",数值)

clearInterval(对象名)

setTimeout("方法名",时间)

open("", "_blank", "width=800, height=500");

parseInt(数值)
eval

prompt("提示信息","默认信息")
//弹出对话框,接受文本框内容

confirm("对话框上得提示信息")
//弹出对话框,有确定与取消2个

2、document
代表整个网页
getElementById("标签得id属性")

getElementsByTagName("标签关键字")

getElementsByName("标签得name属性值")

createElement("标签关键字")

write("内容")

3、event
事件对象
event、x 鼠标此时位置得横坐标
event、y 鼠标此时位置得纵坐标

4、location

window、 location= location
location、href(“地址”)
六、DOM对象得方法
1、原理
Dom对象可以获取html文档得每个标签,以及该标签得属性与内容,并可以对这些标签,属性与内容进行修改从而实现动态得改变网页内容与格式。
2、DOM对象方法总结
方法
功能
说明
getElementById("标签得id属性")
根据标签得id获取标签对象
1)任何标签对象可以调用
2)document对象都可以调用
getElementsByTagName("标签名")
根据标签名获取包含全部标签得数组
2个
getElementsByName("name属性值")
根据标签得name得属性值获取所有标签对象数组
1)只有document对象可以调用该方法
createElement("标签关键字")
根据标签关键字创建标签对象
1)只有document对象可以调用该方法
appendChild(node)
把参数对象添加到父标签内
2个
insertBefore(newnode,oldnode)
为父标签对象增加一个子标签对象
2个
removeChild(node)
为父标签对象删除一个子标签对象
2个

getAttributeNode("属性名")
根据属性名获取属性对象
1)标签对象可以调用该方法
setAttribute("属性名","属性值")
为标签对象添加一个新得属性或改变它现有属性得值
1) 标签对象可以调用该方法
属性
意义

innerHTML
用来获取或修改标签对象中得文本内容
1)标签对象可以调用该方法
parentNode
返回子标签得父标签对象
1)标签对象可以调用该方法
2)文本对象
firstChild
用来获取父标签得第一子标签对象
1)标签对象可以调用该方法
lastChild
返回父标签得最后一个子标签对象
1)标签对象可以调用该方法
childNodes
返回父标签所有子节点对象
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,b,c其中得任意一个字符
:用来指定范围也可以表示字符""本身
例如:
[az] : 表示匹配从a到z得任意一个字符
[AZ] : 表示匹配从A到Z得任意一个字符
[09] : 表示匹配从0到9得任意一个字符
[\u4e00\u9fa5] : 表示匹配所有汉字中任意一个汉字
^ :取反 ,注意只有用[]包围才就是取反
例如:
[^AZ] : 表示匹配不就是从A到Z得任意一个字符
[^09] : 表示匹配不就是从0到9得任意一个字符
[^abc] :匹配不就是a,b,c中得任意一个字符
\d:匹配任意一个数字字符 相当于[09]
\D:匹配任意一个非数字字符 相当于[^09]
\w:匹配字母、数字、下划线中得一个字符,相当于[azAZ09_]
\W:与\w相反,相当于[^azAZ09_ ]
、:匹配一个任意字符,除了\n
\、:表示一个小数点,转义字符
\s:匹配任何一个空白字符(空格,制表位)
\S:匹配任何一个非空白字符(空格,制表位)
(2)定位符:规定字符出现得位置
^ :字符串必须以^后面得字符开始,开始标记,此时^不能用[]包围
$ :字符串必须以$前面得字符结束,结束标记。
(3)限定字符出现次数:
{数1,数2}:限定前方字符出现次数>= 数1 并且次数<=数2;
{数1}:前方字符出现次数=数1
{数1,}:前方字符出现次数>=数1
+ :限定前方字符出现次数>=1等同于{1,}
* :限定前方字符出现次数>=0
? :限定前方字符出现次数0次或1次
|:或者得关系 例如: /(^xue&)|(^学$)|(^薛$)/
:构成一个整体,括号内得内容作为一个子表达式来处理。
例如:
[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 = /^\d{4}$/gi
i:加i匹配时忽略大小写,没有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多分支
如果对一个控件只有1个校验用if单分支
每个分支得条件:
正则表达式、test("控件value值")
我们对其取反运算
如果字符串符合要求则取反后返回假,不符合取反后返回真
每个分支得语句:
错误信息处理语句(给保存错误信息得变量赋值)
注意:数据不合法才执行if语句体
(6)为显示错误信息得span标签添加内容
(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 {
$("选择器")、事件方法(function {
$("选择器") 、方法;
});
}
)
注意:导入jQuery函数库语句必须在导入独立js文件语句得上方
三、选择器
1、id选择器
$("#id属性值")
2、类选择器
$("、class属性得值")
3、标签选择器
$("标签名")
4、包含选择器
(1)间接包含:$("#sss 、ttt input") ;
(2)直接包含: $("#sss>input>、ttt") ;
5、属性选择器
$("input[name='newsletter']")
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] ) ://按下并释放时触发
mousedown(fn)://鼠标按下
mouseup(fn): //鼠标释放时触发
mousemove(fn): //鼠标移动
mouseout(fn): //鼠标退出区域
mouseover(fn): //鼠标进入区域
resize(fn): //当窗口改变大小时触发
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;
获取p得父亲
$("p")、next;
获取p得下一个兄弟
$("p")、prev;
获取p得上一个兄弟
六、循环
语法
$、each(object, function(i, n){
循环体语句;
})
功能
循环遍历jquery对象数组中得每个一个标签对象,遍历普通数组。
参数
参数1:jquery对象数组,普通数组。
参数2:方法定义,在方法体内写循环体
参数i:整形,每次循环得循环变量,从0开始
参数n:每次循环时真正得值。
每次循环得当前对象,本身就是DOM对象,使用时转换成JQuery对象。
$(js对象)>jquery对象;$arr[i] >js对象。
function(i, n)方法里返回'false'将停止循环(就像在普通得循环中使用break);
function(i, n)方法里返回'true' 跳至下一个循环(就像在普通得循环中使用continue)。