如何设置您的CSS和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 文件，以便它准备好接收前面教程中的内容。

如何为 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 文件，以用作您网站的主页。 在下一个教程中，您将探索 演示站点 是如何构建的，以及您将采取的重新创建它的步骤。

取自“https://cainiaojiaocheng.com/index.php?title=如何设置您的CSS和HTML网站项目&oldid=28458”
Powered by MediaWiki