initial commit

1 files changed, 141 insertions, 0 deletions

diff --git a/files/zh-cn/web/html/element/em/index.html b/files/zh-cn/web/html/element/em/index.html
new file mode 100644
index 0000000000..1c3f6deca5
--- /dev/null
+++ b/files/zh-cn/web/html/element/em/index.html
@@ -0,0 +1,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>&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>
+
+<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>