前端学习:第十四天知识总结

第十四天知识总结:
今天主要是对于表格、表单的知识补充
表格的作用:显示数据。
表格标签补充:
1:表格的数据行分组

        <thead></thead>    表头
        <tbody></tbody>    表体
        <tfoot></tfoot>    表尾

注:一个表格有一个表头和表尾 ,但是可以包含多个表体
2:列标题标签

  <th></th>

默认的样式:左右居中 文本加粗
3:表格标题

  <captin>

标题的位置:
css属性: caption-side:left/right/top/bottom
注:left/right 有兼容问题:火狐能识别
4:数据列分组(了解:应用率不高)

  <colgroup span="把几列分成一组"></colgroup>

表格里面重要的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 不再根据内容去分配宽度(优点:性能消耗低 缺点:不灵活)
表单的作用:收集用户信息

表单控件:
文本框
密码框
提交按钮
重置按钮
空按钮
补充表单控件:
1:单选按钮:

注:在单选按钮里面:每一组单选按钮 保持name属性值一致。
2: 多选按钮(复选框)

3: 下拉菜单(下拉列表)

<select>
    <option></option>
    <option></option>
    <option></option>
</select>

4: 多行文本域

cols 和 rows 以字符为单位
注:阻止用户进行缩放 css属性 resize:none;
5: 上传文件框

补充表单的html属性
1:默认选中
checked=“checked”
2: 表单控件的禁用
disabled=“disabled”
3: 下拉列表里面的默认选中
selected=“selected”
表单里面的标签
fieldset(表单字段集)
作用:给表单做分组
特点:
默认情况下自带边框
可以进行互相嵌套
legend (字段集标题)
作用:是fieldset 一组里面的一个标题
特点:一般情况下,放在fieldset第一个子元素位置。

       <label for=""></label>

说明:
label里面放的是提示信息
for属性:绑定对应控件的id名称
BFC ???( 布局逻辑 ) -> 块级格式化上下文
BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box(块)参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
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

发布了12 篇原创文章 · 获赞 0 · 访问量 113

猜你喜欢

转载自blog.csdn.net/weixin_42556730/article/details/105256758
今日推荐