files/zh-cn/web/html/element/em/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

---
title: <em>
slug: Web/HTML/Element/em
tags:
  - VS
  - em
  - i
  - web 语义化
  - webgeeker
  - xgqfrms
translation_of: Web/HTML/Element/em
---
<h2 id="简介">简介</h2>

<p><strong>HTML 着重元素</strong> (<code><strong>&lt;em&gt;</strong></code>) 标记出需要用户着重阅读的内容， <code>&lt;em&gt;</code> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。</p>

<div class="note"><strong>请注意：</strong> 通常地，该元素会被浏览器展示为斜体文本， 但是，它不应该仅仅用于应用斜体样式；为此目的，请使用 CSS 样式。使用 {{HTMLElement("cite")}} 元素标记作品的标题（书籍，戏剧，歌曲等）；它通常也采用斜体样式，但具有不同的含义。使用 {{HTMLElement("strong")}} 元素标记比周围文本更重要的文本。</div>

<ul class="htmlelt">
 <li><dfn>内容类别</dfn><br>
  流内容，推辞内容，可触及内容</li>
 <li><dfn>Permitted content</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Phrasing content</a>.</li>
 <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
 <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</li>
 <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.</li>
</ul>

<h2 id="属性">属性</h2>

<p>此元素只包括<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p>

<h2 id="示例">示例</h2>

<p><code>&lt;em&gt;</code> 元素通常被用于指示一个隐式或显式的对比。</p>

<pre class="brush: html">&lt;p&gt;
  In HTML 5, what was previously called &lt;em&gt;block-level&lt;/em&gt; content is now called &lt;em&gt;flow&lt;/em&gt; content.
&lt;/p&gt;</pre>

<h3 id="Result" name="Result">结果</h3>

<p>In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.</p>

<h2 id="&lt;i>_vs._&lt;em>">&lt;i&gt; vs. &lt;em&gt;</h2>

<p>新的开发人员看到多个元素产生相似的效果，经常被混淆。<code>&lt;em&gt;</code> 和 <code>&lt;i&gt;</code> 就是一对常见的例子，因为它们都对文字斜体化。它们的区别是什么？应该使用哪一个？</p>

<p>在默认情况下，它们的视觉效果是一样的。但语义是不同的。 <code>&lt;em&gt;</code> 标签表示其内容的着重强调，而 <code>&lt;i&gt;</code> 标签表示从正常散文中区分出的文本，例如外来词，虚构人物的思想，或者当文本指的是一个词语的定义，而不是其语义含义。（作品的标题，例如书籍或电影的名字，应该使用 <code>&lt;cite&gt;</code>。）</p>

<p>这意味着，正确使用哪一个取决于具体的场景。两者都不是纯粹为了装饰的目的，那是 CSS 样式所做的。</p>

<p>一个 <code>&lt;em&gt;</code> 的例子可能是："Just <em>do</em> it already!"，或："We <em>had</em> to do something about it"。人或软件在阅读文本时，会对斜体字的发音使用重读强调。</p>

<p>一个 <code>&lt;i&gt;</code> 的例子可能是："The <em>Queen Mary</em> sailed last night"。在这里，没有对 "Queen Mary" 这个词添加强调或重要性。它只是表明，谈论的对象不是一个名叫玛丽的女王，而是一艘名字叫玛丽的船。另一个 <code>&lt;i&gt;</code> 的例子可能是："The word <em>the</em> is an article"。</p>

<h2 id="Specifications" name="Specifications">说明文档</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">注释</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-em-element', '&lt;em&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-em-element', '&lt;em&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;em&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>

{{Compat("html.elements.em")}}

<h2 id="See_also" name="See_also">了解更多</h2>

<ul>
 <li>{{HTMLElement("i")}}</li>
</ul>

<div>{{HTMLRef}}</div>