要求网页中显示如下信息:

在这里插入图片描述首先对网页布局进行分析,包含两个部分,标题和表格部分:
在这里插入图片描述定义表格---->将网页中的表单元素根据上图所示放入不同的行和列中。

代码如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>注册页面综合案例</title>
</head>
<body >
	<h1>青春不常在,抓紧谈恋爱</h1>
<table width="500">

	<tr>
	<td>
		性别:
	</td>
	<td>
		<label for="">
		<input type="radio" name="sex" id=""><label for="">
		<input type="radio" name="sex" id=""></td>
	</tr>

	<tr>
	<td>
		生日:
	</td>

	<td>
	<select>
	<option selected="selected">
		--请选择年--
	</option>
	<option>
		1990
	</option>
	<option>
		1991
	</option>
	<option>
		1992
	</option>
	<option>
		1993
	</option>
	<option>
		1994
	</option>
	<option>
		1995
	</option>
	</select>

	<select>
	<option selected="selected">
		--请选择月--
	</option>
	<option>
		1月
	</option>
	<option>
		2月
	</option>
	<option>
		3月
	</option>
	<option>
		4月
	</option>
	</select>

	<select>
	<option selected="selected">
		--请选择日--
	</option>
	<option>
		1日
	</option>
	<option>
		2日
	</option>
	<option>
		3日
	</option>
	<option>
		4日
	</option>
	</select>
	</td>
	</tr>

	<tr>
	<td>
		所在地区:
	</td>
	<td>
		<input type="text" name="area" value="地区">
	</td>
	</tr>

	<tr>
		<td>
		婚姻状况:
		</td>
		<td>
		<input type="radio" name="s" checked="checked">未婚<input type="radio" name="s">已婚<input type="radio" name="s">离婚
	</td>
	</tr>

<tr>
	<td>
	学历:
	</td>
	<td>
		<input type="text" value="博士后">
	</td>
</tr>

<tr>
	<td>
		喜欢的类型:
	</td>
	<td>
		<input type="checkbox" name="S">妩媚的<input type="checkbox" name="S">可爱的<input type="checkbox" name="S">小鲜肉<input type="checkbox" name="S">都喜欢
	</td>
</tr>

<tr>
	<td>
	自我介绍:
	</td>
	<td>
	<textarea>
	介绍一下自己吧!
	</textarea>
	</td>
</tr>

<tr>
	<td>
	</td>
	<td>
	<input type="submit" name="submit" value="注册">
</td>
</tr>

<tr>
	<td>
	</td>
	<td>
<input type="checkbox" value="checked">我同意注册条款和加入会员标准
</td>
</tr>

<tr>
	<td>
	</td>
	<td>
<a href="http://xysf.cn">我是会员,立即登录</a>
</td>
</tr>
<tr>
	<td>
	</td>
	<td>
<h3>我承诺</h3>
<ul>
	<li>年满18周岁,单身</li>
	<li>抱着严肃的态度</li>
	<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>

注意:

该实例包含的行和单元格的个数比较多,在书写代码的时候注意不要漏写,可以使用空格隔开,以便于检查。

表格后几行的第一个单元格是没有内容的,虽然没有内容,但是还是需要定义空格单元格,这样才能保证和要求的表格一致。

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐