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

(大家好,今天我们将通过案例实战对之前学习过的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的相关内容进行学习,加油哇!) 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于深度学习的危险物品检测系统(网页版+YOLOv8/v7/v6/v5代码+训练数据集)

摘要&#xff1a;本文详细介绍基于YOLOv8/v7/v6/v5的危险物品检测技术。主要采用YOLOv8技术并整合了YOLOv7、YOLOv6、YOLOv5的算法&#xff0c;进行了细致的性能指标对比分析。博客详细介绍了国内外在危险物品检测方面的研究现状、数据集处理方法、算法原理、模型构建与训练代码…

3D打印模型检查清单

创建 3D 打印模型一开始可能会有些令人生畏。 在这篇博文中&#xff0c;我们将介绍设计师应牢记的一些基本技巧&#xff0c;以获得令人惊叹的 3D 打印效果。 遵守此清单将确保你的 3D 模型为 3D 打印做好充分准备。 1、水密/非流形 可打印模型的表面不得有任何孔。 问自己一个…

漂亮哇塞的可视化大屏页面该如何设计?

要提升可视化界面的设计美观度&#xff0c;可以从以下几个方面入手&#xff1a; 使用高质量的图片和素材&#xff1a;使用高质量的图片和素材可以让界面更加美观。可以选择高清晰度的图片和素材&#xff0c;使得整个界面的质感更加高端。突出重点&#xff1a;在界面设计中&…

Vue3:Pinia简介及环境搭建

一、简介 Pinia是Vue3中的状态管理工具&#xff0c;类似与Vue2中的Vuex框架的作用 二、环境搭建 1、安装 npm install pinia2、配置 main.ts import {createApp} from vue import App from ./App.vue // 第一步&#xff1a;引入pinia import {createPinia} from piniacons…

与谷歌“分家”两年后,SandboxAQ推出统一加密管理平台

3月27日&#xff0c;SandboxAQ宣布其AQtive Guard平台现已全面可用&#xff08;GA&#xff09;&#xff0c;适用于所有行业&#xff0c;以防范人工智能驱动和量子攻击的威胁。前者是在两年前3月从谷歌母公司Alphabet分拆出来的初创公司&#xff0c;并在当时获得了“九位数”的融…

Mybatis——一对多关联映射

一对多关联映射 一对多关联映射有两种方式&#xff0c;都用到了collection元素 以购物网站中用户和订单之间的一对多关系为例 collection集合的嵌套结果映射 创建两个实体类和映射接口 package org.example.demo;import lombok.Data;import java.util.List;Data public cla…

Canvas实现简易数字电子时钟(带自定义样式)

前置内容 Canvas实现简易数字电子时钟 Canvas实现数字电子时钟&#xff08;带粒子掉落效果&#xff09; 效果 逻辑代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>粒子时钟-完整版</title&g…

OpenHarmony实战:轻量系统芯片移植准备

由于OpenHarmony工程需要在Linux环境下进行编译&#xff0c;此章节将指导厂商搭建OpenHarmony的编译环境、获取OpenHarmony源码&#xff0c;并且创建厂商工作目录完成厂商芯片的编译框架适配。 搭建编译环境 开展移植前请参考开发环境准备完成环境搭建工作。 获取源码 获取…

【蓝桥杯第十三届省赛B组】(部分详解)

九进制转十进制 #include <iostream> #include<math.h> using namespace std; int main() {cout << 2*pow(9,3)0*pow(9,2)2*pow(9,1)2*pow(9,0) << endl;return 0; }顺子日期 #include <iostream> using namespace std; int main() {// 请在此…

《剑指 Offer》专项突破版 - 面试题 101、102、103 和 104 : 和动态规划相关的背包问题(C++ 实现)

目录 前言 面试题 101 : 分割等和子集 面试题 102 : 加减的目标值 面试题 103 : 最少的硬币数目 方法一 方法二 面试题 104 : 排列的数目 前言 背包问题是一类经典的可以应用动态规划来解决的问题。背包问题的基本描述如下&#xff1a;给定一组物品&#xff0c;每种物品…

策略到成果:六西格玛培训在各行业中的转化与实施

六西格玛培训作为一种管理方法论&#xff0c;已经在多个行业中得到应用&#xff0c;并为这些行业带来了显著的贡献。下面张驰咨询给大家介绍几个主要行业的应用情况&#xff1a; 制造业&#xff1a;在制造业中&#xff0c;六西格玛的应用可以带来显著的质量和成本优势。通过减…

Open-Sora环境搭建推理测试

引子 Sora&#xff0c;2024年2月15日&#xff0c;OpenAI发布的人工智能文生视频大模型。支持60秒视频生成&#xff0c;震荡了国内国际学术圈、广告圈、AI教培圈。Sora最主要有三个优点&#xff1a;第一&#xff0c;“60s超长视频”&#xff0c;之前文本生成视频大模型一直无法真…

Qt实现Kermit协议(三)

3 实现 3.2 KermitSendFile 该模块实现了Kermit发送文件功能。 序列图如下&#xff1a; 3.2.1 KermitSendFile定义 class QSerialPort; class KermitSendFile : public QObject, public Kermit {Q_OBJECT public:explicit KermitSendFile(QSerialPort *serial, QObject *…

比特币和区块链详解: Bitcoin: A Peer-to-Peer Electronic Cash System白皮书

背景 考虑当前手机上的余额、手里的现金&#xff0c;其实本质都归属于银行发给我们的欠条&#xff0c;是在政府监管下的流通货币。当我们在做交易时&#xff0c;银行属于可信第三方&#xff0c;银行发行的货币在交易过程中起到了重要作用。但基于金融机构的受信任第三方容易受…

使用pytorch构建带梯度惩罚的Wasserstein GAN(WGAN-GP)网络模型

本文为此系列的第三篇WGAN-GP&#xff0c;上一篇为DCGAN。文中仍然不会过多详细的讲解之前写过的&#xff0c;只会写WGAN-GP相对于之前版本的改进点&#xff0c;若有不懂的可以重点看第一篇比较详细。 原理 具有梯度惩罚的 Wasserstein GAN (WGAN-GP)可以解决 GAN 的一些稳定性…

【WEEK6】 【DAY2】DQL查询数据-第二部分【中文版】

2024.4.2 Tuesday 接上文【WEEK6】 【DAY1】DQL查询数据-第一部分【中文版】 目录 4.4.连接查询4.4.1.JOIN 对比4.4.2.七种JOIN4.4.3.例4.4.3.1.本例中INNER JOIN和RIGHT JOIN结果相同4.4.3.2.LEFT JOIN4.4.3.3.查询缺考的同学4.4.3.4.思考题&#xff1a;查询参加了考试的同学信…

Visual Studio安装下载进度为零已解决

因为在安装pytorch3d0.3.0时遇到问题&#xff0c;提示没有cl.exe&#xff0c;VS的C编译组件&#xff0c;可以添加组件也可以重装VS。查了下2019版比2022问题少&#xff0c;选择了安装2019版&#xff0c;下面是下载安装时遇到的问题记录&#xff0c;关于下载进度为零网上有三类解…

redis的哈希Hash

哈希是一个字符类型的字段和值的映射表&#xff0c;简单来说就是一个键值对的集合。 查看里面的name或者age在不在里面&#xff0c;0说明已经删了的 用来获取person里的键

[C#]使用OpencvSharp去除面积较小的连通域

【C介绍】 关于opencv实现有比较好的算法&#xff0c;可以参考这个博客OpenCV去除面积较小的连通域_c#opencv 筛选小面积区域-CSDN博客 但是没有对应opencvsharp实现同类算法&#xff0c;为了照顾懂C#编程同学们&#xff0c;因此将 去除面积较小的连通域算法转成C#代码。 方…

Java获取IP地址以及MAC地址(附Demo)

目录 前言1. IP及MAC2. 特定适配器 前言 需要获取客户端的IP地址以及MAC地址 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader;public class test {public static void main(String[] args) {try {// 执行命令Process process…