介绍
在本教程中，您将设置使用 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 文件，以便它准备好接收前面教程中的内容。
如何为 HTML 内容准备 index.html 文件
为了准备您的 index.html 文件作为您网站的主页，我们需要添加几行重要的 HTML。 这些 HTML 行将作为浏览器的说明，不会显示在网页本身上。 确保您的 index.html 文件为空（如果您有以前教程中的内容）并将以下代码片段添加到文档中：
索引.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 语言子标签注册表[X77X]。 - 打开和关闭
<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 创建网站所需的所有文件夹和文件。 您还应该准备一个包含必要 HTML 内容的 index.html 文件，以用作您网站的主页。 在下一个教程中，您将探索 演示站点 是如何构建的，以及您将采取的重新创建它的步骤。
