必须用em：当文本语气变化改变句意或操作优先级时，如“警告：数据库连接已中断”中的“已中断”需被屏幕阅读器重读以传达紧急性。
em 和 i 都能显示斜体，但选错一个，就可能让屏幕阅读器读错重点、SEO 权重漏掉关键词、甚至被无障碍检测工具标为风险项。
什么时候必须用 em？
当文本的语气变化会改变句意或操作优先级时，em 不是可选项，而是语义刚需。
- 错误提示中的关键状态：比如
<p>警告：<em>数据库连接已中断</em></p>—— “已中断”是需立即响应的动作状态，i会让读屏软件平读，用户可能忽略 - 表单约束词：如
<label>邮箱地址<em>必填</em></label>，配合required属性，语义与行为对齐 - 反讽或转折强调：例如
<p>他说“<em>完全没问题</em>”，结果部署失败了</p>，嵌套em会触发读屏停顿和音调变化，模拟说话时的语气转折
什么时候只能用 i？
i 不是“斜体快捷键”，它是为特定文本类型打的语义标签，用错等于给内容贴错分类。
- 技术术语：
<p>这个函数返回一个 <i>Promise</i> 对象</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> - 外文短语：
<p>他常挂在嘴边的是 <i>c’est la vie</i></p> - 作品名或船名：
<p>参考文档 <i>RFC 9110</i> 或小说 <i>The Great Gatsby</i></p> - 禁止场景：按钮文字（
<button><i>提交</i></button>）、错误信息（<div class="error"><i>请重试</i></div>）、表单提示 —— 这些都该用span+ CSS 或直接语义化标签
为什么不能只靠 CSS 实现斜体？
font-style: italic 确实能控制样式，但它不携带任何语义。浏览器、搜索引擎、读屏软件看不到“重要”或“术语”，只看到“这段字歪了”。
- SEO 影响：Google 解析 DOM 时，
em内容在标题、段首位置会被计入关键词权重；i几乎不参与索引；纯 CSS 斜体则完全无语义信号 - 无障碍风险：axe 扫描发现
i包裹操作指令（如“点击此处上传”），会报color-contrast风险 —— 因为i被归类为装饰性内容，其颜色对比度不强制校验 - 嵌套陷阱：写
<em><em>绝对</em></em>会让 VoiceOver 延长停顿、加重音调；而<i><i>café</i></i>纯属冗余，i没有层级概念
React/Vue 中容易踩的坑
JSX 模板里写错标签，linter（如 eslint-plugin-jsx-a11y）会直接报 jsx-a11y/no-distracting-elements，但更麻烦的是运行时不可见的问题。
- 动态渲染时混淆：比如
{error && <i>{error.message}</i>}—— 若error.message是“密码错误”，它就是需强调的反馈，该用em - 图标字体残留：
<i class="icon-save"></i>已过时，现代应改用<span aria-hidden="true"></span>或原生svg - 组件封装陷阱：自定义
Text组件默认用i渲染斜体 props，结果所有传入的“必填”“禁用中”都被降级为无语义样式
真正难的不是怎么让字变斜，而是每次敲下 时，得先问一句：这段文字，是“要被听见的重点”，还是“只是长得不一样”？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
