掌握 HTML 加粗文本

介绍

在本实验中，你将学习如何使用 HTML <b> 标签在网页上创建加粗文本。我们还将介绍使用此标签的最佳实践，以及在必要时推荐的替代方案。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70706{{"HTML 加粗文本"}} html/text_head -.-> lab-70706{{"HTML 加粗文本"}} html/para_br -.-> lab-70706{{"HTML 加粗文本"}} html/doc_flow -.-> lab-70706{{"HTML 加粗文本"}} html/inter_elems -.-> lab-70706{{"HTML 加粗文本"}} end

设置 HTML 文件

在你的代码编辑器中创建一个名为 index.html 的新文件。在文档的 body 部分，添加一个包含需要加粗文本的段落。

<body>
  <p>Here is some text that needs to be bold.</p>
</body>

添加 b 标签

要使文本加粗，可以使用 <b> 标签将其包裹起来，如下所示：

<body>
  <p>Here is some <b>bold</b> text.</p>
</body>

默认 CSS 样式

<b> 标签的默认 CSS 样式如下：

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

最佳实践

避免过度使用 <b> 标签。仅在需要强调的重要文本上使用它。
对于标题，请使用 <h1> 到 <h6> 标签，而不是 <b> 标签。
对于强调文本，请使用 <em> 标签。此标签会使用斜体文本而非加粗文本。
对于重要文本，请使用 <strong> 标签。此标签会使文本加粗，并向搜索引擎表明其重要性。

总结

就是这样！你现在已经学会了如何使用 HTML <b> 标签在网页上创建加粗文本。请记住，要适当使用此标签，并遵循最佳实践以实现最佳的标记效果。