表单与CSS
1,表单
主要用于收集来自用户的信息,并将收集的信息发送给服务器端处理程序处理。表单时客户端和服务器端传递数据的桥梁,是实现用于与服务器互动的最主要方式。
1)form
表单控件的容器
<form action="">
</form>
属性
action 设定处理表单数据URI的地址
method 设定数据传送到服务器的方式
get 将输入的数据追加到action地址后面
post将输入的数据保存到HTTP协议的报文中
name 设定表单的名称
enctype 设定表单数据的内容类型
application/x-www-form-urlencoded 在发送前编码所有字符(默认)
编码方式:
1)控件的名称和值都被转义,空白字符使用【+】替换,保留的字符一般都是用来实现特定的目的,例如(: / ? ; @ = & 等)。非数字和字母的字符使用%HH(这里HH表示两个十六进制数字,代表该字符的ASCII码)进行转换,
2)控件的"名称/值"对按照它们在文档数据流中出现的顺序列出来。"名称""值"使用"="分割,两个"名称/值"之间使用&隔开。
multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。
数据分成多个部分,每个部分代表一个结构良好的控件,作为文档数据流的一部分,每一个部分都按照它们在文档数据流中出现的顺序依次发送到服务器端,并且,每一部分的边界不会出现在数据中。每一部分有一个content-desposition标题头,它的值的格式是:
Content-Disposition:form-data;name="myControl"
text/plain 空格转换为 "+" 加号,但不对特殊字符编码。
accept-charset 设置服务器端可以处理的字符编码
2)input 基本表单控件
<input type="text">
属性:
type: 控件类型:
text 单行文本框
textarea 多行文本框
password 密码框
checkbox 复选框
radio 单选按钮
submit 提交按钮
reset 重置按钮
file 文件
hidden 隐藏域
image 图像按钮
button 普通按钮
name
控件名称,这个名称将与控件的当前值形参"名称/值"对 一同随表单提交
value
用于设定初始化,可选。
checked
单选框,复选框默认选中属性
size
当前控件的初始宽度,这个宽度以像素为单位。除非控件类型是text,password,这时宽度是整数值,表示字符的数目
maxlength
指定可以输入的字符的最大值。适用于控件类型为text,password。
3)button 按钮控件
<button></button>
属性
name 控件名称
value 控件初始值
type 控件类型
button 普通按钮
submit 提交按钮
reset 重置按钮
图片按钮
<button><img src="" alt=""></button>
4)select 下拉列表或列表
<select name="" id="">
<option value=""></option>
<option value=""></option>
</select>
属性
name: 控件名称
size: 列表框中行的显示数量
multiple: 是否允许多选
如果select元素不包含属性size和属性multiple时,表单类型显示为菜单(组合框)
如果使用了属性size和属性multiple中的任意一个,则表单类型显示为列表框
selected: 默认选中
option 下拉列表选项
属性:
value: 定义控件的初始值。提交表单时,初始值会被提交给服务器。
optgroup 分组选项
<select name="" id="">
<optgroup label="大洋">
<option value="">太平洋</option>
<option value="">大西洋</option>
<option value="">印度洋</option>
</optgroup>
<optgroup label="大海">
<option value="">东海</option>
<option value="">南海</option>
<option value="">渤海</option>
</optgroup>
</select>
4)textarea 多行文本框
属性
name: 控件名称
rows: 定义文本框行数
cols: 定义文本框列数
warp: 是否自动换行。
off 不自动换行
hard自动硬回车换行,换行元素一同被传送到服务器中
soft自动软回车换行,换行元素不会传到服务器中
5)label 为表单控件定义标签
一些表单控件内建有标签,当内建有标签时,一般使用value属性的值作为标签,而另外一些表单控件没有标签,则直接使用文本作为标签来说明控件的意义。每个label元素都要和表单控件关联到一起
<table>
<tr>
<td><label for="username">用户名:</label></td>
<td><input type="text" id="username" name="username"></td>
</tr>
<tr>
<td><label for="passwold">密码:</label></td>
<td><input type="password" id="password" name="password"></td>
</tr>
</table>
6)fieldset 为表单添加结构
一般与legend元素配合使用,fieldset元素可以包含其他的表单控件,在这些表单控件周围画一个方框,而legend元素可以显示一个标签说明被包含的这些表单控件。
7)其他控件特性
disabled 禁用
支持该属性的控件:button,input,optgroup,option,select,textarea
1)禁止的元素不接受焦点
2)禁止的控件的值不与表单一起被提交
readonly 只读
支持该属性的控件:input,textarea
1)可以接受焦点,但是不能被用户修改
2)只读元素的值可以与表单一起被提交。
2,CSS简介
CSS(cascading style sheet,层叠样式表)是描述文档怎么样被呈现的语言,使用CSS可以对HTML文档进行描述。
语法:
1)CSS属性和值之间用冒号分隔
2)CSS属性之间用分号分隔(建议每个属性后都书写分号)
3)CSS的值有多个的时候使用空格分隔
3,CSS在网页中的使用
1)内嵌式 style="css"
每个HTML元素都包含有一个style属性,使用该属性可以直接指定样式
<p style=""></p>
存在问题:
1.不方便修改
2.结构与显示不能很好的分离
3.建议在测试或个别情况下使用
2)嵌入式
CSS样式定义内容位于style元素之间,其type属性必须被定义为text/css
<head>
<style type="text/css">
</style>
</head>
3)外部引用式
可以在多个文档间共享样式表,提高效率;可以改变样式表而无须改变HTML文档。
<head>
<link rel="stylesheet" href="">
<style type="text/css">
@import "style.css";
@import url("style.css");
</style>
</head>
其他样式的导入
@import url(common.css);
4. CSS基本语法规则
选择器{css属性1:css值1; css属性2:css值2;}
1)选择器
用于选择html中的元素
html选择器(标签选择器)
即html标签,任何一个HTML元素的标签名都可以是css的选择器
p{ text-indent:10px} /*段落第一行缩进10像素*/
h1{ color:red}
优先级:
默认情况下,子级通常先继承父级标签属性
如果子级和父级拥有相同的属性,子级优先,就近原则
类选择器的优先级高于标签选择器
类选择器
class属性
.类名(类名不能使用数字开头,不能使用关键字来命名)
.rr{ color :red}
使用class属性来调用类名称
<p class="rr">one</p>
<p class="rr">two</p>
<p class="rr">three</p>
ID选择器
id属性
#id名
#two{background-color:green}
<p class="rr">one</p>
<p id="two" class="rr">two</p>
<p class="rr">three</p>
关联选择器
用一个空格隔开的两个或者多个单一选择器组成的字符串
它们的优先级比单一的选择器大。
table a{color:red}
定义了table中的a样式,而多table外的a样式不做改变
组合选择器
使用逗号,隔开选择器,可以减少样式表的重复声明
h1,h2,h3,h4{color:red}
伪元素选择器
是指对同一个HTML元素的不同状态的一种定义方式
HTML标签:伪元素{}
a:link{} 超链接没有任何动作前的状态
a:hover{} 光标移动到超链接上的状态
a:active{} 选中超链接时的状态
a:visited{}访问过超链接的状态
text-decoration:none 去掉下划线
2)选择器优先级
多个CSS选择器同时作用于同一个html时,声明不同的属性具有继承的关系,如果声明的是相同的属性,则以优先级高的为主。
内嵌式
> 关联选择器(后代,子代,组合(且))
> ID选择器
> 类选择器
> HTML选择器
同级别的后者覆盖前者
就近原则
3)样式
样式是零个或多个以分号分割的【属性名:属性值】列表
4)规则集
选择器 样式
选择器{属性名:属性值;属性名:属性值}
5)注释
/*
注释内容
*/
5. 基本布局
布局顺序
由上至下,由左至右,由内至外
块居中
要居中的块必须小于父级元素
利用margin-left margin-right的自动值来居中
布局级别:
1)行布局级(横排)
2)列布局级(浮动布局)
1.设置浮动 float
任何元素都可以浮动,可以改变普通文档流的排列方式,可以使得块元素在同一行中排列,使我们的布局更加方便,浮动是脱离文档流的,也就是其他元素视而不见。
浮动何时停止?
1. 当遇到一个浮动元素后
2. 当遇到父级元素后
多个盒子都浮动后,就产生了块级元素水平排列的效果
多个浮动元素不会相互覆盖
若包含的容器太窄,无法容纳水平排列的多个浮动元素,那么最后的浮动盒子会向下移动,但如果浮动元素的高度不同,那么它们向下移动时可能会被卡住。
float:
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
2. 清理浮动
clear
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧均不允许浮动元素
margin上下值在行布局时共用,浮动后不再共用
clear 清除浮动对象对当前对象的影响
课堂练习:对newbalance中国官网进行布局
*************************回顾一下*************************
1. HTML
2. 标签
1)块级元素
div
p
h1~h6
列表标签
ul
ol
li
dl
dt
dd
2)行内元素
span
a
img
装饰标签
i
em
b
strong
...
3 标签
a
img
地图
width
height
alt
src
...
table
caption
thead
tbody
tfoot
tr
td
框架
dtd
<frameset rows=",,">
<frame src=".html">
</frameset>
top.html
left.html
center.html
main.html
doctype
head
<frameset>
<frame src="top.html">
</frameset>
1. 表单 样式以及功能
2. 基本布局方式
1,表单
主要用于收集来自用户的信息,并将收集的信息发送给服务器端处理程序处理。表单时客户端和服务器端传递数据的桥梁,是实现用于与服务器互动的最主要方式。
1)form
表单控件的容器
<form action="">
</form>
属性
action 设定处理表单数据URI的地址
method 设定数据传送到服务器的方式
get 将输入的数据追加到action地址后面
post将输入的数据保存到HTTP协议的报文中
name 设定表单的名称
enctype 设定表单数据的内容类型
application/x-www-form-urlencoded 在发送前编码所有字符(默认)
编码方式:
1)控件的名称和值都被转义,空白字符使用【+】替换,保留的字符一般都是用来实现特定的目的,例如(: / ? ; @ = & 等)。非数字和字母的字符使用%HH(这里HH表示两个十六进制数字,代表该字符的ASCII码)进行转换,
2)控件的"名称/值"对按照它们在文档数据流中出现的顺序列出来。"名称""值"使用"="分割,两个"名称/值"之间使用&隔开。
multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。
数据分成多个部分,每个部分代表一个结构良好的控件,作为文档数据流的一部分,每一个部分都按照它们在文档数据流中出现的顺序依次发送到服务器端,并且,每一部分的边界不会出现在数据中。每一部分有一个content-desposition标题头,它的值的格式是:
Content-Disposition:form-data;name="myControl"
text/plain 空格转换为 "+" 加号,但不对特殊字符编码。
accept-charset 设置服务器端可以处理的字符编码
2)input 基本表单控件
<input type="text">
属性:
type: 控件类型:
text 单行文本框
textarea 多行文本框
password 密码框
checkbox 复选框
radio 单选按钮
submit 提交按钮
reset 重置按钮
file 文件
hidden 隐藏域
image 图像按钮
button 普通按钮
name
控件名称,这个名称将与控件的当前值形参"名称/值"对 一同随表单提交
value
用于设定初始化,可选。
checked
单选框,复选框默认选中属性
size
当前控件的初始宽度,这个宽度以像素为单位。除非控件类型是text,password,这时宽度是整数值,表示字符的数目
maxlength
指定可以输入的字符的最大值。适用于控件类型为text,password。
3)button 按钮控件
<button></button>
属性
name 控件名称
value 控件初始值
type 控件类型
button 普通按钮
submit 提交按钮
reset 重置按钮
图片按钮
<button><img src="" alt=""></button>
4)select 下拉列表或列表
<select name="" id="">
<option value=""></option>
<option value=""></option>
</select>
属性
name: 控件名称
size: 列表框中行的显示数量
multiple: 是否允许多选
如果select元素不包含属性size和属性multiple时,表单类型显示为菜单(组合框)
如果使用了属性size和属性multiple中的任意一个,则表单类型显示为列表框
selected: 默认选中
option 下拉列表选项
属性:
value: 定义控件的初始值。提交表单时,初始值会被提交给服务器。
optgroup 分组选项
<select name="" id="">
<optgroup label="大洋">
<option value="">太平洋</option>
<option value="">大西洋</option>
<option value="">印度洋</option>
</optgroup>
<optgroup label="大海">
<option value="">东海</option>
<option value="">南海</option>
<option value="">渤海</option>
</optgroup>
</select>
4)textarea 多行文本框
属性
name: 控件名称
rows: 定义文本框行数
cols: 定义文本框列数
warp: 是否自动换行。
off 不自动换行
hard自动硬回车换行,换行元素一同被传送到服务器中
soft自动软回车换行,换行元素不会传到服务器中
5)label 为表单控件定义标签
一些表单控件内建有标签,当内建有标签时,一般使用value属性的值作为标签,而另外一些表单控件没有标签,则直接使用文本作为标签来说明控件的意义。每个label元素都要和表单控件关联到一起
<table>
<tr>
<td><label for="username">用户名:</label></td>
<td><input type="text" id="username" name="username"></td>
</tr>
<tr>
<td><label for="passwold">密码:</label></td>
<td><input type="password" id="password" name="password"></td>
</tr>
</table>
6)fieldset 为表单添加结构
一般与legend元素配合使用,fieldset元素可以包含其他的表单控件,在这些表单控件周围画一个方框,而legend元素可以显示一个标签说明被包含的这些表单控件。
7)其他控件特性
disabled 禁用
支持该属性的控件:button,input,optgroup,option,select,textarea
1)禁止的元素不接受焦点
2)禁止的控件的值不与表单一起被提交
readonly 只读
支持该属性的控件:input,textarea
1)可以接受焦点,但是不能被用户修改
2)只读元素的值可以与表单一起被提交。
2,CSS简介
CSS(cascading style sheet,层叠样式表)是描述文档怎么样被呈现的语言,使用CSS可以对HTML文档进行描述。
语法:
1)CSS属性和值之间用冒号分隔
2)CSS属性之间用分号分隔(建议每个属性后都书写分号)
3)CSS的值有多个的时候使用空格分隔
3,CSS在网页中的使用
1)内嵌式 style="css"
每个HTML元素都包含有一个style属性,使用该属性可以直接指定样式
<p style=""></p>
存在问题:
1.不方便修改
2.结构与显示不能很好的分离
3.建议在测试或个别情况下使用
2)嵌入式
CSS样式定义内容位于style元素之间,其type属性必须被定义为text/css
<head>
<style type="text/css">
</style>
</head>
3)外部引用式
可以在多个文档间共享样式表,提高效率;可以改变样式表而无须改变HTML文档。
<head>
<link rel="stylesheet" href="">
<style type="text/css">
@import "style.css";
@import url("style.css");
</style>
</head>
其他样式的导入
@import url(common.css);
4. CSS基本语法规则
选择器{css属性1:css值1; css属性2:css值2;}
1)选择器
用于选择html中的元素
html选择器(标签选择器)
即html标签,任何一个HTML元素的标签名都可以是css的选择器
p{ text-indent:10px} /*段落第一行缩进10像素*/
h1{ color:red}
优先级:
默认情况下,子级通常先继承父级标签属性
如果子级和父级拥有相同的属性,子级优先,就近原则
类选择器的优先级高于标签选择器
类选择器
class属性
.类名(类名不能使用数字开头,不能使用关键字来命名)
.rr{ color :red}
使用class属性来调用类名称
<p class="rr">one</p>
<p class="rr">two</p>
<p class="rr">three</p>
ID选择器
id属性
#id名
#two{background-color:green}
<p class="rr">one</p>
<p id="two" class="rr">two</p>
<p class="rr">three</p>
关联选择器
用一个空格隔开的两个或者多个单一选择器组成的字符串
它们的优先级比单一的选择器大。
table a{color:red}
定义了table中的a样式,而多table外的a样式不做改变
组合选择器
使用逗号,隔开选择器,可以减少样式表的重复声明
h1,h2,h3,h4{color:red}
伪元素选择器
是指对同一个HTML元素的不同状态的一种定义方式
HTML标签:伪元素{}
a:link{} 超链接没有任何动作前的状态
a:hover{} 光标移动到超链接上的状态
a:active{} 选中超链接时的状态
a:visited{}访问过超链接的状态
text-decoration:none 去掉下划线
2)选择器优先级
多个CSS选择器同时作用于同一个html时,声明不同的属性具有继承的关系,如果声明的是相同的属性,则以优先级高的为主。
内嵌式
> 关联选择器(后代,子代,组合(且))
> ID选择器
> 类选择器
> HTML选择器
同级别的后者覆盖前者
就近原则
3)样式
样式是零个或多个以分号分割的【属性名:属性值】列表
4)规则集
选择器 样式
选择器{属性名:属性值;属性名:属性值}
5)注释
/*
注释内容
*/
5. 基本布局
布局顺序
由上至下,由左至右,由内至外
块居中
要居中的块必须小于父级元素
利用margin-left margin-right的自动值来居中
布局级别:
1)行布局级(横排)
2)列布局级(浮动布局)
1.设置浮动 float
任何元素都可以浮动,可以改变普通文档流的排列方式,可以使得块元素在同一行中排列,使我们的布局更加方便,浮动是脱离文档流的,也就是其他元素视而不见。
浮动何时停止?
1. 当遇到一个浮动元素后
2. 当遇到父级元素后
多个盒子都浮动后,就产生了块级元素水平排列的效果
多个浮动元素不会相互覆盖
若包含的容器太窄,无法容纳水平排列的多个浮动元素,那么最后的浮动盒子会向下移动,但如果浮动元素的高度不同,那么它们向下移动时可能会被卡住。
float:
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
2. 清理浮动
clear
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧均不允许浮动元素
margin上下值在行布局时共用,浮动后不再共用
clear 清除浮动对象对当前对象的影响
课堂练习:对newbalance中国官网进行布局
*************************回顾一下*************************
1. HTML
2. 标签
1)块级元素
div
p
h1~h6
列表标签
ul
ol
li
dl
dt
dd
2)行内元素
span
a
img
装饰标签
i
em
b
strong
...
3 标签
a
img
地图
width
height
alt
src
...
table
caption
thead
tbody
tfoot
tr
td
框架
dtd
<frameset rows=",,">
<frame src=".html">
</frameset>
top.html
left.html
center.html
main.html
doctype
head
<frameset>
<frame src="top.html">
</frameset>
1. 表单 样式以及功能
2. 基本布局方式