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

清楚不常在，抓紧谈恋爱

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

性别： 男 女
生日： --请选择年--
2019
2020
2021

--请选择月--
1
2
3

--请选择日--
1
2
3

所在区域
婚姻状况 未婚 已婚 离婚
学历
喜欢的类型 妩媚的 可爱的 小鲜肉 老腊肉 都喜欢
自我介绍 个人简介
 
  我同意注册条款和会员
  我是会员立即登录 
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>Document</title>

 </head>

 <body>

     <h4>清楚不常在，抓紧谈恋爱</h4>

     <table>

         <!-- 第一行 -->

         <tr>

             <td>性别：</td><br />

             <td><input type="radio" id="nan" name="sex"> <label for="nan">男</label>

                 <input type="radio"  id="nv" name="sex"> <label for="nv">女</label>

             </td><br>

         </tr>

         <!-- 第二行 -->

         <tr>

             <td>

                 生日：

             </td>

             <td>

                 <select>

                     <option checked="checked">--请选择年--</option>

                     <option>2019</option>

                     <option>2020</option>

                     <option>2021</option>

                 </select>

                 <select>

                     <option checked="checked">--请选择月--</option>

                     <option>1</option>

                     <option>2</option>

                     <option>3</option>

                 </select>

                 <select>

                     <option checked="checked">--请选择日--</option>

                     <option>1</option>

                     <option>2</option>

                     <option>3</option>

                 </select>

             </td>

         </tr>

         <!-- 第三行 -->

         <tr>

             <td>所在区域</td>

             <td>

                 <input type="text" value="北京思密达">

             </td>

         </tr>

         <!-- 第四行 -->

         <tr>

             <td>婚姻状况</td>

             <td>

                 <input type="radio" id="weihun" name="hunyin"><label for="weihun">未婚</label>

                 <input type="radio" name="hunyin"> <label>已婚</label>

                 <input type="radio" name="hunyin" checked="checked"> <label>离婚</label>

             </td>

         </tr>

         <!-- 学历 -->

         <tr>

             <td>学历</td>

             <td><input type="text" value="博士后"></td>

         </tr>

         <!-- 喜欢的类型 -->

         <tr>

             <td>喜欢的类型</td>

             <td>

                 <input type="checkbox" name="xingge">妩媚的

                 <input type="checkbox" name="xingge">可爱的

                 <input type="checkbox" name="xingge">小鲜肉

                 <input type="checkbox" name="xingge">老腊肉

                 <input type="checkbox" name="xingge">都喜欢

             </td>

         </tr>

         <!-- 自我介绍 -->

         <tr>

             <td>自我介绍</td>

             <td><textarea>个人简介</textarea></td>

         </tr>

         <!-- 免费注册 -->

         <tr>

             <td></td>

             <td><input type="submit" value="免费注册"></td>

         </tr>

         <!-- checkbox -->

         <tr>

             <td>

             <td><input type="checkbox">我同意注册条款和会员</td>

         </tr>

         <tr>

             <td></td>

             <td><a href="#">我是会员立即登录</a></td>

         </tr>

             <td></td>

             <td>

                 <h5>我承诺</h5>

                 <ul>

                     <li>年满十八岁</li>

                     <li>单身</li>

                     <li>抱着严肃态度</li>

                     <li>寻找真诚的另一半</li>

                 </ul>

             </td>

         </tr>

     </table>

 </body>

 </html>

HTML开发实例-简单相亲网站开发（主体为table）的更多相关文章

  1. Cocos2d-x 3.X手游开发实例详解

    Cocos2d-x 3.X手游开发实例详解(最新最简Cocos2d-x手机游戏开发学习方法,以热门游戏2048.卡牌为例,完整再现手游的开发过程,实例丰富,代码完备,Cocos2d-x作者之一林顺和泰 ...

  2. MVC5 网站开发实践 2、后台管理

    目录 MVC5 网站开发实践 概述 MVC5 网站开发实践 1.建立项目   从这一部分开始做后台管理,首先是基本框架的 一.Data项目 1.项目添加EntityFramework引用 在Data项 ...

  3. MVC5 网站开发实践 概述

    目录 MVC5 网站开发实践  概述 MVC5 网站开发实践  1.建立项目 MVC5 网站开发实践  2.后台管理 MVC5 网站开发实践  2.1.管理员登陆 MVC5 网站开发实践 2.2.管理 ...

  4. PHP-购物网站开发设计（一）

    2015-07-6 开始使用PHP完成简单购物网站的设计,首先要选择合适的软件平台,所以今天先记录平台的选择与搭建: 我选择使用Apache24 + PHP 5.6 + MySQL 开发环境完成PHP ...

  5. MVC5 网站开发实践 2.2、管理员身份验证

    上次完成了管理员的登录,这次要解决对管理员登录后的验证,采用AuthorizeAttribute属性的方式.之前还要解决几个问题,然后才重写验证类,最后稍微改一下界面. 目录 MVC5 网站开发实践  ...

  6. MVC5 网站开发实践 2.1、管理员登陆

    目录 MVC5 网站开发实践  概述 MVC5 网站开发实践  1.建立项目 MVC5 网站开发实践  2.后台管理   1. 创建SHA256加密方法. 在Data项目中添加文件夹[Security ...

  7. Spring_IoC注解开发和AOP的XML开发(学习笔记2）

    一:IoC注解开发 1,在applicationContext.xml中需要引入context约束 <beans xmlns="http://www.springframework.o ...

  8. （Hibernate进阶）Hibernate搭建开发环境+简单实例（二）

    hibernate是非常典型的持久层框架,持久化的思想是非常值得我们学习和研究的.这篇博文,我们主要以实例的形式学习Hibernate,不深究Hibernate的思想和原理,否则,一味追求,苦学思想和 ...

  9. WCF揭秘（一）——简单的WCF开发实例

    一.WCF是什么 WCF是微软为了实现各个开发平台之间的无疑缝连接而开发一种崭新工具,它是为分布式处理而开发.WCF将DCOM.Remoting.Web Service.WSE.MSMQ.AJAX服务 ...

随机推荐

  1. c/c++头文件的摘抄

    C/C++常用头文件 以及简单应用介绍 C/C++头文件一览 C #include <assert.h> //设定插入点 #include <ctype.h> //字符处理 # ...

  2. Codeforces Round #623 (Div. 2, based on VK Cup 2019-2020 - Elimination Round, Engine) C. Restoring

    C. Restoring Permutation time limit per test1 second memory limit per test256 megabytes inputstandar ...

  3. 如何使用badboy录制一个脚本并成功的导入jmeter中？

    前言: 虽然,很多人已经不适用这种方式进行录制脚本了,因为不好维护.但是,还是有一些朋友在刚开始学习的过程中使用badboy. 可能有人会好奇了,人家五一都出去玩了,你在家学习吗?正巧前一阵有粉丝留言 ...

  4. P3588 【[POI2015]PUS】（线段树优化建边）

    P3588 [[POI2015]PUS] 终于有个能让我一遍过的题了,写篇题解纪念一下 给定长度为n的序列和其中部分已知的数,还有m个大小关系:区间\([l,r]\)中,有k个给定的数比剩下的\(r- ...

  5. JavaWeb开发规范

    以下的建议将帮助你更有效地使用本文所描述的 Java 编程标准: ******************************************************* 当你写代码时就应该遵守 ...

  6. 2-MyBatisPlus教程（HelloWorld）

    1,准备数据 DROP TABLE IF EXISTS user; CREATE TABLE user ( id ) NOT NULL COMMENT '主键ID', name ) NULL DEFA ...

  7. 李婷华 201771010113 《面向对象程序设计（java）》 第二周学习总结

    第一部分:理论知识学习部分 第三章 java的基本程序设计结构 本章主要学习数据类型.变量.运算符.类型转换.字符串.输入输出.控制流程.大数值.数组等内容. 1.基本知识 (1)标识符:由字母.下划 ...

  8. 杂记---主要关于PHP导出excel表格学习

    今天上午处理了一下WIN7系统的电脑前置话筒和耳机口无法使用的问题,主要现象是耳机插入后没声音,麦插入话筒说话对方也听不到,后置端口一切正常.刚开始判断肯定是设置的问题,于是用另一台电脑百度搜索“wi ...

  9. STM32 CubeIDE无法进行调试的问题

    解决了由于一个很容易忽视的细节最终导致系统配置存在错误造成STM32 CubeIDE无法进行调试的问题: 文章目录 来龙去脉 解决方案 反思 来龙去脉 在享受CubeIDE快速和便捷的服务之后,生成了 ...

  10. PROTEUS串口仿真遇到的BUG(转载)

    转载自:http://blog.csdn.net/viperchaos/article/details/6246419 串口通信设置的顺序非常重要,最好严格按照步骤来,在开启数据接受的使能之前最好一定 ...