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

本文将指导您创建您的第一个网页，深入探讨HTML和CSS的基础知识，您将学习如何使用HTML标记语言构建页面结构，包括文本、图像和链接等元素，我们将探索CSS的作用，它用于设置网页的布局和样式，通过组合这些基础技能，您将能够创建出既美观又功能齐全的网页，实现个人化网站设计，甚至开启在线业务，让我们开始这段令人兴奋的旅程，探索网络技术的基本精髓。

在数字化时代，网页已经成为了信息传播的重要渠道，无论是个人博客，还是企业官网，甚至是一个简单的个人网站，都需要使用HTML（超文本标记语言）和CSS（层叠样式表）进行构建，本文旨在通过“手把手教你写第一个网页”的方式，帮助读者快速掌握HTML和CSS的基础知识,并创建出属于自己的首个网页作品。

HTML基础：构建网页的基本骨架

HTML，即超文本标记语言，是用来描述网页内容和结构的标记语言,一个典型的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>
    <!-- 网页内容将在这里编写 -->
</body>
</html>

<!DOCTYPE html> 声明了文档类型,告诉浏览器这是一个HTML5文档。
<html> 元素是整个HTML文档的根元素。
<head> 元素包含了文档的元数据，如字符集声明、视口设置和标题等。
<body> 元素则是页面上可见的所有内容，如文本、图片、链接等。

CSS基础：美化网页的样式

CSS，即层叠样式表，用于控制网页的布局和外观，通过在HTML元素中添加CSS样式,可以极大地提升网页的美观性和用户体验。

在<head>元素内添加以下CSS代码：

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

这段代码为<body>元素设置了字体、背景色；为所有<h1>元素设置了颜色和居中对齐；为所有<p>元素设置了颜色和行高。