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

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

news 2026/2/7 13:49:15

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

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时，需结合业务场景设计数据流转链路，重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点： 一、核心对接场景与目标商品数据同步场景：将1688商品信息…...

编程新知 2025/11/30 16:55:32

JVM垃圾回收机制全解析

Java虚拟机（JVM）中的垃圾收集器（Garbage Collector，简称GC）是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象，从而释放内存空间，避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2026/1/9 14:53:35

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法，用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理，能够自动确定一个阈值，将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2026/1/9 19:36:58

页面渲染流程与性能优化

页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...

编程新知 2026/1/31 11:58:35

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2026/1/28 9:04:29

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流，定义在 <sstream> 中： std::istringstream：输入流，从已有字符串中读取并解析。std::ostringstream：输出流，向内部缓冲区写入内容，最终取…...

编程新知 2025/11/30 11:30:47

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述企业和个人都在尝试各种AI，使用客户端或是内部自己搭建集成大模型的终端，加速与大型语言模型（LLM）的结合，同时使用检索增强生成（Retrieval Augmented Generation &#…...

编程新知 2026/2/6 10:35:18

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式一、引入在开发中，我们经常会遇到这样的场景：一个对象的状态变化需要自动通知其他对象，比如： 电商平台中，商品库存变化时需要通知所有订阅该商品的用户；新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤通用： 方法一：使用 Homebrew 安装 Git（推荐） 步骤如下：打开终端（Terminal.app） 1.安装 Homebrew…...

编程新知 2026/1/30 4:58:21

C# 表达式和运算符(求值顺序)

求值顺序表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生变化。例如，已知表达式3*52，依照子表达式的求值顺序，有两种可能的结果，如图9-3所示。如果乘法先执行，结果是17。如果5…...

编程新知 2026/1/31 13:13:28

head部分

内联样式部分

body部分

login-form类的div

myModal类的div id

script部分

总的代码

界面与操作演示

相关文章：