使用<em>标签实现语气强调，语义上表示口语化重音；2. <strong>表示内容重要性，而非语调变化；3. 可通过CSS自定义<em>样式而不影响其语义；4. <em>用于语气强调，<i>用于区分文本类型，如书名或术语。
HTML中要实现语气上的强调，最核心且语义化的方式就是使用
<em>
标签。它不是简单地让文本变斜体，而是明确地告诉浏览器和辅助技术，这部分内容在阅读时应该被赋予一种口语化的重音，就像我们说话时会刻意加重某个词的语气一样。
解决方案
在HTML中，当我们想要对一段文本进行“语气强调”时，
<em>
（emphasis）标签是我们的首选。它的作用是为文本提供一种语义上的强调，意味着这段内容在语调上是重要的，或者说，在口语表达时会特别突出。这和我们仅仅为了视觉效果让文本倾斜（比如使用CSS的
font-style: italic;
）是完全不同的。
<em>
标签的价值在于它的语义，它向搜索引擎和屏幕阅读器传达了文本的特定重要性，而不仅仅是视觉上的呈现。
举个例子，如果你想表达“你必须现在就完成这个任务”，那么“必须”这个词就需要被强调。
<p>你<em>必须</em>现在就完成这个任务。</p>
当浏览器渲染这段代码时，通常会默认将
<em>
标签内的文本显示为斜体。但请记住，这只是默认样式，它的真正力量在于语义。
立即学习“前端免费学习笔记（深入）”；
em标签和strong标签在语义和用途上有什么不同？
这是一个非常常见的问题，也是很多前端开发者容易混淆的地方。虽然它们在视觉上可能都被浏览器默认处理成某种强调样式（
<em>
通常是斜体，
<strong>
通常是粗体），但它们的语义内涵和使用场景却大相径庭。
<em>
标签，如前所述，是用来表示“语气强调”（emphasis）。想象一下你说话时，为了表达某种情绪或突出某个词，会刻意提高音量或加重语气。
<em>
就是这种口语化强调的对应。它强调的是文本的“语调”或“重音”，改变的是语句的含义或侧重点。
而
<strong>
标签，则表示“重要性”（strong importance）。它强调的是内容的“重要性”、“严肃性”或“紧迫性”。它告诉读者和机器，这部分内容具有更高的重要级别，是文章或段落的核心信息，不容忽视。它不会改变语句的语调，而是直接指出内容的权重。
我们来看两个例子来体会它们的区别：
-
使用
<em>
：
他说，这笔交易<em>绝不</em>能泄露出去。
这里的“绝不”是语气上的强调，表示一种强烈的禁止态度。
-
使用
<strong>
：
在提交代码前，请确保你已经完成了<strong>所有</strong>的测试。
这里的“所有”是内容上的重要性强调，意味着测试的完整性是至关重要的。
所以，选择哪个标签，关键在于你想要表达的是“语气上的重音”还是“内容上的重要性”。它们都可以通过CSS来改变默认的视觉样式，但其内在的语义是不可替代的。
如何用CSS改变
<em>
<em>
标签的默认样式？
<em>
标签的默认斜体样式在很多情况下可能不符合我们的设计需求。好在，HTML的语义化标签与CSS的样式控制是完全解耦的。这意味着我们可以完全自由地通过CSS来定义
<em>
标签的视觉呈现，而无需牺牲其语义价值。
你可以通过CSS选择器来选中
<em>
标签，然后应用任何你想要的样式。例如，如果你想让被强调的文本显示为红色，并且不再是斜体，甚至变成粗体，可以这样做：
/* 改变所有em标签的样式 */ em { font-style: normal; /* 取消默认的斜体 */ color: #e74c3c; /* 设置文本颜色为红色 */ font-weight: bold; /* 让文本显示为粗体 */ text-decoration: underline; /* 也可以添加下划线 */ } /* 如果只想改变特定上下文中em标签的样式 */ .special-section em { font-style: italic; /* 仍然保持斜体 */ color: #2ecc71; }
在上面的CSS代码中：
-
font-style: normal;
会取消浏览器对
<em>
标签默认应用的斜体样式。
-
color: #e74c3c;
将文本颜色设置为鲜明的红色，以达到视觉上的强调效果。
-
font-weight: bold;
甚至可以将其设置为粗体，这在某些设计中可能比斜体更具视觉冲击力。
- 你还可以添加
text-decoration: underline;
来增加下划线，或者调整
font-size
等。
通过这种方式，我们既保留了
<em>
标签的语义，又完全掌控了它的视觉表现。这对于保持网页的可访问性（例如，屏幕阅读器仍然能识别出是“强调”）和设计灵活性都至关重要。
在实际开发中，什么时候选择
<em>
<em>
而不是
<i>
？
这同样是一个经常困扰开发者的问题，因为
<i>
标签的默认样式也是斜体，和
<em>
看起来非常相似。然而，它们的语义是截然不同的，选择哪一个取决于你想要表达的意图。
<em>
标签，如我们反复强调的，是用于“语气强调”的。当你在口语中会特别重读某个词，以改变句子的含义或表达某种情感时，就应该使用
<em>
。它的核心在于语义上的“重音”。
而
<i>
标签（italic），在HTML5中被重新定义为表示“不同于常规散文的文本”（a span of text in an alternate voice or mood, or otherwise offset from the normal prose）。它通常用于：
- 专业术语、技术词汇或外来语： 例如，
<i>HTML</i>
、
<i>CSS</i>
、
<i>JavaScript</i>
，或者外语词汇如
<i>rendezvous</i>
。
- 船只、电影、书籍的标题： 例如，
《<i>百年孤独</i>》
。
- 思想、梦境、虚构人物的内心独白： 表示一种“内心声音”或“旁白”。
- 引用的文字或诗歌节选： 如果没有更合适的语义标签（如
<blockquote>
或
<cite>
）。
关键在于，
<i>
标签的使用场景，通常不涉及“语气上的强调”，而仅仅是为了在视觉上将这部分文本与周围内容区分开来，表示它属于“另一种类型”或“另一种声音”。它没有
<em>
那种“加重语气”的语义。
举个例子：
-
使用
<em>
：
你<em>真的</em>相信这个故事吗？
（“真的”是语气强调，表达怀疑）
-
使用
<i>
：
她最喜欢的书是 <i>The Hitchhiker's Guide to the Galaxy</i>。
（书名，视觉上区分，无语气强调）
在选择时，始终问自己：我是在强调某个词的“语气”吗？如果答案是肯定的，那就用
<em>
。如果只是想让它看起来像斜体，表示它是某种特殊类型的文本，而没有强调的含义，那么
<i>
可能更合适。当然，在很多情况下，为了视觉效果而让文本倾斜，直接使用CSS的
font-style: italic;
才是最语义化的做法，因为它不附加任何额外的语义。
<i>
标签本身也应谨慎使用，确保其符合HTML5中“alternate voice”的语义。
css javascript java html 前端 html5 浏览器 前端开发 搜索引擎 JavaScript html5 css html 选择器 搜索引擎