【HTML】注册页面制作 案例二

news2024/12/28 20:55:49

(大家好,今天我们将通过案例实战对之前学习过的HTML标签知识进行复习巩固,大家和我一起来吧,加油!💕)

案例复习

 通过综合案例,主要复习:

  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>注册页面</title>
</head>

<body>
    <h4>弘扬革命精神,做接班人</h4>
    <table width="600">
        <!-- 第一行 -->
        <tr>
            <td>姓名:</td>
            <td>
                <input name="name" value="请输入姓名" maxlength="6">
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex" id="nan" /><label for="nan"><img src="/素材图/man.jpg" width="15"> 男
                </label>
                <input type="radio" name="sex" id="nv" /> <label for="nv"><img src="/素材图/woman.jpg" width="12"> 女
                </label>
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>生日:</td>
            <td>
                <select name="" id="">
                    <option>--请选择年份--</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                    <option>2004</option>
                    <option>2005</option>
                </select>
                <select name="" id="">
                    <option>--请选择月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
                <select name="" id="">
                    <option>--请选择日--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>所在地区:</td>
            <td><input type="text" value="请输入地区"></td>
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>政治面貌:</td>
            <td>
                <input type="radio" name="Political outlook"> 群众 <input type="radio" name="Political outlook"> 团员 <input
                    type="radio" name="Political outlook"> 党员
            </td>
        </tr>
        <!-- 第六行 -->
        <tr>
            <td>学历:</td>
            <td>
                <input type="text" value="请输入您的学历">
            </td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td>介绍:</td>
            <td>
                <textarea>请输入内容</textarea>
            </td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td>
                <input type="checkbox" name="read" checked="checked">我同意注册条款
            </td>
            <td>
                <input type="submit" value="免费注册">
            </td>
        </tr>
        <!-- 第九行 -->
        <tr>
            <td></td>
            <td> <a href="#">我是用户,立即登录</a></td>
        </tr>
        <!-- 第十行 -->
        <tr>
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>我将不断学习红色精神</li>
                    <li>不断将其发扬光大</li>
                    <li>坚持党的领导</li>
                    </li>
                </ul>
            </td>
        </tr>
    </table>

</body>

</html>

(小伙伴们,HTML的相关知识暂时告别一段落,接下来我们将对CSS的相关内容进行学习,加油哇!) 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1564644.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

linux通过进程pid查询容器docker

我遇到的问题是在docker中启动了进行&#xff0c;占用显卡&#xff0c;如下nvidis-smi查看&#xff1a; 现在要查询pid16325属于哪个容器ID&#xff0c;指令&#xff1a; ps -e -o pid,cmd,comm,cgroup | grep 16325查到如下结果&#xff0c;其中12:cpuset:/docker/ 后面的 8…

算法打卡day32|贪心算法篇06|Leetcode 738.单调递增的数字、968.监控二叉树

算法题 Leetcode 738.单调递增的数字 题目链接:738.单调递增的数字 大佬视频讲解&#xff1a;单调递增的数字视频讲解 个人思路 这个题目就是从例子中找规律&#xff0c;例如 332&#xff0c;从后往前遍历&#xff0c;32不是单调递增将2变为9,3减1&#xff0c;变成了329&…

浏览器工作原理与实践--WebAPI:XMLHttpRequest是怎么实现的

在上一篇文章中我们介绍了setTimeout是如何结合渲染进程的循环系统工作的&#xff0c;那本篇文章我们就继续介绍另外一种类型的WebAPI——XMLHttpRequest。 自从网页中引入了JavaScript&#xff0c;我们就可以操作DOM树中任意一个节点&#xff0c;例如隐藏/显示节点、改变颜色、…

HarmonyOS 应用开发之通过数据管理服务实现数据共享静默访问

场景介绍 典型跨应用访问数据的用户场景下&#xff0c;数据提供方会存在多次被拉起的情况。 为了降低数据提供方拉起次数&#xff0c;提高访问速度&#xff0c;OpenHarmony提供了一种不拉起数据提供方直接访问数据库的方式&#xff0c;即静默数据访问。 静默数据访问通过数据…

社交媒体市场:揭示Facebook的商业模式

在数字化时代&#xff0c;社交媒体已经成为人们生活中不可或缺的一部分。Facebook作为全球最大的社交媒体平台之一&#xff0c;其商业模式的运作方式对于了解社交媒体市场的发展趋势和影响力至关重要。本文将深入探讨Facebook的商业模式&#xff0c;剖析其运作机制&#xff0c;…

用户体验:探讨Facebook如何优化用户体验

在数字化时代&#xff0c;用户体验是社交媒体平台成功与否的关键因素之一。作为全球最大的社交媒体平台之一&#xff0c;Facebook一直在努力优化用户体验&#xff0c;从功能设计到内容呈现再到隐私保护&#xff0c;不断提升用户满意度。本文将深入探讨Facebook如何优化用户体验…

Codeforces Round 928 (Div. 4)F. Vlad and Avoiding X 二维转一维成为线性,然后dfs就可以线性暴力

当所有的都是Black时&#xff0c;只需要8个点就可以不出现“X”型。 ——题解 Problem - F - Codeforces 思路&#xff1a; 如标题。此题还是值得思考练习下暴力写法的。 **为什么上图有的被粉色标记了呢&#xff0c;因为白色和粉色之间互不干扰。** 所以题解把两种…

【测试篇】接口测试

接口测试&#xff0c;可以用可视化工具 postman。 如何做接口测试&#xff1f;&#xff1f; 我们可以先在浏览器中随机进入一个网页&#xff0c;打开开发者工具&#xff08;F12&#xff09;。 随便找一个接口Copy–>Copy as cURL(bash) 打开postman 复制地址 进行发送。 …

django-haystack,具有全文搜索功能的 Python 库!

目录 前言 安装与配置 全文搜索基础 搜索引擎配置 索引配置 搜索视图与模板 过滤器与排序 自定义搜索逻辑 应用场景 1. 电子商务网站的商品搜索 2. 新闻网站的文章搜索 3. 社交网站的用户搜索 4.企业内部系统的文档搜索 总结 前言 大家好&#xff0c;今天为大家分享…

2012年认证杯SPSSPRO杯数学建模A题(第一阶段)蜘蛛网全过程文档及程序

2012年认证杯SPSSPRO杯数学建模 A题 蜘蛛网 原题再现&#xff1a; 第一阶段问题   世界上生存着许多种类的蜘蛛&#xff0c;而其中的大部分种类都会通过结网来进行捕食。请你建立合理的数学模型&#xff0c;说明蜘蛛网织成怎样的结构才是最合适的。 整体求解过程概述(摘要…

ubuntu-server部署hive-part2-安装hadoop

参照 https://blog.csdn.net/qq_41946216/article/details/134345137 操作系统版本&#xff1a;ubuntu-server-22.04.3 虚拟机&#xff1a;virtualbox7.0 安装hadoop ​​​​​​下载上传 下载地址 https://archive.apache.org/dist/hadoop/common/hadoop-3.3.4/ 以root用…

Ps:HDR 色调

HDR 技术旨在通过合并不同曝光度的图像来扩展照片的光照细节范围&#xff0c;使得最终图像能够同时展示最亮和最暗区域的细节。 HDR 色调 HDR Toning命令能够在单张图像上重现类似的效果&#xff0c;无需多张不同曝光的照片。 Ps菜单&#xff1a;图像/调整/HDR 色调 Adjustment…

【EasyExcel】—— 实现excel动态表头设置、多个sheet

引入jar <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.1.0</version></dependency>代码 public static void main(String[] args) {//选择存储地址String fileName "/User…

【25考研】:四川大学计算机学院24届874考研考情分析

去年的考情分析也是我做的&#xff0c; 今年就在去年的基础上做了。保持形式不变&#xff0c;更改数据。 21考情&#xff1a; 万载月寒肠断客&#xff1a;四川大学计算机学院21届CS考研考情分析 22考情&#xff1a; 懒羊羊&#xff1a;四川大学计算机学院2022考研考情分析 2…

Taro + vue3 小程序封装标题组件

分为没有跳转页面的title组件和 有跳转页面的title组件 我们可以把这个封装成一个组件 直接上代码 <template><div class"fixed-title-container"><div class"box"><div class"icon" v-if"isShow" click"…

Android的图片加载框架

Android的图片加载框架 为什么要使用图片加载框架&#xff1f;图片加载框架1. Universal Image Loader [https://github.com/nostra13/Android-Universal-Image-Loader](https://github.com/nostra13/Android-Universal-Image-Loader)2. Glide [https://muyangmin.github.io/gl…

【C++】排序算法 --快速排序与归并排序

目录 颜色分类&#xff08;数组分三块思想&#xff09;快速排序归并排序 颜色分类&#xff08;数组分三块思想&#xff09; 给定⼀个包含红⾊、⽩⾊和蓝⾊、共 n 个元素的数组 nums &#xff0c;原地对它们进⾏排序&#xff0c;使得相同颜⾊ 的元素相邻&#xff0c;并按照红⾊、…

文本自动粘贴编辑器:支持自动粘贴并筛选手机号码,让信息处理更轻松

在信息时代的浪潮中&#xff0c;文本处理已成为我们日常工作与生活的重要组成部分。无论是商务沟通、社交互动还是个人事务处理&#xff0c;手机号码的筛选与粘贴都显得尤为关键。然而&#xff0c;传统的文本处理方式效率低下、易出错&#xff0c;已无法满足现代人的高效需求。…

Linux基础篇:VMware centos7虚拟机网络配置——桥接模式

VMware centos7虚拟机网络配置——桥接模式 1 搞清楚什么是桥接模式 桥接模式允许虚拟机直接连接到物理网络&#xff0c;就像它是物理网络中的一个独立设备一样。在这种模式下&#xff0c;虚拟机将具有与宿主机相同网络中的其他设备相同的网络访问权限。虚拟机将获得一个独立…

MySQL-linux安装-万能RPM法

一、MySQL的Linux版安装 1、 CentOS7下检查MySQL依赖 1. 检查/tmp临时目录权限&#xff08;必不可少&#xff09; 由于mysql安装过程中&#xff0c;会通过mysql用户在/tmp目录下新建tmp_db文件&#xff0c;所以请给/tmp较大的权限。执行 &#xff1a; chmod -R 777 /tmp2. …