html表格和表单

知识点一：表格

1、表格标签 table

2、表格的组成 行 tr 单元格 td

3、建立表格步骤

1、建立表格，

2、判断行数和列数

3、用行去包含单元格

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

4、表格的各大属性

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

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

border:表格的边框

width:表格的宽

height:表格的高

6、表格的结构：

标题：caption标签

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

表格主体：tbody标签

7、表格的标题，caption只在表格中使用

8、table布局的缺点：

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

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

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

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

　　　　　　e. 不够语义

知识点二：合并单元格

1、分类：跨行合并rowspan、跨列合并 colspan

2、步骤

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

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

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

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

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

知识点三：表单

1、作用：显示、存储、提交数据

2、组成：表单域、表单标签、提交按钮

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

method:向后提交的方式 get post

表单域：表单中的元素 (包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框)

input控件

1、普通的文本框 type = text

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

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

密码框 :type=post

单选框:type =radio

多选框：type=checkbox

普通按钮：type=button

提交按钮：type=submit

重置按钮：type=reset

2、 value:输入框的值 按钮的值

3、 placeholder：提示信息

4、 默认单选选中 1、checked="checked

2、checked

3、checked=true

5、多选框:默认多选选中 1、checked="checked”

　　　　 2、checked

　　　　 3、checked=true

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

　　　　　　　　　　2、selected

　　　　　　　　　　3、selected=true

7、label标签

label标签为input元素定义标注（标签）。

lable作用：用于绑定一个表单元素,当点击label标签的时候,被绑定的表单元素就会获得输入焦点。

8、textarea控件

如果需要输入大量的信息，就需要用到textarea/textarea标签。通过textarea控件可以轻松的创建多行文本输入框

9、去掉输入框的外轮廓 outline-style:none;