标题与段落

标题与段落概述

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

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

标题标签

标题层级

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

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</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

   • 网址：https://gsnedders.html5.org/outliner/
   • 功能：检查HTML文档大纲

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>

答案：B

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

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

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

答案：C

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

实践任务

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

1. 一个<h1>标题
2. 两个<h2>标题
3. 每个<h2>下有一个<h3>标题
4. 每个标题下有1-2个段落
5. 使用<article>、<header>、<section>、<footer>标签

<!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>

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