文本元素-em标签-强调文本的表现-前端-HTML5-书闪BookChips

30 - 文本元素 - em标签 - 强调文本的表现

作者：

贺及楼

成为作者

更新日期：2025-02-27 11:51:00

文本元素 - em 标签 - 强调文本的表现

在 HTML5 的世界里，有众多标签可以帮助我们构建丰富多彩的网页内容，其中 em 标签虽然看似普通，却在文本强调方面发挥着重要作用。本文将详细介绍 em 标签，包括其定义、使用方法、实际应用场景以及与其他强调标签的对比等内容。

一、em 标签的定义

em 标签是 HTML 中的一个行内元素，全称为 “emphasis”，即强调的意思。它用于表示文本内容的强调语气，当浏览器渲染包含 em 标签的文本时，通常会将其中的文本以斜体形式显示，但这并不是绝对的，具体的显示样式还可以通过 CSS 进行自定义。

二、基本使用方法

em 标签的使用非常简单，只需要将要强调的文本包裹在 <em> 和 </em> 标签之间即可。以下是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>em 标签示例</title>
</head>
<body>
    <p>这是一段普通的文本，<em>这里的内容被强调了</em>，希望你能注意到。</p>
</body>
</html>

在上述代码中，<em> 标签包裹的 “这里的内容被强调了” 文本在浏览器中通常会以斜体显示，以此来突出强调这部分内容。

三、实际应用场景

1. 句子中的重点词汇强调

在一个句子中，有时需要突出某个关键词或短语，以传达更重要的信息。例如：

<p>请务必在 <em>明天</em> 下午 3 点前提交报告。</p>

这里强调了 “明天” 这个时间，提醒读者注意时间的紧迫性。

2. 引用中的强调部分

当引用他人的话语时，可能需要强调其中的某些内容。例如：

<blockquote>
    生活不止眼前的苟且，<em>还有诗和远方</em>。
</blockquote>

通过 em 标签强调了 “还有诗和远方” 这部分内容，突出了引用话语的重点。

3. 提示信息中的关键内容

在一些提示信息中，为了让用户更加关注某些重要内容，可以使用 em 标签进行强调。例如：

<p><em>注意：</em> 本次活动仅限新用户参与。</p>

强调了 “注意：” 这个提示词，引起用户的注意。

四、与其他强调标签的对比

在 HTML 中，除了 em 标签，还有 strong 标签也用于强调文本，它们之间有一些细微的区别。

标签	语义	显示效果	使用场景
`<em>`	表示文本的强调语气，更侧重于语气上的强调	通常以斜体显示	句子中需要强调某个词汇或短语，以突出语义重点
`<strong>`	表示文本的重要性，强调内容的重要程度	通常以粗体显示	强调内容具有重要的意义，如警告、提示等

以下是一个对比示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>em 与 strong 对比示例</title>
</head>
<body>
    <p>这是一段包含 <em>em 标签</em> 的文本，强调的是语气。</p>
    <p>这是一段包含 <strong>strong 标签</strong> 的文本，强调的是重要性。</p>
</body>
</html>

五、通过 CSS 自定义 em 标签的样式

虽然 em 标签默认以斜体显示，但我们可以通过 CSS 来改变其显示样式。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义 em 标签样式</title>
    <style>
        em {
            font-style: normal;
            color: red;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p>这是一段普通的文本，<em>这里的内容被强调了</em>，现在样式被自定义了。</p>
</body>
</html>

在上述代码中，通过 CSS 样式将 em 标签的文本样式设置为正常字体（取消斜体），颜色为红色，并添加了下划线，实现了自定义的强调效果。

六、总结

em 标签是 HTML5 中一个非常实用的文本强调标签，它可以帮助我们在网页中突出显示重要的文本内容，增强文本的表现力和可读性。通过合理使用 em 标签，并结合 CSS 进行样式自定义，我们可以创建出更加丰富多样的网页文本效果。同时，要注意区分 em 标签和 strong 标签的使用场景，以准确传达文本的语义和重要性。希望本文能帮助你更好地掌握 em 标签的使用方法。