html登入界面代码
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-top: 50px;
}
form {
margin: 0 auto;
width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
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;
}
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;
}
</style>
</head>
<body>
<h1>Login Page</h1>
<form>
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Enter your username">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password">
<button type="submit">Login</button>
</form>
</body>
</html>
下面我会逐行解释这段代码的作用：
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-top: 50px;
}
form {
margin: 0 auto;
width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
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;
}
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;
}
</style>
</head>
<body>
<h1>Login Page</h1>
<form>
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Enter your username">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password">
<button type="submit">Login</button>
</form>
</body>
</html>
第1行：<!DOCTYPE html> 声明文档类型为 HTML5。
第2-14行：<html> 标签表示 HTML 文档的根元素，包含了整个 HTML 页面的内容。
第3-4行：<head> 标签包含了文档的元数据，如标题、字符集、视口等。
第5行：<title> 标签定义文档的标题，显示在浏览器的标题栏或标签页上。
第6-7行：<meta> 标签定义文档的元数据，如字符集、视口等。
第8-21行：<style> 标签定义文档的样式，包含了 CSS 代码。
第9-13行：定义了 body 元素的样式，包括背景颜色和字体。
第14-18行：定义了 form 元素的样式，包括居中、宽度、内边距、背景颜色、圆角和阴影。
第19-25行：定义了 input 元素的样式，包括宽度、内边距、外边距、显示方式、边框、圆角和盒模型。
第26-35行：定义了 button 元素的样式，包括背景颜色、字体颜色、内边距、外边距、边框、圆角、光标和宽度。
第36-38行：</style> 标签结束样式定义。
第39-41行：<body> 标签定义文档的主体内容。
第42-47行：<h1> 标签定义标题，显示在页面的顶部中央。
第48-56行：<form> 标签定义一个表单，包含了用户名、密码和登录按钮。
第49-51行：<label> 标签定义了用户名输入框的标签，用于描述输入框的用途。
第52行：<input> 标签定义了用户名输入框，包括类型、ID、名称和占位符。
第54-56行：同上，定义了密码输入框。
第58行：<button> 标签定义了登录按钮，包括类型和文本。
第59行：</form> 标签结束表单定义。
第60行：</body> 标签结束文档的主体内容。
第61行：</html> 标签结束 HTML 文档的定义。
