HTML标题
HTML标题[编辑 | 编辑源代码]
HTML标题（Heading）是用于定义文档结构和层次的重要文本元素，通过6级标题（<h1>到<h6>）实现语义化内容分级。标题不仅影响页面视觉效果，更是SEO和可访问性的核心组成部分。
基本语法[编辑 | 编辑源代码]
HTML标题通过标签层级表示重要性，<h1>为最高级：
<h1>主标题</h1>
<h2>章节标题</h2>
<h3>子章节标题</h3>
<h4>次级内容标题</h4>
<!-- 更小层级标题通常较少使用 -->
渲染效果[编辑 | 编辑源代码]
浏览器默认样式会按层级缩小字号并加粗：
语义化原则[编辑 | 编辑源代码]
- 单页
<h1>原则：每个页面应只有一个<h1>，对应文档主题 - 逻辑嵌套：标题层级不可跳跃（如h1直接接h3）
- SEO优化：搜索引擎优先索引标题内容
错误示例[编辑 | 编辑源代码]
<!-- 错误：跳过h2层级 -->
<h1>产品介绍</h1>
<h3>功能列表</h3> <!-- 应改为h2 -->
实际应用案例[编辑 | 编辑源代码]
博客文章结构[编辑 | 编辑源代码]
<h1>人工智能发展简史</h1>
<h2>早期发展阶段</h2>
<h3>图灵测试的提出</h3>
<h2>现代突破</h2>
<h3>深度学习革命</h3>
数学公式标题[编辑 | 编辑源代码]
结合<math>标签：
<h2>二次方程公式</h2>
<math>ax^2 + bx + c = 0</math>
高级特性[编辑 | 编辑源代码]
ARIA增强[编辑 | 编辑源代码]
为屏幕阅读器添加额外语义：
<h1 aria-label="主要章节：用户手册">用户手册</h1>
CSS计数器联动[编辑 | 编辑源代码]
自动生成章节编号：
body { counter-reset: section; }
h2::before {
counter-increment: section;
content: "第" counter(section) "章 ";
}
最佳实践[编辑 | 编辑源代码]
- 保持标题内容简洁（建议不超过20字）
- 避免纯粹装饰性使用标题
- 移动端考虑响应式字号覆盖：
@media (max-width: 600px) {
h1 { font-size: 1.8rem; }
}
技术规范[编辑 | 编辑源代码]
根据HTML5标准：
- 标题元素属于[流内容]、[ palpable内容]
- 默认显示属性：
display: block - 内容模型：短语内容