使用html写一个能发起请求的登录界面
目录
head部分
内联样式部分
body部分
login-form类的div
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">×</span><p>登录成功</p></div></div><body>表示body部分的开始。
login-form类的div
<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">×</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">×</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文档。 <…...
五子棋双人对战项目（2）——登录模块
目录 一、数据库模块 1、创建数据库 2、使用MyBatis连接并操作数据库 编写后端数据库代码 二、约定前后端交互接口 三、后端代码编写 文件路径如下： UserAPI： UserMapper： 四、前端代码 登录页面 login.html： 注册页面…...
几种操作系统和几种cpu
常见的操作系统：windows，linux，macOS，统信，deepin，raspberry，andriod，iOS，鸿蒙，等等。 常见的cpu：intel，amd，龙芯&#x…...
[Cocoa]_[初级]_[使用NSNotificationCenter作为目标观察者实现时需要注意的事项]
场景 在开发Cocoa程序时，由于界面是用Objective-C写的。无法使用C的目标观察者[1]类。如果是使用第二种方案2[2],那么也需要增加一个代理类。那么有没有更省事的办法？ 说明 开发界面的时候，经常是需要在子界面里传递数据给主界面࿰…...
彩虹易支付最新版源码及安装教程（修复BUG+新增加订单投诉功能）
该源码当前版本为较新的版本，新增了订单投诉功能和一套精美的二次元模板。 此版本为全开源版本，所有文件均未加密。系统默认安装完成后无法直接打开，需要进一步配置。 本站特别针对BUG文件进行了修复，且在PHP7.4环境下表现良好。…...
ping香港服务器超时的原因通常有哪些？
Ping命令用于测试计算机与目标服务器之间的网络连接。当您在尝试使用ping命令检测服务器时遇到超时的情况，通常可能是由以下原因造成的： 1. 网络连接问题： - 本地网络故障：如网线损坏、路由器故障或配置不当。 - ISP(互联网服务提…...
书生大模型实战（从入门到进阶）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 创建签…...
setState是同步更新还是异步更新
setState是同步更新还是异步更新 先说结论setState为什么设计为异步react18之前为什么不确定是同步还是异步呢react18之后setState有哪些改动 先说结论 React18之前：使用了ReactDOM.render，setState在React调度流程中是异步更新，在原生事件和…...
TCP 流量控制 - 滑动窗口和拥塞控制算法解析
滑动窗口主要管理数据流动的速率，对单个连接较好，拥塞控制则防止网络出现过载，对提高整体的网络通畅较好。下面详细解析两者的原理和作用。 1. TCP 滑动窗口算法 TCP 使用滑动窗口机制来控制数据的发送和接收，以实现流量控制&…...
MongoDB聚合操作及索引底层原理
目录 链接：https://note.youdao.com/ynoteshare/index.html?id=50fdb657a9b06950fa255a82555b44a6&type=note&_time=1727951783296 本节课的内容： 聚合操作： 聚合管道操作： 编辑 $match 进行文档筛选 编辑 将筛选和投影结合使用： 编辑 多条件匹配： …...
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…...
【从零开始实现stm32无刷电机FOC】【实践】【7.2/7 完整代码编写】
目录 stm32cubemx配置芯片选择工程配置stm32基础配置SPI的配置定时器的配置ADC的配置中断优先级的配置生成工程 工程代码编写FOC代码结构搭建电机编码器角度读取PWM产生FOC开环代码编写确定电机正负旋转方向电机旋转速度计算多圈逻辑角度电流采样极对数转子角度确定 闭环控制控…...
谷歌收录查询工具，谷歌收录查询工具的使用指南
谷歌收录查询工具是网站管理员和SEO专业人士用于检查网站是否被谷歌搜索引擎收录及其收录情况的重要辅助手段。以下是一些常用的谷歌收录查询工具及其详细使用指南： 一、Google Search Console（谷歌搜索控制台） 简介： Google Sea…...
vue3 拖拽插件（drag）
前端vue项目中，经常会有弹框拖拽的需求，下面介绍常用方法： 1.如果你使用的是elementPlus插件的el-dialog组件,只需要增加draggable属性即可，代码如下： <el-dialogv-model"showDiloag"width"500&quo…...
数据结构--线性表（顺序结构）
1.线性表的定义和基本操作 1.1线性表以及基本逻辑 1.1.1线性表 （1）n(>0)个数据元素的有限序列，记作（a1,a2,...an），其中ai是线性表中的数据元素，n是表的长度。 （2）…...
面试准备111
Java基础 反射 集合 多线程 Synchronized/volatile 线程池 cas atomic 网络 tcp 三次握手/四次挥手 流量控制 拥塞控制 数据结构 算法 Spring 循环依赖 Mybatis 如何防止sql注入 Mysql 索引 索引分类 索引设计原则 事务 四种隔离级别 MVCC 日志 Binlog…...
Spring 的 IOC 和 AOP 是什么，有哪些优点？解密 Spring两大核心概念：IOC与AOP的魅力所在
在现代Java开发中，Spring框架几乎是不可或缺的存在。它不仅简化了开发过程，还提高了软件的灵活性和可维护性。今天，我们要深入探讨Spring中的两个核心概念：IOC（控制反转）和AOP（面向切面编程&…...
第二百六十四节 JPA教程 - JPA查询日期参数示例
JPA教程 - JPA查询日期参数示例 我们可以在查询中使用日期类型值。 以下代码使用EntityManager创建具有两个参数的查询。 然后它传递两个日期类型值。 em.createQuery("SELECT e " "FROM Professor e " "WHERE e.startDate BETWEEN :start AND :en…...
Spring MVC的运行流程详解
Spring MVC作为一个广泛使用的框架，提供了灵活且强大的MVC架构支持。尤其在业务系统中，Spring MVC能够有效地处理大量并发请求，提供良好的用户体验。本文将详细讲解Spring MVC的运行流程，以电商交易系统为案例，帮助读者…...
判断有向图是否为单连通图的算法
判断有向图是否为单连通图的算法 算法描述伪代码C语言实现解释在图论中，单连通图（singly connected graph）是指对于图中的任意两个顶点 m 和 v，如果存在从 m 到 v 的路径，则该路径是唯一的。为了判断一个有向图是否为单连通图，我们需要确保从任意顶点出发，到任意其他顶点…...
php与python建站的区别有哪些
php与Python建站的区别： 1、语言层面Python的特性比php好，更加规范。 2、Python的性能比php高。 3、有只需要启动服务的时候执行一次的代码，在php里每个请求都会被执行一次，Python不需要。虽然php可以通过缓存缩短这方面的差距…...
模型评估与验证：确保模型在未知数据上的表现----示例：使用K折交叉验证评估分类模型、房价预测问题使用K折交叉验证来评估一个线性回归模型的性能
模型评估与验证是机器学习流程中的关键步骤，它帮助我们了解模型在未见过的数据上的泛化能力。交叉验证（Cross-Validation, CV）是一种常用的技术，通过将数据集划分为多个子集并进行多次训练和测试来估计模型的性能。此外࿰…...
awd基础学习
一、常用防御手段 1、改ssh密码 passwd [user] 2、改数据库密码 进入数据库 mysql -uroot -proot 改密码 update mysql.user set passwordpassword(新密码) where userroot; 查看用户信息密码 select host,user,password from mysql.user; 改配置文件 （否则会宕机…...
C#基于SkiaSharp实现印章管理（10）
向PDF文件插入印章图片比之前实现的向图片文件插入印章麻烦得多。 最初的想法是使用PDF浏览控件在线打开PDF文件，然后在控件中实现鼠标移动时动态显示印章，点击鼠标时向当前PDF页面的鼠标点击位置插入图片。由于是.net 8的Winform项目，选…...
通过栈实现字符串中查找是否有指定字符串的存在
题目示例： 分析 由与没有给出字符串的长度，所以只能通过getline一次性处理，而在输入后恰好能倒序处理字符串，以标点符号为分界点，将数字当成字符放到栈里，遇到下一个标点符号时执行查找操作，…...
MongoDB伪分布式部署（mac M2）
1. 序言 本博客是上一博客的进阶版：mac M2安装单机版 MongoDB 7.x，上一博客可以看做是单机、单节点部署MongoDB本博客将介绍单机、多服务部署MongoDB，实际就是伪分布式部署 2. 副本集(Replica Set)方式部署 2.1 什么是副本集？ …...
Golang | Leetcode Golang题解之第454题四数相加II
题目： 题解： func fourSumCount(a, b, c, d []int) (ans int) {countAB : map[int]int{}for _, v : range a {for _, w : range b {countAB[vw]}}for _, v : range c {for _, w : range d {ans countAB[-v-w]}}return }...
[ComfyUI]Flux：超美3D微观山水禅意，经典中文元素AI重现，佛陀楼阁山水画卷
在数字艺术和创意领域，[ComfyUI]Flux以其独特的虚实结合技术，已经成为艺术家和设计师们手中的利器。今天，我们激动地宣布，[ComfyUI]Flux带来了一款超美的3D微观山水禅意作品，经典中文元素通过AI技术重现，包…...
Linux 系统 nvm 管理node无法使用
文章目录 一、报错说明二、报错原因三、解决办法四、验证 一、报错说明 centos7服务器使用nvm安装的node之后，只要使用npm或者node，均会出现以下问题。 npm -v node: /lib64/libm.so.6: version GLIBC_2.27 not found (required by node) node: /lib64…...
信号处理快速傅里叶变换(FFT)的学习
FFT是离散傅立叶变换的快速算法，可以将一个信号变换到频域。有些信号在时域上是很难看出什么特征的，但是如果变换到频域之后，就很容易看出特征了。这就是很多信号分析采用FFT变换的原因。另外，FFT可以将一个信号的频谱提取出来&am…...
接效果图做网站/种子搜索引擎 磁力天堂
配置RadASM编译器，选masm,在RadASM中新建-> Win32 App –>DialogAsMain.tpl ，取名Dlg_Test,再打开 Dlg_Test.dlg中编辑资源，如下图： 对话框控件属性设置：Name :IDD_DIALOG ; Caption:拾色器 ; MaxButton:False ;…...
江阴网站设计/网站流量排名查询工具
文章目录继承的特点重写Super关键字调用父类构造器使用继承，人们可以基于已存在的类构造一个新类。继承已存在的类就是复用（继承）这些类的方法和域。在此基础上，还可以添加一些新的方法和域， 以满足新的需求。这是 Jav…...
用模板做的网站权重高吗/广西百度seo
大家好，我是老三，面渣逆袭 继续，这节我们来盘一盘另一个面试必问知识点——Java并发。 这篇文章有点长，四万字，图文详解六十道Java并发面试题。人已经肝麻了，大家可以点赞、收藏慢慢看！扶我起来…...
网站开发做网站/关键词排名点击软件工具
任务要求 研发部开发人员David和Peter属于组A； 行政部人员Jack和Mike属于组B； 1、建立共享目录“/project_a”，该目录里面的文件只能由研发部开发人员读取、增加、删除、修改以及执行，其他用户不能对该目录进行任何的访问操作&…...
局域网站建设/中山seo
Oracle VARRAY(变长数组)通俗的讲就是一个存储有序的元素集合，而其每个元素都有一个相关索引，该索引相对应元素在数组中的位置。变长数组存在大小的限制，但是可以动态进行更改。创建变长数组语句：Create Type varray_phone as var…...
自己学建网站/童程童美少儿编程怎样收费
linux构建DHCP及DHCP中继服务器 用虚拟机搭建，所以把ISO镜像挂载 1.挂载光盘 #/mount /dev/hdc /mnt 2.安装DHCP服务 #cd /mnt/Server/ #rpm -ivh dhcp-3.0.5-21.el5.i386.rpm 3.复制主配置文件 #cp /user/share/doc/dhcp-3.0.5/dhcpd.conf.sample /etc/dhcpd.conf…...