网页搭建入门——HTML入门——表格与表单
一、表格
（一）表格概述
1、表格标签
- table 用于描述表格开始和结尾
- tr 表示行开始和结尾
- td 单元格开始和结尾
- border 是否显示表格的边框
- width 表格的宽度或单元格的宽度
<table border="1" width="500px">
<tr>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>工资</td>
</tr>
<tr>
<td>zhangsan</td>
<td>nan</td>
<td>1234</td>
<td>4321</td>
</tr>
<tr>
<td>lisi</td>
<td>nv</td>
<td>124</td>
<td>4414</td>
</tr>
</table>
注意：
- width的单位可以为px（像素），表示固定宽度
- width的单位还可以是百分比，例如“50%”，表示占所在容器（宽度）的50%
- 正常文字大小一般为16px
2、作用
- 用于表格、行、列、宽度、边框的制作
3、示例
- 制作课程表
<table border="1" width="600px">
<tr>
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<td>第1节</td>
<td>数</td>
<td>语</td>
<td>数</td>
<td>语</td>
<td>数</td>
</tr>
<tr>
<td>第2节</td>
<td>英</td>
<td>数</td>
<td>语</td>
<td>数</td>
<td>英</td>
</tr>
<tr>
<td>第3节</td>
<td>音</td>
<td>外</td>
<td>体</td>
<td>思</td>
<td>美</td>
</tr>
<tr>
<td>第4节</td>
<td>社</td>
<td>英</td>
<td>体</td>
<td>数</td>
<td>社</td>
</tr>
<tr>
<td>午休</td>
<td>午休</td>
<td>午休</td>
<td>午休</td>
<td>午休</td>
<td>午休</td>
</tr>
<tr>
<td>第5节</td>
<td>语</td>
<td>体</td>
<td>数</td>
<td>微</td>
<td>思</td>
</tr>
<tr>
<td>第6节</td>
<td>语</td>
<td>体</td>
<td>数</td>
<td>体</td>
<td>班</td>
</tr>
</table>
（二）合并行列
1、所用标签
- colspan
- rowspan
2、作用
- 用于将表格内的某些行、列进行合并
3、示例
- 合并午休、星期、两节连上等表格位置
<table border="1" width="600px">
<tr>
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<td>第1节</td>
<td>数</td>
<td>语</td>
<td>数</td>
<td>语</td>
<td>数</td>
</tr>
<tr>
<td>第2节</td>
<td>英</td>
<td>数</td>
<td>语</td>
<td>数</td>
<td>英</td>
</tr>
<tr>
<td>第3节</td>
<td>音</td>
<td>外</td>
<td>体</td>
<td>思</td>
<td>美</td>
</tr>
<tr>
<td>第4节</td>
<td>社</td>
<td>英</td>
<td>体</td>
<td>数</td>
<td>社</td>
</tr>
<tr>
<td colspan="6">午休</td>
</tr>
<tr>
<td>第5节</td>
<td rowspan="2">语</td>
<td rowspan="2">体</td>
<td rowspan="2">数</td>
<td>微</td>
<td>思</td>
</tr>
<tr>
<td>第6节</td>
<td>体</td>
<td>班</td>
</tr>
</table>
注意：
- 能够同时对行和列进行合并，此时先合并行和先合并列均可。
<td colspan="2" rowspan="2">数</td>
注意：
- cellpadding是用来规定单元格内容与其边框之间的距离。
（三）其他标签
1、分类
| 属性名称 | 属性值 | 作用 |
|---|---|---|
| border | 1 | 设置边框 |
| width | npx, n% | 表格宽度 |
| bgcolor | 颜色值 | 表格背景 |
| align | left、center、right | 表格在文档中的对齐方式 |
| valign | bottom、middle、top | 三种垂直对齐方式 |
2、bgcolor
bgcolor所跟颜色可以有三种方式
- 表示颜色的英文单词
- “#+6位16进制”表示，前两位代表红色，中间两位代表绿色，后两位代表蓝色；红绿蓝三原色
- RGB表示方法，在HTML4之后就不能再使用了
注意：
非要使用RGB表示方式时，则可以使用以下方式：
<table border="1" width="600px" style="background-color: rgb(200,255,0);">
其中background-color后可以跟单词、十六进制、rgb三种形式。
二、表单
1、语法格式
<form action="" method="">......</form>
注意：
- form后的属性action和method都是后台相关的功能。后台程序员需要将收集到的用户信息传送到后台，由后台进行响应处理。action是进入后台的位置，将表单中的所有内容传递到action指向的文件里面，继续进行处理；method代表传入到后台的提交方式，其中“get”是显式提交，信息安全方面较差；“post”是隐式提交，信息安全性较好。
2、作用
- 用于收集用户信息，进行人机交互操作
3、包含元素
文本框、复选按钮、列表框、图片框、复选框等。这些元素，统称“控件”。
控件的常用属性：
4、示例
- 注册信息录入
<form action="" method="">
<label>请输入姓名：</label>
<input type="text" name="" id=""><br>
<label>请输入密码：</label>
<input type="password" name="" id=""><br>
<label>请再次输入密码：</label>
<input type="password" name="" id=""><br>
<label>性别：</label>
<input type="radio" name="gender" id="" value="1"><label>男</label>
<input type="radio" name="gender" id="" value="0"><label>女</label><br>
<label>兴趣爱好：</label>
<input type="checkbox" name="" id="" value="1"><label>游泳</label>
<input type="checkbox" name="" id="" value="2"><label>看书</label>
<input type="checkbox" name="" id="" value="3"><label>爬山</label>
<input type="checkbox" name="" id="" value="4"><label>思考</label><br>
<label>生日：</label>
<select>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997" selected="selected">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
</select><label>年</label>
<select>
<option value="1">01</option>
<option value="2">02</option>
<option value="3" selected="selected">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select><label>月</label>
<select>
<option value="1" selected="selected">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select><label>日</label><br>
<label>头像：</label><img src="image/1.jpg" width="100px" height="100px">
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
</form>
注意：
- 文字提示有可能要进行统一的格式设置，比如字体字号、对齐方式等等，则这些文字提示需要有一个统一的名字，统一的识别， 于是需要将提示信息用标签<label></label>包裹起来。label标签专门用于在页面上进行文字性的显示。
- 标点符号进行统一的设置，要么统一中文标点，要么统一英文标点，方便进行后续的对齐排版。
- 空间用<input\ type="" name="" id="">进行使用。type="text"为文本框；type="radio"为单选按钮，当属性name相同时，只能有一个被选中。
- <form>标签定义表单，表单本身是不可见的，所有表单元素要放在<form>标签中， <form>标签内可以添加<input><option><textarea> <select>等标签，form中没有<text> 标签。
- 复选框用checkbox，在选择中要增加属性value，将值传递给后台（单选也需要）。传值时能用数值代替尽量用数值代替，减少字符的使用。
- 下拉框用<select></select>实现，里面的选项用<option value=“1995”>1995</option>来实现。默认选中的则添加"selected=“selected”"来实现。 <option>描述的是下拉菜单和列表项目分组中每项内容标签。
- 按钮用"<input type=“button” value=“普通按钮”>“或”<input type=“submit” value=“提交按钮”>"来实现。普通按钮实现在当前页面等的操作，提交按钮触发后台操作。
后期所需优化：
- 优化对齐方式、间距、背景（css实现）
- 优化摆位置（表格布局）（css实现）
- 优化操作习惯（生日三级联动，以及头像下拉框和图片的联动）
- js与css在优化中的作用（实现功能及初始化）
5、表单其他控件
- 普通列表框（非下拉列表框）
在下拉框select后面加上size属性，multiple属性限定是否可以多选，按住ctrl按键实现多选。
<select size="4" multiple="true">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
- 隐藏域(主要作用是进行信息的传递，用于中间传递变量的位置)
<input type="hidden" name="" id="">
- 上传控件
<input type="file">
- 多行文本框
<textarea rows="10" cols="100" name="" id="">
请输入
</textarea>