介绍
构建静态网页是入门前端开发的第一步。HTML（超文本标记语言）和CSS（层叠样式表）是构建网页的基本技术。HTML 提供了网页的结构和内容，而 CSS 负责网页的样式和布局。
在本篇博客中，我们将带您快速入门，学习如何使用 HTML 和 CSS 构建静态网页。
准备工作
在开始之前，您需要准备以下工具：
- 一个文本编辑器，如 VS Code、Sublime Text 等；
- 一个现代的网页浏览器，如 Chrome、Firefox 等。
HTML 基础
HTML 用于描述网页的结构和内容。下面是一个简单的 HTML 文件示例：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个简单的静态网页示例，用于快速入门。</p>
</body>
</html>
这个示例中，我们使用了 <h1> 元素来定义一个标题，使用 <p> 元素来定义一个段落。这些标签是 HTML 提供的基本元素，用于构建网页的内容。
CSS 基础
CSS 用于为网页添加样式和布局。下面是一个简单的 CSS 文件示例：
/* 设置页面背景颜色 */
body {
background-color: lightgray;
}
/* 设置标题样式 */
h1 {
color: red;
}
/* 设置段落样式 */
p {
font-size: 18px;
}
在这个示例中，我们使用了 CSS 选择器来选择网页中的元素，并为它们定义样式。body 选择器表示整个页面的样式，h1 选择器表示标题的样式，p 选择器表示段落的样式。
将 HTML 和 CSS 结合起来
要将 HTML 和 CSS 结合起来，您可以在 HTML 文件中使用 <style> 标签：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
<style>
/* 设置页面背景颜色 */
body {
background-color: lightgray;
}
/* 设置标题样式 */
h1 {
color: red;
}
/* 设置段落样式 */
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个简单的静态网页示例，用于快速入门。</p>
</body>
</html>
在 <style> 标签内，我们将之前的 CSS 代码复制进去。现在，打开 HTML 文件，您将会看到页面的背景颜色变成了浅灰色，标题的颜色变成了红色。
进一步学习
通过上面的示例，您已经初步了解了如何使用 HTML 和 CSS 构建静态网页。但这只是一个开始。在进一步学习中，您可以学习更多 HTML 元素、CSS 属性和布局技术，以构建更复杂和丰富的网页。
以下是一些深入学习的资源：
祝您在 HTML 和 CSS 的世界里旅途愉快！
本文来自极简博客，作者：开源世界旅行者，转载请注明原文链接：快速入门：使用HTML和CSS构建静态网页
