表格表单2

最新推荐文章于 2024-05-28 13:09:25 发布

芏舛

最新推荐文章于 2024-05-28 13:09:25 发布

阅读量59

点赞数

分类专栏：前端学习文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_50864240/article/details/126557969

版权

前端学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1表格

1.基础表格

<table border="1" cellspacing="0" cellpadding="10">
    <tr>
        <td>单元格内容</td>
    </tr>
    <tr>
    	<td>单元格内容</td>
    </tr>
</table>

快速生成5行6列

table>tr*5>td*6

<td colspan="跨列的数量" rowspan="跨行的数量"></td>

1.合并步骤：

1.实现一个基本表格

2.判定跨行跨列，选择最左上的单元格，给对应属性，属性值为占据单元格数量

3.保存看错误效果，将对应多出的单元格代码删除【从后往前删除】

2.表格行分组标签：

<thead></thead>
<tbody></tbody>
<tfoot></tfoot>

3.列分组标签：

<col>
<colgroup></colgroup>

4.表格标题

<caption>标题</caption>

5.表格其他属性

1.设置表格细边框

border-collapse:collapse;

2.设置边框之间的间隔

border-spacing:*px;

3.设置表格按等分宽度

table-layout:fixed;
注意：表格必须要设置宽度该属性才会生效！！！

2.表单

页面中负责数据采集功能

1.表单标签：负责数据提交的地址和方式

2.表单域：数据填入部分

3.表单按钮：

<input type="text/password/radio/checkbox" name="" placeholder="">
<button type="submit/reset/buton">按钮的内容</button>

1.其他标签

1.表单字段集

<fieldset>表单字段集
    <legend>表单字段集的标题</legend>
</fieldset>

2.label标签（选项关联内容，改善用户鼠标体验）

方式一

<inpute id="">
<label for="要关联内容的id">要关联内容</label>

方式二：（label不能加for）

<label><input>要关联的内容</label>

3.上传文件、隐藏域


选择文件
<input type="file">
隐藏域
<input type="hidden" value="信息">

4.下拉列表

<select name="">
    <option value="值" selected>选项内容</option>
</select>
#selected代表默认选中该选项
提交的时候，如果有value就提交value的值，没有就提交option标签之间的内容

5.多行文本域

<textarea name=""></textarea>
注意：标签之间不能有任何东西！！

3.BFC （块格式化上下文）【面试题】

是一个独立的区域，区域与区域不会相互影响

1.触发bfc的情况有：

1.浮动

2.绝对定位

3.固定定位

4.overflow的值不为visible时：auto /hidden/scroll

5.display值为inline-block/flex/inline-flex;

2.应用

1.清除浮动

2.解决margin的bug

3.实现两列自适应布局

左边设置固定宽高，加左浮动

右边不设置宽度，加overflow：hidden;

 
<style>
	.left{
            /* 左边宽度固定 */
            height: 300px;
            width: 200px;
            background: skyblue;
            float: left;
        }
        .right{
            /* 右边宽度自适应 */
            height: 400px;
            background: pink;
            overflow: hidden;
        }
</style>

<body>
    <div class="left">1</div>
    <div class="right">2</div>
</body>

4.上边固定，下边高度自适应

1.上边设置固定高度

2.下边设置position:absolute/fixed;

top:上边盒子的高度

bottom:0;

left:0;

right0;

<style>       
		.top{
            height: 50px;
            background: pink;
        }
        .bottom{
            /* height: calc(100% - 50px); */
            position: absolute;
            top: 50px;
            bottom: 0;
            left: 0;
            right: 0;
            background: plum;
        }
    </style>

<body>
    <!-- 上边固定，下边高度占满全部空间 -->
    <div class="top">上边</div>
    <div class="bottom">下边</div>
</body>