HTML 文档结构：创建基础网页

介绍

欢迎来到 HTML 的世界！你在互联网上看到的每一个网页都建立在一个基础结构之上。理解这个结构是网页开发中第一个也是最关键的一步。

在本实验中，你将学习如何创建 HTML 文档的基本骨架。我们将涵盖每个 HTML 页面都必须具备的基本组成部分：

在本实验结束时，你将从零开始构建一个完整、有效且简单的 HTML 页面。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个中级级别的实验，完成率为 70%。获得了学习者 100% 的好评率。

在本步骤中，你将添加 DOCTYPE 声明，这是你的 HTML 文档中的第一行内容。此声明会告知网页浏览器该页面是用 HTML5 编写的。这是一种标准做法，可确保浏览器正确渲染页面。

首先，在 WebIDE 左侧的文件浏览器中找到 index.html 文件。点击它在编辑器中打开。

该文件目前是空的。在 index.html 文件的最顶部添加以下代码行：

<!DOCTYPE html>

你的 index.html 文件现在应该如下所示：

<!DOCTYPE html>

这一行是每个现代网页的起点。

在本步骤中，你将添加 <html> 元素。此元素是页面上所有其他 HTML 元素（<!DOCTYPE> 声明除外）的根容器。

在打开的 <html> 标签内包含 lang 属性也是一种最佳实践。此属性指定文档内容的语言，这有助于搜索引擎和屏幕阅读器。对于英语，我们使用 lang="en"。

在你的 index.html 文件中，在 <!DOCTYPE html> 声明之后立即添加 <html> 和 </html> 标签。

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

你网页的所有其他元素都将放在这两个标签之间。

在本步骤中，你将添加 <head> 元素。<head> 部分包含有关 HTML 文档的元数据，例如其标题、字符集、样式和脚本。这些信息不会显示在网页本身上，但会被浏览器使用。

对于初学者来说，最重要的元数据是 <title> 标签。<title> 标签内的文本会显示在浏览器标签页或窗口的标题栏上。

在你的 <html> 元素内部，添加一个 <head> 部分。在 <head> 部分内，添加一个 <title> 标签，文本内容为 "My First Web Page"。

更新你的 index.html 文件，使其如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First Web Page</title>
  </head>
</html>

在本步骤中，你将添加 <body> 元素。这里将放置你网页的所有可见内容，例如标题、段落、图片、链接等。<body> 元素应放在 <head> 元素之后，但仍在 <html> 元素内部。

让我们为页面添加一个主标题，使其在浏览器中可见。我们将使用 <h1> 标签，它代表 "Heading 1"（一级标题）。

在你的 index.html 文件中，添加一个 <body> 部分。在 <body> 内部，添加一个 <h1> 元素，文本内容为 "Hello, World!"。

你完整的 index.html 文件现在应该如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

这是一个完整且有效的 HTML 文档结构。

在本步骤中，你将查看刚刚创建的网页。WebIDE 会自动保存你的更改，因此你无需手动保存文件。

一个简单的 Web 服务器已在后台为你运行。要查看你的页面，只需在 LabEx 界面中打开正确的标签页即可。

点击 Web 8080 标签页，它位于屏幕的左上方，在 "Terminal" 标签页旁边。

当你切换到 Web 8080 标签页时，你应该能看到你的网页。它将显示：

如果你没有看到这些内容，请返回之前的步骤，并确保你的 index.html 代码与示例完全一致。

恭喜你！你已成功创建了你的第一个有效 HTML 文档。你已经学习了构成每个网页骨架的基本构建块。

在本实验中，你学习了：

这个基本结构是你未来所有 Web 项目的基础。