1. HTML 代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>综合案例-相亲网站</title> </head> <body> <h1>青春不常在,抓紧谈恋爱</h1> <hr> <form action=""> 昵称:<input type="text" placeholder="请输入昵称"> <br> <br> 性别: <label><input type="radio" name="sex" checked> 男</label> <label><input type="radio" name="sex"> 女</label> <br><br> 所在城市: <select> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>南京</option> <option>苏州</option> <option>无锡</option> <option>盐城</option> </select> <br> <br> 婚姻状况: <label><input type="radio" name="condition" checked> 未婚</label> <label><input type="radio" name="condition"> 已婚</label> <label><input type="radio" name="condition"> 保密</label> <br><br> 喜欢的类型: <label><input type="checkbox" checked> 可爱</label> <label><input type="checkbox" checked> 性感</label> <label><input type="checkbox"> 御姐</label> <label><input type="checkbox"> 萝莉</label> <label><input type="checkbox"> 正太</label> <label><input type="checkbox"> 小鲜肉</label> <label><input type="checkbox"> 大叔</label> <label><input type="checkbox"> 潮男</label> <label><input type="checkbox"> 油物</label> <br> <br> 个人介绍:<br> <textarea name="" id="" cols="60" rows="10"></textarea> <h3>我承诺</h3> <ul> <li>年满18岁,单身</li> <li>抱着严肃的态度</li> <li>真诚寻找另一半</li> </ul> <!--按钮:input button--> <input type="submit" value="免费注册"> <button type="reset">重置</button> </form> </body> </html>
2. 展示效果