要求网页中显示如下信息:
首先对网页布局进行分析,包含两个部分,标题和表格部分:
定义表格---->将网页中的表单元素根据上图所示放入不同的行和列中。
代码如下:
<!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>
注意:
该实例包含的行和单元格的个数比较多,在书写代码的时候注意不要漏写,可以使用空格隔开,以便于检查。
表格后几行的第一个单元格是没有内容的,虽然没有内容,但是还是需要定义空格单元格,这样才能保证和要求的表格一致。