HTML实训
1.表单
代码如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>表单</title> </head> <H1>gansha</H1> <body bgcolor="#FF6633"> <font size="+5"> <form action="" method="get" id="" name="mmm"> 名：<input style="size:auto;color:#F03; background:#C66; border-color:#3C3;"padding="0";type="text" name="uname" width="50" height="500" value="名"/><br/><br/><br/> 密：<input type="password" name="ppp"> <br/><br/><br/> 爱：<input type="checkbox" name="PQ" pattern="0" width="50" height="50">PQ <input type="checkbox" name="1654">1654 <input type="checkbox" name="222">222 <input type="checkbox" name="2326">2326<input type="checkbox" name="45">45 <br/><br/><br/> sex:<input type="radio" name="sex">man <input type="radio" name="sex">woman <hr/> <input type="button" value="ok"/> <input type="reset" name="res" value="cancel"/> </form></font> <br/><br/><br/> </body> </html>
运行结果：
2.表格
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>表格</title> </head> <body style="color:#369"><font face="微软雅黑"> <table width="1500" border="1" cellspacing="0" align="center" bordercolor="#99CC66"> <caption>测试啊啊啊</caption> <tr bgcolor="#00FF99" height="50"> <th>用户名</th><!--使用 scope 属性，可以将数据单元格与表头单元格联系起来。 通过属性值 row，表头行包括的所有表格都将和表头单元格联系起来。指定 col，会将当前列的所有单元格和表头单元格绑定起来。 使用 rowgroup 和 colgroup 会将单元格的行组（由 <thead>、<tbody> 或 <tfoot> 标签定义）或列组中的所有单元格和表头单元格绑定起来（由 <col> 或 <colgroup> 标签定义）。--> <th scope="col">用户角色</th> <th scope="col">联系方式</th> <th scope="col">IP地址</th> <th scope="col">详细描述</th> <th scope="col">基本操作</th> </tr> <tr align="center" bgcolor="#CC3366"> <td>admin</td> <td>系统管理员</td> <td>111111111</td> <td>255.255.255.255</td> <td>未知</td> <td><a href="1.html">删除 </a>|<a href="2.html">查看</a></td> </tr> <tr align="center" bordercolor="#99CC66"> <td>admin</td> <td>系统管理员</td> <td>111111111</td> <td>255.255.255.255</td> <td>未知</td> <td><a href="1.html">删除 </a>|<a href="2.html">查看</a></td> </tr> <tr align="center"> <td>admin</td> <td>系统管理员</td> <td>111111111</td> <td>255.255.255.255</td> <td>未知</td> <td><a href="1.html">删除 </a>|<a href="2.html">查看</a></td> </tr> <tr align="center"> <td>admin</td> <td>系统管理员</td> <td>111111111</td> <td>255.255.255.255</td> <td>未知</td> <td><a href="1.html">删除 </a>|<a href="2.html">查看</a></td> </tr> <tr align="center"> <td>admin</td> <td>系统管理员</td> <td>111111111</td> <td>255.255.255.255</td> <td>未知</td> <td><a href="1.html">删除 </a>|<a href="2.html">查看</a></td> </tr> <tr align="center"> <td>admin</td> <td>系统管理员</td> <td>111111111</td> <td>255.255.255.255</td> <td>未知</td> <td><a href="1.html">删除 </a>|<a href="2.html">查看</a></td> </tr> <tr align="center"> <td>admin</td> <td>系统管理员</td> <td>111111111</td> <td>255.255.255.255</td> <td>未知</td> <td><a href="1.html">删除 </a>|<a href="2.html">查看</a></td> </tr> <tr align="center"> <td>admin</td> <td>系统管理员</td> <td>111111111</td> <td>255.255.255.255</td> <td>未知</td> <td><a href="1.html">删除 </a>|<a href="2.html">查看</a></td> </tr> <tr align="center"> <td>admin</td> <td>系统管理员</td> <td>111111111</td> <td>255.255.255.255</td> <td>未知</td> <td><a href="1.html">删除 </a>|<a href="2.html">查看</a></td> </tr> <tr align="center"> <td>admin</td> <td>系统管理员</td> <td>111111111</td> <td>255.255.255.255</td> <td>未知</td> <td><a href="1.html">删除 </a>|<a href="2.html">查看</a></td> </tr> </table> </font> </body> </html>
运行：
3.表格合并
代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>段落属性</title> </head> <body > <table width="400" border="1" cellspacing="0" cellpadding="0" align="center"> <tr height="50" align="center"> <td colspan="4">网站</td> </tr> <tr height="50" align="center"> <td colspan="2">花1</td> <td colspan="2">花2</td> </tr> <tr height="50" align="center"> <td width="25%">花3</td> <td colspan="2" rowspan="3" width="50%" height="50%" ><img width="100%" height="100%" src="图片/a2.png"</td> <td width="25%">花3</td> </tr><tr height="50" align="center"> <td width="25%">花3</td><td width="25%">花3</td> </tr><tr height="50" align="center"> <td width="25%">花3</td><td width="25%">花3</td> </tr> </tr><tr height="50" align="center"> <td colspan="2">花1</td> <td colspan="2">花2</td> </tr> </table> </body> </html>
运行结果：
