PHP小码农

Appearance

em 与 i ​

<em> 和 <i> 都可以使文本显示为斜体，但它们的语义不同。<em> 表示强调（emphasis），改变句子的含义或重点；<i> 表示文本在语气或情绪上与众不同，如术语、外文词汇、内心独白等。

前置知识

阅读本节前，建议先了解：strong 与 b

基础概念 ​

<em>（emphasis）是语义强调标签，表示内容需要被强调。屏幕阅读器在遇到 <em> 时会改变朗读的语气（如加重语气、拉长音调）。而 <i>（italic）是视觉标签，表示文本在某些方面与众不同，如专业术语、外来词、内心想法等，但不表示强调。

核心区别：<em> 改变句意，<i> 只是语气或类别的不同。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>em 与 i 示例</title>
</head>
<body>
  <!-- em：语义强调 -->
  <p>我们<em>需要</em>尽快完成这个项目。</p>

  <!-- i：视觉斜体，表示术语或外文 -->
  <p>这是一个 <i>de facto</i> 标准。</p>

  <p>他在心里想：<i>今天一定要把这个问题解决。</i></p>
</body>
</html>

详细说明 ​

em 的语义与效果 ​

<em> 改变句子的含义重心。放在不同的词上，句子传达的信息不同：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>em 改变句意示例</title>
</head>
<body>
  <h1>em 改变句子含义</h1>

  <!-- 强调"我"：不是别人打扫 -->
  <p><em>我</em>明天打扫房间。</p>

  <!-- 强调"明天"：不是今天也不是后天 -->
  <p>我<em>明天</em>打扫房间。</p>

  <!-- 强调"打扫"：不是做别的 -->
  <p>我明天<em>打扫房间</em>。</p>
</body>
</html>

嵌套 em 的双重强调 ​

<em> 可以嵌套使用，嵌套层级越高，强调程度越强。屏幕阅读器会以更强烈的语气朗读嵌套的 <em>：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>嵌套 em 示例</title>
</head>
<body>
  <h1>嵌套强调</h1>

  <!-- 单层强调 -->
  <p>这条路<em>非常</em>危险。</p>

  <!-- 双层强调：更强烈 -->
  <p><em><em>绝对不要</em></em>触碰高压电线！</p>

  <!-- 三层强调：极度强调（通常不建议） -->
  <p>我<em><em><em>真的</em></em></em>很想见你。</p>
</body>
</html>

i 的使用场景 ​

<i> 的典型使用场景包括：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>i 标签使用场景</title>
</head>
<body>
  <h1>i 标签的典型用法</h1>

  <!-- 外文词汇 -->
  <p>他是一位 <i>cul-de-sac</i> 的居民。</p>

  <!-- 专业术语 -->
  <p>在生物学中，光合作用分为 <i>光反应</i> 和 <i>暗反应</i> 两个阶段。</p>

  <!-- 内心独白 -->
  <p>看着窗外的雨，她想：<i>也许一切都会好起来的。</i></p>

  <!-- 船名/作品名 -->
  <p>他乘坐 <i>泰坦尼克号</i> 从利物浦出发。</p>
</body>
</html>

em 与 i 的对比 ​

特性<em><i>
语义强调内容，改变句意文本与众不同，不改变句意
默认样式斜体斜体
可嵌套可以（强调程度递增）可以但无嵌套语义
屏幕阅读器改变朗读语气按正常语气朗读
典型场景关键词强调、警告术语、外文、内心独白

实战示例 ​

用户协议中的强调 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>用户协议</title>
</head>
<body>
  <h1>用户服务协议</h1>

  <p>请您在使用本服务前，<em>仔细阅读并充分理解</em>本协议的所有条款。</p>

  <p>您注册账号即表示您<em>同意</em>以下条款：</p>

  <ul>
    <li>您提供的个人信息必须<em>真实、准确、完整</em></li>
    <li>您不得将账号<em>转让、出售</em>给他人</li>
    <li>违反协议可能导致账号被<em>永久封禁</em></li>
  </ul>

  <p>术语定义：<i>服务</i>指本平台提供的所有在线功能和内容。</p>
</body>
</html>

注意事项 ​

em 和 strong 可以配合使用 ​

html
<!-- strong 表示重要性，em 表示强调 -->
<p><strong><em>立即执行！</em></strong>这是最高优先级任务。</p>

不要用 i 代替 em ​

html
<!-- 不推荐：需要强调但使用了 i -->
<p>这个 bug <i>必须</i>在今天修复。</p>

<!-- 正确：需要强调应使用 em -->
<p>这个 bug <em>必须</em>在今天修复。</p>

最佳实践 ​

  1. 需要强调用 em：当改变某个词的强调会改变句意时，使用 <em>
  2. 语气不同用 i：当文本只是语气或类别不同时，使用 <i>
  3. 避免过度嵌套：<em> 的嵌套一般不超过 2 层
  4. 通过 CSS 调整：如果不想使用斜体样式，可通过 CSS 修改

下一节

继续学习：mark 高亮

参考链接 ​