blob: a8f83c895841fc2b316bea0ebd53a03c6e74f336 (
plain)
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
---
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><em></strong></code>) 标记出需要用户着重阅读的内容， <code><em></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><em></code> 元素通常被用于指示一个隐式或显式的对比。</p>
<pre class="brush: html"><p>
In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.
</p></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="<i>_vs._<em>"><i> vs. <em></h2>
<p>新的开发人员看到多个元素产生相似的效果，经常被混淆。<code><em></code> 和 <code><i></code> 就是一对常见的例子，因为它们都对文字斜体化。它们的区别是什么？应该使用哪一个？</p>
<p>在默认情况下，它们的视觉效果是一样的。但语义是不同的。 <code><em></code> 标签表示其内容的着重强调，而 <code><i></code> 标签表示从正常散文中区分出的文本，例如外来词，虚构人物的思想，或者当文本指的是一个词语的定义，而不是其语义含义。（作品的标题，例如书籍或电影的名字，应该使用 <code><cite></code>。）</p>
<p>这意味着，正确使用哪一个取决于具体的场景。两者都不是纯粹为了装饰的目的，那是 CSS 样式所做的。</p>
<p>一个 <code><em></code> 的例子可能是："Just <em>do</em> it already!"，或："We <em>had</em> to do something about it"。人或软件在阅读文本时，会对斜体字的发音使用重读强调。</p>
<p>一个 <code><i></code> 的例子可能是："The <em>Queen Mary</em> sailed last night"。在这里，没有对 "Queen Mary" 这个词添加强调或重要性。它只是表明，谈论的对象不是一个名叫玛丽的女王，而是一艘名字叫玛丽的船。另一个 <code><i></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', '<em>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-em-element', '<em>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<em>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>特征</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also" name="See_also">了解更多</h2>
<ul>
<li>{{HTMLElement("i")}}</li>
</ul>
<div>{{HTMLRef}}</div>
|
