07_html 小案例

最新推荐文章于 2024-07-07 15:25:57 发布
最新推荐文章于 2024-07-07 15:25:57 发布
阅读量225 收藏
点赞数
分类专栏： 前端学习 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/java_996/article/details/121137452
版权

一个HTML小案例，用到很多基本标签，完成一个注册页面，用到的素材如下
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!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>综合案例</title>
</head>
<body>
    <h4 id="top">青春不常在，抓紧谈恋爱</h4>
    <!-- <table width="500" border="1" cellpadding="" cellspacing="0"> -->
        
        <!-- 用table标签来布局form表单元素，table标签必须放在form表单内部 -->
        <form action="">
<table width="500">
<tbody>
    <tr>
        <td>请输入姓名</td>
        <td><input type="text" name="username" value="请输入真实姓名"></td>
    </tr>
    <tr>
        <td>请选择照片</td>
        <td><input type="file"></td>
    </tr>
<tr> 
    <td>性别</td>  

    <td> 
    <label for="nan">男</label>
    <label for="nan"><img src="images/man.jpg" alt="男"></label>
    <input type="radio" name="sex" value="nan" id="nan"> 

    &nbsp;
    &nbsp;
    &nbsp;

    <label for="nv">女</label>
    <label for="nv"><img src="images/women.jpg" alt="女"></label>
    <input type="radio" name="sex" value="nv" id="nv">
    <!-- 
        
    <label for="nv">女   <img src="images/women.jpg" alt="女"></label>
    <input type="radio" name="sex" value="nv" id="nv">
    这样也可以，写法一样，格式一样，不用注意空格
     -->
    </td>

</tr>

<tr>
    <td>邮箱</td>
    <td>
        <input type="text" value="请输入邮箱">
    </td>
</tr>
<tr>
    <td>生日</td>

    <td>
    <select name="birthday_year"  >
        <option selected="selected">-请选择年份-</option>
        <option value="2000" >2000</option>
        <option value="2001">2001</option>
        <option value="2002">2002</option>
        <option value="2003">2003</option>
        <option value="2004" >2004</option>
        <option value="2005">2005</option>
        <option value="2006">2006</option>
        <option value="2007">2007</option>
        <option value="2008">2008</option>
        <option value="2009">2009</option>
        <option value="2010">2010</option>
    </select>
    <select name="birthday_month" >
        <option selected="selected">-请选择月份-</option>
        <option value="1" >1</option>
        <option value="2" >2</option>
        <option value="3" >3</option>
        <option value="4" >4</option>
        <option value="5" >5</option>
        <option value="6" >6</option>
        <option value="7" >7</option>
        <option value="8" >8</option>
        <option value="9" >9</option>
        <option value="10" >10</option>
        <option value="11" >11</option>
        <option value="12" >12</option>
    </select>
    <select name="birthday_day" >
        <option selected="selected">-请选择日期-</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>

    </select>
   </td>

</tr>

<tr>
    <td>所在地区</td>
    <td>
        <select name="area" >
            <option selected="selected">-请选择地区-</option>
            <option value="beijing">北京</option>
            <option value="xian">西安</option>
            <option value="chengdu">成都</option>
        </select>
    </td>
</tr>

<tr>
    <td>婚姻状况</td>
    <td>
        <label for="weihun">未婚</label>
        <input type="radio" name="marrage" value="weihun" id="weihun" checked="checked">
        &nbsp;&nbsp;&nbsp;
        <label for="sangou">丧偶</label>
        <input type="radio" name="marrage" value="sangou" id="sangou">
        &nbsp;&nbsp;&nbsp;
        <label for="liyi">离异</label>
        <input type="radio" name="marrage" value="liyi" id="liyi">

    </td>
</tr>   

<tr>
    <td>学历</td>
    <td>
    <select name="xueli" >
        <option value="zhuanke">专科</option>
        <option value="benke">本科</option>
        <option value="yanjiusheng">研究生</option>
    </select>
    </td>
</tr>

<tr>
    <td>毕业院校</td>
    <td>
        <input type="text" value="请输入毕业院校" name="school">
    </td>
</tr>

<tr>
    <td>喜欢类型</td>
    <td>
    性感<input type="checkbox" name="type" value="sex">
    温柔<input type="checkbox" name="type" value="gentle">
    可爱<input type="checkbox" name="type" value="lovely">
    成熟<input type="checkbox" name="type" value="mature">
    </td>
</tr>

<tr>
    <td>手机号：</td>
    <td>
        <input type="text" value="请输入手机号" name="number" maxlength="11"> <input type="button" value="获取验证码">
    </td>
</tr>

<tr>
    <td>输入验证码：</td>
    <td>
        <input type="text" value="请输入验证码"  name="code" maxlength="6">
    </td>
</tr>

<tr>
    <td>自我介绍</td>
    <td>
        <textarea name="introduce"  cols="30" rows="5">请从喜好，习惯等方面输入自我介绍</textarea>
    </td>
</tr>

<tr>
    <td></td>
    <td>
        <input type="submit" value="免费注册">&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="reset" >
    </td>
</tr>

<tr>
    <td></td>
    <td>
        <input type="checkbox" name="agree">我同意
        <a href="#">注册条款</a>和
        <a href="#">会员加入标准</a>

    </td>
</tr>

<tr>
    <br>
</tr>

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

<tr>
    <td colspan="2">
        <h3>我承诺</h3>
        <ul>
            <li>年满18岁</li>
            <li>单身</li>
            <li>态度真诚</li>
            <li>上述信息属实</li>
        </ul>
    </td>
</tr>

<tr>
    <td>建议</td>
    <td>
        <textarea name="advice"  cols="30" rows="5">请在这里输入您对我们的建议</textarea>
    </td>
</tr>

<tr>
    <td></td>
    <td><a href="#top"><input type="button" value="回到顶部"></a></td>
</tr>
</tbody>
</table>
</form>

</body>
</html>```
The Biggest
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个简单的HTML5小例子
07-25
对于一个初学者来说，最消耗时间的地方就是基础，因此希望通过此例子的一些注释讲解能让初学者更快的了解html5
07_Webpage_Bootstrap
05-25
同时，这也是一个很好的实践案例，展示了如何将HTML、CSS和JavaScript这三者结合，构建一个现代、响应式的网页。在实际工作中，开发者可以参照这个项目，快速搭建自己的网站或应用，提高开发效率。
HTML--比较实用的小例子
weixin_30414635的博客
07-05 74
常用的前端实例： 1略 2、在网页商城中的图片当我们把鼠标放上去之后，图片会显示一个有颜色的外边框，图片某一部分的字体的颜色并发生改变 鼠标放上去之前 鼠标放上去之后： 实现的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" cont...
关于web 第一章 初识HTML以及HTML四大案例 （保姆级教学）
最新发布
2202_75375955的博客
07-07 1369
HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (HyperTextMarkupLanguage)HTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签HTML 使用标记标签来描述网页。
html小例子
qingchurenxiaoyao的博客
08-16 1096
精美选项卡效果： 关键代码： $(function(){ $(".sel span").mouseover(function(){ $(this).addClass("bg").siblings().removeClass(); var index=$(this).index(); $(".list ul").eq(index).show().sibl
HTML入门小实例
lumot的博客
09-06 938
页面布局的三种方式： a、TABLE布局：已过时 b、DIV+CSS：当前主流 c、HTML5布局标签：未来趋势 1、学生成绩表设计 注意： <body> <table height="250px...
HTML小案例
weixin_44868492的博客
03-01 211
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度一下你就知道</title> </head> <body> <h1>web前端开发</h1> <h2>HTML</h2> <p
07案例3.html
04-12
07案例3.html
07_家具企业小程序.rar小程序精选源码
08-11
【压缩包子文件的文件名称列表】：由于只有一个条目“07_家具企业小程序”，我们可以推测这个压缩包中可能包含了一系列与家具企业小程序相关的文件，如HTML、CSS、JavaScript、图片资源、数据库配置文件等。...
Vue2.xDay07学习相关代码_vue案例
04-28
在这个"Vue2.xDay07学习相关代码_vue案例"中，我们可能遇到了一个关于CSS文件的问题，这可能是样式不生效、样式冲突或者是对Vue中CSS模块化理解不足导致的。下面，我们将详细讨论这些可能出现的知识点。 首先，Vue2...
前端学习案例合集，各种前端小案例实现源码.zip
05-14
前端学习案例介绍：项目中包含了 HTML、CSS、 JavaScript、JQuery、Vue等相关学习案例。 有多个文件的案例，放在了code文件夹中。 目录 01-B站移动端首页框架仿写 02-Js实现比较两个数大小和清空 03-彩色文字 04-...
HTMl+CSS登录小实例
03-21
一个实用的HTML+CSS的登录界面，小实战案例
html5非常炫的一个小案例
04-10
html5非常炫的一个小案例，用火狐打开。
html的一个小例子
03-17
html的一个小例子，很简单，希望对大家有所帮助！
30个HTML+JS小案例
05-06
该项目都是我工作时期，闲来无事做来玩的小案例。如果你是0基础的小白或者H5，Css3基础不太好的开发者，相信当你跟着敲完之后你能得到巨大的收获。能加固你的H5和css3的基础。 里面可能会有一些奇奇怪怪的注释代码，如果看到了，请忽略它！！！！ 内含：canvas，H5+css3网页还原，JS DOM BOM操作小案例，css动画，验证码，抽奖系统，轮播图等等
html静态页面拼接小案例
01-21
简单的html静态页面拼接，不需要php、jsp等include来进行拼接，也不需要开启IIS。
html新手小例子,HTML小例子
weixin_34036075的博客
06-07 210
DOCTYPE html>name =raw_input('what is your name?')if name.endswith('gumby'):print 'hello,mr,gumby'else:print 'hello,stranger'num=input('enter a number')if num>0:print 'the number is positive'eli...
HTML5 小实例
Fenice
02-26 1016
1、时钟： doctype html> html> head>head> body> canvas id="clock" width="500" height="500"> 您的浏览器不支持canvas标签，无法看到时钟 canvas> script> var
HTML前端--各种小案例
weixin_34337265的博客
07-04 759
掬一捧清水，放逐在江河，融入流逝的岁月，将心洗净; 捻一缕心香，遥寄在云端，在最深的红尘里重逢，将心揉碎; 望一程山水，徘徊在月下，在相思渡口苦守寒冬，将心落寞。 案例一： 隐藏扩展域，并去掉after，并去掉高度 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta chars...
std::unique_lock使用案例
10-28
下面是std::unique_lock的一个使用案例： 在一个类A中，我们增加了一个成员函数rtn_unique_lock()，它返回一个局部的std::unique_lock对象。在inMsgRecvQueue()函数中，我们使用for循环向msgRecvQueue中添加元素。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值