HTML开发实例-简单相亲网站开发（主体为table）

107 阅读 0 评论 71 点赞

我是靠谱客的博主干净酸奶，最近开发中收集的这篇文章主要介绍HTML开发实例-简单相亲网站开发（主体为table），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

实现功能:简单的相亲网站：

清楚不常在，抓紧谈恋爱

我承诺

年满十八岁
单身
抱着严肃态度
寻找真诚的另一半

性别：	男女
生日：	--请选择年-- 2019 2020 2021 --请选择月-- 1 2 3 --请选择日-- 1 2 3
所在区域
婚姻状况	未婚已婚离婚
学历
喜欢的类型	妩媚的可爱的小鲜肉老腊肉都喜欢
自我介绍

	我同意注册条款和会员
	我是会员立即登录

 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
<title>Document</title>
7 </head>
8 <body>
9
<h4>清楚不常在，抓紧谈恋爱</h4>
10
<table>
11
<!-- 第一行 -->
12
<tr>
13
<td>性别：</td><br />
14
<td><input type="radio" id="nan" name="sex"> <label for="nan">男</label>
15
<input type="radio"
id="nv" name="sex"> <label for="nv">女</label>
16
</td><br>
17
</tr>
18
<!-- 第二行 -->
19
<tr>
20
<td>
21
生日：
22
</td>
23
<td>
24
<select>
25
<option checked="checked">--请选择年--</option>
26
<option>2019</option>
27
<option>2020</option>
28
<option>2021</option>
29
</select>
30
31
<select>
32
<option checked="checked">--请选择月--</option>
33
<option>1</option>
34
<option>2</option>
35
<option>3</option>
36
</select>
37
38
<select>
39
<option checked="checked">--请选择日--</option>
40
<option>1</option>
41
<option>2</option>
42
<option>3</option>
43
</select>
44
45
</td>
46
</tr>
47
<!-- 第三行 -->
48
<tr>
49
<td>所在区域</td>
50
<td>
51
<input type="text" value="北京思密达">
52
</td>
53
</tr>
54
<!-- 第四行 -->
55
<tr>
56
<td>婚姻状况</td>
57
<td>
58
<input type="radio" id="weihun" name="hunyin"><label for="weihun">未婚</label>
59
<input type="radio" name="hunyin"> <label>已婚</label>
60
<input type="radio" name="hunyin" checked="checked"> <label>离婚</label>
61
</td>
62
</tr>
63
<!-- 学历 -->
64
<tr>
65
<td>学历</td>
66
<td><input type="text" value="博士后"></td>
67
</tr>
68
<!-- 喜欢的类型 -->
69
<tr>
70
<td>喜欢的类型</td>
71
<td>
72
<input type="checkbox" name="xingge">妩媚的
73
<input type="checkbox" name="xingge">可爱的
74
<input type="checkbox" name="xingge">小鲜肉
75
<input type="checkbox" name="xingge">老腊肉
76
<input type="checkbox" name="xingge">都喜欢
77
</td>
78
</tr>
79
<!-- 自我介绍 -->
80
<tr>
81
<td>自我介绍</td>
82
<td><textarea>个人简介</textarea></td>
83
</tr>
84
<!-- 免费注册 -->
85
<tr>
86
<td></td>
87
<td><input type="submit" value="免费注册"></td>
88
</tr>
89
<!-- checkbox -->
90
<tr>
91
<td>
92
<td><input type="checkbox">我同意注册条款和会员</td>
93
</tr>
94
<tr>
95
<td></td>
96
<td><a href="#">我是会员立即登录</a></td>
97
</tr>
98
<td></td>
99
<td>
100
<h5>我承诺</h5>
101
<ul>
102
<li>年满十八岁</li>
103
<li>单身</li>
104
<li>抱着严肃态度</li>
105
<li>寻找真诚的另一半</li>
106
107
</ul>
108
</td>
109
</tr>
110
</table>
111 </body>
112 </html>