前两章HTML的综合练习
前言
HTML基础和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>
<center>
<h3>
<font color="red">注 册 信 息</font>
</h3>
</center>
<hr color="black" size="1" width="80%" />
<a id="top"></a>
<form method="post" align="center" id="registinformation">
<table align="center" border="0" cellpadding="2" cellpacing="2">
<tr>
<td>姓名：</td>
<td><input type="text" name="name" /></td>
<td>
<font color="red">*</font>
</td>
</tr>
<tr>
<td>学号：</td>
<td><input type="text" name="number" /></td>
<td>
<font color="red">*</font>
</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password" value="请输入8位数字密码"></td>
<td>
<font color="red">*</font>
</td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" value="man" name="man" checked />男
<input type="radio" value="woman" name="woman" />女
</td>
</tr>
<tr>
<td>身高：</td>
<td><input type="text" value="175" name="height" size="8" />厘米</td>
</tr>
<tr>
<td>体重：</td>
<td><input type="range" name="wight" min="1" max="100" step="5" />千克</td>
</tr>
<tr>
<td>生日：</td>
<td><input type="date" /></td>
</tr>
<tr>
<td>电话号码：</td>
<td><input type="tel" name="tel" value="请输入11位数字号码" /></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="email" name="email" /></td>
</tr>
<tr>
<td>个人主页：</td>
<td><input type="text" name="owner" /></td>
</tr>
<tr>
<td>家庭住址：</td>
<td>
<select>
<option value="cd" checked>成都</option>
<option value="sh">上海</option>
<option value="bj">北京</option>
</select>
</td>
</tr>
<tr>
<td>我的颜色：</td>
<td><input type="color" /></td>
</tr>
<tr>
<td>我的运动：</td>
<td>
<input type="checkbox" name="basketball" />篮球
<input type="checkbox" name="soccer" checked />足球
<input type="checkbox" name="swim" />游泳
<input type="checkbox" name="pp" checked />乒乓球
</td>
</tr>
<tr>
<td>常用网址：</td>
<td><input type="text" name="usuallywebsite" /></td>
</tr>
<tr>
<td>简历2份：</td>
<td><input type="file" value="选择文件" name="interview" /></td>
</tr>
<tr>
<td>个人自述：</td>
<td><textarea name="ownintroduce" cols="30" rows="5" value="我是一位特别热爱学习的好孩子。。。"></textarea></td>
</tr>
<tr>
<td> <input type="submit" value="注册" /></td>
<td> <input type="reset" value="重置" /></td>
</tr>
</table>
</form>
<hr color="black" size="1" width="80%" />
<center>
<a href="" name="tel">电话</a>
<a href="" name="passage">短信</a>
<a href="" name="e-mail">E-mail</a>
<a href="#top">返回顶部</a>
</center>
</body>
</html>运行结果：
参考代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">-->
<title>新生报到</title>
<style>
a {
text-decoration: none;
}
a:link {
color: blue;
}
a:visited {
color: gray;
}
a:hover {
color: red;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
<h3 id="title" align="center"><font color="#FF0000">注 册 信 息</font></h3>
<hr noshade size="1" width="80%">
<form action="" id="form1" autocomplete="on" method="get">
<table width="80%" border="0" align="center" cellspacing="0">
<tr>
<td width="39%" align="right">姓名：</td>
<td width="5%"></td>
<td width="33%" align="left"><input type="text" name="user_name" maxlength="10" autofocus required/><font color="#FF0000"> *</font></td>
<td width="23%" rowspan="12" align="left" valign="top"><input type="image" name="userPortrait" src="images/Andy.jpg" width="150"/> </td>
</tr>
<tr>
<td width="39%" align="right">学号：</td>
<td></td>
<td align="left"><input type="text" name="user_id" required/><font color="#FF0000"> *</font></td>
</tr>
<tr>
<td width="39%" align="right">密码：</td>
<td></td>
<td align="left"><input type="password" name="user_paw" placeholder="请输入8位数字密码" pattern="\d{8}" required /><font color="#FF0000"> *</font></td>
</tr>
<tr>
<td width="39%" align="right">性别：</td>
<td></td>
<td align="left"><label><input type="radio" name="user_sex" value="man" checked/>男</label>
<input type="radio" id="user_sex" name="user_sex" value="woman" /><label for="user_sex">女</label></td>
</tr>
<tr>
<td width="39%" align="right">身高：</td>
<td></td>
<td align="left"><input type="number" name="user_height" min="150" max="210" value="175" step="5" />厘米</td>
</tr>
<tr>
<td width="39%" align="right">体重：</td>
<td></td>
<td align="left"><input type="range" name="user_weight" min="40" max="90" value="55" step="2" />千克</td>
</tr>
<tr>
<td width="39%" align="right">生日：</td>
<td></td>
<td align="left"><input type="date" name="user_birthday"/></td>
</tr>
<tr>
<td width="39%" align="right">电话号码：</td>
<td></td>
<td align="left"><input type="tel" name="user_tel" pattern="\d{11}" placeholder="请输入11位数字号码"/></td>
</tr>
<tr>
<td width="39%" align="right">E-mail：</td>
<td></td>
<td align="left"><input type="email" name="user_email"/></td>
</tr>
<tr>
<td width="39%" align="right">个人主页：</td>
<td></td>
<td align="left"><input type="url" name="user_homepage" autocomplete="off"/></td>
</tr>
<tr>
<td width="39%" align="right">家庭住址：</td>
<td></td>
<td align="left"><select name="user_address" >
<option value="0" >北京</option>
<option value="1" >上海</option>
<option value="2" >广州</option>
<option value="3" >深圳</option>
<option value="4" selected>成都</option>
</select></td>
</tr>
<!--<tr>
<td width="39%" align="right">邮政编码：</td>
<td></td>
<td align="left"><input type="text" name="user_zipcode" pattern="[0-9]{6}" placeholder="请输入6位邮政编码" /></td>
</tr>-->
<tr>
<td width="39%" align="right">我的颜色：</td>
<td></td>
<td align="left"><input type="color" name="user_color"/></td>
<td align="left"> </td>
</tr>
<tr>
<td width="39%" align="right">我的运动：</td>
<td></td>
<td align="left"><input type="checkbox" name="user_habit" value="basketball"/>篮球
<input type="checkbox" name="user_habit" value="football" checked>足球
<input type="checkbox" name="user_habit" value="swimming">游泳
<input type="checkbox" name="user_habit" value="swimming" checked>乒乓球 </td>
<td align="left"> </td>
</tr>
<tr>
<td width="39%" align="right">常用网址：</td>
<td></td>
<td align="left"><input type="url" name="user_favurl" list="urllist"/>
<datalist id="urllist" >
<option label="百度" value="http://www.baidu.com"/>
<option label="新浪" value="http://www.sina.com"/>
<option label="谷歌" value="http://www.google.com"/>
<option value="http://www.163.com">网易</option>
</datalist></td>
<td align="left"> </td>
</tr>
<tr>
<td width="39%" align="right">简历2份：</td>
<td></td>
<td align="left"><input type="file" name="user_album" multiple/></td>
<td align="left"> </td>
</tr>
<tr>
<td width="39%" align="right" valign="top">个人自述：</td>
<td></td>
<td colspan="2" align="left"><textarea name="info" rows="4" cols="40">我是一位特别热爱学习的好孩子。。。</textarea></td>
</tr>
<tr>
<td align="center" colspan="4">
<input type="hidden" name="user_secret" value="7"/>
<pre><input type="submit" value="注册"/> <input type="reset" value="重置" /></pre>
</td>
</tr>
<tr>
<td colspan="4"><hr noshade size="1" width="100%"></td>
</tr>
<tr>
<td colspan="4">
<table width="100%">
<tr align="center">
<td width="25%"><a href="tel:10086">电话</a></td>
<td width="25%"><a href="sms:10086">短信</a></td>
<td width="25%"><a href="mailto:10086@sina.com">E-mail</a></td>
<td width="25%"><a href="#title">返回顶部</a></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
总结
1.没有运用css的功能：如鼠标滑过时变颜色等
2.在font标签里，“注册信息”间的间隔不需要用 隔开，打空格可以呈现想要的结果
3.cellspadding:在内容和外围边界之间设置单元格空间的属性，管理单元格所围绕的内容与单元格边界之间的距离。cellspacing:单个单元格之间的距离，可改变不同相邻边缘格之间的空间。
4.右上角的头像设置：<td width=23% rowspan="12" align="left" valign="top"><input type="image" name="userPortrait" src="" width="150"> </td>
rowspan:实现表格中一列跨越多行
5.<pre>标签：可定义预格式化的文本，被包围在pre元素中的文本通常会保留空格和换行符。
6.最后一行的代码：返回顶部在<h3>中写了id为title。
colspan:合并列标签属性
扫一扫
1231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
