目录

​​一、table的复习：​​

​​1.个人简历表单​​

​​2.Form表单的复习​​

​​1.人人网注册表单：​​

​​ 2，注册带协议表单：​​


一、table的复习：

1.个人简历表单

前端学习（一）实训复习一常用标签_个人简介

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人简历</title>
</head>
<style>
td{
width: 80px;
   }
image {
width: 150px;
height: 200px;
   }
</style>
<body>
<table border="1"  align="center" cellspacing="0">
<caption>
<h1>个人简历</h1>
</caption>
<tr align="center">
<td >学院</td>
<td colspan="5">xxx学院</td>
<td colspan="2" rowspan="5">
<image src="image/zbs.jpg"/>
</td>
</tr>
<tr align="center">
<td >专业</td>
<td colspan="5">xxx专业</td>
</tr>
<tr align="center">
<td >姓名</td>
<td colspan="1">赵本山</td>
<td >性别</td>
<td colspan="1">男</td>
<td>民族</td>
<td colspan="1">汉族</td>
</tr>
<tr align="center">
<td >出生年月</td>
<td colspan="1">xx年xx月xx日</td>
<td >籍贯</td>
<td colspan="1">问的呀</td>
<td >身高</td>
<td colspan="1">170cm</td>
</tr>
<tr align="center">
<td >学历</td>
<td colspan="1">大学</td>
<td ">政治面貌</td>
<td colspan="3">演员算不算？</td>
</tr>
<tr align="center">
<td >就业意向</td>
<td colspan="6"></td>
</tr>
<tr align="center">
<td >兴趣爱好</td>
<td colspan="6"></td>
</tr>
<tr align="center">
<td >个人说明</td>
<td colspan="6"></td>
</tr>
<tr align="center">
<td >家庭地址</td>
<td colspan="6"></td>
</tr>
<tr align="center">
<td >住宿地址</td>
<td colspan="2"></td>
<td >联系电话</td>
<td colspan="1"></td>
<td >手机</td>
<td colspan="2"></td>
</tr>
<tr align="center">
<td >任职情况</td>
<td colspan="6"></td>
</tr>
<tr align="center">
<td colspan="1" rowspan="4">本人简历</td>
<td colspan="2">时间</td>
<td colspan="2">学校</td>
<td colspan="2">任职</td>
</tr>
<tr align="center">
<td  colspan="6">&nbsp</td>
</tr>
<tr align="center">
<td  colspan="6">&nbsp</td>
</tr>
<tr align="center">
<td  colspan="6">&nbsp</td>
</tr>
<tr align="center">
<td colspan="1" rowspan="6">奖惩情况</td>
</tr>
<tr align="center">
<td  colspan="6">&nbsp</td>
</tr>
<tr align="center">
<td  colspan="6">&nbsp</td>
</tr>
<tr align="center">
<td  colspan="6">&nbsp</td>
</tr>
<tr align="center">
<td  colspan="6">&nbsp</td>
</tr>
<tr align="center">
<td  colspan="6">&nbsp</td>
</tr>

</table>
</body>
</html>

2.Form表单的复习

1.人人网注册表单：

前端学习（一）实训复习一常用标签_html_02

实例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>人人网注册页面</title>
</head>
<body>
<img src="image/renren_titile.gif"/>
<p>人人网，中国 <strong>最真实、最有效</strong>的社会平台，加入人人网，找回老朋友，结交新朋友。</p>
<table>
<form>
<p>电子邮箱:<input type="text" name="email" /></p>
<p>设置密码:<input type="password" name="pwd" /></p>
<p>真实姓名:<input type="text" name="name" /></p>
<tr>
<td>性别：<label>
<input type="radio" value="0" name="sex" checked/><img src="image/Male.gif"/>男
<label>
<label>
<input type="radio" value="1" name="sex" /><img src="image/Female.gif"/>女
</label></td>
</tr>
<tr>
<td>出生年份：
<select name="year" >
<option value="0">1991</option>
<option value="1">2000</option>
<option value="2">2001</option>
<option value="3 selected">2002</option>
</select>
              年
<select name="month" >
<option value="0">11</option>
</select>
              月
<select name="year" >
<option value="0">30</option>
</select>
              日
</td>
</tr>
<tr>
<td>为什么要填我的生日？</td>
</tr>
<tr>
<td>我现在：
<select name="identity" >
<option value="0">请选择身份</option>
<option value="1">医生</option>
<option value="2">老师</option>
</select>
</td>
</tr>
<tr>
<td><img src="image/renren_code.gif"/><a href="#">看不清换一张？</a></td>
</tr>
<tr>
<td>验证码：<input type="text" \></td>
</tr>
<tr>
<td><img src="image/renren.gif"/></td>
</tr>
</form>
</table>
</body>
</html>

 2，注册带协议表单：

前端学习（一）实训复习一常用标签_html_03

 实例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#container{
width: 400px;
height: 310px;
border: 1px solid;
margin: 0 auto;
      }
div
      {
width:100px;
         }
</style>
</head>
<body>
<table border="1" cellspacing="" cellpadding="">
<caption>
<h1>注册表单</h1>
</caption>
<tr>
<td width="100px">昵称:</td>
<td width="500px"><input type="text" name="uname" /></td>
<td width="400px"></td>
</tr>
<tr>
<td>真名:</td>
<td><input type="text" name="rname" /></td>
<td></td>
</tr>
<tr>
<td>登陆名:</td>
<td><input type="text" name="lname" />（可包含a-z，0-9和下划线）</td>
<td rowspan="8"><strong>阅读擎华商城网服务协议</strong>
<div id="container">
            阋读华商城网服务协议欢迎阅读服务条款协议，本协议阐述之条款和条件
            适用于您使用GmgW.com网站的各种工具和服务。
            服务协议双方为擎华与擎华网用户，本服务协议具有合同效力。
            擎华的权力和义务          
            1.擎华有义务在现在技术上护整个网上交易平台的正常运行，并努力提升和改进技术，使用网上交易活动的顺利。
            2.对用户在注册使用擎华网上交易平台中所遇到的与交易或注册有关的题及反映的情况，擎华应及时作出回复。        
            3.对天在擎华网网上交易平台上的不当行为或其它任何擎华认为应当终止服务的情况，擎华有权随时作出删除相关信息，终止服务提供等处理而无须征得用户的同意。
            4.因网上交易平台的特殊性，擎华没有
            同意以上协议
</div>
          同意以上协议<input type="checkbox" name="exc" />
</td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="pwd" />（至少包含6个字符）</td>

</tr>
<tr>
<td>再次输入密码:</td>
<td><input type="password" name="apwd" /></td>
</tr>
<tr>
<td>电子邮箱:</td>
<td><input type="text" name="email" />（必须包含@字符）</td>
</tr>
<tr>
<td>性别</td>
<td>
<label>
<input type="radio" value="0" name="sex" checked/><img src="image/Male.gif"/>男
<label>
</label>
<input type="radio" value="1" name="sex" /><img src="image/Female.gif"/>女
</label>
</td>
</tr>
<tr>
<td>头相：</td>
<td><input type="text" name="file" disabled /><input type="file"></input></td>
</tr>
<tr>
<td>爱好:</td>
<td><input type="checkbox" name="exc" />运动&nbsp;&nbsp;<input type="checkbox" name="talk" />聊天&nbsp;&nbsp;<input type="checkbox" name="game" />玩游戏</td>
</tr>
<tr>
<td>出生日期:</td>
<td><input type="text" name="year" />年<select name="month"><option value="0">请选择</option></select>月<input type="text" \>日</td>
</tr>
</table>
<img src="image/submit.gif"/>
<img src="image/reset.gif"/>
</body>
</html>