HTML和CSS是创建网页的基础，使用HTML编写结构，如标题、段落、链接等，并使用``定义文档类型，利用CSS为页面添加样式，包括字体、颜色、布局等，通过选择器和样式属性设置视觉效果，完成HTML与CSS编写后，保存为.html文件并在浏览器中打开，即可看到首个网页的雏形。
在数字化时代,掌握基础的HTML和CSS技能对于任何希望制作网页或开展网络项目的人来说都是至关重要的第一步，本文将详细介绍如何使用HTML和CSS来创建你自己的第一个网页，通过实际操作，你将学会如何编写结构化的标记语言、应用样式，并最终在浏览器中预览你的作品。
HTML的基础知识
当我们谈论HTML时,我们实际上是在谈论网站的结构和内容层次，HTML使用标记来定义网页中的各个部分，例如头部、段落、链接和列表等，每个HTML文档都应该包含一个<!DOCTYPE html>声明，它告诉浏览器使用HTML5标准来解析文档。
下面是一个简单的HTML文档结构示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个使用HTML和CSS创建的简单网页。</p>
</body>
</html>
在这个例子中,<html>标签是整个网页的根元素，<head>标签包含了元数据，如字符集声明和文档标题。<body>标签则包含了可见的网页内容。
CSS的基础知识
与HTML不同,CSS用于描述HTML元素的外观和布局，通过将样式添加到HTML元素中，我们可以控制页面上的字体、颜色、间距等，CSS的全称是“层叠样式表”（Cascading Style Sheets）。
下面是一个简单的CSS规则示例：
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
text-align: center;
}
p {
font-size: 16px;
color: #666;
}
在这个例子中,我们定义了.body类选择器来设置整个页面的字体和背景颜色，.h1类选择器来设置标题1的颜色和对齐方式，以及.p类选择器来设置段落的字体大小和颜色。
实践：创建你的第一个网页
现在我们已经了解了HTML和CSS的基础知识,接下来我们将通过实际操作来创建你自己的第一个网页，使用文本编辑器（如Notepad++、Sublime Text或Visual Studio Code）创建一个新的文本文件，并将其保存为.html扩展名，例如index.html。
在文件中输入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 {
font-size: 16px;
color: #666;
}
</style>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个使用HTML和CSS创建的简单网页。</p>
</body>
</html>
保存文件后,双击打开它，你应该能在浏览器中看到一个包含标题和段落的简单网页。
通过本文的学习,你已经掌握了如何使用HTML和CSS来创建和美化你的第一个网页，这是网站开发旅程的一个起点，随着你的技能提升，你可以探索更多高级主题，如响应式设计、动态内容加载和交互式表单等，拿起你的键盘和鼠标，开始创建你自己的网页吧！
