表格，表单标签的介绍

表格定义：在HTML文档中写入表格标签，在页面在就会显示添加网络状的图形，通过网络状的图形中的每一个单元格我们可以完成内容上的布局

1.表格完成页面布局的原因

通过把内容填入到单元格对应的位置我们可以完成对内容的排版

2.在页面当中如何制作表格

<table>表格区域：在HTML文件的空间内划出一块专门做表格的区域

<tr>单元行标签：在表格区域内做出一行表格

<td></td>单元格标签：在一行表格内分出列数，有几个td就代表有几个单元格

</tr>

</table>

3.表格标签中的隐藏标签

1.<table>

<thead></thead>表格头标签：作用类似于HTML文档中的head标签

<tbody></tbody>表格体标签：作用类似于HTML文档中的body标签

</table>

2.在实际应用中我们一般不会写

3.但是浏览器中会把表格结构标签生成出来

4.制作表格的思路步骤

5.表格制作的标签属性

table里面的属性

1.cellspacing：表格内单元格之间的距离

2.cellpadding：表格内单元格的内边距

3.width：设置整个表格区域的宽度

4.height：设置整个表格区域的宽度

5.border：当设置了边框属性之后，每个单元格都会有一个1px的边框

表格的外围会根据border设置的实际值来显示边框的粗细

tr，td的属性

align：设置文本内容水平对齐

valign：设置文本内容垂直对齐

colspan：左右单元格合并

rowspan：上下单元格合并

height：设置一行的高度

width：只能设置td的宽度，不能设置tr的宽度

6.合并单元格的套路

1.找到要合并的第一个单元格，写上相应的属性

2.合并几行在属性值为几

3.删除表格里面被合并的标签

表单定义：可以用作用户传输数据的入口的一种标签，原因是表单可以让用户自己填写输入信息

1.form表单域标签

<form></form>

只要制作表单就要写上表单标签，当表单标签内输入的数据不需要发送服务器的时候可以不用写表单标签 

2form表单标签的属性

1action：设置一个路径 用于数据传输

2method：设置传输方式

3enctype：设置表单的工作方式，get post

一般设置一个multipart/form-data就允许传输数据

3input标签

type属性：

1text 单行文本输入框

2password 密码文本输入框

3checkbox 复选框

4radio 单选框

5file 上传文件框 

6color 拾色器

7date 日期

8time 时间

9hidden 隐藏域

10email 电子邮箱输入框

11button 自定义按钮

12reset 重置按钮

13submit 发送按钮

14image 图片按钮 src属性设置图片路径

4button按钮标签

<button type=" "></button>

submit button reset

5select下拉表单标签

option下拉表单项标签

6textarea

<textarea></textarea> 多行文本输入框

有一个小图标可以拉拽输入框 可以设置样式resize：none；则不可拉到

7表单标签的属性

value临时存储表单的传入数据，当表单发送数据时发送的都是value属性里面的值

placeholder：提示信息为该属性的值，一般设置在文本输入框

name：给表单中传输的数据取名

id：设置一个id名

checked：只有一个值 默认勾选一般用于单选或者复选框上

8部分表单标签使用注意事项

单选框设置一个name属性就可以编组

9关于value属性的设置问题

表单标签分为两大类：输入型和选择型

输入型的表单标签我们一般不会设置value

但是选择型的表单标签我们必须要设置一个value属性