表格
1.1table标签
表格的整体包裹元素,有如下属性:
width:指定表格宽度
height:指定表格宽度
border:指定表格边框的宽度,默认是0
cellspacing:指定单元格和单元格之间的距离
cellpading:指定单元格边框和内容之间的距离
1.2表格标题
使用caption标签,caption标签内还可以在嵌套h标签
1.3表格的结构组成
table
thead 表头
tr 行
th 表头单元格
tbody 表格主体
tr 行
td 普通单元格
tfoot 表格注脚
1.4单元格中内容的对齐方式
使用align 属性设置水平对齐方式,值可以选择为left,right,center,
可以给thead,tbody,tfoot进行设置,会对里面包含的单元格都起作用。
可以给tr进行设置,对该行内的单元格起作用
可以给 td,th 进行设置,只对当前设置的单元起作用
使用 valign属性设置垂直对齐方式,值可以选择为top,bottom.middle
可以给thead,tbody,tfoot进行设置,会对里面包含的单元格起作用。
可以给 tr 进行设置,对该行内单元格起作用
可以给td,th进行设置,只对当前设置单元格起作用
1.5设置单元格宽高
给td或者th设置宽度,同列的单元格都会按照设置的宽度,其实是设置列宽
给td th 设置高度,同行的单元格都会按照设置的高度,其实是设置行高
也可以给 tr 设置高度,设置的是行高
1.6跨行跨列
用于定义特殊格式的表格
给td或者th设置colspan用于跨列
给td或者th设置rowspan用于跨行
1.7表格标签总结
| table | 表格 |
width 属性: 设置表格宽度。
heihgt 属性: 设置表格高度。
border 属性: 设置表格边框的宽度,默认值是 0
cellspacing 属性:设置单元格之间的间距
cellpadding 属性: 设置单元格边框与内容的间距
2表单
2.1form标签
form标签是表单的包裹元素,表单中所有的东西都要写在form里面
具有如下属性:
action,指定要提交的地址
method,指定提交方式
target,指定新打开的页面在哪个窗口打开
2.2表单控件
2.2.1文本输入框
<input type="text">
属性 :
type 设置为text
name 属性指定名字
value 属性指定默认值
maxlength 指定输入框最大可输入的长度
2.2.2密码输入框
<input type="password">
属性:
type 设置为 password
name 属性指定名字(向后端提交数据的时候使用)
value 属性指定默认的值
maxlength 指定输入框最大可输入的长度
**2.2.3单选按钮**
<input type="radio">
属性:
type 设置为radio
name 属性指定名字,多个单选按钮要实现单选效果,他们的name属性值要一致。
value 属性指定真正向后端提交的数据
checked,默认选中,使用的时候,不需要给值
**2.2.4复选框**
<input type="checkbox">
属性:
type 设置为 checkbox
name 属性指定名字(向后端提交数据的时候使用)
value 属性指定真正向后端提交的数据
checked 属性,设置默认选中,使用的时候,不需要给值
**2.2.5隐藏域**
<input type="hidden"> 用于向后端提交隐藏信息
属性:
type 设置为 hidden
name 属性指定名字(向后端提交数据的时候使用)
value 属性指定向后端提交的数据
2.2.6提交按钮
<input type="submit" value="提交">
属性:
type 设置为 submit
value 设置按钮上的文字
或者
<button>按钮上的文字</button>
或者
<button type="submit">按钮上的文字</button>
2.2.7重置按钮
<input type="reset" value="重置">
属性:
type 设置为 reset
value 设置按钮上的文字
或者
<button type="reset">按钮上的文字</button>
2.2.8普通按钮
<input type="button" value="按钮">
普通按钮没有任何功能,只有按钮的样子
属性:
type 设置为 button
value 设置按钮上的文字
或者
按钮上的文字
2.2.9文本域
<textarea> </textarea>
属性:
name 属性指定名字(向后端提交数据的时候使用)
rows 指定默认显示的行数,影响到文本域的高度
cols 指定默认显示的列数,影响的文本域的宽度
2.2.10下拉选项
<select name="">
<option value="">选项文字</option>
<option value="">选项文字</option>
<option value="">选项文字</option>
<option value="">选项文字</option>
<option value="">选项文字</option>
</select>
select 的属性:
name 属性指定名字(向后端提交数据的时候使用)
option 的属性:
value 指定真正向后端提交的数据
selected 设置默认选项 (不用给值)