Web学习网站

Appearance

<em> 标签 ​

<em> 标签用于定义被强调的文本。它表示文本具有 emphasis（强调）的语义，通常浏览器会将其显示为斜体。

概述 ​

<em> 标签是 HTML 中的语义化标签，用于标识文本中需要强调的部分。与 <strong> 标签表示重要性不同，<em> 标签主要用于表示语气上的强调。

语法 ​

html
<em>强调文本</em>

基本用法 ​

基本强调 ​

html
<p>今天<em>必须</em>完成这个任务。</p>

语气强调 ​

html
<p>我<em>真的</em>不知道这件事。</p>

实际示例 ​

对话中的强调 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>em 标签示例</title>
  <style>
    .dialogue {
      max-width: 600px;
      margin: 2rem auto;
      padding: 2rem;
      background-color: #f8f9fa;
      border-radius: 8px;
      font-size: 1.1em;
      line-height: 1.6;
    }
    
    .speaker {
      font-weight: bold;
      color: #007bff;
    }
  </style>
</head>
<body>
  <div class="dialogue">
    <p><span class="speaker">小明：</span>你<em>真的</em>要去那个地方吗？</p>
    <p><span class="speaker">小红：</span>是的，我<em>必须</em>去，这很重要。</p>
    <p><span class="speaker">小明：</span>但是那里<em>非常</em>危险，你确定吗？</p>
    <p><span class="speaker">小红：</span>我知道，但我<em>别无选择</em>。</p>
  </div>
</body>
</html>

学术引用 ​

html
<article>
  <h1>语言学研究</h1>
  
  <p>正如著名语言学家所说：</p>
  
  <blockquote>
    <p>语言是人类<em>最重要</em>的交流工具，它不仅传递信息，<em>更</em>承载着文化和思想。</p>
  </blockquote>
  
  <p>在本研究中，我们发现语言的演变<em>确实</em>受到社会因素的深刻影响。</p>
</article>

产品描述 ​

html
<section>
  <h2>产品特性</h2>
  
  <p>我们的新产品具有以下<em>独特</em>优势：</p>
  
  <ul>
    <li><em>超长</em>续航时间，可达72小时</li>
    <li><em>极速</em>充电技术，30分钟充满80%</li>
    <li><em>智能</em>降噪功能，提供纯净音质</li>
    <li><em>舒适</em>佩戴体验，适合长时间使用</li>
  </ul>
  
  <p>这些特性使我们的产品在同类产品中<em>脱颖而出</em>。</p>
</section>

与相关标签的区别 ​

与 <i> 标签的区别 ​

html
<!-- i 标签：仅用于样式，无语义含义 -->
<p>这是<i>斜体文本</i>，仅用于视觉效果。</p>

<!-- em 标签：具有语义强调 -->
<p>这是<em>强调文本</em>，表示语气上的强调。</p>

与 <strong> 标签的区别 ​

html
<!-- strong 标签：表示重要性 -->
<p><strong>警告：</strong>请勿在雷雨天气外出。</p>

<!-- em 标签：表示语气强调 -->
<p>我<em>真的</em>不知道这件事。</p>

多层强调 ​

html
<p>我<em>真的<em>非常</em>确定</em>这是正确的选择。</p>

无障碍访问 ​

屏幕阅读器支持 ​

html
<p>欢迎来到<em>我们的</em>网站。</p>

<p>这是<em>非常重要</em>的信息，请仔细阅读。</p>

样式化 ​

自定义样式 ​

html
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 默认 em 样式 */
    em {
      font-style: italic;
    }
    
    /* 强烈强调样式 */
    .strong-emphasis {
      font-style: italic;
      color: #dc3545;
      font-weight: bold;
    }
    
    /* 温和强调样式 */
    .light-emphasis {
      font-style: italic;
      color: #6c757d;
    }
  </style>
</head>
<body>
  <p>普通文本和<em>默认强调文本</em>。</p>
  
  <p>普通文本和<em class="strong-emphasis">强烈强调文本</em>。</p>
  
  <p>普通文本和<em class="light-emphasis">温和强调文本</em>。</p>
</body>
</html>

在不同语境中的使用 ​

书籍和文章标题 ​

html
<p>我最近在读<em>《百年孤独》</em>这本书。</p>

外语词汇 ​

html
<p>这个概念用英文说是<em>serendipity</em>，意思是"意外发现美好事物的能力"。</p>

技术术语 ​

html
<p>在编程中，<em>递归</em>是一种重要的算法思想。</p>

最佳实践 ​

  1. 语义化使用：只在需要语气强调时使用 <em> 标签
  2. 避免过度使用：不要将过多文本标记为强调，这会削弱其效果
  3. 与视觉样式区分：理解 <em> 是语义标签，不是样式标签
  4. 考虑无障碍访问：屏幕阅读器会以不同的语调读出 em 标签的内容
  5. 与 CSS 配合：可以通过 CSS 自定义 em 标签的外观

浏览器兼容性 ​

<em> 标签在所有浏览器中都得到完美支持：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer

注意事项 ​

  1. <em> 标签是内联元素
  2. 浏览器默认将其显示为斜体，但这不是其主要目的
  3. 主要用于传达语气上的强调
  4. 不要仅为了样式效果而使用 <em> 标签
  5. 可以嵌套使用以表示不同层次的强调

相关标签 ​