优先用,因其传达语义重要性,影响屏幕阅读器朗读、SEO加权及无障碍合规;仅用于纯视觉加粗且无语义需求的极窄场景。

该用 <strong> 还是 <b>?语义决定选法
加粗不是“看起来粗就行”,而是“这段话是否值得被屏幕阅读器重读、被搜索引擎加权”。<strong> 表示内容有强烈重要性,比如价格、警告、操作按钮文字;<b> 仅表示“想让它视觉上粗一点”,无语义,适用场景极窄——比如词典里词条名、小说中角色首次出场名。
常见错误现象:<b> 包裹“¥199.00”,读屏软件直接念“b 一百九十九点零零 b 结束”,而非“价格一百九十九元”;SEO 工具报“关键信息未语义化”。
实操建议:
- 产品页价格、表单必填提示、系统级警告文案 → 必用
<strong> - 纯装饰性加粗(如海报式标题局部提亮),且无法用 CSS 实现时 → 才考虑
<b> - React/Vue 组件中避免硬编码
<b>,否则后期语义化整改成本高
<em> 和 <i> 的区别比你想象的更关键
<em> 是“强调”,代表语音重读,辅助技术会改变语调;<i> 是“非默认语境”,比如外语词、术语、船名、生物分类名。两者都斜体,但语义层完全不同。
立即学习“前端免费学习笔记(深入)”;
使用场景:
- “请立即确认订单” → “立即”需重读 → 用
<em> - 文章提到
<i>Homo sapiens</i>或<i>café</i>→ 属于术语/外来语 → 用<i> - 小说中写“他喊了声
<i>老张</i>” → 首次出现的角色名 → 可用<i>,但非强制
容易踩的坑:把所有斜体都塞进 <i>,结果读屏软件对“注意安全”这类提示也用外语腔调念,反而削弱警示效果。
为什么现在更推荐用 CSS 的 font-weight 和 font-style
HTML 标签负责结构和语义,CSS 负责呈现。当加粗/倾斜只是视觉需求(比如统一品牌色下的标题样式),用 CSS 更干净、更可控。
参数差异与性能影响:
-
font-weight: bold和font-weight: 700效果一致,但后者更明确;多数 Web 字体只提供 400/700 两档,写600可能回退到 400 - 避免用
font-weight: bolder—— 它依赖父元素计算,嵌套深时行为不可控 -
font-style: italic比oblique更可靠,后者是算法倾斜,失真风险高 - 内联写法:
<p style="font-weight: 700; font-style: italic">…</p>;类写法更推荐:.highlight { font-weight: 700; font-style: italic; }
混用标签和 CSS 时最容易忽略的边界问题
真正难的不是语法,而是判断“这句话到底算强调,还是单纯换种字体?”比如促销 Banner 上的“限时抢购”,它既是营销文案的一部分,又是独立强提示——此时应优先用 <strong>,再用 CSS 控制颜色/间距,而不是用 <b> + class 去“模拟强调”。
另一个常被忽略的点:可访问性测试工具(如 axe、Lighthouse)不会报“用了 <b>”,但会报“重要内容缺少语义标签”。这种漏检,往往要等视障用户反馈才暴露。



















