欢迎来到这篇博客，今天我们将探索使用HTML和CSS构建静态网站的方法。HTML和CSS是网页开发的基础，了解它们将帮助您快速上手建立自己的网站。
准备工作
在开始之前，您需要确定自己掌握了以下几个方面：
- 网页编辑器：尽管可以使用任何文本编辑器编写HTML和CSS代码，但使用专门的网页编辑器（如Visual Studio Code、Sublime Text等）将更加方便。
- 基础知识：熟悉HTML和CSS的基本语法和标签。
如果您满足上述条件，就可以开始动手啦！
1. 创建HTML文档
首先，打开您的编辑器并创建一个新的HTML文件。使用.html作为文件扩展名，这样浏览器就能够识别它。
在文件的开头，添加以下代码：
<!DOCTYPE html>
<html>
<head>
<title>我的静态网站</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
这是HTML文档的基本结构。其中：
<!DOCTYPE html>声明了当前文档使用的HTML版本。<html>标签是整个HTML文档的根元素。<head>标签是用于存放文档的元数据，如标题和样式表。<title>标签定义了当前文档的标题，它将显示在浏览器的标签页上。<link>标签用于引入CSS样式表。
现在我们可以在 <body> 标签中添加网站的内容。
2. 添加内容和样式
让我们来添加一些常见的网站元素，例如标题、段落、图像和导航栏。
在 <body> 标签中添加以下代码：
<header>
<h1>欢迎来到我的静态网站！</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<section>
<h2>欢迎</h2>
<p>这是一个演示网站，用于展示构建静态网站的基本技巧。</p>
<img src="image.jpg" alt="网站LOGO">
</section>
<footer>
<p>版权所有 © 2022</p>
</footer>
现在我们已经添加了一个简单的页面结构和一些内容。
接下来，我们需要添加一些CSS样式来美化页面。在同一目录下创建一个名为 styles.css 的CSS文件，并添加以下代码：
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #f1f1f1;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
display: inline;
margin-right: 10px;
}
nav a {
text-decoration: none;
color: #333;
}
section {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
这是一个简单的CSS样式表，它定义了页面的排版、颜色和其他样式属性。
3. 保存并预览
现在我们已经完成了HTML和CSS的编写，让我们保存文件并在浏览器中预览。
将HTML文件和CSS文件保存在同一目录下，并在浏览器中打开HTML文件。您应该能够看到一个简单但具有样式的静态网站。
总结
通过本文，您已经学会了使用HTML和CSS构建静态网站的基础知识。您可以尝试更改文本、样式和布局来创建您自己想要的网站。
要进一步学习和探索网页开发，您可以深入研究HTML和CSS的高级特性，学习JavaScript来使网站更加交互动态，也可以了解响应式设计和移动优化等最佳实践。
希望本文能够帮助您开始构建自己的静态网站之旅！祝您在网页开发的世界里取得成功！
本文来自极简博客，作者：薄荷微凉，转载请注明原文链接：快速入门：使用HTML和CSS构建静态网站
