html做一个登录注册页面，下面是一个简单的登录注册页面示例代码，使用 HTML 和 CSS 实现页面样式和布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录/注册</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
form {
background-color: #fff;
padding: 20px;
margin: 10px;
width: 400px;
border-radius: 10px;
}
h1 {
margin-top: 0;
}
label {
display: block;
margin-top: 10px;
}
input[type="text"],
input[type="password"] {
padding: 5px;
border-radius: 2px;
border: none;
width: 100%;
margin-top: 5px;
}
button[type="submit"] {
background-color: #333;
color: #fff;
padding: 10px;
border: none;
border-radius: 2px;
width: 100%;
margin-top: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<h1>登录</h1>
<label>用户名:</label>
<input type="text" placeholder="请输入用户名">
<label>密码:</label>
<input type="password" placeholder="请输入密码">
<button type="submit">登录</button>
</form>
<form>
<h1>注册</h1>
<label>用户名:</label>
<input type="text" placeholder="请输入用户名">
<label>密码:</label>
<input type="password" placeholder="请输入密码">
<label>确认密码:</label>
<input type="password" placeholder="请再次输入密码">
<button type="submit">注册</button>
</form>
</body>
</html>代码元素解释：
- `<!DOCTYPE html>`：文档类型声明，告诉浏览器当前文档使用的是 HTML5 规范。
- `<html>`：HTML 页面的根元素，包含整个页面的内容。
- `<head>`：页面头部，包含元数据和其他引用信息。
- `<meta>`：用于设置页面的元数据，如字符集、关键词等。
- `<title>`：页面标题，显示在浏览器的标签栏上。
- `<style>`：用于设置页面的样式和布局。
- `<body>`：页面的主要内容部分。
- `<form>`：页面表单元素，用于收集用户信息。
- `<h1>`：标头元素，用于显示标题文本。
- `<label>`：表单标注元素，用于标注表单项。
- `<input>`：表单输入元素，提供给用户输入。
- `type="text"`、`type="password"`：输入元素的类型，text 用于输入用户名等文本，password 用于输入密码等敏感信息。
- `placeholder`：输入框中预先填充的文本。
- `<button>`：表单按钮元素，用于提交表单信息。
- `type="submit"`：按钮的类型，表示提交表单信息。
效果截图
专题推荐：