跳到主要内容

HTML 文本格式化

在 HTML 中,文本的显示不仅仅局限于普通的段落或标题,你还可以通过格式化标签对文本进行强调、加粗、斜体、下划线等多种处理。掌握这些格式化标签,能让你的网页内容更具可读性与表现力。

下面你将学习 HTML 中用于文本格式化的常用标签。

加粗文本:<b>

使用 <b> 标签可以让文本加粗,但不会对语义做出特别强调。

<p>这是 <b>加粗</b> 的文字。</p>

显示效果:

这是 加粗 的文字。

注意:如果你想表达“强调”的意思,请使用 <strong>

强调文本:<strong>

<strong> 标签表示“语义上的强调”,通常浏览器会将其加粗显示。它比 <b> 更有语义价值,建议在语义明确时优先使用。

<p>这是 <strong>重要</strong> 的信息。</p>

显示效果:

这是 重要 的信息。

斜体文本:<i>

<i> 用来将文本变为斜体,适合引用术语、技术术语、外来语等。

<p>你可以用 <i>HTML</i> 创建网页。</p>

显示效果:

你可以用 HTML 创建网页。

着重文本:<em>

<em> 标签代表语义上的“着重”,默认浏览器也会以斜体呈现,但它比 <i> 更具语义性。

<p><em>一定</em> 要记住保存文件!</p>

显示效果:

一定 要记住保存文件!

下划线文本:<u>

<u> 用于给文字添加下划线,虽然现在较少使用,但有时仍可见于需要模拟超链接风格的场景中。

<p><u>这是带下划线的文字</u></p>

显示效果:

这是带下划线的文字

删除线文本:<del>

如果你想标记删除的文本,可以使用 <del> 标签。

<p>这个价格是 <del>¥99.00</del>,现价 ¥49.00!</p>

显示效果:

这个价格是 ¥99.00,现价 ¥49.00!

插入文本:<ins>

<ins> 用来表示新增的文本,一般会加下划线标识。

<p>已更新价格:<ins>¥49.00</ins></p>

显示效果:

已更新价格:¥49.00

上标文本:<sup>

上标(superscript)常用于数学指数或脚注。

<p>10<sup>2</sup> = 100</p>

显示效果:

102 = 100

下标文本:<sub>

下标(subscript)适合用于化学公式等需要标注底标的情况。

<p>H<sub>2</sub>O 是水的化学式。</p>

显示效果:

H2O 是水的化学式。

总结:格式化标签一览

标签作用默认样式表现
<b>加粗文本粗体
<strong>强调文本粗体 + 语义强调
<i>斜体文本斜体
<em>着重文本斜体 + 语义强调
<u>下划线文本下划线
<del>删除文本删除线
<ins>插入文本下划线
<sup>上标文本上移字体
<sub>下标文本下移字体

小结

HTML 提供了一系列文本格式化标签,帮助你控制文字的展示方式,同时赋予它们语义意义。在开发中,建议你优先使用语义明确的标签(如 <strong><em>),以增强 HTML 的可读性和可访问性。掌握这些基本标签,是写出结构良好、语义清晰网页的第一步。