1. 综合案例——注册页面

使用表单标签、列表标签、表格标签对如下图所示的注册页面进行代码还原:

HTML篇九_表单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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" id="male" name="sex" checked="checked"> <label for="male"></label>
<input type="radio" id="female" name="sex"> <label for="female"></label>
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>生日</td>
<td>
<select>
<option selected="selected">--请选择年--</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
</select>
<select>
<option selected="selected">--请选择月--</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
<select>
<option selected="selected">--请选择日--</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</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" id="status1" checked="checked"> <label for="status1">未婚</label>
<input type="radio" name="marriage" id="status2"> <label for="status2">已婚</label>
<input type="radio" name="marriage" id="status3"> <label for="status3">离婚</label>
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>学历</td>
<td>
<input type="text" name="education" value="幼儿园">
</td>
</tr>
<!-- 第六行 -->
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="like" id="favor1" > <label for="favor1">妩媚的</label>
<input type="checkbox" name="like" id="favor2" > <label for="favor2">可爱的</label>
<input type="checkbox" name="like" id="favor3" > <label for="favor3">小鲜肉</label>
<input type="checkbox" name="like" id="favor4" > <label for="favor4">老腊肉</label>
<input type="checkbox" name="like" id="favor5" > <label for="favor5">都喜欢</label>
</td>
</tr>
<!-- 第七行 -->
<tr>
<td>自我介绍</td>
<td>
<textarea rows="2" cols="20">自我介绍</textarea>
</td>
</tr>
<!-- 第八行 -->
<tr>
<td></td>
<td>
<input type="submit" name="tijiao" value="免费注册" />
</td>
</tr>
<!-- 第九行 -->
<tr>
<td></td>
<td>
<input type="checkbox" name="agree" value="1" checked="checked" />我同意注册条款和会员加入标准
</td>
</tr>
<!-- 第十行 -->
<tr>
<td></td>
<td>
<a href="login.html" target="_blank"> 我是会员,立即登录 </a>
</td>
</tr>
<!-- 第十一行 -->
<tr>
<td></td>
<td>
<h3>我承诺</h3>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>

实现结果如下图

HTML篇九_html_02

2. 实现过程问题总结

1.​​<input>​​​标签的checkbox属性,想让页面在打开时默认选中某一项时使用的属性是​​checked="checked"​​​。在实现过程中记差了,记成了​​selected="selected"​​​,而​​selected="selected"​​​属性是下拉标签​​<select></select>​​的属性,为在页面打开时默认选中某一个下拉选项。

2.在使用多个​​radio​​​和​​checkbox​​​属性,绑定​​<label></label>​​​标签时,由于有多个选项,在实现过程中把所有​​<label></label>​​​标签里的​​for​​​属性值都设成了一样的,导致最终在页面上只能勾选一个选项,剩余的选项均无法勾选!最终将​​<label></label>​​​标签里的​​for​​属性值尽心区分后,功能均正常!

3. 查阅文档

推荐网址:

1)百度: ​​http://www.baidu.com​​​

2)W3C: ​​​https://www.w3school.com.cn/html/index.asp​​​

3)MDN: ​​​https://developer.mozilla.org/zh-CN/docs/Web/HTML​​此网站比较有权威性