文章目录
回顾表单
表单的组成：
表单域：
<form name=“” method=“” action=“ "></form>
表单控件 ：
<input type="text" value=""/> 文本
<input type="password" value=""/> 密码
<input type="button" value=""/> 空按钮
<input type="submit" value=""/> 提交
<input type="reset" value=""/> 重置
<input type="checkbox" checked="checked" disabled="disabled"/> 复选按钮
<input type="radio" name="rel"/> 单选按钮
html基础
表单
隐藏
<input type="hidden" name"">```
## 表单----内联可置换元素
表单----内联可置换元素
表单域下拉列表（菜单）
语法：
<select >
<option>下拉选项1</option>
<option>下拉选项2</option>
</select>
表单多行文本域定义：
语法：
<textarea name="" cols="" rows="" > </textarea>
说明：
多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。 阻止浏览器对窗口的拖动设置:{resize:none;}（css属性）
高级表单应用
表单字段集
语法：<fieldset></fieldset>
说明：
相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。disabled定义空间禁制可用；
字段集标题
语法：<legend align="left/right/center"></legend>
说明：
legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素
提示信息标签
语法：<label for="绑定的id名字"></label>
说明:
label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。
上传文件框
语法：<input type="file"/>
说明：type属性值新增的类型有：file文件类型，可进行文件的选择
新增表格应用
表格的基本结构：
<table>
<tr>
<td></td>
</tr>
</table>
1、cellspacing="单元格与单元格之间的间距"
2、cellpadding=“单元格与内容之间的距离"
3、align="表格水平对齐方式" 取值：left、right、center、 valign=“垂直对齐” top\bottom\middle
4、合并单元格属性：(td) 合并列： colspan=“所要合并的单元格的列数" 合并行： rowspan=“所要合并单元格的行数”
高级表格应用
单元格间距
语法:border-spacing:value
说明：
单元格间距(该属性必须给table添加)
表示单元格边框之间的距离
不可取负值
合并相邻单元格表框
语法：border-collapse:separate/collapse;
说明：
作用：合并相邻单元格边框 (该属性必须给table添加)
separate(边框分开)默认值；
collapse(边框合并)
无内容时单元格的设置
语法：empty-cells:show/hide;
说明：定义当单元格无内容时，是否显示该单元格的边框区域； show：显示 ；hide：隐藏；
显示单元格行和列的算法（加快运行的速度）
语法：table-layout:auto/fixed
说明：
自动表格布局：列的宽度是由列单元格中没有折行的最宽的内容设定的。
缺点：较慢（因为它需要在确定最终的布局前访问表格中的所有内容）。
优点：灵活 固定表格布局 优点：加快运行的速度,允许浏览器更快的对表格进行布局。 缺点:不太灵活
表格列标题
语法：<th></th>列标题
说明：
th标记表示表格内的表头单元格,是单元格标题；
caption标记表示表格的名称，也叫表格标题。
设置表格标题的位置
caption-side:top/right/bottom/left
说明：
定义表格的caption对象放于表格的哪个位置，与caption对象一起使用；
top为默认值；
left,right位置只有火狐识别，
top,bottom IE6以上版本支持，IE6以下版本不支持其它属性值，只识别top;
数据行分组
<thead></thead>表头
<tbody></tbody>表体
<tfoot></tfoot>表尾
说明：一个Table中，只能包含一个thead,一个tfoot,但可包含多个tbody
thead 元素应该与 tbody 和 tfoot 元素结合起来使用。 tbody 元素用于对 HTML 表格中的主体内容进行分组， tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。 如果要使用 thead、tfoot 以及 tbody 元素，就必须使用全部的元素。
提示：在默认情况下这些元素不会影响到表格的布局。不过，可以使用 CSS 使这些元素改变表格的外观。 详细描述： thead、tfoot 以及 tbody 元素使我们有能力对表格中的行进行分组。当创建某个表格时，也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。
数据列分组
<colgroup span="value"></colgroup>双标签
<col span="value" />单标签
说明：
1）col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。
2）span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组。
Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性
3）可以通过给table添加rules="groups"属性来给分组列添加组的分割线。