介绍
在本实验中，学生将探索 HTML 标题标签，并学习如何使用不同的标题级别创建结构化的网页内容。实验将引导参与者创建一个基本的 HTML 文档，并理解从 <h1> 到 <h6> 的标题标签层次结构，展示这些标签如何用于组织和显示具有不同重要性的文本。
参与者将从设置基本的 HTML 结构开始，然后逐步添加标题标签，以理解它们在视觉和语义上的差异。通过本实验，学生将掌握有效使用标题标签的实用技能，理解它们在网页设计中的作用，并学习浏览器如何渲染不同大小的标题，以创建清晰且有条理的内容展示。
创建一个基本的 HTML 文档
在这一步中，你将学习如何创建一个基本的 HTML 文档，这是理解标题标签的基础。
首先，打开 WebIDE 并导航到 ~/project 目录。在文件资源管理器中右键点击并选择“新建文件”，创建一个名为 index.html 的新文件。
以下是你将创建的基本 HTML 文档结构：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First HTML Page</title>
</head>
<body>
<!-- Your content will go here -->
</body>
</html>
让我们分解一下关键组件：
<!DOCTYPE html>声明这是一个 HTML5 文档<html>是 HTML 页面的根元素<head>包含文档的元信息<body>包含页面的可见内容
在浏览器中查看此文件时的示例输出：
[一个空白的白色页面，没有可见内容]
现在，在 WebIDE 中保存文件。你可以通过检查文件资源管理器或使用终端来验证文件是否已创建。
探索 H1 到 H6 标题标签
在这一步中，你将学习 HTML 标题标签，这些标签用于定义网页内容的结构和层次。HTML 提供了六个级别的标题，从 <h1> 到 <h6>，其中 <h1> 是最重要的，而 <h6> 是最不重要的。
打开你在上一步中创建的 index.html 文件。更新 <body> 部分以包含不同的标题标签：
<body>
<h1>主标题（最大）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题（最小）</h6>
</body>
关于标题标签的关键点：
<h1>通常用于页面主标题或最重要的标题- 标题应按层次顺序使用
- 每个标题级别代表文档结构中的不同重要性级别
在浏览器中查看时的示例输出：
在 WebIDE 中保存文件。你可以在浏览器中打开文件，查看不同标题标签的显示效果。
比较不同标题的大小
在这一步中，你将探索不同标题标签在视觉上的大小差异，以及它们如何影响文档的视觉层次结构。打开你的 index.html 文件，并修改内容以更清晰地展示大小差异。
使用更具描述性的示例更新 <body> 部分：
<body>
<h1>欢迎来到 HTML 标题探索</h1>
<p>注意标题大小从 h1 到 h6 的变化：</p>
<h1>标题 1 - 最大且最重要</h1>
<p>这是一个 h1 标题，通常用于主标题。</p>
<h2>标题 2 - 章节标题</h2>
<p>H2 用于文档中的主要章节。</p>
<h3>标题 3 - 子章节标题</h3>
<p>H3 代表子章节或较小的部分。</p>
<h4>标题 4 - 次要标题</h4>
<p>H4 用于不太重要的标题。</p>
<h5>标题 5 - 非常小的标题</h5>
<p>H5 很少使用，但可用于额外的层次结构。</p>
<h6>标题 6 - 最小的标题</h6>
<p>H6 是最不显眼的标题标签。</p>
</body>
关键观察点：
- 每个标题标签（从
<h1>到<h6>）的默认大小逐渐减小 - 视觉层次结构帮助读者理解内容结构
- 浏览器默认样式会自动调整标题大小
在浏览器中查看时的示例输出：
在 WebIDE 中保存文件，并在浏览器中打开以查看大小差异。
测试标题标签的限制
在这一步中，你将探索使用 HTML 标题标签时的一些重要限制和最佳实践。理解这些限制将帮助你创建更符合语义且易于访问的网页。
更新你的 index.html 文件，添加以下内容以展示标题标签的限制：
<body>
<h1>页面主标题</h1>
<h2>错误的标题层次结构示例</h2>
<!-- 展示不正确的标题嵌套 -->
<h3>子章节</h3>
<h5>不推荐这样做！</h5>
<!-- 过度使用标题 -->
<h1>另一个主标题</h1>
<!-- 混合使用标题，缺乏逻辑结构 -->
<h6>非常小的标题</h6>
<h2>回到更大的标题</h2>
<p>需要记住的关键限制：</p>
<ul>
<li>避免跳过标题级别</li>
<li>每页仅使用一个 <h1></li>
<li>保持逻辑的标题层次结构</li>
</ul>
</body>
标题标签的重要限制：
- 避免跳过标题级别（例如，直接从 h1 跳到 h4）
- 每页仅使用一个
<h1>标签作为主标题 - 保持逻辑一致且连贯的标题结构
- 标题应反映内容的重要性
- 不当使用可能会对 SEO 和可访问性产生负面影响
在浏览器中查看时的示例输出：
在 WebIDE 中保存文件，并观察不一致的标题使用如何显得混乱。
总结
在本实验中，参与者通过创建一个基本的 HTML 文档并探索从 <h1> 到 <h6> 的六个不同标题级别，学习了 HTML 标题标签的基础知识。实验引导学习者构建标准的 HTML 结构，理解标题标签的用途和层次结构，并展示这些标签如何用于组织和结构化网页内容。
实践练习包括创建一个包含完整 HTML 模板的 index.html 文件，插入各种标题标签以展示它们在视觉和语义上的差异，并理解标题如何为整体文档结构和可读性做出贡献。参与者通过实际操作掌握了使用标题标签建立内容层次结构的技能，其中 <h1> 代表最重要的标题，而 <h6> 代表最不重要的标题。
