当前位置：首页 > ai >正文

（第十五期）HTML文本格式化标签详解：让文字更有表现力

ai 2025/8/16 22:34:58

（第十五期）HTML文本格式化标签详解：让文字更有表现力

前言

在Web开发中，我们经常需要对文字进行特殊处理，比如加粗、倾斜、~~删除线~~、下划线等效果。这些效果不仅能美化页面，更重要的是能够突出重要信息，引导用户注意力。

为什么需要文本格式化？

想象一下这样的场景：迎面走来四个人，其中三个都比较苗条，但有一个叫小明的，体重250多斤，又肥又壮。你一眼望过去，焦点会集中在谁身上？

答案很明显：小明！

因为四个人都很瘦，就小明比较胖，你肯定会优先注意到他。这就是突出重要性的原理。

同样的道理，如果你给文字添加了加粗、倾斜等效果，它就会比普通文字更加重要，更能吸引用户的眼球。

文本格式化标签分类

HTML提供了四组文本格式化标签，每组都有两个标签可以实现相同的效果：

效果	推荐标签	备选标签	语义强度
加粗	`<strong>`	`<b>`	强烈
倾斜	`<em>`	`<i>`	强烈
删除线	`<del>`	`<s>`	强烈
下划线	`<ins>`	`<u>`	强烈

1. 加粗标签详解

1.1 `` 标签（推荐）

 标签是HTML5中语义化最强的加粗标签，表示重要内容。

<p>我是<strong>加粗</strong>的文字</p>

效果展示：
我是加粗的文字

1.2 `` 标签（备选）

 标签也能实现加粗效果，但语义不如强烈。

<p>我是<b>加粗</b>的文字</p>

1.3 为什么推荐 ``？

这就像说话的语气一样：

普通语气：“哥哥我爱你”
强烈语气：“欧巴，撒浪嘿思密达！”

 就像强烈语气，更能表达重要性。

2. 倾斜标签详解

2.1 `` 标签（推荐）

 标签用于强调文本内容，使其倾斜显示。

<p>我是<em>倾斜</em>的文字</p>

效果展示：
我是倾斜的文字

2.2 `` 标签（备选）

 标签也能实现倾斜效果，但语义不如强烈。

<p>我是<i>倾斜</i>的文字</p>

3. 删除线标签详解

3.1 `<del>` 标签（推荐）

<del> 标签用于表示已删除的内容。

<p>我是<del>删除线</del>的文字</p>

效果展示：
我是~~删除线~~的文字

3.2 `<s>` 标签（备选）

<s> 标签也能实现删除线效果，但语义不如<del>强烈。

<p>我是<s>删除线</s>的文字</p>

4. 下划线标签详解

4.1 `<ins>` 标签（推荐）

<ins> 标签用于表示插入的内容。

<p>我是<ins>下划线</ins>的文字</p>

效果展示：
我是下划线的文字

4.2 `` 标签（备选）

 标签也能实现下划线效果，但语义不如<ins>强烈。

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

完整示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本格式化标签示例</title>
</head>
<body><h1>HTML文本格式化标签演示</h1><p>这是普通文字，没有任何格式化效果。</p><p>这是<strong>加粗</strong>的文字，显得更加重要。</p><p>这是<em>倾斜</em>的文字，用于强调内容。</p><p>这是<del>删除线</del>的文字，表示已删除的内容。</p><p>这是<ins>下划线</ins>的文字，表示插入的内容。</p><h2>组合使用示例</h2><p>这是<strong><em>加粗且倾斜</em></strong>的文字，双重强调！</p><p>原价：<del>¥100</del>，现价：<strong>¥50</strong></p>
</body>
</html>