16. 强调 em 与 strong

em：语义上的强调

<em> 表示需要重读强调的文本。浏览器默认把它显示为斜体，但重点是语义而不是外观。

<p>我<em>真的</em>很喜欢前端开发。</p>

屏幕阅读器读这句话时，会在”真的”这个词上加重音。搜索引擎也会注意到这里是被强调的内容。

strong：语义上的重要性

<strong> 表示内容非常重要。浏览器默认显示为粗体。

<p>操作前请<strong>保存文件</strong>，否则修改会丢失。</p>

“保存文件”被标记为重要内容，屏幕阅读器通常会加重语气朗读。

嵌套使用加强语气

<em> 和 <strong> 可以嵌套，表示更强的强调。

<p>这是<em><strong>极其重要</strong></em>的提醒。</p>

嵌套的 <em> 或 <strong> 会被读得更重，层级越深，语气越强。

b 和 i 是视觉标签

<b> 和 <i> 曾经被叫做”bold”和”italic”。在 HTML5 中，它们有了新的语义定义，但仍然是纯视觉层面。

标签	视觉	语义
<em>	斜体	需要强调的文本
<strong>	粗体	重要的内容
<i>	斜体	技术术语、外来语、船名等
<b>	粗体	关键词、产品名等（不增加额外重要性）

i 标签的现代用法

HTML5 给 <i> 赋予了新语义：表示一种不同的语气或角色。

<p>那个<i lang="fr">cliché</i>用得很巧妙。</p>

<p>船名通常用斜体：<i>泰坦尼克号</i></p>

b 标签的现代用法

<b> 用于引起注意但不增加重要性的场景。

<p>搜索结果中的<b>关键词</b>会以粗体显示。</p>

<p>本文作者：<b>张三</b></p>

什么时候用哪个

选标签的方法很简单——先问自己：“我想表达什么？”

• 想强调某个词 → <em>
• 想标记重要内容 → <strong>
• 只是样式需要斜体（术语、外来语） → <i>
• 只是样式需要粗体（关键词、人名） → <b>
• 想控制外观但不关心语义 → CSS

<p>
  <strong>注意：</strong>请在截止日期前提交，
  <em>逾期不予受理</em>。
</p>

小结

• <em> 表示语义强调，屏幕阅读器会重读
• <strong> 表示内容重要，屏幕阅读器加重语气
• <b> 和 <i> 是视觉标签，没有额外语义
• 优先使用 em 和 strong，语义更清晰
• 外观交给 CSS，语义交给标签