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

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

news 2026/2/2 12:00:49

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

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码，专为学校招生场景量身打造，功能实用且操作便捷。从技术架构来看，ThinkPHP提供稳定可靠的后台服务，FastAdmin加速开发流程，UniApp则保障小程序在多端有良好的兼…...

编程新知 2026/1/26 14:19:52

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具，可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下： ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜： ffmpeg…...

编程新知 2025/11/9 11:32:13

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式（Python 实现） 在 Python 中，你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是，.doc 是旧的 Word 格式，而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/12/13 22:42:30

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 （一）概念解析 TRS（Total Return Swap）收益互换是一种金融衍生工具，指交易双方约定在未来一定期限内，基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/11/2 0:31:23

令牌桶滑动窗口-＞限流分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结： 滑动窗口代码实现结果分析lua脚本原理解析限并发分布式信号量代码实现结果分析lua脚本实现原理双注解去实现限流并发结果分析： 实际业务去理解体会统一注…...

编程新知 2026/1/29 16:36:27

Map相关知识

数据结构二叉树二叉树，顾名思义，每个节点最多有两个“叉”，也就是两个子节点，分别是左子节点和右子节点。不过，二叉树并不要求每个节点都有两个子节点，有的节点只有左子节点，有的节点只有…...

编程新知 2026/1/26 21:25:32

AI，如何重构理解、匹配与决策？

AI 时代，我们如何理解消费？ 作者｜王彬封面｜Unplash 人们通过信息理解世界。曾几何时，PC 与移动互联网重塑了人们的购物路径：信息变得唾手可得，商品决策变得高度依赖内容。但 AI 时代的来…...

编程新知 2026/1/30 2:33:11

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件本期内容是为了更好的为大家解释木马（服务器方面的）的原理，连接，以及各种木马及连接工具的分享文件木马：https://w…...

编程新知 2026/1/25 10:13:29

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket（服务端和客户端都要）2. 绑定本地地址和端口&#x…...

编程新知 2025/10/31 21:54:15

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/9/26 12:26:35

head部分

内联样式部分

body部分

login-form类的div

myModal类的div id

script部分

总的代码

界面与操作演示

相关文章：