标题标签(h1-h6)

标题标签的作用

HTML中的标题标签用于定义文档的标题层级，从<h1>到<h6>共六级。这些标签不仅影响页面内容的视觉呈现，更重要的是为文档结构提供语义化标记。搜索引擎会特别关注标题标签，将其作为理解页面内容的重要依据。

<h1>网站主标题</h1>
<h2>章节标题</h2>
<h3>子章节标题</h3>

标题标签的层级关系

正确的标题层级应该像书籍目录一样形成树状结构。<h1>通常作为页面最高级标题，每个页面最好只出现一次。下级标题应该按顺序使用，避免跳级。

错误示例：

<h1>产品介绍</h1>
<h3>产品特点</h3> <!-- 错误：跳过了h2 -->
<h2>技术参数</h2>

正确做法：

<h1>产品介绍</h1>
<h2>产品特点</h2>
<h3>外观设计</h3>
<h3>核心功能</h3>
<h2>技术参数</h2>

视觉呈现与CSS控制

浏览器对标题标签有默认样式，但可以通过CSS完全自定义。重要的是保持语义化结构，不要单纯为了视觉效果而滥用标题标签。

h1 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 1.5rem;
}

h2 {
  font-size: 2rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.5rem;
}

SEO最佳实践

搜索引擎会分析标题标签来理解页面结构。<h1>应该包含页面核心关键词，其他标题应该自然延伸这个主题。避免在标题中堆砌关键词。

<!-- 适合SEO的写法 -->
<h1>2023年最佳数码相机推荐</h1>
<h2>选购数码相机的关键指标</h2>

<!-- 不适合SEO的写法 -->
<h1>相机 数码相机 最佳相机 2023相机</h1>

响应式设计中的标题

在不同设备上可能需要调整标题大小。使用相对单位(如rem)和媒体查询可以确保标题在各种屏幕上都有良好表现。

@media (max-width: 768px) {
  h1 {
    font-size: 1.8rem;
  }
  h2 {
    font-size: 1.5rem;
  }
}

标题与ARIA角色

对于辅助技术用户，正确的标题结构至关重要。避免使用role="heading"而不指定层级，应该优先使用原生HTML标签。

<!-- 正确做法 -->
<h2>服务条款</h2>

<!-- 应避免的做法 -->
<div role="heading" aria-level="2">服务条款</div>

动态内容中的标题

在单页应用(SPA)中动态生成标题时，要确保标题层级始终保持一致。Vue/React组件中的标题应该考虑当前上下文。

React示例：

function ArticlePage({ title }) {
  return (
    <main>
      <h1>{title}</h1>
      <section>
        <h2>详细内容</h2>
        {/* 内容 */}
      </section>
    </main>
  )
}

标题与文档大纲算法

HTML5的文档大纲算法会根据标题标签自动生成文档结构。即使不使用<section>等分区元素，浏览器也能通过标题层级理解内容关系。

<h1>网页设计</h1>
<h2>色彩理论</h2>
<h3>色轮基础</h3>
<h2>排版原则</h2>

常见错误与修正

许多开发者会犯一些典型错误，比如将标题用作样式钩子，或者为了视觉效果而随意调整层级。

错误案例：

<!-- 错误：用h4仅为了小字号 -->
<h4 style="font-size: 14px;">重要通知</h4>

<!-- 应该改为 -->
<h2 class="small-heading">重要通知</h2>

标题与内容管理系统(CMS)

在WordPress等CMS中，主题模板通常控制着标题标记。编辑内容时应该使用正确的标题级别，而不是依赖视觉编辑器中的"大号文字"。

// WordPress主题中正确输出标题
the_title('<h1 class="entry-title">', '</h1>');

多语言网站的标题

不同语言的标题可能需要特殊处理。比如中文标题通常比英文同等标题需要更大字号才能达到相同可读性。

:lang(zh) h1 {
  font-size: 2.2rem;
  line-height: 1.6;
}

标题的可访问性测试

使用屏幕阅读器测试标题结构是否合理。可以通过以下方法检查：

1. 查看是否跳过任何标题级别
2. 确认每个标题都准确描述后续内容
3. 检查标题是否可以作为有效的导航地标

标题与微数据

标题标签可以与Schema.org微数据结合，增强搜索引擎对内容的理解。

<h1 itemprop="name">巧克力蛋糕食谱</h1>
<h2 itemprop="recipeIngredient">原料</h2>

历史演变与浏览器支持

从HTML2.0开始就存在标题标签，所有浏览器都完全支持。HTML5规范进一步明确了标题在文档大纲中的作用，现代浏览器都实现了这些特性。

标题与打印样式

为打印媒体设计时，可能需要调整标题样式以避免分页问题。

@media print {
  h1, h2, h3 {
    page-break-after: avoid;
  }
}

性能考量

虽然标题标签本身对性能影响极小，但包含复杂样式的标题可能影响渲染性能。避免在标题上使用昂贵的CSS属性。

/* 可能影响性能的写法 */
h1 {
  text-shadow: 0 0 10px rgba(0,0,0,0.3);
  backdrop-filter: blur(5px);
}

标题与JavaScript交互

通过JavaScript可以动态操作标题，这在单页应用中很常见。但要确保不影响可访问性。

// 动态更新页面标题
document.querySelector('h1').textContent = '新标题';

测试工具与验证

使用以下工具验证标题结构：

• W3C HTML验证器
• Lighthouse审计工具
• 浏览器开发者工具的元素检查器

标题与社交媒体分享

当页面被分享到社交媒体时，平台通常会优先使用<h1>内容作为默认分享标题。确保主标题简洁有力。

<h1>2023年度最佳笔记本电脑排行榜</h1>
<!-- 这将成为社交媒体分享时的理想标题 -->

创意使用案例

虽然标题主要用于结构化内容，但也可以创造性地用于设计布局。

<div class="hero">
  <h1 class="hero-title">
    <span class="line1">探索未知</span>
    <span class="line2">发现可能</span>
  </h1>
</div>

.hero-title {
  display: flex;
  flex-direction: column;
}
.line1, .line2 {
  animation: fadeIn 1s ease-out;
}