em 是语义标签，表示内容有强调语气，浏览器默认斜体仅为惯例；其核心价值在于向读屏软件传递语义，而非控制样式。
em 标签不是“加斜体”的样式开关
em 的本质是语义标签，表示内容有强调语气，浏览器默认用斜体渲染只是惯例。如果你只想要视觉上的斜体，span + CSS 更合适；用 em 却删掉斜体样式（比如 em { font-style: normal; }），它依然在读屏软件中被读作强调语气——这是它和纯样式标签的根本区别。
什么时候该用 em 而不是 i 或 strong
当某个词需要传达说话时的重音或语义重点，就用 em：
- 对比强调：
<p>我买了<em>苹果</em>，不是香蕉</p> - 反语或特殊含义：
<p>这真是“<em>完美</em>”的解决方案</p> - 纠正前文：
<p>会议在三点——不，是<em>四点</em></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> -
i适合外文术语、生物分类名等；strong表达更强力度的强调（如警告、强制要求）
嵌套 em 会改变强调层级，但别滥用
HTML 允许 em 嵌套，语义上表示“更强调”：
<p>他<em>确实</em>说<em>‘<em>绝对</em>不能改’</em></p>
但注意：
- 嵌套两层以上很难被用户感知，读屏软件通常不区分层级
- 连续多个
em容易让文本节奏断裂，影响可读性 - 不要为了视觉效果（比如想让某段文字斜得更“深”）而嵌套——那属于样式问题，应交由 CSS 处理
常见误用：把 em 当作格式工具
这些做法违背语义初衷：
- 产品名、品牌名全用
em包裹（应使用span或无标签） - 标题里每个关键词都套
em（标题本身已有语义权重，额外强调反而干扰） - 配合 CSS 强制给
em加粗+斜体+变色（强调 ≠ 视觉轰炸；过度样式会削弱其语义价值） - 在表格单元格或按钮文案里盲目加
em（除非该词确实在上下文中承担语气转折或对比）
真正难的是判断“这里是否真的需要强调”，而不是“这里要不要斜体”。语义一旦错用，修复成本远高于改一行 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
