「这是我参与2022首次更文挑战的第20天，活动详情查看：2022首次更文挑战」
大家好，我是洋哥。JavaScript知识点的学习已经告一段落，下面我们开始进行题目训练和讲解，俗称题解。 今天是第一天，从HTML开始。
题目要求
请通过HTML代码来实现如下图所示效果的网页
建议用时：10-15分钟
难度：中等
知识点考察
这道题考察两个知识点，第一个是字体颜色和对齐方式的设置，第二个是表单输入元素和属性。
问题分析
第一，像这种表单题，一般会套一个table是为了整齐好看
第二，我们从上往下看，很明显这个输入用户信息的color为bule，align为center，与下面的对比可以看出，它加粗了，所以font-weight设置为bold
第三，用户名用text，密码用password，确认密码用password，性别是单选用radio，注意name值要一样不然就不是单选了，name可以设置为sex，然后所在城市是列表框元素用select，题目显示北京，可以把第一个option设置为北京，或者用selected表示默认。兴趣爱好是复选框用checkbox，name值可以不一样，自我介绍是文本域用textarea，用row和cols来定义行数列数，提交按钮用的是submit，全部重写用的是reset，注意一下位置。
相关知识点复习
表单输入元素input
<input>标记用于表单中输入数据，通常包含在<form>和</form>标记中。
<input name="controlName" type="controlType">
列表框元素select
select标记同时嵌套列表项标记option，可以实现列表框效果。
<form>
<select name="列表框名称" size="">
<option value="选项值" />选项显示内容
<option value="选项值" />选项显示内容
…
</select>
</form>
<select>标记用于定义列表框，<option>标记用于向列表框中添加列表项目，其中的size属性用于定义列表框的行数.
文本域输入元素textarea
文本域用来输入文字信息，行间可以换行。
<form><textarea name=“mytext” rows=“5” cols=“100” ></textarea></form>
代码实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
table {
width: 1000px;
margin: 0 auto;
border:0;
font-size: 20px;
}
</style>
</head>
<body >
<form name="f1" method="post">
<table align="center">
<tr>
<td colspan="2" align="center" style="font-size:24px;color:blue;font-weight:bold">输入用户信息</td>
</tr>
<tr>
<td align="center">用户名</td>
<td> <input type="text"/> </td>
</tr>
<tr>
<td align="center">密码</td>
<td > <input type="password"/> </td>
</tr>
<tr>
<td align="center">确认密码</td>
<td > <input type="password"/> </td>
</tr>
<tr>
<td align="center">性别</td>
<td > <input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女 </td>
</tr>
<tr>
<td align="center" >所在城市</td>
<td> <select name="address"/>
<option>北京</option>
<option>上海</option>
<option>合肥</option>
</td>
</tr>
<tr>
<td align="center">兴趣爱好</td>
<td> <input type="checkbox" name="hobby" />文艺 <input type="checkbox" name="hobby" />体育 <input type="checkbox" name="hobby"/> 电脑 </td>
</tr>
<tr>
<td align="center">自我介绍</td>
<td> <textarea row="3" cols="40" > </textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交" />
<input type="reset" value="全部重写"
</td>
</tr>
</table>
</form>
</body>
</html>
总结和建议
这道题就是一个表单的综合题。表单在前端中经常用到，一定要熟练掌握其中的每一种类型，多做一些类似这种的综合题，熟能生巧。
