HTML（超文本标记语言）和CSS（层叠样式表）是构建网页的两种基本技术，HTML用于创建网页的结构，而CSS则用于样式化这些网页元素，通过结合使用HTML和CSS，我们可以制作出功能丰富、外观精美的网页。
HTML基础
HTML是一种标记语言，用于描述网页的结构和内容，一个基本的HTML文档包括头部（head）和身体（body）两部分，头部通常包含标题（title）、元数据（meta）、链接（link）等，而身体则包含实际的内容，如段落（p）、列表（ul/ol）、表格（table）等。
下面是一个简单的HTML示例：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>欢迎来到我的网页！</h1>
<p>这是一个简单的HTML示例，展示了如何创建一个基本的网页结构。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25岁</td>
</tr>
<tr>
<td>李四</td>
<td>30岁</td>
</tr>
</table>
</body>
</html>在这个示例中，我们使用了标题（title）、段落（p）、列表（ul/li）、表格（table/tr/th/td）等HTML元素来构建网页的结构，我们还通过链接（link）引入了一个外部样式表（style.css），以便使用CSS来样式化这些元素。
CSS基础
CSS是一种样式表语言，用于描述HTML元素的外观和布局，通过CSS，我们可以设置元素的颜色、大小、位置等属性，以及应用各种特效和动画效果，下面是一个简单的CSS示例：
body {
font-family: Arial, sans-serif;
color: #333;
background-color: #f0f0f0;
}
h1 {
color: #000;
font-size: 24px;
}
p {
color: #666;
font-size: 16px;
}在这个示例中，我们使用了选择器（如body、h1、p等）来指定要样式化的HTML元素，并通过属性（如color、font-size、background-color等）来设置元素的外观，这些样式规则会被应用到相应的HTML元素上，从而改变网页的外观和布局。
HTML与CSS的结合使用
通过结合使用HTML和CSS，我们可以制作出功能丰富、外观精美的网页，下面是一个简单的实例：
1、创建一个基本的HTML结构，包括头部、身体和页脚，在头部添加标题和元数据，在身体中添加一些内容，如段落、列表和表格，在页脚中添加一些联系信息或版权信息。
2、创建一个外部样式表文件（如style.css），用于样式化HTML元素，在样式表中添加一些基本的样式规则，如颜色、字体大小、背景颜色等，这些规则会被应用到相应的HTML元素上，从而改变网页的外观和布局。
3、在HTML文档的头部引入外部样式表文件，以便使用这些样式规则来美化网页，可以通过<link>标签来引入样式表文件。<link rel="stylesheet" href="style.css">，这样，浏览器在加载HTML文档时就会同时加载并应用样式表文件中的样式规则。
