HTML表格
表格是由行和列组成的栅格，这些行和列组成一个个单元格，每个单元格都可以用于放置文本或图形等。
表格由<table>开始，由</table>结束
<tr>标签定义表格的行，表格有多少行，就有多少个<tr>标签
<td>标签定义表格的单元格，有多少单元格就有多少标签
<th>标签定义表格的表头，与<td>类似，内容会加粗显示
<html> <head> <title>表格标签示例</title> </head> <body> <table > <tr><th>第一讲</th><th>第二讲</th><th>第三讲</th></tr> <tr><td>HTML概念</td><td>HTML元素</td><td>HTML属性</td></tr> </table> </body> </html>
width,height这两个属性用于设置表格的大小。如果不设置会根据各行各列的总和来确定宽高。可以使用具体的数字（单位是像素）来表示，也可以是用百分比的形式（与整个屏幕相比）
border属性，设置表格的边框的大小，表示边框的边厚度和框线。如果设置成0，表示不需要边框和框线
rowspan和colspan属性用在<td>或<th>标签中，表示单元格要跨越的行的个数或列的个数。
<html> <head> <title>表格标签示例</title> </head> <body> <table border="2" width="50%" height="50%"> <tr><th rowspan="2">第一讲</th><th>第二讲</th><th>第三讲</th></tr> <tr><td>HTML概念</td><td>HTML元素</td><td>HTML属性</td></tr> </table> </body> </html>
HTML表单
表单用于收集不同类型的用户输入，是实现动态交互的基础。
常用表单元素
|
元素描述 |
元素类型 |
|
单行文本框 |
text |
|
密码框 |
password |
|
单选按钮 |
radio |
|
复选框 |
check |
|
多行文本框 |
textarea |
|
下拉列表 |
select |
|
提交按钮 |
submit |
|
重置按钮 |
reset |
1表单
所有表单元素都应该在<form>和</form>之间，表单之间不可以嵌套或者重叠
method属性设置表单的提交方式，默认为get. get表示表单数据作为URL变量提交，post表示表单数据作为HTTP post方式发送。
action属性设置表单的提交对象，action=”deal.jsp”表示表单元素的信息提交给服务器上的deal.jsp
1 单行文本框
size属性设置文本框的显示长度，默认值为20
value属性设置文本框的初始值
readonly属性，文本框的内容不能被编辑
name文本域的名称
<html> <head> <title>单行文本框示例</title> </head> <body> <form method="post" action="deal.jsp"> <input type="text" name="username" size="20"> <input type="text" name="username1" size="20" value ="sun" readonly> </form> </body> </html>
2密码框
输入的内容看不到，但是可以被发送到服务器
属性和单行文本框类似
<html> <head><title>密码框示例</title></head> <body> <form action="deal.jsp"> <input type="password" name="pw" size="20" value="123"> </form> </body> </html>
3 单选按钮
checked属性表明该选项被默认选中
为实现选项之间的单选效果，需要每个选项的name属性保持一致
<html> <head><title>单选按钮示例</title></head> <body> <p><input type="radio" name="career" value="工人" checked>工人</p> <p><input type="radio" name="career" value="农民">农民</p> <p><input type="radio" name="car" value="我">我</p> </body> </html>
4 复选框
为实现服务器端一次性读取所有选中的选项，需要每个选项的name一致
<html> <head><title>复选框示例</title></head> <body> </p> <input type="checkbox" name="hobbies" value="音乐">音乐 <input type="checkbox" name="hobbies" value="旅游" checked>旅游 <input type="checkbox" name="hobbies" value="读书">读书 </p> </body> </html>
5 多行文本框
rows属性文本的行数
cols属性文本的列数
文本的初始内容写在<textarea></textarea>之间
注：多行文本框不是input type
<html> <head><title>多行文本框示例</title></head> <body> <p>请输入你的留言</p> <p><textarea name="message" rows="5" cols="30">此处输入内容</textarea></p> </body> </html>
6 下拉列表
size表示下拉列表可见选项
multiple属性可以设置为选择多项，当设置为多项的时候，size需要设置为大于1
selected属性表明该项是默认选中
<html> <head><title>下拉列表示例</title></head> <body> <select size="2" name="mysite" multiple="multiple"> <option value="163" selected>网易</option> <option value="sohu">搜狐</option> <option value="sina">新浪</option> </select> </body> </html>
7 提交按钮
type=”submit”是提交按钮的标识
value是提交按钮的值，同时也是提交按钮上显示的内容
name是提交按钮的名字，可以根据这个名字来获取提交按钮的值
每个表单至少由一个提交按钮完成提交，可以有多个按钮完成不同的提交动作
多个提交按钮的名字可以相同，但是值不一样；也可以使用不同的名字，根据名字区分不同的提交按钮
<html> <head><title>提交按钮示例</title></head> <body> <input type="submit" value="提交" name="b1"> </body> </html>
8重置按钮
把表单元素恢复到原始状态
<html> <head><title>重置按钮示例</title></head> <body> <input type="reset" value="重置" name="b2"> </body> </html>