HTML是一种用于构建和呈现Web页面的标准。它提供了一种更灵活、更强大的方式来创建网页,并提供了许多新的功能和特性。其中之一是HTML登录页面,它是一种用于用户登录的网页设计。下面是一个简单的HTML登录页面的源代码示例:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-">
<meta name="viewport" content="width=device-width, initial-scale=.0">
<title>登录</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: fff;
}
.container {
max-width: 00px;
margin: 0 auto;
padding: px;
background-color: fff;
border-radius: px;
box-shadow: 0 px px rgba(0, 0, 0, 0.);
}
.container h{
text-align: center;
margin-bottom: px;
}
.container input[type="text"],
.container input[type="password"] {
width: 00%;
padding: 0px;
margin-bottom: px;
border: px solid ccc;
border-radius: px;
}
.container input[type="submit"] {
width: 00%;
padding: 0px;
background-color: CAF0;
color: fff;
border: none;
border-radius: px;
cursor: pointer;
}
.container input[type="submit"]:hover {
background-color: a0;
}
</style>
</head>
<body>
<div class="container">
<h>用户登录</h>
<form action="/login" method="post">
<input type="text" name="username" placeholder="用户名" required>
<input type="password" name="password" placeholder="密码" required>
<input type="submit" value="登录">
</form>
</div>
</body>
</html>
```
这段代码创建了一个简单的登录页面,包含一个标题、用户名输入框、密码输入框和登录按钮。页面使用了CSS样式来设置背景颜色、边框、阴影等效果,以及响应式设计,使得页面在不同设备上都能良好显示。
登录页面的HTML结构包括一个`<div>`容器,内部包含一个标题`<h>`和一个表单`<form>`。表单中有两个输入框`<input>`,分别用于输入用户名和密码,以及一个提交按钮`<input type="submit">`。
通过这个简单的HTML登录页面源代码示例,你可以开始构建自己的登录页面,并根据需要进行修改和定制。HTML提供了丰富的标签和功能,可以帮助你打造出更加优雅和交互性强的用户登录体验。