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

本教程将教您如何使用HTML和CSS创建您的第一个网页，您需要学习一些基础知识，包括HTML标签、属性和结构，以及CSS选择器和样式，我们将指导您如何编写一个包含标题、段落、列表和链接的基本HTML页面，并使用CSS进行格式化和布局，我们将展示如何将这些文件合并到一个HTML文件中，并在浏览器中查看结果，通过本教程，您将掌握网页设计的基础技能，并创建属于自己的独特网页。

在数字化时代,掌握基础的Web技术对于每个人来说都是至关重要的，HTML（超文本标记语言）和CSS（层叠样式表）是构建网页的两大基石，它们让网页有了结构与样式，使得信息能够以一种清晰、美观的方式呈现给用户。

本文旨在引导你从头开始,通过实践操作来学习HTML和CSS的基础知识，并最终能够制作出自己的第一个网页。

第一步：HTML基础——搭建网页框架

HTML（HyperText Markup Language） 是用于创建网页的标准标记语言。

要搭建一个最基本的网页框架,你需要熟练使用以下几个标签：

<!DOCTYPE html>：声明文档类型，告诉浏览器这是一个HTML5文档。
<html>：定义整个HTML文档的范围和背景。
<head>：包含网页的元数据，如标题、字符集、链接到样式表和脚本文件等，`：设置网页的标题，它会在浏览器的标签页上显示。
<body>：包含可见的网页内容，如文本、图片、链接等。

以下是一个简单的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>这是一个段落。</p>
</body>
</html>

第二步：CSS基础——美化网页

有了HTML基础后,我们可以开始学习CSS（层叠样式表）。

CSS用于控制网页的外观和布局,你可以通过CSS来设置字体、颜色、边距、间距、边框等样式属性。

如何引入CSS？

有几种方法可以引入CSS到你的HTML页面中：

内联样式：直接在HTML元素的style属性中写入CSS代码。
内部样式：将CSS代码放入HTML文档的<style>标签内。
外部样式：将CSS代码保存在外部文件中，并通过<link>标签引入。

下面是一个简单的例子,展示如何在HTML页面中使用内部样式：

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

通过以上步骤,你已经成功创建了一个简单的网页，但这仅仅是第一步，HTML和CSS还有很多高级特性等你去探索。

希望这篇文章能帮助你打下坚实的基础,并在未来的学习中更好地掌握这些技术，实践是学习的最佳方式。