新手前端HTML笔记 知识点(2)

接上文https://blog.csdn.net/IDtangjiasanshao/article/details/102964855

html新手前端笔记 知识点

表单标签及属性补充

表单字段集

语法：<fieldset disabled="disabled"></fieldset>

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

1.2 字段级标题

语法：<legend align="left/center/right"></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 type="image" src="" width="" height="" alt="图片" /> 说明：火狐低版本不支持此表单元素;

2. 表格标签及属性补充

回顾： 表格的作用：显示数据;

表格的基本结构：

<table>
    <tr>
        <td></td> 
    </tr>
</table>

2.1 单元格间距 border-spacing

语法：border-spacing:value;

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

2.2 合并相邻单元格边框 border-collapse

语法：border-collapse:separate/collapse;

说明：合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并)

2.3 无内容 empty-cells

语法：empty-cells:show/hide;

说明：定义当单元格无内容时，是否显示该单元格的边框区域；show：显示 ；hide：隐藏；

2.4 定义表格布局 table-layout

语法：table-layout:auto/fixed;

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

2.5 隔行变色

双数行： tr:nth-child(2n){ } even
(偶数) 单数行：tr:nth-child(2n+1){ } odd
奇数 设置单数单元格的样式和双数单元格的样式

2.6 表格标题

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

2.7 HTML 重要属性

1）colspan="value" 合并列
2）rowspan="value" 和并行
3）valign="top/bottom/middle/baseline" 垂直对齐方式
4）rules="rows/cols/all/none" 添加组分隔线
说明：
rows:位于行之间的线条
cols:位于列之间的线条
all：位于行和列之间的线条
none:没有线条

2.8 数据列分组

 <colgroup span="value"></colgroup>

<col span="value" />

说明：

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

注意：虽然col和colgroup具有相同的功能，一个是单标签一个是双标签，两个都存在浏览器兼容问题。

2.9 数据行分组

<thead></thead> 表头

<tbody></tbody> 表体

<tfoot></tfoot> 表尾

说明：一个Table中，只能包含一个thead,一个tfoot,但可包含多个tbody。
thead 元素应该与 tbody 和 tfoot 元素结合起来使用。 tbody 元素用于对 HTML 表格中的主体内容进行分组， tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

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

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

2.6 表格标题

标题内容 capt ion:表格标题 表格标题位置：caption-side:top/right/bottom/left 说明：left,right位置只有火狐识别，top,bottom IE7上版本支持，ie7以下版本不支持其它属性值，只识别top

2.7 HTML 重要属性

1）colspan="value" 合并列
2）rowspan="value" 和并行
3）valign="top/bottom/middle/baseline" 垂直对齐方式 
4）rules="rows/cols/all/none" 添加组分隔线

说明：
rows:位于行之间的线条
cols:位于列之间的线条
all：位于行和列之间的线条
none:没有线条
2.8 数据列分组
(1)

(2)

说明：

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

注意：虽然col和colgroup具有相同的功能，一个是单标签一个是双标签，两个都存在浏览器兼容问题。
2.9 数据行分组

```css
<thead></thead> 表头

<tbody></tbody> 表体

<tfoot></tfoot> 表尾

说明：一个Table中，只能包含一个thead,一个tfoot,但可包含多个tbody。
thead 元素应该与 tbody 和 tfoot 元素结合起来使用。 tbody 元素用于对 HTML 表格中的主体内容进行分组， tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

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

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