关于标签，将于004章节继续拓展。
一：表格
1.说明
常见处理，显示表格式数据。
手写表格与合并单元格。
属性：
border：设置表格边框，像素值
cellspacing：设置单元格，像素值，默认是2
cellpadding：单元格内容与单元格边框之间的空白间距，默认一个像素
width：设置表格的宽度，像素值
height：设置表格的高度，像素值
align：设置表格在网页中的水平对齐方式，left，right，center
2.案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <table width="500" border="1"> 9 <tr> 10 <td>姓名</td> 11 <td>性别</td> 12 <td>电话</td> 13 </tr> 14 <tr> 15 <td>tom</td> 16 <td>male</td> 17 <td>111111111111</td> 18 </tr> 19 </table> 20 </body> 21 </html>
3.效果
4.修改
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <table width="500" border="1" align="center" cellspacing="0" cellpadding="10"> 9 <tr> 10 <td>姓名</td> 11 <td>性别</td> 12 <td>电话</td> 13 </tr> 14 <tr> 15 <td>tom</td> 16 <td>male</td> 17 <td>111111111111</td> 18 </tr> 19 </table> 20 </body> 21 </html>
5.效果
二：表头标签，表格标题
1.表头标签说明
<th>
文本加粗且居中。
2.表格标签
<caption>
需要写在表格中。
3.案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <table width="500" border="1" align="center" cellspacing="0" cellpadding="10"> 9 <caption>员工信息表格</caption> 10 <tr> 11 <th>姓名</th> 12 <th>性别</th> 13 <th>电话</th> 14 </tr> 15 <tr> 16 <td>tom</td> 17 <td>male</td> 18 <td>111111111111</td> 19 </tr> 20 </table> 21 </body> 22 </html>
4.效果
三：合并单元格
1.说明
rowspan：跨行合并
colspan：跨列合并
2.案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table width="500" border="1" align="center" cellspacing="0" cellpadding="10"> <caption>员工信息表格</caption> <tr> <th>姓名</th> <th>性别</th> <th>电话</th> </tr> <tr> <td>tom</td> <td>male</td> <td>111111111111</td> </tr> <tr> <td>总计</td> <!--合并列，选择跨2列，然后将第三列去掉--> <td colspan="2" align="center">￥1000</td> </tr> </table> </body> </html>
3.效果
四：表单
1.描述
收集用户的信息
一般有表单控件，提示文本，表单域
2.input控件
单标签
3.案例
这个案例，暂时使用的是使用表格的布局，可以先学习学习。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <table width="400" border="0" align="center" cellspacing="0" cellpadding="0"> 9 <caption><h1>青春不常在</h1></caption> 10 <!--调整高度--> 11 <tr height="30"> 12 <td>所在地区</td> 13 <td><input type="text" name="area" value="beijing"></td> 14 </tr> 15 <tr height="30"> 16 <td>用户名</td> 17 <td><input type="user" name="area" value="beijing"></td> 18 </tr> 19 <tr height="30"> 20 <td>密码</td> 21 <td><input type="password" name="password" maxlength="6"></td> 22 </tr> 23 <tr height="30"> 24 <td>性别</td> 25 <td> 26 <!--必须是相同的name--> 27 male：<input type="radio" name="sex" value="male" checked="checked"> 28 female：<input type="radio" name="sex" value="female"> 29 </td> 30 </tr> 31 <tr height="30"> 32 <td>喜欢的类型</td> 33 <td> 34 苹果：<input type="checkbox" name="like" value="pinguo"> 35 香蕉：<input type="checkbox" name="like" value="xiangjiao"> 36 橘子：<input type="checkbox" name="like" value="juzi"> 37 </td> 38 </tr> 39 <tr height="30"> 40 <td>上传头像</td> 41 <td> 42 <input type="file"> 43 </td> 44 </tr> 45 <tr height="30"> 46 <td></td> 47 <td> 48 <input type="button" value="注册"> 49 <input type="submit" value="提交"> 50 <input type="reset" value="重置"> 51 <!--图像形式的提交--> 52 <input type="image" src="00_1.png" width="45" align="center"> 53 </td> 54 </tr> 55 </table> 56 </body> 57 </html>
4.效果
五：下拉菜单
1.说明
默认选择的时候是selected=“selected”。
2.案例
<tr height="30"> <td>年龄</td> <td><select name="age" id=""> <option value="">选择年份</option> <option value="1990" selected="selected">1990</option> <option value="1991">1991</option> <option value="1992">1992</option> </select></td> </tr>
六：表单域
1.说明
form
2.案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <form action=""> 9 用户名：<input type="text"><br> 10 密 码：<input type="password"><br> 11 <input type="submit" value="提交"> 12 </form> 13 </body> 14 </html>