在当今数字化的时代，网页已成为信息传递和展示的主要方式。无论是个人博客、企业官网还是在线商店，网页设计都扮演着至关重要的角色。掌握HTML（超文本标记语言）和CSS（层叠样式表）是制作网页的基础。本指南旨在帮助初学者学习如何使用HTML和CSS创建简单而美观的网页，通过实际操作案例提升学习的趣味性。
2. HTML与CSS简介
2.1 什么是HTML
HTML（HyperText Markup Language）是网页的基础结构，负责网页内容的组织和展示。HTML使用标签（如<h1>、<p>、<div>等）来定义网页中的各种元素。
2.2 什么是CSS
CSS（Cascading Style Sheets）用于样式设计，它控制网页的外观（如颜色、字体、布局等）。通过CSS，我们可以使网页更具吸引力和可读性。
3. 创建你的第一个网页
3.1 搭建基础结构
首先，我们需要搭建一个基本的HTML页面。打开一个文本编辑器（如VSCode、Notepad++等），新建一个HTML文件，并命名为index.html。以下是一个基本的HTML结构：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>欢迎来到我的网页!</h1>
</header>
<main>
<section>
<h2>关于我</h2>
<p>这是我个人网页的介绍。</p>
</section>
</main>
<footer>
<p>© 2023 我的名字</p>
</footer>
</body>
</html>3.2 添加内容
在上面的代码中，我们已经设置了HTML页面的基本结构，其中包含标题、关于我的内容和页脚。接下来，我们需要创建一个CSS文件来美化该网页。新建一个CSS文件，并命名为styles.css，然后添加以下代码：
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background: #4CAF50;
color: white;
padding: 10px 0;
text-align: center;
}
main {
padding: 20px;
}
footer {
text-align: center;
padding: 10px 0;
background: #f1f1f1;
color: #333;
}3.3 美化网页
通过上面的CSS代码，我们为网页添加了背景颜色、调整了文本的颜色和行高，以及定义了页脚的样式。现在，保存文件并在浏览器中打开index.html，你将看到一个简单的个人网页。
4. 实际操作案例：制作个人简历网页
4.1 需求分析
在本节中，我们将创建一个个人简历网页。这个网页将包括以下内容：
- 个人信息（姓名、职业）
- 教育背景
- 工作经历
- 联系信息
4.2 设计网页布局
我们的网页将以简洁明了的方式展示信息。我们将使用不同的HTML标签来组织内容，如
标签用于不同的段落。CSS将用于设置整体布局和样式。
4.3 代码实现
1. 创建HTML结构
继续使用index.html文件，添加以下内容：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人简历</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>张三</h1>
<h2>网页开发者</h2>
</header>
<main>
<section>
<h2>关于我</h2>
<p>一个热爱编程的网页开发者，喜欢探索新的技术和工具。</p>
</section>
<section>
<h2>教育背景</h2>
<ul>
<li>计算机科学学士 - 北京大学 (2018)</li>
<li>前端开发证书 - 福彩学院 (2020)</li>
</ul>
</section>
<section>
<h2>工作经历</h2>
<ul>
<li>前端开发工程师 - ABC科技 (2020 - 至今)</li>
<li>实习前端开发 - XYZ公司 (2019)</li>
</ul>
</section>
<section>
<h2>联系方式</h2>
<p>Email: [email protected]</p>
<p>电话: 123-456-7890</p>
</section>
</main>
<footer>
<p>© 2023 张三</p>
</footer>
</body>
</html>2. 美化简历样式
在styles.css中添加以下样式：
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background: #3498db;
color: white;
padding: 20px 0;
text-align: center;
}
h1 {
margin: 0;
}
main {
background: white;
padding: 20px;
margin: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
section {
margin-bottom: 20px;
}
footer {
text-align: center;
padding: 10px 0;
background: #f1f1f1;
color: #333;
}3. 预览网页
完成所有代码后，在浏览器中打开index.html文件，就可以预览您创建的个人简历网页。
5. 扩展功能：响应式设计
5.1 什么是响应式设计
响应式设计是一种允许网页在不同设备上（如手机、平板和桌面）自动调整布局和样式的设计理念。这使得网页能在各种屏幕上都能良好显示，提高了用户体验。
5.2 使用CSS 媒体查询
媒体查询是实现响应式设计的关键技术。通过媒体查询，我们可以为不同屏幕尺寸设置不同的样式。例如，我们可以在styles.css中添加以下代码：
@media only screen and (max-width: 600px) {
body {
padding: 10px;
}
header {
text-align: left;
padding: 10px 0;
}
main {
margin: 0;
}
}5.3 测试和优化
在添加媒体查询后，您可以通过调整浏览器的窗口大小来测试响应式效果。确保在手机、平板与桌面设备上都能正常显示。
在这篇指南中，我们从基础开始，逐步构建了一个简单的网页，通过创建个人简历的实际操作案例，使学习过程更加生动有趣。您不仅学习了HTML和CSS的基础知识，还掌握了网页布局和响应式设计的基本技术。
接下来，您可以尝试：
- 添加更多的页面和内容，扩展您的网页。
- 学习JavaScript，为网页添加交互功能。
- 探索CSS框架（如Bootstrap）以加速开发过程。