9.表格 表单

表格（table）
- 和日常生活中使用的表格一样，在网页中也以创建表格
- 可以通过表格来表示一些格式化的数据
使用table来创建一个表格

caption表示表格的标题
tbody表格主体
tfoot表格的底部
th用来表示表头中的单元格的
tr表示一行
td表示一个单元格
colspan 横向的合并单元格
rowspan纵向的合并单元格

如果在table没有写tbody，则浏览器会自动创建tbody，
并将所有的tr都放入到tbody

文字在td中会自动垂直居中

表单（form）
- 在网页中，通过表单来将信息提交给服务器
使用form标签来创建一个表单
action用来指定表单要提交到哪

<form action="target.html">

表单项
文本框
- input type属性为text
- 如果希望表单中的数据真的被提交给服务器，
必须为表单项指定name属性

<input type="text" name="username">

提交按钮
- input type属性为submit
- 可以通过value属性来修改按钮上的文字

<input type="submit" value="登录">

使用input type为password来创建密码框，密码框中的内容不会以明文显示，避免密码被偷看
默认情况下，表单中的数据会通过url地址来发送，url地址中?后的内容被称为查询字符串（query string）
?username=admin&password=123123
查询字符串是一个一个的名值对结构，一个数据名对应一个值，多个名值对之间使用&隔开，
数据发送给服务器后，服务器可以根据数据名获取对应的值

密码 <input type="password" name="password">

单选框
- 使用input type=radio来创建一个单选框
单选框是通过name属性来分组的，相同name属性的为一组
像这种选择框，不需要用户填写内容，还必须为表单项指定value，value最终会成为提交给服务器的值

性别：
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

多选框
- 使用input type=checkbox来创建多选框

爱好：
<input type="checkbox" name="hobby" value="ppq"> 乒乓球
<input type="checkbox" name="hobby" value="lq"> 篮球
<input type="checkbox" name="hobby" value="ymq"> 羽毛球
<input type="checkbox" name="hobby" value="zq"> 足球

下拉列表
- 使用select来创建下拉列表
- 添加 multiple 属性后可以将下拉列表设置为多选的下拉列表

你最喜欢的编程语言：
<select name="language" >
	<option value="js">JavaScript</option>
	<option>Java</option>
	<option>Python</option>
</select>

placeholder
- 用来设置文本框的占位符
value
- 文本框中可以通过value来指定默认值
disabled
- 禁用表单项，不会被提交
readonly
- 表单项无法修改，但是可以提交
checked
- 设置默认选中的单选和多选
selected
- 设置默认选中的下拉项

1. 使用盒子模型
   直接通过盒子模型 margin: 0 auto; 来实现居中
   - 原理：利用了盒子模型在水平布局时的等式
   左右外边距 + 可见框宽度 = 包含块宽度
   - 缺点：
   1. 不能处理垂直居中问题
   2. 居中的元素必须指定宽度
   2. 使用定位
   通过如下代码来实现：
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
   - 原理：利用定位后新的等式来实现居中
   左右偏移量 + 左右外边距 + 可见框的宽度 = 包含块的宽度
   上下偏移量 + 上下外边距 + 可见框的高度 = 包含块的高度
   - 缺点：
   1. 设置的样式稍微多一些
   2. 必须指定元素的大小
   3. 通过表格来居中
   - 将父元素的display设置table-cell，然后通过vertical-align:middle来实现垂直居中
   然后再通过子元素的 margin:0 auto; 来实现居中
   - 也可以将子元素转换为inline-block，然后通过text-align:center来实现水平居中
   - 缺点：
   父元素设置为单元格后，默认宽度被内容撑开
   4. 通过弹性盒来居中
   - 代码：
   display: flex;
   justify-content: center;
   align-items: center;
   - 缺点：
   几乎没有