HTML 强调文本

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

HTML 中的 <em> 标签用于在网页上为特定文本添加强调或重要性。它非常有用,可以突出显示特定内容并使其更加引人注目。在本实验中,你将学习如何在 HTML 中使用 <em> 标签及其基本语法。

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


Skills Graph

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

添加标题

首先,创建一个名为 index.html 的 HTML 文件,并在你喜欢的代码编辑器中打开它。

让我们从为 HTML 文件添加标题开始。在你的 index.html 文件中输入以下代码。

<!doctype html>
<html>
  <head>
    <title>HTML Em Tag Lab</title>
  </head>
  <body></body>
</html>

使用 HTML <em> 标签

现在我们已经创建了 HTML 文件,是时候使用 <em> 标签了。在接下来的几个步骤中,我们将学习如何使用这个标签及其基本语法。

首先,在你的 HTML 文件中添加一个简短的段落,并使用 <em> 标签来强调某个特定的单词。以下是一个示例:

<p>HTML <em>Emphasized</em> text is important for your web page.</p>

添加更多强调文本

你也可以使用 <em> 标签来强调句子中的多个单词。以下是一个示例:

<p><em>HTML</em> stands for <em>HyperText Markup Language.</em></p>

使用 CSS 为 HTML <em> 标签添加样式

默认情况下,强调文本会以斜体显示。不过,你也可以使用 CSS 来自定义 <em> 标签的样式。以下是一个示例:

<style>
  em {
    font-style: normal;
    font-weight: bold;
  }
</style>
<p><em>CSS is</em> used to style HTML web pages.</p>

添加链接

你也可以在链接中使用 <em> 标签,以强调锚文本。以下是一个示例:

<a href="https://www.wikipedia.org"
  ><em>Wikipedia</em> is a free online encyclopedia.</a
>

总结

恭喜你!在这个实验中,你学习了 HTML <em> 标签,以及如何使用它为网页上的文本添加强调或重要性。你还学习了如何使用 CSS 自定义 <em> 标签的样式。继续练习,成为 HTML 标签和元素的大师吧!

您可能感兴趣的其他 HTML 教程