编辑“︁HTML标题”︁（章节）

= HTML标题 =

HTML标题（Heading）是用于定义文档结构和层次的重要文本元素，通过6级标题（<code><nowiki><h1></nowiki></code>到<code><nowiki><h6></nowiki></code>）实现语义化内容分级。标题不仅影响页面视觉效果，更是SEO和可访问性的核心组成部分。

== 基本语法 ==
HTML标题通过标签层级表示重要性，<code><nowiki><h1></nowiki></code>为最高级：

<syntaxhighlight lang="html">
<h1>主标题</h1>
<h2>章节标题</h2>
<h3>子章节标题</h3>
<h4>次级内容标题</h4>
<!-- 更小层级标题通常较少使用 -->
</syntaxhighlight>

=== 渲染效果 ===
浏览器默认样式会按层级缩小字号并加粗：
<mermaid>
flowchart TD
    A[h1: 2em 加粗] --> B[h2: 1.5em]
    B --> C[h3: 1.17em]
    C --> D[h4: 1em]
    D --> E[h5: 0.83em]
    E --> F[h6: 0.67em]
</mermaid>

== 语义化原则 ==
* '''单页<code><nowiki><h1></nowiki></code>原则'''：每个页面应只有一个<code><nowiki><h1></nowiki></code>，对应文档主题
* '''逻辑嵌套'''：标题层级不可跳跃（如h1直接接h3）
* '''SEO优化'''：搜索引擎优先索引标题内容

=== 错误示例 ===
<syntaxhighlight lang="html">
<!-- 错误：跳过h2层级 -->
<h1>产品介绍</h1>
<h3>功能列表</h3> <!-- 应改为h2 -->
</syntaxhighlight>

== 实际应用案例 ==
=== 博客文章结构 ===
<syntaxhighlight lang="html">
<h1>人工智能发展简史</h1>
<h2>早期发展阶段</h2>
<h3>图灵测试的提出</h3>
<h2>现代突破</h2>
<h3>深度学习革命</h3>
</syntaxhighlight>

=== 数学公式标题 ===
结合<code><nowiki><math></nowiki></code>标签：
<syntaxhighlight lang="html">
<h2>二次方程公式</h2>
<math>ax^2 + bx + c = 0</math>
</syntaxhighlight>

== 高级特性 ==
=== ARIA增强 ===
为屏幕阅读器添加额外语义：
<syntaxhighlight lang="html">
<h1 aria-label="主要章节：用户手册">用户手册</h1>
</syntaxhighlight>

=== CSS计数器联动 ===
自动生成章节编号：
<syntaxhighlight lang="css">
body { counter-reset: section; }
h2::before { 
  counter-increment: section; 
  content: "第" counter(section) "章 ";
}
</syntaxhighlight>

== 最佳实践 ==
* 保持标题内容简洁（建议不超过20字）
* 避免纯粹装饰性使用标题
* 移动端考虑响应式字号覆盖：
<syntaxhighlight lang="css">
@media (max-width: 600px) {
  h1 { font-size: 1.8rem; }
}
</syntaxhighlight>

== 技术规范 ==
根据HTML5标准：
* 标题元素属于[流内容]、[ palpable内容]
* 默认显示属性：<code>display: block</code>
* 内容模型：短语内容

<mermaid>
stateDiagram
    [*] --> 文档结构
    文档结构 --> 标题层级: 建立
    标题层级 --> SEO权重: 影响
    标题层级 --> 可访问性: 关联
</mermaid>

== 参见 ==
* [[HTML段落元素]]
* [[HTML语义化标签]]
* [[CSS选择器优先级]]（影响标题样式覆盖）

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML文本元素]]