HTML和CSS基础，手把手教你写第一个网页

本教程将指导您使用HTML和CSS创建基本网页，使用HTML标记页面结构，包括`、、和`标签，利用CSS定义样式，如字体、颜色和布局，本示例中，我们将创建一个简单的页面，展示美丽的星空，请按照以下步骤操作：1. 使用文本编辑器编写HTML代码；2. 在HTML代码中插入CSS代码以设置样式；3. 保存文件并使用浏览器查看效果，您已掌握HTML和CSS基础，并可创建自己的网页！

在数字化时代，掌握基础的HTML和CSS技能对于任何希望构建网页或网站的人来说都是至关重要的第一步，本文将详细介绍如何从零开始，一步步地学习并实践编写第一个网页，我们将确保你理解每一个概念，并提供实用的示例代码,以便你在实践中应用。

HTML基础：构建网页的结构

我们需要介绍HTML的基本概念，HTML，全称HyperText Markup Language（超文本标记语言），是用于创建网页的标准标记语言，HTML文档由一系列的元素组成，这些元素用标签来定义,一个简单的HTML文档结构如下所示：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
</body>
</html>

在上面的代码中，<!DOCTYPE html> 声明了文档类型，告诉浏览器这是一个HTML5文档。<html> 标签是所有HTML页面的根元素。<head> 和 <body> 分别包含了文档的元数据和实际内容。

CSS基础：美化网页的外观

与HTML相比，CSS在网页设计中扮演着另一个关键角色，CSS用于控制网页的布局、颜色、字体和其他视觉样式，要开始使用CSS，我们需要将其与HTML结合起来，下面是一个简单的例子,展示了如何在HTML文档中引入CSS：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">我的第一个网页</title>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: darkblue;
            text-align: center;
        }
        p {
            font-family: verdana;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
</body>
</html>

在这个例子中，<style> 标签包含了嵌入的CSS代码，我们为 body 元素设置了背景颜色，为 h1 和 p 元素设置了文本颜色和样式。