前言
为了语义化HTML5增加了不少新标签。其中i、em和b、strong这两组标签是最容易弄混的，不好好去探究一下，还真说不清。这个也是前端面试中经常会问的问题。今天从源头上，也就是从HTML5的文档（https://w3c.github.io/html/textlevel-semantics.html#the-em-element）中来一探究竟！
区别详解
首先，单从显示效果来看，在不额外添加css的情况下，i和em标签包围的文字将会以斜体呈现，b和strong标签包围的文字则会加粗显示。如图
效果如下：
<b>和<i>在创建之初就是简单地表示粗体和斜体样式，但是到了HTML5，为了语义化特性，这两个标签也被赋予了语义，样式倒不那么重要，因为那是css的事情。但上面两组标签语义还是各有侧重，下面依照规范逐一介绍：
i介绍
规范描述：
The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.
译文：
i 元素代表在普通文本中具有不同语态或语气的一段文本，某种程度上表明一段不同特性的文本，比如一个分类学名称，一个技术术语，一个外语习语，一个音译，一个想法，或者西方文本中的一艘船名。
举例：
// 分类学名称
<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>// 术语
<p>The term <i>prose content</i> is defined above.</p>
// 外语习语
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
大家可以在i标签上应用class来表明用这个元素的意图，这样该特殊样式在以后如需修改时，不需要仔细检查全部文档来更改。在使用i标签时候时，推荐考虑是否应用其他标签更为合适，如用em来突出强调，dfn标签来定义项目实例。
em介绍
规范描述：
The em element represents stress emphasis of its contents.
The placement of stress emphasis changes the meaning of the sentence. The element thus forms an integral part of the content. The precise way in which stress is used in this way depends on the language.
译文：
