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

HTML和CSS是构建网页的基础，HTML提供网页的结构和内容，如标题、段落、链接等；CSS则负责样式和布局，使网页美观、易用，本教程将指导你编写第一个网页，设置文档类型和基本结构，然后利用标签定义内容，通过CSS控制网页样式，如字体、颜色、布局等，测试网页效果，确保其在不同浏览器中均能正常显示，通过此教程，你将掌握编写基本HTML和CSS网页的技能，为深入学习网页开发奠定基础。

在互联网时代,掌握HTML和CSS是构建网页的基础技能，本文将带你从零开始，手把手教你如何编写自己的第一个网页。

HTML基础：构建网页的结构

我们来谈谈HTML（HyperText Markup Language），HTML是一种标记语言，用于创建网页的结构，每一个HTML元素都由一个开始标签（如<p>）和一个结束标签（如</p>）组成，标签之间用尖括号包围。

示例代码：

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

在这个简单的例子中,我们定义了一个基本的HTML文档结构，包括<!DOCTYPE>, <html>, <head>和<body>等标签。

CSS基础：美化网页的样式

我们来看看CSS（Cascading Style Sheets），CSS用于描述HTML元素的外观和格式，通过使用CSS，你可以控制网页的颜色、字体、布局等。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">我的第一个网页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        p {
            color: #666;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
</body>
</html>

在这个例子中,我们在<head>标签内使用了<style>标签来定义CSS规则，这些规则将网页背景颜色设置为浅灰色，字体样式设为Arial，并且设置了h1和p标签的颜色和大小。