目录
一、表格的简介（table标签）
在现实生活中，我们经常需要使用表格来表示一些格式化的数据，如课程表、人名单、成绩单……
同样在网页中我们也需要使用表格，我们通过 table 标签来创建一个表格
在table 中使用 tr 表示表格的一行，有几个tr 就有几行
在tr 中使用 td 表示一个单元格，有几个td 就有几个单元格
colspan 属性：横向的合并单元格，合并列，等于几就横向合并几个单元格
rowspan 属性：纵向合并单元格，合并行，等于几就纵向合并几个单元格
<body>
<table border="1" width="50%" align="center">
<tr>
<td>A1</td>
<td>A2</td>
<td rowspan="2">A3</td>
<!-- 纵向合并单元格 -->
</tr>
<tr>
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td colspan="2">C2</td>
</tr>
</table>
</body>二、长表格
代码格式化快捷键：shift + alt + f
可以将一个表格分为三个部分：
头部 thead
主体 tbody
底部 tfoot
th 表示头部的单元格
<body>
<table border="1" width="50%" align="center">
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tbody>
<tr>
<td>2000.1.1</td>
<td>200</td>
<td>80</td>
<td>120</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>200</td>
<td>80</td>
<td>120</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>200</td>
<td>80</td>
<td>120</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>120</td>
</tr>
</tfoot>
</table>
</body>三、表格的样式
table 标签实际上也属于块元素，会独占一行，但其宽度默认不是父元素的100%，table 的宽度默认被内容撑开。
border-spacing 指定单元格边框之间的距离
border-collapse: collapse 设置边框的合并
如果表格中没有使用 tbody,而是直接使用 tr，
那么浏览器会自动创建一个tbody,并将 tr 全部放到 tbody中，
所以tr 不是table 的子元素
默认情况下,元素在 td 中是垂直居中的，可以通过 vertical-align 来修改
在其它元素中,vertical-align 只会影响文字内容,但在 td 中什么都可以影响，
只要是td中的子元素，所以可以通过将其它元素设置为 table-cell （即单元格td）来设置子元素的垂直居中
<style>
table{
width: 50%;
margin: 0 auto;
/* 只为table设置边框，内部单元格无边框 */
border: 1px solid black;
/* border-spacing 指定单元格边框之间的距离 */
/* border-spacing: 0px; */
/*此时边框之间距离为0，但边框的宽度为2px，td中设置的边框的宽度的两倍*/
/* border-collapse: collapse 设置边框的合并 */
border-collapse: collapse;
}
/* 如果表格中没有使用tbody,而是直接使用tr，
那么浏览器会自动创建一个tbody,并将tr 全部放到tbody中，
所以tr不是table 的子元素 */
tr:nth-child(odd){/*不能使用table > tr:nth-child(odd),因为tr不是table的子元素
但可以使用tbody > tr:nth-child(odd)*/
/* 使用伪类设置一行一个颜色，隔行变色 */
background-color: #bfa;
}
td{
border: 1px solid black;
height: 50px;
/* 默认情况下,元素在td中是垂直居中的，可以通过vertical-align来修改
在其它元素中,vertical-align只会影响文字内容,但在td中什么都可以影响，
只要是td中的子元素*/
vertical-align:middle ;
text-align: center;
}
.box1{
width: 300px;
height: 300px;
background-color: orange;
/* 将元素设置为单元格td */
display: table-cell;
vertical-align: middle;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<table>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>28</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>38</td>
<td>流沙河</td>
</tr>
</table>
</body>四、表单简介（form标签）
表单：
- 在现实生活中表单用于提交数据
- 在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器
- 使用 form 标签来创建一个表单，为了收集用户信息
- 一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分组成。
form 的属性：
action 指定表单要提交的服务器的地址，必须有
添加表单项
文本框，注意：数据要提交到服务器中，必须为元素指定一个name属性值，属性值为什么都可以，但一般要有意义。
<input type="text" name="username">
密码框，同样数据要提交到服务器中，必须为元素指定一个name属性值
<input type="password" name="password">
提交按钮，按钮中文字默认是提交，可以添加value 属性来指定按钮的内容
<input type="submit" value="注册">
单选按钮，像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器，同时要为单选按钮设置相同的name 属性值，否则就是单独的按钮，可同时选中。checked 可以将单选按钮设置为默认选中
<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>
多选框，同样也需要制定name 和value 属性，也是用checked 设置为默认选中
<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked>
下拉列表，使用select 标签，需要name属性，对于下拉的内容使用option标签，并使用selected设置为默认选项
<select name="haha">
<option value="i">选项一</option>
<option value="ii" selected>选项二</option>
<option value="iii">选项三</option>
</select>
<body>
<form action="target.html">
<!-- 添加表单项
文本框
注意：数据要提交到服务器中，必须为元素指定一个name属性值-->
文本框<input type="text" name="username">
<br><br>
<!-- 密码框, 同样数据要提交到服务器中，必须为元素指定一个name属性值-->
密码框<input type="password" name="password">
<br><br>
<!-- 单选按钮
像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器
checked 可以将单选按钮设置为默认选中-->
单选按钮 <input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>
<br><br>
<!-- 多选框-->
多选框<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked>
<br><br>
<!-- 下拉列表 -->
<select name="haha">
<option value="i">选项一</option>
<option value="ii" selected>选项二</option>
<option value="iii">选项三</option>
</select>
<!-- 提交按钮,按钮中文字默认是提交，可以添加value属性来指定按钮的内容 -->
<input type="submit" value="注册">
</form>
</body>
五、表单补充
普通的按钮，用得最多，可以通过JS添加效果。
<input type="button" value="按钮">
重置按钮，可以将文本框的内容重置为默认值
<input type="reset">
下面的按钮与上面的功能相同，唯一不同点是input是自结束标签，而button是成对出现的，有开始有结束，成对出现的意味着可以编写更加复杂的结构，如把图片作为按钮，所以button用得更多
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
文件域，使用场景：上传文件使用的
<input type="file">
autocomplete="off" 关闭自动补全
readonly 将表单项设置为只读，数据会提交
disabled 将表单项设置为禁用，数据不会提交
autofocus 设置表单项自动获取焦点
label 标签为input 元素定义标注（标签），用于绑定一个表单元素，当点击label标签内的文本时，浏览器会自动将焦点（光标）转到或者选择对应的 表单元素上，用来增加用户体验。
重点记住：number 、tel、search
<body>
<form action="target.html">
<!-- autocomplete="off" 关闭自动补全 -->
<!-- readonly将表单项设置为只读 -->
<!-- disabled 将表单项设置为禁用 -->
<!-- autofocus 设置表单项自动获取焦点 -->
<input type="text" name="uesername" value="hello" autocomplete="off" readonly>
<br><br>
<input type="text" name="uesername" value="a" disabled>
<br><br>
<input type="text" name="uesername" value="b" autofocus>
<br><br>
<input type="submit">
<!-- 重置按钮，可以将文本框的内容重置为默认值 -->
<input type="reset">
<!-- 普通的按钮 -->
<input type="button" value="按钮">
<br><br>
<!-- 与上面的功能相同，唯一不同点是input是自结束标签，而button是成对出现的，有开始有结束
成对出现的意味着可以编写更加复杂的结构，如把图片作为按钮，所以button用得更多 -->
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
<br><br>
<input type="color">
<br><br>
<input type="email">
<!-- 避免使用，在不同浏览器提示内容有区别-->
</form>
</body>textarea 标签用于定义多行文本输入的控件，使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
<style>
/* 为提示信息改变颜色 */
input::placeholder {
color: pink;
}
header,
nav {
width: 800px;
height: 120px;
background-color: pink;
margin: 15px auto;
border-radius: 15px;
}
</style>
</head>
<body>
<form action="">
<input type="search" name="" id="" required="required" placeholder="老师"
autofocus="autofocus">
<input type="submit" value="提交">
</form>
</body>六、综合案例——注册页面
<body>
<h3>青春不常在，抓紧谈恋爱</h3>
<table width="500px">
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" id="male"><label for="male">男</label>
<input type="radio" name="sex" id="female"><label for="female">女</label>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select name="year">
<option value="2023">--请选择年--</option>
<option value="2023">2023</option>
<option value="2022">2022</option>
</select>
<select name="month">
<option value="12">--请选择月--</option>
<option value="12">12</option>
<option value="11">11</option>
</select>
<select name="day">
<option value="1">--请选择日--</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>
所在地区
</td>
<td>
<input type="text" name="area" value="北京思密达">
</td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" id="wei" name="marriage"><label for="wei">未婚</label>
<input type="radio" id="yi" name="marriage"><label for="yi">已婚</label>
<input type="radio" id="li" name="marriage"><label for="li">离婚</label>
</td>
</tr>
<tr>
<td>学历</td>
<td>
<input type="text" name="education" value="幼儿园">
</td>
</tr>
<!-- 第六行 -->
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="like">妩媚的
<input type="checkbox" name="like">可爱的
<input type="checkbox" name="like">小鲜肉
<input type="checkbox" name="like">老腊肉
<input type="checkbox" name="like">都喜欢
</td>
</tr>
<!-- 第七行 -->
<tr>
<td>自我介绍</td>
<td>
<textarea name="intro">自我介绍</textarea>
</td>
</tr>
<!-- 第八行 -->
<tr>
<td></td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" name="gou" checked>我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">我是会员，立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h4>我承诺</h4>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
