📝 第三章:文本内容格式化

学会使用各种文本标签丰富你的内容

3.1 标题标签 (<h1> - <h6>) 与 SEO 层级

HTML 提供六级标题,从 h1(最重要)到 h6(最不重要)。

🎯 标题层级演示

这是一级标题 (h1)

这是二级标题 (h2)

这是三级标题 (h3)

这是四级标题 (h4)

这是五级标题 (h5)
这是六级标题 (h6)
<h1>网站主标题</h1>
<h2>章节标题</h2>
<h3>小节标题</h3>
<h4>子节标题</h4>
<h5>更小的标题</h5>
<h6>最小的标题</h6>
SEO 重要提示:

3.2 段落 (<p>) 与换行 (<br>)、水平线 (<hr>)

段落标签 <p>

段落标签用于包裹文本段落。浏览器会自动在段落前后添加空白。

<p>这是第一个段落。HTML 会自动处理文本的换行和空格。</p>
<p>这是第二个段落。段落之间会有默认的间距。</p>

换行标签 <br>

<br> 是单标签,用于在段落内强制换行。

<p>
    第一行文本<br>
    第二行文本<br>
    第三行文本
</p>
注意:不要用 <br> 来创建段落间距,应该使用多个 <p> 标签。<br> 只适用于需要强制换行的场景,如诗歌、地址等。

水平线标签 <hr>

<hr> 创建一条水平分隔线,用于分隔内容区块。

<p>上面的内容</p>
<hr>
<p>下面的内容</p>

3.3 文本样式标签(语义化优先)

HTML5 强调语义化,即标签应该表达内容的含义,而不仅仅是外观。

语义化标签 纯样式标签 效果 推荐使用
<strong> <b> 粗体 strong(表示重要性)
<em> <i> 斜体 em(表示强调)
<del> <s> 删除线 del(表示已删除)

加粗:<strong> vs <b>

<!-- 推荐:表示重要内容 -->
<p>请注意:<strong>截止日期是明天</strong>。</p>

<!-- 不推荐:仅表示粗体样式 -->
<p>这个词只是<b>看起来粗一点</b>。</p>

倾斜:<em> vs <i>

<!-- 推荐:表示强调 -->
<p>我<em>真的</em>很喜欢这个产品。</p>

<!-- 不推荐:仅表示斜体样式 -->
<p>书名:《<i>HTML5 权威指南</i>》</p>

其他文本样式标签

🎨 文本样式演示

删除线:原价 ¥999

下划线:需要特别注意的内容

高亮标记:这是重点内容

小号文字:版权所有 © 2026

上标:x2 + y2 = z2

下标:H2O 是水的化学式

<del>已删除的内容</del>
<u>下划线文本</u>
<mark>高亮文本</mark>
<small>小号文本</small>
<sup>上标</sup>
<sub>下标</sub>

3.4 特殊字符实体

某些字符在 HTML 中有特殊含义,需要使用字符实体来表示。

字符 实体名称 实体编号 说明
  &nbsp; &#160; 不间断空格
< &lt; &#60; 小于号
> &gt; &#62; 大于号
& &amp; &#38; 和号
" &quot; &#34; 引号
© &copy; &#169; 版权符号
® &reg; &#174; 注册商标
&trade; &#8482; 商标符号
&hearts; &#9829; 心形符号
<!-- 显示 HTML 标签代码 -->
<p>使用 &lt;p&gt; 标签创建段落。</p>

<!-- 显示版权信息 -->
<p>版权所有 &copy; 2026 我的公司</p>

<!-- 创建多个空格 -->
<p>这里有&nbsp;&nbsp;&nbsp;三个空格。</p>

3.5 引用与代码块

块级引用 <blockquote>

用于引用大段的文本,通常会有缩进效果。

<blockquote cite="https://example.com/source">
    <p>这是一段引用的文字。它可以很长,包含多个段落。</p>
    <p>blockquote 会自动添加缩进样式。</p>
</blockquote>

行内引用 <q>

用于短引用,浏览器会自动添加引号。

<p>爱因斯坦说过:<q>想象力比知识更重要。</q></p>

代码显示

标签 用途 示例
<code> 行内代码 使用 console.log() 输出
<pre> 预格式化文本 保留空格和换行
<kbd> 键盘输入 Ctrl + C 复制
<samp> 程序输出 Error: File not found
<!-- 行内代码 -->
<p>使用 <code>console.log()</code> 输出信息。</p>

<!-- 代码块(保留格式) -->
<pre><code>
function hello() {
    console.log("Hello, World!");
}
</code></pre>

<!-- 键盘按键 -->
<p>按 <kbd>Ctrl</kbd> + <kbd>S</kbd> 保存文件。</p>

✏️ 动手练习

创建一个包含以下内容的 HTML 页面:

  1. 一个 h1 标题作为文章主标题
  2. 使用 h2 创建至少两个章节
  3. 每个章节包含:
    • 几个段落
    • 使用 strong 和 em 强调重要内容
    • 使用 del 标记过时信息
    • 使用 mark 高亮关键词
  4. 添加一个 blockquote 引用名人名言
  5. 使用 pre 和 code 展示一段代码示例
  6. 添加版权信息(使用 © 实体)