【0011】HTML其他文本格式化标签详解（em标签、strong标签、b标签、i标签、sup标签、sub标签......）

news2025/3/3 13:07:05

如果你觉得我的文章写的不错，请关注我哟，请点赞、评论，收藏此文章，谢谢！

本文内容体系结构如下：
在这里插入图片描述

本文旨在深入探讨HTML中其他的文本格式化标签，主要有 标签、 标签、 和  标签、<q> 标签、<blockquote> 标签、  标签、<del> 标签、<ins> 和  标签、 标签、  和  标签、<code> 标签、<pre> 标签、<kbd>、<samp> 和 <var> 标签等。通过本文，您将能够熟练掌握这些标签的用法，从而更有效地控制网页中文本的显示和语义。

一、强调与重要性标签

1.1 `` 标签

功能：表示强调的文本，通常呈现为斜体。
语义：向搜索引擎和浏览器传达该文本具有额外的强调意义。
示例：

<p>这是一段普通文本，但<em>这部分</em>被强调了。</p>

浏览器渲染效果如下：
在这里插入图片描述

1.2 `` 标签

功能：表示语气更强的强调文本，通常呈现为粗体。
语义：与相比，传达的强调程度更高，通常用于表示重要或需要特别注意的文本。
示例：

<p>请务必注意<strong>这个重要信息</strong>。</p>

浏览器渲染效果如下：
在这里插入图片描述

1.3 `` 和 `` 标签

功能：用于使文本加粗，用于使文本斜体。
语义：这两个标签仅改变文本的显示样式，不传达任何额外的语义信息。因此，在需要强调文本语义时，应优先使用和。
示例：

<p>这是<b>加粗</b>文本，这是<i>斜体</i>文本。</p>

浏览器渲染效果如下：
在这里插入图片描述

二、引用与标记标签

2.1 `<q>` 标签

功能：表示短小的引用文本。
语义：向浏览器和搜索引擎传达该文本是引用自其他来源的。
示例：

<p>他说：“<q>这是一个很好的建议。</q>”</p>

浏览器渲染效果如下：
在这里插入图片描述

2.2 `<blockquote>` 标签

功能：表示较长的引用段落。
语义：与<q>相比，<blockquote>更适合用于引用整段或较长的文本。
示例：

<blockquote>
    <p>这是一个较长的引用段落，通常用于引用他人的观点或文章。</p>
</blockquote>

浏览器渲染效果如下：
在这里插入图片描述

2.3 `` 标签

功能：表示需要标记或高亮显示的文本。
语义：向浏览器和搜索引擎传达该文本是特别标记的，通常用于突出显示重要信息。
示例：

<p>请查看<mark>这个标记的文本</mark>。</p>

浏览器渲染效果如下：
在这里插入图片描述

三、删除与插入标签

3.1 `<del>` 标签

功能：表示被删除的文本。
语义：向浏览器和搜索引擎传达该文本已被删除或不再有效。
示例：

<p>这个<del>文本</del>已被删除。</p>

浏览器渲染效果如下：
在这里插入图片描述

3.2 `<ins>` 和 `` 标签

功能：<ins>表示新插入的文本，用于为文本添加下划线（但通常不推荐仅用于样式目的，因为不传达任何语义信息）。
语义：<ins>向浏览器和搜索引擎传达该文本是新插入的。
示例：

<p>这是<ins>新插入的文本</ins>。</p>
<p>这是<u>下划线文本</u>（不推荐用于仅样式目的）。</p>

浏览器渲染效果如下：
在这里插入图片描述

四、小型文本标签与上标/下标标签

4.1 `` 标签

功能：使文本以较小的字体显示。
语义：向浏览器和搜索引擎传达该文本是次要或辅助信息。
示例：

<p>这是正常大小的文本，这是<small>较小</small>的文本。</p>

浏览器渲染效果如下：
在这里插入图片描述

4.2 `` 和 `` 标签

功能：使文本以上标形式显示，使文本以下标形式显示。
语义：这两个标签通常用于数学公式、化学符号或脚注等场景。
示例：

<p>这是上标文本<sup>2</sup>，这是下标文本<sub>2</sub>。</p>

浏览器渲染效果如下：
在这里插入图片描述

五、代码与计算机相关文本标签

5.1 `<code>` 标签

功能：表示代码片段或计算机程序中的文本。
语义：向浏览器和搜索引擎传达该文本是代码或计算机指令。
示例：

<p>这是一个<code>代码片段</code>。</p>

浏览器渲染效果如下：
在这里插入图片描述

5.2 `<pre>` 标签

功能：表示预格式化的文本，通常用于显示代码或ASCII艺术等。
语义：保留文本中的空格和换行符，不进行任何格式调整。
示例：

<pre>
这是预格式化的文本。
    保留空格和换行符。
</pre>

浏览器渲染效果如下：
在这里插入图片描述

5.3 `<kbd>`、`<samp>` 和 `<var>` 标签

<kbd>：表示用户输入的内容，如键盘按键。
<samp>：表示计算机程序的示例输出。
<var>：表示变量名或程序中的其他元素。
示例：

<p>按下<kbd>Ctrl + C</kbd>复制文本。</p>
<p>示例输出：<samp>Hello, World!</samp></p>
<p>变量名：<var>x</var>。</p>

浏览器渲染效果如下：
在这里插入图片描述

六、最佳实践与注意事项

语义优先：在可能的情况下，优先使用具有语义的标签（如、、<blockquote>等），而不是仅改变样式的标签（如、、等）。
可读性：确保文本格式化的方式有助于提高内容的可读性和理解性。
一致性：在整个网页中保持文本格式化的一致性，以提供良好的用户体验。

七、实战演练

7.1 任务

使用上述文本格式化标签，创建一个包含强调文本、引用、标记文本、代码片段等元素的示例网页。

7.2 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化标签示例</title>
</head>
<body>
    <h2>文本格式化标签示例</h2>
    
    <p>这是一段普通文本，但<em>这部分</em>被强调了，而<strong>这部分</strong>则具有更强的强调效果。</p>
    
    <p>他说：“<q>这是一个很好的建议。</q>”</p>
    
    <blockquote>
        <p>这是一个较长的引用段落，用于展示<blockquote>标签的用法。</p>
    </blockquote>
    
    <p>请查看<mark>这个标记的文本</mark>，它表示需要特别注意的内容。</p>
    
    <p>这个<del>文本</del>已被删除，而这是<ins>新插入的文本</ins>。</p>
    
    <p>这是<small>较小</small>的文本，用于表示次要信息。</p>
    
    <p>这是上标文本<sup>2</sup>，这是下标文本<sub>2</sub>。</p>
    
    <p>以下是一个<code>代码片段</code>：</p>
    <pre>
    function helloWorld() {
        console.log('Hello, World!');
    }
    </pre>
    
    <p>按下<kbd>Ctrl + C</kbd>复制文本，示例输出：<samp>Hello, World!</samp>，变量名：<var>x</var>。</p>
</body>
</html>