9 html综合案例-注册界面
9 综合案例-注册界面
一个只有html骨架的注册页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册页面</title>
</head>
<body><h4>青春抓不住，抓紧谈恋爱</h4><table width="600"><tr><td>性别：</td><td><input type="radio" name="sex" value="nan" checked="checked" id="男"><img src="man.jpg" id="男"> <label for="男"> 男</label><input type="radio" name="sex" value="nv" id="女"><img src="women.jpg" id="女"> <label for="女"> 女</label></td></tr><!-- 性别 --><tr><td>生日：</td><td><select><option>--请选择年--</option><option>1985</option><option>1986</option><option>1987</option><option>1988</option><option>1989</option><option>1990</option><option>1991</option><option>1992</option><option>1993</option><option>1994</option><option>1995</option><option>1996</option><option>1997</option><option>1998</option><option>1999</option><option>2000</option></select><select><option>-请选择月--</option><option>1月</option><option>2月</option><option>3月</option><option>4月</option><option>5月</option><option>6月</option><option>7月</option><option>8月</option><option>9月</option><option>10月</option><option>11月</option><option>12月</option> </select><select><option>--请选择日--</option><option>1日</option><option>2日</option><option>3日</option><option>4日</option><option>5日</option><option>6日</option><option>7日</option><option>9日</option><option>10日</option><option>11日</option><option>12日</option><option>13日</option><option>14日</option><option>15日</option><option>16日</option><option>17日</option><option>18日</option><option>19日</option><option>20日</option><option>21日</option><option>22日</option><option>23日</option><option>24日</option><option>25日</option><option>26日</option><option>27日</option><option>28日</option><option>29日</option><option>30日</option><option>31日</option></select></td></tr><!-- 生日 --><tr><td>所在地区：</td><td><input type="text" name="address" value="北京思密达"></td></tr><!-- 地区 --><tr><td>婚姻状况：</td><td><input type="radio" name="marriage" value="weihun" checked="checked" id="未婚"><label for="未婚"> 未婚</label><input type="radio" name="marriage" value="yihun" id="已婚"><label for="已婚"> 已婚</label><input type="radio" name="marriage" value="lihun" id="离婚"><label for="离婚"> 离婚</label> <br></td></tr><!-- 婚姻 --><tr><td>学历：</td><td><input type="text" name="study" value="幼儿园"></td></tr><!-- 学历 --><tr><td>喜欢的类型：</td><td><input type="checkbox" name="like" id="wumei"> <label for="wumei">妩媚的</label><input type="checkbox" name="like" id="keaid"><label for="keaid">可爱的</label><input type="checkbox" name="like" id="xiaoxianrou"><label for=" xiaoxianrou">小鲜肉</label><input type="checkbox" name="like" id="laolarou"><label for="laolarou">老腊肉</label><input type="checkbox" name="like" id="douxihuan"><label for="douxihuan">都喜欢</label> <br></td></tr><!-- 喜好 --><tr><td>自我介绍：</td><td><textarea rows="3" cols="20">自我介绍</textarea></td></tr><!-- 自我介绍 --><tr><td></td><td><input type="submit" value="免费注册"> </td></tr><!--提交按钮 --><tr><td></td><td><input type="checkbox" name="xieyi" checked="checked" id="xieyi" ><label for="xieyi">我同意注册条款和会员加入标准</label><br></td></tr><tr><td> </td><td><a href="#">我是会员，立即登录</a> </td></tr><tr><td></td><td><h5>我承诺</h5><ul><li>年满18岁、单身</li><li>抱着严肃的态度</li><li>真诚寻找另一半</li></ul></td></tr></table>
</body>
</html>我的反思：
1.我一开始使用了表单标签，两边很乱，对不齐
应该使用表格标签，分成两个单元格
2.最下面我以为是自定义列表
应该是<h5> 标题+无序列表