html注册界面代码

新星源码网 1年前 9 0

<!DOCTYPE html>
<html>
<head>
<title>注册</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px #ccc;
max-width: 500px;
margin: 0 auto;
}
h1 {
text-align: center;
margin-top: 0;
}
input[type=text], input[type=password], input[type=email] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
button:hover {
background-color: #45a049;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
@media screen and (max-width: 600px) {
form {
max-width: 300px;
}
}
</style>
</head>
<body>
<form>
<h1>注册</h1>
<div class="container">
<label for="username"><b>用户名</b></label>
<input type="text" placeholder="请输入用户名" name="username" required>

        <label for="email"><b>邮箱</b></label>
        <input type="email" placeholder="请输入邮箱" name="email" required>

        <label for="password"><b>密码</b></label>
        <input type="password" placeholder="请输入密码" name="password" required>

        <label for="password-repeat"><b>确认密码</b></label>
        <input type="password" placeholder="请再次输入密码" name="password-repeat" required>
        <button type="submit">注册</button>
    </div>
</form>

</body>
</html>

下面我会逐行解释这个HTML代码的含义：

<!DOCTYPE html>：声明文档类型为HTML5。

<html>：HTML文档的根元素。

<head>：文档头部，包含了一些元数据，如标题、字符集等。

<title>：文档标题，显示在浏览器的标签页上。

<meta>：元数据，用于描述文档的一些属性，如字符集、视口等。

<style>：定义文档的样式。

body：文档的主体部分。

form：表单元素，用于收集用户输入的数据。

h1：标题元素，用于显示页面的主标题。

input：输入元素，用于接收用户输入的数据。

button：按钮元素，用于触发某些操作。

label：标签元素，用于描述输入元素的用途。

div：块级元素，用于组织页面结构。

@media：媒体查询，用于根据不同的设备或屏幕尺寸应用不同的样式。

以上就是这个HTML代码的主要内容和含义。

Related

热门文章