结果：
HTML表格一般由表格标题、表头、表格主体、表格行、表格列、单元格、表注等部分组成
表格由 <table> 标签来定义。 每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。 字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<!doctype HTML> <html> <head> <title>表格</title> </head> <body> <table border="1"> 边框属性，表示边框的宽度 <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> <!-- tr表示行，td表示列 --> </table> </body> </html>表格的表头单元格使用 <th> 标签进行定义。 大多数浏览器会把表头显示为粗体居中的文本：
<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table><caption>标签--------定义表格的标题
<caption align="水平对齐方式" valign="垂直对齐方式"> 表格标题 </caption><thead>标签 ---------表格的页眉（表头部分）
<tbody>标签 ---------表格的主体
<tfoot>标签 ---------定义表格的页脚（表格的注脚）
表格三要素 table、tr、td 缺一不可。
语法：
<table 属性1="" 属性2="" ...> </table><table> 标签（定义表格） 常用属性：
border="1" 表格边框的宽度 bordercolor="#fff" 表格边框的颜色 cellspacing="5" 单元格与单元格之间的空白间距 cellpadding="6" 设置单元格内容与其边框之间的空白距离宽度 width="500" 表格的总宽度 height="100" 表格的总高度 bgcolor="#fff" 表格整体的背景色 align="对齐方式" 设置表格对齐方式<th> 标签（定义表格的表头单元格） 常用属性:
width="500" 单元格的宽度，设置后对当前一列的单元格都有影响 height="100" 单元格的高度，设置后对当前一行的单元格都有影响 bgcolor="fff" 单元格的背景色 align="right" 单元格文字的水平对齐方式 (参数left、center、right) valign="top" 单元格文字的垂直对齐方式 (参数middle、bottom、top) rowspan="3" 合并垂直水平方向的单元格 colspan="3" 合并水平方向单元格<tr> 标签（定义表格的行） 常用属性:
bgcolor="#fff" 行的颜色 align="right" 行内文字的水平对齐方式 (参数有left、center、right) valign="top" 行内文字的垂直对齐方式 (参数有top、middle、bottom)<td>标签（定义表格的列） 常用属性：
定义表格内文字的对齐 水平排列：align="right" 表格整体对齐方式 (参数有 left、center、right) 垂直排列：valign=top/ middle /bottom/ baseline(基线)举例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="DZQ" content="width=device-width, initial-scale=1.0"> <title>课程表</title> </head> <body> <style> table tr th,table tr td {border: 1px solid black;} </style> <table width="600" border="4" cellspacing="5" cellpadding="6" style="border-style:solid; border-color: #4C96FF; "> <caption align="center">课程表</caption> <tr> <th>项目</th> <th colspan="3" align="center">理论课：11</th> <th colspan="2" align="center">实验课：ss</th> <th colspan="2" align="center">休息：00</th> </tr> <tr bgcolor=silver> <td>星期</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期四</td> <td>星期五</td> <td>星期六</td> <td>星期天</td> </tr> <tr> <td rowspan="2">上午</td> <td align=left>11</td> <td align=right>00</td> <td align=left>11</td> <td align=right>00</td> <td align=left>11</td> <td align=right>00</td> <td rowspan="2" valign=bottom align="right">00</td> </tr> <tr> <td align=left>11</td> <td align=left>11</td> <td align=left>11</td> <td align=right>00</td> <td align=left>11</td> <td align=left>11</td> </tr> <tr> <td rowspan="2">下午</td> <td align=left>ss</td> <td align=left>ss</td> <td align=right>00</td> <td align=right>00</td> <td align=left>ss</td> <td align=right>00</td> <td rowspan="2" align=right>00</td> </tr> <tr> <td align=right>00</td> <td align=left>ss</td> <td align=right>00</td> <td align=right>00</td> <td align=right>00</td> <td align=left>ss</td> </tr> </table> </body> </html>用户需要使用它来输入数据，并向服务器提交数据，服务器的有关应用程序将处理提交信息，处理结果或是将用户提交的信息存储在服务器端的数据库中，或是将有关信息返回到客户端的浏览器上。用户在表单中输入的数据将作为请求参数发送给服务器，从而实现用户与web应用的动态交互
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,
比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)、提交重置按钮等等。最终通过表单提交实现数据传递的组件
表单使用表单标签 <form> 来设置
<form> <input 元素> </form>在HTML中，表单form标签中可以添加一系列属性
accept-charset：定义服务器可处理表单数据字符集 action：属性值为URL，定义当提交表单时向该URL发送表单数据 method：属性值为get或post，用于定义发送form-data的HTTP方法 get 方法是默认的，使用get时，表单数据在页面地址栏可见 post 在页面地址栏中被提交的数据是不可见的 name：定义表单的名称 target：定义何处打开action URL，属性值一般为_blank, _selfform标签具体来说有两方面的作用：
限定表单范围，即定义一个区域，表单各元素都要设置在这个区域内，点击提交按钮时，提交的也是这个区域的数据携带表单的相关信息，如处理表单的程序基本语法
<form name="表单名称" method="提交方法" action="处理程序"> ... </form>多数情况下被用到的表单标签是输入标签（<input> ）。 <input>标签根据不同的type属性值，会有不同的的表现形式，
例如：文本字段、文本域、列表、单选框、复选框、密码框、文本控件、分组、单选按钮基本语法
<input type="元素类型" name="表单元素名称">注：表单中的单选按钮可以设置以下几个属性：value、name、checked
value：提交数据到服务器的值（后台程序PHP使用） name：为控件命名，以备后台程序 ASP、PHP 使用 checked：当设置 checked="checked" 时，该选项被默认选中 type属性值描述text设置单行文本框元素password设置密码元素file设置文件元素hidden设置隐藏元素radio设置单选框元素checkbox设置复选框元素button设置普通按钮元素submit设置提交按钮元素reset设置重置按钮元素 <form> <p>你生活在哪个国家？</p> <input type="radio" name="country" value="China" checked="checked">中国<br/> <input type="radio" name="country" value="the USA">美国 </form> 注意：同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“country”， 这样同一组的单选按钮才可以起到单选的作用。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域通过<input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>注：
input属性中 type类型为reset表示重置 type类型为submit表示提交 type类型为text表示文本域
label标签主要作用是为input标签定义标记文本域添加关联标记通过label标签的for属性，其属性值与input标签中的id属性值一一对应
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单</title> </head> <body> <h3>HTML5 + CSS + JS --- HTML表单<form>文本域</h3><hr><br> <!-- 添加文档主体内容 --> <form action="ch06-html-form-textfield.php" method="get" target="_blank"> <table> <caption>文本域表单</caption> <tr> <th> <label for="id_form_username">用户名:</label> </th> <td> <input type="text" name="name_form_username" id="id_form_username" /> </td> </tr> <tr> <th> <label for="id_form_nickname">昵称:</label> </th> <td> <input type="text" name="name_form_nickname" id="id_form_nickname" /> </td> </tr> <tr> <th> <label for="id_form_sex">性别:</label> </th> <td> <input type="text" name="name_form_sex" id="id_form_sex" /> </td> </tr> <tr> <th> <label for="id_form_age">年龄:</label> </th> <td> <input type="text" name="name_form_age" id="id_form_age" /> </td> </tr> <tr> <th> <label for="id_form_level">级别:</label> </th> <td> <input type="text" name="name_form_level" id="id_form_level" /> </td> </tr> <tr> <td></td> <td> <input type="reset" value="重置" /> <input type="submit" value="提交" /> </td> </tr> </table> </form> </body> </html>密码字段通过标签<input type=“password”> 来定义:
<form> Password: <input type="password" name="pwd"> </form><input type=“radio”> 标签定义了表单单选框选项
<form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form><input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form><input type=“submit”> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
<form name="input" action="https://blog.csdn.net/qq_44853882" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>主要用于在不同页面中传递域中设定的值
基本语法：
<input type="hidden" name="域名称" value="域值"> name设置隐藏域的名称 value用于设置隐藏域需要传递的值用于创建文件域，文件域可以将本地文件上传到服务器端
基本语法：
<input type="file" name="域名称">注：name设置文件域的名称，用于在脚本中获取域的数据。 在将文件内容上传到服务器，还必须修改表单的编码，这需要使用form标签的enctype属性，应该将属性的值设置为multipart/form-data，同时提交表单方法必须为post
在使用下拉列表时，用户每次只能选择一项，这点和单选按钮的功能比较接近
但是当选项很多时，下拉列表的优势就比较明显
下列列表通过<select><option>标签来实现
select标签的name=web属性表示，PHP服务器将通过该属性值获取下拉列表的选项值 通过option标签元素value定义了6中语言类型
修改默认项方式：在option中添加selected属性即可
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单</title> </head> <body> <h3>HTML5 + CSS + JS --- HTML表单<form>示例</h3><hr><br> <!-- 添加文档主体内容 --> <form action="ch06-html-form-select.php" method="get" target="_self"> <table class="csstable"> <caption>下拉列表表单</caption> <tr> <th>请选择您最喜爱的编程语言:</th> </tr> <tr> <td> <select name="web"> <option value="html">HTML</option> <option value="css">CSS</option> <option value="js" selected="selected">JavaScript</option> <option value="php">PHP</option> <option value="asp">ASP.Net</option> <option value="C#">C#</option> </select> </td> </tr> <tr> <td> <hr> </td> </tr> <tr> <td> <input type="reset" value="重置" /> <input type="submit" value="提交" /> </td> </tr> </table> </form> </body> </html>多项选择列表是指一次可以选择多个列表选项，且一次可以显示1个以上列表选项的选择列表
基本语法：
<select name="列表名称" size="显示的选项数目" multiple="multiple"> <option value="选项值" selected="selected"> 选项一 </option> <option value="选项值" selected="selected"> 选项二 </option> <option value="选项值"> 选项三 </option>size设置同时显示的列表选项个数(默认为1)，取值大于或等于1 multiple设置列表中的项目可多选 selected设置默认选项，可对多个列表选项进行此属性的设置
多行文本域textarea可以在控件内输入多行数据信息元素，且可以设定标签元素的行高和列宽
基本语法：
<textarea name="文本区域名称" rows="行数" cols="字符数"> ...(此处输入的为默认文本) </textarea> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="css/style.css" /> <title>HTML 之表单</title> </head> <body> <h3>HTML5 + CSS + JS --- HTML表单<form>多行文本域</h3><hr><br> <!-- 添加文档主体内容 --> <form action="ch06-html-form-textarea.php" method="post" target="_self"> <table class="csstable"> <caption>多行文本域表单</caption> <tr> <th> <label for="id_textarea_web">请写出<br>您喜爱的<br>编程语言:</label> </th> <td> <textarea name="name_textarea_web" id="id_textarea_web" rows="5" cols="25"> </textarea> </td> </tr> <tr> <td colspan="2"> <hr> </td> </tr> <tr> <td></td> <td> <input type="reset" value="重置" /> <input type="submit" value="提交" /> </td> </tr> </table> </form> </body> </html>