文本强调标签(strong, em)

作者：陈川阅读数：25097人阅读分类： HTML

文本强调标签的基本概念

在HTML中，和是专门用于文本强调的语义化标签。它们不仅能够改变文本的显示样式，更重要的是能够为内容赋予特定的语义含义。表示内容的重要性，而则表示内容的强调或特殊语气。

html 复制代码

<p>这段文字包含<strong>重要内容</strong>和<em>需要强调的部分</em>。</p>

strong标签的详细用法

标签用于表示内容的重要性或紧急性。浏览器默认会将其内容显示为粗体，但这只是视觉表现，其核心在于语义。

html 复制代码

<p><strong>警告：</strong>操作前请备份数据。</p>

在以下场景中特别适用：

安全警告或重要提示
关键操作步骤
需要特别引起注意的信息

html 复制代码

<div class="notice">
  <p><strong>系统维护通知：</strong>服务器将于今晚23:00-24:00进行升级。</p>
</div>

em标签的深入解析

标签用于表示需要强调的文本，通常浏览器会以斜体显示。与不同，它更多用于语气上的强调而非内容的重要性。

html 复制代码

<p>你真的<em>确定</em>要删除这个文件吗？</p>

典型使用场景包括：

对话中的语气变化
需要特别引起注意的词语
技术文档中的术语定义

html 复制代码

<p>在CSS中，<em>选择器</em>用于指定要样式化的HTML元素。</p>

两者的视觉呈现差异

虽然浏览器对这两个标签有默认样式，但实际显示效果可以通过CSS完全自定义：

css 复制代码

strong {
  font-weight: bold;
  color: #d9534f;
}

em {
  font-style: italic;
  text-decoration: underline;
}

嵌套使用的情况

这两个标签可以相互嵌套使用，以表达更复杂的语义层次：

html 复制代码

<p>这个<em><strong>特别重要</strong>的提示</em>需要仔细阅读。</p>

与b和i标签的区别

虽然和也能产生类似的视觉效果，但它们缺乏语义含义：

html 复制代码

<!-- 不推荐 -->
<p>这是<b>粗体</b>和<i>斜体</i>文本。</p>

<!-- 推荐 -->
<p>这是<strong>重要</strong>和<em>强调</em>文本。</p>

在表单中的实际应用

在表单验证中，这两个标签可以很好地标记必填字段和错误提示：

html 复制代码

<div class="form-group">
  <label for="username">用户名 <em>(必填)</em></label>
  <input type="text" id="username" required>
  <p class="error"><strong>错误：</strong>用户名不能为空</p>
</div>

无障碍访问考量

屏幕阅读器会根据这些语义标签调整阅读语气：

通常会导致语音加重
可能会引起语调变化

html 复制代码

<p>请<strong>立即</strong>保存您的工作，<em>否则</em>可能会丢失数据。</p>

在技术文档中的最佳实践

编写API文档时，合理使用这些标签可以提升可读性：

html 复制代码

<article>
  <h2>fetch()方法</h2>
  <p><strong>注意：</strong>此API需要网络权限。</p>
  <p>参数<em>options</em>是一个可选配置对象。</p>
</article>

响应式设计中的样式调整

在不同设备上，可以调整强调标签的样式以优化阅读体验：

css 复制代码

@media (max-width: 768px) {
  strong {
    font-size: 1.1em;
    background-color: #fffde7;
  }
  
  em {
    letter-spacing: 0.5px;
  }
}

与CSS伪元素的结合使用

可以通过CSS为强调文本添加额外的装饰：

css 复制代码

strong::after {
  content: "!";
  color: red;
}

em {
  position: relative;
}

em::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #ffeb3b;
}

在JavaScript动态内容中的应用

通过JavaScript动态添加强调标签可以增强交互反馈：

javascript 复制代码

function showError(message) {
  const errorDiv = document.createElement('div');
  errorDiv.innerHTML = `<strong>错误：</strong><em>${message}</em>`;
  document.body.appendChild(errorDiv);
}

国际化场景下的注意事项

在不同语言环境中，强调的方式可能有所不同：

html 复制代码

<!-- 中文 -->
<p>这个功能<strong>非常重要</strong>，请<em>务必</em>仔细阅读说明。</p>

<!-- 日文 -->
<p>この機能は<strong>非常に重要</strong>ですので、<em>必ず</em>説明をお読みください。</p>

打印样式中的特殊处理

可以专门为打印媒体优化强调文本的显示：

css 复制代码

@media print {
  strong {
    font-weight: 900;
    text-decoration: underline;
  }
  
  em {
    font-style: normal;
    border-bottom: 1px dotted #000;
  }
}