目录
注：基于VSCode：
一、表格
表格可以用来布局，但现在用的很少
表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，
表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单
在网页中也可以来创建出不同的表格。
1、在HTML中，使用table标签来创建一个表格
2、在table标签中使用tr来表示表格中的一行，有几行就有几个tr
3、 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
4、通过属性设置样式，border="1" width="40%" align="center"
5、rowspan用来设置纵向的合并单元格
6、colspan横向的合并单元格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
<!-- 表格可以用来布局，但现在用的很少 -->
</head>
<body>
<!-- table创建表格 -->
<table border="1" width='50%' align="center">
<tr>
<td>序号</td>
<td>姓名</td>
<td>成绩</td>
<td rowspan="4">小结</td>
</tr>
<tr>
<td>01</td>
<td>张三</td>
<td>60</td>
</tr>
<tr>
<td>02</td>
<td>李四</td>
<td>90</td>
</tr>
<tr>
<td colspan="2">合计</td>
<td>150</td>
</tr>
</table>
</body>
</html>二、表格样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/*需求一、设置表格的宽度，表格居中，边框 */
table{
width: 50%;
border: 1px solid red;
/* 表格居中 */
margin: 0 auto;
/* 需求二： 设置表格的边框，要单线边框 */
/* border-spacing: 0px; */
border-collapse: collapse;
/* 给表格设置背景色样式 */
/* background-color: hotpink; */
}
th,tr,td{
border: 1px solid green;
}
/*需求四： 设置隔行变色 tr:nth-child(even)*/
tr:nth-child(2n+1){
background-color: hotpink;
}
/*需求二： 设置表格的边框，要单线边框
方法一 border-spacing:0px ;
方法二 border-collapse [kə'læps] 可以用来设置表格的边框合并
如果设置了边框合并，则border-spacing自动失效
*/
/*需求三：给表格设置背景色样式*/
/*需求四： 设置隔行变色 tr:nth-child(even)*/
/*需求五： 鼠标移入到tr以后，改变颜色*/
tr:hover{
background-color: indianred;
}
/*需求六：调整td文字在表格中的位置 vertical-align、text-align*/
td{
height: 50px;
/* 文字水平居中 */
text-align: center;
/* 文字垂直居中 默认值 */
vertical-align: middle;
}
</style>
</head>
<body>
<!--table是一个块元素-->
<table>
<!-- tr表示一行，tr里的th特指是表格内容头部的一列
有默认样式：加粗，居中
-->
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>住址</th>
</tr>
<tr>
<td>01</td>
<td>孙悟空</td>
<td>男</td>
<td>花果山</td>
</tr>
<tr>
<td>02</td>
<td>猪八戒</td>
<td>男</td>
<td>高老庄</td>
</tr>
<tr>
<td>03</td>
<td>沙和尚</td>
<td>男</td>
<td>通天河</td>
</tr>
</table>
</body>
</html>
三、长表格
有一些情况下表格是非常的长的，
这时就需要将表格分为三个部分，表头，表格的主体内容，表格底部
在HTML中为我们提供了三个标签 thead tbody tfoot
如果表格中没有写tbody，浏览器默认表格中添加tbody
并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通过table > tr 无法选中行 需要通过tbody > tr
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<table>
<!-- 表头 -->
<thead>
<tr>
<th>姓名</th>
<td>性别</td>
<th>薪资</th>
</tr>
</thead>
<!-- 表格主体内容 -->
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>8000</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>8000</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>8000</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>8000</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>8000</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>8000</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>8000</td>
</tr>
</tbody>
<!-- 表格底部 -->
<tfoot>
<tr>
<td>小记</td>
<td>88888</td>
</tr>
</tfoot>
</table>
<!-- 简写方式 -->
<table>
<!-- <tbody> -->
<tr>
<td></td>
</tr>
<!-- </tbody> -->
</table>
</body>
</html>四、表单
表单：将用户信息、用户搜索的内容等本地的数据信息提交给服务器的，
让服务器做下一步的处理
比如：百度的搜索框 注册 登录这些操作都需要填写表单
-->
<!--
1:创建表单 form标签
属性：
action属性（必须要写）
指向的是一个服务器的地址，当我们提交表单时将会提交到action属性对应的地址
2:添加表单项
使用form创建的仅仅是一个空白的表单，可以向form中添加不同的表单项
（1）input来创建一个文本框
type属性值：text
name属性：提交内容的名字
如果希望表单项中的数据会提交到服务器中，必须指定一个name属性
value属性值：作为文本框的默认值显示 ，是你在输入框里输入的内容，
提交表单的时候，会将value的值提交出去
（2）input创建一个密码框
type属性值：password
name属性：提交密码的名字
（3）input创建一个单选按钮
type属性：radio
name属性进行分组，属性相同是一组按钮，如果不设置，则都可以选择
value属性必须设置，这样被选中的表单项的value属性值结果将会提交给服务器
checked="checked" 默认选中
（4）input创建一个多选框
type属性:checkbox
checked="checked"属性 默认选中
(5)select来创建一个下拉列表
name属性设置给select，
value属性设置给option
selected="selected"，将选项设置为默认选中
在下拉列表中使用option标签来创建一个一个列表项
(6)textarea创建一个文本域
name="info"
(7)input创建一个提交按钮，点击后表单就会提交
-type属性值：submit
-value属性：指定按钮上的文字,默认是‘提交’
(8)input创建一个重置按钮，type="reset"
点击重置按钮以后表单中内容将会恢复为默认值
(9)input创建一个单纯的按钮，type='button' value='按钮'
这个按钮没有任何功能，只能被点击
(10)button标签来创建按钮
方式和使用input类似，它是成对出现的标签，使用起来更加的灵活
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<!-- 创建一个表单 -->
<form action="./target.html">
<!-- input 输入框 单标签 根据不同的type属性，改变输入框的性质 -->
<!-- (1)文本框 -->
用户名：<input type="text" name="username" value="李四" /><br /><br />
<!-- （2）密码框 -->
密码：<input type="password" name="password" /><br /><br />
性别：男 <input type="radio" name="sex" value="boy" /> 女 <input type="radio" name="sex" value="girl" checked /> <br /><br />
兴趣爱好：学习<input type="checkbox" checked /> 跑步<input type="checkbox" /> 打篮球<input type="checkbox" /> 追剧<input type="checkbox" checked /> <br /><br />
年龄：<select name="age">
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003" selected>2003</option></select><br /><br />
个人特长：<textarea name="" id="" cols="20" rows="10"> </textarea><br /><br />
<input type="submit" value="登录"/>
<input type="reset">
<input type="button" value="普通按钮">
<button>
我也是普通按钮
</button>
</form>
</body>
</html>五、补充
1、input属性补充
1: readonly 设置为只读，不能修改
2: disabled 设置为禁用
3: autofocus 自动获取焦点
4: placeholder 提示内容
5: autocomplete="off" 关闭自动补全，一般会关闭
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 引入网站标题的图标 -->
<!-- 相对路径 -->
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
<!-- 绝对路径 -->
<link rel="icon" href="https://s01.mifile.cn/favicon.ico" type="image/x-icon" />
<style>
.search{
border: 1px solid red;
height: 45px;
width: 300px;
/* 外边框 */
outline: none;
}
.search:focus{
border: 1px solid green;
}
</style>
</head>
<body>
<form action="./target.html">
<input type="text" autocomplete="off" class="search"/>
<input type="button" value="搜索"/>
</form>
</body>
</html>2、完善clearfix
经过修改后的clearfix是一个多功能的
既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2 {
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 100px;
}
/* 高度塌陷 */
.box3 {
border: 10px red solid;
}
.box4 {
width: 100px;
height: 100px;
background-color: yellowgreen;
}
/*
解决父子外边距重叠问题
解决高度塌陷的问题
*/
.clearfix::before,
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="box3 clearfix">
<div class="box4"></div>
</div>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
