HTML（二）-- 表格、表单
目录
在现实生活中，我们经常需要使用表格来表示一些格式化数据，例如：课程表、人名单、成绩单。。。
在网页中也要使用表格
通过table标签创建一个表格
1.表格
1.1常用表格
标签
- table
- tr 表示一行
- td 表示一个单元格
- 默认情况下元素在td中是垂直居中的，可以通过vertical-align来修改
属性
- rowspan纵向合并单元格
- colspan横向合并单元格
<table>
在tablezhong使用tr表示表格中的一行，有几个tr就有几行
<tr>
在tr中使用td表示一个单元格，有几个td就有几个单元格
<td>A1</td>
rowspan纵向的合并单元格
<td rowspan=“2”>A1</td>
</tr>
<tr>
<td>A1</td>
<td>A1</td>
</tr>
<tr>
colspan横向的合并单元格
<td colspan="2">A1</td>
</tr>
</table>
1.2长表格（特殊表格）
属性（特殊情况用到）
- th：表示头部的单元格
- thead：表示头部的一行
- tbody：表示中部的行
- 如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全部放到tbody中
- tr不是table的子元素，而是tbody的子元素
- tfoot：表示尾部的行
1.3表格的样式
- border-spacing：指定边框之间的距离
- border-collapse：collapse；设置边框的合并
- text-align:center；让表格文本居中
- vertical-align：middle；让表格文本居中
实现表格隔行双色显示
使用伪元素
tr:nth-child(odd){
background-color:#bfa;
}
实现页面居中的另一种方式(用的不多)
使用display：table-cell；将其变为表格布局
.box1{
width:300px;
height:300px;
background-color:orange;
/*将元素设置为单元格*/
display：table-cell;
vertical-align:middle;
}
.box2{
width:100px;
height:100px;
background-color:yellow;
margin:0 auto;
}
2.表单
- 在现实生活中表单用于提交数据
- 在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器
- 使用form标签来创建一个表单
2.1form的属性
- action：表单要提交的服务器的地址
2.2表单项
(https://blog.csdn.net/weixin_43970743/article/details/88824324)
文本框
注意：数据要提交到服务器中，必须要为元素指定一个name值(成为kv键值对的key)
- 属性：
- autocomplete:"off";关闭文本框的自动补全（历史记录）功能，on：开启
- readyonly：将表单项设置为只读（可以被提交）
- disabled：将表单设置为禁用（不能被提交）
- autofocus：设置表单项自动获取焦点（打开页面自动获取焦点，为输入框）
- placeholder="Hello World":显示初始内容,颜色为灰色，点击文本框后消失
<input type="text">
提交按钮
<input type="submit">
密码框
<input type="password">
单选按钮
<input type="radio">
- 通过name分组，如果name一样那么就完成了多选一的设置
- 必须要指定一个value属性，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="haha">
<option value="i">选项一</option>
<option value="ii">选项二</option>
<option value="iii">选项三</option>
<select>
按钮button
没有其他功能仅仅代表一个按钮，可以由js自定义
<input type="button">
重置表单（reset）
以按钮的形式表示，重置表单信息
<input type="reset">
button（按钮，input的变体）
因为是成对标签所以可以添加一些其它标签，所以更灵活
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
颜色选择框（color）
点击后会出现颜色选择框
<input type="color">
