本文将教您如何使用HTML和CSS创建第一个网页，介绍HTML的基本结构，包括文档类型、头部、标题等，教授如何使用HTML元素定义文本、图片、链接等，介绍CSS的基础知识，如选择器、样式属性和值，并展示如何将CSS应用于HTML元素以调整布局和外观，通过实例演示如何组合HTML和CSS完成一个简单的网页设计。
在数字时代，网页已经成为我们日常生活和工作中不可或缺的一部分，无论是个人项目还是商业网站，编写一个基本的网页都需要掌握HTML（超文本标记语言）和CSS（层叠样式表），本文将引导你从头开始,一步步学会编写自己的第一个网页。
HTML基础：构建网页的骨架
什么是HTML？
HTML是一种用于创建网页的标准标记语言，它定义了网页的结构和内容,使得浏览器能够正确地解析和显示网页。
HTML文档的基本结构
一个完整的HTML文档通常包括以下部分：
<!DOCTYPE html>：声明文档类型,告诉浏览器这是一个HTML5文档。<html>：HTML文档的根元素。<head>：包含文档的元数据，如标题、字符集和链接到样式表或脚本的位置。<body>：包含网页的所有可见内容。
创建一个简单的HTML页面
让我们从一个简单的HTML页面开始，使用文本编辑器（如Notepad++或Sublime Text）创建一个新的文本文件，并将其保存为index.html,将以下代码复制并粘贴到该文件中：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个简单的HTML页面示例。</p>
</body>
</html>
保存文件后，双击它在浏览器中打开，你应该能看到一个标题为“欢迎来到我的网页”的简单页面。
CSS基础：美化网页
什么是CSS？
CSS是一种样式表语言，用于描述HTML元素的外观和格式，通过使用CSS，你可以控制网页的布局、字体、颜色等各个方面。
CSS的选择器和规则
CSS使用选择器来定位HTML元素，并应用样式规则，选择器可以是元素名、类名、ID名或属性名。
- 元素选择器：
p选择所有的段落元素。 - 类选择器：
.class-name选择所有具有指定类名的元素。 - ID选择器：
#id-name选择具有指定ID的元素。
规则由选择器后面跟着大括号内的样式属性和值组成。
p {
color: blue;
font-size: 16px;
}
这段代码将所有段落的颜色设置为蓝色,并将字体大小设置为16像素。
将CSS应用到HTML页面
要将CSS应用到我们之前创建的HTML页面中，我们需要引入外部CSS文件，在<head>部分添加以下代码：
<head>
<meta charset="UTF-8">我的第一个网页</title>
<link rel="stylesheet" href="styles.css">
</head>
创建一个新的文本文件并将其保存为styles.css,在该文件中编写CSS规则，
body {
background-color: lightgrey;
}
h1 {
color: white;
text-align: center;
}
这将设置网页背景为浅灰色,并将标题居中对齐。
再次在浏览器中打开index.html文件，你应该能看到一个带有背景颜色和居中标题的网页,这是通过CSS实现的。
通过本文的学习，你已经掌握了如何使用HTML和CSS编写一个简单的网页，从基础开始，不断实践和探索HTML和CSS的更多功能，你将能够创建出既美观又实用的网页，学习是一个持续的过程，不要害怕犯错,每个错误都是成长的机会。
