应使用 而非 表达强重要性，因其具有语义和可访问性支持； 仅具视觉加粗效果。如表单必填提示和错误警告中，用 突出关键信息。
直接用 <strong></strong> 和 <em></em>，别用 <b></b> 或 <i></i> —— 除非你明确只要视觉效果、完全不关心语义或可访问性。
什么时候该用 <strong></strong> 而不是 <b></b>
<strong></strong> 表示内容有强重要性，屏幕阅读器会加重语气朗读，搜索引擎也更倾向识别其语义权重；<b></b> 只是“看起来加粗”，没有语义含义。
- 表单必填提示：
<label><strong>用户名</strong>（必填）</label> - 错误警告：
<p>操作失败：<strong>网络连接中断</strong></p> - 避免场景：仅为了匹配 UI 设计稿的粗体字色，且文案本身无强调意图时，
<b></b>才算合理
<em></em> 和 <i></i> 的关键区别在哪
<em></em> 是“强调”，影响语音节奏（比如读成“我不是不想去”，重音落在“不是”上）；<i></i> 仅表示“不同语境下的文字”，比如外文词、科技术语、船名、作品名等。
- 正确用
<em></em>：<p>你<strong>真的</strong>确定要删除吗？</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></i>：<p>《<i>The Great Gatsby</i>》出版于1925年。</p> - 常见误用：把“注意”“警告”这类提示包在
<i></i>里——它不传达紧迫感，<strong></strong>或<mark></mark>更合适
<mark></mark> 是唯一带背景高亮的语义化强调标签
<mark></mark> 专为“需要用户特别注意的片段”设计，比如搜索关键词高亮、文档批注、上下文相关标记，浏览器默认渲染为黄色背景。
- 搜索结果页：
<h3>找到与 <mark>React</mark> 相关的 12 篇文章</h3> - 代码注释高亮：
<p>调用 <mark>useState</mark> 时必须传入初始值</p> - 注意兼容性：
<mark></mark>在 IE9 及更早版本中不支持，如需兼容，得用<span class="highlight"></span>+ CSS
真正容易被忽略的是：强调不是靠堆叠标签实现的。连续嵌套 <strong><em><mark></mark></em></strong> 不但语义混乱，还会干扰辅助技术判断。一个文本节点，选对一个最贴切的语义标签，比加三种样式更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
