无序排列，表格和表单练习。表格的表头、表内容和表脚应合理分开。注意表单类型的使用。
实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sishuang--homework(2)</title>
</head>
<style>
*{padding: 0; }
ul,li{list-style: none; line-height: 30px}
h3{padding: 4px; margin: 0 }
a{text-decoration:none; color: #333}
a:hover{text-decoration: underline}
table th,table td{text-align:center}
table caption { line-height: 40px; font-weight: bold}
button{cursor: pointer; padding: 2px}
</style>
<body>
<h3>时政新闻</h3>
<ul>
<li><a href="#">上海人均GDP超过2万美元 达到上中等发达国家水平</a></li>
<li><a href="#">美国***片商说服特朗普放宽华为禁令 只采取“针对性行动”</a></li>
<li><a href="#">“中国神船”要来了！南北船合并获确认，市值飙升超200亿</a></li>
<li><a href="#">督导组赴酒店抓涉黑分子 敲错门发现公安局长等3人聚赌</a></li>
<li><a href="#">美国拟对40亿美元欧盟输美商品加征更多关税</a></li>
</ul>
<br/><br/><br/>
<table border="1" cellpadding="0" cellspacing="0">
<caption>学生档案</caption>
<thead>
<tr>
<th width="40">序号</th>
<th width="60">姓名</th>
<th width="60">性别</th>
<th width="60">课程</th>
<th width="70">分数</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
<td>语文</td>
<td>76</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>男</td>
<td>数学</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">所有学生分数总分</td>
<td>276</td>
</tr>
</tfoot>
</table>
<br/><br/><br/>
<h3>表单</h3>
<form id="form1" action="#" method="POST">
<p>
<label for="username">用户名：</label>
<input type="text" name="username" id="username" placeholder="至少输入8个字节" required />
</p>
<p>
<label for="pwd">密 码：</label>
<input type="password" name="pwd" id="pwd" placeholder="字母加数字的8个字节组合" required />
</p>
<p>
<label for="email1">邮 箱：</label>
<input type="email" name="email1" id="email1" placeholder="XXX@XXX.XXX" />
</p>
<p>
<label for="birthday">生 日：</label>
<input type="date" name="birthday" id="birthday" />
</p>
<p>
<label for="age">年龄：</label>
<input type="number" min="10" max="99" id="age" name="age" />
</p>
<p>
<label for="like">爱好:</label>
<input type="checkbox" id="php" name="like" />
<label for="php">php</label>
<input type="checkbox" id="java" name="like" />
<label for="java">java</label>
<input type="checkbox" id="javascript" name="like" />
<label for="javascript">javascript</label>
</p>
<p>
<label for="sex">性别:</label>
<input type="radio" id="male" name="sex" />
<label for="male">男</label>
<input type="radio" id="female" name="sex" />
<label for="female">女</label>
<input type="radio" id="herm" name="sex" />
<label for="herm">人妖</label>
</p>
<p>
<h5>下拉框</h5>
<select name="select1" id="select">
<optgroup label="fore">
<option value="HTML" selected>HTML</option>
<option value="javascript">javascript</option>
</optgroup>
<optgroup label="back">
<option value="PHP">PHP</option>
<option value="JAVA">JAVA</option>
</optgroup>
</select>
</p>
<p>
<label for="info">简介:</label><br/>
<textarea rows="10" cols="40" id="info" name="info" ></textarea>
</p>
<p>
<button type="submit">submit</button>
<button type="reset" >reset</button>
<button type="button">Ajax</button>
</p>
</form>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例