粗体文本标签 - <b>

什么是 <b> 标签？

<b> 标签用于将文本显示为粗体，但不表示文本具有特殊的重要性或强调。它是一个表现性标签，主要用于改变文本的外观。

基本语法

html 
<b>粗体内容</b>

用法与语义

在HTML5中，<b> 标签的语义被重新定义为：用于吸引读者注意的文本，但不表示重要性或强调。例如：

  • 文档摘要中的关键词
  • 评论中的产品名称
  • 文章中的导航词

与 <strong> 标签不同，<b> 标签不传达内容的重要性，仅用于视觉上的突出显示。

示例：

html 
<!-- 文档摘要中的关键词 -->
<p>本文将介绍 <b>HTML</b>、<b>CSS</b> 和 <b>JavaScript</b> 等前端技术。</p>

<!-- 评论中的产品名称 -->
<p>我最近购买了 <b>iPhone 15</b>，它的性能非常出色。</p>

<!-- 文章中的导航词 -->
<p>接下来，<b>材料准备</b> 部分将介绍实验所需的所有物品。</p>

与 <strong> 标签的区别

<b> 标签和 <strong> 标签都会使文本显示为粗体，但它们的语义和用法不同：

标签 语义 用法
<b> 表现性标签 仅用于视觉上的粗体显示
<strong> 语义化标签 表示内容具有重要性或紧急性

示例：

html 
<!-- 使用b标签（仅视觉效果） -->
<p>在 <b>第二章</b> 中，我们将详细讨论这个问题。</p>

<!-- 使用strong标签（语义重要） -->
<p><strong>警告：</strong>操作前请备份所有数据。</p>

全局属性

<b> 标签支持所有HTML全局属性，包括 class、id、style、title 等。

示例：

html 
<!-- 使用class自定义样式 -->
<p>
  <b class="product-name">笔记本电脑</b>
  <span class="price">¥5999</span>
</p>

<!-- 使用title提供额外信息 -->
<p>
  请阅读 <b title="服务条款和条件">使用条款</b>。
</p>

结合其他标签使用

<b> 标签可以与其他HTML标签结合使用，但应注意语义的合理性：

示例：

html 
<!-- 与链接标签结合 -->
<p>
  <a href="product.html">
    <b>查看更多产品</b>
  </a>
</p>

<!-- 与列表结合 -->
<ul>
  <li><b>颜色：</b>红色、蓝色、绿色</li>
  <li><b>尺寸：</b>S、M、L、XL</li>
  <li><b>价格：</b>¥199</li>
</ul>

<!-- 与span标签结合 -->
<p>
  <span class="label">状态：</span>
  <b class="status">可用</b>
</p>

最佳实践

  1. 避免过度使用：仅在需要视觉突出显示文本时使用 <b> 标签，不要滥用。

  2. 语义优先：如果文本具有重要性或需要强调，应该使用 <strong> 标签而不是 <b> 标签。

  3. 结合CSS使用：可以使用CSS来自定义 <b> 标签的外观，如颜色、字体大小等。

  4. 保持一致性：在整个网站中保持 <b> 标签的使用一致，避免混乱。

  5. 考虑可访问性：对于需要屏幕阅读器强调的内容，使用 <strong> 标签而不是 <b> 标签。

好的示例：

html 
<!-- 产品特性列表 -->
<ul>
  <li><b>处理器：</b>Intel i7</li>
  <li><b>内存：</b>16GB DDR4</li>
  <li><b>存储：</b>512GB SSD</li>
</ul>

<!-- 文章目录 -->
<p>
  <b>目录：</b>
  <a href="#section1">1. 引言</a> |
  <a href="#section2">2. 方法</a> |
  <a href="#section3">3. 结果</a>
</p>

<!-- 表格中的强调 -->
<table>
  <tr>
    <th>项目</th>
    <th>数值</th>
  </tr>
  <tr>
    <td>收入</td>
    <td><b>¥100,000</b></td>
  </tr>
</table>

不好的示例：

html 
<!-- 过度使用 -->
<p>
  <b>欢迎</b> 来到我们的网站。<b>我们</b> 提供 <b>优质</b> 的 <b>产品</b> 和 <b>服务</b>。
</p>

<!-- 用于强调重要内容 -->
<p><b>注意：</b>请在5月31日前完成报名。</p> <!-- 应该使用strong -->

<!-- 嵌套过深 -->
<p><b><b>非常重要</b></b>：请立即处理。</p>

浏览器兼容性

<b> 标签在所有现代浏览器中都得到广泛支持，它是HTML规范的基础部分。

总结

<b> 标签是HTML中用于将文本显示为粗体的表现性标签，不传达内容的重要性或强调。它主要用于视觉上突出显示文本，如关键词、产品名称或导航词。在使用时，应注意区分 <b> 标签和 <strong> 标签的语义差异，优先使用语义化标签来表达内容的重要性。

最后更新：2026-02-07