前端基础（9）：表单、表格书写⽅法（后台管理系统）⼀、表单的⾼级标签语法及应⽤场景
表单的组成
表单域 <form name="" method="" action=""></form>
表单控件 <input type="text" value=""/>
提⽰信息 <label for=""></label>
1、表单字段集
<fieldset></fieldset>
功能：相当于⼀个⽅框，在字段集中可以包含⽂本和其他元素。
功能：
该元素⽤于对表单中的元素进⾏分组并在⽂档中区别标出⽂本。
fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。
2、字段集标题
flex布局对齐方式
<legend></legend>
功能：legend元素可以在fieldset对象绘制的⽅框内插⼊⼀个标题。
功能：
legend元素必须是fieldset⾥的第⼀个元素。
3、提⽰信息标签
<label for="绑定控件id名"></label>
功能：label元素⽤来定义标签，为页⾯上的其他元素指定提⽰信息。
功能：
要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。
4.表单元素
增加：<input type=“hidden”value = “”> （在页⾯中不显⽰、value值可记录数据）
补充：select checkbox radio textarea image file
<select>
<option></option>
</select>
<textarea></textarea>
<input type="image"src=""/>
<inpurt type="file"/>
<input name=""type="radio  "checked="checked">
<input name=""type="checkbox "disabled="disabled">
属性：checked disabled enabled
⼆、表格的css属性及应⽤
表格的作⽤：显⽰数据;
1、单元格间距
border-spacing:value;(该属性必须给table添加)
2、合并相邻单元格边框
border-collapse:separate(边框分开)/collapse(边框合并)；
3、⽆内容单元格显⽰、隐藏
empty-cells:show/hide;
4、表格布局算法(加快运⾏的速度)
table-layout:auto/fixed(固定宽⾼，不会随内容多少改变单元格宽)
5、表格标题
<caption>标题内容</caption>
表格标题位置：caption-side:top/right/bottom/left
说明：left,right位置只有⽕狐识别，top,bottom IE6以上版本⽀持，ie6以下版本不⽀持其它属性值，只识别top;
6、表格布局元素
表格基本组成
table（表格） tr（⾏） td（单元格） caption(表格标题)
th：表格列标题（放在tr⾥）
7、表格重要属性（html）
1）colspan=“value” 合并列
2）rowspan=“value” 合并⾏
3）valign=“top/bottom/middle/baseline” 垂直对齐⽅式
4）rules=“rows/cols/all/none/groups” 添加组分隔线
说明：
rows：位于⾏之间的线条
cols：位于列之间的线条
all：位于⾏和列之间的线条
none：没有线条
groups：位于⾏组和列组之间的线条
8、数据⾏分组
<thead></thead>表头
<tbody></tbody>表体
<tfoot></tfoot>表尾
说明：⼀个Table中，只能包含⼀个thead,⼀个tfoot，但可包含多个tbody。
9、数据列分组
<colgroup span="value"></colgroup>
<col    span="value"/>
说明：
1）col和colgroup元素会根据从左到右的顺序依次对数据表格进⾏分组。
2）span属性显⽰指定相邻⼏列组成⼀组，span属性值默认为1，默认时仅定义⼀列为⼀组。
3）可以通过给table添加rules="groups"属性来给分组列添加组分割线。
注意：虽然col和colgroup具有相同的功能，但是，我们只能使⽤colgroup元素来决定表格内容部分分割线（rules）应该处于的位置，⽽注意：
col没有这个功能。
三、BFC的概念及应⽤场景
BFC（Block Formatting Contexts ）
就是即块级格式化上下⽂
创建了 BFC的元素就是⼀个独⽴的盒⼦，
不过只有Block-level box(块级盒) 可以参与创建BFC，
它规定了内部的Block-level Box如何布局，并且与这个独⽴盒⼦⾥的布局不受外部影响，当然它也不会影响到外⾯的元素。
BFC特性
1.内部的Box会在垂直⽅向，从顶部开始⼀个接⼀个地放置。
1.
2.Box垂直⽅向的距离由margin决定。属于同⼀个BFC的两个相邻Box的margin会发⽣叠加
2.
3.
3.每个元素的margin box的左边， 与包含块border box的左边对相接触(于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box叠加。
4.
5.BFC就是页⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素，反之亦然。
5.
6.计算BFC的⾼度时，浮动元素也参与计算（当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算⾼度时会包括浮动元素的⾼6.
度）。
触发BFC的⽅式
float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block, flex, inline-flex)
position值为（absolute，fixed）
fieldset，html元素
BFC的⽤途
1.解决margin叠加问题
根据BFC的第⼆条规则：
Box垂直⽅向的距离由margin决定，属于同⼀BFC的两个Box会发⽣margin重叠
因此，可以在其中⼀个p上包裹容器，
然后触发其BFC，这样两个p就不在同⼀个BFC，因此就不会发⽣重叠
2.⽤于清除浮动，
根据BFC的第六条规则：计算BFC的⾼度时，浮动元素也参与计算
3.⾃适应两栏布局
根据BFC的第四条规则：BFC的区域不会与float box叠加

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。