在本文中,我们将学习如何使用 <b> 标签以及它与 <strong> 标签之间的区别。

HTML 中的 <b> 标签是什么

<b> 标签用于使文本的一部分变为粗体,而不显示任何特殊的重要性。这是使用 <b> 标签的示例。

<p>This is an example of <b>bold text.</b></p>

根据 HTML 标准<b> 标签可以与以下示例一起使用:

文档摘要中的关键字、评论中的产品名称或文章目录

这个例子是在一篇评论中使用 <b> 标签将产品名称加粗

<p>The <b>Sennheiser IE 300 Headphones</b> fit well in your ears and have an incredible sound.</p>

<b> 标签旨在将用户的注意力吸引到一段文本上。这段文本不应具有任何重要性或传达紧迫性或严肃性的语气。

下例是使用 <b> 标签的错误示例:

<p><b>WARNING!!</b> This area is dangerous.</p>

对于这种情况,使用 <strong> 标签更合适,因为它传达出一种严肃的感觉。

HTML<b> 标签和 <strong> 标签的区别

刚开始学习 HTML 时,我认为 <b> 标签和 <strong> 标签是同一回事。造成混淆的部分原因是,它们在大多数浏览器中都具有相同的默认粗体样式。

一个主要区别是,当文本具有很强的重要性或紧迫感或严肃感时,应使用 <strong> 标签。另一方面,<b> 标签用于引起人们对文本范围的关注,而又不会增加其重要性。

下面使用 <strong> 标签的示例告诉用户应首先阅读哪些列表项,并且该列表项比其他两个列表项更重要。

<p>To do list for Monday:</p>
<ul>
    <li><p><strong>Pay rent.</strong></p></li>
    <li><p>Start term paper.</p></li>
    <li><p>Go grocery shopping.</p></li>
</ul>

另一个主要区别是,标题和字幕中不应使用 <b> 标签,可以使用 <strong> 标签。

这是一个使用  <strong> 标签将重要性放在章节标题上的示例。

<h1>Chapter 5: <strong>The Battle</strong></h1>

如何将 class 属性和 <b> 标签结合使用

通常在 <b> 标签中添加 class 属性以添加更多语义。

如果你有一系列句子,则可以在第一个 <p> 标签中添加一个 class,类似 <strong class="lead">,将其标记为主要的句子。

<article>
    <h2>A young boy reunites with birth mother</h2>
    <p><b class="lead">A six year old boy unexpectedly meets his birth mother at the local grocery store.</b></p>
    <p>A young boy and his grandfather were shopping at the grocery store, when a young woman approached them from behind.</p>
    [...]
</article>

应该在 HTML 中使用 <b> 标签给文本增加样式吗

在 HTML 5 中,不应使用 <b> 标签给文本增加样式,而应该使用 CSS font-weight 属性。

使用加粗关键词的示例

 <p class="demo-para">I am using CSS to make the text bold.</p>
.demo-para {
  font-weight: bold;
}

使用数值的示例

.demo-para {
  font-weight: 700;
}

小结

虽然 <b> 标签和 <strong> 标签的效果在浏览器中看起来相似,但是它们的含义确实有所不同。重要的是要知道两者之间的区别,以便可以适当地使用它们。

<b> 标签用于引起对文本范围的注意,但没有特别的重要性。另一方面,如果文本传达出重要性、严肃性或紧迫感,则应使用 <strong> 标签。

希望你喜欢本文并了解何时使用 <b> 标签。

原文:HTML Bold Text Tutorial – How to Use the <b> Tag,作者:Jessica Wilkins