介绍
在本教程中,您将设置必要的文件夹和文件来构建一个使用HTML和CSS的网站,您还将准备一个index.html文件,以便它准备在前面的教程中接收HTML内容。
前提条件
如果你一直在跟随本教程系列,你可以继续使用css-practice项目目录,index.html文件,images文件夹,css文件夹和styles.css文件,你创建的系列早些时候。
<$>[注] **注:如果您决定为文件夹或文件创建自己的名称,请确保避免字符空间,特殊字符(如!, #, % 或其他字符)和大写字母,因为这些可能会在以后引起问题。
您应该有一个名为css-practice的项目文件夹,其中包含在本教程系列中探索CSS所需的下列文件夹和文件:
- 包含「styles.css」文件的名为「css」的文件夹
- 名为「images」的空文件夹
- 名为「index.html」的文件
在本教程的第一步中,您将准备index.html文件,以便它准备好接收未来的教程中的内容。
如何为 HTML 内容准备你的 index.html 文件
为了准备你的 index.html 文件作为你的网站的首页,我们需要添加一些重要的 HTML 行. 这些 HTML 行将作为浏览器的指示,不会显示在网页本身。
1[label index.html]
2<!DOCTYPE html>
3<html lang="en">
4 <head>
5 <meta charset="utf-8">
6 <title>Sammy the Shark</title>
7 <link rel="stylesheet" href="css/styles.css">
8 </head>
9 <body>
10 </body>
11</html>
请务必用您自己选择的标题更改所突出的网站标题,然后保存index.html文件。继续前,让我们简要审查您刚刚添加的代码,以了解其目的:
- ###! DOCTYPE html #### 声明告诉浏览器此文档使用的HTML类型. 由于 HTML 标准有多个版本,所以必须声明这个值,浏览器需要知道使用哪个. 在本声明中,"html"指定了HTML的当前网络标准,即HTML5. (_) ( )* 打开和关闭的QQhtmlQQ标签告诉浏览器,在这两个标签之间插入的所有内容都应该被解释为HTML. 在这个标签中,您还添加了指定网页语言的"lang"属性. 在这个例子中,语言使用 " en " 语言标记设定为英语。 完整的语言标记列表请访问 [IANA Language Subtag register] (https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).
- 打开和关闭的 QQheadQQQ 标记在 HTML 文档中创建了一节,通常包含信息_关于_页面,而不是页面内容本身. 浏览器不会在 QQhead {} 中显示此信息 。
- QQmeta charset="utf-8" 标记指定了文档的字符集应为UTF-8,一种从多种书面语言支持大多数字符的unicode格式. (_) (
)* QQtitleQQ标签告诉浏览器网页的名称. 这个标题出现在浏览器标签上,当网站在搜索结果中被列出时,但它并没有出现在网页本身上. 如果要将网站个性化, 请将
鲨鱼萨姆米替换为您所选择的名称或标题 。 ( _) ( )* (原始内容存档于2017-09-26) (中文(简体) ). The QQlink rel="stylesheet" href="cs/styles.cs". 告诉浏览器在哪里找到包含样式规则的样式表。 如果您遵循了此系列早期的指示 [如何设置您的 CSS 和 HTML 练习工程] (https://andsky.com/tech/tutorials/how-to-set-up-your-css-and-html-practice-project), 您的样式表应该位于此文件路径 。 - 打开和关闭的QQbody>`标签会包含网页的主要内容. 您会在前面的教程中在这些标记之间添加 HTML 内容 。 (_) (英语)
结论
您现在已经创建了使用HTML和CSS创建网站所需的所有文件夹和文件,您还应该有一个index.html文件,并准备了必要的HTML内容,以便作为您的网站的主页。