html综合练习
此注册页面：1. 含有表格标签，让内容更加排列整齐 2. 列表标签 3. 表单标签
第一步是先去分析要做的页面，分几块，表格分几行，每行有几个单元格，在单元格里嵌套其他标签
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>综合练习HTML</title>
</head>
<body>
<h4>相亲网站</h4>
<!--下方是一个表格，可以定义它的宽度，同时边框现设为1，最后在为0-->
<!--表格每行有两个单元格-->
<table width="600" border="1">
<!--第一行，第二个单元格是单选按钮，有相同的name,value属性可以不写，主要给后台看的，但若写的话，尽量见名知意-->
<!--还在每个按钮后添加了小图标（图片），为了当点击图片或者文字时可以选中按钮，使用label标签-->
<!--使用的图片在当前文件的上级目录的imagine的子文件-->
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="nan" id="aa"><label for="aa"><img src="../imagine/sa.jpg">男</label>
<input type="radio" name="sex" value="nv" id="ss"><label id="ss"><img src="../imagine/sa.jpg">女</label>
</td>
</tr>
<!--第二行,第二个单元格是放入三个下拉列表表单,如果自己没有利用selected="selected"设置默认选择（显示在列表的第一行），系统会将第一个作为默认选择-->
<tr>
<td>生日</td>
<td>
<select>
<option>--请选择年--</option>
<option>2002</option>
<option>2001</option>
<option>2000</option>
</select>
<select>
<option>--请选择月--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>--请选择日--</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</td>
</tr>
<!--第三行，嵌套文本框，想在文本框默认显示一些文字，使用input的value属性值-->
<tr>
<td>所在的地区</td>
<td><input type="text" value="俺来自山东"></td>
</tr>
<!--第四行，第二个单元格是复选框,name相同-->
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="love">可爱
<input type="checkbox" name="love">呆萌
<input type="checkbox" name="love">有趣
<input type="checkbox" name="love">博学
</td>
</tr>
<!--第五行，嵌套一个文本域-->
<tr>
<td>自我介绍</td>
<td>
<textarea>
请开始你的自我介绍：
</textarea>
</td>
</tr>
<!--第六行,左边单元格是空的，右边单元格时提交按钮，提交二字可以利用input的value属性来修改为想表达的文本，value="为想表达的文本"-->
<tr>
<td></td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<!--第七行,第一个单元格为空，第二个单元格为一个默认的复选框-->
<tr>
<td></td>
<td>
<input type="checkbox" checked>我同意注册协议
</td>
</tr>
<!--第八行，,第一个单元格为空，第二个单元格为一个虚拟的超链接-->
<tr>
<td></td>
<td><a href="#">我是会员，立即登录</a></td>
</tr>
<!--第九行，,第一个单元格为空，第二个单元格为一个小标题和一个无序列表-->
<tr>
<td></td>
<td>
<h5>我承诺：</h5>
<ul>
<li>单身</li>
<li>严肃</li>
<li>认真</li>
</ul>
</td>
</tr>
<!--最后直接将表格的边框归为0-->
</table>
</body>
</html>
浙公网安备 33010602011771号