HTML简介
HTML语法基础
HTML文档结构
HTML标签属性
文档类型定义
HTML语法规则
文本基础
标题与段落
文本格式化
列表
链接
图像
表格
多媒体
表单基础
表单进阶
表单验证
表单样式
语义化标签
HTML5新特性
HTML5文本语义
Canvas绘图
SVG图形
Web存储
IndexedDB
Web Workers
地理位置API
拖放API
历史记录API
剪贴板API
拖放API中级
WebSockets
通知API
全屏API
剪贴板API进阶
文件API
拖放API进阶
CSS集成基础
CSS选择器
CSS盒模型
CSS布局技术
响应式设计
代码规范
可访问性
Web安全
隐私保护
个人网站项目
博客系统项目
电商网站项目
社交平台项目
开发工具
版本控制
包管理器
构建工具
Web Components
PWA渐进式应用
WebAssembly
性能优化
Web发展趋势
AI与Web
Web安全未来
Web技术展望
  1. html
  2. 标题与段落

标题与段落

标题与段落概述

标题和段落是网页内容组织的基础元素，它们为内容提供结构和层次。

东巴文（db-w.cn） 认为：良好的标题和段落结构是高质量内容的基础，就像建筑的框架一样重要。

标题标签

标题层级

HTML提供6级标题标签：<h1>到<h6>，重要性依次递减。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

东巴文标题层级说明：

标签 说明 使用场景 东巴文建议
<h1> 最高级标题 页面主标题 每页仅一个
<h2> 二级标题 章节标题 主要章节
<h3> 三级标题 小节标题 子章节
<h4> 四级标题 小节细分 更细分内容
<h5> 五级标题 细节标题 补充说明
<h6> 最低级标题 最小标题 极少使用

标题使用规则

规则1：层级递进

<!-- ✅ 推荐：层级递进 -->
<article>
    <h1>文章标题</h1>
    <h2>第一章</h2>
    <h3>1.1 小节</h3>
    <h3>1.2 小节</h3>
    <h2>第二章</h2>
    <h3>2.1 小节</h3>
</article>

<!-- ❌ 不推荐：跳过层级 -->
<article>
    <h1>文章标题</h1>
    <h3>小节标题</h3> <!-- 跳过了h2 -->
</article>

东巴文说明：

  • 标题应按层级递进
  • 不要跳过中间层级
  • 保持逻辑结构清晰

规则2：唯一h1

<!-- ✅ 推荐：一个页面一个h1 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <h1>网站主标题</h1>
    <h2>章节一</h2>
    <h2>章节二</h2>
</body>
</html>

<!-- ❌ 不推荐：多个h1 -->
<body>
    <h1>标题一</h1>
    <h1>标题二</h1> <!-- 不应该有多个h1 -->
</body>

东巴文说明：

  • 每个页面通常只有一个<h1>
  • <h1>代表页面主标题
  • 有助于SEO和可访问性

规则3：语义化使用

<!-- ✅ 推荐：标题用于结构 -->
<article>
    <h1>HTML教程</h1>
    <h2>HTML基础</h2>
    <h3>文本标签</h3>
</article>

<!-- ❌ 不推荐：标题用于样式 -->
<div>
    <h1 style="font-size: 14px;">小号文本</h1>
    <h6 style="font-size: 24px;">大号文本</h6>
</div>

东巴文说明：

  • 标题用于内容结构，不是用于样式
  • 使用CSS控制字体大小
  • 保持语义化

标题与SEO

东巴文SEO建议：

1. 合理使用关键词

<!-- ✅ 推荐：标题包含关键词 -->
<h1>HTML教程 - 从入门到精通</h1>
<h2>HTML基础语法</h2>
<h3>HTML标签详解</h3>

<!-- ❌ 不推荐：标题无关内容 -->
<h1>欢迎来到我们的网站</h1>
<h2>点击这里</h2>

2. 标题长度适中

<!-- ✅ 推荐：标题简洁明了 -->
<h1>HTML教程</h1>
<h2>HTML基础语法</h2>

<!-- ❌ 不推荐：标题过长 -->
<h1>这是一个非常非常非常非常非常长的标题，不建议这样写</h1>

东巴文建议：

  • <h1>标题：20-70个字符
  • <h2>标题：20-60个字符
  • 标题应简洁明了

3. 标题层级清晰

<!-- ✅ 推荐：层级清晰 -->
<article>
    <h1>HTML完整教程</h1>
    
    <h2>第一部分：HTML基础</h2>
    <h3>1.1 HTML简介</h3>
    <h3>1.2 HTML语法</h3>
    
    <h2>第二部分：HTML进阶</h2>
    <h3>2.1 表单设计</h3>
    <h3>2.2 多媒体应用</h3>
</article>

标题最佳实践

东巴文标题法则：

法则1：标题应描述内容

<!-- ✅ 推荐：描述性标题 -->
<h1>HTML教程</h1>
<h2>HTML基础语法</h2>
<h3>HTML标签属性</h3>

<!-- ❌ 不推荐：无意义标题 -->
<h1>第一章</h1>
<h2>第一节</h2>
<h3>内容</h3>

法则2：标题应简洁

<!-- ✅ 推荐：简洁标题 -->
<h1>HTML教程</h1>
<h2>文本标签</h2>

<!-- ❌ 不推荐：冗长标题 -->
<h1>这是一个关于HTML的完整教程</h1>
<h2>在这一章中我们将学习HTML的文本标签</h2>

法则3：标题应唯一

<!-- ✅ 推荐：标题唯一 -->
<article>
    <h1>HTML教程</h1>
    <h2>HTML基础</h2>
    <h2>HTML进阶</h2>
</article>

<!-- ❌ 不推荐：标题重复 -->
<article>
    <h1>HTML教程</h1>
    <h2>HTML基础</h2>
    <h2>HTML基础</h2> <!-- 重复标题 -->
</article>

段落标签

基本用法

<p>标签定义段落，是最常用的文本标签。

<p>这是一个段落。段落是文本内容的基本单位。</p>

<p>这是另一个段落。浏览器会自动在段落前后添加空白。</p>

东巴文说明：

  • 段落之间自动添加空白
  • 段落内不能包含块级元素
  • 推荐使用CSS控制段落间距

段落嵌套规则

规则1：段落内不能包含块级元素

<!-- ❌ 错误：段落内包含块级元素 -->
<p>
    这是一个段落。
    <div>这是一个div</div>
</p>

<!-- ✅ 正确：段落内只能包含行内元素 -->
<p>
    这是一个段落，包含<strong>粗体</strong>和<em>斜体</em>文本。
</p>

东巴文说明：

  • 段落内只能包含行内元素
  • 不能包含<div>、<p>、<h1>-<h6>等块级元素
  • 可以包含<span>、<strong>、<em>等行内元素

规则2：段落不能嵌套

<!-- ❌ 错误：段落嵌套 -->
<p>
    外层段落
    <p>内层段落</p>
</p>

<!-- ✅ 正确：段落并列 -->
<p>第一个段落</p>
<p>第二个段落</p>

段落样式控制

使用CSS控制段落间距

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>段落样式</title>
    <style>
        /* 段落间距 */
        p {
            margin-bottom: 16px;
            line-height: 1.6;
        }
        
        /* 首行缩进 */
        p.indent {
            text-indent: 2em;
        }
        
        /* 段落对齐 */
        p.justify {
            text-align: justify;
        }
    </style>
</head>
<body>
    <p class="indent">
        这是一个首行缩进的段落。首行缩进是中文排版的传统习惯。
    </p>
    
    <p class="justify">
        这是一个两端对齐的段落。两端对齐可以让文本左右两端都对齐，使排版更加整齐美观。
    </p>
    
    <p>
        这是一个普通段落，使用默认样式。
    </p>
</body>
</html>

东巴文说明：

  • 使用margin控制段落间距
  • 使用text-indent控制首行缩进
  • 使用text-align控制对齐方式
  • 使用line-height控制行高

标题与段落组合

文章结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文章结构示例 - 东巴文</title>
</head>
<body>
    <article>
        <h1>HTML教程：从入门到精通</h1>
        
        <p class="intro">
            本文将带你从零开始学习HTML，掌握网页开发的基础知识。
        </p>
        
        <h2>什么是HTML</h2>
        <p>
            HTML（HyperText Markup Language）是构建网页的基础语言。
            它使用标签来标记内容，告诉浏览器如何显示这些内容。
        </p>
        
        <h2>HTML的历史</h2>
        <p>
            HTML由Tim Berners-Lee在1991年创建，经过多年发展，
            目前最新版本是HTML5。
        </p>
        
        <h3>HTML5的新特性</h3>
        <p>
            HTML5引入了许多新特性，包括语义化标签、多媒体支持、
            Canvas绘图、本地存储等。
        </p>
        
        <h2>为什么学习HTML</h2>
        <p>
            学习HTML是成为Web开发者的第一步。它是所有网页的基础，
            掌握HTML可以让你创建自己的网页。
        </p>
        
        <h3>学习HTML的好处</h3>
        <p>
            学习HTML可以让你理解网页的工作原理，为学习CSS和JavaScript
            打下坚实的基础。
        </p>
        
        <h4>职业发展</h4>
        <p>
            掌握HTML可以从事前端开发、全栈开发等职业，
            薪资待遇优厚，发展前景广阔。
        </p>
    </article>
</body>
</html>

博客文章结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>博客文章 - 东巴文</title>
</head>
<body>
    <article>
        <header>
            <h1>如何学习HTML</h1>
            <p class="meta">
                作者：东巴文 | 发布时间：2024-01-15 | 分类：HTML教程
            </p>
        </header>
        
        <section>
            <h2>前言</h2>
            <p>
                学习HTML是成为Web开发者的第一步。本文将分享一些学习HTML的方法和技巧。
            </p>
        </section>
        
        <section>
            <h2>学习步骤</h2>
            
            <h3>第一步：了解HTML基础</h3>
            <p>
                首先，你需要了解HTML的基本概念和语法。
                HTML使用标签来标记内容，每个标签都有特定的含义。
            </p>
            
            <h3>第二步：学习常用标签</h3>
            <p>
                掌握常用的HTML标签，如标题标签、段落标签、链接标签、图片标签等。
                这些标签是构建网页的基础。
            </p>
            
            <h3>第三步：实践练习</h3>
            <p>
                理论结合实践，创建自己的网页项目。
                通过实践加深对HTML的理解。
            </p>
        </section>
        
        <section>
            <h2>总结</h2>
            <p>
                学习HTML需要耐心和坚持。按照正确的步骤学习，
                你一定能够掌握HTML，成为一名优秀的Web开发者。
            </p>
        </section>
        
        <footer>
            <p>
                <small>版权所有 &copy; 2024 东巴文（db-w.cn）</small>
            </p>
        </footer>
    </article>
</body>
</html>

文档大纲

什么是文档大纲

文档大纲是HTML文档的结构层次，由标题标签创建。

东巴文说明：

  • 标题标签创建文档大纲
  • 层级关系由标题级别决定
  • 有助于SEO和可访问性

文档大纲示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文档大纲示例 - 东巴文</title>
</head>
<body>
    <h1>HTML教程</h1>              <!-- 1. -->
    
    <h2>HTML基础</h2>              <!-- 1.1. -->
    <h3>HTML简介</h3>              <!-- 1.1.1. -->
    <h3>HTML语法</h3>              <!-- 1.1.2. -->
    
    <h2>HTML进阶</h2>              <!-- 1.2. -->
    <h3>表单设计</h3>              <!-- 1.2.1. -->
    <h3>多媒体应用</h3>            <!-- 1.2.2. -->
    <h4>音频标签</h4>              <!-- 1.2.2.1. -->
    <h4>视频标签</h4>              <!-- 1.2.2.2. -->
    
    <h2>HTML高级</h2>              <!-- 1.3. -->
    <h3>Canvas绘图</h3>            <!-- 1.3.1. -->
    <h3>本地存储</h3>              <!-- 1.3.2. -->
</body>
</html>

东巴文文档大纲：

1. HTML教程
   1.1. HTML基础
        1.1.1. HTML简介
        1.1.2. HTML语法
   1.2. HTML进阶
        1.2.1. 表单设计
        1.2.2. 多媒体应用
               1.2.2.1. 音频标签
               1.2.2.2. 视频标签
   1.3. HTML高级
        1.3.1. Canvas绘图
        1.3.2. 本地存储

文档大纲工具

东巴文推荐工具：

  1. HTML5 Outliner

  2. Chrome DevTools

    • 打开方式：F12
    • 查看Elements面板
    • 检查文档结构

常见问题

问题1：标题可以用于样式吗？

东巴文回答：不建议。

<!-- ❌ 不推荐：标题用于样式 -->
<h1 style="font-size: 14px;">小号文本</h1>
<h6 style="font-size: 24px;">大号文本</h6>

<!-- ✅ 推荐：使用CSS控制样式 -->
<p class="small-text">小号文本</p>
<p class="large-text">大号文本</p>

.small-text {
    font-size: 14px;
}

.large-text {
    font-size: 24px;
}

东巴文说明：

  • 标题用于内容结构，不是用于样式
  • 使用CSS控制字体大小
  • 保持语义化

问题2：段落之间应该用<br>还是<p>？

东巴文回答：应该使用<p>标签。

<!-- ❌ 不推荐：使用多个br -->
<p>
    第一段内容<br><br>
    第二段内容<br><br>
    第三段内容
</p>

<!-- ✅ 推荐：使用p标签 -->
<p>第一段内容</p>
<p>第二段内容</p>
<p>第三段内容</p>

东巴文说明：

  • 段落应使用<p>标签
  • <br>用于行内换行
  • 保持语义化

问题3：标题层级可以跳过吗？

东巴文回答：不建议跳过。

<!-- ❌ 不推荐：跳过层级 -->
<h1>主标题</h1>
<h3>小节标题</h3> <!-- 跳过了h2 -->

<!-- ✅ 推荐：层级递进 -->
<h1>主标题</h1>
<h2>章节标题</h2>
<h3>小节标题</h3>

东巴文说明：

  • 标题应按层级递进
  • 不要跳过中间层级
  • 保持逻辑结构清晰

最佳实践总结

东巴文标题与段落实则

法则1：标题法则

  • ✅ 每个页面只有一个<h1>
  • ✅ 标题层级递进，不跳过
  • ✅ 标题描述内容，简洁明了
  • ✅ 标题包含关键词，有助于SEO

法则2：段落实则

  • ✅ 段落内不包含块级元素
  • ✅ 段落不嵌套
  • ✅ 使用CSS控制段落样式
  • ✅ 段落内容简洁明了

法则3：结构法则

  • ✅ 使用语义化标签
  • ✅ 保持文档大纲清晰
  • ✅ 标题与段落合理组合
  • ✅ 提升可访问性

学习检验

知识点测试

问题1：以下哪个是正确的标题层级？

A. <h1> → <h3> → <h2> B. <h1> → <h2> → <h3> C. <h2> → <h1> → <h3> D. <h1> → <h1> → <h2>

<details> <summary>点击查看答案</summary>

答案：B

东巴文解释：标题应按层级递进，从<h1>到<h2>再到<h3>。A跳过了h2，C层级混乱，D有多个h1。

</details>

问题2：以下哪个标签用于定义段落？

A. <br> B. <hr> C. <p> D. <div>

<details> <summary>点击查看答案</summary>

答案：C

东巴文解释：<p>标签用于定义段落。<br>用于换行，<hr>用于水平线，<div>是通用容器。

</details>

实践任务

任务：创建一个包含以下元素的文章：

  1. 一个<h1>标题
  2. 两个<h2>标题
  3. 每个<h2>下有一个<h3>标题
  4. 每个标题下有1-2个段落
  5. 使用<article>、<header>、<section>、<footer>标签
<details> <summary>点击查看参考答案</summary> 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文章示例 - 东巴文</title>
</head>
<body>
    <article>
        <header>
            <h1>HTML学习指南</h1>
            <p>作者：东巴文 | 发布时间：2024-01-15</p>
        </header>
        
        <section>
            <h2>HTML基础</h2>
            <p>
                HTML是构建网页的基础语言。它使用标签来标记内容，
                告诉浏览器如何显示这些内容。
            </p>
            
            <h3>HTML标签</h3>
            <p>
                HTML标签是HTML的基本组成单位。每个标签都有特定的含义和用途。
            </p>
        </section>
        
        <section>
            <h2>HTML进阶</h2>
            <p>
                掌握HTML基础后，可以学习更高级的内容，如CSS样式和JavaScript交互。
            </p>
            
            <h3>学习路径</h3>
            <p>
                建议按照HTML → CSS → JavaScript的顺序学习，
                循序渐进地掌握Web开发技能。
            </p>
        </section>
        
        <footer>
            <p>
                <small>版权所有 &copy; 2024 东巴文（db-w.cn）</small>
            </p>
        </footer>
    </article>
</body>
</html>
</details>

东巴文（db-w.cn） - 让编程学习更有趣、更高效！

上一章：文本基础
下一章：文本格式化