高级表单与表格、BFC研究

最新推荐文章于 2023-12-09 09:46:38 发布

原创最新推荐文章于 2023-12-09 09:46:38 发布 · 493 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习心得 #网页制作 #html #css

本文深入探讨了HTML中的高级表单和表格特性，包括fieldset、legend、label、上传文件框和图像域等。同时，详细阐述了CSS中的BFC（Block Formatting Context）概念，解释了BFC的布局规则、触发条件以及其在自适应布局和清除浮动等方面的应用。

高级表单与表格、BFC研究

复习补充

1.定位（position）常用于小图标和三级导航。

2.overflow，overflow-x，overflow-y：假如给某个方向的overflow设置了除了visible的值，另外一个方向会自动设置为auto。

3.行内块级元素inline-block一样存在基线问题。

1高级表单（非HTML5）

1.1fieldset表单字段集

<fieldset></fieldset>相当于一个方框，可包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以进行嵌套，内部可设置多个fieldset。Disabled定义空间禁止使用<fieldset disabled> </fieldset>。

1.2legend字段集标题

</fieldset>

legend可在fieldset对象绘制的方框内插入一个标题，legend元素必须是fieldset内的第一行，若放在其他行，则ie不兼容。<legend align=”right/center/left/justify”>标题</legend>

1.3label提示信息标签

label标签通过for属性，将id名相同的input元素关联起来，即在浏览器中点击label包裹的文字时，可直接跳到关联的input。

多选框套路（语义不规范），在单选或多选框，通过将label标签将表单元素与文字包裹在一起，产生联系。

1.4上传文件框

<input type=”file” multiple>，其中multiple可选择多个文件一起上传。

1.5图像域

<input type=”image” src=”” alt=”” width=””height=””>，可作为提交按钮。

2高级表格

2.1rules属性

<table rules=”cols/rows/all/none/groups”>列与列间添加分隔线、行与行之间添加分隔线、行列都有分隔线、没有分隔线、位于行组与行组之间、列组与列组之间的分隔线。

2.2数据列分组

(1) <colgroup span="分组列数"></colgroup>

(2) <col span=" " />

说明：

1）col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。

2）span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组。

3）可以通过给table添加rules="groups"属性来给分组列添加组的分割线。

注意：虽然col和colgroup具有相同的功能，但是，我们只能使用colgroup元素来设置表格内容部分分割线（rules）应该处于的位置，而col没有这个功能。

2.3数据行分组

<thead></thead> 表头

<tbody></tbody> 表体

<tfoot></tfoot> 表尾

说明：一个Table中，只能包含一个thead，一个tfoot，但可包含多个tbody。

说明：

thead 元素应该与 tbody 和 tfoot 元素结合起来使用。

tbody 元素用于对 HTML 表格中的主体内容进行分组，tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

如果要使用 thead、tfoot 以及 tbody 元素，就必须使用全部的元素。

它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现表尾了。必须在 table 元素内部使用这些标签。

提示：在默认情况下这些元素不会影响到表格的布局。不过，可以使用 CSS 使这些元素改变表格的外观。

详细描述：

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