Skr-Eric的HTML课堂（三）——HTML的表格标签和表单

表格标签

1. 语法 ：

1. 标签介绍：

表格标签 : <table></table>

行标签 ：<tr></tr>  (table row)

单元格标签 ：<td></td> (table data)

2. 创建顺序 ：

1. 创建表格标签 <table></table>

2. 表格中创建行，每一行就是一个tr

3. 在行中创建单元格存放数据，每一个单元格对应一个td

 

2. 标签属性 ：

1. table 的标签属性

1. border : 设置表格边框，取值为像素值

2. bgcolor : 设置表格背景颜色，取值颜色的英文单词

3. width : 设置表格宽度，取值像素值

4. height : 设置表格高度，取值为像素值

5. align : 表格的水平对齐方式，取值 left center right

6. cellspacing : 取值为像素值，用来设置单元格的

外边距。（单元格与单元格之间，或

单元格与表格边框之间的距离）

7. cellpadding : 取值像素值，表示单元格的内边距（

单元格内容与单元格边框之间的距离）

2. tr 标签属性

1. bgcolor : 设置行背景颜色

2. align : 设置内容水平对齐方式 left/center/right

3. valign : 设置内容垂直对齐方式 top/middle/bottom

默认水平居左，垂直居中

3. td 标签属性

1. bgcolor : 设置单元格的背景颜色

2. width : 设置单元格的宽度

3. height : 设置单元格的高度

4. align : 设置单元格内容的水平对齐方式

5. valign : 设置单元格内容的垂直对齐方式

 

3. 单元格合并 ：（重点）

涉及单元格跨行或跨列合并的属性 rowspan colspan,

是单元格独有的属性

1. 单元格的跨行合并

从当前单元格开始，向下合并几行

<td rowspan="3"></td> 包含自身在内，向下合并

单元格，最终占据三个单元格的位置

2.  单元格的跨列合并

从当前单元格开始，向右合并几个单元格

<td colspan="3"></td> 包含自身在内，向右合并单元格

最终占据三个单元格的位置

注意 ：一旦发生单元格合并，要时时调整表格结构，

保证表格结构的完整 （5*5）

发生跨行合并，要删除后续行中多余的单元格

发生跨列合并，要删除当前行中多余的单元格

 

4. 表格结构 ：

行分组 ：允许将表格中的若干行划分为一组，便于管理

语法 ：

1. 表头行分组

<thead>

<tr>

<td></td>

</tr>

</thead>

2. 表格尾部

<tfoot>

<tr>

<td></td>

</tr>

</tfoot>

3. 表格主体

<tbody>

<tr>

<td></td>

</tr>

</tbody>

注意 ：表格的结构化标签 <thead>、<tfoot>、<tbody>

可以省略，如果省略，所有的行和单元格会被

自动添加到tbody中，作为表格主体信息

如果涉及到行分组，需要添加结构标签，建议

按照 <thead> <tfoot> <tbody>的顺序书写

 

表单

1. 用于接收用户输入的数据，并提交给服务器

表单的二要素 ：

1. 表单标签 <form></form>

收集用户信息，并且提交给服务器

2. 表单控件 ：（重点）

提供一组可以跟用户交互的可视化组件

 

2. form 元素

1. form本身不可见的，但是不能省略，因为数据的提交

功能要由form实现

2. 语法 ：

 <form>

表单控件

 </form>

3. 标签属性

<form action="" method=""></form>

1. action : 设置数据的提交地址

2. method : 数据提交的方式 get post 默认以get方式提交

1. get 请求 ：

默认的提交方式，常用于向服务器获取数据

特点 ：

1. 如果是提交数据，数据会以参数的形式

拼接在URL后面

2. 安全性较低

3. 数据的大小有限制，最大为2KB

2. post 请求

常用于向服务器发送数据

特点 ：

1. 隐式提交，外部看不到数据，数据会被

打包存在请求体中发送

2. 安全性高

3. 数据大小没有限制的

 

3. 表单控件

分类 ：

1. 文本框和密码框

<input type="text"> 普通文本输入框

<input type="password"> 密码框

属性 ：

1. name 属性，必填项，定义控件名称，缺少

则无法提交当前的数据

2. placeholder : 设置提示文本

3. maxlength : 设置最大输入长度

4. value : 设置当前输入框的值，在text password中不常用

 

2. 单选按钮与复选框

<input type="radio" name="" value=""> 单选钮

<input type="checkbox" name="" value="">复选框

属性 ：

1. name : 除了定义控件名称之外，

还具有分组的作用，一组按钮中的

name属性值必须保持一致

2. value ：必须给，设置按钮对应的值

3. checked ：默认选中

 

3. 隐藏域与文件选择框

1. <input type="hidden" name="uid" value="00001">隐藏域

隐藏域本身不可见，用于隐式传递用户相关的信息

2. 文件选择框

<input type="file" name="">

 

3. 下拉选择框

<select name="province">

<option value="hebei">河北</option>

</select>

 

4. 文本域

支持用户多行输入

<textarea name="uinfo" cols="" rows=""></textarea>

属性 ：

1. name 控件名称

2. cols 指定文本域默认显示的列数，一行能显示的英文

字符数量，中文字符减半

3. rows 指定文本域默认显示的行数

注意 ：文本域是可以由用户调整大小的

 

5. 按钮

1. 提交按钮

<input type="submit" name="submit" value="">

属性 ：type = "submit" 设置按钮类型为提交

value 用来设置按钮的显示文本

作用 ：将表单中的数据提交给服务器

2. 重置按钮

<input type="reset" value="">

作用 ：将表单控件的值，重置为初始状态

3. 普通按钮

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

可以绑定自定义事件

4. 特殊按钮

<button>登录</button>

注意 ：<button>标签如果放在form中使用，作用跟

提交按钮是一致的，都会将表单中的数据发送给

服务器

<button>标签不局限于form中使用，在任何地方

都可以使用，表示按钮，但是如果放在form外部，

需要绑定自定义事件

 

6. lable for ID

1. 使用label标签包含要显示的文本

2. 为label标签添加for属性，属性值与要绑定的控件的id

属性值保持一致

 

 

 

想要看更多的课程请微信关注SkrEric的编程课堂