为您的网站设置 CSS 和 HTML：教程

Preslav Dobrev2022-10-28 · 2 min read

建设网站是开始网页开发的第一步。网页开发爱好者必须学习的第一件事就是如何为网站设置 CSS 和 HTML。通过设置基本的引导页面，初学者可以做好网站设计基础的准备，磨练他们的网页开发技能，并学习与开发人员合作。

本教程将引导您了解为网站设置 HTML 和 CSS 文件的基础知识。 让我们开始吧！

前提条件

对 HTML 和 CSS 的基本了解。

步骤 1 - 初始设置

首先，我们将创建一个新的项目目录，并将其命名为 demo-project :

mkdir demo-project

1	mkdir demo-project

接下来，使用 cd 命令：

cd demo-project

1	cd demo-project

在项目文件夹中，让我们添加启动基本网站所需的以下文件：

index.html ：此文件将包含所有 HTML 代码。
styles.css ：我们将在此处保留所有 CSS 文件，用于为我们的网站设置样式。
images ：所有必要的图像都必须保存在此文件夹中。

现在我们已经创建了项目目录并添加了必要的文件，让我们继续并在下一步中将 HTML 内容添加到我们的 index.html 中。

步骤 2 - 在 index.html 文件中添加 HTML 内容

在 index.html 文件（我们在上一步中创建的）中，我们将添加引导性的 HTML 代码。这些基本的 HTML 行将作为浏览器的指令，但不会显示在网页上。

在您的 index.html 文件中添加以下代码块：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Welcome to CloudSigma!</title>
<link rel="stylesheet" href="css/styles.css">
</head>

<body>
</body>

</html>

<!DOCTYPE html>

<head>

<title>Welcome to CloudSigma!</title>

</head>

<body>

</body>

</html>

注意：在添加这些代码块之前，请确保 index.html 文件是空的。此外，请考虑更改在 <title> 部分中突出显示的标题。

让我们来了解一下所使用的术语：

<!DOCTYPE html> ：这是一个声明，用于通知浏览器 HTML 文档中使用的 HTML 类型。
- 由于有多个版本的 HTML 标准可用，因此指定 DOCTYPE 可以让浏览器轻松识别 HTML 版本。例如，在本指南中，我们使用的是最新版本的 HTML5.
<html> ：此标签通知浏览器，其中包含的内容必须被视为 HTML。在打开 <html> 文件时，请确保使用 </html> 标签。此标签支持 lang 属性，您可以指定网页的语言。在我们的教程中，我们使用 en 语言标签将语言设置为英语。
- 访问 IANA Language Subtag Registry 以查看其他可用的语言。
<head> ：这会在 HTML 文档中创建一个区域，并包含有关网页的信息。但是，这里没有具体的内容细节，浏览器也不会在 head 区域中显示任何信息。
<meta charset="utf-8"> ：指定文档的字符集。它必须采用 Unicode 格式，即 UTF-8，支持大多数公认的书面语言。
<title> ： <title> 标签通知浏览器网页的名称。当网站列在搜索结果中时，标题会显示在浏览器标签页上。
<link rel="stylesheet" href="css/styles.css"> ：通知浏览器识别包含 CSS 样式的样式表。
<body> ：此标签包含网页的主要内容。当使用 <body> 标签时，请确保使用 </body> 标签将其关闭。

步骤 3 - 使用 CSS 设置样式

在 styles.css 文件，根据您的项目需求添加样式。在此示例中，在您的 styles.css 文件：

body {
background-color: red;
}

h1 {
color: yellow;
text-align: centre;
}

p {
font-family: verdana;
font-size: 25px;
}

body {

background-color: red;

}

h1 {

color: yellow;

text-align: centre;

}

p {

font-family: verdana;

font-size: 25px;

}

我们终于创建了启动网站所需的基本 HTML 和 CSS 文件。此外，您可以添加图像并将其保存在 images 文件夹中。保存并关闭文件。之后，打开 index.html 文件，在您最喜欢的网页浏览器中打开，您将在屏幕上看到一个基本页面。

总结

在这篇入门教程中，我们已经学习了设置 HTML 和 CSS 的基础知识，并创建了一个简易的网站。现在是时候创建新页面、对其进行调整、添加内容，并从导航栏链接所有内容了。作为下一步，请尝试向 index.html 文件并使用 CSS 为其设置样式。

此外，还有其他 HTML 和 CSS 教程，您可以在我们的博客:

祝您编程愉快！

Preslav Dobrev

作者 · CloudSigma

Preslav Dobrev 是 CloudSigma 的创意设计师，专注于通过传统和创新营销渠道打造一致的企业形象。他擅长将艺术愿景与战略营销相融合，创造具有影响力的品牌叙事。