day_11

每天一句: 如果你不能打败对手，那你就加入对手。
一、表单高级

表单字段集

语法:
<fieldset> </fieldset>
说明:
相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象;

字段级标题

语法:
<legend align="left/center/right/justify">个人信息</legend>
说明:
legend元素可以在fieldset对象绘制的方框内插入一个标题,legend元素必须是fieldset内的第一个元素;

上传文件框

语法:
<input type="file" multiple="multiple" />
说明:
type属性值新增的类型有: file文件类型，可进行文件的选择，multiple属性可实现多选；

required属性

语法:
<input type=“text” required=“required”/>
<input type=“text” required />
说明:
设置必填属性，即此项必填项；

二、表格属性

单元格间距(cellspacing)

语法:
border-spacing:value;
说明:
单元格间距(该属性必须给table添加)，表示单元格边框之间的距离，不可取负值;

合并相邻单元格边框

语法:
border-collapse:separate/collapse;
说明:
合并相邻单元格边框(该属性必须给table添加);
separate(边框分开)默认值;
collapse(边框合并);

无内容时单元格的设置

语法:
empty-cells:show/hide;
说明:
定义当单元格无内容时，是否显示该单元格的边框；
show:显示;
hide:隐藏;
【不要使用border-collapse:collapse;否则无效】

显示单元、行和列的算法(加快运行的速度)

语法:
table-layout:auto/fixed; (默认是auto)
说明:
定义表格的布局算法，设置fixed，文本为英文字母且无空格时，内容超出单元格宽度则固定不变；如没设宽则平均分配；设置auto时，则随内容宽度而定;
fixed：固定宽，不会随内容多少改变单元格宽,宽度可以明确定义，没有定义时则宽度会平均分配，高度则会随内容变化;
auto自动表格布局: 优点(灵活)、缺点(较慢，因为要确定布局前要先访问表格中所有数据);
fixed固定表格布局: 优点(加快运行速度，允许浏览器更快的对表格进行布局)、缺点(不太灵活)

设置表格标题的位置

语法:
caption-side：top/right/bottom/left
说明:
定义表格的caption对象放于表格的哪个位置，与caption元素一起使用;
top为默认值;
left,right位置只有火狐识别;
top,bottom IE6以上版本支持，IE6以下版本不支持其它属性值，只识别top;

隔行变色设置

语法:
双数行： tr:nth-child(2n){ }
单数行： tr:nth-child(2n+1){ }
说明:
设置单数单元格的样式和双数单元格的样式

数据行分组

<thead></thead> 表头
<tbody></tbody> 表体
<tfoot></tfoot> 表尾
说明：一个Table中，只能包含一个thead,一个tfoot,但可包含多个tbody;

备注：
thead 元素应该与 tbody 和 tfoot 元素结合起来使用;
tbody 元素用于对 HTML 表格中的主体内容进行分组， tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组;
如果要使用 thead、tfoot 以及 tbody 元素，就必须使用全部的元素;
它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了;