学习目标

• 理解 <b> 标签的作用及其与语义化标签（如 <strong>）的区别

• 掌握 <b> 标签的基本语法和典型使用场景

• 能够根据需求选择使用 <b>、<strong> 或 CSS 实现文本加粗

• 了解在现代 Web 开发中对纯样式标签的合理使用原则

正文内容

什么是 <b>

HTML 中的 <b> 标签用于将包裹的文本以粗体形式显示。它的主要作用是视觉上的强调，不包含任何语义信息。也就是说，<b> 仅改变文本外观，不会向浏览器、搜索引擎或辅助技术传达“这段内容很重要”的含义。

关键区别：

• <strong> = “这段文字很重要”（语义 + 视觉）

• <b> = “这段文字看起来要粗一点”（仅视觉）

基本语法

<b>需要加粗的文本</b>

• <b> 是一个行内元素，可嵌套在段落、标题、列表等文本流中。

• 它支持所有 HTML 全局属性（如 class、id、style）。

• 默认样式为 font-weight: bold，但可通过 CSS 覆盖。

应用示例

基本用法

纯视觉加粗

<p>This is a <b>bold</b> word in this sentence.</p>

使用 CSS 替代

<p style="font-weight: bold">This is bold text using CSS</p>

<b> 与 <strong>

优先考虑 CSS

在现代 Web 开发中，推荐使用 CSS 的 font-weight 属性来控制文本粗细，原因包括：

• 符合 关注点分离 原则：HTML 负责结构，CSS 负责样式；

• 更易于维护和主题切换；

• 避免滥用无语义标签。

例如：

<!-- 推荐 -->
<span class="keyword">HTML</span>

<style>
.keyword {
    font-weight: bold;
}
</style>

重点总结

• <b> 标签仅用于视觉加粗，不携带语义信息。

• 与 <strong> 不同，它不会被辅助技术特别处理，也不影响 SEO。

• 合理使用场景包括关键词高亮、品牌名称、非重要性提示等。

• 在注重可维护性和语义化的项目中，优先使用 CSS font-weight 实现加粗效果。

• 若文本确实具有重要性（如警告、核心结论），应使用 <strong> 而非 <b>。

思考题

1. 请列举两个适合使用 <b> 标签的场景，并说明为什么此时不应使用 <strong>。

2. 如果你正在开发一个无障碍兼容的网页，在什么情况下绝对不能用 <b> 替代 <strong>？

3. 为什么现代前端开发更倾向于用 CSS 而不是 <b> 标签来实现文本加粗？从工程维护和团队协作角度分析。