<h1>到<h6>-标题级别

HTML中的<h1>到<h6>标签用于定义文档的标题层级，从最高级<h1>到最低级<h6>。这些标签不仅影响页面结构，还对SEO和可访问性至关重要。

<h1>标签的作用与用法

<h1>是最高级别的标题，通常用于页面主标题。一个页面一般只应有一个<h1>，这有助于搜索引擎理解页面主要内容。

<h1>网站首页标题</h1>

实际开发中常见错误是滥用多个<h1>。例如错误示范：

<!-- 错误示例 -->
<h1>产品列表</h1>
<div class="product">
  <h1>手机</h1>
  <h1>电脑</h1>
</div>

正确做法应该是：

<h1>产品分类</h1>
<h2>电子产品</h2>
<h3>智能手机</h3>
<h3>笔记本电脑</h3>

<h2>到<h6>的层级关系

次级标题形成文档大纲结构。<h2>通常用于章节标题，<h3>用于子章节，依此类推。

<h1>CSS教程</h1>
<h2>选择器</h2>
<h3>类选择器</h3>
<h3>ID选择器</h3>
<h2>盒模型</h2>
<h3>外边距</h3>
<h4>负外边距</h4>

标题层级不应跳跃。避免这种错误结构：

<!-- 错误层级 -->
<h1>标题</h1>
<h3>直接跳到h3</h3>
<h2>然后又回到h2</h2>

标题的语义化重要性

屏幕阅读器用户依赖标题导航。合理使用标题层级可提升可访问性：

<h1>公司新闻</h1>
<h2>2023年度报告</h2>
<p>今年公司营收...</p>
<h2>新产品发布</h2>
<h3>智能手表</h3>
<p>功能介绍...</p>

搜索引擎会分析标题层级判断内容结构。测试工具如Lighthouse会检查标题层级是否合理。

标题的样式控制

虽然浏览器有默认样式，但应通过CSS自定义：

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

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

h3 {
  font-size: 1.75rem;
  font-weight: 500;
}

避免仅为了样式而错误使用标题标签：

<!-- 错误做法 -->
<h4 style="font-size: 2em;">这不是真正的h4</h4>

实际应用场景分析

新闻类网站的典型标题结构：

<h1>台风"梅花"登陆浙江</h1>
<h2>风力达到14级</h2>
<p>正文内容...</p>
<h2>应急响应措施</h2>
<h3>人员转移</h3>
<p>已转移群众...</p>
<h3>交通管制</h3>

电商产品页面的标题示例：

<h1>iPhone 14 Pro</h1>
<h2>产品特点</h2>
<h3>A16仿生芯片</h3>
<h3>4800万像素主摄</h3>
<h2>规格参数</h2>

动态生成标题的注意事项

使用JavaScript动态插入标题时需保持结构完整：

// 正确做法
const section = document.createElement('section');
section.innerHTML = `
  <h2>动态加载内容</h2>
  <p>这是异步加载的内容...</p>
`;

// 错误做法 - 硬编码标题级别
function createHeading(level) {
  // 可能破坏层级关系
  return `<h${level}>任意标题</h${level}>`;
}

标题与ARIA的配合

在复杂组件中可结合ARIA属性增强语义：

<div role="region" aria-labelledby="section-heading">
  <h2 id="section-heading">用户评论</h2>
  <div class="comments">
    <!-- 评论内容 -->
  </div>
</div>

避免冗余的ARIA使用：

<!-- 不需要重复语义 -->
<h1 role="heading" aria-level="1">多余属性</h1>

响应式设计中的标题处理

在不同视口可能需要调整标题大小：

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

但不应改变HTML结构本身：

<!-- 错误响应式做法 -->
<div class="mobile">
  <h3>移动端显示的标题</h3>
</div>
<div class="desktop">
  <h1>桌面端显示的标题</h1>
</div>

标题与文档大纲算法

现代浏览器使用大纲算法生成文档结构。考虑以下示例：

<section>
  <h1>主标题</h1>
  <section>
    <h2>章节1</h2>
    <section>
      <h3>子章节1.1</h3>
    </section>
  </section>
</section>

注意<section>元素会创建新的大纲区域。没有<section>时，标题层级直接决定结构。

国际化场景下的考虑

右向左(RTL)语言的标题样式可能需要特殊处理：

[dir="rtl"] h1 {
  text-align: right;
  padding-right: 1rem;
}

混合语言环境中的标题标记：

<h1 lang="en">Welcome</h1>
<h2 lang="zh">欢迎</h2>

标题与微数据的结合

可以通过Schema.org增强SEO：

<h1 itemprop="name">红烧狮子头</h1>
<div itemprop="recipeInstructions">
  <h2>准备材料</h2>
  <h2>烹饪步骤</h2>
</div>

打印样式中的标题优化

确保打印时标题清晰可辨：

@media print {
  h1 {
    page-break-after: avoid;
    font-size: 24pt;
  }
  h2 {
    page-break-after: avoid;
    font-size: 18pt;
  border: none;
  }
}

标题的交互增强

结合JavaScript实现交互功能：

<h2 id="expandable-heading">
  可展开章节
  <button aria-expanded="false">+</button>
</h2>
<script>
  document.querySelector('#expandable-heading button').addEventListener('click', (e) => {
    const expanded = e.target.getAttribute('aria-expanded') === 'true';
    e.target.setAttribute('aria-expanded', !expanded);
  });
</script>

标题内容的最佳实践

标题文本应简洁明了：

<!-- 推荐 -->
<h2>用户登录</h2>

<!-- 避免 -->
<h2>这里您可以输入用户名和密码然后点击按钮进行登录操作</h2>

包含关键信息但不过长：

<h2>2023年Q3财报（截至9月30日）</h2>