html5新增表单属性

1、表单字段集:

<fieldset></fieldset>

相当于一个方框,在字段集中可以包含文本和其他元素。
该元素用于对表单中的元素进行分组并在文档中区别标出文本。
fieldset元素可以嵌套,在其内部可以在设置多个fieldset对象。
disabled定义空间禁制可用

2、字段级标题:

<legend></legend>

legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素。

3、提示信息标签:

<label for="绑定控件id名"></label>

label元素用来定义标签,为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上,可以将label元素的for属性设置为与该控件的id属性值相同。

4、上传文件框:

<input type="file" multiple="multiple" />

type属性值新增的类型有:file文件类型,可进行文件的选择,multiple属性可实现多选

5、图像域:
<input name="图像域的名称" type="image" src="图像域的地址"/>

一) 表格标签及属性高级**

1、单元格间距:

border-spacing:value; 

单元格间距(该属性必须给table添加)
表示单元格边框之间的距离,
不可取负值

2、合并相邻单元格边框:

border-collapse:separate/collapse;

作用:合并相邻单元格边框
(该属性必须给table添加)
separate(边框分开)默认值;
collapse(边框合并)

3、无内容时单元格的设置:

empty-cells:show/hide;

定义当单元格无内容时,是否显示该单元格的边框;
show:显示 ;hide:隐藏;

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

table-layout:auto/fixed;

定义表格的布局算法,设置fixed,文本为英文字母且无空格时,内容超出单元格宽度则固定不变;如没设宽则平均分配;设置auto时,则随内容宽度而定;
(fixed:固定宽,不会随内容多少改变单元格宽,宽度可以明确定义,没有定义时则宽度会平均分配,高度则会随内容变化)

5、设置表格标题:

<caption>标题内容</caption>

caption:表格标题
表格标题位置:caption-side:top/right/bottom/left
说明:left,right位置只有火狐识别,top,bottom IE6以上版本支持,ie6以下版本不支持其它属性值,只识别top;

6、隔行变色设置:
双数行: tr:nth-child(2n){ }
单数行: tr:nth-child(2n+1){ }
设置单数单元格的样式和双数单元格的样式
Html5新增

二)、表格布局元素

表格 描述

定义表格
定义表格的行
定义表格的页眉
定义表格的主体
定义表格的页脚
定义用于表格列的属性
定义表格列的组
定义表格标题
定义表格列标题
定义表格单元

1、html重要属性:

1)colspan=”value” 合并列
2)rowspan=”value” 和并行
3)valign=”top/bottom/middle/baseline” 垂直对齐方式
4)rules=”groups/rows/cols/all/none” 添加组分隔线
说明:
rows:位于行之间的线条
cols:位于列之间的线条
all:位于行和列之间的线条
none:没有线条
groups:位于行组和列组之间的线条
rules 属性无法在 Internet Explorer、Chrome 或者 Safari 中正确地显示。

2、数据列分组
(1)
(2)

说明:
1)col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。
2)span属性显示指定相邻几列组成一组,span属性值默认为1,默认时仅定义一列为一组。
3)可以通过给table添加rules=”groups”属性来给分组列添加组的分割线。

注意:虽然col和colgroup具有相同的功能,但是,我们只能使用colgroup元素来设置表格内容部分分割线(rules)应该处于的位置,而col没有这个功能。
th:定义表格内的表头单元格。

HTML 表单中有两种类型的单元格:
表头单元格 - 包含表头信息(由 th 元素创建)
标准单元格 - 包含数据(由 td 元素创建)
th 元素内部的文本通常会呈现为居中的粗体文本,而 td 元素内的文本通常是左对齐的普通文本。

3、数据行分组

表头

表体

表尾

说明:一个table中,只能包含一个thead,一个tfoot,但可包含多个tbody。

说明:
thead 元素应该与 tbody 和 tfoot 元素结合起来使用。
tbody 元素用于对 HTML 表格中的主体内容进行分组, tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组。

它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。必须在 table 元素内部使用这些标签。
提示:在默认情况下这些元素不会影响到表格的布局。不过,可以使用 CSS 使这些元素改变表格的外观。

详细描述:
thead、tfoot 以及 tbody 元素使我们有能力对表格中的行进行分组。当创建某个表格时,也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值