应优先使用语义化标签：强调重要性用，表达语气重音用；纯视觉样式应交由css控制，避免滥用和；同时需兼顾可访问性与兼容性细节。
别用 <b></b> 和 <i></i> 做加粗/斜体，除非你明确知道自己在放弃语义。
什么时候该用 <strong></strong> 而不是 <b></b>
当你想告诉浏览器、搜索引擎、屏幕阅读器“这段文字很重要”，就用 <strong></strong>。比如警告信息、关键操作按钮文案、法律条款中的责任条款。
-
<strong></strong>是语义标签，会被读屏软件加重语气朗读 -
<b></b>只是视觉加粗，读屏时不会特殊处理 - SEO 会更重视
<strong></strong>包裹的关键词，但权重提升微乎其微，别指望靠它刷排名 - 两者默认样式都是加粗，但你可以用 CSS 单独覆盖其中一种而不影响另一种
什么时候该用 <em></em> 而不是 <i></i>
当你想表达说话时的重音或语气转折，就用 <em></em>。比如“<p>我不是说<em>他</em>偷了钱</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a>
<p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>”——这个“他”是语义重心，不是单纯要斜着显示。
-
<em></em>支持嵌套：<em>真的<em>非常</em>重要</em>，嵌套层级越多，语气越强（读屏软件会逐层加重） -
<i></i>适合纯视觉需求：外文术语（<i>et al.</i>）、生物分类名（<i>Homo sapiens</i>）、船名（<i>Titanic</i>），这些本身就不带强调意图 - 别为了“让标题斜一点”而用
<i></i>，那该用 CSS 的font-style: italic
CSS 方式比 HTML 标签更灵活
如果只是想控制外观，CSS 是唯一合理选择。HTML 标签不该承担样式职责。
- 加粗可用
font-weight: bold，但更推荐数值写法如font-weight: 600或700，避免浏览器对bold解释不一致 - 斜体可用
font-style: italic，注意有些字体没有真正的 italic 变体，浏览器会伪造倾斜（oblique），效果发虚 - 用 class 控制样式，比如
<p class="warning"><span class="highlight">危险操作</span></p>，比混用<strong></strong>和<b></b>更易维护 - 响应式场景下，你可能希望移动端取消斜体：
@media (max-width: 768px) { .term { font-style: normal; } }
容易被忽略的兼容性和可访问性细节
很多人写了 <strong></strong> 就以为万事大吉，其实还有几个硬伤点没处理：
- 部分旧版 IE 对嵌套
<strong></strong>的渲染异常，建议最多嵌套一层 - 颜色对比度不足时，加粗文字反而更难读（尤其浅灰字+加粗），WCAG 要求文本对比度 ≥ 4.5:1，加粗不能替代对比度
-
<em></em>在某些语音引擎里会被跳过或误读，测试时务必用真实读屏工具（NVDA / VoiceOver）验证 - 别在
<button></button>里套<strong></strong>来“强调按钮”，按钮本身已有语义和焦点状态，多余标签反而干扰无障碍流
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
