表格表单2
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>
圣杯布局+双飞翼布局
4.伪元素选择器
1.在e元素的内容之前插入内容
e:before(content:'内容';)}
2.在e元素的内容之后插入内容
e:after(content:'内容';)}
注意 : :before 和 ::before 只是版本区别而已!!
3.提示文字的样式
::placeholder{}
4.鼠标选中的文字样式
::selection{}
伪元素和伪类的区别【面试题】:
伪元素是一个假的元素,伪类是一种临时状态,只有状态被触发的时候才会生效。
伪元素使用双冒号,伪类使用单冒号。