请把一下代码每一行的用途注释上:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>登录表单</title> <style> body { background-image: url("background.jpg"); background-size: cover; font-family: "宋体"; font-size: 30px; } form { margin: auto; width: 50%; background-color: rgba(255,255,255,0.8); padding: 20px; border-radius: 10px; } input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit], input[type=reset] { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover, input[type=reset]:hover { background-color: #45a049; } .error { color: red; } </style> </head> <body> <form> <h2>登录</h2> <label for="username">用户名</label> <input type="text" id="username" name="username" ><br> <label for="password">密码</label> <input type="password" id="password" name="password" ><br> <label for="confirm_password">确认密码</label> <input type="password" id="confirm_password" name="confirm_password" ><br> <input type="submit" value="登录"> <input type="reset" value="重置"> <span class="error" id="password_error"></span><br> <a href="https://www.baidu.com/">忘记密码?</a> </form> <script> document.querySelector("form").addEventListener("submit", function(event) { var password = document.querySelector("#password").value; var confirm_password = document.querySelector("#confirm_password").value; if (password != confirm_password) { document.querySelector("#password_error").innerHTML = "密码不一致"; event.preventDefault(); } }); </script> </body> </html>
时间: 2023-10-23 15:14:12 浏览: 142
```
<!DOCTYPE html> // 声明文档类型为 HTML5
<html> // HTML 根元素
<head> // 头部元素,包含了文档的元数据和链接到外部样式表和脚本文件等信息
<meta charset="utf-8" /> // 指定文档使用的字符编码为 UTF-8
<title>登录表单</title> // 设置文档的标题
<style> // 定义内部样式表
body { // 定义 body 元素的样式
background-image: url("background.jpg"); // 设置背景图片
background-size: cover; // 背景图片自适应元素大小
font-family: "宋体"; // 设置字体
font-size: 30px; // 设置字体大小
}
form { // 定义 form 元素的样式
margin: auto; // 居中显示
width: 50%; // 宽度为父元素的一半
background-color: rgba(255,255,255,0.8); // 背景颜色为白色,并设置透明度
padding: 20px; // 内边距为 20px
border-radius: 10px; // 设置边框圆角
}
input[type=text], input[type=password] { // 定义文本输入框和密码输入框的样式
width: 100%; // 宽度为父元素的 100%
padding: 12px 20px; // 内边距为 12px 和 20px
margin: 8px 0; // 外边距为 8px 和 0
display: inline-block; // 设置为行内块元素
border: 1px solid #ccc; // 设置边框
border-radius: 4px; // 设置边框圆角
box-sizing: border-box; // 设置盒子模型为 border-box
}
input[type=submit], input[type=reset] { // 定义提交按钮和重置按钮的样式
background-color: #4CAF50; // 设置背景颜色为绿色
color: white; // 设置文字颜色为白色
padding: 14px 20px; // 内边距为 14px 和 20px
margin: 8px 0; // 外边距为 8px 和 0
border: none; // 去掉边框
border-radius: 4px; // 设置边框圆角
cursor: pointer; // 鼠标指针为手型
}
input[type=submit]:hover, input[type=reset]:hover { // 鼠标悬停在提交按钮和重置按钮上时的样式
background-color: #45a049; // 背景颜色为深绿色
}
.error { // 定义错误提示信息的样式
color: red; // 设置文字颜色为红色
}
</style>
</head>
<body> // 文档的主体部分,包含了所有可见的内容
<form> // 定义一个表单
<h2>登录</h2> // 表单的标题
<label for="username">用户名</label> // 用户名输入框的标签
<input type="text" id="username" name="username" ><br> // 用户名输入框
<label for="password">密码</label> // 密码输入框的标签
<input type="password" id="password" name="password" ><br> // 密码输入框
<label for="confirm_password">确认密码</label> // 确认密码输入框的标签
<input type="password" id="confirm_password" name="confirm_password" ><br> // 确认密码输入框
<input type="submit" value="登录"> // 提交按钮
<input type="reset" value="重置"> // 重置按钮
<span class="error" id="password_error"></span><br> // 显示密码错误提示信息的元素
<a href="https://www.baidu.com/">忘记密码?</a> // 忘记密码的链接
</form>
<script> // 定义脚本
document.querySelector("form").addEventListener("submit", function(event) { // 监听表单的 submit 事件
var password = document.querySelector("#password").value; // 获取密码输入框的值
var confirm_password = document.querySelector("#confirm_password").value; // 获取确认密码输入框的值
if (password != confirm_password) { // 如果密码和确认密码不一致
document.querySelector("#password_error").innerHTML = "密码不一致"; // 显示错误提示信息
event.preventDefault(); // 阻止表单提交
}
});
</script>
</body>
</html>
```
阅读全文