day09

<table>

<thead>

   <tr>

<th>1</th>

   </tr>

</thead>

<tbody>

   <tr>

<td>1</td>

   </tr>

</tbody>

<tfoot>

<tr>

   <td>1</td>

</tr>

</tfoot>

</table>

tr：行

td:列

th:标题

2.表格的划分

行列单元格

3.表格的属性（共13种）

可直接给table标签上添加的：（7种）

1.宽

width="100px"

2.高

height="200px"

3.表格的边框

border="1"

4.表格背景颜色

bgcolor="red"

5.表格边框颜色

bordercolor="yellow"

6.单元格与单元格之间的间距

cellspacing="10px"

7.内容与单元格之间的间距

cellpadding="20px"

<table border="1" bgcolor="red" bordercolor="yellow" cellspacing="10px" cellpadding="20px"></table>

需要tr或者td,th添加的：（4种）

1.文本水平对齐方式

align="center|left|right"

2.文本垂直对齐方式

valign="top|middl|bottom|baseline"

3.行合并

rowspan="n"

rowspan给单元格添加（td）,n要合并的单元格数字，删除要合并的单元格

4.列合并

colspan="n"

colpan给单元格添加（td）,n要合并的单元格数字，删除要合并的单元格

4.补充：css属性

1.单元格与单元格之间的距离

border-spacing: 20px;（table添加）

2.合并相邻单元格边框

border-collapse: collapse|separate;

collapse合并

separate不合并（默认值）

3.单元格宽度是否会随着内容变化而变化

table-layout:auto|fixed;

table-layout:auto；变化

table-layout:fixed；固定

4.空白单元格是否隐藏

empty-cells: show|hide;

show:展示

hide:隐藏

5.标签

1.表格标题

<caption>数字</caption>

2.标题的位置

caption-side: top|bottom|left|right;

top:表格整体上边

bottom:表格整体下边

left|right :火狐浏览器可以识别

3.列分组

<colgroup span="3" bgcolor="red"></colgroup>

span="3" 3列

<colgroup span="3" bgcolor="green"></colgroup>

<col span="4" bgcolor="yellow"></col>

6.组分割线

（添加到table上）

rules="groups|rows|cols|all|none"---------------组分割线

groups--------组分割线

rows----------行分割线

cols----------列分割线

all-----------单元格分割线

none----------无分割线

二、表单

表单分类：

1.单行文本输入框

<input type="text">

2.密码框

<input type="password">

3.单选框

<input type="radio" name="sex">

4.多选框

<input type="checkbox">

不能选中：disabled="disabled" == disabled

默认选中：checked="checked" == checked

5.下拉选项

<select >

   <option value="jisuanji">计算机</option>

   <option value="jiamzhu">建筑</option>

   <option value="kuaiji">会计</option>

   <option value="hanyuyan" selected>汉语言</option>

</select>

默认选中是selected

6.文本域

<textarea cols="30" rows="10"></textarea>

7.按钮

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

<button>按钮button</button>

<input type="button" value="">没有特殊功能的按钮
<button>有跳转功能

8.颜色

<input type="color">

9.文件上传

<input type="file">

10.时间

<input type="date"> -----年月日

<input type="datetime"> ----输入时间

<input type="datetime-local"> -------年月日时分

11.月

<input type="month">

12.周

<input type="week">

11.数字

<input type="number">

12.图像域

<input type="image" src="img/icon_gold.png">

13.隐藏文本

<input type="hidden" value="隐藏内容">

表单属性知识点：

<form name="表单名称" method="post/get" action="路径"></form>

1.单选和多选：可以m默认选中和不选

checked:默认选中

disabled：不能够选中

单选需要注意的点：

必须要写name（name值必须一样）

2.Form中的获取数据的两个方式get和post的区别？

1. get请求通常是从服务器上获取数据，post请求通常表示向服务器提交数据。

2. get请求发送的数据都写在地址栏上，用户可见。而post请求发送的数据用户不可见。

3. get请求不能提交大量的数据，但post可以，因此不要混用。

建议：

1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；

2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；

三、鼠标样式

cursor: pointer;------手指（即为鼠标指向超链接时的样子）

cursor:help;-----------?（鼠标旁边多个小问号“？”）

cursor: wait;-----------加载中（鼠标变漏斗或蓝色转圈圈）

cursor: crosshair;-------十字架（截图时的鼠标状态）

cursor: default;---------默认