<table border="1">

<!-- 表格标题 -->

<caption>学生信息</caption>

<!-- 表格头部 -->

	<thead>
	
		<tr>
		
			<th>姓名</th>
			
			<th>性别</th>
			
			<th>年龄</th>
			
			<th>民族</th>
			
			<th>政治面貌</th>
		
		</tr>
	
	</thead>

<!-- 表格主体 -->

	<tbody>
	
		<tr>
		
			<td>张三</td>
			
			<td>男</td>
			
			<td>18</td>
			
			<td>汉族</td>
			
			<td>团员</td>
		
		</tr>
		
		<tr>
		
			<td>李四</td>
			
			<td>女</td>
			
			<td>20</td>
			
			<td>满族</td>
			
			<td>群众</td>
			
		</tr>
		
		<tr>
		
			<td>王五</td>
			
			<td>男</td>
			
			<td>20</td>
			
			<td>回族</td>
			
			<td>党员</td>
		
		</tr>
		
		<tr>
		
			<td>赵六</td>
			
			<td>女</td>
			
			<td>21</td>
			
			<td>壮族</td>
			
			<td>团员</td>
		
		</tr>
	
	</tbody>

<!-- 表格脚注 -->

	<tfoot>
	
		<tr>
		
			<td></td>
			
			<td></td>
			
			<td></td>
			
			<td></td>
			
			<td>共计：4人</td>
		
		</tr>
	
	</tfoot>

</table>

6.1、常用属性

table:

width：设置表格宽度

height：设置表格高度

border：设置表格边框宽度

cellspacing：设置单元格之间的间距

thead：

height：设置表格头部的宽度

align：设置单元格水平对齐的方式

valign：设置单元格的垂直对齐方式

top：顶部对齐

middle：中间对齐

bottom：底部对齐

tbody、tr、tfoot（和thead相同）

td：

width：设置单元格宽度：同列所有单元格都会被影响

height：设置单元格高度，同列所有单元格都会被影响

align：设置水平对齐方式

valign：设置垂直对齐方式

rowspan：指定要跨的行数

colspan：指定要跨的列数

th和td相同

6.2、border-collapse

的属性值被定义为一个单独的关键词，可为下面两个值中的一个。

有两个值

collapse

相邻的单元格共用同一条边框（采用 collapsed-border 表格渲染模型）。

separate

默认值。每个单元格拥有独立的边框（采用 separated-border 表格渲染模型）。

七、br 换行 hr分隔 pre按原文显示

八、表单

form:
action：指定表单提交的地址
target：打开方式
method：提交方式
input：
type：输入框类型
name：提交指定数据的名字
button：
type：默认值为submit

8.1、常用表单控件：

1、文本输入框：type=“text”

name：数据的名称

value：默认输入的值

maxlength：最大输入长度

2、密码输入框：type=“password”

name：数据的名称

value：默认输入的值

maxlength：最大输入长度

3、单选框 type=“radio”

name：做到单选效果，需要多个radio的name值保持一致

value：提交的数据值

checked：默认选中

4、复选框 type=“checkbox”

name：数据的名称

value：提交的数据值

checked：默认选中

5、隐藏域 type=“hodden”

用户不可见，一般用于表单提交时，携带一些固定的数据

name：数据的名称

value：指定真正提交的数据

6、提交按钮 type=“submit”

<input type="submit" value="点我提交表单">

<button>点我提交表单</button>

value：指定按钮文字

7、重置按钮 type=“reset”

<input type="reset" value="点我重置">

<button type="reset">点我重置</button>

8、普通按钮

<input type="button" value="普通按钮">

<button type="button">普通按钮</button>

9、文本域

<textarea name="msg" rows="22" cols="3">文本</textarea>

rows 指定显示的行数

cols 指定显示的列数

name：数据的名称

value：默认输入的值

maxlength：最大输入长度

10、下拉框

<select name="from">
<option value="黑"> </option>

</select>

name：指定数据名

option标签中的value属性，如果设置了value属性，提交的就是value属性，如果没设置，提交的则是option中间的文本

selected：默认被选中

8.2、禁用表单控件

使用disabled属性

input textarea button select option 都可以设置

8.3、label标签

label 可与表单控件相关联，关联后的点击文字，相对的表单控件就会获得聚焦

两种关联方式：

1.让label标签的for属性值等于表单控件的id

2.把表单控件套在label中

8.4、fieldset与legend

fieldset为表单控件分组

legend为分组表单的标题

<fieldset>
	<legend>主要信息</legend>
		<label for="zhanghu">账户：</label>
			<input id="zhanghu" type="text" name="account" maxlength="10"><br>
		<label>
			密码：
			<input id="mima" type="password" name="pwd" maxlength="6">
		</label>
			<br>
			性别：
			<input type="radio" name="gender" value="male" id="nan">
			<label for="nan">男</label>
		<label>
			<input type="radio" name="gender" value="female" id="nv">女
		</label>
</fieldset>

九、框架标签

iframe：（双标签）

name：框架名字与超链接或者表单的target配合，展示不通的内容

width：框架的宽度

height：框架的高度

frameborder：是否显示边框，值：0 或者 1