文章导读

HTML 文本格式化

海豚V靓仔 2026年2月8日 16

掌握文本格式化标签的重要性

定义视觉外观：通过标签如 、、、 等，可以直接控制文本的粗体、斜体、上标、下标等基本显示效果，使内容层次更清晰。

赋予内容语义：许多标签在改变外观的同时，更传达了特定的含义。例如， 表示“重要”， 表示“强调”，<code> 表示“计算机代码”，<blockquote> 表示“引用”。这有助于辅助技术（如屏幕阅读器）理解和搜索引擎解读内容结构。

区分可用与废弃标签：HTML标准在不断演进，部分早期仅用于视觉控制的标签（如 <s>、）已被废弃，应由具有语义的标签（如 <del>、<ins>）或CSS样式替代。了解这一点能确保代码符合现代标准。

格式化标签详解与实例

文本格式化标签

下表列出了常用的文本格式化标签。注意，应优先使用具有语义的标签（如, ）而非纯视觉标签（如, ）。

标签	描述（与推荐用法）	视觉/语义说明
<b>	定义粗体文本。（纯视觉表现）	无特殊语义，仅表示粗体。
<strong>	定义加重语气的文本。（具有语义）	表示内容非常重要，通常显示为粗体。
<i>	定义斜体文本。（纯视觉表现）	无特殊语义，仅表示斜体。
<em>	定义着重文字。（具有语义）	表示内容需要强调，通常显示为斜体。
<small>	定义小号字。	用于免责声明、注释等附属细则。
<sub>	定义_下标字。如H₂O。	常用于化学式、数学下标。
<sup>	定义^上标字。如E=mc²。	常用于数学幂次、脚注编号。
<ins>	定义插入字。	表示文档中新添加的内容，通常带下划线。
<del>	定义删除字。	表示文档中已删除的内容，通常带删除线。应用此标签替代废弃的 <s> 和 <strike>。

注意：标签 （下划线）已被废弃，如需下划线效果，应使用CSS样式 style=”text-decoration: underline;”。

“计算机输出”标签

这些标签用于表示计算机相关的代码、输入输出等，通常浏览器会以等宽字体显示。

<code><code>一段计算机代码</code></code> 显示为：<code>一段计算机代码</code>
<code><kbd>键盘输入</kbd></code> 表示： 按 <kbd>Enter</kbd> 键确认。
<code><samp>程序输出样本</samp></code> 示例： 程序输出：<samp>Hello, World!</samp>
<code><var>变量</var></code> 表示： 变量 <var>x</var> 的值是10。

<!-- 预格式文本 <pre> 标签非常重要 -->
<pre><pre> 标签可保留
  文本中的
    空格和
      换行。
非常适合显示代码块。

引用、术语定义与地址标签

这些标签为特定类型的内容提供语义。

<!-- 缩写 -->
<abbr title="World Wide Web">WWW</abbr> 是万维网的缩写。

<!-- 地址 -->
<address>
  作者：张三<br />
  邮箱：zhangsan@example.com
</address>

<!-- 文字方向 (bdo) -->
<p>正常文字方向。</p>
<p><bdo dir="rtl">这段文字从右向左显示。</bdo></p>

<!-- 长短引用 -->
<blockquote cite="https://example.com/source">
  这是一段来自他处的长引用，通常会缩进显示。
</blockquote>
孔子曰：<q cite="#”>学而时习之，不亦说乎。</q>

<!-- 术语定义 -->
<p><dfn>HTML</dfn> 是一种标记语言。</p>

动手实验与查看源码

创建实验文件：新建一个HTML文件，尝试使用上述所有标签，并在浏览器中打开，观察它们默认的显示效果。
查看网页源码学习：当你在网上看到有趣的文本效果时，可以通过在页面上右键点击 -> 选择“查看页面源代码”来查看其背后的HTML是如何实现的，这是极佳的学习方式。

学习资源与延伸阅读

在线实例与参考

HTML文本格式化实例:在提供的【链接内容】中查找“HTML 实例” 在【链接内容】的W3School网站“HTML 实例”部分，有“文本格式化”、“预格式文本”、“地址”等所有相关例子的在线演示和可编辑代码。
完整的HTML标签参考手册:在提供的【链接内容】中查找“HTML 标签”参考在【链接内容】的“参考手册”部分，可以查询到本页提到的每一个标签的详细语法和属性说明。

评论（已关闭）

评论已关闭

学习是一件漫长而又免费的事

加载中