使用 HTML 标签创建示例输出

介绍

HTML 是每个网站的基础，了解创建网页所需的不同元素至关重要。其中一个元素是 <samp> 标签，我们将在本实验中重点介绍它。<samp> 标签用于显示计算机代码的示例或输出。

注意：你可以在 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/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/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70827{{"HTML 示例输出"}} html/head_elems -.-> lab-70827{{"HTML 示例输出"}} html/text_head -.-> lab-70827{{"HTML 示例输出"}} html/inter_elems -.-> lab-70827{{"HTML 示例输出"}} end

创建一个基本的 HTML 页面

创建一个名为 index.html 的新文件。

在这一步中，我们将创建一个基本的 HTML 页面，并设置 <samp> 标签所需的结构。

<!DOCTYPE html>
<html>
    <head>
        <title>Creating a Sample Output with the HTML tag</title>
    </head>
    <body>
        <h1>Using the <samp> Tag</h1>
    </body>
</html>

在上面的代码中，我们添加了一个 HTML 页面的基本结构。我们还添加了一个 <h1> 标签，它将包含页面的标题。

添加 `<samp>` 元素

在这一步中，我们将在页面中添加 <samp> 标签，以创建计算机程序的示例输出。

<!DOCTYPE html>
<html>
    <head>
        <title>Creating a Sample Output with the HTML tag</title>
    </head>
    <body>
        <h1>Using the <samp> Tag</h1>
        <p>Here is an example of using the <samp> tag:</p>
        <samp>Sample Text</samp>
    </body>
</html>

在上面的代码中，我们添加了一个段落标签，用于解释 <samp> 标签的用途。然后，添加了 <samp> 标签，并在其中包含了示例文本 "Sample Text"。

使用 CSS 为 `<samp>` 元素添加样式

CSS 可以用来修改 <samp> 标签的样式。在这一步中，我们将对 <samp> 标签进行一些基本的样式调整。

<!DOCTYPE html>
<html>
    <head>
        <title>Creating a Sample Output with the HTML tag</title>
        <style>
            samp {
                background-color: #f1f1f1;
                padding: 1em;
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <h1>Using the <samp> Tag</h1>
        <p>Here is an example of using the <samp> tag:</p>
        <samp>Sample Text</samp>
    </body>
</html>

在上面的代码中，我们在页面中添加了一个 <style> 标签。在 <style> 标签中，我们为 <samp> 标签定义了背景颜色、内边距和圆角属性。

添加代码输出

在这一步中，我们将展示如何使用 <samp> 标签来显示计算机代码的输出。

<!doctype html>
<html>
  <head>
    <title>Creating a Sample Output with the HTML tag</title>
    <style>
      samp {
        background-color: #f1f1f1;
        padding: 1em;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>Output of a Computer Code:</h1>
    <samp>
      <code> print("Hello World"); </code>
    </samp>
  </body>
</html>

在上面的代码中，我们在 <samp> 标签内添加了一个代码块，以显示计算机代码的输出。

总结

在本实验中，我们学习了 HTML 的 <samp> 标签，它用于在网页中创建计算机代码的示例输出。我们还了解了如何使用 CSS 为其添加样式，以及如何将其与代码块结合使用。

HTML 示例输出

介绍

Skills Graph

创建一个基本的 HTML 页面

添加 <samp> 元素

使用 CSS 为 <samp> 元素添加样式

添加代码输出

总结

添加 `<samp>` 元素

使用 CSS 为 `<samp>` 元素添加样式