CSS为网页添加表格和表单
1.表格标签
1)创建表格
<table></table>：用于定义一个表格的开始和结束，在标签内部，可以放置表格的标题、表格行和单元格
<tr></tr>：用于定义表格中的一行，<td></td>：用于定义表格中的单元格
<table border="1"> <tr> <td>学生名称</td> <td>竞赛学科</td> <td>分数</td> </tr> <tr> <td>张三</td> <td>数学</td> <td>150</td> </tr> </table>
1）<table>标签的属性：border、cellspacing（设置单元格与单元格边框之间的空白距离）、cellpadding（设置单元格内容跟单元格边框之间的空白距离）、width、heigh、align、bgcolor、background
2）<tr>标签的属性：heigh、align、valign、bgcolor、background
3）<td>标签的属性：...colspan（设置单元格横跨的列数，用于合并水平方向的单元格）、rowspan（设置单元格竖跨的行数，用于合并竖直方向的单元格）【合并单元格】
<table border="1"> <tr> <td>学生名称</td> <td colspan="2">竞赛学科</td> <!--<td>分数</td>--> </tr> <tr> <td>张三</td> <td>数学</td> <td>150</td> </tr> </table>
4）<th></th>表头标签：加粗处理
2.表单标签
一个完整的表单通常由表单控件、提示信息和表单域三部分构成
<form></form>标签用于定义表单，实现用户信息的收集与传递
<form action="url地址" method="提交方式" name="表单名称"> ...各种表格控件 <form>
1.action属性：用于指定接收并处理表单数据的服务器url地址(通常写一个java程序与数据库进行数据交互)
2.method属性：用于设置表单数据的提交方式(通常使用post，比get更安全，传输也不受大小限制)
3.name属性：用于指定表单名称，具有name属性的元素会将用户填写的内容提交给服务器
4.autocomlete属性：用于指定表单是否自动完成功能，是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史纪录显示在一个下拉列表里，以实现自动完成输入
5.novalidate属性：取消表单有效性检查
3.表单控件
<input type="...">
<form action="#" method="post"> <table> <tr> <td>用户名：</td> <td> <!--text单行文本输入框--> <input type="text" value="姓名" maxlength="6"/> </td> </tr> <tr> <td>密码：</td> <td> <!--password密码输入框--> <input type="password" value="" size="40px" maxlength="6"/> </td> </tr> <tr> <td>性别：</td> <td> <!--radio单选按钮--> <input type="radio" name="sex" checked="" id="man"/>男 <input type="radio" name="sex" id="woman"/>女 </td> </tr> <tr> <td>爱好：</td> <td> <!--checkbox复选按钮--> <input type="checkbox"/>唱歌 <input type="checkbox"/>跳舞 <input type="checkbox"/>游泳 </td> </tr> <tr> <td>普通按钮1：</td> <td> <!--button按钮--> <input type="button" value="普通按钮1" id="button1"/><!--定义id方便JS进行相关操作--> </td> <td>提交按钮1：</td> <td> <!--submit按钮--> <input type="submit" value="提交按钮1" id="button2"/><!--定义id方便JS进行相关操作--> </td> <td>重置按钮1：</td> <td> <!--reset按钮--> <input type="reset" value="重置按钮1" id="button3"/><!--定义id方便JS进行相关操作--> </td> <td> <!--图片形式提交按钮--> <input type="image" src="#"/> </td> <td> <!--hidden隐藏域，通常用于后台程序--> <input type="hidden"/> </td> </tr> <tr> <td></td> <td> <!--file文件域--> <input type="file"/> </td> </tr> </table> </form>
<input>type中其余属性：email、url、tel、search、color、number、range、Date pickers(data,month,week)【这些属性一般用于检验输入项是否符合相关格式要求】
<input>中其他属性：autofocus(获取焦点)、form（单独设置表单属性）、list（绑定datalist标签，一个清单项）、multiple、min/max/step、pattern（验证正则表达式）、placeholder（描述输入框期待用户输入何种内容）、required（判断是否有内容，输入内容不能为空）
3.表单控件
textarea控件：轻松创建多行文本输入框
4.select控件：
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> </select>
5.datalist控件：
可自己输入相关内容(与input合并,datalist和input的id需要一致)
<input type="text" id="text1" list="namelist"/> <datalist id="namelist"> <option>选项1</option> <option>选项2</option> <option>选项3</option> </datalist>
