青春不常在,抓紧谈恋爱 HTML案例

2024-01-05 06:40

本文主要是介绍青春不常在,抓紧谈恋爱 HTML案例,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

编写代码显示如下页面:

分析:除标题以外部分是一个两列的表格,一行两个<td>,共分为11行。

 代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form><h1>青春不常在,抓紧谈恋爱</h1><!-- 两列的表格 --><table width="500"><!-- 第一行 --><tr><td>性别</td><td><input type="radio" id="1" name="sex" value="男"><label for="1"><imgsrc="images/man.jpg"></label><label for="1">男</label>&nbsp;<input type="radio" id="2" name="sex" value="女"><label for="2"><imgsrc="images/women.jpg"></label><label for="2">女</label></td></tr><!-- 第二行 --><tr><td>生日</td><td><select><option>...请选择年...</option><option>2000</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option></select><select><option>...请选择月...</option><option>1</option><option>2</option><option>3</option><option>4</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option></select><select><option>...请选择日...</option><option>1</option><option>2</option><option>3</option><option>4</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option></select></td></tr><!-- 第三行 --><tr><td>所在地区</td><td><input type="text" name="name" value="北京" maxlength="10"> </td></tr><!-- 第四行 --><tr><td>婚姻状况</td><td><input type="radio" id="4" name="hunyin" value="未婚"><label for="4">未婚</label>&nbsp;<input type="radio" id="5" name="hunyin" value="已婚"><label for="5">已婚</label>&nbsp;<input type="radio" id="3" name="hunyin" value="离婚"><label for="3">离婚</label></td></tr><!-- 第五行 --><tr><td>学历</td><td><input type="text" name="xl" value="幼儿园" maxlength="10"> </td></tr><!-- 第六行 --><tr><td>喜欢的类型</td><td><input type="checkbox" id="0" name="lx" value="妩媚的"><label for="0">妩媚的</label><input type="checkbox" id="00" name="lx" value="可爱的"><label for="00">可爱的</label><input type="checkbox" id="000" name="lx" value="健壮的"><label for="000">健壮的</label><input type="checkbox" id="0000" name="lx" value="柔弱的"><label for="0000">柔弱的</label><input type="checkbox" id="00000" name="lx" value="清冷的"><label for="00000">清冷的</label></td></tr><!-- 第七行 --><tr><td>自我介绍</td><td><textarea rows="5" cols="30">自我介绍</textarea></td></tr><!-- 第八行 --><tr><td></td><td><input type="submit" value="免费注册"> </td></tr><!-- 第九行 --><tr><td></td><td><input type="checkbox" id="yes" name="yn" value="我同意注册条款和会员加入标准"><labelfor="yes">我同意注册条款和会员加入标准</label></td></tr><!-- 第十行 --><tr><td></td><td><a href="#">我是会员,立即登录</a></td></tr><!-- 第十一行 --><tr><td></td><td><h3>我承诺</h3><ul><li>年满18周岁,单身</li><li>抱着严肃的态度</li><li>真诚寻找另一半</li></ul></td></tr></table></form>
</body></html>

这篇关于青春不常在,抓紧谈恋爱 HTML案例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/571985

相关文章

MyBatis分页查询实战案例完整流程

《MyBatis分页查询实战案例完整流程》MyBatis是一个强大的Java持久层框架,支持自定义SQL和高级映射,本案例以员工工资信息管理为例,详细讲解如何在IDEA中使用MyBatis结合Page... 目录1. MyBATis框架简介2. 分页查询原理与应用场景2.1 分页查询的基本原理2.1.1 分

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

深度解析Java @Serial 注解及常见错误案例

《深度解析Java@Serial注解及常见错误案例》Java14引入@Serial注解,用于编译时校验序列化成员,替代传统方式解决运行时错误,适用于Serializable类的方法/字段,需注意签... 目录Java @Serial 注解深度解析1. 注解本质2. 核心作用(1) 主要用途(2) 适用位置3

Java 正则表达式的使用实战案例

《Java正则表达式的使用实战案例》本文详细介绍了Java正则表达式的使用方法,涵盖语法细节、核心类方法、高级特性及实战案例,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录一、正则表达式语法详解1. 基础字符匹配2. 字符类([]定义)3. 量词(控制匹配次数)4. 边

Python Counter 函数使用案例

《PythonCounter函数使用案例》Counter是collections模块中的一个类,专门用于对可迭代对象中的元素进行计数,接下来通过本文给大家介绍PythonCounter函数使用案例... 目录一、Counter函数概述二、基本使用案例(一)列表元素计数(二)字符串字符计数(三)元组计数三、C

Spring Boot 整合 SSE(Server-Sent Events)实战案例(全网最全)

《SpringBoot整合SSE(Server-SentEvents)实战案例(全网最全)》本文通过实战案例讲解SpringBoot整合SSE技术,涵盖实现原理、代码配置、异常处理及前端交互,... 目录Spring Boot 整合 SSE(Server-Sent Events)1、简述SSE与其他技术的对

MySQL 临时表与复制表操作全流程案例

《MySQL临时表与复制表操作全流程案例》本文介绍MySQL临时表与复制表的区别与使用,涵盖生命周期、存储机制、操作限制、创建方法及常见问题,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小... 目录一、mysql 临时表(一)核心特性拓展(二)操作全流程案例1. 复杂查询中的临时表应用2. 临时