HTML5表单及表格高级讲解

目录

一、表单标签及属性高级

二、表格标签及属性高级

一、表单标签及属性高级

 1.1 表单字段集     fieldset>
    /fieldset>
         相当于一个方框，在字段集中可以包含文本和其他元素。     该元素用于对表单中的元素进行分组并在文档中区别标出文本。     fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。     disabled定义空间禁制可用 1.2 字段集标题     legend>
    /legend>
         legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素。 1.3 提示信息标签     label for="绑定控件id名">
    /label>
         label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。 1.4 上传文件框     input tyPE="file" multiple="multiple" />
         type属性值新增的类型有：file文件类型，可进行文件的选择，multiple属性可实现多选 1.5 图像域     input  name="图像域的名称"  type="image"  src="图像域的地址"/>
    

二、表格标签及属性高级

 2.1 单元格间距     border-spacing:value;
         单元格间距(该属性必须给table添加)表示单元格边框之间的距离，不可取负值 2.2 合并相邻单元格边框     border-collapse:separate/collapse     作用：合并相邻单元格边框(该属性必须给table添加)     separate(边框分开)默认值     collapse(边框合并) 2.3 无内容时单元格的设置     empty-cells:show/hide;
         定义当单元格无内容时，是否显示该单元格的边框     show：显示；hide：隐藏 2.4 显示单元格、行和列的算法（加快运行速度）     table-layout:auto/fixed     定义表格的布局算法，设置fixed，文本为英文字母且无空格时，内容超出单元格宽度则固定不变；如没设宽则平均分配     设置auto时，则随内容宽度而定；     设置fixed时，固定宽，不会随内容多少改变单元格宽,宽度可以明确定义，没有定义时则宽度会平均分配，高度则会随内容变化 2.5 设置表格标题     caption>
    标题内容/caption>
     表格标题位置：caption-side:top/right/bottom/left     left right位置只有火狐识别     top bottom IE6以上版本支持     ie6以下版本不支持其它属性值，只识别top 2.6 隔行变色设置     双数行：tr:nth-child(2n){
 }
     单数行：tr:nth-child(2n+1){
 }
         设置单数单元格的样式和双数单元格的样式

 2.7 数据列分组     colgroup span="value">
    /colgroup>
         col span="value" />
         col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。     span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组。     可以通过给table添加rules="groups"属性来给分组列添加组的分割线。     注意：虽然col和colgroup具有相同的功能，但是，我们只能使用colgroup元素来设置表格内容部分分割线（rules）应该处于的位置，而col没有这个功能。 2.8 th:定义表格内的表头单元格     HTML 表单中有两种类型的单元格：表头单元格-包含表头信息（由 th 元素创建）     标准单元格-包含数据（由td元素创建）     th 元素内部的文本通常会呈现为居中的粗体文本，而td元素内的文本通常是左对齐的普通文本。 2.9 数据行分组     thead>
    /thead>
     表头     tbody>
    /tbody>
     表体     tfoot>
    /tfoot>
     表尾     说明：一个table中，只能包含一个thead,一个tfoot,但可包含多个tbody         thead 元素应该与 tbody 和 tfoot 元素结合起来使用。         tbody 元素用于对 HTML 表格中的主体内容进行分组， tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。         它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。必须在table元素内部使用这些标签。         提示：在默认情况下这些元素不会影响到表格的布局。不过，可以使用 CSS 使这些元素改变表格的外观。     详细描述：     thead、tfoot 以及tbody元素使我们有能力对表格中的行进行分组。     当创建某个表格时，也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。     这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。     当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

目录

一、表单标签及属性高级

二、表格标签及属性高级

一、表单标签及属性高级

 1.1 表单字段集     fieldset>
    /fieldset>
         相当于一个方框，在字段集中可以包含文本和其他元素。     该元素用于对表单中的元素进行分组并在文档中区别标出文本。     fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。     disabled定义空间禁制可用 1.2 字段集标题     legend>
    /legend>
         legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素。 1.3 提示信息标签     label for="绑定控件id名">
    /label>
         label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。 1.4 上传文件框     input type="file" multiple="multiple" />
         type属性值新增的类型有：file文件类型，可进行文件的选择，multiple属性可实现多选 1.5 图像域     input  name="图像域的名称"  type="image"  src="图像域的地址"/>
    

二、表格标签及属性高级

 2.1 单元格间距     border-spacing:value;
         单元格间距(该属性必须给table添加)表示单元格边框之间的距离，不可取负值 2.2 合并相邻单元格边框     border-collapse:separate/collapse     作用：合并相邻单元格边框(该属性必须给table添加)     separate(边框分开)默认值     collapse(边框合并) 2.3 无内容时单元格的设置     empty-cells:show/hide;
         定义当单元格无内容时，是否显示该单元格的边框     show：显示；hide：隐藏 2.4 显示单元格、行和列的算法（加快运行速度）     table-layout:auto/fixed     定义表格的布局算法，设置fixed，文本为英文字母且无空格时，内容超出单元格宽度则固定不变；如没设宽则平均分配     设置auto时，则随内容宽度而定；     设置fixed时，固定宽，不会随内容多少改变单元格宽,宽度可以明确定义，没有定义时则宽度会平均分配，高度则会随内容变化 2.5 设置表格标题     caption>
    标题内容/caption>
     表格标题位置：caption-side:top/right/bottom/left     left right位置只有火狐识别     top bottom IE6以上版本支持     ie6以下版本不支持其它属性值，只识别top 2.6 隔行变色设置     双数行：tr:nth-child(2n){
 }
     单数行：tr:nth-child(2n+1){
 }
         设置单数单元格的样式和双数单元格的样式

 2.7 数据列分组     colgroup span="value">
    /colgroup>
         col span="value" />
         col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。     span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组。     可以通过给table添加rules="groups"属性来给分组列添加组的分割线。     注意：虽然col和colgroup具有相同的功能，但是，我们只能使用colgroup元素来设置表格内容部分分割线（rules）应该处于的位置，而col没有这个功能。 2.8 th:定义表格内的表头单元格     HTML 表单中有两种类型的单元格：表头单元格-包含表头信息（由 th 元素创建）     标准单元格-包含数据（由td元素创建）     th 元素内部的文本通常会呈现为居中的粗体文本，而td元素内的文本通常是左对齐的普通文本。 2.9 数据行分组     thead>
    /thead>
     表头     tbody>
    /tbody>
     表体     tfoot>
    /tfoot>
     表尾     说明：一个table中，只能包含一个thead,一个tfoot,但可包含多个tbody         thead 元素应该与 tbody 和 tfoot 元素结合起来使用。         tbody 元素用于对 HTML 表格中的主体内容进行分组， tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。         它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。必须在table元素内部使用这些标签。         提示：在默认情况下这些元素不会影响到表格的布局。不过，可以使用 CSS 使这些元素改变表格的外观。     详细描述：     thead、tfoot 以及tbody元素使我们有能力对表格中的行进行分组。     当创建某个表格时，也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。     这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。     当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！