HTML基础（二）

目录
1.使用HTML表格
2.HTML框架结构
3.HTML表单设计

1.1 表格中常用标签

表格的基本语法

1.2 表格标签常见属性
table标签属性:
width – 代表表格的宽度
height – 代表表格的高度
border – 代表表格边框(此属性应该使用CSS实现)
cellspacing – 代表表格边框与表格内容填充的距离,也是内容填充之间的距离(此属性应该使用CSS实现)
cellpadding – 代表内容填充的宽度(此属性应该使用CSS实现)
th、td标签属性：
width与height – 代表宽度与高度
colspan – 一行跨越多列
rowspan – 一列跨越多行
align – 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify)(此属性应该使用CSS实现)
valign – 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)
tr标签属性：
align与valign具体解释详见上面。

如何使用填充、间距属性


综合示例

效果图

3.HTML表单设计

3.1 HTML的form标签
3.2 HTML的input标签(input的类型)
3.3 HTML的textarea标签
3.4 HTML的select标签

3.1 HTML的form标签

问：网站怎样与用户进行交互? 答案:使用HTML表单(form).
表单是可以把浏览者输入的数据传送到服务器端的程序(比如PHP,JSP)的HTML元素,服务器端程序可以处理表单传过来的数据,从而进行一些作,比如登录系统或者注册系统等.

form 标签 – 代表HTML表单
form标签是成对出现的,以开始,以结束
常用属性.
action – 浏览者输入的数据被传送到的地方,如一个jsp页面(dofm.jsp)
method – 数据传送的方法
get – 此方式传递数据量少,但是传递的信息显示在网址上。(2KB)
post --此方式传送信息多,而且不会把传递信息显示在网址上

3.2 HTML input标签

input 标签 – 代表HTML表单的单行输入域,如:输入用户名的输入框
input标签是单独出现的,
属性.
type – 代表一个输入域的显示方式(分为输入型,选择型,点击型)
name – 此表单项名称
value – 输入域的值
size – 输入域的长度
maxlength – 输入域最多可以输入文字的长度 (个数)
checked – 如果是选择型的输入域,代表已经被选择，值为checked
readonly – 输入域可以选择,但是无法修改 ，值为readonly
disabled – 输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用。如：disabled=“disabled” 并且如果加在input标签中的话,数据传递的时候,就不会再自动生成该标签的键值对传递
tabindex – 输入域的"tab"键遍历顺序,值越低,越优先 ,最小1
src – 当使用图片来表示按钮时,代表图片的位置(URI)
alt – 用来替换提交按钮的图片(当在input的src属性定义的图片无法显示时)提示信息。
Type :
type属性 – 代表HTML表单,单行输入域(框)的表现方式
type属性取值:
text – 文字输入域(输入型)
password – 也是文字输入域,但是输入的文字以密码符号’*'显示(输入型)
file – 可以输入一个文件路径(输入型)
checkbox – 复选框.可以选择零个或多个(选择型)
radio – 单选框.只可以选择一个而且必须选择一个(选择型)
hidden – 代表隐藏域,可以传送一些隐藏的信息到服务器
button – 按钮(点击型) (有提交功能,会把所有的表单一起提交)
image – 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src属性)(点击型)
submit – 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性来显示按钮上的文字(点击型)
reset – 重置按钮,可以把表单中的信息清空(点击型)

3.3 HTML的textarea标签

textarea 标签 --代表HTML表单多行输入域,如:自我评价的多行输入框
此标签是成对出现的,即以开始,以结束
属性：
cols – 多行输入域的列数
rows – 多行输入域的行数
name – 此表单项名称
readonly 输入域可以选择,但是无法修改
tabindex 输入域,使用"tab"键的遍历顺序 值越低,越优先 ,最小1

3.4 HTML的select标签

select 标签 – 选择列表标签,比如选择城市,选择省份等
此标签是成对出现的,即以开始,以结束
此标签中,每一对option 代表一个选项,如选择省份中的河北
属性：
name – 表单项名称
size – 选择域的高度
multiple – 可以选择多个
readonly 输入域可以选择,但是无法修改
tabindex 输入域,使用"tab"键的遍历顺序 值越低,越优先 ,最小1

option 标签 – 代表选择列表中的一个选项
此标签是成对出现的,即以开始,以结束,标签中间为选项的内容值
属性：
value - 说明选项的值
selected - 默认选择该选项
tabindex 输入域,使用"tab"键的遍历顺序 值越低,越优先 ,最小1

表单包含的控件