简易table form梳理

<!--

A:表格-table 《双标签，day3上午第一次接触》

作用：显示信息

一：table简易案例：

<thead>

<tr>

</tr>

</thead> //小总结：<thead><th>为双标签。文字：字体加粗，左右居中

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

二：表格标签补充: 《day14/上午/03表格补充》

1:表格的数据行分组

<thead></thead> 表头

<tbody></tbody> 表体

<tfoot></tfoot> 表尾

注：一个表格有一个表头和表尾，但是可以包含多个表体

2:列标题标签

默认的样式：左右居中文本加粗

3:表格标题

标题的位置：

css属性： caption-side:left/right/top/bottom

注：left/right 有兼容问题：火狐能识别

4：数据列分组（了解：应用率不高）

表格里面重要的html属性：

colspan=""

rowspan=""

cellspacing=""

cellpadding=""

rules="" 分隔线

属性值：all/rows/cols/groups

表格css属性的补充：

1:相邻单元格边框进行合并

border-collapse: (添加在table上面)

属性值：

separate 分开状态

collapse 合并

2:相邻单元格之间的间距 (添加在table上面)

border-spacing:

3: 是否显示单元格区域：（没有内容的时候，让隐藏）

empty-cells:

show

hide

4：table-layout:

auto 默认值：根据内容分配宽度（优点：灵活缺点:性能消耗比较大）

fixed 不再根据内容去分配宽度（优点：性能消耗低缺点：不灵活）

-->

<!--

B：表单form 《双标签，day14/下午/06表单补充》

一：简易案例：

</select>

<legend>第一组的标题</legend>

</fieldset>

</form>

二：

表单的作用：收集用户信息

表单控件：

<input type="text"> 文本框

<input type="password"> 密码框

<input type="submit"> 提交按钮

<input type="reset"> 重置按钮

<input type="button"> 空按钮

补充表单控件：

1：单选按钮：

注：在单选按钮里面：每一组单选按钮保持name属性值一致。

2: 多选按钮（复选框）

3: 下拉菜单（下拉列表）

...

</select>

4: 多行文本域

cols 和 rows 以字符为单位

注：阻止用户进行缩放 css属性 resize:none;

5: 上传文件框

补充表单的html属性

1：默认选中

checked="checked"

2: 表单控件的禁用

disabled="disabled"

3: 下拉列表里面的默认选中

selected="selected"

表单里面的标签：

fieldset（表单字段集）

作用：给表单做分组

特点：

默认情况下自带边框

可以进行互相嵌套

legend （字段集标题）

作用：是fieldset 一组里面的一个标题

特点：一般情况下，放在fieldset第一个子元素位置。

说明：

label里面放的是提示信息

for属性：绑定对应控件的id名称

-->

<!--

C: BFC ( 布局逻辑 ) -> 块级格式化上下文《day14/下午/08-BFC》

BFC布局规定：

一、内部的Box会在垂直方向，一个接一个地放置。

二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）

三、每个元素的margin box的左边，与包含块border box的左边相接触

四、BFC的区域不会与float box重叠。

五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

六、计算BFC的高度时，浮动元素也参与计算

BFC触发条件：

1：html 就是一个BFC

2: float属性不为none

3: position为absolute或fixed

4: display为inline-block, table-cell, table-caption, flex, inline-flex

5: overflow不为visible

应用：解决高度塌陷《day14/下午/09-BFC应用-解决高度塌陷》

解决margin的上下重叠《day14/下午/09-BFC应用-解决上下重叠》

-->

巴特西

简易table form梳理

最新文章

热门文章