---

HTML 基础：格式化完全指南

引言：认识HTML与网页格式化

在互联网的浩瀚世界里，网页是我们获取信息、进行交互的主要载体。而构建这些网页的基石，正是 HTML（HyperText Markup Language，超文本标记语言）。HTML 主要负责定义网页的结构和内容，告诉浏览器如何组织和显示页面上的各个元素。

当我们谈论网页的“格式化”，往往会想到字体颜色、大小、布局、背景等视觉效果。虽然现代网页设计主要依靠 CSS（Cascading Style Sheets，层叠样式表）来实现这些精美的视觉格式化，但在 HTML 的基础中，也包含了一系列用于文本和内容格式化的元素。这些元素或直接影响文本的显示样式（尽管这种用法已被现代标准不推荐），或赋予文本特定的语义，从而间接影响其在不同设备或场景下的格式呈现（例如，屏幕阅读器会以特定方式处理代码块或引用）。

本篇文章将深入探讨 HTML 中用于格式化的基础元素。我们将从最常见的文本格式化标签开始，涵盖段落、标题、列表等结构性元素，讨论它们的用法、语义以及在现代网页开发中的推荐实践。理解这些基础知识，是掌握网页开发不可或缺的第一步。

请注意，随着 Web 标准的发展，HTML 的角色越来越聚焦于内容和结构，而表现层则完全交由 CSS。因此，了解某些仅用于呈现的 HTML 标签为何被弃用（或不推荐使用），以及如何利用具有语义的标签配合 CSS 实现格式化，是学习 HTML 格式化时非常重要的一环。

第一章：文本块与段落格式化

网页内容最基本的形式就是文本。HTML 提供了一些核心元素来组织和格式化这些文本块。

1. 段落 <p>

段落 <p>（paragraph）是最常用的文本块元素。它用于定义一个独立的文本段落。浏览器通常会在段落的上方和下方添加一些空白（外边距），以将不同段落分隔开来。

“`html

这是第一个段落的文本内容。

这是第二个段落的文本内容，它们之间会自动产生一些间距。

“`

语义与用法： <p> 标签代表着逻辑上的一段文本。它的主要作用是结构化文本内容，使其更易于阅读和理解。不应该仅仅为了产生空行而使用 <p>（后面我们会介绍产生空行的方法）。

2. 标题 <h1> 到 <h6>

标题元素用于定义文档中的不同级别的标题。从 <h1> 到 <h6>，重要性逐渐降低。<h1> 是最高级别的标题，通常用于页面的主标题；<h6> 是最低级别的子标题。

“`html

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题

这是六级标题

“`

语义与用法： 标题元素不仅决定了文本的默认字号和粗细（浏览器会为不同级别的标题设置不同的默认样式），更重要的是它们定义了文档的结构层次。这对于搜索引擎优化（SEO）和可访问性（Accessibility，例如屏幕阅读器用户）至关重要。搜索引擎和屏幕阅读器会利用标题结构来理解页面的大纲。因此，应该按照内容的逻辑层次来使用标题，而不是仅仅为了改变文本大小或粗细。例如，不要因为想让一段普通文字变大变粗而使用 <h2>。

3. 水平线 <hr>

<hr> 标签（horizontal rule）用于在文档中插入一条水平分隔线。它通常表示内容的主题变化或者段落之间的分隔。

“`html

这是第一部分内容。

---

这是与第一部分内容相关，但又有所分隔的第二部分内容。

“`

语义与用法： <hr> 在 HTML5 中被重新定义为“段落级主题的变化”（a paragraph-level thematic break）。它不应该仅仅被用来画一条线作为装饰，而是应该在语义上代表内容主题的转变。

4. 换行 <br>

<br> 标签（line break）用于在文本中强制换行。与 <p> 不同，<br> 只是简单地将文本流换到下一行，而不会创建新的段落，也不会在行之间添加额外的外边距。

“`html

这是第一行文本。
这是第二行文本，紧跟在第一行之后。

“`

语义与用法： <br> 主要用于需要在不改变段落语义的情况下强制换行的场景，例如诗歌、地址块等。不应该滥用 <br> 来模拟段落间距，那样会破坏文档的结构性。应该使用 <p> 标签来创建段落。

5. 引用块 <blockquote>

<blockquote> 标签用于标记一个长引用块，通常是从其他来源引用的文本。浏览器通常会以缩进的方式来显示 <blockquote> 中的内容。

“`html

以下是引用内容：

“纸上得来终觉浅，绝知此事要躬行。”

“`

语义与用法： <blockquote> 明确表示其包含的内容是引用来的。可选的 cite 属性可以用来指定引用来源的 URL，但这个属性在视觉上通常没有效果，主要用于机器阅读。如果要引用的是简短的、嵌入在句子中的内容，应该使用内联的 <q> 标签（quote），而不是 <blockquote>。

6. 预格式化文本 <pre>

<pre> 标签（preformatted text）用于呈现预格式化文本。在 <pre> 标签内的文本会保留源代码中的空格、换行符和制表符，并通常以等宽字体显示。

“`html

这是    一段
预格式化的文本。
  它会保留         所有的空格和换行。

“`

语义与用法： <pre> 标签的主要用途是显示代码块、ASCII 艺术或其他需要精确保留原始格式的文本。在显示程序代码时，常常将 <code> 标签嵌套在 <pre> 标签内部，即 <pre><code>...</code></pre>，以同时获得预格式化和代码的语义。

第二章：文本级/内联格式化（语义与表现）

除了块级元素，HTML 还提供了许多用于格式化文本片段的内联元素。这些元素有的侧重于语义（推荐使用），有的则侧重于表现（应谨慎使用或避免）。

1. 语义化的文本格式化（推荐）

这些标签赋予文本特定的含义，有助于搜索引擎、辅助技术等更好地理解内容。它们的默认显示样式是浏览器提供的，可以通过 CSS 修改。

• <strong>：重要文本
  表示其内容具有“重要性”，通常以粗体显示。
  html
<p>请务必阅读<strong>重要提示</strong>。</p>
  语义与用法： 用于强调文本的重要性，而不是仅仅使其变粗。与 <b> 相比，<strong> 具有更强的语义。

• <em>：强调文本
  表示其内容需要被“强调”，通常以斜体显示。
  html
<p>我<em>强烈</em>不同意你的观点。</p>
  语义与用法： 用于强调文本的语气或重点，而不是仅仅使其变斜。与 <i> 相比，<em> 具有更强的语义。

• <mark>：标记/高亮文本
  表示文本被标记或高亮，通常带有背景色。
  html
<p>请注意这个词语：<mark>重要</mark>。</p>
  语义与用法： 用于标记与当前上下文相关或需要引起读者注意的文本。

• <small>：小号文本
  表示附属细则，例如免责声明、版权信息、法律文本等。通常以小号字体显示。
  html
<p>主要内容。<small>这是相关的附属信息。</small></p>
  语义与用法： 在 HTML5 中，<small> 的语义不再是单纯的“小字体”，而是用于标记附属信息。如果仅仅想让文本变小，应该使用 CSS。

• <sub> 和 <sup>：下标和上标
  <sub> 用于创建下标文本，<sup> 用于创建上标文本。常用于数学公式、化学符号、脚注引用等。
  html
<p>水的化学式是 H<sub>2</sub>O。</p>
<p>爱因斯坦的质能方程是 E=mc<sup>2</sup>。</p>
  语义与用法： 用于表示特定的文本格式约定，如化学式、数学幂等。

• <del> 和 <ins>：删除和插入文本
  <del> 标记已被删除的文本，通常会显示为带删除线的文本。<ins> 标记新插入的文本，通常会显示为带下划线的文本。常用于修订或版本记录。
  html
<p>原价：<del>¥100</del> 现价：<ins>¥80</ins></p>
  语义与用法： 用于表示文档的修订历史。

• <code>：代码片段
  用于标记一小段计算机代码。通常以等宽字体显示。
  html
<p>使用 `const` 关键字声明常量，例如：<code>const x = 10;</code></p>
  语义与用法： 明确表示这是一段代码。如前所述，长代码块通常放在 <pre> 标签内。

• <kbd>：键盘输入
  用于标记用户通过键盘输入的文本。通常以等宽字体显示，有时带有边框或背景色。
  html
<p>请按下 <kbd>Ctrl</kbd> + <kbd>S</kbd> 保存文件。</p>
  语义与用法： 用于指示用户需要输入的按键或命令。

• <samp>：程序输出示例
  用于标记程序或其他系统的示例输出。通常以等宽字体显示。
  html
<p>运行命令会看到输出：<samp>Hello, World!</samp></p>
  语义与用法： 表示计算机程序的输出结果。

• <var>：变量
  用于标记程序或数学表达式中的变量。通常以斜体显示。
  html
<p>方程 `x = y + 2` 中的变量是 <var>x</var> 和 <var>y</var>。</p>
  语义与用法： 表示程序中的变量或数学表达式中的变量。

• <cite>：作品标题
  用于标记作品（书籍、文章、歌曲、电影等）的标题。通常以斜体显示。
  html
<p>我最喜欢的一本书是 <cite>《1984》</cite>。</p>
  语义与用法： 明确表示所引用的作品名称。

• <dfn>：定义术语
  用于标记定义列表或文章中正在被定义的术语。
  html
<p>一个 <dfn>HTML 元素</dfn> 通常包括一个开始标签、内容和一个结束标签。</p>
  语义与用法： 用于突出正在被解释或定义的术语。

• <abbr>：缩写
  用于标记缩写或首字母缩略词。可以通过 title 属性提供完整的词汇。
  html
<p><abbr title="超文本标记语言">HTML</abbr> 是构建网页的基础。</p>
  语义与用法： 为缩写提供完整的解释，有利于可访问性和 SEO。

• <address>：联系信息
  用于标记文档或文档部分的作者/所有者的联系信息。通常以斜体显示。
  html
<address>
Written by <a href="mailto:[email protected]">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
  语义与用法： 用于提供联系方式，不应仅仅用于格式化任何地址信息。

• <q>：短引用（内联）
  用于标记简短的、内嵌在句子中的引用。浏览器通常会自动在引用的内容前后添加引号。
  html
<p>他说了一句著名的名言：<q>坚持就是胜利</q>。</p>
  语义与用法： 用于内联引用，区别于块级的 <blockquote>。

2. 表现性的文本格式化（应谨慎使用或避免）

这些标签主要是为了改变文本的外观而设计的，缺乏语义。在现代网页开发中，应优先使用 CSS 来控制文本的样式。

• <b>：粗体文本
  通常以粗体显示文本，但不表示重要性。
  html
<p>这个词是<b>粗体</b>的。</p>
  语义与用法： HTML5 中重新定义了 <b> 的语义，表示一段文字在不传达额外重要性、强调或其他语义的情况下，需要引起读者注意（例如，文章中的关键词，或者产品名称）。然而，仅仅为了让文本变粗而使用 <b> 仍然是不推荐的，更好的做法是使用 CSS 的 font-weight 属性。如果文本确实重要，应使用 <strong>。

• <i>：斜体文本
  通常以斜体显示文本，但不表示强调。
  html
<p>这个词是<i>斜体</i>的。</p>
  语义与用法： HTML5 中重新定义了 <i> 的语义，表示一段文字在不传达额外强调的情况下，需要以不同于普通文本的方式呈现（例如，技术术语、外语词汇、思想、船名等）。然而，仅仅为了让文本变斜而使用 <i> 仍然不推荐，更好的做法是使用 CSS 的 font-style 属性。如果文本需要强调，应使用 <em>。

• <u>：下划线文本
  通常以下划线显示文本。
  html
<p>这个词是<u>带下划线</u>的。</p>
  语义与用法： 在 HTML4 中，<u> 纯粹是表现性的，不推荐使用。在 HTML5 中，<u> 的语义被重新定义为表示不属于文本但需要加下划线的文本（例如，中文中的专名号）。然而，由于用户习惯将带下划线的文本视为链接，滥用 <u> 会造成混淆和可访问性问题。因此，除了极少数特定语义（如中文专名号）或特殊需求外，强烈不推荐使用 <u>，应使用 CSS 的 text-decoration 属性添加下划线。

• <s>：删除线文本
  通常以删除线显示文本，表示其内容不再准确或不再相关。
  html
<p><s>这个价格已经失效了。</s> 新价格在这里。</p>
  语义与用法： 在 HTML5 中，<s> 的语义是表示内容不再准确，但仍然有用（与表示删除的 <del> 不同）。如果表示删除的内容，优先使用 <del>。如果仅仅为了画一条删除线而无语义，应使用 CSS 的 text-decoration: line-through;。

• <font>：字体标签
  用于设置字体、大小和颜色。这个标签在 HTML4 中被弃用，在 HTML5 中被完全移除。
  html
<!-- 请勿使用！这是过时的写法 -->
<p><font size="4" color="red">这是使用 font 标签的文本。</font></p>
  语义与用法： 彻底弃用。因为它将内容的结构和表现混杂在一起，难以维护。所有字体、颜色、大小的设置都应该通过 CSS 来完成。

• <center>：居中标签
  用于使块级元素或内联元素居中显示。这个标签在 HTML4 中被弃用，在 HTML5 中被完全移除。
  html
<!-- 请勿使用！这是过时的写法 -->
<center>
<h1>居中标题</h1>
<p>这段文本也会居中。</p>
</center>
  语义与用法： 彻底弃用。所有元素的对齐和布局都应该通过 CSS 来完成（例如，text-align: center; 或使用 Flexbox/Grid 布局）。

通过对比可以看出，现代 HTML 倾向于使用具有语义的标签来描述内容，而将样式控制交给 CSS。这是一种更好的实践，因为它提高了网页的可维护性、可访问性和搜索引擎友好性。

第三章：列表格式化

列表是网页中组织信息的一种常见方式。HTML 提供了三种主要的列表类型，它们都具有明确的结构和默认的格式化样式。

1. 无序列表 <ul> 和列表项 <li>

无序列表 <ul>（unordered list）用于表示一系列没有特定顺序或重要性等级的列表项。列表项 <li>（list item）嵌套在 <ul> 标签内部。浏览器通常会在每个列表项前显示一个圆点或方块（列表标记）。

“`html

我喜欢的水果有：

• 苹果
• 香蕉
• 橙子

“`

语义与用法： <ul> 标签表示其内部的 <li> 元素是一组没有特定顺序的项目。列表标记的样式可以通过 CSS 进行修改。

2. 有序列表 <ol> 和列表项 <li>

有序列表 <ol>（ordered list）用于表示一系列有特定顺序或步骤的列表项。列表项 <li> 嵌套在 <ol> 标签内部。浏览器通常会在每个列表项前显示一个编号（数字、字母或罗马数字）。

“`html

制作蛋糕的步骤：

1. 准备材料。
2. 混合面糊。
3. 烘烤。
4. 装饰。

“`

语义与用法： <ol> 标签表示其内部的 <li> 元素是一组有顺序的项目。列表项的编号类型可以通过 <ol> 的 type 属性设置（例如，type="1"、type="a"、type="i" 等），也可以通过 CSS 的 list-style-type 属性设置。<ol> 还有 start 属性可以指定起始编号，reversed 属性可以反转编号顺序。

3. 描述列表 <dl>、术语 <dt> 和描述 <dd>

描述列表 <dl>（description list）用于表示术语及其定义或描述的列表。它包含一对或多对术语 <dt>（description term）和描述 <dd>（description details）。

“`html

咖啡

一种由咖啡豆制成的饮品。

茶

一种由茶叶制成的饮品。

在很多文化中具有重要地位。

“`

语义与用法： <dl> 标签用于创建术语和描述的配对列表，常用于词汇表、问答列表等。浏览器通常会将 <dd> 内容缩进显示。

列表元素是构建导航菜单、商品列表、博客文章目录等各种结构化内容的常用工具。正确使用不同类型的列表标签，能够清晰地表达内容的组织关系。

第四章：通用容器元素 <div> 和 <span>

虽然 <div> 和 <span> 本身不带有特定的格式化语义，但它们在现代网页布局和格式化中扮演着极其重要的角色。它们是 HTML 中最常用的“容器”元素，主要用于通过 CSS 来应用样式或 JavaScript 来操作元素。

1. 块级容器 <div>

<div> 标签（division）是一个通用的块级容器元素。它没有特殊的语义，仅用于将文档中的内容组织成块或分区。

“`html

“`

语义与用法： <div> 标签本身不会改变内容的显示，除非通过 CSS 为它添加样式。它主要用于结合 CSS 进行页面布局和分组内容，例如将页面分为头部、导航、主体、侧边栏、底部等区域。应该尽量在有特定语义的 HTML5 结构元素（如 <header>, <nav>, <main>, <aside>, <footer>, <article>, <section>) 不适用时，才使用 <div> 作为通用的块级容器。

2. 内联容器 <span>

<span> 标签是一个通用的内联容器元素。它没有特殊的语义，用于标记文本中的一小部分，以便通过 CSS 或 JavaScript 进行操作。

“`html

这本书的作者是 张三。

“`

语义与用法： <span> 标签本身不会改变内容的显示，除非通过 CSS 为它添加样式。它主要用于结合 CSS 对文本的某个片段应用样式，或者用 JavaScript 选取文本片段。例如，改变句子中某个词语的颜色、字体等。

<div> 和 <span> 是 HTML 结构中的骨架，它们本身不提供格式化，但提供了“钩子”（通过 class 或 id 属性）让 CSS 和 JavaScript 能够精确地定位和控制页面上的任何元素，从而实现复杂的布局和精细的格式化。

第五章：图像与链接对格式化的影响

虽然图像 <img> 和链接 <a> 主要用于插入内容和创建交互，但它们作为内联或替换元素，也会影响周围文本的格式化。

1. 图像 <img>

<img> 标签用于在网页中嵌入图像。图像是替换元素，它会插入到文本流中，并且会占用一定的空间。

“`html

这是一段文字，后面跟着一个图像：

“`

对格式化的影响： 图像默认会按照其尺寸显示，并与周围的内联元素（如文本）对齐。通过 CSS 可以控制图像的尺寸、边距、浮动（让文本环绕图像）等，从而实现更复杂的图文混排格式。alt 属性为图像提供替代文本，对于可访问性和 SEO 非常重要。

2. 链接 <a>

<a> 标签（anchor）用于创建超链接，可以将用户导航到其他页面、文件或同一页面的不同位置。

“`html

请访问 示例网站 获取更多信息。

“`

对格式化的影响： 链接默认会显示为带下划线的蓝色文本（访问过的链接通常显示为紫色）。这些默认样式可以通过 CSS 进行修改，例如去除下划线、改变颜色、改变鼠标悬停时的样式等。链接是内联元素，会嵌入在文本流中。

第六章：HTML 格式化与 CSS 的关系：分离的艺术

正如引言和前面的章节反复提及的，现代网页开发强烈推荐将内容的结构（HTML）与表现样式（CSS）彻底分离。

为什么分离？

1. 提高可维护性： 当样式集中在 CSS 文件中时，修改网站的整体外观变得非常容易，只需修改 CSS 文件即可影响所有使用该样式的页面。如果样式直接写在 HTML 标签的属性里（如 <font> 或 style 属性，尽管 style 属性用于内联样式，但仍不如外部或内部 CSS 规则集灵活），修改起来将非常困难和耗时。
2. 提高灵活性： 同一个 HTML 文档可以应用不同的 CSS 样式表，从而实现不同的视觉呈现（例如，响应式设计根据屏幕尺寸应用不同样式，或者提供打印样式）。
3. 提高可访问性： 语义化的 HTML 结构配合 CSS，可以更好地适应不同的用户需求和设备。例如，屏幕阅读器依赖于 HTML 的结构和语义来正确地向用户传达信息，而 CSS 则控制视觉呈现，两者互不干扰。
4. 提高页面加载速度： CSS 文件通常会被浏览器缓存，当用户访问同一网站的不同页面时，无需重复下载样式信息。
5. 更好的 SEO： 搜索引擎更喜欢结构清晰、语义明确的 HTML 代码。

如何分离？

• 使用语义化的 HTML 元素： 优先使用 <p>, <h1> 到 <h6>, <ul>, <ol>, <blockquote>, <strong>, <em>, <code> 等具有明确语义的标签来描述内容。
• 避免使用弃用或纯表现性的 HTML 标签： 不使用 <font>, <center> 等。谨慎使用 <b>, <i>, <u> 等，除非确实需要其 HTML5 中重新定义的特定语义，且不与默认的视觉效果混淆。
• 使用 CSS 控制样式： 所有关于字体、颜色、大小、边距、填充、布局、背景等视觉呈现的设置，都应该通过 CSS 规则来完成。可以通过选择器（元素选择器、类选择器 .class、ID 选择器 #id 等）选中 HTML 元素，然后应用样式。

一个简单的 CSS 示例：

假设你有一个段落，你想让它变成红色字体：

HTML:
“`html

这是一个需要注意的段落。

“`

CSS:
css
.warning {
color: red; /* 设置字体颜色为红色 */
font-weight: bold; /* 设置字体加粗 */
}

将这段 CSS 规则放在 <style> 标签内（位于 <head> 中）或链接到外部的 .css 文件中，就可以使所有带有 class="warning" 的 <p> 标签显示为红色粗体。这比直接在 <p> 标签内使用内联样式 <p style="color: red; font-weight: bold;"> 更灵活和易于管理。

结论：掌握基础，面向未来

HTML 基础格式化是构建网页不可或缺的一部分。尽管现代 Web 开发已经将大部分视觉格式化工作交给了 CSS，但理解 HTML 元素自带的默认格式化行为以及更重要的——它们的语义，对于写出高质量、易于维护、可访问且对搜索引擎友好的代码至关重要。

回顾本文，我们学习了：

• 如何使用 <p>, <h1> 到 <h6>, <hr>, <br>, <blockquote>, <pre> 等块级元素来组织文本和内容流。
• 如何使用 <strong>, <em>, <code>, <cite>, <abbr>, <del>, <ins> 等语义化的内联元素来丰富文本的含义。
• 哪些是已被弃用或应谨慎使用的纯表现性标签（如 <font>, <center>, 滥用的 <b>, <i>, <u> 等），并理解为何要避免它们。
• 如何使用 <ul>, <ol>, <dl> 等列表元素来构建结构化的列表信息。
• <div> 和 <span> 这两个通用容器如何在配合 CSS 时发挥巨大的格式化作用。
• 图像 <img> 和链接 <a> 作为内联元素对文本流的影响。
• 最重要的是，理解并遵循“结构与表现分离”的原则，将 HTML 用于定义内容和结构，将 CSS 用于控制样式和布局。

掌握这些 HTML 基础知识，不仅能让你写出符合标准的网页骨架，更为你后续学习 CSS 提供了坚实的基础。通过结合 HTML 的语义化能力和 CSS 强大的样式控制能力，你将能够创建出既美观又易于使用的现代网页。

继续学习 CSS，探索更丰富的视觉格式化技巧吧！祝你在前端开发的道路上越走越远！