从零开始制作你的第一个静态网页：HTML 和 CSS 入门教程
对于前端小白而言，制作一个静态网页是学习Web开发的第一步。在这篇文章中，我们将手把手教你如何使用HTML和CSS，轻松打造一个简单而美观的个人主页。让我们开始吧！
一、什么是HTML和CSS？
- HTML（超文本标记语言）是构建网页的基本语言。它负责网页的结构，定义网页的各个元素，比如文本、图片、链接等。
- CSS（层叠样式表）则用于设置网页的样式。它可以改变元素的颜色、字体、布局等，使网页看起来更加美观。
二、创建基本网页结构
首先，我们要创建一个HTML文件。你可以用任意文本编辑器（如记事本、VSCode等）创建一个新的文件，命名为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>
<nav>
<ul>
<li><a href="#about">关于我</a></li>
<li><a href="#projects">项目</a></li>
<li><a href="#contact">联系我</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>关于我</h2>
<p>你好，我是一个前端开发爱好者，热衷于学习Web开发技术。</p>
</section>
<section id="projects">
<h2>项目</h2>
<ul>
<li>项目1：个人博客</li>
<li>项目2：在线商店</li>
<li>项目3：Todo应用</li>
</ul>
</section>
<section id="contact">
<h2>联系我</h2>
<p>邮箱: example@example.com</p>
</section>
<footer>
<p>© 2023 个人主页</p>
</footer>
</body>
</html>
在这个代码示例中，我们定义了一个网页的基本结构，包括头部（<header>）、内容部分（<section>）和底部（<footer>）。每个部分都有对应的内容。
三、为网页添加样式
接下来，我们创建一个CSS文件，以为我们的网页添加样式。创建一个新的文件，命名为styles.css，并添加以下代码：
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background: #35424a;
color: #ffffff;
padding: 20px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav a {
color: #ffffff;
text-decoration: none;
}
section {
padding: 20px;
margin: 20px;
background: #ffffff;
border-radius: 5px;
}
footer {
text-align: center;
padding: 10px 0;
background: #35424a;
color: #ffffff;
position: relative;
bottom: 0;
width: 100%;
}
这个CSS样式为我们的页面设置了背景颜色、字体样式和元素的排版。你可以根据自己的喜好，自由地修改颜色和字体！
四、查看你的网页
完成以上步骤后，保存index.html和styles.css文件，然后在浏览器中打开index.html文件。你将会看到一个简单而美观的个人主页。
五、总结
通过这篇教程，你已经学习到了如何使用HTML创建网页结构，以及如何使用CSS为网页添加样式。这是学习前端开发的第一步，后续你可以继续学习JavaScript等其他技术，进一步丰富你的网页内容。
未来，你可以不断改进你的个人主页，比如添加更多的内容、图片、链接等。也可以尝试不同的CSS样式，打造一个更属于你自己的网页！希望你能在网页开发的旅程中找到乐趣！
