当前位置：首页 > news >正文

使用html写一个能发起请求的登录界面

news 2025/12/16 3:18:33

head部分

内联样式部分

body部分

myModal类的div id

script部分

总的代码

界面与操作演示

<!DOCTYPE html>
<html lang="en">

<!DOCTYPE html>

这是文档类型声明，告诉浏览器这是一个 HTML文档。

<html lang="en">

这是 HTML 文档的根元素，lang="en" 表明文档的主要语言是英语。

head部分

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Login Page</title><style>body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;}.login-form {padding: 20px;border: 1px solid #ccc;border-radius: 5px;background-color: white;width: 300px;}.form-group {display: flex;flex-direction: row;margin-bottom: 10px;}.form-group label {width: 100px;text-align: right;padding-right: 10px;}.form-group input {flex-grow: 1;}/* Modal styles */.modal {display: none; /* Hidden by default */position: fixed; /* Stay in place */z-index: 1; /* Sit on top */left: 0;top: 0;width: 100%; /* Full width */height: 100%; /* Full height */overflow: auto; /* Enable scroll if needed */background-color: rgb(0,0,0); /* Fallback color */background-color: rgba(0,0,0,0.4); /* Black w/ opacity */}/* Modal Content/Box */.modal-content {background-color: #fefefe;margin: 15% auto; /* 15% from the top and centered */padding: 20px;border: 1px solid #888;width: 80%; /* Could be more or less, depending on screen size */}/* The Close Button */.close {color: #aaa;float: right;font-size: 28px;font-weight: bold;}.close:hover,.close:focus {color: black;text-decoration: none;cursor: pointer;}</style>
</head>

<head>

表示head部分的开始，这里包含元信息，如字符集、视口设置和样式等信息。

    <meta charset="UTF-8">

指定文档的字符编码为 UTF-8（一种常用的多字节编码格式）

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

设置视口的宽度等于设备的宽度，并且初始缩放比例为 1，使得网页在移动设备（手机端和pc端都能正常显示）上也能正确显示。

 <title>Login Page</title>

title标签用于设置网页的标题，显示在浏览器标签上。

内联样式部分

    <style>

style表示内联样式表部分的开始，这里定义了页面的样式，里面会有很多类（类似于c++中的类）帮助我们设置字体的大小，格式等。

        body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;}

body用于设置整个页面的样式：

font-family: 页面使用的字体。

display: flex: 使用弹性盒子布局（使字体或者图标动态变化，使它们在任何屏幕尺寸下都能表现良好。）

justify-content: center: 内容居中对齐。

align-items: center: 垂直居中对齐。

height: 100vh: 高度为视口高度。

background-color: 背景颜色。

        .form-group label {width: 100px;text-align: right;padding-right: 10px;}

form-group label 样式（类）：

width: 宽度。

text-align: right: 文本右对齐。

padding-right: 右边距。

        .form-group input {flex-grow: 1;}

flex-grow: 1: 填充剩余空间。

        /* Modal styles */.modal {display: none; /* Hidden by default */position: fixed; /* Stay in place */z-index: 1; /* Sit on top */left: 0;top: 0;width: 100%; /* Full width */height: 100%; /* Full height */overflow: auto; /* Enable scroll if needed */background-color: rgb(0,0,0); /* Fallback color */background-color: rgba(0,0,0,0.4); /* Black w/ opacity */}

.modal 类的样式：

display: none: 默认不显示。

position: fixed: 固定定位。

z-index: 层叠级别。

left, top: 位置。

width, height: 宽高。

overflow: 溢出处理。

background-color: 背景颜色。

        /* Modal Content/Box */.modal-content {background-color: #fefefe;margin: 15% auto; /* 15% from the top and centered */padding: 20px;border: 1px solid #888;width: 80%; /* Could be more or less, depending on screen size */}

.modal-content 类的样式：

background-color: 背景颜色。

margin: 外边距。

padding: 内边距。

border: 边框样式。

width: 宽度。

        /* The Close Button */.close {color: #aaa;float: right;font-size: 28px;font-weight: bold;}

.close 类的样式：

color: 字体颜色。

float: right: 浮动到右边。

font-size: 字体大小。

font-weight: 字体粗细。

        .close:hover,.close:focus {color: black;text-decoration: none;cursor: pointer;}

定义 .close 类的悬停和聚焦状态样式：

color: 字体颜色。

text-decoration: 文本装饰。

cursor: 鼠标光标。

    </style>
</head>

style表示内联样式部分的结束，head表示head部分的结束。

body部分

<body><div class="login-form"><h2>Login</h2><form id="loginForm"><div class="form-group"><label for="username">Username:</label><input type="text" id="username" name="username" required></div><div class="form-group"><label for="password">Password:</label><input type="password" id="password" name="password" required></div><button type="submit">Login</button></form></div><!-- Modal --><div id="myModal" class="modal"><!-- Modal content --><div class="modal-content"><span class="close">&times;</span><p>登录成功</p></div></div>

<body>

表示body部分的开始。

    <div class="login-form">

<div> 标签是一种常用的容器标签，用于对文档中的部分或整个内容进行分块，并对其应用样式或进行布局。

这里div表示接下来开始是.login-form 类的 div

        <h2>Login</h2>

h2表示这是一个二级标题，其中Login会显示在网页上。

  <form id="loginForm">

在HTML中，<form> 标签用于创建一个表单，用户可以通过这个表单提交信息。

id 属性是 <form> 标签的一个重要属性，它用于唯一标识一个表单元素，在一个文档中只出现一次而class可以多次使用。

            <div class="form-group"><label for="username">Username:</label><input type="text" id="username" name="username" required></div>

定义用户名输入框（属于form-group类）：

label: 标签。for 属性的值 "username" 与后面的 <input> 的 id 属性值相匹配，表示这个标签与 <input> 字段相关联。

input: 输入框，用于接收用户输入的文本数据，type里的text表示要输入文本name="username" 用于在表单提交时标识这个输入字段的数据。要求必填（required）。

            <div class="form-group"><label for="password">Password:</label><input type="password" id="password" name="password" required></div>

label: 标签。

input: 输入框，类型为密码，要求必填。

            <button type="submit">Login</button>

提交按钮，用于提交表单。

<button> 标签用于创建一个按钮，用户可以点击这个按钮来触发某种操作。

submit：表示这是一个提交按钮，当用户点击这个按钮时，会触发表单的提交。

Login是文本，用户看到的按钮上的内容。

        </form>

结束登录表单。

    </div>

结束 .login-form 类的 div。

myModal类的div id

    <!-- Modal --><div id="myModal" class="modal">

开始模态框（弹窗）的 div，ID 为 myModal。

        <!-- Modal content --><div class="modal-content">

开始模态框的内容区。类为modal-content。

            <span class="close">&times;</span>

定义关闭按钮。

<span> 标签是一个内联元素，用于对文档中的部分内容进行分组，并应用样式或进行JavaScript操作。

× 是一个HTML实体，表示乘号（×），在这里用作关闭按钮的图标。

            <p>登录成功</p>

定义模态框内的消息文本。

        </div>

结束模态框的内容区。

    </div>

结束模态框的 div。

script部分

 <script>// Get the modalvar modal = document.getElementById("myModal");// Get the button that opens the modalvar btn = document.getElementById("loginForm").querySelector("button");// Get the <span> element that closes the modalvar span = document.getElementsByClassName("close")[0];// When the user clicks the button, open the modal btn.addEventListener('click', function(event) {event.preventDefault();  // 阻止表单默认提交行为modal.style.display = "block";});// When the user clicks on <span> (x), close the modalspan.onclick = function() {modal.style.display = "none";}// When the user clicks anywhere outside of the modal, close itwindow.onclick = function(event) {if (event.target == modal) {modal.style.display = "none";}}</script>
</body>
</html>

    <script>

开始 <script> 标签，用于编写 JavaScript 代码。

        // Get the modalvar modal = document.getElementById("myModal");

定义一个变量modal，获取模态框元素。

这行代码使用 document.getElementById 方法获取页面中 ID 为 "myModal" 的元素，并将其赋值给变量 modal。

getElementById 方法返回页面中具有指定 ID 的元素。

var btn = document.getElementById("loginForm").querySelector("button");

这行代码首先获取 ID 为 "loginForm" 的元素，然后使用 querySelector 方法查找第一个 <button> 元素，并将其赋值给变量 btn。

querySelector 方法返回匹配指定 CSS 选择器的第一个元素。

var span = document.getElementsByClassName("close")[0];

这行代码使用 document.getElementsByClassName 方法获取类名为 "close" 的所有元素，并选取第一个元素赋值给变量 span。

getElementsByClassName 方法返回一个包含所有具有指定类名的元素的 HTMLCollection 对象。

btn.addEventListener('click', function(event) {event.preventDefault();  // 阻止表单默认提交行为modal.style.display = "block";
});

这代码为按钮添加了一个点击事件监听器。

当用户点击按钮时，事件监听器中的回调函数会被执行。

event.preventDefault() 方法阻止了按钮默认的提交行为。

modal.style.display = "block"; 将模态框的 display CSS 属性设置为 "block"，使其可见。

span.onclick = function() {modal.style.display = "none";
}

这行代码为关闭按钮添加了一个点击事件监听器。

当用户点击关闭按钮时，事件监听器中的回调函数会被执行。

modal.style.display = "none"; 将模态框的 display CSS 属性设置为 "none"，使其不可见。

window.onclick = function(event) {if (event.target == modal) {modal.style.display = "none";}
}

这行代码为整个窗口添加了一个点击事件监听器。

当用户在窗口的任意位置点击时，事件监听器中的回调函数会被执行。

event.target 返回实际触发事件的目标元素。

如果点击的目标元素是模态框本身，则关闭模态框。

    </script>

结束 <script> 标签。

</body>

结束 <body> 部分。

</html>

结束整个 HTML 文档。

总的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Login Page</title><style>body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;}.login-form {padding: 20px;border: 1px solid #ccc;border-radius: 5px;background-color: white;width: 300px;}.form-group {display: flex;flex-direction: row;margin-bottom: 10px;}.form-group label {width: 100px;text-align: right;padding-right: 10px;}.form-group input {flex-grow: 1;}/* Modal styles */.modal {display: none; /* Hidden by default */position: fixed; /* Stay in place */z-index: 1; /* Sit on top */left: 0;top: 0;width: 100%; /* Full width */height: 100%; /* Full height */overflow: auto; /* Enable scroll if needed */background-color: rgb(0,0,0); /* Fallback color */background-color: rgba(0,0,0,0.4); /* Black w/ opacity */}/* Modal Content/Box */.modal-content {background-color: #fefefe;margin: 15% auto; /* 15% from the top and centered */padding: 20px;border: 1px solid #888;width: 80%; /* Could be more or less, depending on screen size */}/* The Close Button */.close {color: #aaa;float: right;font-size: 28px;font-weight: bold;}.close:hover,.close:focus {color: black;text-decoration: none;cursor: pointer;}</style>
</head>
<body><div class="login-form"><h2>Login</h2><form id="loginForm"><div class="form-group"><label for="username">Username:</label><input type="text" id="username" name="username" required></div><div class="form-group"><label for="password">Password:</label><input type="password" id="password" name="password" required></div><button type="submit">Login</button></form></div><!-- Modal --><div id="myModal" class="modal"><!-- Modal content --><div class="modal-content"><span class="close">&times;</span><p>登录成功</p></div></div><script>// Get the modalvar modal = document.getElementById("myModal");// Get the button that opens the modalvar btn = document.getElementById("loginForm").querySelector("button");// Get the <span> element that closes the modalvar span = document.getElementsByClassName("close")[0];// When the user clicks the button, open the modal btn.addEventListener('click', function(event) {event.preventDefault();  // 阻止表单默认提交行为modal.style.display = "block";});// When the user clicks on <span> (x), close the modalspan.onclick = function() {modal.style.display = "none";}// When the user clicks anywhere outside of the modal, close itwindow.onclick = function(event) {if (event.target == modal) {modal.style.display = "none";}}</script>
</body>
</html>

界面与操作演示

使用html写一个能发起请求的登录界面

目录 head部分内联样式部分 body部分 login-form类的div myModal类的div id script部分总的代码界面与操作演示 <!DOCTYPE html> <html lang"en"> <!DOCTYPE html> 这是文档类型声明，告诉浏览器这是一个 HTML文档。 <…...

编程日记 2024/10/4 7:30:42

五子棋双人对战项目（2）——登录模块

目录一、数据库模块 1、创建数据库 2、使用MyBatis连接并操作数据库编写后端数据库代码二、约定前后端交互接口三、后端代码编写文件路径如下： UserAPI： UserMapper： 四、前端代码登录页面 login.html： 注册页面…...

编程日记 2024/10/4 7:29:41

几种操作系统和几种cpu

常见的操作系统：windows，linux，macOS，统信，deepin，raspberry，andriod，iOS，鸿蒙，等等。常见的cpu：intel，amd，龙芯&#x…...

编程日记 2024/10/4 7:28:40

[Cocoa]_[初级]_[使用NSNotificationCenter作为目标观察者实现时需要注意的事项]

场景在开发Cocoa程序时，由于界面是用Objective-C写的。无法使用C的目标观察者[1]类。如果是使用第二种方案2[2],那么也需要增加一个代理类。那么有没有更省事的办法？ 说明开发界面的时候，经常是需要在子界面里传递数据给主界面&#xff0…...

编程日记 2024/10/4 7:26:36

彩虹易支付最新版源码及安装教程（修复BUG+新增加订单投诉功能）

该源码当前版本为较新的版本，新增了订单投诉功能和一套精美的二次元模板。此版本为全开源版本，所有文件均未加密。系统默认安装完成后无法直接打开，需要进一步配置。本站特别针对BUG文件进行了修复，且在PHP7.4环境下表现良好。…...

编程日记 2024/10/4 7:25:35

ping香港服务器超时的原因通常有哪些？

Ping命令用于测试计算机与目标服务器之间的网络连接。当您在尝试使用ping命令检测服务器时遇到超时的情况，通常可能是由以下原因造成的： 1. 网络连接问题： - 本地网络故障：如网线损坏、路由器故障或配置不当。 - ISP(互联网服务提…...

编程日记 2024/10/4 7:12:22

书生大模型实战（从入门到进阶）L3-彩蛋岛-InternLM 1.8B 模型 Android 端侧部署实践

目录 1 环境准备 1.1 安装rust 1.2 安装Android Studio 1.3 设置环境变量 2 转换模型 2.1 安装mlc-llm 2.2 (可选)转换参数 2.3 (可选)生成配置 2.4 (可选)上传到huggingface 2.5 (可选) 测试转换的模型 3 打包运行 3.1 修改配置文件 3.2 运行打包命令 3.3 创建签…...

编程日记 2024/10/4 7:09:18

setState是同步更新还是异步更新

setState是同步更新还是异步更新先说结论setState为什么设计为异步react18之前为什么不确定是同步还是异步呢react18之后setState有哪些改动先说结论 React18之前：使用了ReactDOM.render，setState在React调度流程中是异步更新，在原生事件和…...

编程日记 2024/10/4 7:08:17

TCP 流量控制 - 滑动窗口和拥塞控制算法解析

滑动窗口主要管理数据流动的速率，对单个连接较好，拥塞控制则防止网络出现过载，对提高整体的网络通畅较好。下面详细解析两者的原理和作用。 1. TCP 滑动窗口算法 TCP 使用滑动窗口机制来控制数据的发送和接收，以实现流量控制&…...

编程日记 2024/10/4 7:07:16

MongoDB聚合操作及索引底层原理

目录链接：https://note.youdao.com/ynoteshare/index.html?id=50fdb657a9b06950fa255a82555b44a6&type=note&_time=1727951783296 本节课的内容：聚合操作：聚合管道操作：编辑 $match 进行文档筛选编辑将筛选和投影结合使用：编辑多条件匹配： …...

编程日记 2024/10/4 7:06:15

C++ | Leetcode C++题解之第454题四数相加II

题目： 题解： class Solution { public:int fourSumCount(vector<int>& A, vector<int>& B, vector<int>& C, vector<int>& D) {unordered_map<int, int> countAB;for (int u: A) {for (int v: B) {count…...

编程日记 2024/10/4 7:05:14

【从零开始实现stm32无刷电机FOC】【实践】【7.2/7 完整代码编写】

目录 stm32cubemx配置芯片选择工程配置stm32基础配置SPI的配置定时器的配置ADC的配置中断优先级的配置生成工程工程代码编写FOC代码结构搭建电机编码器角度读取PWM产生FOC开环代码编写确定电机正负旋转方向电机旋转速度计算多圈逻辑角度电流采样极对数转子角度确定闭环控制控…...

编程日记 2024/10/4 7:04:14

谷歌收录查询工具，谷歌收录查询工具的使用指南

谷歌收录查询工具是网站管理员和SEO专业人士用于检查网站是否被谷歌搜索引擎收录及其收录情况的重要辅助手段。以下是一些常用的谷歌收录查询工具及其详细使用指南： 一、Google Search Console（谷歌搜索控制台） 简介： Google Sea…...

编程日记 2024/10/4 7:02:09

vue3 拖拽插件（drag）

前端vue项目中，经常会有弹框拖拽的需求，下面介绍常用方法： 1.如果你使用的是elementPlus插件的el-dialog组件,只需要增加draggable属性即可，代码如下： <el-dialogv-model"showDiloag"width"500&quo…...

编程日记 2024/10/4 7:00:07

数据结构--线性表（顺序结构）

1.线性表的定义和基本操作 1.1线性表以及基本逻辑 1.1.1线性表 （1）n(>0)个数据元素的有限序列，记作（a1,a2,...an），其中ai是线性表中的数据元素，n是表的长度。 （2）…...

编程日记 2024/10/4 6:59:06

面试准备111

Java基础反射集合多线程 Synchronized/volatile 线程池 cas atomic 网络 tcp 三次握手/四次挥手流量控制拥塞控制数据结构算法 Spring 循环依赖 Mybatis 如何防止sql注入 Mysql 索引索引分类索引设计原则事务四种隔离级别 MVCC 日志 Binlog…...

编程日记 2024/10/4 6:56:03

Spring 的 IOC 和 AOP 是什么，有哪些优点？解密 Spring两大核心概念：IOC与AOP的魅力所在

在现代Java开发中，Spring框架几乎是不可或缺的存在。它不仅简化了开发过程，还提高了软件的灵活性和可维护性。今天，我们要深入探讨Spring中的两个核心概念：IOC（控制反转）和AOP（面向切面编程&…...

编程日记 2024/10/4 6:54:01

第二百六十四节 JPA教程 - JPA查询日期参数示例

JPA教程 - JPA查询日期参数示例我们可以在查询中使用日期类型值。以下代码使用EntityManager创建具有两个参数的查询。然后它传递两个日期类型值。 em.createQuery("SELECT e " "FROM Professor e " "WHERE e.startDate BETWEEN :start AND :en…...

编程日记 2024/10/4 6:50:58

Spring MVC的运行流程详解

Spring MVC作为一个广泛使用的框架，提供了灵活且强大的MVC架构支持。尤其在业务系统中，Spring MVC能够有效地处理大量并发请求，提供良好的用户体验。本文将详细讲解Spring MVC的运行流程，以电商交易系统为案例，帮助读者…...

编程日记 2024/10/4 6:48:56

判断有向图是否为单连通图的算法

判断有向图是否为单连通图的算法算法描述伪代码C语言实现解释在图论中，单连通图（singly connected graph）是指对于图中的任意两个顶点 m 和 v，如果存在从 m 到 v 的路径，则该路径是唯一的。为了判断一个有向图是否为单连通图，我们需要确保从任意顶点出发，到任意其他顶点…...

编程日记 2024/10/4 6:46:54

Java 8 Stream API 入门到实践详解

一、告别 for 循环！ 传统痛点： Java 8 之前，集合操作离不开冗长的 for 循环和匿名类。例如，过滤列表中的偶数： List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2025/11/25 5:13:22

YSYX学习记录（八）

C语言，练习0： 先创建一个文件夹，我用的是物理机： 安装build-essential 练习1： 我注释掉了 #include <stdio.h> 出现下面错误在你的文本编辑器中打开ex1文件，随机修改或删除一部分，之后…...

编程新知 2025/12/9 0:43:44

Go 语言接口详解

Go 语言接口详解核心概念接口定义在 Go 语言中，接口是一种抽象类型，它定义了一组方法的集合： // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的： // 矩形结构体…...

编程新知 2025/10/23 18:29:35

Linux-07 ubuntu 的 chrome 启动不了

文章目录问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了，报错如下四、启动不了，解决如下总结问题原因在应用中可以看到chrome，但是打不开(说明：原来的ubuntu系统出问题了，这个是备用的硬盘&a…...

编程新知 2025/12/10 19:18:49

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...

编程新知 2025/11/3 0:44:41

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA：通过低成本全身远程操作学习双手移动操作传统模仿学习（Imitation Learning）缺点：聚焦与桌面操作，缺乏通用任务所需的移动性和灵活性本论文优点：（1）在ALOHA…...

编程新知 2025/12/9 12:23:34

Android第十三次面试总结（四大组件基础）

Activity生命周期和四大启动模式详解一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成，用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机： onCreate() 调用时机：Activity 首次创建时调用。…...

编程新知 2025/10/15 15:07:34

C++使用 new 来创建动态数组

问题： 不能使用变量定义数组大小原因： 这是因为数组在内存中是连续存储的，编译器需要在编译阶段就确定数组的大小，以便正确地分配内存空间。如果允许使用变量来定义数组的大小，那么编译器就无法在编译时确定数组的大…...

编程新知 2025/12/12 22:31:30

《C++ 模板》

目录函数模板类模板非类型模板参数模板特化函数模板特化类模板的特化模板，就像一个模具，里面可以将不同类型的材料做成一个形状，其分为函数模板和类模板。函数模板函数模板可以简化函数重载的代码。格式：templa…...

编程新知 2025/6/11 3:20:47

【Go语言基础【13】】函数、闭包、方法

文章目录零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理二、函数类型与高阶函数1. 函数类型定义2. 高阶函数（函数作为参数、返回值） 三、匿名函数与闭包1. 匿名函数（Lambda函…...

编程新知 2025/12/8 19:02:25

head部分

内联样式部分

body部分

login-form类的div

myModal类的div id

script部分

总的代码

界面与操作演示

相关文章：