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

本教程将指导您如何使用HTML和CSS创建首个网页，您需要学习HTML的基本结构，包括标签、属性和元素，通过添加CSS来设计页面样式，实现布局和配色，我们将深入探讨语义化标签的应用、响应式设计的原理以及盒模型的理解，确保您的网页在不同设备上均能良好显示，通过实践项目，巩固所学知识，为构建更复杂的网站打下坚实基础。

随着互联网的快速发展，越来越多的人开始学习如何制作网页，虽然现在有很多在线教程和视频课程，但对于初学者来说，从基础知识开始，一步步动手实践是非常重要的，本文将带你从头开始,介绍如何使用HTML和CSS来创建你的第一个网页。

什么是HTML和CSS？

HTML (HyperText Markup Language): HTML是一种标记语言，用于创建网页的结构，它定义了网页中的各个元素，如标题、段落、链接等,并描述了这些元素之间的关系。
CSS (Cascading Style Sheets): CSS是一种样式表语言，用于描述网页的外观和格式，它可以改变元素的颜色、字体、大小、布局等,使网页更具吸引力和专业性。

开始之前

在开始编写代码之前，请确保你有一个文本编辑器（如Notepad++、Sublime Text或Visual Studio Code）和一个浏览器（如Chrome、Firefox）,你还需要了解一些基本的HTML和CSS语法。

创建你的第一个HTML文件

打开文本编辑器,新建一个文件。
在文件中输入以下内容：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站！</h1>
    <p>这是一个使用HTML和CSS创建的简单网页。</p>
</body>
</html>

保存文件，命名为index.html。

为你的网页添加样式

我们将使用CSS来美化我们的网页，在<head>部分添加以下代码：

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
    }
    h1 {
        color: #333;
        text-align: center;
    }
    p {
        color: #666;
        line-height: 1.6;
    }
</style>

上述CSS代码设置了网页的字体、背景颜色、标题颜色、段落颜色和行高。

在浏览器中查看你的网页