第一阶段 XHTML.表单与选择器
一.表单（Form）：
1.作用:收集客户端信息，然后发送到服务器上
2.格式
<form action=" 服务器URL"
method="get默认值|post传输方式"
name="表单名称">
...
</form>
3.表单元素
1.单行文本框
<input type="text" name="名称" value="值"
size="文本框宽度" maxlength="字符最大长度"/>
2.密码框
<input type="password" name="名称" value="值"
size="文本框宽度" maxlength="字符最大长度"/>
3.单选框
<input type="radio" name="名称" value="值"/>
说明:
a.一组类型相同的单选框名称必须相同
b.一组类型相同的单选框必须有初始值
checked="checked"
4.多选框
<input type="checkbox" name="名称" value="值"/>
说明:
a.一组类型相同的多选框名称必须相同
b.一组类型相同的多选框必须有初始值
checked="checked"
c.一组类型相同的多选框名称以数组形式存储
例如:名称[] 名称[数字] 名称[字符串]
5.下拉列表框
(1)单行下拉列表框
<select name="名称">
<optgroup label="分组名称">
<option value="值">...</option>
<option value="值">...</option>
</optgroup>
<option value="值">...</option>
...
</select>
(1)多行下拉列表框
<select name="名称" multiple="multiple" size="高度">
<optgroup label="分组名称">
<option value="值">...</option>
<option value="值">...</option>
</optgroup>
<option value="值">...</option>
...
</select>
说明:
a.下拉列表框的初始值selected="selected"
b.多行下拉列表框按 shift多选
c.多行下拉列表框名称以数组形式存储
6.浏览框
<input type="file" name="名称"/>
说明:
表单中具有浏览框的条件
a.传输方式 post
b.form标记中添加属性和值
enctype="multipart/form-data"
7.多行文本框
<textarea cols="宽度" rows="高度" name="名称">
值...
</textarea>
8按钮
提交按钮:<input type="submit" name="名称" value="值" />
普通按钮:<input type="button" name="名称" value="值" />
说明:普通按钮必须结合javascript代码实现提交表单功能
图像域按钮:<input type="image" src="图像URL" name="名称" value="值"/>
重置按钮:<input type="reset" name="名称" value="值" />
9.隐藏域
<input type="hidden" name="名称" value="值"/>
说明:向服务器传递信息，客户端不必理会
总结:
<input type="类型" name="名称" value="值"/>
type类型:
text 单行文本框
password 密码框
radio 单选框
checkbox 多选框
file 浏览框
submit 提交按钮
button普通按钮
image 图像域按钮
reset 重置按钮
hidden 隐藏域框
其他：
<select></select>下拉列表框
<textarea></textarea>多行文本框
二.框架集(Frameset)
1. 框架集：被用来组织实现多个窗口效果，
并且每个窗口都有独立页面
2.
<frameset rows="分上下窗口 20%,*"|
cols="分左右窗口20%,*"
frameborder="值">
<frame src="文档URL"/>
<frame src="文档URL"/>
...
</frameset>
说明:frameset不能和body一起使用
3.嵌套框架
<frameset rows="20%,*">
<frame src="top.html"/>
<frameset cols="20%,*">
<frame src="left.html"/>
<frame src="main.html"/>
</frameset>
</frameset>
4.frame属性
noresize:no|yes 设置调整窗口大小
scorlling:yes|no|auto 设置浏览器滚动条
5.浏览器不支持框架
<noframes>
<body>
浏览器不支持框架
</body>
</noframes>
一.CSS2.0(Cacading Style Sheet)层叠样式表
1.CSS作用:用来修饰网页标记的外观(
例如:给文本加颜色,加粗 倾斜等)
w3c规定尽量用CSS替代XHTML属性
2.CSS的使用
(1)内联样式（写在标记里的）
<标记名称 style="css代码"/>
<标记名称 style="css代码">
...
</标记名称>
说明:标记中的公共属性（除了html,head,body,meta link）
a. style
b. class
c. id
d. title描述(提示信息)
(2)内部样式(写在head头部中)
<style type="text/css">
...css样式代码
</style>
(3)外部样式(链接css页面)
<link type="text/css" rel="stylesheet"
href="CSS页面URL" media="all"/>
说明:
a.type:链接的目标文档类型
b.rel:当前文档和目标文档的关系
c.href:CSS页面URL的路径
d.media：根据不同媒介类型使用不同CSS样式代码
all:所有
screen:电脑
print:打印机
tv:电视
说明:内联样式优先级最大;内部样式和外部样式的
优先级同级，后面的覆盖前面的css代码
3.CSS语法格式
选择器{属性:值;属性:值;...}
selector{property:value;...}
4选择器(selector)
（1）通配选择器 *{...} (自动应用于所有标记中)
(2)标记选择器 标记{...}（自动应用于指定标记中）
（3）类(class)选择器 .class名称{...}
（手动应用任意标记中，一个标记中可以有多个
class选择器名称，每个class选择器名称用
空格隔开）
手动应用在标记中写：class="class名称 class名称..."
（4）id选择器 #id名称{...}
（手动应用唯一标记中，只能一次）
手动应用在标记中写： id="id名称"
(5)群组选择器 选择器名称,选择器名称...{...}
(不同选择器但属性相同的缩写)
（6）后代选择器 选择器名称 选择器名称{...}
（两个选择器至少是父子关系）
(7)子代选择器 选择器名称>选择器名称{...}
（两个选择器必须是父子关系）
5.选择器优先级
标记选择器 权值 0001
class选择器 权值 0010
id 选择器 权值 0100
内联样式 权值 1000
说明:
权值越大优先级越大，样式应用权值大的
如果权值相同，后面的样式覆盖前面的样式
继承的优先级最低
属性值 !important优先级最大
6.颜色值
(1)单词:red ,blue,green...
(2）十六进制：#ff0000 === #f00（0-9 abcdef）
(3）rgb：(r:red,g:green b:blue)
例如: 每个值 ：0-255范围
rgb(255,0,0) === rgb(100%,0%,0%)
红色 : #f00 rgb(255,0,0)
绿色 : #0f0 rgb(0,255,0)
蓝色 : #00f rgb(0,0,255)
黄色 : #ff0 rgb(255,255,0)
黑色: #000 rgb(0,0,0)
白色: #fff rgb(255,255,255)
浅灰: #eee rgb(200,200,200)
深灰: #222 rgb(2,2,2)
