该系列的一部分：
如何使用 CSS 构建网站
本教程是使用 CSS创建和自定义此网站的系列的一部分，CSS 是一种用于控制网站呈现的样式表语言。您可以按照整个系列重新创建演示网站并熟悉 CSS 或将此处描述的方法用于其他 CSS 网站项目。
在继续之前，我们建议您了解一些 HTML 知识，HTML 是用于在 Web 浏览器中显示文档的标准标记语言。如果您不熟悉 HTML，可以在开始本系列之前先阅读我们如何使用 HTML 构建网站系列的前十个教程。
介绍
在本教程中，您将设置使用 HTML 和 CSS 构建网站所需的文件夹和文件。您还将准备一个index.html文件，以便它准备好接收前面教程中的 HTML 内容。
先决条件
如果您一直在学习本教程系列，则可以继续使用您在本系列前面创建的css-practice项目目录、index.html文件、images文件夹、css文件夹和styles.css文件。如果您还没有遵循本教程系列，并且需要设置这些文件夹和文件的说明，请参阅本系列中的早期教程如何设置您的 CSS 和 HTML 实践项目。
注意：如果您决定为文件夹或文件创建自己的名称，请确保避免使用字符空格、特殊字符（例如 !、#、% 或其他）和大写字母，因为这些可能会导致以后出现问题。另请注意，您将需要在本系列教程剩余部分的某些步骤中修改文件路径，以确保它们与您的文件名相符。
您应该有一个名为的项目文件夹css-practice，其中包含在本教程系列中探索 CSS 所需的以下文件夹和文件：
css包含文件的命名文件夹styles.css- 一个名为的空文件夹
images - 一个名为
index.html
在本教程的第一步中，您将准备index.html文件，以便它准备好接收前面教程中的内容。
如何为index.htmlHTML 内容准备文件
为了准备好您的index.html文件以用作您网站的主页，我们需要添加几行重要的 HTML。这些 HTML 行将作为浏览器的指令，不会显示在网页本身上。确保您的index.html文件为空（如果您有之前教程中的内容）并将以下代码片段添加到文档中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sammy the Shark</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
</body>
</html>
确保使用您自己选择的标题更改突出显示的站点标题。然后保存index.html文件。在继续之前，让我们简要回顾一下您刚刚添加的代码以了解其用途：
- 该
<!DOCTYPE html>声明指出哪些HTML的类型本文档中所使用的浏览器。声明这个值很重要，因为 HTML 标准有多个版本，浏览器需要知道使用哪个版本。在此声明中，html指定了 HTML 的当前 Web 标准，即 HTML5。 - 开始和结束
<html>标签告诉浏览器插入这两个标签之间的所有内容都应该被解释为 HTML。在此标记中，您还添加了lang指定网页语言的属性。在此示例中，使用en语言标签将语言设置为英语。如需语言标签的完整列表，请访问IANA 语言子标签注册表。 - 开始和结束
<head>标记在 HTML 文档中创建一个部分，该部分通常包含有关页面的信息，而不是页面内容本身。浏览器不会在一个<head>部分中显示信息。 - 该
<meta charset="utf-8">标签指定文档的字符集应该是 UTF-8，这是一种支持来自各种书面语言的大多数字符的 Unicode 格式。 - 该
<title>标签告诉浏览器网页的名称。此标题显示在浏览器选项卡上，以及当该站点列在搜索结果中但未显示在网页本身上时。如果您想个性化该网站，请确保将“Sammy the Shark”替换为您的姓名或您选择的标题。 - 该
<link rel="stylesheet" href="css/styles.css">告诉浏览器在哪里可以找到包含样式规则的样式表。如果您按照本系列前面的说明进行操作如何设置您的 CSS 和 HTML 练习项目，您的样式表应该位于此文件路径中。 - 开始和结束
<body>标签将包含网页的主要内容。您将在后面的教程中在这些标签之间添加 HTML 内容。
结论
您现在已经创建了使用 HTML 和 CSS 创建网站所需的所有文件夹和文件。您还应该index.html准备一个包含必要 HTML 内容的文件，用作您网站的主页。在下一个教程中，您将探索演示站点的构建方式以及重新创建它所需的步骤。
