Html教程

Appearance

HTML 标题 ​

什么是标题标签 ​

HTML 标题标签用于定义文档的标题和子标题，为内容提供层次结构。标题标签从 <h1> 到 <h6>，重要性依次递减。

标题标签的层次 ​

HTML 提供了六个级别的标题标签：

html
<h1>一级标题 - 最重要</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h6>
<h6>六级标题 - 重要性最低</h6>

默认样式效果 ​

浏览器为每个标题标签都有默认样式：

  • <h1>: 最大，通常用于页面主标题
  • <h2>: 较大，用于主要章节标题
  • <h3>: 中等，用于小节标题
  • <h4>: 稍小，用于子小节
  • <h5>: 较小
  • <h6>: 最小

标题的正确用法 ​

1. 保持层次结构 ​

正确的层次结构：

html
<h1>文章标题</h1>
    <h2>第一章</h2>
        <h3>1.1 小节</h3>
        <h3>1.2 小节</h3>
            <h4>1.2.1 子小节</h4>
    <h2>第二章</h2>
        <h3>2.1 小节</h3>

错误的层次结构：

html
<h1>文章标题</h1>
<h3>跳过了 h2</h3>  <!-- 不好：跳过了 h2 -->
<h2>现在才是 h2</h2>

2. 每页只使用一个 h1 ​

html
<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    <h1>页面主标题</h1>  <!-- 整个页面只有一个 h1 -->
    <h2>章节标题</h2>
    <h2>另一个章节</h2>
</body>
</html>

3. 不要为了样式选择标题 ​

错误做法：

html
<!-- 不要因为想要大字体就用 h1 -->
<h1>其实这只是个小标题</h1>

正确做法：

html
<!-- 使用正确的标题级别，然后用CSS调整样式 -->
<h3>这是个小标题</h3>

标题的语义化重要性 ​

1. SEO 优化 ​

搜索引擎使用标题标签来理解页面结构和内容重要性：

html
<h1>如何学习 HTML</h1>  <!-- 页面主题 -->
<h2>HTML 基础知识</h2>   <!-- 主要章节 -->
<h3>标签和元素</h3>      <!-- 子主题 -->

2. 可访问性 ​

屏幕阅读器用户依赖标题导航：

html
<!-- 好的标题结构帮助用户快速导航 -->
<h1>网站首页</h1>
<h2>产品介绍</h2>
<h2>联系我们</h2>
<h2>公司简介</h2>

3. 文档大纲 ​

标题创建文档的自然大纲：

1. 网站介绍 (h1)
   1.1. 我们的使命 (h2)
   1.2. 团队介绍 (h2)
       1.2.1. 技术团队 (h3)
       1.2.2. 设计团队 (h3)
   1.3. 联系方式 (h2)

标题标签的属性 ​

标题标签支持所有全局属性：

html
<h1 id="main-title" class="page-title">主标题</h1>
<h2 class="section-header" data-section="intro">介绍</h2>
<h3 title="这是提示信息">子标题</h3>

实际应用示例 ​

博客文章结构 ​

html
<article>
    <h1>HTML 学习指南</h1>
    
    <h2>前言</h2>
    <p>本文将介绍 HTML 的基础知识...</p>
    
    <h2>HTML 简介</h2>
    <p>HTML 是超文本标记语言...</p>
    
    <h3>HTML 的历史</h3>
    <p>HTML 由 Tim Berners-Lee 创建...</p>
    
    <h3>HTML 的作用</h3>
    <p>HTML 用于创建网页结构...</p>
    
    <h2>基础语法</h2>
    <p>HTML 标签的基本语法...</p>
    
    <h3>标签结构</h3>
    <p>标签由尖括号包围...</p>
    
    <h4>开始标签</h4>
    <p>开始标签的写法...</p>
    
    <h4>结束标签</h4>
    <p>结束标签的写法...</p>
</article>

新闻网站结构 ​

html
<main>
    <h1>今日新闻</h1>
    
    <section>
        <h2>国际新闻</h2>
        <article>
            <h3>重大事件报道</h3>
            <p>新闻内容...</p>
        </article>
        <article>
            <h3>经济动态</h3>
            <p>经济新闻内容...</p>
        </article>
    </section>
    
    <section>
        <h2>体育新闻</h2>
        <article>
            <h3>足球比赛结果</h3>
            <p>体育新闻内容...</p>
        </article>
    </section>
</main>

标题与CSS样式 ​

重置默认样式 ​

html
<style>
/* 重置所有标题的默认边距 */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

/* 自定义标题样式 */
h1 {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 1em;
}

h2 {
    font-size: 2em;
    color: #666;
    margin-bottom: 0.8em;
}

h3 {
    font-size: 1.5em;
    color: #999;
    margin-bottom: 0.6em;
}
</style>

<h1>自定义样式的标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

标题的最佳实践 ​

1. 描述性标题 ​

html
<!-- 好 -->
<h2>如何安装 Node.js</h2>

<!-- 不好 -->
<h2>步骤一</h2>

2. 简洁明了 ​

html
<!-- 好 -->
<h1>用户注册</h1>

<!-- 不好 -->
<h1>这里是用户注册页面，请填写以下信息来创建您的账户</h1>

3. 保持一致性 ​

html
<!-- 保持相同级别标题的风格一致 -->
<h2>产品特性</h2>
<h2>技术规格</h2>
<h2>价格信息</h2>

标题与锚点链接 ​

标题可以作为页面内导航的锚点：

html
<!-- 目录导航 -->
<nav>
    <ul>
        <li><a href="#introduction">介绍</a></li>
        <li><a href="#features">特性</a></li>
        <li><a href="#pricing">价格</a></li>
    </ul>
</nav>

<!-- 内容区域 -->
<h2 id="introduction">介绍</h2>
<p>产品介绍内容...</p>

<h2 id="features">特性</h2>
<p>产品特性内容...</p>

<h2 id="pricing">价格</h2>
<p>价格信息...</p>

实践练习 ​

创建一个完整的文章页面，要求：

  1. 包含一个主标题（h1）
  2. 至少三个章节标题（h2）
  3. 每个章节至少包含两个小节（h3）
  4. 保持正确的层次结构
  5. 添加适当的ID用于锚点导航

参考结构：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML 标题教程</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#basics">基础知识</a></li>
            <li><a href="#structure">结构规划</a></li>
            <li><a href="#best-practices">最佳实践</a></li>
        </ul>
    </nav>
    
    <main>
        <h1>HTML 标题完全指南</h1>
        
        <h2 id="basics">基础知识</h2>
        <h3>标题标签介绍</h3>
        <p>内容...</p>
        
        <h3>默认样式</h3>
        <p>内容...</p>
        
        <h2 id="structure">结构规划</h2>
        <h3>层次关系</h3>
        <p>内容...</p>
        
        <h3>语义化使用</h3>
        <p>内容...</p>
        
        <h2 id="best-practices">最佳实践</h2>
        <h3>SEO 优化</h3>
        <p>内容...</p>
        
        <h3>可访问性</h3>
        <p>内容...</p>
    </main>
</body>
</html>

常见错误 ​

1. 跳级使用标题 ​

html
<!-- 错误 -->
<h1>标题</h1>
<h4>跳过了 h2 和 h3</h4>

<!-- 正确 -->
<h1>标题</h1>
<h2>子标题</h2>
<h3>小节标题</h3>

2. 多个 h1 标签 ​

html
<!-- 不推荐 -->
<h1>第一个主标题</h1>
<h1>第二个主标题</h1>

<!-- 推荐 -->
<h1>页面主标题</h1>
<h2>重要章节</h2>

3. 为了样式而选择标题 ​

html
<!-- 错误 -->
<h1>想要大字体的普通文本</h1>

<!-- 正确 -->
<p class="large-text">普通文本</p>

小结 ​

  • 使用 h1-h6 标签创建标题层次
  • 保持正确的标题结构和语义
  • 每页只使用一个 h1 标签
  • 标题对 SEO 和可访问性很重要
  • 不要为了视觉效果而选择标题级别
  • 使用描述性和简洁的标题文本

下一章我们将学习 HTML 段落的使用方法。

Copyright © 2025-2026 京公网安备 11010102000001号 京ICP备2024078128号-1