HTML标题是网页内容的骨架，它通过<h1>到<h6>这六个标签为内容建立清晰的层级结构，这对于组织和呈现信息至关重要。
📘 核心概念与基础代码
HTML提供了六级标题标签，从最重要的<h1>到最不重要的<h6>。它们默认情况下会以不同的字体大小和粗细显示，但更重要的是，它们为文档提供了语义化结构。
| 标签 | 语义与用途说明 | 默认样式特点（典型） |
| --- | --- | --- |
| <h1> | 主标题，代表页面或章节的核心主题，一个页面最好只使用一次。 | 字体最大，最粗。 |
| <h2> | 二级标题，用于划分<h1>主题下的主要部分。 | 字体比<h1>小，但比普通文本大。 |
| <h3> | 三级标题，在<h2>部分内进行更细致的划分。 | 依次递减。 |
| <h4> | 四级标题，使用频率相对较低。 | 依次递减。 |
| <h5> | 五级标题。 | 依次递减。 |
| <h6> | 六级标题，层级最低。 | 字体最小。 |
基础代码示例
下面的代码展示了一个基本的标题层级结构，并介绍了如何用CSS美化它们。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题（显示在浏览器标签页上）</title>
<style>
/* 使用CSS控制标题的外观 */
h1 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
h2 {
color: #34495e;
background-color: #ecf0f1;
padding: 5px;
}
</style>
</head>
<body>
<h1>这是一级主标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<!-- 在实际项目中，可以根据内容深度使用 h4-h6 -->
</body>
</html>💡 重要原则与最佳实践
保持层级逻辑：标题应像书本目录一样有清晰的层次，避免跳级（例如，<h2>后面直接接<h4>）。
内容相关性：标题应准确概括其下方段落的内容，并在其中自然地包含相关关键词，这有助于搜索引擎优化（SEO）。
样式定制：标题的默认样式可以通过CSS进行完全自定义，以适应网站的设计风格，不要因为想要大号字体而滥用标题标签。
🛠️ 实际项目场景与AI实操Prompt
以下是两个常见的项目场景，以及你可以直接用于AI助手的详细Prompt，来帮助你快速生成符合要求的代码结构。
场景一：创建一篇技术博客文章页面
技术博客需要清晰的结构来引导读者阅读复杂的主题。
AI实操Prompt：
请帮我生成一篇关于“JavaScript闭包详解”的技术博客文章的HTML骨架结构。要求如下：
1. **页面结构**：使用语义化的HTML5标签，如`<article>`和`<section>`。
2. **标题层级**：
* 文章主标题使用`<h1>`。
* 文章至少包含3个主要部分（如“定义”、“作用”、“应用场景”），每个部分使用`<h2>`。
* 在每个`<h2>`部分下，使用`<h3>`进行更细粒度的知识点划分（例如，在“定义”部分下分出“词法作用域”和“闭包的形成”）。
3. **内容填充**：在每个标题下，请生成一段简要的说明性文字（用`<p>`标签）。
4. **样式建议**：请提供简单的内联`<style>`，使`<h2>`标题具有浅灰色背景和左边框，以增强层次感。
请输出完整的HTML代码。场景二：构建一个电商网站的产品详情页
产品页需要有效展示产品信息并引导购买决策。
AI实操Prompt：
请生成一个电商网站产品详情页的HTML结构，产品为“某品牌轻薄笔记本电脑”。要求如下：
1. **整体布局**：包含页头（Header）、主内容区（Main）、页脚（Footer）。
2. **标题规划**：
* 页头的网站Logo使用`<h1>`（代表整个网站的主题）。
* 产品名称（如“XX品牌 超极本 2025款”）在主要内容区使用`<h2>`作为该页面的内容主标题。
* 产品详情部分划分为“规格参数”、“商品描述”、“用户评价”几个大区块，分别使用`<h3>`。
* 在“规格参数”区块下，对“处理器”、“内存”等分类使用`<h4>`。
3. **交互元素**：在“用户评价”部分，请包含一个按钮，点击后可以调用JavaScript函数`showMoreReviews()`来展示更多评论。
4. **语义化与SEO**：确保标题标签的使用符合逻辑层次，并在`<h2>`和`<h3>`中合理包含“笔记本电脑”、“超极本”等关键词。
请输出完整的HTML代码，并为关键元素添加中文注释。