HTML 计算机代码

HTMLHTMLBeginner
立即练习

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

介绍

在网页开发中,我们有时需要在网页上展示与编程或计算机相关的内容。当我们想要显示特定的术语,比如某个函数名或变量名时,可以使用 <code> 标签将其包裹起来。该标签会将包裹的文本字体更改为等宽字体,例如 courier

注意:你可以在 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/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") html/AdvancedElementsGroup -.-> html/custom_attr("`Custom Data Attributes`") subgraph Lab Skills html/basic_elems -.-> lab-70725{{"`HTML 计算机代码`"}} html/text_head -.-> lab-70725{{"`HTML 计算机代码`"}} html/doc_flow -.-> lab-70725{{"`HTML 计算机代码`"}} html/inter_elems -.-> lab-70725{{"`HTML 计算机代码`"}} html/custom_attr -.-> lab-70725{{"`HTML 计算机代码`"}} end

添加 Code 标签

首先,在你的本地系统中创建一个 index.html 文件,并使用你选择的代码编辑器打开它。

接下来,让我们在 HTML 文件中添加 <code> 标签。这个标签的语法非常简单,它有一个开始标签和一个结束标签,用于包裹你想要显示的文本。

<body>
  <!-- 添加 code 标签 -->
  <p>这是一个在 HTML 中使用 <code>code</code> 标签的示例。</p>
</body>

在上面的代码块中,我们将 code 这个术语包裹在 <code> 标签内。这使得包裹的文本以等宽字体显示。

使用 Pre 标签显示多行代码

如果你需要显示多行的编程代码,可以将 <pre> 标签与 <code> 标签结合使用。让我们通过将以下代码添加到你的 index.html 文件中来看看这是如何工作的。

<body>
  <!-- 使用 pre 标签与 code 标签 -->
  <pre>
      <code>
         function multiply(a, b) {
            return a * b;
         }
         // Call the function
         multiply(2, 3);
      </code>
   </pre>
</body>

在这个代码块中,我们使用 <pre> 标签来表示我们希望以块格式显示代码。在 <pre> 标签内,我们添加了 <code> 标签来表示我们正在包裹编程代码。

使用全局属性和事件属性

你可以将全局属性和事件属性与 <code> 标签结合使用。

<body>
  <!-- 使用全局属性与 code 标签 -->
  <p>
    <code class="highlight" style="color: red" title="This is a title"
      >Some code</code
    >
  </p>
</body>

在上面的代码块中,我们在 <code> 标签中使用了 classstyletitle 属性。

添加默认 CSS 样式

如果你没有为 <code> 标签指定任何样式,它将使用默认的 CSS 设置。大多数浏览器会将 monospace 作为 <code> 标签的默认字体族(font-family)。

<body>
  <!-- HTML code 标签的默认 CSS 样式 -->
  <p>
    <code>Default CSS style</code>
  </p>
</body>

总结

<code> 标签用于包裹与编程或计算机相关的内容。通过使用此标签,你可以将包裹的文本以等宽字体(如 courier)显示。你还可以将 <pre> 标签与 <code> 标签结合使用,以显示多行的编程代码。<code> 标签支持全局属性和事件属性。如果你没有为 <code> 标签指定任何样式,它将使用默认的 CSS 设置,其中 monospace 是默认的字体族(font-family)。

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