HTML文本格式化标签

原创于 2025-09-05 22:00:09 发布 · 965 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #网络 #数据库

HTML提供了多种标签用于文本的格式化，这些标签可以改变文本的外观（如粗细、斜体）或赋予文本特定的含义（如强调、引用）。

1. 基本文本样式标签

（1）粗体文本

使用或标签可以使文本显示为粗体：

：仅表示文本为粗体，无特殊语义

：表示文本具有重要性，有语义，搜索引擎会给予更多权重

示例：

<p>这是<b>粗体文本</b>（使用b标签）</p>
<p>这是<strong>重要的粗体文本</strong>（使用strong标签）</p>

显示效果：

这是粗体文本（使用b标签）

这是重要的粗体文本（使用strong标签）

（2）斜体文本

使用或标签可以使文本显示为斜体：

：仅表示文本为斜体，无特殊语义，常用于技术术语、外来语等

：表示文本需要强调，有语义，屏幕阅读器会重读该部分

示例：

<p>这个<i>术语</i>来自拉丁语（使用i标签）</p>
<p>请<em>立即阅读</em>这部分内容（使用em标签）</p>

显示效果：

这个术语来自拉丁语（使用i标签）

请立即阅读这部分内容（使用em标签）

（3）其他文本样式标签

：为文本添加下划线（注意：不要用于链接，链接默认有下划线）

<s>：为文本添加删除线，表示内容已被删除或不再有效

：为文本添加黄色背景，类似于荧光笔标记效果

：使文本变小，常用于免责声明、版权信息等

：上标文本，常用于脚注或数学公式

：下标文本，常用于化学公式

示例：

<p>这是<u>带下划线的文本</u></p>
<p>原价：<s>199元</s>，现价：99元</p>
<p>请重点关注<mark>这部分内容</mark></p>
<p>主要内容<small>（注：最终解释权归本公司所有）</small></p>
<p>数学公式：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
<p>化学公式：H<sub>2</sub>O 是水的分子式</p>

显示效果：

这是带下划线的文本

原价：~~199元~~，现价：99元

请重点关注这部分内容

主要内容（注：最终解释权归本公司所有）

数学公式：a2 + b2 = c2

化学公式：H2O 是水的分子式

2. 语义化文本标签

除了改变文本外观，HTML还提供了一些具有特定语义的文本标签，这些标签不直接改变文本样式（或仅有轻微改变），但能帮助浏览器和搜索引擎理解文本的含义。

<abbr>：表示缩写词，可通过title属性提供完整含义

<address>：表示联系地址，通常显示为斜体

<blockquote>：表示长引用，通常会缩进显示

<q>：表示短引用，会自动添加引号

<cite>：表示引用的作品名称（如书籍、文章标题）

<code>：表示计算机代码，通常使用等宽字体

<pre>：表示预格式化文本，保留文本中的空格和换行

示例：

<p>我们使用<abbr title="HyperText Markup Language">HTML</abbr>创建网页。</p>

<p>联系地址：</p>
<address>
    北京市海淀区中关村大街1号<br>
    联系电话：12345678
</address>

<p>以下是一段长引用：</p>
<blockquote>
    生活就像海洋，只有意志坚强的人，才能到达彼岸。
</blockquote>

<p>孔子说：<q>学而时习之，不亦说乎？</q></p>

<p>我最近在读<cite>《HTML入门到精通》</cite>这本书。</p>

<p>使用<code>console.log()</code>可以在控制台输出信息。</p>

<p>以下是一段代码：</p>
<pre>
function greet() {
    console.log("Hello, World!");
}
greet();
</pre>

显示效果：

我们使用HTML创建网页。

联系地址：

北京市海淀区中关村大街1号

联系电话：12345678

以下是一段长引用：

生活就像海洋，只有意志坚强的人，才能到达彼岸。

孔子说：学而时习之，不亦说乎？

我最近在读《HTML入门到精通》这本书。

使用console.log()可以在控制台输出信息。

代码：

function greet() {
    console.log("Hello, World!");
}
greet();