目录
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 modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("loginForm").querySelector("button");
// Get the <span> element that closes the modal
var 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 modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html> <script>开始 <script> 标签，用于编写 JavaScript 代码。
// Get the modal
var 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 modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("loginForm").querySelector("button");
// Get the <span> element that closes the modal
var 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 modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>界面与操作演示
