em 和 strong 不是样式标签而是语义标签：em 改变句子含义（如强调不同词导致语义偏移），strong 仅提升重要性（删掉不影响句意但可能引发操作失误）；二者嵌套须符合语义层级，不可为视觉叠加滥用。
em 和 strong 不是“斜体”和“粗体”的快捷写法
它们的 DOM 标签名本身承载语义，浏览器默认样式只是辅助呈现。哪怕你用 CSS 把 <strong></strong> 设成 font-weight: normal，它仍是“重要内容”；把 <em></em> 设成加粗，它也不会变成高优先级信息。屏幕阅读器读 <strong></strong> 会加重+停顿+提高音量，读 <em></em> 则改变语调（比如升调、拖长），搜索引擎也会据此区分关键词权重和修饰性短语。
em 改变句子含义，strong 只提升重要性
这是最常被忽略的底层逻辑。举个例子：
<pre class="brush:php;toolbar:false;"><p>Cats are cute animals.</p>
——强调“Cats”，讨论对象是哪种动物；
<code><p>Cats are cute animals.</p></code>
——强调“are”，质疑猫是否真的可爱；
<code><p>Cats are cute animals.</p></code>
——强调“cute”，对比的是“cute”还是“annoying”。
而 <strong></strong>
-
<strong>Warning</strong>: High voltage area — do not enter.中，“Warning”重要，但整句意思不变 - 删掉
<strong></strong>，用户可能漏掉风险；删掉<em></em>，句子依然成立，只是语气/焦点变了
嵌套要按语义层级来，不是为了视觉叠加
可以嵌套，但必须外层定重要性、内层补语气。比如：
<pre class="brush:php;toolbar:false;"><p>You <strong>must</strong> confirm within <strong>24 hours</strong>.</p>
——外层 <strong></strong>
<strong></strong> 强调时限紧迫性，两层都属“重要性”范畴，合理。
反例：
-
<strong>Please <em>immediately</em> save</strong>：副词“immediately”不是核心风险点，嵌套错位 -
<strong><strong>Dangerous</strong></strong>：双重<strong></strong>没有新增语义，读屏软件可能困惑 - 整段包
<strong>Read the terms carefully</strong>：稀释语义，辅助技术可能跳过真正关键的判定词
该用哪个，取决于删掉它会不会导致操作失误或责任遗漏
这不是风格选择题，而是语义安全判断：
- 表单错误中触发重填的判定词，如
email（不是整句“邮箱格式不正确”）——用<strong></strong> - 权限警告里的动作动词，如
permanently delete（不是“请注意”这种引导语）——用<strong></strong> - 法律条款中的责任锚点，如
no liability——必须用<strong></strong>，不能靠 CSS 模拟 - 表达反语：“We do support IE11.”——用
<em></em>，因为“do”在这里承载语气反转 - 澄清歧义：“This button deletes data, not backs it up.”——
<em></em>用于消除理解偏差
最容易被忽略的是：语义判断不能依赖视觉渲染。哪怕页面全灰了，<strong></strong> 和 <em></em> 在 DOM 层依然各司其职。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
