html表格与表单

一、表格

什么是表格？表格是较为常用的一种标签，但不是用来布局，常用来处理、显示表格式数据。
表格标签 table
表格的组成行 tr 单元格 td
建立表格步骤

　　　　　　　　1、建立表格，

　　　　　　　2、判断行数和列数

　　　　　　　3、用行去包含单元格

　　　　　　　4、在每个单元格中去添加内容

表格的各大属性

　　　　cellspacing：边框与边框之间的距离

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

　　　　Border:表格的边框(默认边框值为“0”)

　　　　表格的宽

　　　　height:表格的高

表格的结构：

　　　　标题：caption标签

　　　　表头：thead标签表格的第一行，一般用来描述每一列所显示的内容，用thead标签讲第一行包起来，然后用th替换td，单元格中的内容相对于单元格水平居中，且加粗

　　　　表格主体：tbody标签

表格的标题，caption只在表格中使用(紧随table之后)
表格的缺点：

　　　　　　a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。

　　　　　　b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td

　　　　　　c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱

　　　　　　d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。

　　　　　　e. 不够语义

二、合并单元格

分类：跨行合并（rowspan）、跨列合并（colspan）
步骤

　　　　 1、判断是跨行合并还是跨列合并

2、跨行合并用rowspan属性，跨列合并用colspan属性

3、将属性写在需要合并的单元格上

4、将合并的行数或者列数写在对应的属性值中

5、将多余的单元格注释掉

三、表单元素

什么是表单：表单是一块可采集用户数据的区域
作用：显示、存储、提交数据
组成：表单标签、表单域、提交按钮

　　　　表单标签：action:表单向后台提交的地址

method:向后提交的方式 get post

name: 指定表单名称，以区分同一页面多个表单

　　　　表单域：表单中的元素其中包含了文本框、密码框、隐藏域、多行文本框、

　　复选框、单选框、下拉选择框和文件上传框

　　 input控件

　　获取焦点：光标放在输入框内，可以打出文字

　　单击指定的名字获取焦点则需要将label标签中的属性值与input输入框的属性值保持一级即可

　　type: 设置文本框类型

　　value:输入框的值 , 表示发送到服务器的值

　　name: 表示发送到服务器的键名

　　placeholder：文本提示信息

　　普通的文本框 type = text

　　密码框 :type=post

　　单选框:type =radio

　　多选框：type = checkbox

　　普通按钮：button

　　提交按钮：submit

　　重置按钮：reset

　　图片按钮：image

　　单选框、多选框的默认选中

1、checked="checked

2、checked

3、checked=true

　　选择框默认选中1、selected=”selected”

2、selected

3、selected=true

多行文本标签：textarea

下拉菜单： select标签

</select>