开始学习 HTML
发布: (2026年4月8日 GMT+8 19:33)
2 分钟阅读
原文: Dev.to
Source: Dev.to
介绍
这是我的第一篇 DevPost 文章。我正在学习 HTML，这是一种用于向浏览器传达网页结构的标记语言。与编程语言不同，标记语言定义了文本、图像、视频和链接等内容的组织方式和显示方式。
HTML 基础
HTML 使用标签来构建页面。常见标签包括：
- “ – 根元素
- “ – 包含元信息、标题和样式表链接
- “ – 保存可见内容
- “ – 创建表单字段
- “ – 创建可点击按钮
创建一个简易登录页面
下面是一个使用 HTML 构建的登录页面的基本示例。它包含用户名和密码字段以及提交按钮。
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
/* Simple CSS to style the form */
body {
font-family: Arial, sans-serif;
margin: 2rem;
}
.login-form {
max-width: 300px;
margin: auto;
}
.login-form input,
.login-form button {
width: 100%;
padding: 0.5rem;
margin-top: 0.5rem;
}
</style>
</head>
<body>
<div class="login-form">
<h2>Login</h2>
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<button type="submit">Submit</button>
</div>
</body>
</html>该页面使用基本的 HTML 标签定义结构，并使用一小段 CSS 来为表单设置样式。这展示了 HTML 与 CSS 如何协同工作，创建一个功能完整且美观的登录界面。