前端练习小项目--HTML实现一个简单的注册平台

最新推荐文章于 2024-09-25 10:17:48 发布
最新推荐文章于 2024-09-25 10:17:48 发布
阅读量141 收藏
点赞数 4
文章标签： html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80121278/article/details/140953838
版权

引言：我们花费几天天时间学习完HTML可以简单尝试做点小平台来巩固基础

效果预览：

HTML代码：

<!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 width="600" border="1">
        <!-- 第一行 -->
        <tr>
            <td>性别:</td>
            <td>
                <!-- 单选按钮sex，label标签扩大选择范围，label需要有for才起作用,同时在input标签添加id属性 -->
                <input type="radio" name="sex" id="nan"><label for="nan">男<img src="man.png" width="30"> </label>
                <input type="radio" name="sex" id="woman"> <label for="woman">女<img src="woman.png" width="30"> </label>
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日： </td>
            <td>
                <!-- select是下拉表单 -->
                <select>
                    <option>--请选择年份--</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2004</option>
                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
                <select>
                    <option>--请选择日--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td> <!-- <td>text是文本框属性，value是默认值 -->
                <input type="text" value="山西">
            </td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况</td>
            <td>
                <!-- checked是默认单选框里的按钮(一点进去就默认选中)selected是下拉列表 -->
                <!-- name=marry是单选属性 -->
                <input type="radio" name="marry" id="wei" checked="checkeds"><label for="wei">未婚</label>
                <input type="radio" name="marry" id="yi"> <label for="yi">已婚</label>
                <input type="radio" name="marry" id="li"><label for="li">离婚</label>
            </td>
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>学历</td>
            <td><input type="text" value="博士后" </td>
        </tr>
        <!-- 第六行 -->
        <tr>
            <td>喜欢的类型</td>
            <td>
                <!-- checkbox是复选框，单选是radio -->
                <input type="checkbox" name="love">可爱的
                <input type="checkbox" name="love">妩媚的
                <input type="checkbox" name="love">帅气的
            </td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td>
                个人介绍
            </td>
            <td>
                <!-- 文本域textarea -->
                <textarea name="" id=""></textarea>
            </td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td></td>
            <td>
                <input type="submit" value="免费注册">
            </td>
        </tr>
        <!-- 第九行 -->
        <tr>
            <td></td>
            <td>
                <!-- radio的话选中之后无法再次取消 -->
                <input type="checkbox" checked="checkbox"> 我同意注册条款和会员加入标准
            </td>
        </tr>
        <!-- 第十行 -->
        <tr>
            <td></td>
            <td>
                <!-- <a href=""></a>是链接标签 -->
                <a href="#">我是会员，立即登录</a>
            </td>
        </tr>
        <!-- 最后部分 -->
        <tr>
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>年满18岁，单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </table>

</body>

</html>

大家可以逐行学习

@无名过客
关注
适合练手的10个前端实战项目(附视频+源码）
码农王也的博客
08-28 5万+
当下前端开发可以说是一个比较火的职业，所以学习的人比较多，不管是培训还是自学都是希望通过前端可以找到一份好的工作，但是很多自学的朋友在自学过程中有些盲目，不仅大大降低了学习的效率，而且也会打击自己的学习热情。 那么当我们学习了前端的一部分知识之后，对前端有了进一步的了解，我们就急需要一些项目去帮我们整理一下自己学习的知识点以及提高一下编程能力，这样更有助于我们的学习和工作实践，最重要的是提高自己的项目经验，对于找工作而言有着大大的帮助。 下面小编整理了几个我们的学员项目，在学习前端的新人可以拿去练练手。
前端开发-项目规范
qianduankaifawz的博客
10-09 462
meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!小U课堂是优就业打造的在线实用技能学习平台，我们要完成 首页、同步课程、在线练习，精品课程、视频详情、登录、注册页面、个人中心等静态页面的制作。- 如标题根据重要性用 h1-h6不同等级的标签标记 、段落标记用p，结构简章重复的部分用 ul、li标签。
前端700行代码项目练习--小米官网（仅html、css实现）
comegoing_xin_lv的博客
08-29 943
前端项目，通过html和css实现，共计700行代码
前端-第一部分-HTML
dgw2648633809的博客
11-09 1540
HTML 全称为 HyperText Mark-up Language，翻译为超文本标签语言，标签也称作标记或者元素。HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML文本是由 HTML 标签组成的描述性文本，HTML 文本可以说明文字、图形、动画、声音、表格、链接等。超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。
前端开发入门--html--Flask
peihj的博客
10-23 3191
咱们网站与别人的不一样： Flask框架为了让咱们写标签方便，支持将字符串写入到文件里 浏览器能识别的标签 编码（head） title（head） div和span div，一个人占一整行。【块级标签】 span，自己多大占多少。【行内标签、内联标签】 注意：这两个标签比较素 + CSS样式。练习 超链接 图片 关于设置图片的高度和宽度 列表 表格 下拉框 多行文本 案例：用户注册 网络请求 在浏览器的URL中写入地址，点击回车，访问。 浏览
前端项目(二) vue项目实战-尚品汇
m0_74151862的博客
05-25 3598
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考。
【Servlet综合项目练习】实现一个简单的博客系统~
qq_48479056的博客
07-07 1049
注意这里的用户信息不能从sessio获取,session中获取的是当前登录的用户信息，是唯一且固定的，但是现在显示的是每个博客的作者，也就是博客是谁写的。根据以上响应的格式，在DAO中的sql，应该是从数据库的blog中查询所有，查询出来的是一个集合，集合的每个对象都是一条博客记录，包括id，标题，内容，发布时间，用户id。分析：在登录的时候，前端输入用户名和密码，此时我们需要从数据库中获取用户名，判断该用户名是否存在，因此提供一个通过用户名来查询用户信息的数据库访问方法，
第一个web项目-微信小程序后端开发
热门推荐
weixin_46818541的博客
03-01 1万+
第一个web项目-微信小程序后端开发 前言 去年暑假一个偶然的机会我和几位同学加入了学院一位老师主持的教改项目，需求是开发一个基于SPOC与翻转课堂的计算机组成原理课程的学习app（类似慕课、知到），后来经过讨论决定降低难度，先做一个微信小程序，附带一个后台管理系统，于是我的第一个web项目就开始了~ 需求分析 这里简单介绍下SPOC和翻转课堂的意思 “翻转课堂”（Flipping Classroom）是一种颠覆传统教学由“课堂授课听讲 + 课后作业练习”转变为“课前自主学习 + 课堂协作探究”的新型教学模
前端练习题
m0_54241717的博客
09-18 1255
none ：隐藏标签（标签将在页面中完全消失）通过display样式可以修改标签的类型。block：设置标签为块标签。
信息管理系统，后台信息管理模板，多页面链接，html+css+js，前端实战项目，适用于大作业，上机任务Javaweb,前端练习
03-18
本项目聚焦于一个基于HTML+CSS+JS的后台信息管理模板，旨在为JavaWeb开发人员提供一个前端实战平台，用于大作业、上机任务或日常练习。下面，我们将深入探讨这个系统的各项特性及其应用。 1. **多页面链接设计** ...
基于HTML仿oppo手机商城电商项目的设计与实现6个页面
08-10
下面展示一个简单的HTML结构代码示例： ```html <!DOCTYPE html> <html> <meta charset="utf-8"> <title>OPPO商城 <div class="logo"><a href="#">...
django学习练习：实现一个简易问卷网站.zip
09-29
在本项目中，我们主要探讨的是使用Python的Django框架构建一个简单的在线问卷调查网站。Django是一个功能强大的Web开发框架，它遵循模型-视图-控制器（MVC）设计模式，提供了丰富的功能来帮助开发者快速高效地创建...
Html--笔记01：使用软件vscode，简介Html5--基础骨架以及标题、段落、图片标签的使用
weixin_62189092的博客
09-25 1075
Html5：是一种超文本标记语言，用来描述网页的一种语言。标记语言<----标记标签<----双标签：<html></html> ,单标签：<img>
HTML5简介的水果蔬菜在线商城网站源码系列模板3
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
09-23 1402
HTML5简洁的水果蔬菜在线商城网站源码3，水果蔬菜在线商城源码，最全商城模板，水果蔬菜模板，一款大气的网上蔬菜店/水果店购物商城HTML模板，内置八个模板页面，覆盖各种商城需求页面，酷炫的界面效果，简易的整体风格，实现了商店的所需功能，登录，注册，网格列表，信息列表，我的订单，轮播图，表单，导航菜单，购物车，列表等，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
CSS学习 - 常用属性
最新发布
Aaron121314的博客
09-25 418
font-style、font-variant、font-weight、font-size/line-height 以及 font-family 的简写属性。要按照顺序，可以不设置某个值，未设置的使用默认值。border-width、border-style 以及 border-color 的简写属性。可以去这边查看几乎所有的属性。
【CSS】鼠标 、轮廓线 、 滤镜 、 堆叠层级
千里之行，始于足下
09-23 513
鼠标，轮廓线，滤镜，堆叠层级
如何只用 CSS 制作网格？
偶尔记一下 - mybatis.io
09-24 1127
在看这篇文章时，对其中的网格比较好奇，作者提供了 stackoverflow 的链接，就看到了来源的这个问题和众多回复。本文从里面挑选了一些个人比较喜欢的样式，贴在下面展示。
【CSS】定位
千里之行，始于足下
09-23 951
定位：默认定位，相对定位，绝对定位，固定定位，粘性定位
开发一个QQ小程序 内容实实现100以内加减法
09-27
首先，你需要注册成为腾讯开放平台的开发者，然后创建一个QQ小程序项目。 其次，你可以使用微信小程序的开发工具（小程序开发者工具）来开发QQ小程序，这款工具支持Windows和Mac两个平台。 接下来，你可以使用小...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值