标签中，再用css实现元素定位和格式化（对每个元素和div），依次类推，搞定每个div区域。
七、css常用属性
属性名
功能
属性值
font-size
-
设置字号
1）像素2）百分比
color
设置字体颜色
1）英文单词2）rgb
font-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）像素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
设置背景图片的出现位置
像素
background
`
（
、
}
}
.
:
.
·
：
·
%
location=location
（“地址”）
六、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>varregex=newRegExp（"^.{6}$"）;
2>varpwdRegex=/^.{6}$/;
RegExp类的方法：
test（）匹配一个任意字符，除了\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"
varunameRegex=/（^abc$）|（^liming$）|（^zxy$）/;
*（）$/\[]^{}:
{
例如：
\.\*
说明：
在[]中/\[]这4个字符必须写转义字符才能表达本身
其它字符写不写转义都行能表达本身
在[]外必须用转义字符
（5）附加参数:
varregex=/^\d{4}$/gi
i：
加i匹配时忽略大小写，没有i就严格区分大小写。
g：
主要在从字符串中查找匹配的子串时起作用，加g表示查找出所有的匹配子串。
?
例如：
absdfwabdfwab34324ab;varregex=/^ab$/只找到1个
absdfwabdfwab34324ab;varregex=/^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.tttinput"）;
（2）直接包含：
$（"#sss>input>.ttt"）;
5、属性选择器
$（"input[name='newsletter']"）
6、基本过滤选择器
$（"input:
eq（0）"）
7、表单标签属性过滤选择器
$（"input:
checked"）
四、事件处理机制
1、语法
$（"选择器"）.事件方法（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种方式：
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）。