1.效果图
2.代码
简历代码
<!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>Document</title>
</head>
<body>
<form action="./hello.html">
<table border="0">
<tr>
<td colspan="2" align="left">基本信息</td>
</tr>
<tr>
<td align="right" width="200">姓名</td>
<td><input type="text" required></td>
<td>
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</td>
</tr>
<tr>
<td align="right">出生日期</td>
<td> <input type="date" required></td>
</tr>
<tr>
<td align="right">手机号码</td>
<td><input type="tel" required></td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input type="email" required></td>
</tr>
<tr>
<td align="right">工作年限</td>
<td>
<select name="time">
<option value="0">请选择</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3">其他</option>
</select>
</td>
</tr>
<tr>
<td align="right">居住地</td>
<td>
<input type="text" list="add" placeholder="请选择或输入" required />
<datalist id="add">
<option value="哈尔滨"></option>
<option value="北京"></option>
<option value="上海"></option>
<option value="重庆"></option>
<option value="其他"></option></datalist>
</td>
</tr>
<tr>
<td align="right">求职状态</td>
<td>
<select name="state" required>
<option value="0">观察有好的机会再考</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">其他</option>
</select>
</td>
</tr>
<tr>
<td align="right">户口</td>
<td>
<select name="state" required>
<option value="0">请输入或选择</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">其他</option>
</select>
</td>
</tr>
<tr>
<td align="right">
目标薪资
</td>
<td><select name="sal" required>
<option value="0">年薪</option>
<option value="1">月薪</option>
<option value="2">日薪</option>
<option value="4">其他</option>
</select></td>
<td>
<input type="text" list="sall" placeholder="请选择" required />
<datalist id="sall">
<option value="1w"></option>
<option value="5w"></option>
</datalist>
</td>
<td align="left">/年</td>
<td>
<select name="money" required>
<option value="0">人民币</option>
<option value="1">美元</option>
<option value="2">其他</option>
</select>
</td>
</tr>
<br>
<tr>
<td align="right">国家和地区</td>
<td> <select name="country" required>
<option value="0">中国大陆</option>
<option value="1">美国</option>
<option value="2">其他</option>
</select></td>
</tr>
<tr>
<td align="right">证件号</td>
<td> <select name="paper" required>
<option value="0">身份证</option>
<option value="1">户口</option>
<option value="2">其他</option>
</select></td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">公司电话</td>
<td> <input type="text" placeholder="086">-</td>
<td> <input type="text" placeholder="区号">-</td>
<td> <input type="text" placeholder="总机号码">-</td>
<td> <input type="text" placeholder="分机"></td>
</tr>
<tr>
<td align="right">家庭电话</td>
<td> <input type="text" placeholder="086">-</td>
<td> <input type="text" placeholder="区号">-</td>
<td> <input type="text" placeholder="电话号码">-</td>
</tr>
<tr>
<td align="right">婚姻状况</td>
<td><select name="state" required>
<option value="0">请选择</option>
<option value="1">已婚</option>
<option value="2">未婚</option>
<option value="3">离异</option>
<option value="4">丧偶</option>
</select></td>
<td align="right">身高</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">政治面貌</td>
<td><select name="sta" required>
<option value="0">请选择</option>
<option value="团员">1</option>
<option value="党员">2</option>
<option value="其他">3</option>
</select></td>
<td align="right">邮编</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">微信号</td>
<td><input type="text"></td>
<td align="right">QQ号</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">家庭地址</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">个人主页</td>
<td><input type="text"></td>
</tr>
<tr>
<td colspan="4" align="center">
<input type="submit" value="保存">
</td>
</tr>
</table>
<br>
<table width=border="0">
<tr>
<td align="left" width="150">教育经历</td>
</tr>
<tr>
<td align="right">时间</td>
<td><input type="text" placeholder="年" required>
<input type="text" placeholder="月" required>到
<input type="text" placeholder="年" required>
<input type="text" placeholder="月" required>（后两项不填表示至今）
</td>
</tr>
<tr>
<td align="right">学校</td>
<td><input type="text" required></td>
</tr>
<tr>
<td align="right">专业</td>
<td><select name="profession" required>
<option value="0">请选择</option>
<option value="1">土木工程</option>
<option value="2">计算机科学</option>
<option value="3">哲学</option>
</select>
<input type="text" placeholder="找不到？在此输入">
</td>
</tr>
<tr>
<td align="right">学历</td>
<td><select name="qualification" required>
<option value="0">请选择</option>
<option value="1">中专</option>
<option value="2">大专</option>
<option value="3">本科</option>
<option value="4">其他</option>
</select>
<input type="checkbox">全日制
</td>
</tr>
<tr>
<td align="right">专业描述</td>
<td>
<textarea cols="80" rows="10"></textarea>
</td>
</tr>
<tr>
<td align="right">海外学习经历</td>
<td><input type="radio" name="true">是
<input type="radio" name="true">否
</td>
</tr>
<tr>
<td colspan="5" align="center"> <input type="submit" value="保存">
<input type="reset" value="删除">
</td>
</tr>
</table>
<br>
<table border="0">
<tr>
<td align="left" width="150" colspan="4">工作经验（无工作经验的学生可以不填）</td>
</tr>
<tr>
<td align="right">时间</td>
<td><input type="text" placeholder="年" required>
<input type="text" placeholder="月" required>到
<input type="text" placeholder="年" required>
<input type="text" placeholder="月" required>（后两项不填表示至今）
</td>
</tr>
<tr>
<td align="right">公司</td>
<td><input type="text" required></td>
</tr>
<tr>
<td align="right">
行业
</td>
<td> <input type="text" list="time" placeholder="请选择" required />
<datalist id="time">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
</datalist>
</td>
</tr>
<tr>
<td align="right">公司规模</td>
<td><select name="gm" required>
<option value="0">请选择</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
             公司性质
<select name="xz" id="" required>
<option value="0">请选择</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr>
<td align="right">部门</td>
<td><input type="text" required></td>
</tr>
<tr>
<td align="right">职能类别</td>
<td>
<input type="text" list="time" placeholder="请选择" required />
<datalist id="time">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
</datalist>
</td>
</tr>
<tr>
<td align="right">职位名称</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">工作描述</td>
<td>
<textarea cols="80" rows="10"></textarea>
</td>
</tr>
<tr>
<td align="right">工作类型</td>
<td><input type="radio" name="true">全职
<input type="radio" name="true">兼职
</td>
</tr>
<tr>
<td colspan="5" align="center"> <input type="submit" value="保存">
</td>
</tr>
</table>
<br>
<table border="0">
<tr>
<td align="left" colspan="5">求职意向</td>
</tr>
<tr>
<td align="right">关键词</td>
<td><input type="text">
请输入代表你个人的关键词；限10个，用空格隔开。如行业、特长、业绩等，每
词不超过6个汉字(12个英文字母)。
</td>
</tr>
<tr>
<td align="right">自我评价</td>
<td><textarea name="" id="" cols="100" rows="10" required></textarea></td>
</tr>
<tr>
<td align="right">地点</td>
<td><input type="text" list="spot" placeholder="请选择或输入" required />
<datalist id="spot">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
</datalist>
</td>
</tr>
<td align="right"> 行业</td>
<td><input type="text" list="industry" placeholder="请选择或输入" required />
<datalist id="industry">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
</datalist>
</td>
<tr>
<td align="right">职能</td>
<td><input type="text" list="industry" placeholder="请选择或输入" required />
<datalist id="industry">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
</datalist>
</td>
</tr>
<tr>
<td align="right"> 工作类型</td>
<td><select name="profes" id="">
<option value="0">全职</option>
<option value="1">兼职</option>
<option value="4">其他</option>
</select></td>
</tr>
<tr>
<td align="right">期望薪资</td>
<td>
<select name="sal" id="">
<option value="0">月薪</option>
<option value="1">年薪</option>
<option value="4">其他</option>
</select>
<input type="text" list="sal" placeholder="请选择" required />
<datalist id="sal">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
</datalist>/月
<input type="submit" value="薪资查询">
</td>
<tr>
<td align="right"> 到岗时间</td>
<td> <select name="tim" id="">
<option value="0">待定</option>
<option value="1">准时</option>
<option value="2">其他</option>
</select></td>
</tr>
<tr>
<td colspan="5" align="center">
<input type="submit" value="保存">
</td>
</tr>
</table>
</form>
</body>
</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>Document</title>
</head>
<style>
div{
margin: 50px 50px;
}
</style>
<body>
<form action="https://s.weibo.com/weibo?q=%23%E9%A6%96%E6%AC%A1%E5%9C%A8%E5%9C%B0%E7%90%83%E5%A4%96%E7%A1%AE%E8%AE%A4%E7%94%9F%E5%91%BD%E4%B9%8B%E6%BA%90%E5%AD%98%E5%9C%A8%23&Refer=top">
<div>
<table>
<tr>
<td>手机号码</td>
<td><input type="tel" required></td>
<td></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" required></td>
<td></td>
</tr>
<tr>
<td> 重复密码</td>
<td><input type="password" required></td>
<td></td>
</tr>
<tr>
<td>图形验证码</td>
<td><input type="text"></td>
<td>1234</td>
</tr>
<tr>
<td>短信验证码</td>
<td><input type="text"></td>
<td><input type="image" src="./yanzhengma.jpg"></td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="image" src="./register_img4.gif">
</td>
</tr>
<tr>
<td colspan="3" align="center"><input type="checkbox">我已阅读声明 </td>
</tr>
</table>
</div>
</form>
</body>
</html>
3.基础知识
- form action=""
- input type value（输入）
- text password submit reset radio checkbox(checked默认选中) button (image src) file
- select option value（下拉选择）
-select属性默认选中
- textarea 文本域输入多行
- h5 新增标签
- input type value
- date datetime-local
- list=？datalist id=？ 且datalist是双标签！！！！
4.我的效果图
5.注意
- datalist是双标签！！！
- 插入图片时，如果路径太长，会出现相片裂痕小照片！！所以./路径尽量短
