看完了html部分,根据课程案例图片敲了敲代码
最后效果如下:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>青春不常在,抓紧谈恋爱</h3>
<table>
<tr>
<td>性别</td>
<td>
<form>
<input name="sex" type="radio" id="nan"/><label for="nan">男</label>
<!--input中的id名需要和label中得for一样,这样用户在选择时,即使鼠标是放在男女上也可以进行选择-->
<input name="sex" type="radio" id="nv"/><label for="nan">女</label>
</form>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<form>
<select name="year">
<option value="--请选择年--" selected="selected">--请选择年--</option>
<option value="2000">2000</option>
<option value="1999">1998</option>
<option value="1998">1999</option>
</select>
<select name="month">
<option value="--请选择月--" selected="selected">--请选择月--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="day">
<option value="--请选择日--" selected="selected">--请选择日--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
</td>
</tr>
<tr>
<td>所在地区</td>
<td>
<form>
<input name="diqu" type="text" value="北京斯密达"/>
</form>
</td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<form>
<input name="hyzk" type="radio" checked="checked"/>未婚
<input name="hyzk" type="radio"/>已婚
<input name="hyzk" type="radio"/>离婚
</form>
</td>
</tr>
<tr>
<td>学历</td>
<td>
<form>
<input name="xueli" type="text" value="幼儿园"/>
</form>
</td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<form >
<input name="style" type="checkbox" />妩媚的
<input name="style" type="checkbox" />可爱的
<input name="style" type="checkbox" />小鲜肉
<input name="style" type="checkbox" />老腊肉
<input name="style" type="checkbox" />都喜欢
</form>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<form>
<textarea name="zwjs" cols="30" rows="2">自我介绍</textarea>
<!--文本域中的提示文字不能使用value属性,而是直接写在textarea标签的开头和结尾中间。-->
</form>
</td>
</tr>
<tr>
<td></td>
<td>
<form>
<input name="tijiao" type="submit" value="免费注册" />
</form>
</td>
</tr>
<tr>
<td></td>
<td>
<form>
<input name="tongyi" type="checkbox" checked="checked" />我同意注册条款和会议加入条件
</form>
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">我是会员,立即登录
</td>
</tr>
<tr>
<td></td>
<td>
<h2>我承诺</h2>
<ul>
<li>年满18岁</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>