在本实验中，学生将学习创建基本 HTML 文档结构的基础技能，并理解关键的 HTML 标签。实验将引导参与者通过设置带有正确 DOCTYPE 声明的 HTML 文档、添加 HTML 根标签、配置 head 部分以及探索不同类型的 HTML 标签来完成学习。
参与者将从创建 HTML5 文档开始，学习如何声明文档类型、构建基本的页面布局，并理解关键元素如 <html>、<head> 和 <body> 的作用。在实验结束时，学生将全面掌握如何创建一个格式良好的 HTML 文档，并使用各种 HTML 标签来构建网页内容。
在这一步中，你将学习如何通过添加 DOCTYPE 声明来设置 HTML 文档的基本基础。DOCTYPE 声明至关重要，因为它告诉 Web 浏览器你的文档使用的是哪个版本的 HTML，从而确保正确的渲染和兼容性。
首先，打开 WebIDE 并在 ~/project 目录中创建一个名为 index.html 的新文件。
HTML5 的 DOCTYPE 声明非常简单明了。你需要将其作为 HTML 文档的第一行添加：
<!doctype html>这个声明告诉浏览器你正在使用 HTML5，这是 HTML 的最新版本。它不区分大小写，但建议使用小写版本以确保一致性和可读性。
让我们创建一个包含 DOCTYPE 声明的基本 HTML 文档结构：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML!</h1>
</body>
</html>
注意：了解更多关于 如何在 WebIDE 中预览 HTML 文件。
浏览器中的示例输出将显示：
Welcome to HTML!需要记住的关键点：
<!DOCTYPE html> 表示 HTML5在这一步中，你将学习 HTML 文档的基本结构，重点是 HTML 根标签和文档的基本结构。<html> 标签是所有其他 HTML 元素的容器，并作为 HTML 页面的根元素。
打开你在上一步中在 WebIDE 中创建的 index.html 文件。让我们通过添加完整的根标签及其基本组件来扩展之前的 HTML 结构：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML Structure</h1>
<p>This is the basic structure of an HTML document.</p>
</body>
</html>让我们分解关键组件：
<html> 标签：包裹所有其他 HTML 内容的根元素lang="en" 属性：指定文档的语言（本例中为英语）<head>：包含文档的元数据<body>：包含网页的可见内容在 Web 浏览器中的示例输出如下：
Welcome to HTML Structure
This is the basic structure of an HTML document.需要记住的关键点：
<html> 根标签lang 属性有助于提高可访问性和搜索引擎优化<head> 和 <body> 部分在这一步中，你将学习 HTML 文档的 <head> 部分，以及如何使用 meta 标签和 title 标签为你的网页提供重要信息。
在 WebIDE 中打开你的 index.html 文件，并使用以下示例更新 <head> 部分：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="A simple HTML learning page" />
<title>My HTML Learning Journey</title>
</head>
<body>
<h1>Welcome to HTML Metadata</h1>
<p>This page demonstrates head section configuration.</p>
</body>
</html>让我们分解关键的 meta 标签及其用途：
<meta charset="UTF-8">：指定文档的字符编码<meta name="viewport">：确保在不同设备上正确渲染<meta name="description">：为搜索引擎提供简短的页面描述<title>：设置显示在浏览器标签页中的页面标题浏览器标签页中的示例输出：
My HTML Learning Journey需要记住的关键点：
<head> 部分包含 HTML 文档的元数据<title> 标签对于页面标识和 SEO 至关重要在这一步中，你将学习两种类型的 HTML 标签：单标签（自闭合标签）和双标签。理解这些标签之间的区别对于创建结构良好的 HTML 文档至关重要。
在 WebIDE 中打开你的 index.html 文件，并使用以下示例更新 body 部分：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Tags Exploration</title>
</head>
<body>
<!-- Double Tags (Opening and Closing) -->
<h1>Welcome to HTML Tags</h1>
<p>This is a paragraph with <strong>bold text</strong>.</p>
<!-- Single (Self-Closing) Tags -->
<img src="example.jpg" alt="Example Image" />
<br />
<input type="text" placeholder="Enter your name" />
</body>
</html>让我们分解不同类型的标签：
双标签（成对标签）：
<tag> 和一个结束标签 </tag><h1>、<p>、<strong>、<div>单标签（自闭合标签）：
<img>、<br>、<input>浏览器中的示例输出将显示：
Welcome to HTML Tags
This is a paragraph with bold text.
[此处将显示一张图片]
[将显示一个文本输入框]
需要记住的关键点：
在这一步中，你将学习 <body> 标签以及如何在 HTML 文档中结构化内容。body 标签是网页所有可见内容的放置位置。
在 WebIDE 中打开你的 index.html 文件，并使用以下示例更新 body 部分：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content Placement Example</title>
</head>
<body>
<!-- Headings -->
<h1>Welcome to HTML Content Placement</h1>
<h2>Subheading Level 2</h2>
<h3>Subheading Level 3</h3>
<!-- Paragraphs -->
<p>This is a paragraph explaining the importance of content structure.</p>
<!-- Lists -->
<h4>Key HTML Elements:</h4>
<ul>
<li>Headings</li>
<li>Paragraphs</li>
<li>Lists</li>
</ul>
<!-- Div for grouping content -->
<div>
<p>This paragraph is inside a div container.</p>
</div>
<!-- Links and Images -->
<a href="https://example.com">Visit Example Website</a>
<img src="example.jpg" alt="Example Image" width="300" />
</body>
</html>浏览器中的示例输出将显示：
需要记住的关键点：
<body> 标签包含所有可见的页面内容<h1> 到 <h6>）创建内容层级<div> 标签可以分组和结构化内容在本实验中，参与者学习了创建基本 HTML 文档结构的基础步骤。实验从设置 DOCTYPE 声明开始，这对于确保浏览器正确渲染和与 HTML5 兼容至关重要。学习者探索了关键的 HTML 标签，包括根标签 <html>、<head> 和 <body> 部分，理解了它们在文档组织中的具体作用。
实验引导学生创建了一个完整的 HTML 文档，演示了如何添加 meta 标签、设置字符编码、定义页面标题以及在 body 标签中放置内容。参与者通过实践构建了一个结构良好的 HTML 页面，学习了单标签和双标签、正确的标签嵌套以及语义化标记在 Web 开发中的重要性等关键概念。
